Conversation
Closed
Contributor
Walkthrough의존성 업데이트 및 스타일링 전환 작업입니다. 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}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (9)
src/pages/Manager/components/TimePicker/index.tsx (1)
155-155: CSS와 JS 상수 간 동기화 고려
h-50(200px)과PICKER_HEIGHT = 200상수가 동일한 값을 나타내고 있어 현재는 문제없습니다. 다만, root font-size가 변경되면h-50의 실제 픽셀값이 달라져 스크롤 계산에 불일치가 발생할 수 있습니다.CSS 변수나 상수를 공유하는 방식으로 개선하면 유지보수성이 향상됩니다.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/pages/Manager/components/TimePicker/index.tsx` at line 155, The div uses a hardcoded utility class "h-50" while the JS relies on PICKER_HEIGHT = 200, risking mismatch if root font-size changes; update the component to drive the visual height from a single source of truth: either set a CSS variable (e.g. --picker-height) and reference it in the div’s style/class and in any JS scroll math, or replace the "h-50" utility with an inline pixel height derived from PICKER_HEIGHT so both the DOM and the JS (PICKER_HEIGHT) use the same value; adjust references in the TimePicker component where PICKER_HEIGHT is used to consume that CSS variable or the same computed pixel value.src/pages/Club/ClubDetail/index.tsx (1)
63-63: 타이포그래피 토큰으로 통일해주세요.Line 63의
text-[20px]는 페이지 컴포넌트 규칙과 다르게 하드코딩 크기를 사용하고 있어요.text-h*/text-sub*/text-body*토큰으로 맞추는 걸 권장합니다.Based on learnings: Applies to
src/{pages,components,layouts}/**/*.tsx: Use semantic typography utilities (text-h1,text-body1, etc.) before custom CSS.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/pages/Club/ClubDetail/index.tsx` at line 63, The hardcoded tailwind class text-[20px] on the div rendering clubDetail.name should be replaced with a semantic typography token; locate the div in the ClubDetail component that contains {clubDetail.name} and swap text-[20px] for the appropriate design-system token (e.g., text-h4 or text-body1) so it conforms to the project's typography utilities (text-h*/text-sub*/text-body*), then run a quick visual check to ensure sizing/line-height match expected design.src/components/common/Dropdown.tsx (1)
48-48: 하드코딩 색상 대신 테마 토큰 사용을 권장합니다.Line 48의
bg-[#69BFDF]는 디자인 토큰 우선 규칙과 어긋납니다.primary-*또는theme.css토큰으로 치환해주세요.As per coding guidelines: Prioritize color tokens from
src/styles/theme.cssover hardcoded colors.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/common/Dropdown.tsx` at line 48, The Dropdown component contains a hardcoded background color 'bg-[`#69BFDF`]' inside the className string (see Dropdown.tsx), which violates the design token rule; replace that hardcoded color with the appropriate theme token from src/styles/theme.css (e.g., use the project's primary color token such as primary-* or the CSS variable defined in theme.css) by updating the class string in the Dropdown component to use the token (or corresponding utility class/var) instead of 'bg-[`#69BFDF`]'.src/pages/Home/components/InfiniteClubCarousel.tsx (1)
75-75: 인디케이터 색상은 토큰으로 통일해주세요.Line 75의
bg-[#d9d9d9]는 하드코딩 색상입니다. 테마 토큰(text-*/background/primary-*등)으로 치환을 권장합니다.As per coding guidelines: Prioritize color tokens from
src/styles/theme.cssover hardcoded colors.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/pages/Home/components/InfiniteClubCarousel.tsx` at line 75, The indicator bar in InfiniteClubCarousel uses a hardcoded color class `bg-[`#d9d9d9`]`; replace that with the appropriate theme color token (e.g., a background or primary token from src/styles/theme.css) so it uses the design tokens instead of a hex value; update the div that contains `bg-[`#d9d9d9`]` in the InfiniteClubCarousel component to the corresponding token-based class (and add/import the token if missing) to conform to the project's color token guidelines.src/pages/Schedule/components/CalendarWeekRow.tsx (1)
129-129: 텍스트 색상 하드코딩을 토큰으로 바꿔주세요.Line 129의
text-[#25374C]는text-indigo-500같은 테마 토큰 클래스로 치환하는 게 유지보수에 더 좋습니다.변경 예시
- className="h-3.25 truncate rounded-full px-1 text-center text-[10px] leading-3.25 font-medium text-[`#25374C`]" + className="h-3.25 truncate rounded-full px-1 text-center text-[10px] leading-3.25 font-medium text-indigo-500"As per coding guidelines
src/{pages,components}/**/*.tsx: Reference design tokens fromsrc/styles/theme.cssTailwind@themeconfiguration.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/pages/Schedule/components/CalendarWeekRow.tsx` at line 129, Replace the hardcoded CSS color class text-[`#25374C`] in the className on the element in CalendarWeekRow (the truncated rounded-full px-1 text-center text-[10px] leading-3.25 font-medium element) with the appropriate Tailwind theme token (e.g., text-<token> like text-indigo-500 or whatever token is defined in src/styles/theme.css/@theme) so the component references the design token instead of a hex literal; update the className string accordingly to use the theme token and ensure it follows the src/{pages,components}/**/*.tsx coding guideline.src/pages/Manager/ManagedRecruitmentForm/index.tsx (1)
182-182: 버튼 텍스트 색상은 토큰으로 맞춰주세요.Line 182의
text-[#5a6b7f]는text-text-500토큰으로 치환하는 편이 일관성에 맞습니다.As per coding guidelines
src/**/*.{ts,tsx}: Prioritize color tokens fromsrc/styles/theme.css(e.g.,indigo-*,blue-*,background,primary) over hardcoded colors.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/pages/Manager/ManagedRecruitmentForm/index.tsx` at line 182, In ManagedRecruitmentForm replace the hardcoded color token inside the className on the button (the occurrence of text-[`#5a6b7f`] in the className string) with the theme token text-text-500 so the button text uses the centralized color token; update the className in that JSX element to remove the hex and use text-text-500 to conform to the src/**/*.{ts,tsx} color-token guideline.src/pages/Manager/components/DatePicker/index.tsx (1)
43-43: 트리거 버튼 색상도 토큰화 권장합니다.Line 43의
border-[#e1e1e1],bg-[#fafafa]는 가능하면 테마 토큰 클래스로 맞춰 주세요.As per coding guidelines
src/**/*.{ts,tsx}: Prioritize color tokens fromsrc/styles/theme.css(e.g.,indigo-*,blue-*,background,primary) over hardcoded colors.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/pages/Manager/components/DatePicker/index.tsx` at line 43, The trigger button in the DatePicker component uses hardcoded colors in the class string ('border-[`#e1e1e1`]', 'bg-[`#fafafa`]'); replace these with theme token classes from src/styles/theme.css (e.g., use the appropriate token like 'border-<token>' and 'bg-<token>' such as 'border-background'/'bg-background' or 'border-gray-200'/'bg-gray-50' depending on design) so the class array in the DatePicker (index.tsx) no longer contains hex literals and instead references the project's color tokens.src/components/common/ErrorPageLayout.tsx (2)
20-21: 타이포그래피 토큰으로 치환하는 게 좋겠습니다.
text-[24px],text-[16px]대신text-h*/text-body*토큰을 우선 사용해 주세요.As per coding guidelines
src/{pages,components,layouts}/**/*.tsx : Use semantic typography utilities (text-h1, text-body1, etc.) before custom CSS.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/common/ErrorPageLayout.tsx` around lines 20 - 21, ErrorPageLayout uses raw utility classes text-[24px] and text-[16px] for the title and message; replace those with the semantic typography tokens mandated by our guidelines (e.g., text-h1/text-h2 for the title and text-body1/text-body2 for the message) so the h1 rendering of {title} and the p rendering of {message} use the project's semantic typography classes; update the className on the h1 and p in the ErrorPageLayout component accordingly and remove the custom pixel-based utilities.
27-27: 하드코딩 색상 대신 테마 토큰 사용을 권장합니다.
bg-[#69BFDF]는 테마 토큰(bg-primary,bg-blue-*등)으로 치환하는 편이 유지보수에 유리합니다.As per coding guidelines
src/**/*.{ts,tsx} : Prioritize color tokens from src/styles/theme.css (e.g., indigo-*, blue-*, background, primary) over hardcoded colors.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/common/ErrorPageLayout.tsx` at line 27, Replace the hardcoded hex background in the className on the ErrorPageLayout component (the string containing bg-[`#69BFDF`]) with the appropriate theme token from src/styles/theme.css (for example bg-primary or the matching bg-blue-* token); update the className value in the JSX where ErrorPageLayout sets className="... bg-[`#69BFDF`] ..." to use the chosen token and ensure the visual match with the design system.
🤖 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/pages/Manager/ManagedApplicationList/index.tsx`:
- Around line 64-66: The CheckIcon size (class "size-6.5") is larger than its
button container ("flex h-6 w-6 ..."), causing a 2px overflow; fix by making the
icon and container consistent—either change CheckIcon to use "size-6" (or remove
size-6.5) to match the container, or update the container classes to "h-6.5
w-6.5" so they match the icon; locate the JSX where CheckIcon is rendered inside
the element with className "flex h-6 w-6 items-center justify-center
text-[`#69BFDF`] disabled:opacity-50" and apply one of these two adjustments.
---
Nitpick comments:
In `@src/components/common/Dropdown.tsx`:
- Line 48: The Dropdown component contains a hardcoded background color
'bg-[`#69BFDF`]' inside the className string (see Dropdown.tsx), which violates
the design token rule; replace that hardcoded color with the appropriate theme
token from src/styles/theme.css (e.g., use the project's primary color token
such as primary-* or the CSS variable defined in theme.css) by updating the
class string in the Dropdown component to use the token (or corresponding
utility class/var) instead of 'bg-[`#69BFDF`]'.
In `@src/components/common/ErrorPageLayout.tsx`:
- Around line 20-21: ErrorPageLayout uses raw utility classes text-[24px] and
text-[16px] for the title and message; replace those with the semantic
typography tokens mandated by our guidelines (e.g., text-h1/text-h2 for the
title and text-body1/text-body2 for the message) so the h1 rendering of {title}
and the p rendering of {message} use the project's semantic typography classes;
update the className on the h1 and p in the ErrorPageLayout component
accordingly and remove the custom pixel-based utilities.
- Line 27: Replace the hardcoded hex background in the className on the
ErrorPageLayout component (the string containing bg-[`#69BFDF`]) with the
appropriate theme token from src/styles/theme.css (for example bg-primary or the
matching bg-blue-* token); update the className value in the JSX where
ErrorPageLayout sets className="... bg-[`#69BFDF`] ..." to use the chosen token
and ensure the visual match with the design system.
In `@src/pages/Club/ClubDetail/index.tsx`:
- Line 63: The hardcoded tailwind class text-[20px] on the div rendering
clubDetail.name should be replaced with a semantic typography token; locate the
div in the ClubDetail component that contains {clubDetail.name} and swap
text-[20px] for the appropriate design-system token (e.g., text-h4 or
text-body1) so it conforms to the project's typography utilities
(text-h*/text-sub*/text-body*), then run a quick visual check to ensure
sizing/line-height match expected design.
In `@src/pages/Home/components/InfiniteClubCarousel.tsx`:
- Line 75: The indicator bar in InfiniteClubCarousel uses a hardcoded color
class `bg-[`#d9d9d9`]`; replace that with the appropriate theme color token (e.g.,
a background or primary token from src/styles/theme.css) so it uses the design
tokens instead of a hex value; update the div that contains `bg-[`#d9d9d9`]` in
the InfiniteClubCarousel component to the corresponding token-based class (and
add/import the token if missing) to conform to the project's color token
guidelines.
In `@src/pages/Manager/components/DatePicker/index.tsx`:
- Line 43: The trigger button in the DatePicker component uses hardcoded colors
in the class string ('border-[`#e1e1e1`]', 'bg-[`#fafafa`]'); replace these with
theme token classes from src/styles/theme.css (e.g., use the appropriate token
like 'border-<token>' and 'bg-<token>' such as
'border-background'/'bg-background' or 'border-gray-200'/'bg-gray-50' depending
on design) so the class array in the DatePicker (index.tsx) no longer contains
hex literals and instead references the project's color tokens.
In `@src/pages/Manager/components/TimePicker/index.tsx`:
- Line 155: The div uses a hardcoded utility class "h-50" while the JS relies on
PICKER_HEIGHT = 200, risking mismatch if root font-size changes; update the
component to drive the visual height from a single source of truth: either set a
CSS variable (e.g. --picker-height) and reference it in the div’s style/class
and in any JS scroll math, or replace the "h-50" utility with an inline pixel
height derived from PICKER_HEIGHT so both the DOM and the JS (PICKER_HEIGHT) use
the same value; adjust references in the TimePicker component where
PICKER_HEIGHT is used to consume that CSS variable or the same computed pixel
value.
In `@src/pages/Manager/ManagedRecruitmentForm/index.tsx`:
- Line 182: In ManagedRecruitmentForm replace the hardcoded color token inside
the className on the button (the occurrence of text-[`#5a6b7f`] in the className
string) with the theme token text-text-500 so the button text uses the
centralized color token; update the className in that JSX element to remove the
hex and use text-text-500 to conform to the src/**/*.{ts,tsx} color-token
guideline.
In `@src/pages/Schedule/components/CalendarWeekRow.tsx`:
- Line 129: Replace the hardcoded CSS color class text-[`#25374C`] in the
className on the element in CalendarWeekRow (the truncated rounded-full px-1
text-center text-[10px] leading-3.25 font-medium element) with the appropriate
Tailwind theme token (e.g., text-<token> like text-indigo-500 or whatever token
is defined in src/styles/theme.css/@theme) so the component references the
design token instead of a hex literal; update the className string accordingly
to use the theme token and ensure it follows the src/{pages,components}/**/*.tsx
coding guideline.
🪄 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: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 808b8b17-3995-43a8-a12f-ff7e46da13d9
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml,!pnpm-lock.yamland included by**
📒 Files selected for processing (37)
.github/PULL_REQUEST_TEMPLATE.mdpackage.jsonsrc/components/common/Dropdown.tsxsrc/components/common/ErrorPageLayout.tsxsrc/components/common/ToggleSwitch.tsxsrc/pages/Club/ClubDetail/index.tsxsrc/pages/Club/ClubList/components/ClubCard.tsxsrc/pages/Home/components/HomeClubSection.tsxsrc/pages/Home/components/InfiniteClubCarousel.tsxsrc/pages/Home/components/MiniSchedulePreview.tsxsrc/pages/Home/components/RecommendedClubCard.tsxsrc/pages/Home/components/SectionErrorFallback.tsxsrc/pages/Manager/ManagedAccount/index.tsxsrc/pages/Manager/ManagedApplicationList/index.tsxsrc/pages/Manager/ManagedClubDetail/index.tsxsrc/pages/Manager/ManagedClubList/index.tsxsrc/pages/Manager/ManagedClubProfile/index.tsxsrc/pages/Manager/ManagedMemberList/index.tsxsrc/pages/Manager/ManagedRecruitment/index.tsxsrc/pages/Manager/ManagedRecruitmentForm/index.tsxsrc/pages/Manager/ManagedRecruitmentWrite/index.tsxsrc/pages/Manager/components/ApplicationDetailContent.tsxsrc/pages/Manager/components/DatePicker/index.tsxsrc/pages/Manager/components/TimePicker/index.tsxsrc/pages/Notifications/index.tsxsrc/pages/Schedule/components/CalendarWeekRow.tsxsrc/pages/Schedule/components/DateBox.tsxsrc/pages/Schedule/components/ScheduleDetail.tsxsrc/pages/Schedule/index.tsxsrc/pages/Timer/components/RankingItem.tsxsrc/pages/Timer/index.tsxsrc/pages/User/MyPage/components/ManagerInfoCard.tsxsrc/pages/User/Profile/index.tsxsrc/pages/legal/LicensePage.tsxtsconfig.app.jsontsconfig.node.jsonvite.config.ts
Comment on lines
64
to
+66
| className="flex h-6 w-6 items-center justify-center text-[#69BFDF] disabled:opacity-50" | ||
| > | ||
| <CheckIcon className="h-[26px] w-[26px]" /> | ||
| <CheckIcon className="size-6.5" /> |
Contributor
There was a problem hiding this comment.
CheckIcon 크기가 버튼 컨테이너보다 큼
버튼 컨테이너는 h-6 w-6 (24px)인데, CheckIcon은 size-6.5 (26px)로 설정되어 있어 2px 오버플로우가 발생할 수 있습니다.
🔧 수정 제안
- <CheckIcon className="size-6.5" />
+ <CheckIcon className="size-6" />또는 버튼 컨테이너 크기를 h-6.5 w-6.5로 조정하세요.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/pages/Manager/ManagedApplicationList/index.tsx` around lines 64 - 66, The
CheckIcon size (class "size-6.5") is larger than its button container ("flex h-6
w-6 ..."), causing a 2px overflow; fix by making the icon and container
consistent—either change CheckIcon to use "size-6" (or remove size-6.5) to match
the container, or update the container classes to "h-6.5 w-6.5" so they match
the icon; locate the JSX where CheckIcon is rendered inside the element with
className "flex h-6 w-6 items-center justify-center text-[`#69BFDF`]
disabled:opacity-50" and apply one of these two adjustments.
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
릴리스 노트
Chores
Style