Conversation
Walkthrough회원가입 완료, 동의, 로그인 화면의 UI 스타일을 피그마 기준으로 정리했습니다. 헤더에 'none' 타입을 추가하여 Possibly related PRs
🚥 Pre-merge checks | ✅ 4✅ 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.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/pages/Auth/SignUp/components/AgreementArrow.tsx (1)
17-24:⚠️ Potential issue | 🟡 Minorchecked 상태뿐 아니라 focus-visible 상태도 같이 보여 주세요.
지금은
sr-only체크박스라 키보드 탭 이동 시 어느 항목에 포커스가 있는지 눈으로 확인하기 어렵습니다. 이 위치에peer-focus-visible:*스타일을 같이 주는 편이 안전합니다.As per coding guidelines "동적 className 조합, 접근성(aria-*, role, 키보드 탐색), Props 타입 일관성을 우선 확인하는지".
Also applies to: 45-48
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/pages/Auth/SignUp/components/AgreementArrow.tsx` around lines 17 - 24, The checkbox is visually hidden (class "peer sr-only") so keyboard focus isn't visible; update the sibling elements (CheckIcon and the label span) to include peer-focus-visible styles in addition to peer-checked (e.g., add classes like "peer-focus-visible:text-primary-600" and a visible focus ring such as "peer-focus-visible:ring-2 peer-focus-visible:ring-primary-600" to the same className strings used on CheckIcon and the span) so focus-visible state is shown when the hidden input receives keyboard focus; apply the same change to the second occurrence (the block around the 45-48 range) and keep the input's class as "peer sr-only" and the onChange/checked props unchanged.
🧹 Nitpick comments (2)
src/components/layout/Header/components/ProfileHeader.tsx (1)
5-5:bg-white대신 컬러 토큰으로 맞춰 주세요.같은 흰색이면
bg-indigo-0를 쓰는 편이 테마 일관성과 검색성이 좋습니다.As per coding guidelines "Prioritize color tokens from
src/styles/theme.css(indigo-, blue-, background, primary, etc.)".🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/layout/Header/components/ProfileHeader.tsx` at line 5, In ProfileHeader.tsx update the header element's background class to use the project's color token instead of a literal white: replace the "bg-white" token on the top-level <header> in the ProfileHeader component with "bg-indigo-0" (or the appropriate theme token name) so the component uses theme colors from src/styles/theme.css and keeps classnames consistent for searchability and theming.src/pages/Auth/SignUp/components/StepLayout.tsx (1)
29-29: 버튼 타이포도 토큰으로 고정해 주세요.지금은 텍스트 크기가 기본값에 기대고 있어서 스텝별 CTA 일관성이 조금 약합니다.
text-sub*같은 토큰을 같이 주면 FinishStep과도 더 자연스럽게 맞습니다.As per coding guidelines "Use typography tokens (
text-h1throughtext-h5,text-sub1throughtext-sub4,text-body1throughtext-body3,text-cap1throughtext-cap2) fromsrc/styles/theme.css".🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/pages/Auth/SignUp/components/StepLayout.tsx` at line 29, The CTA button in the StepLayout component uses the default font size instead of a typography token; update the className on the button inside StepLayout (the element with className starting "bg-primary-500 ...") to include the appropriate typography token (e.g., "text-sub2" or the token matching FinishStep) from src/styles/theme.css so step CTAs use a consistent text token; ensure you add only the token name (e.g., text-sub2) alongside the existing classes and verify it matches the FinishStep typography token for consistency.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Outside diff comments:
In `@src/pages/Auth/SignUp/components/AgreementArrow.tsx`:
- Around line 17-24: The checkbox is visually hidden (class "peer sr-only") so
keyboard focus isn't visible; update the sibling elements (CheckIcon and the
label span) to include peer-focus-visible styles in addition to peer-checked
(e.g., add classes like "peer-focus-visible:text-primary-600" and a visible
focus ring such as "peer-focus-visible:ring-2
peer-focus-visible:ring-primary-600" to the same className strings used on
CheckIcon and the span) so focus-visible state is shown when the hidden input
receives keyboard focus; apply the same change to the second occurrence (the
block around the 45-48 range) and keep the input's class as "peer sr-only" and
the onChange/checked props unchanged.
---
Nitpick comments:
In `@src/components/layout/Header/components/ProfileHeader.tsx`:
- Line 5: In ProfileHeader.tsx update the header element's background class to
use the project's color token instead of a literal white: replace the "bg-white"
token on the top-level <header> in the ProfileHeader component with
"bg-indigo-0" (or the appropriate theme token name) so the component uses theme
colors from src/styles/theme.css and keeps classnames consistent for
searchability and theming.
In `@src/pages/Auth/SignUp/components/StepLayout.tsx`:
- Line 29: The CTA button in the StepLayout component uses the default font size
instead of a typography token; update the className on the button inside
StepLayout (the element with className starting "bg-primary-500 ...") to include
the appropriate typography token (e.g., "text-sub2" or the token matching
FinishStep) from src/styles/theme.css so step CTAs use a consistent text token;
ensure you add only the token name (e.g., text-sub2) alongside the existing
classes and verify it matches the FinishStep typography token for consistency.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 2cf960a9-6def-482c-a0d7-525b1247add5
📒 Files selected for processing (8)
src/components/layout/Header/components/ProfileHeader.tsxsrc/components/layout/Header/headerConfig.tssrc/pages/Auth/SignUp/FinishStep.tsxsrc/pages/Auth/SignUp/TermStep.tsxsrc/pages/Auth/SignUp/components/AgreementArrow.tsxsrc/pages/Auth/SignUp/components/StepLayout.tsxsrc/pages/Schedule/components/CalendarWeekRow.tsxsrc/pages/User/MyPage/index.tsx
There was a problem hiding this comment.
🧹 Nitpick comments (1)
src/pages/Auth/Login/index.tsx (1)
49-63: 타이포는 토큰으로 맞춰주세요.Line 53과 Line 59의 임의 크기/line-height는 공통 타이포 스케일을 우회합니다.
text-h*/text-sub*같은 토큰을 우선 쓰고, 필요한 값만 최소한으로 덮는 쪽이 유지보수에 안전합니다. As per coding guidelines, "Use typography tokens (text-h1throughtext-h5,text-sub1throughtext-sub4,text-body1throughtext-body3,text-cap1throughtext-cap2) fromsrc/styles/theme.css".🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/pages/Auth/Login/index.tsx` around lines 49 - 63, Replace the hard-coded typography sizes on the hero lines and brand label with the project typography tokens: for the mapped LOGIN_HERO_LINES <p key={line}> replace the className "text-[32px] leading-10 font-extrabold" with the appropriate heading token (e.g., text-h2/text-h3) plus font-extrabold, and for the Konect brand <p> replace "w-[239px] text-[48px] leading-10 tracking-[-0.04em]" with the appropriate large heading token (e.g., text-h1) plus any minimal overrides (tracking or width) only if absolutely necessary; keep the custom fontFamily style if required. Ensure you use text-h*/text-sub*/text-body* tokens from src/styles/theme.css instead of pixel values and only add the smallest possible inline overrides.
🤖 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/pages/Auth/Login/index.tsx`:
- Around line 49-63: Replace the hard-coded typography sizes on the hero lines
and brand label with the project typography tokens: for the mapped
LOGIN_HERO_LINES <p key={line}> replace the className "text-[32px] leading-10
font-extrabold" with the appropriate heading token (e.g., text-h2/text-h3) plus
font-extrabold, and for the Konect brand <p> replace "w-[239px] text-[48px]
leading-10 tracking-[-0.04em]" with the appropriate large heading token (e.g.,
text-h1) plus any minimal overrides (tracking or width) only if absolutely
necessary; keep the custom fontFamily style if required. Ensure you use
text-h*/text-sub*/text-body* tokens from src/styles/theme.css instead of pixel
values and only add the smallest possible inline overrides.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 139097e9-a976-4af8-a49a-3eb882c40b10
⛔ Files ignored due to path filters (1)
src/assets/fonts/TiltNeon-Regular.woff2is excluded by!**/*.woff2,!src/assets/**and included by**
📒 Files selected for processing (6)
src/components/layout/Header/components/DefaultHeader.tsxsrc/components/layout/Header/headerConfig.tssrc/components/layout/Header/index.tsxsrc/components/layout/Header/types.tssrc/pages/Auth/Login/index.tsxsrc/styles/font.css
There was a problem hiding this comment.
🧹 Nitpick comments (3)
src/pages/Auth/Login/index.tsx (3)
53-53: Typography 토큰 사용 검토
text-[32px] leading-10 font-extrabold대신text-h1등 정의된 typography 토큰과 일치하는지 확인해보세요. 피그마 스펙이 기존 토큰과 다르다면 현재 방식 유지해도 됩니다.As per coding guidelines, "Use semantic typography utilities (
text-h1,text-body1, etc.) before custom styles".🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/pages/Auth/Login/index.tsx` at line 53, Replace the hard-coded typography utilities on the paragraph element in the Login component (the <p> with key={line} and className="text-[32px] leading-10 font-extrabold") with the project's semantic typography token (e.g., text-h1 or text-body1) so it uses the defined design system; if the Figma spec truly differs from existing tokens, leave the explicit styles but add a comment explaining the discrepancy and consider adding a new token (e.g., text-h1-variant) to the typography scale for future reuse.
74-77: provider 타입 명시 권장
SOCIAL_LOGIN_LIST의provider가 string literal로 추론되지만,getOAuthAuthorizationUrl에서OAuthProvider타입을 기대합니다. 타입 안전성을 위해 명시적 타입 지정을 고려해보세요.💡 타입 명시 예시
+import type { OAuthProvider } from '@/apis/auth/entity'; + +interface SocialLoginItem { + provider: OAuthProvider; + label: string; + icon: React.FC<React.SVGAttributes<SVGElement>>; + buttonClassName: string; + iconClassName: string; +} + -const SOCIAL_LOGIN_LIST = [ +const SOCIAL_LOGIN_LIST: SocialLoginItem[] = [ { provider: 'GOOGLE',🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/pages/Auth/Login/index.tsx` around lines 74 - 77, The mapped `provider` from SOCIAL_LOGIN_LIST is inferred as string but getOAuthAuthorizationUrl expects an OAuthProvider; update types so provider is explicitly typed as OAuthProvider (either by typing SOCIAL_LOGIN_LIST items or asserting/casting provider to OAuthProvider when calling getOAuthAuthorizationUrl) and ensure getRedirectUri usage remains the same; reference SOCIAL_LOGIN_LIST, provider, getOAuthAuthorizationUrl, OAuthProvider, and getRedirectUri when making the change.
58-63: inline style 대신 Tailwind 설정 고려
fontFamily를 inline style로 지정하고 있습니다.tailwind.config에fontFamily를 추가하면font-tilt-neon같은 유틸리티 클래스로 사용할 수 있습니다.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/pages/Auth/Login/index.tsx` around lines 58 - 63, The <p> element in the Login component is using an inline style for fontFamily; remove the inline style and add a Tailwind utility instead by extending theme.extend.fontFamily in tailwind.config.js with a key like tiltNeon: ["'Tilt Neon'", "var(--font-suit)"], then replace style={{ fontFamily: "'Tilt Neon', var(--font-suit)" }} with the className font-tilt-neon (e.g., className="w-[239px] text-[48px] leading-10 tracking-[-0.04em] font-tilt-neon") in the JSX so the component (Login / the <p> element) uses the new utility; restart the dev server if needed to pick up the config change.
🤖 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/pages/Auth/Login/index.tsx`:
- Line 53: Replace the hard-coded typography utilities on the paragraph element
in the Login component (the <p> with key={line} and className="text-[32px]
leading-10 font-extrabold") with the project's semantic typography token (e.g.,
text-h1 or text-body1) so it uses the defined design system; if the Figma spec
truly differs from existing tokens, leave the explicit styles but add a comment
explaining the discrepancy and consider adding a new token (e.g.,
text-h1-variant) to the typography scale for future reuse.
- Around line 74-77: The mapped `provider` from SOCIAL_LOGIN_LIST is inferred as
string but getOAuthAuthorizationUrl expects an OAuthProvider; update types so
provider is explicitly typed as OAuthProvider (either by typing
SOCIAL_LOGIN_LIST items or asserting/casting provider to OAuthProvider when
calling getOAuthAuthorizationUrl) and ensure getRedirectUri usage remains the
same; reference SOCIAL_LOGIN_LIST, provider, getOAuthAuthorizationUrl,
OAuthProvider, and getRedirectUri when making the change.
- Around line 58-63: The <p> element in the Login component is using an inline
style for fontFamily; remove the inline style and add a Tailwind utility instead
by extending theme.extend.fontFamily in tailwind.config.js with a key like
tiltNeon: ["'Tilt Neon'", "var(--font-suit)"], then replace style={{ fontFamily:
"'Tilt Neon', var(--font-suit)" }} with the className font-tilt-neon (e.g.,
className="w-[239px] text-[48px] leading-10 tracking-[-0.04em] font-tilt-neon")
in the JSX so the component (Login / the <p> element) uses the new utility;
restart the dev server if needed to pick up the config change.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 1d015b87-efaf-4c11-969f-2e771538be4a
📒 Files selected for processing (5)
src/components/layout/Header/headerConfig.tssrc/components/layout/Header/index.tsxsrc/components/layout/Header/types.tssrc/components/layout/index.tsxsrc/pages/Auth/Login/index.tsx
🚧 Files skipped from review as they are similar to previous changes (2)
- src/components/layout/Header/headerConfig.ts
- src/components/layout/Header/index.tsx
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
1 participant
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.
✨ 요약
😎 해결한 이슈
Summary by CodeRabbit
릴리스 노트
New Features
Style