[Feat] 공통 컴포넌트 Appbar, Toast 편집

[youngju6143]

📌 개요

#90 [Feat] 공통 컴포넌트 Appbar, Toast 편집

📋 변경사항

• 공통 컴포넌트 Appbar, Toast에 새로운 케이스를 추가했어요
  • Appbar : 받은 명함 페이지, 설정 페이지
  • Toast : success

화면

기능	스크린샷
Appbar
Toast

✅ 체크사항

• 기능이 정상적으로 동작하는지 확인
• 코드 스타일 및 규칙 준수 확인
• UI가 변경된 경우 스크린샷 첨부 여부 확인

Summary by CodeRabbit

• New Features
  • Toast 알림에서 오류 아이콘이 업데이트되고 성공 아이콘이 추가되어 알림의 시각적 표현이 개선되었습니다.
  • 앱바에 새로운 페이지 옵션과 추가 버튼 클릭 기능이 도입되었으며, 제목 표시 및 레이아웃 개선을 통해 사용자 내비게이션이 향상되었습니다.

[coderabbitai]

Caution

Review failed

The pull request is closed.

📝 Walkthrough

Walkthrough

이번 PR은 Toast 컴포넌트와 Appbar 컴포넌트의 UI와 이벤트 핸들링을 수정합니다. Toast에서는 기존 error 아이콘을 새로운 warning 아이콘으로 교체하고, 새로운 success 아이콘을 추가했습니다. Appbar에서는 페이지 타입에 'mypage'와 'received'가 추가되었으며, 이에 따라 좌측 및 우측 아이콘 렌더링 로직과 이벤트 핸들러(onRightClickSecond)가 업데이트되어 레이아웃과 인터랙션이 개선되었습니다.

Changes

파일	변경 요약
src/shared/ui/Toast/index.tsx	error 아이콘이 /icons/toast-icon/warningIcon.svg로 변경되고 클래스명이 text-error-medium으로 업데이트됨. 또한, success 아이콘(/icons/toast-icon/checkIcon.svg)이 추가됨.
src/shared/ui/appbar.tsx	페이지 타입에 'mypage'와 'received' 추가, onRightClickSecond 이벤트 핸들러 도입. renderLeftIcon과 renderRightIcon 함수 및 Appbar 컴포넌트의 시그니처가 업데이트되어 레이아웃 및 아이콘 구현이 수정됨.

Sequence Diagram(s)

sequenceDiagram
    participant U as 사용자
    participant A as Appbar 컴포넌트
    participant R1 as onRightClick
    participant R2 as onRightClickSecond

    U->>A: "받은" 페이지 우측 아이콘 클릭 (첫번째)
    A->>R1: onRightClick 호출

    U->>A: "받은" 페이지 우측 아이콘 클릭 (두번째)
    A->>R2: onRightClickSecond 호출

Loading

Possibly related issues

• [Feat] 공통 컴포넌트 Appbar, Toast 편집 #90: Toast 컴포넌트의 아이콘 관련 수정 사항과 연결되며, 기존 이슈의 범위와 일부 연관성이 있으나 코드 수준은 차이가 있음.

Suggested reviewers

• jangwonyoon
• JaeIn1
• evenway2025
• semnil5202

---

📜 Recent review details

Configuration used: .coderabbit.yml
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 96ba5b6 and 7130709.

📒 Files selected for processing (1)

• src/shared/ui/appbar.tsx (4 hunks)

✨ Finishing Touches

• 📝 Generate Docstrings

---

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Generate unit testing code for this file.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai generate unit testing code for this file.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and generate unit testing code.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai generate docstrings to generate docstrings for this PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[coderabbitai]

Actionable comments posted: 1

🔭 Outside diff range comments (1)

src/shared/ui/Toast/index.tsx (1)

48-50: 🛠️ Refactor suggestion

성공 토스트를 표시할 수 있는 기능이 없습니다.

현재 Toast 컴포넌트는 success 아이콘을 정의했지만, 실제로 성공 토스트를 표시하는 방법이 없습니다. 버튼 클릭 시 항상 error 토스트만 표시됩니다. toastType과 같은 프로퍼티를 추가하여 success 토스트도 표시할 수 있도록 개선해 보세요.

type toastProps = {
  buttonText: string;
  message: string;
+ toastType?: 'success' | 'error';
};

function Toast({ buttonText, message, toastType = 'error' }: toastProps) {
  return (
    <>
      <Toaster
        icons={{
          success: (
            <Image
              src="/icons/toast-icon/checkIcon.svg"
              className="text-secondary"
              alt="success-icon"
              width={24}
              height={24}
            />
          ),
          error: (
            <Image
              src="/icons/toast-icon/warningIcon.svg"
              className="text-error-medium"
              alt="error-icon"
              width={24}
              height={24}
            />
          ),
        }}
        position="bottom-right"
      />
      <button 
        className="text-white" 
-       onClick={() => toast.error(message)}
+       onClick={() => toastType === 'success' ? toast.success(message) : toast.error(message)}
      >
        {buttonText}
      </button>
    </>
  );
}

