feat: 디자인시스템 초기 세팅#5
Merged
Merged
Conversation
- 그레이 스케일 컬러 토큰 추가 (gray-0 ~ gray-700) - shadcn/ui 호환 시맨틱 컬러 토큰 추가 - 타이포그래피 유틸리티 클래스 추가 (head, subhead, body, caption, title) - 앱 기본 배경색 설정 및 base 스타일 보완 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- icon-guide.md 분리 신규 추가 - ui-markup-guide.md 아이콘 섹션 제거 및 링크로 대체 - CLAUDE.md 참고 문서 목록 업데이트 - tsconfig.json baseUrl 제거 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Walkthrough디자인 시스템 관련 문서와 스타일, 아이콘 컴포넌트 및 레이아웃 설정을 추가·조정합니다. 전역 CSS(타이포 유틸리티·시맨틱 토큰) 변경, 로컬/웹 폰트 등록, 레이아웃 구조 수정, 아이콘 컴포넌트 및 문서(아이콘 가이드 / UI 마크업 가이드 / CLAUDE.md) 추가가 포함됩니다. Changes
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 inconclusive)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/app/page.tsx (1)
7-19:⚠️ Potential issue | 🟡 Minor
<main>시맨틱 태그 제거로 접근성 랜드마크 손실이전에
<main>이었던 페이지 루트 요소가<div>로 변경되었습니다. 현재src/app/layout.tsx에서도<main>랜드마크가 없으므로, 스크린리더가 페이지의 메인 영역을 식별할 수 없는 회귀가 발생합니다.페이지(또는 레이아웃)에 정확히 하나의
<main>랜드마크를 두는 것이 권장됩니다.♻️ 제안 수정안 (페이지에서 main 유지)
- <div className="flex flex-col items-center gap-8 py-10"> + <main className="flex flex-col items-center gap-8 py-10"> <div className="flex flex-col items-center gap-4 text-center"> ... </div> <div className="flex gap-3"> <Button>오늘의 문장 작성하기</Button> <Button variant="outline">문장 모아보기</Button> </div> - </div> + </main>또는
src/app/layout.tsx의 외곽<div>를<main>으로 바꾸는 방향도 가능합니다.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/app/page.tsx` around lines 7 - 19, The page removed the semantic <main> landmark (the root container in src/app/page.tsx now uses a <div>), causing loss of the main accessibility landmark; restore a single <main> landmark by replacing the outer <div className="flex flex-col items-center gap-8 py-10"> back to <main> (or alternatively update the outer wrapper in src/app/layout.tsx to be <main>) so that the page has exactly one <main> element and retains the existing classes and children (BookOpen, h1, p, and the two Button elements).
🧹 Nitpick comments (8)
src/shared/ui/icons/IcCalendar.tsx (1)
14-30:viewBox="0 0 24 24"인자는 중복
BaseIcon이 이미viewBox의 기본값으로"0 0 24 24"를 가지고 있어 명시적으로 전달할 필요가 없습니다. 다른 viewBox가 필요한 아이콘에서만 지정하도록 두는 편이 의도가 더 명확합니다.♻️ 제안 수정안
- <BaseIcon viewBox="0 0 24 24" fill="none" {...props}> + <BaseIcon fill="none" {...props}>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/shared/ui/icons/IcCalendar.tsx` around lines 14 - 30, Remove the redundant viewBox="0 0 24 24" prop passed to BaseIcon in IcCalendar; BaseIcon already defaults to that viewBox, so delete the explicit viewBox from both BaseIcon usages in the IcCalendar component (keep the rest of the props spread {...props} and other attributes intact), only add viewBox explicitly if a non-default value is required.src/shared/ui/icons/icon.types.ts (1)
1-4:className재선언은 불필요 (이미SVGProps에 포함)
React.SVGProps<SVGSVGElement>는 이미className?: string을 포함하고 있으므로, 별도 선언은 중복입니다. 의도적으로 타입 좁히기를 한 게 아니라면 제거하는 편이 깔끔합니다.♻️ 제안 수정안
export interface IconProps extends React.SVGProps<SVGSVGElement> { size?: number; - className?: string; }🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/shared/ui/icons/icon.types.ts` around lines 1 - 4, Remove the redundant className declaration from the IconProps interface: IconProps currently extends React.SVGProps<SVGSVGElement> which already includes className, so delete the explicit "className?: string" property in IconProps to avoid duplication and rely on the inherited type from React.SVGProps<SVGSVGElement>.src/shared/ui/icons/IcHome.tsx (1)
11-21:viewBox="0 0 24 24"명시 전달은 중복
BaseIcon의viewBox기본값이 이미"0 0 24 24"이므로 두 variant 모두에서 생략 가능합니다. 동일한 중복이IcCalendar.tsx에도 있어 함께 정리하면 좋습니다.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/shared/ui/icons/IcHome.tsx` around lines 11 - 21, 현재 IcHome 컴포넌트의 두 반환 경로에서 BaseIcon에 중복으로 viewBox="0 0 24 24"를 명시하고 있는데 BaseIcon에 동일한 기본값이 있으므로 해당 viewBox 속성을 제거하세요; 해당 변경은 IcHome 함수의 JSX 반환부(첫 번째 BaseIcon 및 두 번째 BaseIcon 모두)에서 viewBox prop을 삭제하면 되고 동일한 중복이 있는 IcCalendar 컴포넌트에서도 같은 방식으로 viewBox를 제거하여 중복을 정리하세요.src/app/layout.tsx (2)
9-13:public/내 폰트를next/font/local로 참조하는 패턴 확인 권장
next/font/local은 폰트 파일을 빌드 시점에 처리해 자체 호스팅과 CSS 인라인 등을 수행합니다.public/폴더에 둔 파일을 상대경로로 참조하면next/font처리분과 별개로/fonts/...에 정적으로도 노출되어 동일 파일이 두 경로로 서빙될 수 있습니다.권장 위치는
src/app/fonts/또는src/shared/assets/fonts/같은 빌드 자산 영역입니다(공식 예제도 동일). 대용량 가변 폰트일수록 중복 노출/캐싱 혼선을 줄일 수 있습니다.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/app/layout.tsx` around lines 9 - 13, The localFont declaration using pretendard currently points at "../../public/fonts/subset-PretendardVariable.woff2" which causes the same file to be served from /public and also processed by next/font; move the font file into a build-assets directory (e.g., src/app/fonts/ or src/shared/assets/fonts/), update the localFont src in the pretendard call to the new relative path, and remove any other public/fonts copy so the font is only consumed by localFont (then rebuild to ensure next/font inlines/handles the file correctly).
34-39:min-h-dvh가<body>와 내부<div>에 중복 적용됨
<body>와 내부 컨테이너<div>양쪽에min-h-dvh가 걸려있습니다. 시각적 영향은 없지만 의도가 모호해지므로 한쪽으로 정리하는 편이 좋습니다.또한
<body>의bg-background는 데스크탑에서md:max-w-93.75 md:mx-auto로 인해 좌우 여백에서만 보입니다. 의도된 디자인이라면 OK이지만, 모바일 전용 레이아웃이라면bg-gray-50을<body>로 올려서 일원화해도 됩니다.♻️ 제안 수정안
- <body className="min-h-dvh bg-background text-foreground antialiased"> + <body className="bg-background text-foreground antialiased"> <Providers> <div className="min-h-dvh w-full bg-gray-50 px-5 md:mx-auto md:max-w-93.75"> {children} </div> </Providers> </body>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/app/layout.tsx` around lines 34 - 39, The outer <body> and the inner container <div> both have the same min-h-dvh utility, causing redundant styling and ambiguous intent; pick one place for the min-h-dvh (recommend keeping it on the <body> and remove it from the inner <div>'s className) and consolidate background utilities accordingly (if the gray background is meant to cover the full viewport on mobile, move bg-gray-50 from the inner <div> into the <body> className; otherwise keep bg-background on <body> and remove bg-gray-50 from the inner <div>). Update the two className attributes (the <body> className and the inner container <div> className) to reflect this single-source decision so only one element manages min-h-dvh and the intended background.docs/ui-markup-guide.md (2)
15-15: markdownlint MD058: 테이블 위/아래 빈 줄 누락여러 표 직전·직후에 빈 줄이 없어 markdownlint 경고가 발생합니다. 문서 가독성 및 일부 마크다운 렌더러 호환을 위해 표 앞뒤로 빈 줄을 추가해 주세요. (해당 라인: 15, 49, 62, 77, 95 주변)
Also applies to: 49-49, 62-62, 77-77, 95-95
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@docs/ui-markup-guide.md` at line 15, Add a blank line immediately before and after each Markdown table to satisfy markdownlint MD058; specifically insert an empty line above and below the table starting at the lines referenced (the table beginning at line 15 and the other tables around lines 49, 62, 77, and 95) so each table is separated from surrounding text by one empty line.
211-216:md:max-w-93.75표기를 더 명확하게 개선하세요.현재 코드(src/app/layout.tsx)에서 실제로
md:max-w-93.75를 사용하고 있으며, 문서가 이를 정확히 반영하고 있습니다. 다만 이 표기는 Tailwind 표준 관례가 아니며, 375px의 의도가 직관적으로 드러나지 않아 개발자가 오해하기 쉽습니다.코드와 문서에서 모두
md:max-w-[375px]형식의 임의값 표기로 변경하면 의도가 즉시 명확해집니다.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@docs/ui-markup-guide.md` around lines 211 - 216, Summary: Replace the nonstandard Tailwind token md:max-w-93.75 with the explicit arbitrary-value form md:max-w-[375px] in both code and docs. Find every occurrence of the class token "md:max-w-93.75" (e.g., in layout markup) and change it to "md:max-w-[375px]" so the 375px intent is explicit and follows Tailwind arbitrary-value syntax; update the docs text listing the layout rules to reflect the same "md:max-w-[375px]" notation.docs/icon-guide.md (1)
9-17: 문서의 디렉터리 트리에 존재하지 않는 파일이 포함되어 있습니다
IcChevronLeft.tsx는 현재src/shared/ui/icons/에 실제로 존재하지 않습니다. 실제로 존재하는IcHome.tsx,IcCalendar.tsx와 동일한 수준으로 나열되어 있어 마치 이미 추가된 파일처럼 보일 수 있습니다. 실제 파일과 패턴 예시를 명확히 구분하기 위해 주석을 개선하세요.제안
shared/ui/icons/ ├── BaseIcon.tsx # SVG 래퍼 (수정 불필요) ├── icon.types.ts # IconProps 타입 -├── IcHome.tsx # 아이콘 컴포넌트 예시 -├── IcCalendar.tsx -├── IcChevronLeft.tsx +├── IcHome.tsx # 아이콘 컴포넌트 +├── IcCalendar.tsx # 아이콘 컴포넌트 +├── IcArrowRight.tsx # ← 새 아이콘 추가 시 같은 패턴으로 └── index.ts # barrel export🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@docs/icon-guide.md` around lines 9 - 17, The directory tree in docs lists a non-existent file (IcChevronLeft.tsx) alongside real files (IcHome.tsx, IcCalendar.tsx); update the comment/notes in icon-guide.md so the tree only shows actual files or clearly marks examples as "example/missing" — e.g., annotate IcChevronLeft.tsx as "(example: not present in src/shared/ui/icons/)" or remove it, and add a brief note explaining which entries are real (IcHome.tsx, IcCalendar.tsx, BaseIcon.tsx, icon.types.ts, index.ts) and which are illustrative to avoid confusion when readers look for IcChevronLeft.tsx.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/app/globals.css`:
- Line 34: The CSS comment "/* Border radius 임시*/" violates stylelint's
comment-whitespace-inside rule; update the comment in globals.css (the "/*
Border radius 임시*/" token) to include a space before the closing "*/" so it
becomes "/* Border radius 임시 */" to satisfy the linter.
- Around line 16-28: Add the missing semantic CSS tokens so Tailwind/@theme can
generate utilities used by the button component: define
--color-destructive-foreground, --color-accent, and --color-accent-foreground in
globals.css (matching the existing naming pattern alongside --color-destructive
and --color-primary), so classes referenced in src/shared/ui/button.tsx (e.g.,
text-destructive-foreground, hover:bg-accent, hover:text-accent-foreground,
dark:hover:bg-accent/50) resolve to valid CSS variables; use sensible temporary
values consistent with the current light theme palette until final design tokens
are provided.
In `@src/app/layout.tsx`:
- Around line 15-20: The Nanum_Myeongjo font instantiation (constant
nanumMyeongjo) is currently only loading the "latin" subset, which omits Korean
glyphs; update the subsets option for the Nanum_Myeongjo(...) call to include
the "korean" subset (e.g., subsets: ["korean", "latin"] or just ["korean"]) so
Korean characters are preloaded and rendered correctly wherever nanumMyeongjo is
used.
In `@src/shared/ui/icons/IcHome.tsx`:
- Around line 8-25: Rename the shorthand component names to full-word names
(e.g., change IcHome to IconHome and IcCalendar to IconCalendar) and update
their default/export names in their files and in the icons barrel (the shared
icons index) plus every import site; ensure the component declarations and
exported identifiers (IcHome, IcCalendar) are replaced with IconHome and
IconCalendar and adjust any usages/import statements accordingly so builds and
exports stay consistent.
---
Outside diff comments:
In `@src/app/page.tsx`:
- Around line 7-19: The page removed the semantic <main> landmark (the root
container in src/app/page.tsx now uses a <div>), causing loss of the main
accessibility landmark; restore a single <main> landmark by replacing the outer
<div className="flex flex-col items-center gap-8 py-10"> back to <main> (or
alternatively update the outer wrapper in src/app/layout.tsx to be <main>) so
that the page has exactly one <main> element and retains the existing classes
and children (BookOpen, h1, p, and the two Button elements).
---
Nitpick comments:
In `@docs/icon-guide.md`:
- Around line 9-17: The directory tree in docs lists a non-existent file
(IcChevronLeft.tsx) alongside real files (IcHome.tsx, IcCalendar.tsx); update
the comment/notes in icon-guide.md so the tree only shows actual files or
clearly marks examples as "example/missing" — e.g., annotate IcChevronLeft.tsx
as "(example: not present in src/shared/ui/icons/)" or remove it, and add a
brief note explaining which entries are real (IcHome.tsx, IcCalendar.tsx,
BaseIcon.tsx, icon.types.ts, index.ts) and which are illustrative to avoid
confusion when readers look for IcChevronLeft.tsx.
In `@docs/ui-markup-guide.md`:
- Line 15: Add a blank line immediately before and after each Markdown table to
satisfy markdownlint MD058; specifically insert an empty line above and below
the table starting at the lines referenced (the table beginning at line 15 and
the other tables around lines 49, 62, 77, and 95) so each table is separated
from surrounding text by one empty line.
- Around line 211-216: Summary: Replace the nonstandard Tailwind token
md:max-w-93.75 with the explicit arbitrary-value form md:max-w-[375px] in both
code and docs. Find every occurrence of the class token "md:max-w-93.75" (e.g.,
in layout markup) and change it to "md:max-w-[375px]" so the 375px intent is
explicit and follows Tailwind arbitrary-value syntax; update the docs text
listing the layout rules to reflect the same "md:max-w-[375px]" notation.
In `@src/app/layout.tsx`:
- Around line 9-13: The localFont declaration using pretendard currently points
at "../../public/fonts/subset-PretendardVariable.woff2" which causes the same
file to be served from /public and also processed by next/font; move the font
file into a build-assets directory (e.g., src/app/fonts/ or
src/shared/assets/fonts/), update the localFont src in the pretendard call to
the new relative path, and remove any other public/fonts copy so the font is
only consumed by localFont (then rebuild to ensure next/font inlines/handles the
file correctly).
- Around line 34-39: The outer <body> and the inner container <div> both have
the same min-h-dvh utility, causing redundant styling and ambiguous intent; pick
one place for the min-h-dvh (recommend keeping it on the <body> and remove it
from the inner <div>'s className) and consolidate background utilities
accordingly (if the gray background is meant to cover the full viewport on
mobile, move bg-gray-50 from the inner <div> into the <body> className;
otherwise keep bg-background on <body> and remove bg-gray-50 from the inner
<div>). Update the two className attributes (the <body> className and the inner
container <div> className) to reflect this single-source decision so only one
element manages min-h-dvh and the intended background.
In `@src/shared/ui/icons/IcCalendar.tsx`:
- Around line 14-30: Remove the redundant viewBox="0 0 24 24" prop passed to
BaseIcon in IcCalendar; BaseIcon already defaults to that viewBox, so delete the
explicit viewBox from both BaseIcon usages in the IcCalendar component (keep the
rest of the props spread {...props} and other attributes intact), only add
viewBox explicitly if a non-default value is required.
In `@src/shared/ui/icons/IcHome.tsx`:
- Around line 11-21: 현재 IcHome 컴포넌트의 두 반환 경로에서 BaseIcon에 중복으로 viewBox="0 0 24
24"를 명시하고 있는데 BaseIcon에 동일한 기본값이 있으므로 해당 viewBox 속성을 제거하세요; 해당 변경은 IcHome 함수의
JSX 반환부(첫 번째 BaseIcon 및 두 번째 BaseIcon 모두)에서 viewBox prop을 삭제하면 되고 동일한 중복이 있는
IcCalendar 컴포넌트에서도 같은 방식으로 viewBox를 제거하여 중복을 정리하세요.
In `@src/shared/ui/icons/icon.types.ts`:
- Around line 1-4: Remove the redundant className declaration from the IconProps
interface: IconProps currently extends React.SVGProps<SVGSVGElement> which
already includes className, so delete the explicit "className?: string" property
in IconProps to avoid duplication and rely on the inherited type from
React.SVGProps<SVGSVGElement>.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 89191386-8a85-407f-a6e3-2adcc5b43cf1
⛔ Files ignored due to path filters (1)
public/fonts/subset-PretendardVariable.woff2is excluded by!**/*.woff2
📒 Files selected for processing (12)
CLAUDE.mddocs/icon-guide.mddocs/ui-markup-guide.mdsrc/app/globals.csssrc/app/layout.tsxsrc/app/page.tsxsrc/shared/ui/icons/BaseIcon.tsxsrc/shared/ui/icons/IcCalendar.tsxsrc/shared/ui/icons/IcHome.tsxsrc/shared/ui/icons/icon.types.tssrc/shared/ui/icons/index.tstsconfig.json
💤 Files with no reviewable changes (1)
- tsconfig.json
| --font-sans: var(--font-pretendard); | ||
| --font-serif: var(--font-nanum-myeongjo); | ||
|
|
||
| /* Border radius 임시*/ |
There was a problem hiding this comment.
stylelint(comment-whitespace-inside): 주석 닫기 앞에 공백 필요
- /* Border radius 임시*/
+ /* Border radius 임시 */📝 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
| /* Border radius 임시*/ | |
| /* Border radius 임시 */ |
🧰 Tools
🪛 Stylelint (17.9.0)
[error] 34-34: Expected whitespace before "*/" (comment-whitespace-inside)
(comment-whitespace-inside)
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/app/globals.css` at line 34, The CSS comment "/* Border radius 임시*/"
violates stylelint's comment-whitespace-inside rule; update the comment in
globals.css (the "/* Border radius 임시*/" token) to include a space before the
closing "*/" so it becomes "/* Border radius 임시 */" to satisfy the linter.
Comment on lines
+15
to
20
| const nanumMyeongjo = Nanum_Myeongjo({ | ||
| weight: ["400", "700", "800"], | ||
| subsets: ["latin"], | ||
| variable: "--font-nanum-myeongjo", | ||
| display: "swap", | ||
| }); |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
cat -n src/app/layout.tsxRepository: depromeet/18th-team1-fe-2
Length of output: 1563
🌐 Web query:
Nanum_Myeongjo next/font/google korean subset support
💡 Result:
In Next.js, you can load Google Fonts (via next/font/google) for specific subsets using the subsets option. next/font/google expects subset names that exist for the font on Google Fonts. For Nanum Myeongjo, the Korean subset is supported, so you can request it with subsets: ['korean'] (optionally alongside ['latin']). Example: import { Nanum_Myeongjo } from 'next/font/google' const nanum = Nanum_Myeongjo({ subsets: ['korean'], // or ['korean', 'latin'] }) Notes: - next/font/google documents that you specify which subsets to preload via the subsets array, and that you can find the list of subsets on the Google Fonts page for the font. - The Google Fonts metadata for Nanum Myeongjo indicates available subsets include korean (and latin), meaning the Korean writing system subset exists for the font you can preload via next/font/google.
Citations:
- 1: https://nextjs.org/docs/pages/api-reference/components/font
- 2: https://nextjs.org/docs/14/app/api-reference/components/font
- 3: https://www.npmjs.com/package/@fontsource/nanum-myeongjo
- 4: https://fonts.google.com/specimen/Nanum+Myeongjo
- 5: https://fonts.and.guide/fontfamily/nanum-myeongjo/
한국어 서브셋 누락: Nanum Myeongjo 폰트 설정 수정 필요
Nanum_Myeongjo는 한글 명조체이지만 subsets: ["latin"]만 지정되어 있어 한국어 글리프가 프리로드되지 않습니다. 현재 설정으로는 한국어 텍스트가 폴백 폰트로 렌더될 가능성이 높습니다.
next/font/google의 Nanum Myeongjo는 "korean" 서브셋을 지원하므로 아래와 같이 수정하세요:
수정 제안
const nanumMyeongjo = Nanum_Myeongjo({
weight: ["400", "700", "800"],
- subsets: ["latin"],
+ subsets: ["latin", "korean"],
variable: "--font-nanum-myeongjo",
display: "swap",
});📝 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
| const nanumMyeongjo = Nanum_Myeongjo({ | |
| weight: ["400", "700", "800"], | |
| subsets: ["latin"], | |
| variable: "--font-nanum-myeongjo", | |
| display: "swap", | |
| }); | |
| const nanumMyeongjo = Nanum_Myeongjo({ | |
| weight: ["400", "700", "800"], | |
| subsets: ["latin", "korean"], | |
| variable: "--font-nanum-myeongjo", | |
| display: "swap", | |
| }); |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/app/layout.tsx` around lines 15 - 20, The Nanum_Myeongjo font
instantiation (constant nanumMyeongjo) is currently only loading the "latin"
subset, which omits Korean glyphs; update the subsets option for the
Nanum_Myeongjo(...) call to include the "korean" subset (e.g., subsets:
["korean", "latin"] or just ["korean"]) so Korean characters are preloaded and
rendered correctly wherever nanumMyeongjo is used.
Comment on lines
+8
to
+25
| export const IcHome = ({ variant = "default", ...props }: IcHomeProps): React.ReactElement => { | ||
| if (variant === "line") { | ||
| return ( | ||
| <BaseIcon viewBox="0 0 24 24" fill="none" {...props}> | ||
| <path | ||
| d="M11.6875 3.89062C11.8701 3.74454 12.1299 3.74454 12.3125 3.89062L20.3125 10.29C20.4311 10.3849 20.5 10.5288 20.5 10.6807V19C20.5 19.1326 20.4473 19.2598 20.3535 19.3535C20.2597 19.4473 20.1326 19.5 20 19.5H15.1816C14.9056 19.4999 14.6816 19.2761 14.6816 19V15C14.6816 14.1716 14.0101 13.5 13.1816 13.5H10.8184C9.98993 13.5 9.31836 14.1716 9.31836 15V19C9.31836 19.2761 9.09442 19.4999 8.81836 19.5H4C3.86739 19.5 3.74025 19.4473 3.64648 19.3535C3.55272 19.2597 3.5 19.1326 3.5 19V10.6807C3.5 10.5288 3.5689 10.3849 3.6875 10.29L11.6875 3.89062Z" | ||
| stroke="currentColor" | ||
| /> | ||
| </BaseIcon> | ||
| ); | ||
| } | ||
|
|
||
| return ( | ||
| <BaseIcon viewBox="0 0 24 24" {...props}> | ||
| <path d="M3 10.6806C3 10.3768 3.13809 10.0895 3.37531 9.89976L11.3753 3.49976C11.7405 3.20758 12.2595 3.20758 12.6247 3.49976L20.6247 9.89976C20.8619 10.0895 21 10.3768 21 10.6806V19C21 19.2652 20.8946 19.5196 20.7071 19.7071C20.5196 19.8946 20.2652 20 20 20H15.1818C14.6295 20 14.1818 19.5523 14.1818 19V15C14.1818 14.4477 13.7341 14 13.1818 14H10.8182C10.2659 14 9.81818 14.4477 9.81818 15V19C9.81818 19.5523 9.37047 20 8.81818 20H4C3.73478 20 3.48043 19.8946 3.29289 19.7071C3.10536 19.5196 3 19.2652 3 19V10.6806Z" /> | ||
| </BaseIcon> | ||
| ); | ||
| }; |
There was a problem hiding this comment.
네이밍 컨벤션 위배: Ic 접두사는 약어
코딩 가이드라인의 "줄임말 지양: btn(✗) → button(✓)" 규칙에 따라, Ic(Icon의 약어) 접두사는 권장되지 않습니다. 동일한 패턴이 src/shared/ui/icons/IcCalendar.tsx와 배럴 파일에도 적용되어 있어, 변경 시 함께 업데이트가 필요합니다.
IconHome, IconCalendar처럼 풀어서 사용하거나 폴더 위치(shared/ui/icons/)로 충분히 식별되므로 접두사 자체를 제거하는 방안(Home, Calendar)도 고려해 보세요.
As per coding guidelines: "줄임말 지양: btn (✗) → button (✓)"
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/shared/ui/icons/IcHome.tsx` around lines 8 - 25, Rename the shorthand
component names to full-word names (e.g., change IcHome to IconHome and
IcCalendar to IconCalendar) and update their default/export names in their files
and in the icons barrel (the shared icons index) plus every import site; ensure
the component declarations and exported identifiers (IcHome, IcCalendar) are
replaced with IconHome and IconCalendar and adjust any usages/import statements
accordingly so builds and exports stay consistent.
nakyeongg
approved these changes
Apr 25, 2026
- destructive-foreground, accent, accent-foreground 토큰 추가 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
There was a problem hiding this comment.
Actionable comments posted: 2
♻️ Duplicate comments (1)
src/app/globals.css (1)
37-37:⚠️ Potential issue | 🟡 Minorstylelint(comment-whitespace-inside): 주석 닫기 앞 공백 필요 (재발)
이전 리뷰(당시 line 34)에서 동일하게 지적된 항목이 그대로 남아 있습니다. stylelint 규칙
comment-whitespace-inside를 위반합니다.- /* Border radius 임시*/ + /* Border radius 임시 */🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/app/globals.css` at line 37, The CSS comment "/* Border radius 임시*/" violates stylelint rule comment-whitespace-inside; fix it by adding a space before the closing */ so the comment reads "/* Border radius 임시 */", and scan other comments in globals.css for the same pattern to correct any duplicates and satisfy the rule (rule name: comment-whitespace-inside).
🧹 Nitpick comments (1)
src/app/globals.css (1)
60-196: 타이포그래피 유틸리티 — 공통 속성 중복 정리 검토 (선택)20개의 타이포 클래스 모두
line-height: 1.5;와letter-spacing: -0.02em;이 동일하게 반복됩니다. 디자인이 의도적으로 동일값을 공유한다면, 다음 중 하나로 중복을 줄이는 편이 유지보수에 유리합니다.
- 공통 베이스 셀렉터(예:
[class^="head"], [class^="subhead"], [class^="body"], [class^="caption"], [class^="title"])에 line-height/letter-spacing을 한 번만 선언- 또는
@theme에--leading-tight: 1.5; --tracking-tight: -0.02em;같은 토큰을 두고 각 유틸에서 재사용값 변경 시 한 곳만 고치면 되어 디자인 토큰 변경 비용이 줄어듭니다. 폰트 크기/굵기/letter-spacing/line-height는
docs/ui-markup-guide.md의 표와 모두 일치하는 것은 확인했습니다.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/app/globals.css` around lines 60 - 196, Many typography utilities (.head1..head3, .subhead1..subhead6, .body1..body3, .caption1..caption2, .title1..title6) repeat line-height: 1.5 and letter-spacing: -0.02em; remove these duplicates by extracting them into a shared rule or token: either add a common selector grouping those classes (e.g. .head*, .subhead*, .body*, .caption*, .title*) that sets line-height and letter-spacing once, or define theme variables like --leading-tight: 1.5 and --tracking-tight: -0.02em and reference those variables from each utility class (keep font-size/font-weight/font-family in each specific class).
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/app/globals.css`:
- Around line 52-57: The stylelint rule requires an empty line before the
`font-family` declaration in the `body` block; update the `body` rule (selector
`body`) so there's a blank line between the `@apply bg-background
text-foreground;` at-rule and the `font-family: var(--font-sans), Arial,
Helvetica, sans-serif;` declaration (i.e., insert one empty line before
`font-family`) to satisfy the declaration-empty-line-before rule and avoid pnpm
check failures.
- Line 4: Add a class-based dark variant declaration to globals.css so
Tailwind’s `dark:` utilities respond to your `.dark` toggles; specifically,
insert the `@custom-variant dark (&:where(.dark, .dark *));` declaration near
the top of src/app/globals.css (before the `@theme` block) so the `dark:`
variants used in src/shared/ui/button.tsx become active when
useAppStore.toggleTheme toggles the `.dark` class.
---
Duplicate comments:
In `@src/app/globals.css`:
- Line 37: The CSS comment "/* Border radius 임시*/" violates stylelint rule
comment-whitespace-inside; fix it by adding a space before the closing */ so the
comment reads "/* Border radius 임시 */", and scan other comments in globals.css
for the same pattern to correct any duplicates and satisfy the rule (rule name:
comment-whitespace-inside).
---
Nitpick comments:
In `@src/app/globals.css`:
- Around line 60-196: Many typography utilities (.head1..head3,
.subhead1..subhead6, .body1..body3, .caption1..caption2, .title1..title6) repeat
line-height: 1.5 and letter-spacing: -0.02em; remove these duplicates by
extracting them into a shared rule or token: either add a common selector
grouping those classes (e.g. .head*, .subhead*, .body*, .caption*, .title*) that
sets line-height and letter-spacing once, or define theme variables like
--leading-tight: 1.5 and --tracking-tight: -0.02em and reference those variables
from each utility class (keep font-size/font-weight/font-family in each specific
class).
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 0e902bea-9bb4-4d75-bf92-cb9102344016
📒 Files selected for processing (1)
src/app/globals.css
| @import "tw-animate-css"; | ||
|
|
||
| @custom-variant dark (&:is(.dark *)); | ||
| @theme { |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# `dark:` 변형 사용처와 .dark 클래스 토글 코드를 확인
rg -nP --type=ts --type=tsx -C2 '\bdark:' src
rg -nP --type=ts --type=tsx -C3 'classList\.(add|remove|toggle)\([^)]*dark' src
rg -nP --type=ts --type=tsx -C3 '\btheme\b' src/storeRepository: depromeet/18th-team1-fe-2
Length of output: 153
🏁 Script executed:
#!/bin/bash
# Find the button component file
fd -e tsx -e ts "button" srcRepository: depromeet/18th-team1-fe-2
Length of output: 94
🏁 Script executed:
#!/bin/bash
# Find the store file
fd -e tsx -e ts "useAppStore" srcRepository: depromeet/18th-team1-fe-2
Length of output: 94
🏁 Script executed:
#!/bin/bash
# Check globals.css for current `@theme` and `@custom-variant` declarations
head -50 src/app/globals.cssRepository: depromeet/18th-team1-fe-2
Length of output: 1318
🏁 Script executed:
#!/bin/bash
# Search for dark: usage in the entire src directory (no file type filter)
rg -n "dark:" src | head -30Repository: depromeet/18th-team1-fe-2
Length of output: 1039
🏁 Script executed:
#!/bin/bash
# Search for toggleTheme in store
rg -n "toggleTheme" srcRepository: depromeet/18th-team1-fe-2
Length of output: 242
🌐 Web query:
Tailwind CSS v4 class-based dark mode @custom-variant documentation
💡 Result:
In Tailwind CSS v4, class-based dark mode is implemented by overriding the default dark variant using the @custom-variant directive in your CSS file. This replaces the v3 darkMode: 'class' config option. ## Official Documentation (tailwindcss.com/docs/dark-mode) By default, Tailwind v4 uses prefers-color-scheme: dark. For class-based manual toggling: @import "tailwindcss"; @custom-variant dark (&:where(.dark, .dark *)); Add the dark class to an ancestor element (typically ):
Dark styles apply here
For data attributes instead of classes: @custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *)); Dark styles apply
Toggle with JavaScript, syncing to localStorage and respecting system preference: js // Avoid FOUC: run in document.documentElement.classList.toggle( 'dark', localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches) ); ## Advanced: Long-form @custom-variant for System Preference Fallback The shorthand @custom-variant dark (&:where(.dark, .dark *)); overrides the default media query. For hybrid support (class override + system fallback): @custom-variant dark { &:where(.dark, .dark *) { @slot; } @media (prefers-color-scheme: dark) { &:where(:not(.light *)) { @slot; } } } This prioritizes explicit .dark/.light classes, falling back to system preference when no class is present. ## Theme Variables with Dark Mode Define CSS variables in @theme, override in dark mode: @theme { --color-bg: oklch(98% 0 0); } @layer theme { :root { @variant dark { --color-bg: oklch(10% 0 0); } } } Use as bg-[--color-bg]. The @custom-variant syntax uses CSS nesting and :where for descendant matching with optimal specificity.
Citations:
- 1: https://tailwindcss.com/docs/dark-mode
- 2: https://schoen.world/n/tailwind-dark-mode-custom-variant
- 3: https://tailkits.com/blog/dark-text-styling-tailwind/
- 4: Define a @custom-variant dark with media query when in os system dark mode tailwindlabs/tailwindcss#19330
- 5: https://stackoverflow.com/questions/79487101/tailwindcss-v4-dark-theme-by-class-not-working-without-dark-tag
dark: 변형 회귀 — @custom-variant dark 누락으로 클래스 기반 다크 모드 비활성화
src/shared/ui/button.tsx에서 다수의 dark: 변형을 사용하고 있고(line 8: dark:aria-invalid:ring-destructive/40, line 14: dark:focus-visible:ring-destructive/40, line 16: dark:bg-input/30, dark:border-input, dark:hover:bg-input/50, line 18: dark:hover:bg-accent/50), src/store/useAppStore.ts의 toggleTheme 함수로 dark 클래스를 토글하고 있으나, src/app/globals.css에 @custom-variant dark 선언이 없습니다.
Tailwind v4는 기본적으로 prefers-color-scheme: dark 미디어쿼리만 사용하므로, 클래스 기반 다크 모드(.dark 클래스 토글)를 지원하려면 CSS 파일에 @custom-variant dark (&:where(.dark, .dark *));을 명시적으로 추가해야 합니다. 현재 상태에서는 useAppStore로 .dark 클래스를 토글해도 button.tsx의 dark: 스타일이 활성화되지 않으며, OS 다크 모드 설정에만 반응합니다.
아래처럼 @custom-variant dark를 추가하여 클래스 기반 다크 모드를 복구하세요:
`@import` "tailwindcss";
`@import` "tw-animate-css";
`@custom-variant` dark (&:where(.dark, .dark *));
`@theme` {
/* ... */
}🧰 Tools
🪛 Stylelint (17.9.0)
[error] 4-4: Unexpected unknown at-rule "@theme" (scss/at-rule-no-unknown)
(scss/at-rule-no-unknown)
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/app/globals.css` at line 4, Add a class-based dark variant declaration to
globals.css so Tailwind’s `dark:` utilities respond to your `.dark` toggles;
specifically, insert the `@custom-variant dark (&:where(.dark, .dark *));`
declaration near the top of src/app/globals.css (before the `@theme` block) so
the `dark:` variants used in src/shared/ui/button.tsx become active when
useAppStore.toggleTheme toggles the `.dark` class.
Comment on lines
52
to
+57
| body { | ||
| @apply bg-background text-foreground; | ||
| font-family: var(--font-sans), Arial, Helvetica, sans-serif; | ||
| word-break: keep-all; | ||
| touch-action: manipulation; | ||
| } |
There was a problem hiding this comment.
stylelint(declaration-empty-line-before): font-family 앞 빈 줄 필요
stylelint가 line 54의 font-family 선언 앞에 빈 줄을 요구합니다(@apply 같은 at-rule 다음에 일반 선언이 오는 경우의 규칙). pnpm check 실행 시 동일 이슈가 잡힐 가능성이 있으니, 함께 정리해 두시면 좋겠습니다.
🔧 제안
body {
`@apply` bg-background text-foreground;
+
font-family: var(--font-sans), Arial, Helvetica, sans-serif;
word-break: keep-all;
touch-action: manipulation;
}📝 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
| body { | |
| @apply bg-background text-foreground; | |
| font-family: var(--font-sans), Arial, Helvetica, sans-serif; | |
| word-break: keep-all; | |
| touch-action: manipulation; | |
| } | |
| body { | |
| `@apply` bg-background text-foreground; | |
| font-family: var(--font-sans), Arial, Helvetica, sans-serif; | |
| word-break: keep-all; | |
| touch-action: manipulation; | |
| } |
🧰 Tools
🪛 Stylelint (17.9.0)
[error] 54-54: Expected empty line before declaration (declaration-empty-line-before)
(declaration-empty-line-before)
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/app/globals.css` around lines 52 - 57, The stylelint rule requires an
empty line before the `font-family` declaration in the `body` block; update the
`body` rule (selector `body`) so there's a blank line between the `@apply
bg-background text-foreground;` at-rule and the `font-family: var(--font-sans),
Arial, Helvetica, sans-serif;` declaration (i.e., insert one empty line before
`font-family`) to satisfy the declaration-empty-line-before rule and avoid pnpm
check failures.
ballsona
pushed a commit
that referenced
this pull request
Apr 25, 2026
* feat: 아이콘 공통 컴포넌트 초기 세팅 (#3) * feat: 모바일 레이아웃 세팅 (#3) * feat: 폰트 추가 (#3) * feat: 디자인 시스템 컬러 및 타이포그래피 토큰 추가 (#3) - 그레이 스케일 컬러 토큰 추가 (gray-0 ~ gray-700) - shadcn/ui 호환 시맨틱 컬러 토큰 추가 - 타이포그래피 유틸리티 클래스 추가 (head, subhead, body, caption, title) - 앱 기본 배경색 설정 및 base 스타일 보완 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * docs: UI 마크업 가이드 문서 추가 (#3) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * docs: 아이콘 가이드 추가 및 문서 정리 (#3) - icon-guide.md 분리 신규 추가 - ui-markup-guide.md 아이콘 섹션 제거 및 링크로 대체 - CLAUDE.md 참고 문서 목록 업데이트 - tsconfig.json baseUrl 제거 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * style: 앱 배경색 gray-50 토큰으로 변경 (#3) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * fix: shadcn/ui 호환 토큰 누락 추가 (#3) - destructive-foreground, accent, accent-foreground 토큰 추가 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> --------- Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
cindy-chaewon
added a commit
that referenced
this pull request
Apr 25, 2026
* chore: vscode 팀 공통 개발환경 설정 추가 (#2) * chore: VSCode 팀 공통 개발환경 설정 추가 (#1) * docs: Biome 활용법 추가 (#1) * chore: jsonc 언어 ID 추가 (#1) * feat: 디자인시스템 초기 세팅 (#5) * feat: 아이콘 공통 컴포넌트 초기 세팅 (#3) * feat: 모바일 레이아웃 세팅 (#3) * feat: 폰트 추가 (#3) * feat: 디자인 시스템 컬러 및 타이포그래피 토큰 추가 (#3) - 그레이 스케일 컬러 토큰 추가 (gray-0 ~ gray-700) - shadcn/ui 호환 시맨틱 컬러 토큰 추가 - 타이포그래피 유틸리티 클래스 추가 (head, subhead, body, caption, title) - 앱 기본 배경색 설정 및 base 스타일 보완 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * docs: UI 마크업 가이드 문서 추가 (#3) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * docs: 아이콘 가이드 추가 및 문서 정리 (#3) - icon-guide.md 분리 신규 추가 - ui-markup-guide.md 아이콘 섹션 제거 및 링크로 대체 - CLAUDE.md 참고 문서 목록 업데이트 - tsconfig.json baseUrl 제거 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * style: 앱 배경색 gray-50 토큰으로 변경 (#3) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * fix: shadcn/ui 호환 토큰 누락 추가 (#3) - destructive-foreground, accent, accent-foreground 토큰 추가 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> --------- Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com> * feat: 라우트 골격 및 NavBar 위젯 구현 (#7) * feat: OptionMenu 컴포넌트 및 아이콘 추가 (#8) * feat: IcBack, IcCheck, IcOption, IcSetting 아이콘 추가 (#8) * feat: OptionMenu 파일명 kebab-case로 변경 및 dim 오버레이 추가 (#8) * style: 전역 버튼 cursor pointer 스타일 추가 (#8) * feat: Header 위젯 구현 (default/detail/write variant) (#8) * docs: shared/ui 컴포넌트 파일 네이밍 kebab-case 규칙 추가 (#8) * chore: shadcn ui 파일 useExplicitType lint 규칙 비활성화 (#8) * fix: 헤더 테스트 코드 제거 (#8) * refactor: OptionMenu items 배열 기반으로 리팩토링 및 destructive 색상 수정 (#8) * refactor: Header right 슬롯 기반으로 재설계 및 onBack 기본값 router.back() 적용 (#8) --------- Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
ballsona
added a commit
that referenced
this pull request
Apr 30, 2026
* chore: vscode 팀 공통 개발환경 설정 추가 (#2) * chore: VSCode 팀 공통 개발환경 설정 추가 (#1) * docs: Biome 활용법 추가 (#1) * chore: jsonc 언어 ID 추가 (#1) * feat: 디자인시스템 초기 세팅 (#5) * feat: 아이콘 공통 컴포넌트 초기 세팅 (#3) * feat: 모바일 레이아웃 세팅 (#3) * feat: 폰트 추가 (#3) * feat: 디자인 시스템 컬러 및 타이포그래피 토큰 추가 (#3) - 그레이 스케일 컬러 토큰 추가 (gray-0 ~ gray-700) - shadcn/ui 호환 시맨틱 컬러 토큰 추가 - 타이포그래피 유틸리티 클래스 추가 (head, subhead, body, caption, title) - 앱 기본 배경색 설정 및 base 스타일 보완 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * docs: UI 마크업 가이드 문서 추가 (#3) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * docs: 아이콘 가이드 추가 및 문서 정리 (#3) - icon-guide.md 분리 신규 추가 - ui-markup-guide.md 아이콘 섹션 제거 및 링크로 대체 - CLAUDE.md 참고 문서 목록 업데이트 - tsconfig.json baseUrl 제거 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * style: 앱 배경색 gray-50 토큰으로 변경 (#3) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * fix: shadcn/ui 호환 토큰 누락 추가 (#3) - destructive-foreground, accent, accent-foreground 토큰 추가 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> --------- Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com> * feat: 라우트 골격 및 NavBar 위젯 구현 (#7) * feat: 버튼 및 모달 컴포넌트 구현 (#9) * fix: 네임스페이스 및 이벤트 타입 임포트 추가 (#9) * refactor: 모달 제목 태그 변경 (#9) * refactor: props 접두어 변경 (#9) * feat: 모달 표준 동작 추가 (#9) * fix: 변경된 버튼 props 적용 (#9) * fix: 임시 테스트용 코드 삭제 (#9) * feat: 버튼 컴포넌트에 가로, 세로 길이 props 추가 (#9) * refactor: 일기 삭제 모달의 버튼을 공통 컴포넌트로 변경 (#9) * refactor: ButtonWithIcon 삭제 후 IconButton 컴포넌트로 분리 (#9) * refactor: Button 컴포넌트의 props에 className 추가 (#9) * refactor: ButtonDouble을 DoubleButton으로 변경 및 props 개선 (#9) * fix: Button props 변경에 따른 스토리 및 사용처 코드 수정 (#9) --------- Co-authored-by: chaewon <101500670+cindy-chaewon@users.noreply.github.com> Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com> Co-authored-by: ballsona0925@naver.com <ballsona0925@naver.com>
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
2 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.
🔗 연결된 이슈
📝 작업 요약
디자인 시스템 기반 작업을 완료했습니당. 컬러 토큰, 타이포그래피 토큰을 globals.css에 정의하고, 폰트·모바일 레이아웃·아이콘 공통 컴포넌트 초기 세팅을 진행했습니다.
🔍 주요 변경사항
📸 스크린샷 (선택사항)
📌 PR 중요도
💬 기타 사항
Summary by CodeRabbit
릴리스 노트
새로운 기능
스타일
문서