Skip to content

Refactor(client): 파일 구조 변경 및 디자인 통일#65

Merged
karnelll merged 7 commits intodevelopfrom
refactor/#62/component-structure-reorganization
Jul 13, 2025
Merged

Refactor(client): 파일 구조 변경 및 디자인 통일#65
karnelll merged 7 commits intodevelopfrom
refactor/#62/component-structure-reorganization

Conversation

@karnelll
Copy link
Contributor

@karnelll karnelll commented Jul 13, 2025

📌 Related Issues

관련된 Issue를 태그해주세요. (e.g. - close #25)

✅ 체크 리스트

  • PR 제목의 형식을 잘 작성했나요? e.g. Feat(client): SVG 파일 경로 수정 및 최적화
  • 빌드가 성공했나요? (npm run build)

🎯 Tasks

파일 구조 최적화

  • 대시보드 전용 컴포넌트를 /pages/dashboard/components로 이동하여 명확한 분리
  • 공통 컴포넌트는 shared 폴더에 유지
  • 컴포넌트 계층 구조 개선 (features → sections → ui)

대시보드 기능 개선

  • 북마크 카드에서 읽지 않은 카드의 태두리를 main/main400 색상으로 변경
  • 데일리 리마인더 카드의 도토리 이미지 크기를 24x24로 조정
  • 도토리 이미지와 텍스트 간격을 10px로 설정

디자인 시스템 개선

  • 아웃라인(outline)을 보더(border)로 통일하여 일관성 향상
  • 디자인 토큰 적용으로 하드코딩된 색상 제거

코드 품질 개선

  • 포맷팅 적용
  • 빌드 성공 확인
  • TypeScript 오류 수정

📁 파일 구조 변경사항

Before (기존 구조)

apps/client/src/
├── shared/
│   ├── components/
│   │   ├── features/          # 대시보드 전용 컴포넌트들이 공통 폴더에 혼재
│   │   ├── ui/               # 대시보드 전용 UI 컴포넌트들이 공통 폴더에 혼재
│   │   └── ...
│   └── constants/            # 대시보드 전용 상수들이 공통 폴더에 혼재
├── assets/                   # SVG 파일들이 public에서 이동됨
└── pages/dashboard/
    └── components/           # 일부 컴포넌트만 존재

After (개선된 구조)

apps/client/src/
├── shared/                   # 진짜 공통 컴포넌트만 유지
│   ├── components/
│   │   ├── ui/
│   │   │   ├── display/      # EmptyState 등 공통 UI
│   │   │   └── layout/       # Header 등 공통 레이아웃
│   │   └── ...
│   ├── apis/                 # 공통 API
│   ├── hooks/                # 공통 훅
│   ├── types/                # 공통 타입
│   └── utils/                # 공통 유틸
├── assets/                   # SVG 파일들이 src/assets로 이동하여 번들링 최적화
│   ├── characters/           # 캐릭터 이미지
│   ├── icons/                # 아이콘들
│   ├── illustrations/        # 일러스트레이션
│   └── brand/                # 브랜드 관련 이미지
└── pages/dashboard/
    ├── components/           # 대시보드 전용 컴포넌트들로 명확한 분리
    │   ├── features/         # 대시보드 전용 기능 컴포넌트
    │   │   ├── BookmarkCategory.tsx
    │   │   ├── SectionTitle.tsx
    │   │   ├── Timer.tsx
    │   │   └── ...
    │   ├── sections/         # 대시보드 섹션 컴포넌트
    │   │   ├── BookmarkSection.tsx
    │   │   ├── DailyReminderSection.tsx
    │   │   └── ...
    │   ├── ui/               # 대시보드 전용 UI 컴포넌트
    │   │   ├── cards/        # 카드 컴포넌트들
    │   │   ├── buttons/      # 버튼 컴포넌트들
    │   │   └── ...
    │   └── ...
    ├── constants/            # 대시보드 전용 상수
    ├── hooks/                # 대시보드 전용 훅
    └── mockData.ts           # 대시보드 목 데이터

주요 개선점

  1. 명확한 책임 분리: /pages/dashboard/components로 대시보드 전용 컴포넌트를 명확히 분리
  2. 공통 컴포넌트 정리: shared 폴더에는 진짜 공통으로 사용되는 컴포넌트만 유지
  3. 컴포넌트 계층 구조: features → sections → ui 순으로 명확한 계층 구조
  4. 확장성 고려: 향후 다른 페이지 추가 시에도 동일한 구조 적용 가능

⭐ PR Point (To Reviewer)

주요 변경사항

  1. 컴포넌트 구조 개선: /pages/dashboard/components로 대시보드 전용 컴포넌트를 명확히 분리
  2. UI/UX 개선: 디자인 통일 및 수정

검토 포인트

  • /pages/dashboard/components로의 컴포넌트 이동이 적절한지 확인
  • shared 폴더의 공통 컴포넌트 분리가 올바르게 되었는지 확인
  • import 경로 변경이 올바르게 되었는지 확인

🔧 기술적 개선사항

컴포넌트 구조 개선

  • 명확한 분리: 대시보드 전용 vs 공통 컴포넌트 구분
  • 계층 구조: features → sections → ui 순으로 명확한 의존성
  • 재사용성: 공통 컴포넌트의 명확한 분리로 재사용성 향상

Summary by CodeRabbit

  • 새로운 기능

    • 대시보드에 'LevelInfoSection', 'DailyReminderSection' 신규 섹션 컴포넌트가 추가되었습니다.
    • 'Tooltip' 컴포넌트가 새롭게 도입되었습니다.
    • 주요 섹션 및 피처 컴포넌트의 중앙화된 index 파일이 도입되어 코드 구조가 개선되었습니다.
  • 버그 수정 및 개선

    • 버튼, 카드, 배지 등 UI 요소의 테두리 스타일이 outline에서 border로 변경되어 일관성이 향상되었습니다.
  • 구조 및 코드 정리

    • 대시보드 전용 컴포넌트들이 /pages/dashboard/components로 명확히 분리되었습니다.
    • 사용하지 않는 컴포넌트, 에러 바운더리, 불필요한 재출력 파일 등이 삭제되었습니다.
    • import 경로가 상대 경로로 통일되어 유지보수성이 높아졌습니다.
  • 문서화 및 타입

    • 일부 타입 및 인터페이스가 export로 변경되어 재사용성이 향상되었습니다.

karnelll added 2 commits July 13, 2025 07:39
- Thumbnail, LevelInfoModal, Tooltip 대시보드 전용 폴더로 이동
- 관련 import 경로 일괄 수정
- shared/ui에서 export 및 파일 제거
- 구조 명확화로 유지보수성 향상
@karnelll karnelll self-assigned this Jul 13, 2025
@karnelll karnelll added 🪄 Refactor 코드 리팩토링 서희 labels Jul 13, 2025
@coderabbitai
Copy link

coderabbitai bot commented Jul 13, 2025

Walkthrough

이번 변경에서는 대시보드 관련 컴포넌트와 상수, 유틸리티 파일들의 파일 구조가 대대적으로 개편되었습니다. 공통(shared) 폴더에 있던 대시보드 관련 파일들이 대시보드 feature별 디렉토리로 이동 및 재구성되었으며, 관련된 import/export 경로와 index 파일이 수정 및 추가되었습니다. 일부 불필요한 재-내보내기 파일과 에러 바운더리, 중앙화된 feature export 파일 등은 삭제되었습니다.

Changes

파일/폴더 그룹 변경 요약
.../dashboard/components/BookmarkCategory.tsx, SectionTitle.tsx, DailyReminderSection.tsx 대시보드 feature 컴포넌트의 단순 재-내보내기 파일 삭제
.../dashboard/components/features/index.ts, .../sections/index.ts feature 및 section 컴포넌트의 중앙화된 index 파일 신규 추가
.../dashboard/components/features/, .../dashboard/components/sections/, .../ui/* feature, section, ui 컴포넌트의 import 경로 및 스타일, 일부 props, 내부 구조 리팩토링
.../dashboard/components/index.ts export 구조를 명시적 default export에서 wildcard export로 변경
.../dashboard/constants/index.ts, levelData.ts, tooltipMessages.ts, mockData.ts 상수 및 mock 데이터 import 경로를 shared에서 dashboard 내부로 변경
.../dashboard/dashboard.tsx, .../dashboard/hooks/useDashboard.ts useDashboard 훅의 반환값 및 관련 prop 제거, 컴포넌트 import 경로 수정
.../dashboard/components/ui/feedback/Tooltip.tsx Tooltip 컴포넌트 신규 추가
.../dashboard/components/sections/DailyReminderSection.tsx, LevelInfoSection.tsx DailyReminderSection, LevelInfoSection 컴포넌트 신규 추가
.../shared/components/features/index.ts, LevelInfoSection.tsx, .../errorBoundary.tsx, .../ui/Tooltip.tsx 중앙화된 feature export, LevelInfoSection, ErrorBoundary, Tooltip 컴포넌트 삭제
.../shared/components/index.ts, .../shared/index.ts, .../shared/components/ui/index.ts feature, ErrorBoundary, constants, 일부 UI 컴포넌트 export 제거
.../shared/components/ui/display/EmptyStatePresets.ts, EmptyState.tsx, ReusableEmptyState.tsx EmptyState 관련 props 및 preset 구조, 스타일, export 방식 일부 수정
.../shared/utils/cn.ts, .../shared/types/components.ts, .../shared/utils/styleUtils.ts 불필요한 공백 제거, 스타일 클래스 일부 수정
.../client/tsconfig.json, .../vite-env.d.ts 경로 별칭 확장, SVG import 타입 선언 추가
.../routes/router.tsx 대시보드 라우트의 errorElement 속성 제거
.../shared/components/ui/layout/Header.tsx, .../dashboard/components/ui/buttons/AllViewButton.tsx asset import 경로 변경, 스타일 클래스 일부 수정
packages/design-system/src/icons/iconNames.ts 코드 스타일(따옴표, 배열, 타입 선언) 변경

Sequence Diagram(s)

sequenceDiagram
    participant App
    participant DashboardPage
    participant FeaturesIndex
    participant SectionsIndex
    participant FeatureComponent
    participant SectionComponent

    App->>DashboardPage: 대시보드 페이지 렌더링
    DashboardPage->>FeaturesIndex: feature 컴포넌트 import
    FeaturesIndex->>FeatureComponent: 각 feature 컴포넌트 export
    DashboardPage->>SectionsIndex: section 컴포넌트 import
    SectionsIndex->>SectionComponent: 각 section 컴포넌트 export
    DashboardPage->>SectionComponent: 섹션 렌더링
    DashboardPage->>FeatureComponent: feature 렌더링
Loading

Assessment against linked issues

Objective Addressed Explanation
대시보드 파일 구조 변경 및 공통 폴더 내 파일 분리/정리 (#62)
shadcn/ui 디자인 시스템 초기 세팅 및 관련 구조 적용 (#25) design-system 관련 실제 코드 변경은 본 PR에 없음

Assessment against linked issues: Out-of-scope changes

Code Change (file_path) Explanation
design-system 관련 설정, shadcn-ui 도입 내용 없음 (전체) #25 이슈의 design-system/shadcn-ui 초기 세팅에 해당하는 실제 코드 추가/설정이 본 PR에 보이지 않음

Possibly related PRs

  • Pinback-Team/pinback-client#43: 이 PR은 이번 PR에서 삭제된 shared feature 컴포넌트 및 중앙화된 export 파일을 도입하는 내용으로, 구조 개편과 직접적으로 연결됨.

Suggested labels

정민

Suggested reviewers

  • constantly-dev
  • jllee000

Poem

🐇
폴더 속 파일들이 이사했네,
공통과 대시보드, 경로가 새로워졌지!
불필요한 짐은 정리하고,
컴포넌트들은 깔끔하게 줄을 섰네.
코드 토끼가 깡총깡총,
구조 개편 완성에 박수를 보내요!
🥕✨


📜 Recent review details

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

📥 Commits

Reviewing files that changed from the base of the PR and between 6400620 and feb135a.

📒 Files selected for processing (7)
  • apps/client/src/pages/dashboard/components/features/index.ts (1 hunks)
  • apps/client/src/pages/dashboard/components/index.ts (1 hunks)
  • apps/client/src/pages/dashboard/components/sections/index.ts (1 hunks)
  • apps/client/src/pages/dashboard/components/ui/cards/BookmarkCard.tsx (2 hunks)
  • apps/client/src/pages/dashboard/components/ui/cards/DailyReminderCard.tsx (4 hunks)
  • apps/client/src/pages/dashboard/constants/index.ts (1 hunks)
  • apps/client/src/shared/components/ui/display/ReusableEmptyState.tsx (1 hunks)
✅ Files skipped from review due to trivial changes (1)
  • apps/client/src/pages/dashboard/components/sections/index.ts
🚧 Files skipped from review as they are similar to previous changes (6)
  • apps/client/src/shared/components/ui/display/ReusableEmptyState.tsx
  • apps/client/src/pages/dashboard/constants/index.ts
  • apps/client/src/pages/dashboard/components/index.ts
  • apps/client/src/pages/dashboard/components/features/index.ts
  • apps/client/src/pages/dashboard/components/ui/cards/DailyReminderCard.tsx
  • apps/client/src/pages/dashboard/components/ui/cards/BookmarkCard.tsx
✨ 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.
    • Explain this complex logic.
    • 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 explain this code block.
    • @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 explain its main purpose.
    • @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.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

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 generate sequence diagram to generate a sequence diagram of the changes in 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.

@karnelll karnelll changed the title Refactor/#62/component structure reorganization Refactor(client): 파일 구조 변경 및 디자인 통일 Jul 13, 2025
Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 6

🧹 Nitpick comments (5)
packages/design-system/src/icons/iconNames.ts (1)

2-3: 아이콘 이름 표기법 통일을 고려해 주세요
'close-button'(kebab-case)와 'ic_error'(snake-case)가 혼재되어 있습니다. 동일한 네이밍 컨벤션을 유지하면 검색·자동완성·유지보수성이 개선됩니다.

apps/client/src/shared/components/ui/display/EmptyState.tsx (1)

17-19: className 병합은 clsx(혹은 classnames) 사용이 가독성·안정성 측면에서 더 나음

템플릿 리터럴로 직접 병합하면 undefined"undefined" 문자열이 들어갈 가능성이 있습니다.

- className={`inline-flex flex-col items-center justify-start gap-0 ${className || ''}`}
+ className={clsx(
+   'inline-flex flex-col items-center justify-start gap-0',
+   className,
+ )}
apps/client/src/pages/dashboard/components/ui/buttons/AllViewButton.tsx (1)

1-1: 아이콘 import 방식 변경에 대한 검토 필요

아이콘을 모듈 import에서 직접 문자열 경로로 변경하셨네요. 이 방식은 번들링 최적화와 타입 안전성 관점에서 고려가 필요합니다.

더 나은 방식을 위해 다음을 고려해보세요:

-const arrowUp = '/assets/icons/ui/arrow-up.svg';
+import arrowUp from '/assets/icons/ui/arrow-up.svg';

또는 아이콘 컴포넌트를 사용하는 방식도 고려할 수 있습니다.

apps/client/src/pages/dashboard/components/sections/BookmarkSection.tsx (1)

36-43: 코드 가독성 개선과 함께 향후 구현이 필요한 부분이 있습니다.

필터링 로직의 포맷팅이 개선되어 가독성이 좋아졌습니다. 다만 현재 mock 구현에서는 카테고리와 관계없이 항상 true를 반환하고 있어 실제 필터링이 작동하지 않습니다.

실제 카테고리별 필터링 로직을 구현하는데 도움이 필요하시면 말씀해주세요. 북마크 데이터 구조에 맞는 적절한 필터링 로직을 제안드릴 수 있습니다.

apps/client/src/pages/dashboard/dashboard.tsx (1)

48-52: 추가 wrapper div의 목적을 명확히 해주세요.

기존 구조에 추가적인 <div className="mt-8"> wrapper가 추가되었습니다. 이미 상위에 mt-8 클래스가 있는 section이 있는데, 이 추가 wrapper의 목적이 명확하지 않습니다.

다음과 같이 단순화할 수 있을 것 같습니다:

           <section className="mb-8 mt-8">
-            <div className="mt-8">
-              <div className="flex justify-center">
-                <ReusableEmptyState preset="url" />
-              </div>
+            <div className="flex justify-center">
+              <ReusableEmptyState preset="url" />
             </div>
           </section>
📜 Review details

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

📥 Commits

Reviewing files that changed from the base of the PR and between efde1cd and 9ebfbcb.

⛔ Files ignored due to path filters (21)
  • apps/client/public/assets/brand/logo.svg is excluded by !**/*.svg
  • apps/client/public/assets/characters/acorn/bookmark-card.svg is excluded by !**/*.svg
  • apps/client/public/assets/characters/acorn/level.svg is excluded by !**/*.svg
  • apps/client/public/assets/characters/acorn/stamp.svg is excluded by !**/*.svg
  • apps/client/public/assets/characters/chippy/level-1.svg is excluded by !**/*.svg
  • apps/client/public/assets/characters/chippy/level-2.svg is excluded by !**/*.svg
  • apps/client/public/assets/characters/chippy/level-3.svg is excluded by !**/*.svg
  • apps/client/public/assets/characters/chippy/level-4.svg is excluded by !**/*.svg
  • apps/client/public/assets/characters/chippy/level-5.svg is excluded by !**/*.svg
  • apps/client/public/assets/icons/shapes/polygon.svg is excluded by !**/*.svg
  • apps/client/public/assets/icons/ui/arrow-up.svg is excluded by !**/*.svg
  • apps/client/public/assets/icons/ui/details-white.svg is excluded by !**/*.svg
  • apps/client/public/assets/icons/ui/details.svg is excluded by !**/*.svg
  • apps/client/public/assets/icons/ui/gray-circle.svg is excluded by !**/*.svg
  • apps/client/public/assets/illustrations/cards/memo.svg is excluded by !**/*.svg
  • apps/client/public/assets/illustrations/cards/thumbnail.svg is excluded by !**/*.svg
  • apps/client/public/assets/illustrations/empty-states/information.svg is excluded by !**/*.svg
  • apps/client/public/assets/illustrations/empty-states/url.svg is excluded by !**/*.svg
  • apps/client/public/assets/react.svg is excluded by !**/*.svg
  • apps/client/public/vite.svg is excluded by !**/*.svg
  • apps/client/src/assets/icons/ui/info-gray.svg is excluded by !**/*.svg
📒 Files selected for processing (45)
  • apps/client/src/pages/dashboard/components/BookmarkCategory.tsx (0 hunks)
  • apps/client/src/pages/dashboard/components/DailyReminderSection.tsx (0 hunks)
  • apps/client/src/pages/dashboard/components/SectionTitle.tsx (0 hunks)
  • apps/client/src/pages/dashboard/components/features/BookmarkCategory.tsx (4 hunks)
  • apps/client/src/pages/dashboard/components/features/LevelInfoItem.tsx (2 hunks)
  • apps/client/src/pages/dashboard/components/features/SectionContent.tsx (2 hunks)
  • apps/client/src/pages/dashboard/components/features/Timer.tsx (1 hunks)
  • apps/client/src/pages/dashboard/components/features/index.ts (1 hunks)
  • apps/client/src/pages/dashboard/components/index.ts (1 hunks)
  • apps/client/src/pages/dashboard/components/sections/BookmarkSection.tsx (2 hunks)
  • apps/client/src/pages/dashboard/components/sections/DailyReminderSection.tsx (1 hunks)
  • apps/client/src/pages/dashboard/components/sections/LevelInfoSection.tsx (1 hunks)
  • apps/client/src/pages/dashboard/components/sections/TestSection.tsx (1 hunks)
  • apps/client/src/pages/dashboard/components/sections/index.ts (1 hunks)
  • apps/client/src/pages/dashboard/components/ui/buttons/AllViewButton.tsx (1 hunks)
  • apps/client/src/pages/dashboard/components/ui/cards/BookmarkCard.tsx (2 hunks)
  • apps/client/src/pages/dashboard/components/ui/cards/DailyReminderCard.tsx (4 hunks)
  • apps/client/src/pages/dashboard/components/ui/cards/Thumbnail.tsx (1 hunks)
  • apps/client/src/pages/dashboard/components/ui/feedback/Tooltip.tsx (1 hunks)
  • apps/client/src/pages/dashboard/components/ui/modals/LevelInfoModal.tsx (1 hunks)
  • apps/client/src/pages/dashboard/constants/index.ts (1 hunks)
  • apps/client/src/pages/dashboard/constants/levelData.ts (1 hunks)
  • apps/client/src/pages/dashboard/constants/tooltipMessages.ts (1 hunks)
  • apps/client/src/pages/dashboard/dashboard.tsx (3 hunks)
  • apps/client/src/pages/dashboard/hooks/useDashboard.ts (2 hunks)
  • apps/client/src/pages/dashboard/mockData.ts (2 hunks)
  • apps/client/src/pages/notFound.tsx (1 hunks)
  • apps/client/src/routes/router.tsx (0 hunks)
  • apps/client/src/shared/apis/timerApi.ts (1 hunks)
  • apps/client/src/shared/components/errorBoundary.tsx (0 hunks)
  • apps/client/src/shared/components/features/LevelInfoSection.tsx (0 hunks)
  • apps/client/src/shared/components/features/index.ts (0 hunks)
  • apps/client/src/shared/components/index.ts (0 hunks)
  • apps/client/src/shared/components/ui/display/EmptyState.tsx (3 hunks)
  • apps/client/src/shared/components/ui/display/EmptyStatePresets.ts (1 hunks)
  • apps/client/src/shared/components/ui/display/ReusableEmptyState.tsx (1 hunks)
  • apps/client/src/shared/components/ui/feedback/Tooltip.tsx (0 hunks)
  • apps/client/src/shared/components/ui/index.ts (0 hunks)
  • apps/client/src/shared/components/ui/layout/Header.tsx (1 hunks)
  • apps/client/src/shared/index.ts (0 hunks)
  • apps/client/src/shared/types/components.ts (0 hunks)
  • apps/client/src/shared/utils/cn.ts (1 hunks)
  • apps/client/src/shared/utils/styleUtils.ts (2 hunks)
  • apps/client/tsconfig.json (1 hunks)
  • packages/design-system/src/icons/iconNames.ts (1 hunks)
💤 Files with no reviewable changes (12)
  • apps/client/src/shared/types/components.ts
  • apps/client/src/shared/components/index.ts
  • apps/client/src/routes/router.tsx
  • apps/client/src/pages/dashboard/components/BookmarkCategory.tsx
  • apps/client/src/shared/components/features/index.ts
  • apps/client/src/shared/index.ts
  • apps/client/src/shared/components/ui/feedback/Tooltip.tsx
  • apps/client/src/pages/dashboard/components/DailyReminderSection.tsx
  • apps/client/src/shared/components/errorBoundary.tsx
  • apps/client/src/shared/components/ui/index.ts
  • apps/client/src/pages/dashboard/components/SectionTitle.tsx
  • apps/client/src/shared/components/features/LevelInfoSection.tsx
🧰 Additional context used
🧠 Learnings (19)
apps/client/src/pages/dashboard/mockData.ts (1)
Learnt from: constantly-dev
PR: Pinback-Team/pinback-client#30
File: apps/extension/src/App.tsx:10-21
Timestamp: 2025-07-08T11:47:10.642Z
Learning: In apps/extension/src/App.tsx, the InfoBox component currently uses a hardcoded external URL for the icon prop as a temporary static placeholder. The plan is to replace this with dynamic favicon extraction from bookmarked websites in future iterations.
apps/client/src/shared/components/ui/display/ReusableEmptyState.tsx (1)
Learnt from: constantly-dev
PR: Pinback-Team/pinback-client#30
File: apps/extension/src/components/InfoBox/InfoBox.tsx:10-11
Timestamp: 2025-07-08T11:47:27.279Z
Learning: In React TypeScript components, prefer semantic prop names with union types over abstract version numbers. For example, use `size: 'small' | 'large'` instead of `version: 1 | 2` for better code readability, type safety, and extensibility.
apps/client/src/pages/dashboard/components/ui/cards/Thumbnail.tsx (1)
Learnt from: constantly-dev
PR: Pinback-Team/pinback-client#30
File: apps/extension/src/App.tsx:10-21
Timestamp: 2025-07-08T11:47:10.642Z
Learning: In apps/extension/src/App.tsx, the InfoBox component currently uses a hardcoded external URL for the icon prop as a temporary static placeholder. The plan is to replace this with dynamic favicon extraction from bookmarked websites in future iterations.
packages/design-system/src/icons/iconNames.ts (2)
Learnt from: constantly-dev
PR: Pinback-Team/pinback-client#30
File: apps/extension/src/components/InfoBox/InfoBox.tsx:10-11
Timestamp: 2025-07-08T11:47:27.279Z
Learning: In React TypeScript components, prefer semantic prop names with union types over abstract version numbers. For example, use `size: 'small' | 'large'` instead of `version: 1 | 2` for better code readability, type safety, and extensibility.
Learnt from: constantly-dev
PR: Pinback-Team/pinback-client#30
File: apps/extension/src/App.tsx:10-21
Timestamp: 2025-07-08T11:47:10.642Z
Learning: In apps/extension/src/App.tsx, the InfoBox component currently uses a hardcoded external URL for the icon prop as a temporary static placeholder. The plan is to replace this with dynamic favicon extraction from bookmarked websites in future iterations.
apps/client/src/pages/dashboard/components/sections/BookmarkSection.tsx (1)
Learnt from: constantly-dev
PR: Pinback-Team/pinback-client#30
File: apps/extension/src/App.tsx:10-21
Timestamp: 2025-07-08T11:47:10.642Z
Learning: In apps/extension/src/App.tsx, the InfoBox component currently uses a hardcoded external URL for the icon prop as a temporary static placeholder. The plan is to replace this with dynamic favicon extraction from bookmarked websites in future iterations.
apps/client/src/pages/dashboard/components/ui/buttons/AllViewButton.tsx (1)
Learnt from: constantly-dev
PR: Pinback-Team/pinback-client#30
File: apps/extension/src/App.tsx:10-21
Timestamp: 2025-07-08T11:47:10.642Z
Learning: In apps/extension/src/App.tsx, the InfoBox component currently uses a hardcoded external URL for the icon prop as a temporary static placeholder. The plan is to replace this with dynamic favicon extraction from bookmarked websites in future iterations.
apps/client/src/pages/dashboard/components/features/LevelInfoItem.tsx (1)
Learnt from: constantly-dev
PR: Pinback-Team/pinback-client#30
File: apps/extension/src/components/InfoBox/InfoBox.tsx:10-11
Timestamp: 2025-07-08T11:47:27.279Z
Learning: In React TypeScript components, prefer semantic prop names with union types over abstract version numbers. For example, use `size: 'small' | 'large'` instead of `version: 1 | 2` for better code readability, type safety, and extensibility.
apps/client/src/shared/components/ui/display/EmptyStatePresets.ts (1)
Learnt from: constantly-dev
PR: Pinback-Team/pinback-client#30
File: apps/extension/src/App.tsx:10-21
Timestamp: 2025-07-08T11:47:10.642Z
Learning: In apps/extension/src/App.tsx, the InfoBox component currently uses a hardcoded external URL for the icon prop as a temporary static placeholder. The plan is to replace this with dynamic favicon extraction from bookmarked websites in future iterations.
apps/client/src/shared/utils/styleUtils.ts (1)
Learnt from: constantly-dev
PR: Pinback-Team/pinback-client#30
File: apps/extension/src/components/InfoBox/InfoBox.tsx:10-11
Timestamp: 2025-07-08T11:47:27.279Z
Learning: In React TypeScript components, prefer semantic prop names with union types over abstract version numbers. For example, use `size: 'small' | 'large'` instead of `version: 1 | 2` for better code readability, type safety, and extensibility.
apps/client/src/pages/dashboard/dashboard.tsx (1)
Learnt from: constantly-dev
PR: Pinback-Team/pinback-client#30
File: apps/extension/src/App.tsx:10-21
Timestamp: 2025-07-08T11:47:10.642Z
Learning: In apps/extension/src/App.tsx, the InfoBox component currently uses a hardcoded external URL for the icon prop as a temporary static placeholder. The plan is to replace this with dynamic favicon extraction from bookmarked websites in future iterations.
apps/client/src/shared/components/ui/display/EmptyState.tsx (1)
Learnt from: constantly-dev
PR: Pinback-Team/pinback-client#30
File: apps/extension/src/components/InfoBox/InfoBox.tsx:10-11
Timestamp: 2025-07-08T11:47:27.279Z
Learning: In React TypeScript components, prefer semantic prop names with union types over abstract version numbers. For example, use `size: 'small' | 'large'` instead of `version: 1 | 2` for better code readability, type safety, and extensibility.
apps/client/src/pages/dashboard/components/ui/cards/DailyReminderCard.tsx (1)
Learnt from: constantly-dev
PR: Pinback-Team/pinback-client#30
File: apps/extension/src/App.tsx:10-21
Timestamp: 2025-07-08T11:47:10.642Z
Learning: In apps/extension/src/App.tsx, the InfoBox component currently uses a hardcoded external URL for the icon prop as a temporary static placeholder. The plan is to replace this with dynamic favicon extraction from bookmarked websites in future iterations.
apps/client/src/pages/dashboard/components/sections/LevelInfoSection.tsx (1)
Learnt from: constantly-dev
PR: Pinback-Team/pinback-client#30
File: apps/extension/src/components/InfoBox/InfoBox.tsx:10-11
Timestamp: 2025-07-08T11:47:27.279Z
Learning: In React TypeScript components, prefer semantic prop names with union types over abstract version numbers. For example, use `size: 'small' | 'large'` instead of `version: 1 | 2` for better code readability, type safety, and extensibility.
apps/client/src/shared/components/ui/layout/Header.tsx (2)
Learnt from: constantly-dev
PR: Pinback-Team/pinback-client#30
File: apps/extension/src/components/InfoBox/InfoBox.tsx:10-11
Timestamp: 2025-07-08T11:47:27.279Z
Learning: In React TypeScript components, prefer semantic prop names with union types over abstract version numbers. For example, use `size: 'small' | 'large'` instead of `version: 1 | 2` for better code readability, type safety, and extensibility.
Learnt from: constantly-dev
PR: Pinback-Team/pinback-client#30
File: apps/extension/src/App.tsx:10-21
Timestamp: 2025-07-08T11:47:10.642Z
Learning: In apps/extension/src/App.tsx, the InfoBox component currently uses a hardcoded external URL for the icon prop as a temporary static placeholder. The plan is to replace this with dynamic favicon extraction from bookmarked websites in future iterations.
apps/client/src/pages/dashboard/components/features/BookmarkCategory.tsx (2)
Learnt from: constantly-dev
PR: Pinback-Team/pinback-client#30
File: apps/extension/src/App.tsx:10-21
Timestamp: 2025-07-08T11:47:10.642Z
Learning: In apps/extension/src/App.tsx, the InfoBox component currently uses a hardcoded external URL for the icon prop as a temporary static placeholder. The plan is to replace this with dynamic favicon extraction from bookmarked websites in future iterations.
Learnt from: constantly-dev
PR: Pinback-Team/pinback-client#30
File: apps/extension/src/components/InfoBox/InfoBox.tsx:10-11
Timestamp: 2025-07-08T11:47:27.279Z
Learning: In React TypeScript components, prefer semantic prop names with union types over abstract version numbers. For example, use `size: 'small' | 'large'` instead of `version: 1 | 2` for better code readability, type safety, and extensibility.
apps/client/src/pages/dashboard/constants/index.ts (1)
Learnt from: constantly-dev
PR: Pinback-Team/pinback-client#30
File: apps/extension/src/components/InfoBox/InfoBox.tsx:10-11
Timestamp: 2025-07-08T11:47:27.279Z
Learning: In React TypeScript components, prefer semantic prop names with union types over abstract version numbers. For example, use `size: 'small' | 'large'` instead of `version: 1 | 2` for better code readability, type safety, and extensibility.
apps/client/src/shared/utils/cn.ts (2)
Learnt from: constantly-dev
PR: Pinback-Team/pinback-client#10
File: apps/landing/src/index.css:1-1
Timestamp: 2025-07-04T10:12:01.690Z
Learning: In TailwindCSS v4, the @import "tailwindcss"; syntax is the new recommended approach that replaces the three separate @tailwind directives (@tailwind base;, @tailwind components;, @tailwind utilities;). This single import pulls in all of Tailwind's preflight, components, and utilities in one step and is used with the @tailwindcss/vite plugin.
Learnt from: constantly-dev
PR: Pinback-Team/pinback-client#10
File: apps/landing/src/index.css:1-1
Timestamp: 2025-07-04T10:12:01.690Z
Learning: In TailwindCSS v4, the @import "tailwindcss"; syntax is the new recommended approach that replaces the three separate @tailwind directives (@tailwind base;, @tailwind components;, @tailwind utilities;). This is used with the @tailwindcss/vite plugin.
apps/client/src/pages/dashboard/components/ui/feedback/Tooltip.tsx (1)
Learnt from: constantly-dev
PR: Pinback-Team/pinback-client#30
File: apps/extension/src/components/InfoBox/InfoBox.tsx:10-11
Timestamp: 2025-07-08T11:47:27.279Z
Learning: In React TypeScript components, prefer semantic prop names with union types over abstract version numbers. For example, use `size: 'small' | 'large'` instead of `version: 1 | 2` for better code readability, type safety, and extensibility.
apps/client/src/pages/dashboard/components/ui/cards/BookmarkCard.tsx (1)
Learnt from: constantly-dev
PR: Pinback-Team/pinback-client#30
File: apps/extension/src/App.tsx:10-21
Timestamp: 2025-07-08T11:47:10.642Z
Learning: In apps/extension/src/App.tsx, the InfoBox component currently uses a hardcoded external URL for the icon prop as a temporary static placeholder. The plan is to replace this with dynamic favicon extraction from bookmarked websites in future iterations.
🧬 Code Graph Analysis (7)
apps/client/src/shared/components/ui/display/ReusableEmptyState.tsx (1)
apps/client/src/shared/components/ui/display/EmptyStatePresets.ts (1)
  • EMPTY_STATE_PRESETS (3-16)
apps/client/src/pages/dashboard/components/sections/BookmarkSection.tsx (1)
apps/client/src/pages/dashboard/constants/index.ts (1)
  • UI_TEXT (5-21)
apps/client/src/pages/dashboard/components/ui/buttons/AllViewButton.tsx (1)
apps/client/src/shared/types/components.ts (1)
  • AllViewButtonProps (36-39)
apps/client/src/shared/components/ui/display/EmptyStatePresets.ts (1)
apps/client/src/shared/components/ui/display/EmptyState.tsx (1)
  • EmptyStateProps (1-7)
apps/client/src/pages/dashboard/components/sections/LevelInfoSection.tsx (4)
apps/client/src/shared/types/components.ts (1)
  • LevelInfoSectionProps (66-68)
apps/client/src/pages/dashboard/constants/levelData.ts (1)
  • CHIPPY_LEVELS (7-38)
apps/client/src/pages/dashboard/constants/cardSizes.ts (2)
  • LEVEL_INFO (21-63)
  • LAYOUT (65-87)
apps/client/src/pages/dashboard/constants/index.ts (1)
  • UI_TEXT (5-21)
apps/client/src/pages/dashboard/components/features/BookmarkCategory.tsx (1)
apps/client/src/shared/utils/cn.ts (1)
  • cn (4-6)
apps/client/src/pages/dashboard/components/sections/DailyReminderSection.tsx (1)
apps/client/src/pages/dashboard/mockData.ts (1)
  • mockDailyReminderCards (97-112)
🔇 Additional comments (42)
apps/client/src/pages/notFound.tsx (1)

27-27: 불필요한 공백 제거 👍

불필요한 트레일링 공백을 제거하여 코드 일관성이 향상되었습니다. 더 이상 조치할 사항은 없습니다.

packages/design-system/src/icons/iconNames.ts (1)

3-3: 타입 추론 방식 👍
(typeof iconNames)[number] 패턴으로 튜플 기반 유니온 타입을 정확히 얻었습니다.

apps/client/src/shared/components/ui/display/EmptyState.tsx (2)

1-7: EmptyStateProps 인터페이스를 export 한 변경 매우 환영

다른 모듈에서 타입을 재사용할 수 있어 가독성과 유지보수성이 좋아졌습니다.


24-24: 색상 토큰 오타 수정 👍

text-gray-600text-gray600 으로 변경하여 디자인 시스템 규칙과 일치합니다.

apps/client/src/shared/components/ui/display/ReusableEmptyState.tsx (2)

8-11: 코드 포맷팅이 개선되었습니다.

매개변수 구조 분해를 멀티라인으로 변경하여 가독성이 향상되었습니다.


16-16: 파일 끝 포맷팅이 표준을 따릅니다.

파일 끝에 새로운 라인 추가는 표준적인 포맷팅 규칙을 따릅니다.

apps/client/src/shared/utils/cn.ts (1)

3-3: 코드 포맷팅 정리가 완료되었습니다.

Trailing whitespace 제거와 파일 끝 새로운 라인 추가로 포맷팅이 개선되었습니다.

Also applies to: 6-6

apps/client/src/pages/dashboard/constants/tooltipMessages.ts (1)

5-5: Trailing space가 정리되었습니다.

코드 포맷팅이 깔끔하게 정리되었습니다.

apps/client/src/shared/apis/timerApi.ts (1)

1-1: Import 경로가 적절하게 상대 경로로 변경되었습니다.

같은 디렉토리 내의 파일을 참조하는 경우 상대 경로 사용이 더 적절합니다.

apps/client/src/pages/dashboard/mockData.ts (2)

2-2: Import 경로가 대시보드 전용 상수로 적절하게 변경되었습니다.

공유 상수에서 대시보드 전용 상수로의 이동은 컴포넌트 구조 재조직화 목적과 일치합니다.


69-70: 긴 문자열의 가독성이 개선되었습니다.

멀티라인 포맷팅으로 긴 제목의 가독성이 향상되었습니다.

apps/client/src/pages/dashboard/components/features/Timer.tsx (1)

26-26: 코드 스타일 개선이 적절합니다.

JSX return 문이 간소화되어 가독성이 향상되었습니다. 기능적인 변경 없이 코드가 더 깔끔해졌습니다.

apps/client/src/pages/dashboard/components/ui/cards/Thumbnail.tsx (1)

1-1: 에셋 경로 검증 완료

apps/client/public/assets/illustrations/cards/thumbnail.svg 파일이 존재하며, 클라이언트 앱의 루트 URL인 /assets/illustrations/cards/thumbnail.svg 경로로 올바르게 서빙됩니다. 변경된 임포트 방식과 경로 모두 문제가 없습니다.

apps/client/src/pages/dashboard/components/features/LevelInfoItem.tsx (3)

2-2: 에셋 임포트 방식 변경이 일관성 있게 적용되었습니다.

도토리 레벨 에셋의 임포트 방식이 다른 컴포넌트들과 동일한 패턴으로 변경되어 프로젝트 전반의 일관성이 향상되었습니다.


3-3: 임포트 경로 재구성이 적절합니다.

LEVEL_INFO 상수의 임포트 경로가 대시보드 전용 경로로 올바르게 변경되었습니다. 이는 컴포넌트 구조 재조직화 목적에 부합합니다.


33-33: 디자인 시스템 개선이 잘 적용되었습니다.

스타일링이 outline 기반에서 border 기반으로 변경되어 PR 목표에서 언급한 디자인 시스템 일관성 개선이 적절히 반영되었습니다. border-main400 border 클래스 조합이 올바르게 적용되었습니다.

apps/client/src/pages/dashboard/components/ui/buttons/AllViewButton.tsx (2)

3-3: 상수 import 경로 변경 승인

UI_TEXT를 대시보드 전용 상수로 변경한 것은 컴포넌트 구조 재조직화 목표와 완벽히 일치합니다.


9-9: 스타일 변경 승인

outline에서 border 스타일로 변경한 것은 다른 대시보드 컴포넌트들과의 일관성을 위한 개선으로 보입니다.

apps/client/src/pages/dashboard/components/ui/modals/LevelInfoModal.tsx (1)

1-2: import 경로 변경 승인

컴포넌트 import를 절대 경로에서 상대 경로로 변경한 것은 대시보드 컴포넌트 구조 재조직화 목표와 일치합니다. 대시보드 전용 컴포넌트들을 로컬 디렉터리 구조 내에서 관리하는 것이 유지보수성을 향상시킵니다.

apps/client/src/shared/components/ui/display/EmptyStatePresets.ts (1)

7-7: 자산 경로 표준화 승인

이미지 경로에서 /src 접두사를 제거한 것은 자산 경로 표준화 작업의 일환으로 보입니다. 이는 다른 컴포넌트들의 자산 경로 변경과 일관성을 유지합니다.

Also applies to: 13-13

apps/client/tsconfig.json (1)

16-19: TypeScript 경로 별칭 확장 승인

"@assets/*" 경로 별칭에 대시보드 전용 자산 디렉터리를 추가한 것은 컴포넌트 구조 재조직화를 잘 지원하는 설정입니다. 이를 통해 대시보드 컴포넌트들이 로컬 자산에 쉽게 접근할 수 있게 되었습니다.

apps/client/src/pages/dashboard/constants/index.ts (1)

1-3: 검증 완료 및 승인

  • @shared/constants/cardSizes, levelData, tooltipMessages 참조가 코드베이스에 남아있지 않음을 확인했습니다.
  • 모든 대시보드 컴포넌트가 @pages/dashboard/constants (및 하위 파일) 경로를 올바르게 사용하고 있습니다.

변경된 로컬 상수 모듈화가 의도대로 적용되었으므로 승인합니다.

apps/client/src/pages/dashboard/components/features/SectionContent.tsx (1)

3-6: 임포트 및 에셋 경로 유효성 검증 완료

다음 경로들이 실제 파일과 일치하여 모두 정상 동작이 보장됩니다. 추가 수정 불필요합니다.

  • apps/client/src/pages/dashboard/components/features/Timer.tsx
  • apps/client/src/pages/dashboard/components/ui/feedback/Tooltip.tsx
  • apps/client/src/pages/dashboard/constants/tooltipMessages.ts
  • apps/client/public/assets/icons/ui/gray-circle.svg
apps/client/src/pages/dashboard/components/sections/index.ts (1)

1-4: 대시보드 섹션 배럴 익스포트 승인

익스포트된 네 개의 컴포넌트(BookmarkSection, DailyReminderSection, LevelInfoSection, TestSection)가 모두 존재함을 확인했습니다. 변경 사항을 승인합니다.

apps/client/src/pages/dashboard/hooks/useDashboard.ts (2)

2-2: 상수 임포트 경로가 올바르게 변경되었습니다.

UI_TEXT 상수를 shared에서 dashboard 전용 상수로 변경한 것이 리팩터링 목표에 부합합니다.


16-21: 훅의 API가 단순화되었습니다.

handleCountdownComplete 함수가 제거되어 훅의 API가 더 간결해졌네요. 이는 dashboard.tsx에서도 해당 함수 사용이 제거된 것과 일치합니다.

apps/client/src/shared/utils/styleUtils.ts (2)

28-28: outline에서 border로의 일관된 스타일 변경이 적용되었습니다.

outline 기반 스타일을 border로 변경한 것이 전체 대시보드 컴포넌트들의 디자인 시스템 개선과 일치합니다. 일관된 UI 스타일링을 위한 좋은 변경이네요.


42-42: border 색상 클래스명이 정확하게 수정되었습니다.

daily body의 border 스타일이 올바르게 적용되었습니다. border-gray200 클래스가 적절히 설정되어 있네요.

apps/client/src/pages/dashboard/components/sections/BookmarkSection.tsx (1)

2-7: 임포트 경로 변경이 리팩터링 목표에 맞게 잘 적용되었습니다.

shared 컴포넌트들을 상대 경로로 변경하고 상수들을 dashboard 전용 모듈에서 가져오도록 한 변경이 적절합니다. 컴포넌트 구조 재조직화의 핵심 목표를 잘 달성했네요.

apps/client/src/pages/dashboard/components/index.ts (1)

1-2: 배럴 export 패턴 적용이 적절합니다.

wildcard export를 사용하여 sections와 features에서 모든 export를 재내보내는 방식은 깔끔하고 유지보수하기 좋습니다. 다만 향후 각 디렉토리에서 새로운 컴포넌트를 추가할 때 의도하지 않은 export가 발생하지 않도록 주의하시기 바랍니다.

apps/client/src/pages/dashboard/components/sections/DailyReminderSection.tsx (1)

1-11: 컴포넌트 구조와 접근성이 잘 구현되었습니다.

semantic HTML 사용과 aria-label 적용이 적절하고, React.memo를 사용한 성능 최적화도 좋습니다. responsive grid 레이아웃도 적절하게 구현되었습니다.

apps/client/src/pages/dashboard/components/features/index.ts (1)

1-5: 깔끔한 barrel export 패턴입니다.

각 feature 컴포넌트의 default export를 named export로 재내보내는 방식이 일관성 있고 명확합니다. import 시 destructuring을 통해 필요한 컴포넌트만 가져올 수 있어 좋습니다.

apps/client/src/pages/dashboard/dashboard.tsx (2)

2-2: import 경로 업데이트가 적절합니다.

shared에서 local dashboard components로의 import 경로 변경이 리팩토링 목적에 부합합니다.


24-24: DailyReminderSection 사용법 변경이 적절합니다.

onComplete prop 제거가 새로운 구현과 일치하며, 더 단순한 API를 제공합니다.

apps/client/src/pages/dashboard/components/ui/cards/DailyReminderCard.tsx (2)

72-79: 도토리 이미지 크기 조정과 spacing 개선이 적절합니다.

24x24 크기로 조정된 도토리 이미지와 ml-[1rem]을 사용한 spacing이 PR 목표에 부합합니다. gap 대신 margin을 사용한 것도 더 정확한 레이아웃 제어를 제공합니다.


6-6: 상대 경로 import로의 변경이 적절합니다.

Thumbnail 컴포넌트의 import 경로가 shared에서 상대 경로로 변경된 것이 리팩토링 목적에 부합합니다.

apps/client/src/pages/dashboard/components/ui/cards/BookmarkCard.tsx (2)

2-4: 에셋 경로 변경과 컴포넌트 로컬화가 잘 적용되었습니다.

에셋을 직접 import에서 문자열 경로로 변경하고 Thumbnail 컴포넌트를 상대 경로로 변경한 것이 PR 목표와 일치합니다. 빌드 안정성 향상과 shared 의존성 제거 목적에 부합합니다.


9-15: 테두리 스타일링 변경이 적절합니다.

기본 스타일에서 테두리를 제거하고 isRead variant에 조건부 테두리를 추가한 것이 올바릅니다. 읽지 않은 북마크에 main400 테두리를 적용하는 것도 PR 목표에 명시된 디자인 변경사항과 일치합니다.

apps/client/src/pages/dashboard/components/ui/feedback/Tooltip.tsx (1)

1-27: 새로운 Tooltip 컴포넌트 구현이 잘 되었습니다.

TypeScript 인터페이스가 적절하고, 에셋 경로가 새로운 문자열 방식을 따르며, Tailwind CSS 클래스 사용도 일관성 있게 구현되었습니다. shared 컴포넌트를 대시보드 전용으로 이전하는 리팩토링 목표에 잘 부합합니다.

apps/client/src/pages/dashboard/components/sections/LevelInfoSection.tsx (1)

1-87: LevelInfoSection 컴포넌트 구현이 우수합니다.

React.memo를 통한 성능 최적화, 상수 기반 스타일링, 그리고 Fragment를 이용한 텍스트 처리가 잘 구현되었습니다. 대시보드별 상수 import와 LevelInfoItem 컴포넌트 매핑도 적절하며, shared 컴포넌트에서 로컬 구현으로의 이전이 성공적으로 완료되었습니다.

apps/client/src/pages/dashboard/components/features/BookmarkCategory.tsx (2)

7-13: outline에서 border로의 스타일링 변경이 적절합니다.

outline-1 outline-offset-[-1px]를 제거하고 border 클래스를 추가한 것이 PR 목표의 디자인 시스템 개선사항과 일치합니다. isActive 상태에 따른 테두리 색상 적용도 올바르게 구현되었습니다.


38-51: 코드 가독성 향상을 위한 포맷팅이 좋습니다.

categoryCountVariants의 다중 라인 포맷팅으로 가독성이 향상되었으며, 로직 변경 없이 코드 품질만 개선된 점이 우수합니다.

Comment on lines 2 to 3
import DailyReminderCard from '../ui/cards/DailyReminderCard';
import { GRID } from '@pages/dashboard/constants';
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Verification agent

🧩 Analysis chain

임포트 경로 재구성이 적절합니다.

컴포넌트와 상수의 임포트 경로가 새로운 대시보드 구조에 맞게 올바르게 업데이트되었습니다. 공유 컴포넌트에서 대시보드 전용 컴포넌트로의 이동이 일관성 있게 반영되었습니다.

다음 스크립트를 실행하여 새로운 임포트 경로들이 올바른지 확인해주세요:


🏁 Script executed:

#!/bin/bash
# 설명: 업데이트된 임포트 경로들의 존재 여부 확인

echo "DailyReminderCard 컴포넌트 확인 중..."
if [ -f "apps/client/src/pages/dashboard/components/ui/cards/DailyReminderCard.tsx" ]; then
  echo "✓ DailyReminderCard 컴포넌트가 올바른 위치에 존재합니다"
else
  echo "✗ DailyReminderCard 컴포넌트를 찾을 수 없습니다"
fi

echo "GRID 상수 파일 확인 중..."
if [ -f "apps/client/src/pages/dashboard/constants/index.ts" ]; then
  echo "✓ 대시보드 상수 파일이 존재합니다"
  echo "GRID 상수 내보내기 확인 중..."
  if grep -q "GRID" "apps/client/src/pages/dashboard/constants/index.ts"; then
    echo "✓ GRID 상수가 내보내기됩니다"
  else
    echo "✗ GRID 상수가 내보내기되지 않습니다"
  fi
else
  echo "✗ 대시보드 상수 파일을 찾을 수 없습니다"
fi

Length of output: 578


GRID 상수 내보내기 누락 확인 및 수정 필요

  • DailyReminderCard 컴포넌트 경로는 올바르게 존재합니다.
  • 그러나 apps/client/src/pages/dashboard/constants/index.ts 파일에서 GRID 상수가 내보내기되지 않아 import가 실패합니다.

수정 제안:

 // apps/client/src/pages/dashboard/constants/index.ts

 // 기존 상수 내보내기 예시
 export const SOME_OTHER_CONST = …

+ // GRID 상수 내보내기 추가
+ export { GRID } from './grid';  // 또는 실제 GRID 정의 위치에서 직접 export
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
import DailyReminderCard from '../ui/cards/DailyReminderCard';
import { GRID } from '@pages/dashboard/constants';
// apps/client/src/pages/dashboard/constants/index.ts
// 기존 상수 내보내기 예시
export const SOME_OTHER_CONST =
// GRID 상수 내보내기 추가
export { GRID } from './grid'; // 또는 실제 GRID 정의 위치에서 직접 export
🤖 Prompt for AI Agents
In apps/client/src/pages/dashboard/components/sections/TestSection.tsx lines 2
to 3, the import of GRID from '@pages/dashboard/constants' fails because GRID is
not exported in apps/client/src/pages/dashboard/constants/index.ts. To fix this,
open the constants/index.ts file and add an export statement for GRID, ensuring
it is properly exported so that the import in TestSection.tsx works correctly.

Comment on lines +13 to +22
{mockDailyReminderCards.map((card, index) => (
<DailyReminderCard
key={index}
title={card.title}
memo={card.memo}
images={card.images}
savedAt={card.savedAt}
showAcornStamp={card.showAcornStamp}
/>
))}
Copy link

@coderabbitai coderabbitai bot Jul 13, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

배열 인덱스를 key로 사용하는 것을 개선해주세요.

현재 key={index}를 사용하고 있는데, 이는 React의 best practice에 어긋납니다. 리스트 항목의 순서가 변경되거나 항목이 추가/삭제될 때 렌더링 성능 이슈와 상태 관리 문제가 발생할 수 있습니다.

다음과 같이 개선을 제안합니다:

-        {mockDailyReminderCards.map((card, index) => (
+        {mockDailyReminderCards.map((card, index) => (
           <DailyReminderCard
-            key={index}
+            key={`${card.title}-${card.savedAt}-${index}`}
             title={card.title}

또는 mock data에 고유한 id 필드를 추가하는 것을 고려해보세요.

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
{mockDailyReminderCards.map((card, index) => (
<DailyReminderCard
key={index}
title={card.title}
memo={card.memo}
images={card.images}
savedAt={card.savedAt}
showAcornStamp={card.showAcornStamp}
/>
))}
{mockDailyReminderCards.map((card, index) => (
<DailyReminderCard
- key={index}
+ key={`${card.title}-${card.savedAt}-${index}`}
title={card.title}
memo={card.memo}
images={card.images}
savedAt={card.savedAt}
showAcornStamp={card.showAcornStamp}
/>
))}
🤖 Prompt for AI Agents
In apps/client/src/pages/dashboard/components/sections/DailyReminderSection.tsx
around lines 13 to 22, the map function uses the array index as the React key,
which can cause rendering and state issues. To fix this, update the
mockDailyReminderCards data to include a unique id for each card and use that id
as the key prop instead of the index. This ensures stable and unique keys for
each list item, improving rendering performance and correctness.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

key index대신 다른 값으로 교체하는 것은 어떨까요??

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@constantly-dev 좋은 질문입니다! 현재 card 객체의 속성들을 활용해서 더 나은 key를 만들 수 있습니다.

즉시 적용 가능한 대안들:

  1. savedAt 사용 (가장 간단):
key={card.savedAt}
  1. title + savedAt 조합 (더 안전):
key={`${card.title}-${card.savedAt}`}
  1. 여러 속성 조합 (가장 안전):
key={`${card.title}-${card.savedAt}-${card.memo?.substring(0, 10)}`}

권장하는 이상적인 해결방법:

mockDailyReminderCards 데이터에 고유한 id 필드를 추가하는 것입니다:

// mockData.ts에서
{
  id: 'daily-1',
  title: '...',
  memo: '...',
  // ...기존 속성들
}

// 컴포넌트에서
key={card.id}

savedAt이 타임스탬프라면 이것만으로도 충분히 고유할 가능성이 높지만, 혹시 같은 시간에 저장된 카드가 있을 수 있다면 title과 조합하는 것이 더 안전합니다.

어떤 방식을 선호하시나요?

jjangminii
jjangminii previously approved these changes Jul 13, 2025
Copy link
Contributor

@jjangminii jjangminii left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

변경하시느라 힘들었을텐데 고생하셨습니다-! 변경된 파일구조도 시각적으로 보여주셔서 이해하기 편했어요!!

constantly-dev
constantly-dev previously approved these changes Jul 13, 2025
Copy link
Member

@constantly-dev constantly-dev left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

굿굿입니다! 👍

Comment on lines +13 to +22
{mockDailyReminderCards.map((card, index) => (
<DailyReminderCard
key={index}
title={card.title}
memo={card.memo}
images={card.images}
savedAt={card.savedAt}
showAcornStamp={card.showAcornStamp}
/>
))}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

key index대신 다른 값으로 교체하는 것은 어떨까요??

@karnelll karnelll dismissed stale reviews from constantly-dev and jjangminii via 8817e74 July 13, 2025 11:23
@karnelll karnelll merged commit 4259f6c into develop Jul 13, 2025
2 checks passed
jllee000 added a commit that referenced this pull request Jul 18, 2025
* setting: create issue template

* setting: create PR template

* setting: update PR template

* setting: create CODEOWNERS for auto reviewer

* chore: 불필요한 next apps 삭제

* setting: create landing vite + react project

* setting: create client vite + react project

* chore: extension 폴더 생성

* setting: turbo.json 파일 설정

* setting: pnpm-workspace.yaml config 폴더 추가

* setting: package manager pnpm으로 강제하도록 설정

* setting: client app tsconfig pinback 공통 패키지로 설정

* setting: eslint 공통 pinback package로 설정

* setting: eslint 공통 pinback package로 설정

* chore: 불필요한 app 관련 파일 정리

* chore: 필요 없는 파일 제거

* chore: 필요 없는 파일 제거

* setting: design-system package 구조 생성

* setting: design-system 예시 코드 추가

* setting: landing app tsconfig pinback 공통 패키지로 설정

* setting: landing package.json client에 sync

* chore: 불필요한 파일 제거

* chore: design-system test용 button 컴포넌트 추가

* setting: 증분 빌드 옵션 incremental false로 설정

* chore: html lan ko로 변경

* setting: 코드래빗 설정 파일(.coderabbit.yaml) 추가

* chore: CodeRabbit 리뷰 트리거용 주석 추가

* chore: CodeRabbit 트리거용 주석 제거

* Setting : 절대경로 설정 (#6)

* setting : client 절대경로 설정

* setting : landing 절대경로 설정

* Merge pull request #16 from Pinback-Team/docs/#15/update-primitive-readme

Docs(project): README ver 1.0 작성

* Update README.md

* Setting(project): router 설정 (#14)

* Setting : landing 라우터 설정

* Setting : client 라우터 설정

* Setting : 라우터 호출 위치 변경

* Setting(project): tailwind css setup (#10)

* Setting : client tailwindcss 설치

* Setting : landing tailwind 설정

* fix : 사소한 수정

* refactor : 안쓰는 코드 제거

* Setting(project): axios query setup (#12)

* setting : landing queryClient 설정

* setting : client  Tanstack query 설정

* Stting : client Axios 설정 (instance)

* Setting : landing Axios 설정 (instance)

* refactor : 안쓰는 코드 삭제

* refactor : 안쓰는 코드 정리

* chore: 중복코드 제거

* setting(project): 깃 액션 세팅 및 vercel 배포 (#9)

* setting : 깃 액션 세팅

* fix : labeler 파일 위치 수정

* fix : 주석 제거

* setting : 버전 수정

* setting : vercel 세팅

* Setting : 자동 리뷰어 할당 수정 (#22)

* setting : 깃 액션 세팅

* fix : labeler 파일 위치 수정

* fix : 주석 제거

* setting : 버전 수정

* setting : vercel 세팅

* fix : 리뷰어 자동할당 본인 제거

* setting : frontend 라벨링 제거

* Setting(design-system): 디자인 시스템 토큰 & icons 설정 (#20)

* setting: cn helper function 구현

* setting: .gitignore에 .tsbuildinfo 추가

* setting: cSpell pinback 및 turbo 추가

* setting: css 확장자 파일 tailwindcss로 인식되도록 설정

* setting: setting.json prettier & eslint 설정 추가

* setting: design-system styles token 설정

* setting: prettier/eslint root link

* setting: 기본 폴더구조 gitkeep 추가

* chore: font token 오타 수정

* setting: font-family base pretendard 설정

* setting: svg sprite default setting

* chore: code rabbit review 반영

* Setting(design-system): shadcn-ui default setting (#25)

* setting: shadcn/ui default setting

* chore: add pnpm-lock file

* refactor: code review 반영

* chore: update pnpm-lock file

* setting : 보일러플레이트 연동

* setting : tailwindCss 스타일 적용

* setting : custom.d.ts 타입 구체화

* setting : contents 스크립트 범위 수정

* setting : 폰트 1rem 기준 변경

* setting : extension 확장자 프로그램 초기 세팅 (#28)

* setting : 보일러플레이트 연동

* setting : tailwindCss 스타일 적용

* setting : custom.d.ts 타입 구체화

* setting : contents 스크립트 범위 수정

* setting : 폰트 1rem 기준 변경

---------

Co-authored-by: 이재림 <jellyme@ijaelim-ui-MacBookAir.local>

* !HOTFIX(design-system): tailwind ds @source 추가 (#40)

* Feature(extension): 토글 스위치 제작 (#39)

* feat: 토글 스위치 제작

* chore: 안쓰는 코드 제거

* feat: 사이즈 분기 처리 추가

* feat: 토글 thumb 디테일 수정

* chore: 안쓰는 코드 제거

* feat: 의존성, duration 수정

* chore:  design-system 패키지 export utils추가

* chore:안쓰는 코드 제거

* Feature(extension): 텍스트 필드 팝업 구현 (#32)

* chore: 파일구조 세팅

* feat: ui 구현

* feat: 업데이트된 폰트 적용

* feat: 오버레이 추가

* feat: 삭제, 수정 팝업 분기처리 추가

* feat: x버튼 아이콘 추가

* chore: 안쓰는 코드 제거

* feat:  오버레이-> 박스 섀도우로 변경

* chore: 안쓰는 코드 제거

* feat: onCancel 옵셔널처리

* Feature(extension): textarea 컴포넌트 구현 (#35)

* feat: textarea 구현

* feat: 스크롤바 디자인 커스텀

* chore: 안쓰는 코드 정리

* feat: 상대경로 절대경로로 변경

* feat: 글자수 제한 매직넘버 상수 정의

* feat: 유틸 경로 변경

* chore: 안쓰는 코드 삭제

* chore: 안쓰는 코드 제거

* feat: 유틸 경로 변경

* Feature(extension): 인포 박스 컴포넌트 제작 (#30)

* feat : 인포 박스 컴포넌트 제작

* feat : ver->union 타입으로 수정

* fix : package.json 불필요 삭제

* fix : app.tsx 수정 사항 제거

* feat : 분기 옵션 수정

* Feature(design-system): Input 컴포넌트 구현 (#52)

* feat: input 공통 컴포넌트 구현

* chore: svg.d.ts 파일 추가

* fix: error icon 오타 수정

* feat: aria-invalid 추가

* fix: design-system 내 절대 경로 추가 & tsconfig react.json으로 수정

* feat: input ref props 설정

* fix: build error 해결

* feat: input helperText error400 color로 변경

* Feature(client) useFunnel custom hook 구현 (#54)

* setting: onBoarding 기본 구조 세팅

* chore: 코드 prettier 정리

* feat: useFunnel hook 구현

* fix: build error 해결

* chore: 불필요한 gitkeep 파일 삭제

* chore: tsconfig 경로 설정 수정

* refactor: Funnel 컴포넌트 fallback null 처리 추가

* Feature(design-system): dot-indicator 공통 컴포넌트 구현 (#57)

* feat: dot-indicator 구현

* feat: input font token 미적용 이슈로 인한 tailwind 자체 value 사용

* Feature(client): dashboard-components (#43)

* refactor: 코드 리뷰 피드백 반영 및 툴팁 간격 조정

- 레벨 데이터 중복 제거 (공통 상수로 분리)
- 빈 index.ts 파일들에 실제 export 추가
- SectionTitle variant prop 구현
- Tailwind CSS 동적 클래스명 문제 해결
- 정보 아이콘과 툴팁 간격 8px로 조정
- 빌드 테스트 성공

* refactor: 대시보드 컴포넌트 리팩토링 및 코드 중복 제거

* fix: CodeRabbit 리뷰 피드백 반영

- useDashboard 훅 useCallback 의존성 배열 최적화
- AllViewButtonProps에서 사용하지 않는 children prop 제거
- styleUtils.ts CARD_CLASSES 중복 선언 문제 해결
- SectionTitle 컴포넌트 성능 최적화 및 CSS 클래스 일관성 개선
- React.memo 적용으로 불필요한 재렌더링 방지
- BookmarkCategory 컴포넌트 스타일 개선

* fix: CodeRabbit 리뷰 피드백 반영

* fix: CodeRabbit 리뷰 피드백 최종 반영

- 텍스트 색상 일관성 개선 (text-gray700 → text-gray800)
- React import 추가로 타입 오류 해결
- BookmarkCategory 완전 리팩토링 (styleUtils 함수 적용)
- 카테고리 스타일 유틸리티 함수 확장
- 인라인 스타일 제거로 코드 일관성 향상

* style: 코드 주석 제거 및 정리

* chore: .cursorrules를 gitignore에 추가

* fix: Git 추적에서 .cursorrules 파일 제거

* refactor: React.FC 제거 및 성능 최적화, 주석 정리

* fix: tailwindcss 중복 import 제거

* refactor: BookmarkSection 절대경로 적용 및 타입 정리

* refactor: Category 타입 분리 및 타입 시스템 개선

* refactor: Tooltip children prop required로 변경 및 사용처 수정

* refactor: 절대경로(@routes) 추가 및 관련 import 정리

* refactor: 절대경로 import 일괄 적용 및 경로 오류 수정

* refactor: 상대경로를 절대경로로 변경하고 React import 최적화

* feat: cva 라이브러리를 사용하여 variant 처리 개선

* refactor: tooltip 메시지를 constants 폴더로 분리

* refactor: Tooltip 컴포넌트의 CSS 변수를 Tailwind 클래스로 변경

* refactor: ThumbnailProps의 alt를 optional로 변경

* refactor: Thumbnail 컴포넌트에 cn 유틸리티 적용

* refactor: Props 타입을 컴포넌트 바로 위에 정의하는 컨벤션 적용

* refactor: DailyReminderCard 헤더 레이아웃을 absolute에서 flexbox로 개선

* refactor: 대시보드 컴포넌트 구조 정리 - features/dashboard 폴더를 pages/dashboard/components로 이동

* refactor: features 폴더 구조 개선 - dashboard 하위 폴더 제거

* refactor: CVA 라이브러리 적용으로 컴포넌트 스타일링 개선

* refactor: 인라인 스타일을 CVA로 변경 - 고정된 maxWidth 값 처리

* chore: 사용하지 않는 LAYOUT import 제거 (ts 경고 해결)

* style: 리마인드 카드 패딩 및 스타일링 개선

* style: 카드 테두리 색상을 border-gray-200으로 통일

* style: 리마인드 카드 메모 텍스트 스타일 통일 및 디자인 토큰 적용

* refactor: 컴포넌트 구조 개선 및 디자인 시스템 통합

* test: 북마크 카드 테스트 케이스 추가 및 타이틀 스타일 개선

* Feature(client): onBoarding carousel및 story step 컴포넌트 구현 (#60)

* feat: 온보딩 캐러셀 구현

* feat: funnel story step 구현

* feat: onBoarding funnel 구조 세팅 및 story step 추가

* refactor: story content 상수 분리

* refactor: story constants key에서 title로 변경

* refactor: STEP 상수 constants 폴더로 분리

* refactor: useFunnel initial step props 받도록 변경

* refactor: onboarding image alt 및 aria-label 추가

* refactor: story image depth onBoarding 추가하도록 변경

* Feature(extension): 카테고리 드롭다운 컴포넌트 구현 (#36)

* feat : 드롭다운 퍼블리싱

* feat : hover 적용 처리

* feat : 아이콘 적용

* feat: 아이콘 적용 및 드롭다운 수정

* fix : 폰트 적용 수정

* feat : 클릭 후 텍스트 반영

* feat : 예시 카테고리 추가

* feat : 배열 유효성 체크 및 인덱스 고유값

* feat : 토글 아이콘 교체

* feat : medium,large 분기 처리

* feat : 다운 아이콘 추가

* feat : 아이콘 애니메이션 제거

* fix : app.tsx 수정사항 머지 충돌 해결

* feat : 아이콘 파일 수정 및 정상 적용

* feat: 아이콘 애니메이션 적용

* fix : app.tsx 상태 리버트

* fix : 아이콘 중복 이미지 삭제 및 수정

* fix: package.json 중복 제거

* feat : medium width 값 수정

* fix : console 제거

* fix : 변수 명칭 구체화 수정

* Feature(extension): 데이트 피커 컴포넌트 (#59)

* feat : 인풋 컴포넌트 퍼블리싱

* feat : 공통화 후 분기 로직 분리

* feat : 시간 및 날짜 포맷팅 로직

* feat : 유효성 검사

* feat : 백스페이스 시 포맷팅 제거

* feat : 시간 유효성 추가

* feat : 수정

* refactor : 타입 파일 분리

* refactor : utils 파일로 리팩토링

* fix : app.tsx 초기 상태로 돌리기

* fix: 디자인시스템 package.json 모듈 타입 지정

* fix: 인터페이스 선언 위치 수정

* feat : constants로 상수 분리

* feat : constants 경로 지정

* Refactor(client): 파일 구조 변경 및 디자인 통일 (#65)

* refactor: 대시보드 전용 컴포넌트 pages/dashboard/components로 이동 및 구조 정리

- Thumbnail, LevelInfoModal, Tooltip 대시보드 전용 폴더로 이동
- 관련 import 경로 일괄 수정
- shared/ui에서 export 및 파일 제거
- 구조 명확화로 유지보수성 향상

* refactor: 파일 구조 및 스타일 수정

* refactor: 상대경로를 절대경로로 변경하여 코드 가독성 향상

* Feat(client): SVG 파일 경로 수정 및 EmptyState 텍스트 색상 변경

* chore: public 폴더 재생성 및 vite.svg 복구

* refactor: 경로 변경

* Feature(design-systems): 공통 버튼 컴포넌트 (#63)

* feat: 버튼 틀 공컴 연결

* Revert "feat: 버튼 틀 공컴 연결"

This reverts commit 386d30c.

* feat : 공통 버튼 공컴화 제작

* fix: 디자인 시스템 아이콘 상대경로로 수정

* feat : 사이즈에 따른 버튼 분기 cva

* feat : 색상 분기

* feat : props 옵셔널 정의 제거

* feat : app.tsx 기본 형태로 돌리기

* [Refactor] 팝업 관련 컴포넌트 packages 공컴으로 마이그레이션 작업 (#68)

* feat: 파일들 마이그레이션

* feat : index.ts 재정의

* fix: app.tsx 초기 상태로 수정

* Feature(extension): fcm token 발급 (#71)

* feat: 파이어베이스 설치, 파일세팅

* feat: 환경변수 설정

* feat: env jason 설정

* feat: settingFCM 임포트

* feat: 수정중

* Revert "feat: 수정중"

This reverts commit d123699.

* feat: 필요한 파일 추가, .js->.ts 변경과 설정 변경

* feat: FCM SDK로 토큰 생성 성공

* feat:  환경변수 설정

* fix: 충돌 해결

* fix: build error fix

* !HOTFIX: secret working

* Feature(client): dashboard card view 구현 (#72)

* feat: 북마크 카드 세션 구현

- 카테고리 필터링 기능 (BookmarkCategory)
- 총 카드 개수 표시 (BookmarkCount)
- 카드 그리드 4열 고정
- EmptyState 표시
- 전체보기 버튼 조건부 렌더링 (12개 이상)

* feat: 데일리 리마인드 카드 세션 구현

- 타이머 기능 포함 (Timer 컴포넌트)
- 카드 그리드 4열 고정
- 전체보기 버튼 조건부 렌더링 (12개 이상)
- 토글 기능으로 확장/축소 가능
- 도토리 스탬프 표시 기능

* feat: 대시보드 레이아웃 및 스타일링 구현

- 최대 너비 1440px, 양쪽 패딩 설정
- 헤더 fixed 포지션, 높이 6rem
- 세션 간 간격 140px, 카드 그리드 4열 고정
- 하단 패딩 36px 추가

* feat: 대시보드 데이터 및 훅 구현

- 북마크 카드 목데이터 추가 (카테고리, 읽음 상태 포함)
- useDashboard 훅에서 불필요한 import 제거
- 카테고리 필터링 및 전체보기 기능 지원

* feat: API 및 타입 정의 추가

- timerApi 함수 추가
- EmptyStatePresets 업데이트
- API 타입 정의 추가

* fix: 린트 에러 수정 및 포맷팅 적용

* fix: BookmarkCardProps의 categoryId를 필수 속성으로 변경

* fix: 코드래빗 AI 봇 피드백 반영

- 안 읽은 정보 카테고리 count 값 수정 (3 → 4)
- API limit 값 일관성 수정 (9 → 12)
- 인터페이스 일관성 개선 (BaseCard 공통 인터페이스 추가)
- 디자인 시스템 단위 일관성 수정 (px → rem)

* feat: 북마크 카드 mock 데이터 주석 해제 및 대시보드 카테고리/EmptyState 로직 개선

* refactor: 카테고리 자동 생성 로직 함수화 및 불필요한 주석 제거

* fix: lint/prettier 에러 수정 및 코드 스타일 통일

* refactor: px 단위를 rem으로 통일하여 접근성 및 일관성 개선

* refactor: 중첩 삼항 연산자를 early return 패턴으로 개선하여 가독성 향상

* refactor: 조건에 의미있는 네이밍 추가 및 some 메서드 활용으로 가독성 및 성능 개선

* style: prettier 포맷팅 및 린트 자동 수정

* refactor: setIsExpanded 토글 시 prev 패턴 적용으로 상태 변경 안전성 향상

* Feature(client): onboarding time select step 컴포넌트 구현 (#73)

* feat: timeSelect Step 기본 퍼블리싱 구현

* refactor: 버튼 역할 div button 태그로 변경

* feat: onBoarding header 연결

* feat: 리마인드 시간 아침/저녁 선택 로직 구현

* feat: max notice step & welcome step Funnel에 추가

* feat: useFunnel funnel내에서 boolean 분기처리 되도록 변경

* feat: mac window 구분용 useOSDetector 구현

* feat: 사용자 설정 dropdown open 로직 구현

* feat: header fixed로 변경

* Feature(extension): 익스텐션 팝업 컴포넌트 및 뷰 (#75)

* fix: build 에러 상대 경로 수정

* feat : 익스텐션 medium 팝업 퍼블리싱

* feat: TimePicker에 사이즈 분기 처리

* feat: 팝업 레이아웃 수정

* feat: 팝업 헤더 분리 컴포넌트 연결

* feat: 토글 시 absolutea 처리

* feat: textarea 폰트 적용 및 placeholder

* feat: 얼럿 메시지 -> 빨간 텍스트로 노출

* feat: 크롬 확장프로그램 디폴트 화면 세팅

* fix: 불필요 props 선언 제거

* feat: constants 상수 분리

* fix: firebase관련 세팅 삭제

* feat: 크롬 익스텐션 창 닫기

* feat: arial-label 추가

* feat: 아이콘 빌드파일

* Feature(client): onboarding mac notice & welcome step 컴포넌트 구현 (#77)

* feat: mac notice step 구현

* feat: onboarding welcome step 컴포넌트 구현

* feat: main logo 수정

* chore: mac 분기처리 주석 제거

* refactor: img aria-label 중복 제거

* Feature(client): 대시보드용 팝업 컴포넌트 작업 및 플로우 연결 (#80)

* feat: 대시보드 팝업 컴포넌트 퍼블리싱

* feat: 대시보드 팝업 토글 제어 props 연결

* feat: 카드 더보기 버튼 클릭 시, 팝업 핸들링

* feat: 모달 속 버튼 클릭시 닫기 제어

* feat: 북마크 카드 쪽 팝업닫기 제어

* feat: 북마크 카드 props 타입 통일

* feat: 팝업 바깥영역 클릭시 닫기 제어

* fix: 하드코딩 구간 표시

* fix: props에 옵셔널 조건 통일

* feat: 불필요 에러 메시지 함수 제거 및 팝업 상수 정의

* Setting(client): api 세팅 및 초기 토큰 발급 작업  (#88)

* feat: api 연결 세팅 및 토큰 재발급 플로우

* fix: 콘솔 제거

* feat: 익스텐션 쪽 api 연결 확인

* feat: client api 세팅 주석

* Feature(client): design FCM token management & messaging architecture (#90)

* feat: service worker register function 구현

* feat: background firebase messaging logic 구현

* setting: firebase sdk default setting

* feat: FCM token 발급 test function 구현

* feat: extension google email get method 연결

* feat: 자동화 스크립트 추가 및 코드 품질 개선

- package.json에 format, lint:fix, fix-all, check-all 스크립트 추가
- 린트 및 포맷팅 자동 수정 기능 구현
- ModalPop 컴포넌트에서 불필요한 setErrorMessage prop 제거
- 코드 품질 개선 및 설정 파일 업데이트

* Feature(client): 대시보드 배너 구현 및 개발 워크플로우 개선 (#84)

* feat: 대시보드 배너 및 타이머 기능 임시 저장

* feat: 배너 컴포넌트 및 관련 리소스 추가

* refactor: 배너 컴포넌트 분리 및 모달 위치 개선

* refactor: 배너 컴포넌트 UI 개선 및 중앙 정렬 적용

* feat: 카드 컴포넌트 UI 개선 - 썸네일 크기 통일 및 제목 말줄임 처리

* refactor: 배너 컴포넌트 코드 품질 개선 및 기능 최적화

* refactor: 배너 컴포넌트 폴더 구조 개선 및 코드 품질 향상

* fix: 리마인드 카드 썸네일 배경색 추가로 중앙 정렬 개선

* refactor: 배너 관련 파일 폴더 구조 개선

* cleanup: 중복 파일 제거 및 폴더 구조 정리

* fix: 썸네일 없을 때 배경 박스 제거 및 메모 텍스트 3줄 제한 강화

* fix: 린트 오류 해결

* fix: BannerHeadline 컴포넌트 수정

* fix: 헤더 로고 직접 import 방식으로 변경 및 스타일 수정

* refactor: 코드 품질 개선 및 최적화

- MAX_ACORN_COUNT 상수 추가로 마지막 단계 기준값 재사용 가능
- Timer 로직을 useTimer custom hook으로 분리
- 타입 추론 활용으로 제네릭 타입 제거
- API 응답에서 구조 분해 할당 사용
- 충돌하는 max-height 스타일 수정
- 조건부 스타일링 개선

* fix: TimePicker 컴포넌트에서 불필요한 setErrorMessage prop 제거

* chore: prettier 및 린트 포맷팅 반영

* Feature(client): 온보딩 ui 퍼블리싱 (#89)

* feat: 다이얼 ui 구현

* feat: border 커스텀

* feat: ui 커스텀

* feat: ui 완성

* feat: 사용자 설정 시간 저장

* chore: 안쓰는 코드 삭제

* feat: 온보딩 사용자 설정 추가

* fix : 버블링 해결

* feat: 시간 선택 포맷 개선 및 팝업 토글 함수 수정

* feat: 사용자 설정 시간 선택 기능 개선 및 팝업 상태 반영

* feat: 팝업 외부 클릭 감지 기능 추가 및 사용자 설정 시간 선택 UI 개선

* feat: 온보딩 레이아웃 정렬, 프리셋 시간 선택 기능 개선

* feat: 버튼 컴포넌트 제작

* feat: 온보딩 단계에서 네비게이션 버튼 컴포넌트 추가 및 시간 선택 버튼 개선

* feat: 사용자 설정 시간 선택 UX 수정

* feat: 시간 선택 기능 개선 및 포맷 유틸리티 추가+ 버튼 레이아웃

* feat: 팝업 z인덱스

* fix: ts env 추적 못하는 문제 해결

* chore: 필요 없는 함수 주석 처리

* refactor: color 하드 코딩된 값 수정

* chore: props type interface로 변경

* feat: mac user button 분기 처리 & 토큰 발급 로직 수정

* chore: prettier 정리..

* Setting(extension): 익스텐션 쪽 API 세팅 및 client랑 데이터 연결 작업 (#93)

* feat: api 연결 세팅 및 토큰 재발급 플로우

* fix: 콘솔 제거

* feat: 익스텐션 쪽 api 연결 확인

* feat: client api 세팅 주석

* feat: client->extension 토큰 전달 로직

* refactor: utils함수로 분리

* feat: 이메일 fetch 및 랜딩 연결

* fix: 콘솔 및 주석 제거

* Feature(extension): 북마크 저장 및 API 연결 작업 (#87)

* setting: 익스텐션 세팅 수정

* feat: 북마크 저장 로직 구현 연습

* feat: url에 따른 썸네일 추적

* feat: 북마크 저장 기능 구현

* feat: 북마크 저장 시 창 닫기

* feat: 이미지 연결

* feat: 북마크 정보 팝업에 연동

* feat: 텍스트 포맷 및 이미지 연동

* feat: 북마크 제대로 저장 수정

* fix: 주석 제거

* feat: 텍스트 없으면 익스텐션 실행 끄기

* fix: 콘솔 제거

* feat: 크롬 도메인일 경우에는 꺼지지 않게 제어

* feat: api 테스트 코드 제거

* fix: 대시보드 누락 사항 복구

* fix: 데이터 누락 추가

* Api(client): 회원 가입 api 연결 (#97)

* chore: signup 오타 수정

* feat: signup axios fetch 함수 구현

* feat: signup query 함수 구현

* api: signup api 연결

* feat: signup query onSuccess token localStorage 추가 로직 구현

* feat: next button step 변하는 로직 onSuccess로 이동

* feat: signup success시 localStorage 저장 및 send extension 로직 추가

* Feature(extension): modalpop의 카테고리 드롭다운에 popup 연결 (#102)

* feat: 버튼 공통 컴포넌트 연결

* feat: input 아이콘 컬러 변경

* feat: 버튼 비활성화

* feat: 추가하기 팝업 연결

* feat: 카테고리 수정하기 팝업 연결

* chore:  안쓰는 코드 삭제

* feat: 이벤트 전파방지 코드

* chore: 안쓰는 코드 제거

* Api(client): 대시보드 api 연결 (#101)

* feat: 대시보드 API 연동

# Conflicts:
#	apps/client/src/pages/dashboard/dashboard.tsx
#	apps/client/src/pages/onBoarding/OnBoarding.tsx

* refactor: api 타입 분리 및 import 경로 일괄 수정

# Conflicts:
#	apps/client/src/pages/dashboard/dashboard.tsx

* fix: 이메일 하드코딩 환경변수 처리 및 fallback 적용

# Conflicts:
#	apps/client/src/pages/dashboard/dashboard.tsx

* fix: 썸네일 캐싱 및 에러 처리 개선, 환경변수 적용

* refactor: 썸네일 API를 대시보드 전용 폴더로 이동 및 구조 정리

* refactor: 대시보드 코드 정리 및 최적화

- TestSection 컴포넌트 삭제
- 테스트 버튼 UI 제거
- useDashboard 훅에서 테스트 관련 함수 제거
- 도토리 개수 업데이트 로직 개선
- 배너 렌더링 디버깅 로그 추가
- 썸네일 화질 개선 (64px → 128px)
- api.allorigins.win 프록시 서비스 제거
- TypeScript 오류 수정

# Conflicts:
#	apps/client/src/pages/dashboard/dashboard.tsx

* fix: ESLint 오류 수정 및 코드 정리

- 빈 함수 오류 수정 (empty arrow function)
- non-null assertion 오류 수정
- 디버깅용 console.log 제거
- 코드 포맷팅 적용

* fix: 카드 더보기 버튼 이벤트 중첩 해결 및 토큰 관리 개선

- BookmarkCard, DailyReminderCard에서 더보기 버튼 클릭 시 e.stopPropagation() 추가
- DailyReminderCard 스탬프 오버레이에 pointer-events-none 추가
- Dashboard 모달 팝업 시 스크롤 고정 로직 추가
- axiosInstance에서 하드코딩된 토큰 발급 로직 제거
- 온보딩에서 저장된 토큰만 사용하도록 수정
- 대시보드에서 토큰이 없으면 온보딩으로 리다이렉트하는 로직 추가

* fix: 대시보드 토큰 통합 및 이벤트 처리 문제 수정

* fix: 콘솔 로그 및 errorUtils 파일 제거 및 개발자 테스트용 API 및 관련 코드 제거

* fix: api 폴더에서 썸네일 유틸리티를 utils 폴더로 분리

* fix: TypeScript 에러 수정

* fix: 주석 정리 및 간소화

* fix: axiosInstance에서 온보딩 토큰 사용하도록 수정

* fix: 주석 지우기

* fix: 주석 정리

* refactor: API 호출 함수 정리 및 썸네일 유틸리티 분리

- API 호출 함수에서 불필요한 try/catch 및 콘솔 로그 제거
- 썸네일 관련 유틸리티를 apis에서 utils로 분리
- Thumbnail 컴포넌트 import 경로 수정
- useAcornCount 훅에서 불필요한 try/catch 제거

* refactor: AxiosResponse 타입 활용 및 코드 개선

- API 함수들이 AxiosResponse 타입을 반환하도록 수정
- 훅들에서 response.data로 접근하도록 수정
- 사용하지 않는 AxiosError import 제거
- 썸네일 유틸리티에서 불필요한 Content-Type 헤더 제거

* Feature(client): dashboard popup에 추가 popup 연결 (#105)

* feat: client dashboard modalpop에 추가 popup 연결

* feat: popup overlay z-index 임시 수정

* feat: popup overlay 적용

* feat: url title & location truncate 처리

* Feature(onboarding): story 변경사항 반영 (#113)

* feat: 스토리 변경+헤더 프롭스 변경

* feat: 디테일 반영

* chore: 프리티어 적용

* Feature(landing): UI 구현과 로띠 적용 (#98)

* Feature(landing): 홈 페이지 섹션 구성 요소 추가

* feat: landing 로띠 추가

* feat: 스크롤 효과 적용

* feat: 로띠 루프 설정

* feat: 로띠 추가

* feat: 버튼 컴포넌트 추가

* chore: 스타일 수정

* feat: 코드리뷰 반영

* feat: 텍스트 추가

* feat: 최종 수정 반영

* fix: 이름 자동 생성 오류 변경

* chore: 프리티어 수정

* Api(extension): 익스텐션 북마크 아티클 저장 API 연결 (#107)

* feat: 크롬 스토리지에 저장

* feat: 모달 레이아웃 조정 및 색 적용

* feat: 카테고리 조회 및 가져오기

* fix: 드롭다운 초기값 설정

* feat: 포맷 함수+리마인드 get 연결

* feat: 북마크 아티클 api연결

* fix: 불필요 api 제거

* feat: 포맷 시간 추가

* fix: 콘솔 제거

---------

Co-authored-by: jjangminii <wjdals030328@catholic.ac.kr>

* Api (extension): 익스텐션 팝업 수정/삭제/생성 Edit 기능 API 연결 (#114)

* feat: 크롬 스토리지에 저장

* feat: 모달 레이아웃 조정 및 색 적용

* feat: 카테고리 조회 및 가져오기

* fix: 드롭다운 초기값 설정

* feat: 포맷 함수+리마인드 get 연결

* feat: 북마크 아티클 api연결

* fix: 불필요 api 제거

* feat: 포맷 시간 추가

* fix: 콘솔 제거

* feat: 카테고리 생성 api

* feat: 카테고리 수정 api

* fix: 에러 던지기

* fix: 에러 얼럿 추가

* feat: 카테고리 삭제 api 연결

* feat: 토큰 연결 및 받아오기

* fix: 콘솔제거

* fix: lint 수정

---------

Co-authored-by: jjangminii <wjdals030328@catholic.ac.kr>

* Api(client) 대쉬보드 팝업 상세 조회/카테고리 조회/삭제 API 연결 (#115)

* api: dashboard axios fetch 함수 구현

* api: dashboard query 함수 구현

* chore: query import 경로 수정

* chore: 불필요한 파일 삭제

* api: dashboard api 연결

* feat: og proxy 우회 로직 구현

* chore: 필요없는 코드 제거

* chore: pnpm lock sync

* !HOTFIX: infoBox edit

* Refactor(client): 1차 개발 QA (#118)

* chore: level modal scroll bar 덜그럭 문제 해결

* feat: 아티클 삭제 query invalidate 적용

* Refactor: 개발 2차 QA 작업 (#119)

* feat: 대시보드 카테고리 수정 및 삭제 api

* feat: 토글 버튼 zindex 제어

* feat: 아티클 수정 patch api 연결

* feat: 카테고리 생성하기

* fix: lint 수정

* fix: lint dpfj

* feat: 저장 시 모달 닫기

* fix: err lint 수정

* feat: 시간 포맷팅 수정

* feat: 모달 닫기 로직

---------

Co-authored-by: constantly-dev <rntqhdl10@naver.com>
Co-authored-by: karnelll <165611407+karnelll@users.noreply.github.com>
Co-authored-by: KIM JEONGMIN <163228804+jjangminii@users.noreply.github.com>
Co-authored-by: 이재림 <jellyme@ijaelim-ui-MacBookAir.local>
Co-authored-by: SEOHEE CHOI <itskarnel@kyonggi.ac.kr>
Co-authored-by: jjangminii <wjdals030328@catholic.ac.kr>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Refactor] 대시보드 파일 구조 변경

3 participants