Setting(design-system): 디자인 시스템 토큰 & icons 설정#20
Merged
constantly-dev merged 12 commits intodevelopfrom Jul 7, 2025
Merged
Conversation
Walkthrough이번 변경 사항은 코드 스타일 일관성 확보, Tailwind CSS 및 Prettier 통합, 디자인 시스템 스타일 및 유틸리티 추가, ESLint 설정 보강, 패키지 의존성 정비, 그리고 문서 마크다운 포맷 개선 등 전반적인 프로젝트 개발 환경을 체계화하는 데 초점을 두었습니다. Changes
Sequence Diagram(s)sequenceDiagram
participant VSCode
participant Prettier
participant ESLint
participant Tailwind
participant 개발자
개발자->>VSCode: 파일 저장
VSCode->>Prettier: 포맷팅 실행 (onSave)
VSCode->>ESLint: 코드 린트 및 자동 수정 (onSave)
Prettier->>Tailwind: Tailwind 플러그인으로 클래스 정렬
Prettier->>VSCode: 포맷된 코드 반환
ESLint->>VSCode: 린트 결과 반환
VSCode->>개발자: 포맷 및 린트된 코드 표시
Suggested reviewers
Poem
📜 Recent review detailsConfiguration used: .coderabbit.yaml 📒 Files selected for processing (3)
🚧 Files skipped from review as they are similar to previous changes (3)
✨ Finishing Touches
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed 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)
Other keywords and placeholders
Documentation and Community
|
constantly-dev
requested review from
jjangminii,
jllee000 and
karnelll
and removed request for
jjangminii
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 5
🔭 Outside diff range comments (1)
apps/client/package.json (1)
13-13: 중복된 의존성을 정리해주세요.
@pinback/design-system이 dependencies와 devDependencies에 모두 추가되어 있습니다. 일반적으로 런타임에 필요한 패키지는 dependencies에만 있어야 합니다.다음과 같이 중복을 제거하세요:
"dependencies": { "@pinback/design-system": "workspace:*", ... }, "devDependencies": { - "@pinback/design-system": "workspace:*", ... }Also applies to: 28-28
🧹 Nitpick comments (13)
package.json (1)
12-15: Prettier 플러그인 추가 확인 완료
sort-imports와tailwindcss플러그인 추가로 코드 정렬·클래스 정렬이 자동화됩니다.
.prettierrc.js에 두 플러그인이 이미 등록되어 있는지 한번 더 점검만 해주세요.apps/client/src/shared/apis/axiosInstance.ts (1)
1-5:baseURL가 정의되지 않은 경우를 대비한 안전장치 추가 제안스타일 변경은 문제없으나, 런타임에서
import.meta.env.VITE_BASE_URL이 비어 있으면 Axios 인스턴스가 잘못된 URL로 요청을 시도할 수 있습니다. 기본값 혹은 초기화 시점 검사를 추가해 두면 디버깅 비용을 절감할 수 있습니다.-const apiRequest = axios.create({ - baseURL: import.meta.env.VITE_BASE_URL, -}); +const baseURL = import.meta.env.VITE_BASE_URL; +if (!baseURL) { + // 환경 변수 누락 시 개발 단계에서 바로 알 수 있도록 예외를 발생시킵니다. + throw new Error('VITE_BASE_URL is not defined'); +} + +const apiRequest = axios.create({ baseURL });apps/landing/vite.config.ts (1)
1-4: Tailwind 플러그인 위치를 한 번 검토해 주세요.일부 사례에서
@tailwindcss/vite플러그인이 React 플러그인보다 앞에 오도록 권장됩니다(HMR 시 클래스 이름 인식 문제 예방). 현 구조도 정상 동작하지만, 클래스 변경이 반영되지 않는다면 순서를tailwindcss(), react()로 바꿔 보시기 바랍니다.apps/client/src/App.tsx (1)
1-2: 경로에.tsx확장자는 생략해도 됩니다.Vite의
resolve.extensions기본값 덕분에 확장자를 빼도 타입 검사·번들 과정 모두 문제 없습니다. 긴 경로를 줄여 가독성을 높일 수 있습니다.-import { router } from './routes/router.tsx'; +import { router } from './routes/router';apps/landing/.eslintrc.cjs (1)
1-5:coverage/등 추가 무시 디렉터리 고려CI에서 커버리지 리포트를 생성한다면
coverage,reports등도ignorePatterns에 포함해 불필요한 lint 작업을 줄일 수 있습니다.apps/landing/src/App.tsx (1)
1-2:.tsx확장자 생략 제안클라이언트 쪽과 동일하게 확장자 제거로 통일감을 주는 것이 좋습니다.
-import { router } from './routes/router.tsx'; +import { router } from './routes/router';config/eslint/.eslintrc.cjs (1)
29-30:simple-import-sort/imports규칙도 함께 지정해 주세요
simple-import-sort플러그인을 사용하는 경우imports와exports규칙을 모두 활성화하는 것이 일반적입니다.imports가 빠져 있어 실제 코드 정렬 시 누락된 항목이 발생할 수 있습니다."simple-import-sort/exports": "error", + "simple-import-sort/imports": "error",apps/client/src/pages/home/home.tsx (1)
1-3: 디자인 시스템 컴포넌트 활용 검토
head1,text-main400유틸리티 클래스를 직접 지정하기보다는 디자인 시스템에 제공되는Typography또는 유사 컴포넌트가 있다면 해당 추상화를 사용하는 편이 유지보수성에 좋습니다.apps/landing/src/pages/home/home.tsx (1)
1-3: 클라이언트 앱과 동일하게 디자인 시스템 컴포넌트 사용 통일 추천
apps/client와 동일한 이유로, 공용 디자인 시스템 컴포넌트를 통해 타이포그래피를 관리하면 앱 간 스타일 일관성이 높아집니다.apps/client/.eslintrc.cjs (1)
1-5: 루트 설정 및 Tailwind 플러그인 상속 여부 검토 제안
root: true를 명시하여 상위 디렉터리 ESLint 설정과의 충돌을 방지하는 것을 고려해 보세요.- TailwindCSS 관련 플러그인을 별도로 설정하지 않으면 규칙이 적용되지 않을 수 있습니다. 베이스 설정(
../../config/eslint/.eslintrc.cjs)에 포함되어 있는지 확인 바랍니다.module.exports = { + root: true, env: { browser: true, es2020: true }, extends: ['../../config/eslint/.eslintrc.cjs'], ignorePatterns: ['dist', '.eslintrc.cjs'], };packages/design-system/src/styles/font.css (2)
1-1: CDN 폰트 의존성, 네트워크 장애 시 폴백 필요Pretendard 폰트를 CDN으로만 가져오면 네트워크 문제 시 시스템 글꼴로 바로 폴백되지 않아 FOUT/FOIT 현상이 길어질 수 있습니다.
next/font,@fontsource/pretendard, self-hosting 등으로 번들링하여 캐시 히트율과 퍼포먼스를 높이는 방안을 고려해주세요.
60-128: 타이포그래피 유틸리티 과다 정의 – Tailwind theme 확장으로 단순화 가능30+개의 유틸리티 클래스를 수동 정의하면 유지보수가 어렵습니다.
tailwind.config.{js,cjs}의extend.typography또는extend.fontSize(lineHeight 포함) 로 스케일을 선언하면<h1 class="text-head1">…</h1>처럼 네이밍 일관성을 유지하면서 코드량을 크게 줄일 수 있습니다.
README.md (1)
36-72: 동일 제목 반복으로 MarkdownLint 경고 (MD024)
## 네이밍 패턴,#### 기본 규칙등의 헤딩이 섹션별로 중복되어 있습니다.
고유한 식별자를 부여하거나 소제목 레벨을 조정해 lint 오류를 제거해주세요.Also applies to: 156-170, 216-258, 240-247
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (38)
.prettierrc.js(1 hunks).vscode/settings.json(1 hunks)README.md(9 hunks)apps/client/.eslintrc.cjs(1 hunks)apps/client/.gitignore(1 hunks)apps/client/README.md(2 hunks)apps/client/package.json(1 hunks)apps/client/src/App.tsx(1 hunks)apps/client/src/index.css(1 hunks)apps/client/src/main.tsx(1 hunks)apps/client/src/pages/home/home.tsx(1 hunks)apps/client/src/routes/router.tsx(1 hunks)apps/client/src/routes/routesConfig.ts(1 hunks)apps/client/src/shared/apis/axiosInstance.ts(1 hunks)apps/client/src/shared/utils/queryClient.ts(1 hunks)apps/client/vite.config.ts(1 hunks)apps/landing/.eslintrc.cjs(1 hunks)apps/landing/.gitignore(1 hunks)apps/landing/README.md(2 hunks)apps/landing/package.json(2 hunks)apps/landing/src/App.tsx(1 hunks)apps/landing/src/index.css(1 hunks)apps/landing/src/main.tsx(1 hunks)apps/landing/src/pages/home/home.tsx(1 hunks)apps/landing/src/routes/router.tsx(1 hunks)apps/landing/src/routes/routesConfig.ts(1 hunks)apps/landing/src/shared/apis/axiosInstance.ts(1 hunks)apps/landing/src/shared/utils/queryClient.ts(1 hunks)apps/landing/vite.config.ts(1 hunks)config/eslint/.eslintrc.cjs(1 hunks)config/eslint/package.json(1 hunks)package.json(1 hunks)packages/design-system/package.json(2 hunks)packages/design-system/src/lib/index.ts(1 hunks)packages/design-system/src/lib/utils.ts(1 hunks)packages/design-system/src/styles/color.css(1 hunks)packages/design-system/src/styles/font.css(1 hunks)packages/design-system/src/styles/index.css(1 hunks)
🧰 Additional context used
🧠 Learnings (17)
📓 Common learnings
Learnt from: constantly-dev
PR: Pinback-Team/pinback-client#10
File: apps/landing/src/index.css:1-1
Timestamp: 2025-07-04T10:12:01.664Z
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.
apps/client/src/index.css (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.664Z
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.664Z
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/vite.config.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.664Z
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.
Learnt from: constantly-dev
PR: Pinback-Team/pinback-client#10
File: apps/landing/src/index.css:1-1
Timestamp: 2025-07-04T10:12:01.664Z
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.
apps/landing/src/index.css (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.664Z
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.664Z
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/main.tsx (1)
Learnt from: constantly-dev
PR: Pinback-Team/pinback-client#10
File: apps/landing/src/index.css:1-1
Timestamp: 2025-07-04T10:12:01.664Z
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.
apps/landing/src/App.tsx (1)
Learnt from: constantly-dev
PR: Pinback-Team/pinback-client#10
File: apps/landing/src/index.css:1-1
Timestamp: 2025-07-04T10:12:01.664Z
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.
apps/landing/vite.config.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.664Z
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.
Learnt from: constantly-dev
PR: Pinback-Team/pinback-client#10
File: apps/landing/src/index.css:1-1
Timestamp: 2025-07-04T10:12:01.664Z
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.
packages/design-system/src/styles/index.css (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.664Z
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.664Z
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.
packages/design-system/src/lib/utils.ts (1)
Learnt from: constantly-dev
PR: Pinback-Team/pinback-client#10
File: apps/landing/src/index.css:1-1
Timestamp: 2025-07-04T10:12:01.664Z
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.
packages/design-system/src/lib/index.ts (1)
Learnt from: constantly-dev
PR: Pinback-Team/pinback-client#10
File: apps/landing/src/index.css:1-1
Timestamp: 2025-07-04T10:12:01.664Z
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.
package.json (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.664Z
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.
Learnt from: constantly-dev
PR: Pinback-Team/pinback-client#10
File: apps/landing/src/index.css:1-1
Timestamp: 2025-07-04T10:12:01.664Z
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.
packages/design-system/package.json (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.664Z
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.
Learnt from: constantly-dev
PR: Pinback-Team/pinback-client#10
File: apps/landing/src/index.css:1-1
Timestamp: 2025-07-04T10:12:01.664Z
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.
apps/landing/src/main.tsx (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.664Z
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.664Z
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.
.prettierrc.js (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.664Z
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.
Learnt from: constantly-dev
PR: Pinback-Team/pinback-client#10
File: apps/landing/src/index.css:1-1
Timestamp: 2025-07-04T10:12:01.664Z
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.
packages/design-system/src/styles/font.css (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.664Z
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.664Z
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.
packages/design-system/src/styles/color.css (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.664Z
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.664Z
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/package.json (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.664Z
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.664Z
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.
🪛 markdownlint-cli2 (0.17.2)
README.md
175-175: Multiple headings with the same content
(MD024, no-duplicate-heading)
183-183: Multiple headings with the same content
(MD024, no-duplicate-heading)
216-216: Multiple headings with the same content
(MD024, no-duplicate-heading)
240-240: Multiple headings with the same content
(MD024, no-duplicate-heading)
🔇 Additional comments (33)
apps/landing/src/shared/apis/axiosInstance.ts (1)
1-1: 따옴표 스타일 통일 👍프로젝트 전반의 Prettier 설정과 일관성을 맞추기 위한 변경으로 보이며, 기능적 영향은 없습니다.
apps/landing/src/shared/utils/queryClient.ts (1)
1-1: 따옴표 스타일 통일 👍동일한 스타일 가이드 적용으로 문제없습니다.
config/eslint/package.json (1)
10-10: ESLint 버전 다운그레이드 영향 확인 필요v9→v8로 내린 이유(호환성 등)가 명확하다면 문제없지만,
모노레포 내 다른 패키지들도 동일 버전을 사용하도록 맞춰졌는지 꼭 확인해주세요.
플러그인(특히eslint-plugin-tailwindcss)이 v9 전제 기능을 요구하지 않는지도 검증이 필요합니다.apps/client/.gitignore (1)
26-31: 빌드 아티팩트 및 배포 디렉터리 무시 설정 추가 👍
.tsbuildinfo및.vercel제외로 추적 파일이 줄어듭니다. 다른 패키지 경로에서도 동일한 패턴이 필요한지 확인하면 더욱 좋겠습니다.apps/client/src/index.css (1)
1-1: 디자인 시스템에 Tailwind CSS import 확인 완료 – 추가 조치 불필요
packages/design-system/src/styles/index.css가font.css와color.css를 importfont.css(2행) 및color.css(1행)에@import 'tailwindcss';구문 존재
→ 프리플라이트와 유틸리티 클래스가 정상 포함됩니다.추가 수정이나 검증 없이도 문제가 없습니다.
apps/client/src/shared/utils/queryClient.ts (1)
1-11: 따옴표 스타일 통일 👍
기능 변경 없이 코드 스타일만 수정되었습니다. 문제 없습니다.apps/landing/src/routes/routesConfig.ts (1)
3-4: 코드 스타일 통일 확인
큰따옴표 → 작은따옴표 변경으로 프로젝트 규칙과 일관성이 맞춰졌습니다.apps/client/src/routes/routesConfig.ts (1)
3-4: 코드 스타일 통일 확인
큰따옴표 → 작은따옴표 변경으로 프로젝트 규칙과 일관성이 맞춰졌습니다.apps/landing/src/index.css (1)
1-1: 디자인 시스템 스타일 경로 정상 동작 확인 필요
@pinback/design-system패키지가 퍼블리시된 버전과 로컬 워크스페이스 모두에서styles/index.css를 정확히 노출하고 있는지, 빌드(특히 Vite + Tailwind) 단계에서 PostCSS가 해당 경로를 해결하는지 한 번 더 점검해주세요.apps/landing/src/routes/router.tsx (1)
1-3: 따옴표 스타일 통일 👍ESLint/Prettier 규칙에 맞춘 따옴표 변경만 이루어졌습니다. 기능적 문제 없습니다.
apps/client/src/routes/router.tsx (1)
1-3: 따옴표 스타일 통일 👍동일한 스타일 정비입니다. 로직 변경 없음 확인했습니다.
apps/client/vite.config.ts (1)
1-4: 스타일 변경 확인 완료따옴표 통일 외 의미 있는 변경 사항은 없습니다. Tailwind CSS Vite 플러그인 포함 여부도 이전과 동일합니다.
packages/design-system/src/lib/index.ts (1)
1-1: 유틸 배럴 파일 추가 👍
utils재노출로 패키지 사용성이 개선되었습니다. 현재 범위에서는 문제 없으며 tree-shaking에도 영향이 미미합니다.apps/landing/package.json (1)
18-19: ESLint를dependencies가 아닌devDependencies로 이동 필요ESLint는 빌드 도구이며 런타임에서는 사용되지 않습니다.
dependencies에 두면 최종 번들 사이즈와 설치 시간이 불필요하게 증가합니다.
[ suggest_essential_refactor ]"dependencies": { @@ - "eslint": "^8.44.0", @@ }, "devDependencies": { + "eslint": "^8.44.0",apps/landing/.gitignore (1)
26-31: 추가 ignore 항목 확인 완료
.tsbuildinfo와.vercel추가는 적절합니다.apps/client/src/main.tsx (1)
9-16:root엘리먼트가 존재하지 않을 가능성 대비 필요
document.getElementById('root')!에 non-null 단언을 사용하고 있습니다. 만약 HTML 템플릿이 잘못 배포되어#root가 없을 경우 앱이 즉시 크래시합니다. 런타임 안전성을 위해 guard 처리를 고려해 주세요.-const container = document.getElementById('root')!; +const container = document.getElementById('root'); +if (!container) { + // eslint-disable-next-line no-console + console.error('Root element (#root) not found – aborting render'); +} else { + createRoot(container).render( + /* ... */ + ); +}apps/landing/README.md (3)
39-40: 형식 수정 확인 완료
;추가로 코드 예제가 프로젝트의 Prettier 규칙과 일관성을 갖추었습니다.
46-48: 형식 수정 확인 완료세미콜론 및 import 구문 개선이 잘 반영되었습니다.
68-69: 형식 수정 확인 완료종결 괄호 뒤 세미콜론 추가가 일관성 확보에 기여합니다.
packages/design-system/src/lib/utils.ts (1)
4-6:clsx(inputs)에 배열 전달 → Spread 누락
clsx시그니처는(...classes: ClassValue[])입니다. 배열 통째로 넘기면 모든 클래스가 하나의 요소로 처리되어 의도한 병합이 이루어지지 않습니다.-export function cn(...inputs: ClassValue[]) { - return twMerge(clsx(inputs)); +export function cn(...inputs: ClassValue[]) { + return twMerge(clsx(...inputs)); }Likely an incorrect or invalid review comment.
apps/client/README.md (3)
39-40: 형식 수정 확인 완료코드 블록 세미콜론 추가로 Prettier 규칙과 일치합니다.
46-48: 형식 수정 확인 완료Import 구문 및 세미콜론 통일이 반영되었습니다.
68-69: 형식 수정 확인 완료컨피그 배열 닫힘 후 세미콜론 추가로 문법 오류 가능성을 제거했습니다.
.vscode/settings.json (1)
6-16: 개발 환경 설정이 잘 구성되었습니다.VSCode 설정이 프로젝트의 Tailwind CSS 통합과 코드 품질 관리에 적합하게 구성되어 있습니다. 자동 포맷팅, ESLint 자동 수정, TailwindCSS 언어 지원 등이 개발 경험을 향상시킬 것입니다.
apps/landing/src/main.tsx (2)
1-7: import 구문 정리가 잘 되었습니다.single quote 사용과 import 순서가 Prettier 설정과 일치하여 코드 일관성이 향상되었습니다.
13-13: ReactQueryDevtools 추가가 개발에 도움이 됩니다.개발 환경에서 React Query 상태를 모니터링할 수 있게 되어 디버깅에 유용할 것입니다.
initialIsOpen={false}설정으로 초기 상태가 적절히 관리되고 있습니다..prettierrc.js (2)
1-11: Prettier 설정이 프로젝트 표준화에 적합합니다.코드 포맷팅 규칙이 일관되게 설정되어 있고, Tailwind CSS 플러그인도 포함되어 있어 좋습니다.
9-9: importOrder 설정용 플러그인 설치 확인됨package.json의 dependencies/devDependencies에
- "@trivago/prettier-plugin-sort-imports": "^5.2.2"
가 포함되어 있어,.prettierrc.js의importOrder설정이 의도대로 작동할 것으로 보입니다. 추가 확인 및 조치가 필요하지 않습니다.packages/design-system/package.json (2)
18-24: Tailwind CSS 관련 의존성 추가가 적절합니다.디자인 시스템의 Tailwind CSS 통합에 필요한 의존성들이 적절히 추가되었습니다.
29-29: clsx 의존성 추가가 유용합니다.클래스 이름 조건부 결합을 위한 clsx 라이브러리 추가가 디자인 시스템 유틸리티 함수에 도움이 될 것입니다.
apps/client/package.json (2)
19-20: Tailwind CSS 관련 플러그인 추가가 적절합니다.코드 품질과 포맷팅 향상을 위한 Tailwind CSS 플러그인들이 적절히 추가되었습니다.
18-18: ESLint 버전 일관성 확인 완료모놀리포 전체에서 ESLint 코어 버전이 모두
^8.44.0(config/eslint 포함)로 통일되어 있으며, 9.x 버전을 사용한 이력이 없습니다. 따라서 호환성 문제는 없습니다.packages/design-system/src/styles/color.css (1)
3-31:@theme지시어 지원 여부 확인 필요Tailwind 코어에는
@theme지시어가 없습니다. 일반적으로 테마 토큰은@layer base { :root { --color-main0: … } }처럼 선언하거나
tailwindcss-theming플러그인을 사용합니다.
현재 빌드 파이프라인에서@theme를 해석하는 PostCSS 플러그인이 없는 경우 컴파일이 실패하므로 확인 부탁드립니다.
Comment on lines
+1
to
+2
| @import './font.css'; | ||
| @import './color.css'; |
There was a problem hiding this comment.
🛠️ Refactor suggestion
디자인 시스템 CSS에서도 Tailwind 불러오기를 포함하는 편이 명확합니다
개별 앱에서 Tailwind를 다시 import 하도록 요구하기보다는 디자인 시스템 진입점에서 다음과 같이 선행 import 하는 편이 의존성 관리가 단순합니다.
+@import 'tailwindcss';
@import './font.css';
@import './color.css';이렇게 하면 소비 애플리케이션들은 @import '@pinback/design-system/styles'; 한 줄로 모든 스타일을 사용-가능합니다.
📝 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 './font.css'; | |
| @import './color.css'; | |
| @import 'tailwindcss'; | |
| @import './font.css'; | |
| @import './color.css'; |
🤖 Prompt for AI Agents
In packages/design-system/src/styles/index.css at lines 1 to 2, the current
imports only include font.css and color.css but do not import Tailwind CSS. To
simplify dependency management and ensure consuming applications get all
necessary styles with a single import, add an import statement for Tailwind CSS
at the top of this file before the existing imports. This will allow
applications to use all styles by importing only the design system styles entry
point.
Comment on lines
+20
to
+22
| font-size: 2.5rem; /* 40px */ | ||
| line-height: 150%; | ||
| letter-spacing: 1%; |
There was a problem hiding this comment.
🛠️ Refactor suggestion
letter-spacing: 1% / -1%는 유효한 CSS 값이 아닙니다
letter-spacing은 %를 지원하지 않고 <length>만 허용합니다.
0.01em, 0.16px 등 실수값으로 변경해야 브라우저가 인식합니다.
Also applies to: 134-142
🤖 Prompt for AI Agents
In packages/design-system/src/styles/font.css at lines 20-22 and also lines
134-142, the letter-spacing property uses percentage values which are invalid in
CSS. Replace these percentage values with valid length units such as em or px
using decimal numbers (e.g., 0.01em or 0.16px) to ensure proper browser
recognition.
Comment on lines
+18
to
+24
| @utility head1 { | ||
| font-weight: 700; | ||
| font-size: 2.5rem; /* 40px */ | ||
| line-height: 150%; | ||
| letter-spacing: 1%; | ||
| } | ||
|
|
There was a problem hiding this comment.
@utility는 Tailwind 핵심 지시어가 아닙니다 – 컴파일 불가 가능성
Tailwind v3/v4에서는 사용자 유틸리티를 정의할 때
@layer utilities {
.head1 { … }
}형식이 권장됩니다. @utility 는 공식 문법이 아니며 PostCSS 플러그인을 별도로 두지 않는 한 빌드 단계에서 오류가 납니다.
즉시 컴파일 테스트를 권장하며, 아래와 같이 수정하십시오.
-@utility head1 {
+@layer utilities {
+ .head1 {
font-weight: 700;
font-size: 2.5rem; /* 40px */
line-height: 150%;
- letter-spacing: 1%;
+ letter-spacing: 0.01em; /* % → px/em 로 교체 */
+ }
}필요한 모든 .head* 클래스도 동일하게 감싸주세요.
🤖 Prompt for AI Agents
In packages/design-system/src/styles/font.css around lines 18 to 24, the use of
the non-standard @utility directive causes build errors in Tailwind v3/v4.
Replace the @utility block with a proper @layer utilities block wrapping the
.head1 class definition. Also, ensure all related .head* classes are similarly
wrapped inside @layer utilities to comply with Tailwind's recommended syntax and
enable successful compilation.
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (4)
packages/design-system/src/icons/scripts/generate-icon-list.ts (1)
1-16: 에러 핸들링 개선 고려아이콘 이름 목록을 자동 생성하는 스크립트가 잘 구성되어 있습니다. 타입 안전성을 위한 유니언 타입 생성도 좋은 접근 방식입니다.
에러 핸들링을 개선하면 더 견고한 스크립트가 될 수 있습니다:
+import { existsSync } from 'fs'; import { readdirSync, writeFileSync } from 'fs'; import { basename, join } from 'path'; const ICON_DIR = join(__dirname, '../source'); const OUTPUT_PATH = join(__dirname, '../iconNames.ts'); +if (!existsSync(ICON_DIR)) { + throw new Error(`아이콘 디렉터리가 존재하지 않습니다: ${ICON_DIR}`); +} + const files = readdirSync(ICON_DIR).filter((file) => file.endsWith('.svg')); +if (files.length === 0) { + console.warn('SVG 파일이 발견되지 않았습니다.'); +} + const iconNames = files.map((file) => basename(file, '.svg'));packages/design-system/src/icons/components/icon.tsx (3)
8-28: 색상 시스템 개선 고려색상 타입이 하드코딩된 문자열 리터럴로 정의되어 있습니다. 디자인 시스템의 색상 팔레트가 변경될 때 유지보수가 어려울 수 있습니다.
별도의 색상 상수 파일에서 색상 목록을 가져오는 것을 고려해보세요:
// colors.ts export const DESIGN_SYSTEM_COLORS = { main0: 'main0', main100: 'main100', // ... 기타 색상 } as const; export type IconColor = keyof typeof DESIGN_SYSTEM_COLORS;
55-62: 회전 각도 처리 일관성 개선회전 각도 처리에서 90도와 180도는 Tailwind CSS 클래스를 사용하지만, 270도만 커스텀 클래스를 사용하고 있습니다. 일관성을 위해 모든 회전 각도에 대해 동일한 방식을 사용하는 것이 좋습니다.
일관성 있는 회전 클래스 사용을 위한 개선:
const rotateClass = rotate === 90 ? 'rotate-90' : rotate === 180 ? 'rotate-180' : rotate === 270 - ? 'rotate-[270deg]' + ? '-rotate-90' : '';
52-53: 기본 크기 값 상수화 고려기본 크기 값이 하드코딩되어 있습니다. 디자인 시스템의 일관성을 위해 상수로 정의하는 것을 고려해보세요.
+const DEFAULT_ICON_SIZE = 24; + export const Icon = ({ name, size, width, height, color, className, rotate, ariaHidden = true, ...rest }: IconProps) => { - const w = width ?? size ?? 24; - const h = height ?? size ?? 24; + const w = width ?? size ?? DEFAULT_ICON_SIZE; + const h = height ?? size ?? DEFAULT_ICON_SIZE;
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (10)
apps/client/package.json(1 hunks)apps/client/vite.config.ts(1 hunks)apps/landing/package.json(2 hunks)apps/landing/vite.config.ts(1 hunks)packages/design-system/package.json(1 hunks)packages/design-system/src/icons/components/icon.tsx(1 hunks)packages/design-system/src/icons/iconNames.ts(1 hunks)packages/design-system/src/icons/index.ts(1 hunks)packages/design-system/src/icons/scripts/generate-icon-list.ts(1 hunks)packages/design-system/vite.config.ts(1 hunks)
✅ Files skipped from review due to trivial changes (2)
- packages/design-system/src/icons/index.ts
- packages/design-system/src/icons/iconNames.ts
🚧 Files skipped from review as they are similar to previous changes (4)
- apps/landing/vite.config.ts
- apps/landing/package.json
- packages/design-system/package.json
- apps/client/package.json
🧰 Additional context used
🧠 Learnings (3)
📓 Common learnings
Learnt from: constantly-dev
PR: Pinback-Team/pinback-client#10
File: apps/landing/src/index.css:1-1
Timestamp: 2025-07-04T10:12:01.664Z
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.
packages/design-system/vite.config.ts (1)
Learnt from: constantly-dev
PR: Pinback-Team/pinback-client#10
File: apps/landing/src/index.css:1-1
Timestamp: 2025-07-04T10:12:01.664Z
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/vite.config.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.664Z
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.
Learnt from: constantly-dev
PR: Pinback-Team/pinback-client#10
File: apps/landing/src/index.css:1-1
Timestamp: 2025-07-04T10:12:01.664Z
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.
🧬 Code Graph Analysis (2)
packages/design-system/src/icons/scripts/generate-icon-list.ts (1)
packages/design-system/src/icons/iconNames.ts (1)
iconNames(2-2)
packages/design-system/src/icons/components/icon.tsx (2)
packages/design-system/src/icons/iconNames.ts (1)
IconName(3-3)packages/design-system/src/icons/index.ts (1)
Icon(1-1)
🔇 Additional comments (2)
apps/client/vite.config.ts (1)
1-21: 잘 구성된 SVG 스프라이트 설정디자인 시스템 패키지의 아이콘을 클라이언트 앱에서 사용할 수 있도록 올바르게 구성되었습니다. 아이콘 디렉터리 경로가 디자인 시스템 패키지를 정확히 참조하고 있으며, 기존 플러그인들과 잘 통합되어 있습니다.
packages/design-system/src/icons/components/icon.tsx (1)
41-78: 전반적으로 잘 구현된 아이콘 컴포넌트타입 안전성을 보장하고 다양한 커스터마이징 옵션을 제공하는 잘 구성된 아이콘 컴포넌트입니다. SVG 스프라이트 시스템과 잘 통합되어 있으며, 접근성을 고려한 기본 설정도 포함되어 있습니다.
jllee000
approved these changes
Jul 6, 2025
Comment on lines
+25
to
+41
| @utility head2 { | ||
| font-weight: 700; | ||
| font-size: 2rem; /* 32px */ | ||
| line-height: 150%; | ||
| letter-spacing: 1%; | ||
| } | ||
|
|
||
| @utility head3 { | ||
| font-weight: 700; | ||
| font-size: 1.625rem; /* 26px */ | ||
| line-height: 150%; | ||
| letter-spacing: 1%; | ||
| } | ||
|
|
||
| @utility head4 { | ||
| font-weight: 700; | ||
| font-size: 1.5rem; /* 24px */ |
Contributor
There was a problem hiding this comment.
고생하셨습니다! 디자인 시스템 확인하였습니다 :)
jjangminii
approved these changes
Jul 6, 2025
Contributor
jjangminii
left a comment
jjangminii
left a comment
There was a problem hiding this comment.
모노레포 구조에서 디자인 토큰을 설정하고 연결하는 작업이 쉽지 않았을 텐데 정말 고생 많으셨어요. 당근처럼 스태틱 토큰을 먼저 정의하고 그 위에 조립해 나가는 방식은 확장성을 고려했을 때 좋은 선택이라고 생각합니다. 전체적인 파일 구조에서도 많은 고민이 느껴져요 고생하셨습니다!
| ? 'rotate-180' | ||
| : rotate === 270 | ||
| ? 'rotate-[270deg]' | ||
| : ''; |
karnelll
approved these changes
Jul 6, 2025
Contributor
karnelll
left a comment
karnelll
left a comment
There was a problem hiding this comment.
토큰 계층화(scale → semantic → composition) 아키텍처에 대한 고민을 구체적으로 공유해주셔서 감사합니다.
현재는 복잡도를 고려해 단순한 구조로 유지하기로 한 판단이 이해됩니다.
또한 Icons SVG sprite 방식의 적용 방식을 상세히 문서화해주셔서, currentColor 처리나 generate 스크립트의 동작 방식까지 잘 정리된 덕분에 쉽게 따라갈 수 있을 것 같아요 👍
This was referenced Jul 13, 2025
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>
2 tasks
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
📌 Related Issues
✅ 체크 리스트
📄 Tasks
⭐ PR Point (To Reviewer)
1️⃣ token (color, typography) 설정 (+아키텍쳐 도입 근거)
pinback 디자인 시스템 token을 설정했어요. 모노레포 구조에서 3개의 서비스가 모두 같은 디자인 시스템을 공유하기 때문에
packages/design-system에 styles 폴더를 만들어줬어요. 그렇게 초기 아키텍쳐를 설계하는데 고민이 되는 점이 있었어요.일단 tailwind css는 vanilla-extract와 같은 다른 css 라이브러리처럼 Object 기반이 아닌 유틸리티 클래스 기반이에요. 따라서 디자인 시스템 토큰을 어떤 방식으로 구성해야 할지 고민이 됐어요.
특히 tailwind css v4.1 버전에는 tailwind.config.ts 설정 파일이 아닌
@theme이나@utility등의 키워드를 통해 css 파일을 적용할 파일에 import만 하는 구조였기 때문에 토큰화를 한다는 의미가 약하다고 생각했어요.그래서 최대한 tailwind의 유틸리티 클래스를 커스텀하는 장점을 살리기 위해 명확하게 color와 font 등의 토큰을 분리하려고 했고, 이러한 과정을 통해 아래와 같은 구조를 짜게 되었어요.
🤔 토큰 계층 세분화?
이렇게 설정을 하고 나서 이전에 봤던 당근 디자인 시스템 문서가 생각나서 해당 구조를 참고해보려고 해봤어요.
당근 디자인 시스템에서는 token을 실제 값을 사용한 Raw values를 통해 총 2단계 계층 구조를 가지도록 설정했어요.
[참고 자료] https://github.com/daangn/seed-design/tree/dev/packages/design-token
이렇게 구조를 짜게 되면 디자인 의도, 환경에 따라 다양한 조합을 토큰 만으로 쉽게 표현이 가능하고 재사용성을 높일 수 있다고 생각했어요. 하지만 와이어 프레임, GUI와 전체 서비스의 규모를 생각했을 때 이러한 토큰 계층화가 현재로는 복잡성만 높일 수 있다고 판단했어요.
따라서 이후에 서비스 규모가 커지고, 조금 더 확실한 상황/배경에 따른 토큰 조합이 필요하다고 느끼는 경우에 해당 아키텍쳐를 도입하는 것이 좋다고 판단하여 기존의 아키텍쳐를 그대로 쓰기로 결정했습니다.
2️⃣ Icons svg sprite 방식 적용
디자인 시스템에서 icon을 추가할 때 svg icon을 어떻게 사용할지 고민이 필요했어요. 회의를 통해 기존에 svg 파일을 그대로 쓰지 않고
tsx와 같은 컴포넌트 파일로 변경해서 스타일 확장이나, 변경을 용이하게 하자고 결정했지만svgr/cli방법에는 다음과 같은 문제가 존재했어요.이러한 이유를 통해
svgr/cli로 다수의 tsx를 생성하는 것이 아닌 하나의 svg 파일 안에서 다수의 svg를 정의하고 사용할(use) 아이콘만 선택하여 사용하는 sprite 기법을 선택하게 되었어요.따라서 generater함수로
source에 있는 원본 svg 리스트(name)를 뽑아와 Icon 컴포넌트에 단 하나의 svg안에<use/>를 통해 svg를 선택하도록 설계하였습니다.🤔 사용 방법?
사용 방법은 간단해요! script를 정의했기 때문에 svg만 넣어주고 스크립트만 입력하면 된답니다!
[예시 코드]
📛 주의할 점
여기서 주의할 점이 하나 있어요. width나 height 등의 속성은 그대로 넣으면 적용되지만 color와 같은 속성은 svg에 기본 값을 덮으려면 svg 코드 내부 stroke나 fill등의 속성 값에
"currentColor"를 넣어줘야 해요.따라서 svg 파일 열어서
command + shift + p혹은ctrl + shift + p를 통해 Reopen Editor with Text Editor를 입력해서 svg파일 코드를 열고, 안에 stroke나 fill등의 속성 값에서 변경이 필요한 부분에"currentColor"를 넣어주면 돼요!📷 Screenshot
Summary by CodeRabbit
New Features
Bug Fixes
Style
Chores