🧹 Nitpick comments (5)

src/shared/ui/Toast/index.tsx (1)

27-35: alt 속성 텍스트가 적절하지 않습니다.

현재 success 아이콘에 사용된 alt 텍스트가 "error-icon"으로 되어 있습니다. 이는 접근성 측면에서 혼란을 줄 수 있습니다. 성공 아이콘에 맞는 alt 텍스트로 변경해주세요.

  <Image
    src="/icons/toast-icon/checkIcon.svg"
    className="text-secondary"
-   alt="error-icon"
+   alt="success-icon"
    width={24}
    height={24}
  />

src/shared/ui/appbar.tsx (4)

77-78: JSDoc이 업데이트된 page 타입과 일치하지 않습니다.

현재 JSDoc은 page 파라미터가 'main' | 'detail' | 'create'만 포함한다고 설명하고 있지만, 실제 타입은 'mypage'와 'received'도 포함하고 있습니다. 문서를 업데이트하여 일관성을 유지해주세요.

- * @param {string} page - 어떤 페이지인지 나타냅니다 ('main' | 'detail' | 'create')
+ * @param {string} page - 어떤 페이지인지 나타냅니다 ('main' | 'detail' | 'create' | 'mypage' | 'received')

---

81-83: title 파라미터에 대한 JSDoc 설명이 누락되었습니다.

새로 추가된 title 파라미터에 대한 JSDoc 설명이 누락되었습니다. 문서화를 통해 컴포넌트 사용 방법을 명확히 해주세요.

 * @param {function} onRightClick - 오른쪽 버튼 클릭 시 실행할 함수
 * @param {function} onRightClickSecond - (받은 명함) 두 번째 오른쪽 버튼 클릭 시 실행할 함수
+ * @param {string} title - 헤더 중앙에 표시될 제목 텍스트
 *
 * @returns {JSX.Element} - appbar 컴포넌트

---

32-32: UI 일관성 개선이 필요합니다.

'received' 케이스에서는 다른 케이스와 달리 버튼 대신 h1 요소를 반환합니다. 이는 레이아웃 일관성 및 사용자 경험에 영향을 줄 수 있습니다. 헤더 내 요소들의 UI 패턴을 일관되게 유지하는 것이 좋습니다.

'received' 케이스에서도 다른 케이스처럼 버튼을 사용하거나, 또는 전체 케이스에서 더 일관된 UI 패턴을 적용하는 것을 고려해보세요.

---

16-36: 확장성을 고려한 코드 구조 개선이 필요합니다.

현재 renderLeftIcon과 renderRightIcon 함수의 switch 케이스가 계속 늘어나고 있습니다. 이런 방식은 새로운 페이지 타입이 추가될 때마다 지속적인 수정이 필요하며, 유지보수가 어려워질 수 있습니다.

페이지 타입별 설정을 객체나 맵 형태로 관리하여 switch 문을 제거하는 방식을 고려해보세요. 이렇게 하면 새로운 페이지 타입을 추가할 때 함수 수정 없이 설정 객체만 확장하면 됩니다.

예시:

const pageConfigs = {
  main: {
    leftIcon: {
      component: <Image src="/icons/logo.svg" alt="로고" width={72} height={24} />,
      showAsButton: true
    },
    rightIcon: {
      component: <Image src="/icons/alarmIcon.svg" alt="알람 아이콘" width={24} height={24} />,
      showAsButton: true
    }
  },
  // 다른 페이지 타입들...
};

function renderLeftIcon({ page, onLeftClick }: Pick<appbarPropsType, 'page' | 'onLeftClick'>) {
  const config = pageConfigs[page]?.leftIcon;
  if (!config) return null;
  
  return config.showAsButton ? (
    <button onClick={onLeftClick}>{config.component}</button>
  ) : config.component;
}

📜 Review details

Configuration used: .coderabbit.yml
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between bf579f5 and 96ba5b6.

⛔ Files ignored due to path filters (3)

• public/icons/searchIcon.svg is excluded by !**/*.svg
• public/icons/toast-icon/checkIcon.svg is excluded by !**/*.svg
• public/icons/toast-icon/warningIcon.svg is excluded by !**/*.svg

📒 Files selected for processing (2)

• src/shared/ui/Toast/index.tsx (1 hunks)
• src/shared/ui/appbar.tsx (4 hunks)

[evenway2025]

제 기준에서 이 코드는 이븐하게 잘 작성된 것 같습니다. 고생하셨습니다. Approve 드리겠습니다. 🎊