[Refactor/#63] index.css 폰트 및 디자인 시스템 추가#64
Open
Seojegyeong wants to merge 10 commits intodevelopfrom
Open
Conversation
3 tasks
📝 WalkthroughWalkthrough글로벌 디자인 토큰(타이포그래피·라운딩·쉐도우)과 이를 사용하는 컴포넌트들의 Tailwind 유틸리티 클래스가 토큰화·조정되었습니다. 여러 컴포넌트의 클래스명(폰트 크기·라운딩·쉐도우 등)과 Storybook 문서(타이포그래피, 색상, 그림자, 라운딩)가 추가·갱신되었습니다. (프로그래밍 로직 변화 없음) Changes
Sequence Diagram(s)(생성 조건 미충족 — UI/스타일 변경 및 문서 추가 중심이라 시퀀스 다이어그램 생략) Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested labels
Suggested reviewers
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 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.
🧹 Nitpick comments (2)
src/components/modal/privacyModal/AgreementItem.tsx (1)
16-16:font-heading4와font-bold동시 사용은 토큰 일관성을 약하게 만듭니다.
현재는font-heading4의 weight가font-bold로 덮여서 토큰 의미가 일부 사라집니다. 의도가 없다면font-bold제거를 권장합니다.제안 diff
- className="font-heading4 text-text-main font-bold mb-2 mt-4 first:mt-0" + className="font-heading4 text-text-main mb-2 mt-4 first:mt-0"🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/modal/privacyModal/AgreementItem.tsx` at line 16, AgreementItem의 JSX에서 클래스 문자열 "font-heading4 text-text-main font-bold mb-2 mt-4 first:mt-0"가 font-heading4의 토큰 의미를 font-bold로 덮어버리므로, AgreementItem 컴포넌트의 해당 className에서 불필요한 "font-bold"를 제거하거나(권장) 만약 굵은 스타일가 의도라면 font-heading4 토큰 자체의 weight를 수정해 일관성을 유지하도록 변경하세요.src/stories/Typography.stories.tsx (1)
69-92: 접근성 개선: 시맨틱 HTML 테이블 사용 권장현재
div+ CSS Grid로 테이블 형태의 레이아웃을 구현하고 있는데, 스크린 리더 사용자를 위해 시맨틱 HTML 테이블 요소(<table>,<thead>,<tbody>,<tr>,<th>,<td>)를 사용하는 것이 좋습니다. 이렇게 하면 보조 기술이 데이터 구조를 올바르게 파악할 수 있습니다.♻️ 시맨틱 테이블로 리팩토링 제안
function TypographyDoc() { return ( <div className="p-8 space-y-2 max-w-2xl"> - <div className="grid grid-cols-[120px_1fr_80px_60px_60px] gap-x-4 pb-2 border-b border-gray-200 text-xs text-gray-400 font-medium uppercase tracking-wide"> - <span>Token</span> - <span>Sample</span> - <span>Size</span> - <span>Weight</span> - <span>Leading</span> - </div> - {fontTokens.map(({ className, label, size, weight, lineHeight }) => ( - <div - key={className} - className="grid grid-cols-[120px_1fr_80px_60px_60px] gap-x-4 items-baseline py-3 border-b border-gray-100" - > - <span className="text-xs text-gray-400 font-mono">.{className}</span> - <span className={className}>{label} — 가나다라마바사</span> - <span className="text-xs text-gray-400">{size}</span> - <span className="text-xs text-gray-400">{weight}</span> - <span className="text-xs text-gray-400">{lineHeight}</span> - </div> - ))} + <table className="w-full border-collapse"> + <thead> + <tr className="border-b border-gray-200 text-xs text-gray-400 font-medium uppercase tracking-wide"> + <th className="text-left py-2 w-[120px]">Token</th> + <th className="text-left py-2">Sample</th> + <th className="text-left py-2 w-[80px]">Size</th> + <th className="text-left py-2 w-[60px]">Weight</th> + <th className="text-left py-2 w-[60px]">Leading</th> + </tr> + </thead> + <tbody> + {fontTokens.map(({ className, label, size, weight, lineHeight }) => ( + <tr key={className} className="border-b border-gray-100"> + <td className="text-xs text-gray-400 font-mono py-3">.{className}</td> + <td className={`${className} py-3`}>{label} — 가나다라마바사</td> + <td className="text-xs text-gray-400 py-3">{size}</td> + <td className="text-xs text-gray-400 py-3">{weight}</td> + <td className="text-xs text-gray-400 py-3">{lineHeight}</td> + </tr> + ))} + </tbody> + </table> </div> ); }As per coding guidelines, 접근성: 시맨틱 HTML, ARIA 속성 사용 확인.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/stories/Typography.stories.tsx` around lines 69 - 92, The TypographyDoc component renders a tabular dataset with divs and CSS grid; replace that structure with semantic table markup: wrap the header row in <thead> using <tr> and <th scope="col"> for "Token, Sample, Size, Weight, Leading", then render fontTokens inside <tbody> with one <tr> per token and <td> cells for each value (preserve the existing CSS classes such as the grid-to-table spacing classes and the per-token sample className applied to the sample cell), add appropriate aria-label or caption if needed, and keep key={className} on each row; ensure fontTokens mapping, className variable and TypographyDoc function name remain unchanged.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@src/components/modal/privacyModal/AgreementItem.tsx`:
- Line 16: AgreementItem의 JSX에서 클래스 문자열 "font-heading4 text-text-main font-bold
mb-2 mt-4 first:mt-0"가 font-heading4의 토큰 의미를 font-bold로 덮어버리므로, AgreementItem
컴포넌트의 해당 className에서 불필요한 "font-bold"를 제거하거나(권장) 만약 굵은 스타일가 의도라면 font-heading4
토큰 자체의 weight를 수정해 일관성을 유지하도록 변경하세요.
In `@src/stories/Typography.stories.tsx`:
- Around line 69-92: The TypographyDoc component renders a tabular dataset with
divs and CSS grid; replace that structure with semantic table markup: wrap the
header row in <thead> using <tr> and <th scope="col"> for "Token, Sample, Size,
Weight, Leading", then render fontTokens inside <tbody> with one <tr> per token
and <td> cells for each value (preserve the existing CSS classes such as the
grid-to-table spacing classes and the per-token sample className applied to the
sample cell), add appropriate aria-label or caption if needed, and keep
key={className} on each row; ensure fontTokens mapping, className variable and
TypographyDoc function name remain unchanged.
ℹ️ Review info
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (9)
src/components/common/button/Button.stories.tsxsrc/components/common/button/Button.tsxsrc/components/modal/privacyModal/AgreementItem.tsxsrc/components/workspace/WorkspaceCard.tsxsrc/index.csssrc/pages/auth/Signup.tsxsrc/pages/workspace/Workspace.tsxsrc/pages/workspace/WorkspaceSetting.tsxsrc/stories/Typography.stories.tsx
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/index.css (1)
209-213:⚠️ Potential issue | 🟡 Minor
font-body3토큰이 누락되어 있습니다.다른 컴포넌트(
WorkspaceCard.tsx등)에서font-body3클래스를 사용하고 있지만, 이 파일에 해당 토큰이 정의되어 있지 않습니다.font-body2아래에font-body3정의를 추가하거나, 사용처에서 올바른 토큰으로 수정이 필요합니다.💡 font-body3 추가 예시
.font-body2 { font-size: 14px; font-weight: 500; line-height: 140%; } + .font-body3 { + font-size: 13px; + font-weight: 400; + line-height: 140%; + } + .font-caption {🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/index.css` around lines 209 - 213, Add a missing .font-body3 CSS token in src/index.css so components using the class (e.g., WorkspaceCard.tsx) have a defined style; insert a .font-body3 rule below .font-body2 with the appropriate font-size/weight/line-height (or alternatively update usages of "font-body3" in components to an existing token like "font-body2" if that is the intended fix) and ensure the class name matches exactly where it's referenced.
🧹 Nitpick comments (7)
src/components/common/modal/Modal.tsx (1)
88-100: 상수 객체 외부화 고려 (선택적 개선)
sizeClasses와paddingClasses객체가 정적 값만 포함하고 있어, 컴포넌트 외부로 이동하면 매 렌더링마다 객체 재생성을 방지할 수 있습니다. 현재 성능 영향은 미미하지만, 코드 정리 측면에서 다음 리팩토링 때 고려해 볼 수 있습니다.♻️ 제안 코드
+const SIZE_CLASSES = { + sm: "max-w-modal-sm", + md: "max-w-modal-md", + lg: "max-w-modal-lg", + xl: "max-w-modal-xl", +} as const; + +const PADDING_CLASSES = { + none: "p-modal-none", + sm: "p-modal-sm", + md: "p-modal-md", + lg: "p-modal-lg", +} as const; + function Modal({ // ...props }: IModalProps) { // ... - const sizeClasses = { - sm: "max-w-modal-sm", - md: "max-w-modal-md", - lg: "max-w-modal-lg", - xl: "max-w-modal-xl", - }; - - const paddingClasses = { - none: "p-modal-none", - sm: "p-modal-sm", - md: "p-modal-md", - lg: "p-modal-lg", - }; // className 사용 시: - sizeClasses[size], - paddingClasses[padding], + SIZE_CLASSES[size], + PADDING_CLASSES[padding],🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/common/modal/Modal.tsx` around lines 88 - 100, 현재 Modal 컴포넌트 내부에서 매 렌더링마다 재생성되는 sizeClasses와 paddingClasses 정적 객체를 컴포넌트 외부로 옮겨 재사용하도록 변경하세요: Modal 컴포넌트 파일 최상단에 const SIZE_CLASSES = { ... }와 const PADDING_CLASSES = { ... }로 정의하거나 필요 시 별도 모듈로 추출(export)하고 기존 컴포넌트 내부에서 sizeClasses/paddingClasses 대신 해당 상수를 참조하도록 수정하면 됩니다(참조 대상: Modal 컴포넌트 내 sizeClasses, paddingClasses).src/index.css (1)
197-201:font-heading4의 font-weight가 다른 heading 토큰들보다 낮습니다.
font-heading4의font-weight: 400은font-body1(500)보다 낮습니다. PR 이미지의 Typography 스펙 테이블에서도 heading4가 weight 400으로 표시되어 있어 의도된 것으로 보이지만, 일반적으로 heading이 body보다 굵거나 같은 것이 시각적 위계에 맞습니다.디자인 의도가 맞다면 무시해도 되지만, 워크스페이스 카드 등에서
font-heading4 font-semibold!로 override하는 패턴이 반복된다면 기본 weight를 500으로 조정하는 것이 더 일관성 있을 수 있습니다.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/index.css` around lines 197 - 201, The .font-heading4 rule currently sets font-weight: 400 which is lighter than .font-body1 (500) and causes frequent local overrides; update the .font-heading4 CSS rule to font-weight: 500 to align heading weight with body1 and reduce the need for ad-hoc overrides (unless the design explicitly requires 400, in which case leave as-is and document that exception). Ensure you change the font-weight in the .font-heading4 selector in src/index.css and remove redundant overrides like "font-heading4 font-semibold!" where applicable.src/stories/BorderRadius.stories.tsx (2)
56-65: Storybook 타입을 컴포넌트 기준으로 고정해 주세요.Line 56~65에서
Meta/StoryObj제네릭이 비어 있어 타입 추론 이점이 줄어듭니다.satisfies Meta<typeof BorderRadiusDoc>+StoryObj<typeof meta>조합이 더 안전합니다.타입 고정 제안 diff
-const meta: Meta = { +const meta = { title: "Design Tokens/Border Radius", component: BorderRadiusDoc, parameters: { layout: "fullscreen" }, -}; +} satisfies Meta<typeof BorderRadiusDoc>; export default meta; -type TStory = StoryObj; +type TStory = StoryObj<typeof meta>;As per coding guidelines "4. 타입 안정성: TypeScript 타입의 명확성 확인. any 사용 지양, 제네릭 활용 검토."
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/stories/BorderRadius.stories.tsx` around lines 56 - 65, The Meta/StoryObj generics should be tied to the component to preserve type safety: change the meta declaration to use "satisfies Meta<typeof BorderRadiusDoc>" (so Meta is bound to BorderRadiusDoc) and update the story type to "StoryObj<typeof meta>" (so All: TStory uses the inferred component types); locate and update the "meta" constant, the "type TStory" alias, and the "All" export accordingly (symbols: meta, BorderRadiusDoc, TStory, All, Meta, StoryObj).
33-50: 토큰 목록은 시맨틱 테이블 구조로 바꾸는 게 좋아요.Line 33~50은 표 형태 데이터인데
div/span만 사용해서 스크린리더가 열/행 관계를 정확히 읽기 어렵습니다.<table><thead><tbody>구조로 바꾸면 문서 접근성이 좋아집니다.As per coding guidelines "7. 접근성: 시맨틱 HTML, ARIA 속성 사용 확인."
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/stories/BorderRadius.stories.tsx` around lines 33 - 50, Replace the non-semantic grid of divs/spans with a proper table: convert the header div into a <table> with a <thead> containing <th scope="col">Token</th><th scope="col">Preview</th><th scope="col">Value</th><th scope="col">Usage</th>, and convert the radiusTokens.map(...) output into <tbody> rows (<tr>) where each mapped item uses <td> cells; keep the existing identifiers (radiusTokens, className, value, usage) and preserve the preview box by rendering the colored preview inside the Preview <td> (apply the same `w-20 h-12 bg-brand-400 border border-brand-500 ${className}` classes to a child div), keep the token text styling (text-xs text-gray-400 font-mono) inside the Token <td>, and ensure each <tr> still uses key={className}; add scope attributes on header <th>s for proper screen-reader semantics.src/stories/Colors.stories.tsx (2)
102-111: Colors 스토리도 메타/스토리 타입을 강하게 지정해 주세요.Line 102~111에서
Meta/StoryObj제네릭을 생략하면 타입 안정성이 낮아집니다.권장 타입 패턴 diff
-const meta: Meta = { +const meta = { title: "Design Tokens/Colors", component: ColorDoc, parameters: { layout: "fullscreen" }, -}; +} satisfies Meta<typeof ColorDoc>; export default meta; -type TStory = StoryObj; +type TStory = StoryObj<typeof meta>;As per coding guidelines "4. 타입 안정성: TypeScript 타입의 명확성 확인. any 사용 지양, 제네릭 활용 검토."
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/stories/Colors.stories.tsx` around lines 102 - 111, The meta and story types are currently untyped which reduces type safety; update the declarations to use generics tied to the component (e.g., change Meta to Meta<typeof ColorDoc> for the meta variable and StoryObj to StoryObj<typeof ColorDoc> for TStory) so that meta and All are strongly typed against ColorDoc (refer to symbols: Meta, StoryObj, meta, TStory, All, ColorDoc).
79-84: 체커보드 스타일 객체는 컴포넌트 밖 상수로 분리하면 더 깔끔해요.Line 79~84의 객체가 swatch마다 매 렌더 시 새로 생성됩니다. 공통 상수로 추출하면 가독성과 유지보수성이 좋아집니다.
As per coding guidelines "5. 성능: 불필요한 리렌더링 체크."
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/stories/Colors.stories.tsx` around lines 79 - 84, Extract the inline checkerboard style object used in Colors.stories.tsx (currently created in the style prop at the swatch render) into a top-level constant (e.g., CHECKERBOARD_STYLE) exported/defined outside the component so it is not recreated on every render; replace the inline object in the style prop with that constant and ensure any component references (swatch or the component rendering the style) use CHECKERBOARD_STYLE so readability and re-rendering are improved.src/stories/Shadows.stories.tsx (1)
38-47: Storybook 메타/스토리 타입을 제네릭으로 묶어 주세요.Line 38~47은 타입이 너무 느슨해서 추후 스토리 속성 변경 시 컴파일 타임 검증이 약해집니다.
타입 안정화 diff
-const meta: Meta = { +const meta = { title: "Design Tokens/Shadows", component: ShadowDoc, parameters: { layout: "fullscreen" }, -}; +} satisfies Meta<typeof ShadowDoc>; export default meta; -type TStory = StoryObj; +type TStory = StoryObj<typeof meta>;As per coding guidelines "4. 타입 안정성: TypeScript 타입의 명확성 확인. any 사용 지양, 제네릭 활용 검토."
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/stories/Shadows.stories.tsx` around lines 38 - 47, The Storybook meta and story types are too loose; make the Meta and StoryObj generics tied to the ShadowDoc component so compile-time checks work: change the Meta declaration to use Meta<typeof ShadowDoc> and set TStory = StoryObj<typeof meta> (or directly type All as StoryObj<typeof meta>), ensuring the exported meta const stays typed as Meta<typeof ShadowDoc> and the All story uses the StoryObj generic bound to that meta/component.
🤖 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/components/workspace/WorkspaceCard.tsx`:
- Around line 39-41: In WorkspaceCard.tsx the JSX uses the CSS class
"font-body3" which isn't defined in src/index.css; either replace "font-body3"
with the existing "font-body2" in the <div> rendering w.description or add a
matching "font-body3" rule to src/index.css (e.g., the desired size/weight
consistent with your design tokens) so the description text receives the
intended font size/weight — locate the class usage in WorkspaceCard component
and update it or add the new CSS rule in index.css accordingly.
---
Outside diff comments:
In `@src/index.css`:
- Around line 209-213: Add a missing .font-body3 CSS token in src/index.css so
components using the class (e.g., WorkspaceCard.tsx) have a defined style;
insert a .font-body3 rule below .font-body2 with the appropriate
font-size/weight/line-height (or alternatively update usages of "font-body3" in
components to an existing token like "font-body2" if that is the intended fix)
and ensure the class name matches exactly where it's referenced.
---
Nitpick comments:
In `@src/components/common/modal/Modal.tsx`:
- Around line 88-100: 현재 Modal 컴포넌트 내부에서 매 렌더링마다 재생성되는 sizeClasses와
paddingClasses 정적 객체를 컴포넌트 외부로 옮겨 재사용하도록 변경하세요: Modal 컴포넌트 파일 최상단에 const
SIZE_CLASSES = { ... }와 const PADDING_CLASSES = { ... }로 정의하거나 필요 시 별도 모듈로
추출(export)하고 기존 컴포넌트 내부에서 sizeClasses/paddingClasses 대신 해당 상수를 참조하도록 수정하면 됩니다(참조
대상: Modal 컴포넌트 내 sizeClasses, paddingClasses).
In `@src/index.css`:
- Around line 197-201: The .font-heading4 rule currently sets font-weight: 400
which is lighter than .font-body1 (500) and causes frequent local overrides;
update the .font-heading4 CSS rule to font-weight: 500 to align heading weight
with body1 and reduce the need for ad-hoc overrides (unless the design
explicitly requires 400, in which case leave as-is and document that exception).
Ensure you change the font-weight in the .font-heading4 selector in
src/index.css and remove redundant overrides like "font-heading4 font-semibold!"
where applicable.
In `@src/stories/BorderRadius.stories.tsx`:
- Around line 56-65: The Meta/StoryObj generics should be tied to the component
to preserve type safety: change the meta declaration to use "satisfies
Meta<typeof BorderRadiusDoc>" (so Meta is bound to BorderRadiusDoc) and update
the story type to "StoryObj<typeof meta>" (so All: TStory uses the inferred
component types); locate and update the "meta" constant, the "type TStory"
alias, and the "All" export accordingly (symbols: meta, BorderRadiusDoc, TStory,
All, Meta, StoryObj).
- Around line 33-50: Replace the non-semantic grid of divs/spans with a proper
table: convert the header div into a <table> with a <thead> containing <th
scope="col">Token</th><th scope="col">Preview</th><th scope="col">Value</th><th
scope="col">Usage</th>, and convert the radiusTokens.map(...) output into
<tbody> rows (<tr>) where each mapped item uses <td> cells; keep the existing
identifiers (radiusTokens, className, value, usage) and preserve the preview box
by rendering the colored preview inside the Preview <td> (apply the same `w-20
h-12 bg-brand-400 border border-brand-500 ${className}` classes to a child div),
keep the token text styling (text-xs text-gray-400 font-mono) inside the Token
<td>, and ensure each <tr> still uses key={className}; add scope attributes on
header <th>s for proper screen-reader semantics.
In `@src/stories/Colors.stories.tsx`:
- Around line 102-111: The meta and story types are currently untyped which
reduces type safety; update the declarations to use generics tied to the
component (e.g., change Meta to Meta<typeof ColorDoc> for the meta variable and
StoryObj to StoryObj<typeof ColorDoc> for TStory) so that meta and All are
strongly typed against ColorDoc (refer to symbols: Meta, StoryObj, meta, TStory,
All, ColorDoc).
- Around line 79-84: Extract the inline checkerboard style object used in
Colors.stories.tsx (currently created in the style prop at the swatch render)
into a top-level constant (e.g., CHECKERBOARD_STYLE) exported/defined outside
the component so it is not recreated on every render; replace the inline object
in the style prop with that constant and ensure any component references (swatch
or the component rendering the style) use CHECKERBOARD_STYLE so readability and
re-rendering are improved.
In `@src/stories/Shadows.stories.tsx`:
- Around line 38-47: The Storybook meta and story types are too loose; make the
Meta and StoryObj generics tied to the ShadowDoc component so compile-time
checks work: change the Meta declaration to use Meta<typeof ShadowDoc> and set
TStory = StoryObj<typeof meta> (or directly type All as StoryObj<typeof meta>),
ensuring the exported meta const stays typed as Meta<typeof ShadowDoc> and the
All story uses the StoryObj generic bound to that meta/component.
ℹ️ Review info
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
src/assets/icon/workspace/building.svgis excluded by!**/*.svgand included bysrc/**
📒 Files selected for processing (25)
src/components/Sidebar/Sidebar.tsxsrc/components/auth/common/InputActions.tsxsrc/components/auth/flows/find-email/EnterPhoneStep.tsxsrc/components/auth/flows/find-email/ShowEmailResultStep.tsxsrc/components/auth/flows/reset-password/EmailVerificationStep.tsxsrc/components/auth/flows/signup/EnterEmailStep.tsxsrc/components/auth/intro/IntroAIAnalytics.tsxsrc/components/auth/intro/IntroAdManagement.tsxsrc/components/auth/skeleton/AuthFormSkeleton.tsxsrc/components/auth/skeleton/LoginPageSkeleton.tsxsrc/components/auth/skeleton/SignupEmailStepSkeleton.tsxsrc/components/auth/skeleton/SignupPageSkeleton.tsxsrc/components/common/alert/Alert.tsxsrc/components/common/dropdownmenu/DropdownMenu.tsxsrc/components/common/modal/Modal.tsxsrc/components/modal/privacyModal/AgreementItem.tsxsrc/components/workspace/WorkspaceCard.tsxsrc/index.csssrc/pages/auth/Login.tsxsrc/pages/auth/Signup.tsxsrc/pages/workspace/Workspace.tsxsrc/pages/workspace/WorkspaceSetting.tsxsrc/stories/BorderRadius.stories.tsxsrc/stories/Colors.stories.tsxsrc/stories/Shadows.stories.tsx
✅ Files skipped from review due to trivial changes (5)
- src/components/auth/flows/reset-password/EmailVerificationStep.tsx
- src/components/auth/skeleton/SignupEmailStepSkeleton.tsx
- src/components/modal/privacyModal/AgreementItem.tsx
- src/components/auth/intro/IntroAIAnalytics.tsx
- src/components/auth/flows/find-email/ShowEmailResultStep.tsx
🚧 Files skipped from review as they are similar to previous changes (3)
- src/pages/workspace/Workspace.tsx
- src/pages/workspace/WorkspaceSetting.tsx
- src/pages/auth/Signup.tsx
Collaborator
Author
|
P4: 저희 현재 컴포넌트 변경사항을 확인하려면 로컬에서 직접 실행해야 하는게 불편한 것 같습니다ㅠㅠ Storybook만 별도 배포하면 어떨까요?? 로컬 환경 없이도 브라우저에서 바로 확인할 수 있고, PR마다 프리뷰 URL이 자동으로 붙어 리뷰 효율도 높아질 것 같습니다! |
rounded-xl/2xl → rounded-component-md/lg drop-shadow-md → shadow-Soft hover:bg-[#F6F6F6] → hover:bg-bg-surface border-[#F6F6F6] → border-bg-surface max-w-[232px] → max-w-58 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
There was a problem hiding this comment.
🧹 Nitpick comments (1)
src/components/Sidebar/Sidebar.tsx (1)
1-1: 주석 처리된 코드 정리를 고려해 주세요.현재 사용되지 않는 코드가 주석으로 남아 있습니다:
- Line 1:
NavLinkimport- Line 13:
Logoimport- Lines 54-71: 로고 영역 전체
향후 로고 기능을 다시 사용할 계획이라면 별도 이슈로 추적하고, 사용 계획이 없다면 코드를 제거하는 것이 유지보수에 좋습니다. 주석 처리된 코드가 많으면 가독성이 떨어지고 코드 히스토리 파악이 어려워질 수 있습니다.
🧹 주석 코드 제거 제안
-// import { NavLink } from "react-router-dom"; import { twMerge } from "tailwind-merge"; import { footerNav, mainNav } from "@/constants/sidebarNav"; import { useSidebar } from "@/hooks/sidebar/useSidebar"; import { SidebarItem } from "./SidebarItem"; import { SubMenu } from "./SubMenu"; import ChevronIcon from "@/assets/icon/common/chevron-up.svg?react"; import CollapseIcon from "@/assets/icon/sidebar/chevron-left.svg?react"; -// import Logo from "@/assets/logo/symbol-color.svg?react";로고 섹션(Lines 54-71)도 함께 제거하거나, 필요시 별도 브랜치/이슈로 관리하는 것을 권장합니다.
Also applies to: 13-13, 54-71
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/Sidebar/Sidebar.tsx` at line 1, 주의: Sidebar 컴포넌트에 남아 있는 사용하지 않는 주석 코드를 정리하세요—구체적으로 주석 처리된 import 문들(NavLink 및 Logo)과 주석 처리된 로고 JSX 블록(로고 영역 전체)을 제거하거나, 향후 사용 예정이라면 별도 이슈/브랜치로 추적하도록 표시하세요; 파일 내 Sidebar 컴포넌트에서 주석화된 NavLink import, Logo import 및 로고 섹션을 찾아 삭제하거나 이슈 링크로 대체해 코드베이스 가독성과 유지보수성을 회복하세요.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@src/components/Sidebar/Sidebar.tsx`:
- Line 1: 주의: Sidebar 컴포넌트에 남아 있는 사용하지 않는 주석 코드를 정리하세요—구체적으로 주석 처리된 import
문들(NavLink 및 Logo)과 주석 처리된 로고 JSX 블록(로고 영역 전체)을 제거하거나, 향후 사용 예정이라면 별도 이슈/브랜치로
추적하도록 표시하세요; 파일 내 Sidebar 컴포넌트에서 주석화된 NavLink import, Logo import 및 로고 섹션을 찾아
삭제하거나 이슈 링크로 대체해 코드베이스 가독성과 유지보수성을 회복하세요.
ℹ️ Review info
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
src/components/Sidebar/Sidebar.tsxsrc/components/Sidebar/SubMenu.tsxsrc/components/workspace/WorkspaceCard.tsx
🚧 Files skipped from review as they are similar to previous changes (1)
- src/components/workspace/WorkspaceCard.tsx
jjjsun
reviewed
Feb 26, 2026
| <div className="min-w-0"> | ||
| <div className="font-heading3 text-text-main truncate">{w.name}</div> | ||
| <div className="font-body1 text-text-main mt-1 truncate"> | ||
| <div className="font-heading4 font-semibold! text-text-main truncate"> |
Collaborator
There was a problem hiding this comment.
P3: WorkspaceCard 구현할때, font-heading3을 text크기를 추후에 키운다는걸 전제로 두고, font-heading3로 구현했었습니다! font-heading3으로 유지해도 좋을것같아요!
| > | ||
| <div className="px-2"> | ||
| <h2 className="font-heading3 text-text-main mb-2"> | ||
| <h2 className="font-heading4 text-text-main mb-2"> |
Collaborator
There was a problem hiding this comment.
P3: 이부분도 heading3으로 유지하면 좋을것같습니다!
| <div className="bg-white border border-gray-100 rounded-component-lg p-8 shadow-sm"> | ||
| <h2 className="font-heading3 text-text-main">기본 정보</h2> | ||
| <div className="bg-white border border-gray-100 rounded-component-lg p-8 shadow-Soft"> | ||
| <h2 className="font-heading4 text-text-main">기본 정보</h2> |
Collaborator
There was a problem hiding this comment.
P3: 이부분도 heading3으로 유지하면 좋을것같습니다!
| <WarningIcon /> | ||
| <div> | ||
| <div className="text-status-red font-heading3"> | ||
| <div className="text-status-red font-heading4"> |
Collaborator
There was a problem hiding this comment.
P3: 이부분도 heading3으로 유지하면 좋을것같습니다!
Collaborator
|
P4: 앞으로 다른 스토리북도 계속 추가되고, 기존스토리북 수정되는걸 생각하면, 배포하는 방법도 좋을것같아요! |
Collaborator
|
P4: 그것도 좋습니다! 수고하셨습니다 :) |
YermIm
approved these changes
Feb 26, 2026
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
3 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.
🚨 관련 이슈
#63
✨ 변경사항
✏️ 작업 내용
1. 폰트 위계 재정의
2. 기존 사용처 정리
3. 디자인 시스템 스토리북 추가
4. 기타
😅 미완성 작업
N/A
📢 논의 사항 및 참고 사항
이번 PR에서 전반적인 색상 및 폰트를 디자인 시스템에 맞게 통일 작업을 진행했습니다!!
이에 따라 각자 구현하신 컴포넌트에 영향이 있을 수 있으니, 아래 두 가지 사항을 꼭 확인해 주세요.
Summary by CodeRabbit
스타일
문서화