Flex 컴포넌트 gap 단위 불일치 문제 수정 #12
Conversation
fix: Add missing semicolon in Storybook preview configuration
개발 서버 배포 전 테스트를 위해 일부 API를 mock으로 사용하도록 설정
- 내부 모듈 import 문제 해결 - 관련된 의존성 함께 조정 참고: storybookjs/storybook#30335
- Flex의 gap, padding 계열 프로퍼티를 사용하는 컴포넌트 스토리 정의 - Chromatic 스냅샷 대상 설정
- 스냅샷 변경 여부에 따라 PR 코멘트 분기 - Storybook과 빌드 링크 포함
- CurvedProgressBar 간격 처리를 빈 요소 대신 margin으로 변경 - 시간 표시 레이아웃을 flex 중첩에서 grid로 단순화 - Flex spacing 단위를 디자인 시스템 기준으로 수정
- 불필요한 Flex 래퍼 제거 - Flex spacing 단위를 디자인 시스템 기준으로 수정
- Flex 컴포넌트의 gap 및 padding 단위를 디자인 시스템 기준으로 수정 - 텍스트 요소의 스타일을 inline-block으로 변경하여 레이아웃 개선 - 진행중인 정산 섹션의 Flex 속성 조정
- bgColor를 디자인 시스템 기준으로 수정 - Flex spacing 단위 정리 - DescriptionField title 구조 단순화
📝 WalkthroughWalkthroughStorybook을 8.6.12로 업그레이드하고 MSW 애드온을 통합했으며, 다수의 컴포넌트에 스토리 파일을 추가했습니다. UI 간격·레이아웃 조정, API 호출에 Changes
Possibly related PRs
Suggested labels
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 inconclusive)
✅ Passed checks (2 passed)
✨ 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
♻️ Duplicate comments (1)
src/entities/group/api/group.ts (1)
42-44: 프로덕션 API 코드에 useMock 플래그가 있습니다.
getGroupHeader함수에도{ useMock: true }가 하드코딩되어 있습니다. 이는 src/entities/auth/api/auth.ts의getGuestToken과 동일한 문제입니다.프로덕션 배포 시 실제 API를 호출하도록 보장되는지 확인이 필요합니다.
🧹 Nitpick comments (5)
src/pages/memberSetup/ui/AddMember/index.tsx (1)
83-98: 레이아웃 단순화를 승인합니다.불필요한 Flex 래퍼를 제거하고 InputGroup을 직접 사용하도록 수정한 것이 적절합니다. 코드가 더 간결해지고 가독성이 향상되었습니다.
src/pages/login/LoginEntranceView.styles.tsx (1)
3-10: 하드코딩된 높이값 검토를 권장합니다.Line 9의
height: 330px은 하드코딩된 픽셀값입니다. 디자인 시스템에 적절한 unit 토큰이 있다면 사용하는 것을 고려해보세요. 다만 330px에 정확히 매칭되는 토큰이 없다면 현재 상태를 유지해도 무방합니다.src/pages/billDetail/ui/ExpenseTimeHeader/index.stories.tsx (1)
16-16: QueryClient 기본 옵션 설정을 고려하세요.테스트 환경에서 불필요한 콘솔 경고를 방지하기 위해 QueryClient에 기본 옵션을 설정하는 것을 권장합니다.
🔎 제안하는 개선안
-const queryClient = new QueryClient(); +const queryClient = new QueryClient({ + defaultOptions: { + queries: { + retry: false, + cacheTime: 0, + }, + }, +});src/pages/home/HomePage.tsx (1)
94-102: 인라인 스타일 사용을 재고해주세요.Text 컴포넌트에
styleprop으로display와marginTop을 직접 전달하고 있습니다. 이는 styled-components 패턴과 혼용되어 스타일 관리 일관성이 떨어질 수 있습니다.가능하다면 Text 컴포넌트에 spacing prop을 추가하거나, 래퍼 컴포넌트를 사용하는 것을 고려해보세요.
🔎 제안: Flex 래퍼 사용
- <Text - variant="body2R" - color="semantic.text.inverse" - style={{ display: 'inline-block', marginTop: theme.unit[4] }} - > - 모임은 즐겁게, 정산은 깔끔하게! - <br /> - 모또만 믿고 맡겨줘! - </Text> + <Flex mt={4}> + <Text variant="body2R" color="semantic.text.inverse"> + 모임은 즐겁게, 정산은 깔끔하게! + <br /> + 모또만 믿고 맡겨줘! + </Text> + </Flex>src/pages/billDetail/ui/ExpenseTimeHeader/index.tsx (1)
219-245: 타이머 구현 리팩터링을 검토해주세요.타이머 렌더링 로직이 그리드 기반으로 완전히 재작성되었습니다:
- 배열 매핑 방식:
[hours, minutes, seconds]를 순회하며 숫자와 구분자(:)를 렌더링 - 코드가 더 간결해졌습니다.- 그리드 레이아웃: S.Timer 컴포넌트를 사용한 그리드 기반 레이아웃으로 변경되었습니다.
- 인라인 스타일 사용: 240번 줄에서
style={{ gridColumn: idx * 2 + 1 }}로 그리드 위치를 동적으로 계산하고 있습니다.우려사항:
- 인라인 스타일 사용이 styled-components 패턴과 혼용되고 있습니다.
gridColumn계산식idx * 2 + 1이 의도한 대로 동작하는지 시각적 확인이 필요합니다 (0→1, 1→3, 2→5 컬럼 위치).Chromatic 스냅샷으로 타이머 레이아웃이 올바르게 렌더링되는지 확인하고, 가능하다면 인라인 스타일을 styled-component의 props로 대체하는 것을 고려해보세요.
🔎 제안: styled-component props 활용
인라인 스타일 대신 S.Timer 내부에서 nth-child 선택자를 사용하거나, Label을 별도 styled-component로 분리하여 gridColumn을 prop으로 전달하는 방식을 고려할 수 있습니다.
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
yarn.lockis excluded by!**/yarn.lock,!**/*.lock
📒 Files selected for processing (27)
.github/workflows/publish-storybook.yml.storybook/preview.tspackage.jsonsrc/entities/auth/api/auth.tssrc/entities/group/api/group.tssrc/pages/addAccountStep/ui/BankNameDrawer/index.stories.tsxsrc/pages/addAccountStep/ui/BankNameDrawer/index.tsxsrc/pages/billDetail/ui/CurvedProgressBar/index.style.tssrc/pages/billDetail/ui/ExpenseTimeHeader/index.stories.tsxsrc/pages/billDetail/ui/ExpenseTimeHeader/index.style.tssrc/pages/billDetail/ui/ExpenseTimeHeader/index.tsxsrc/pages/home/HomePage.stories.tsxsrc/pages/home/HomePage.tsxsrc/pages/home/ui/HomeExpenseItem/index.tsxsrc/pages/login/LoginEntranceView.stories.tsxsrc/pages/login/LoginEntranceView.styles.tsxsrc/pages/login/LoginEntranceView.tsxsrc/pages/login/LoginPage.styles.tssrc/pages/login/LoginPage.tsxsrc/pages/memberSetup/ui/AddMember/index.stories.tsxsrc/pages/memberSetup/ui/AddMember/index.tsxsrc/pages/selectGroup/SelectGroupPage.stories.tsxsrc/pages/selectGroup/SelectGroupPage.tsxsrc/shared/ui/Flex/index.tsxsrc/shared/ui/MemberProfile/index.stories.tssrc/shared/ui/MemberProfile/index.tsxsrc/shared/ui/Text/index.tsx
💤 Files with no reviewable changes (1)
- src/pages/login/LoginPage.styles.ts
🧰 Additional context used
🧠 Learnings (4)
📚 Learning: 2025-09-21T08:03:27.190Z
Learnt from: yoouyeon
Repo: moddo-kr/moddo-frontend PR: 7
File: src/features/expense-management/ui/FormField/index.tsx:11-13
Timestamp: 2025-09-21T08:03:27.190Z
Learning: src/shared/ui/Button/index.tsx (Line 20), src/shared/ui/Text/index.tsx (Line 35), src/shared/ui/Input/index.tsx (Line 59) 파일들에는 모두 export default가 존재한다. default import 방식 (import Button from '@/shared/ui/Button' 등)이 올바르게 작동한다.
Applied to files:
src/pages/login/LoginEntranceView.tsxsrc/pages/home/ui/HomeExpenseItem/index.tsxsrc/pages/login/LoginPage.tsx
📚 Learning: 2025-09-21T08:03:27.190Z
Learnt from: yoouyeon
Repo: moddo-kr/moddo-frontend PR: 7
File: src/features/expense-management/ui/FormField/index.tsx:11-13
Timestamp: 2025-09-21T08:03:27.190Z
Learning: src/shared/ui/Button/index.tsx, src/shared/ui/Text/index.tsx, src/shared/ui/Input/index.tsx 파일들에는 모두 export default가 존재한다. default import 방식 (import Button from '@/shared/ui/Button' 등)이 올바르게 작동한다.
Applied to files:
src/pages/login/LoginEntranceView.tsxsrc/pages/home/ui/HomeExpenseItem/index.tsx
📚 Learning: 2025-09-21T07:58:28.422Z
Learnt from: yoouyeon
Repo: moddo-kr/moddo-frontend PR: 7
File: src/features/expense-management/ui/NumberInput/index.tsx:2-2
Timestamp: 2025-09-21T07:58:28.422Z
Learning: src/shared/ui/Text/index.tsx 파일에는 export default Text; 가 35번째 줄에 존재한다. import Text from '@/shared/ui/Text' 구문이 올바르게 작동한다.
Applied to files:
src/pages/login/LoginEntranceView.tsxsrc/pages/home/ui/HomeExpenseItem/index.tsxsrc/shared/ui/Text/index.tsx
📚 Learning: 2025-09-21T07:58:28.422Z
Learnt from: yoouyeon
Repo: moddo-kr/moddo-frontend PR: 7
File: src/features/expense-management/ui/NumberInput/index.tsx:2-2
Timestamp: 2025-09-21T07:58:28.422Z
Learning: src/shared/ui/Text/index.tsx 파일에는 default export가 존재한다 (export default Text;). import Text from '@/shared/ui/Text' 구문이 올바르게 작동한다.
Applied to files:
src/pages/login/LoginEntranceView.tsxsrc/pages/home/ui/HomeExpenseItem/index.tsxsrc/shared/ui/Text/index.tsx
🧬 Code graph analysis (12)
src/pages/login/LoginEntranceView.tsx (4)
src/pages/login/LoginEntranceView.styles.tsx (1)
LogoImg(21-26)src/pages/login/LoginPage.styles.ts (1)
LogoImg(3-8)src/shared/ui/Text/index.styles.tsx (1)
Text(20-25)src/shared/ui/Lottie/index.tsx (1)
CoinLottie(9-15)
src/pages/home/ui/HomeExpenseItem/index.tsx (1)
src/shared/ui/Text/index.styles.tsx (1)
Text(20-25)
src/pages/login/LoginEntranceView.stories.tsx (2)
src/pages/home/HomePage.stories.tsx (1)
Default(27-27)src/pages/selectGroup/SelectGroupPage.stories.tsx (1)
Default(57-57)
src/pages/home/HomePage.tsx (3)
src/pages/error/ErrorPage.style.ts (1)
Flex(8-15)src/pages/notFound/NotFoundPage.style.ts (1)
Flex(8-15)src/shared/ui/Text/index.styles.tsx (1)
Text(20-25)
src/pages/addAccountStep/ui/BankNameDrawer/index.stories.tsx (5)
src/pages/billDetail/ui/ExpenseTimeHeader/index.stories.tsx (1)
Default(58-71)src/pages/home/HomePage.stories.tsx (1)
Default(27-27)src/pages/login/LoginEntranceView.stories.tsx (1)
Default(15-15)src/pages/memberSetup/ui/AddMember/index.stories.tsx (1)
Default(49-54)src/pages/selectGroup/SelectGroupPage.stories.tsx (1)
Default(57-57)
src/pages/home/HomePage.stories.tsx (5)
src/pages/addAccountStep/ui/BankNameDrawer/index.stories.tsx (1)
Default(15-19)src/pages/billDetail/ui/ExpenseTimeHeader/index.stories.tsx (1)
Default(58-71)src/pages/login/LoginEntranceView.stories.tsx (1)
Default(15-15)src/pages/memberSetup/ui/AddMember/index.stories.tsx (1)
Default(49-54)src/pages/selectGroup/SelectGroupPage.stories.tsx (1)
Default(57-57)
src/pages/login/LoginEntranceView.styles.tsx (1)
src/pages/login/LoginPage.styles.ts (1)
LogoImg(3-8)
src/pages/selectGroup/SelectGroupPage.tsx (2)
src/pages/error/ErrorPage.style.ts (1)
Flex(8-15)src/pages/notFound/NotFoundPage.style.ts (1)
Flex(8-15)
src/entities/auth/api/auth.ts (1)
public/mockServiceWorker.js (1)
response(125-125)
src/pages/memberSetup/ui/AddMember/index.tsx (2)
src/shared/ui/Input/index.styles.ts (1)
Input(81-90)src/shared/ui/Text/index.styles.tsx (1)
Text(20-25)
src/pages/billDetail/ui/ExpenseTimeHeader/index.stories.tsx (5)
src/pages/addAccountStep/ui/BankNameDrawer/index.stories.tsx (1)
Default(15-19)src/pages/home/HomePage.stories.tsx (1)
Default(27-27)src/pages/login/LoginEntranceView.stories.tsx (1)
Default(15-15)src/pages/memberSetup/ui/AddMember/index.stories.tsx (1)
Default(49-54)src/pages/selectGroup/SelectGroupPage.stories.tsx (1)
Default(57-57)
src/pages/billDetail/ui/ExpenseTimeHeader/index.tsx (1)
src/shared/ui/Text/index.styles.tsx (1)
Text(20-25)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: Run Chromatic
🔇 Additional comments (28)
package.json (1)
87-87: MSW Storybook 애드온 추가를 승인합니다.msw-storybook-addon 추가는 Storybook에서 API 의존성 없이 컴포넌트를 테스트하려는 PR 목표와 잘 부합합니다.
src/shared/ui/Text/index.tsx (1)
12-12: style prop 추가를 승인합니다.Text 컴포넌트에
styleprop을 추가하여 인라인 스타일링이 가능하도록 한 변경사항이 적절합니다. 기존 variant/color props를 보완하면서 유연성을 높였습니다.Also applies to: 22-22, 31-31
src/pages/memberSetup/ui/AddMember/index.tsx (1)
100-100: spacing 값 변경 검증이 필요합니다.spacing 값들이 일관되게 4배씩 증가했습니다:
- gap: 2 → 8
- mt: 7 → 28
- gap: 3 → 12
이 패턴은 px 단위를 unit 토큰으로 변환한 것으로 보이지만, 디자인 시스템 명세와 일치하는지 확인이 필요합니다. 특히 mt={28}은 상당히 큰 여백입니다.
Chromatic 스냅샷이나 디자인 시스템 문서로 이 값들이 의도한 대로인지 확인해주세요.
Also applies to: 108-108
src/pages/memberSetup/ui/AddMember/index.stories.tsx (1)
33-35: Chromatic 스냅샷 설정을 승인합니다.
chromatic: { disableSnapshot: false }설정으로 이 스토리의 시각적 회귀 테스트를 활성화했습니다. spacing 변경사항을 검증하려는 PR 목표와 잘 부합합니다..storybook/preview.ts (3)
2-2: MSW 초기화를 승인합니다.MSW Storybook 애드온의
initialize()호출이 적절하게 배치되었습니다. 이는 모든 스토리가 로드되기 전에 MSW를 설정합니다.Also applies to: 8-9
13-13: Chromatic 기본 설정을 승인합니다.
chromatic: { disableSnapshot: true }를 기본값으로 설정하고 필요한 스토리에서만 활성화하는 접근 방식이 적절합니다. 불필요한 스냅샷 생성을 방지하여 Chromatic 사용량을 최적화할 수 있습니다.
33-34: MSW 로더 설정을 승인합니다.
mswLoader를 글로벌 loaders 배열에 추가하여 모든 스토리에서 MSW 핸들러를 사용할 수 있도록 했습니다. 이는 msw-storybook-addon의 표준 설정 방식입니다.src/pages/addAccountStep/ui/BankNameDrawer/index.tsx (1)
27-27: 디자인 시스템 spacing 토큰과의 일치 여부 확인 필요
px={5}에서px={20}으로 4배 증가한 변경입니다. 이 값이 프로젝트의 디자인 시스템 spacing unit 토큰과 일치하는지 확인이 필요합니다.src/entities/auth/api/auth.ts (1)
11-13: 프로덕션 API 코드의 useMock 플래그 검증 필요저장소 접근 실패로 인해 다음 사항을 확인할 수 없었습니다:
- axiosInstance의 useMock 처리 로직
- 빌드 타임 플래그 제거 여부
- 환경 변수 기반 제어 메커니즘
- 실제 프로덕션 영향도
코드 검토자 또는 개발 팀이 다음을 확인해주세요:
- axiosInstance가 useMock을 어떻게 처리하는지
- 프로덕션 빌드 시 이 플래그가 제거되는지
- 환경별 동작 제어 메커니즘이 있는지
.github/workflows/publish-storybook.yml (1)
41-60: 개선된 조건부 메시지 처리스냅샷 변경 유무에 따라 다른 PR 코멘트를 생성하도록 개선되었습니다. 사용자 경험이 향상되고 로직도 명확합니다.
src/pages/addAccountStep/ui/BankNameDrawer/index.stories.tsx (1)
1-19: LGTM!표준 Storybook 스토리 구조를 따르고 있으며, Chromatic 스냅샷이 활성화되어 변경 사항 확인이 가능합니다.
src/shared/ui/MemberProfile/index.tsx (1)
20-24: 간격 수치 변경 검증 필요gap이 1→4로, py가 2→8로 변경되었습니다. 이는 각각 약 4배의 간격 증가를 의미합니다. Chromatic 스냅샷을 통해 이 수치가 피그마 디자인과 일치하는지 확인해주세요.
src/pages/billDetail/ui/CurvedProgressBar/index.style.ts (1)
4-4: LGTM!디자인 시스템의 unit 토큰을 사용하여 상단 여백을 추가했습니다. PR 목표와 일치합니다.
src/shared/ui/Flex/index.tsx (1)
9-14: 유용한 문서화 추가Flex 컴포넌트의 spacing 값이 theme.unit 토큰에 매핑되는 방식과 fallback 처리 순서를 명확히 설명하고 있습니다. 개발자가 일관되게 spacing을 사용하는 데 도움이 됩니다.
src/pages/home/ui/HomeExpenseItem/index.tsx (1)
47-54: LGTM!디자인 시스템 컴포넌트(Flex, Text)를 사용하여 일관성을 개선했습니다. Flex에 gap 속성이 명시되지 않아 숫자와 텍스트가 붙어서 표시되는데, 이는 분수 표시의 의도된 동작으로 보입니다.
src/pages/login/LoginPage.tsx (2)
11-11: 코드 구조 개선입구 화면 UI를
LoginEntranceView컴포넌트로 분리하여 모듈성과 가독성이 향상되었습니다.Also applies to: 38-38
57-87: 의미론적 네이밍 개선
ButtonWrapper에서BottomWrapper로 변경하여 래퍼의 역할이 더 명확해졌습니다.src/pages/selectGroup/SelectGroupPage.tsx (4)
35-35: LGTM!하드코딩된 색상 값을 시맨틱 토큰으로 변경하여 유지보수성이 향상되었습니다.
Also applies to: 43-43
41-41: padding-top 단위 변경 검증 필요
pt가"10px"에서"6"(숫자)으로 변경되었습니다.
"10px"는 10px 그대로 유지"6"는theme.unit[6]에 매핑되어 다른 값이 될 수 있습니다의도한 변경인지, Chromatic 스냅샷으로 시각적 결과를 확인해주세요.
52-52: 간격 수치 대폭 변경 검증 필요
mx가 5→20,mt가 5→20으로 변경되어 여백이 4배 증가했습니다. 피그마 디자인과 일치하는지 Chromatic 스냅샷으로 확인해주세요.
47-47: LGTM!여러
Text컴포넌트 대신\n을 사용한 단일 문자열로 변경하여 코드가 더 간결해졌습니다.src/pages/home/HomePage.tsx (4)
82-84: spacing 값의 일관성을 확인해주세요.
margin={20},px={20},py={18}등 여러 spacing 속성이 숫자로 전달되고 있습니다. 이전 코멘트와 동일하게 Flex 컴포넌트가 이 값들을 올바르게 theme.unit 토큰으로 변환하는지 확인이 필요합니다.
122-128: 하드코딩된 height 값을 확인해주세요.
height={48}로 고정 높이를 설정하고 있습니다. 이 값이 디자인 시스템의 토큰에 정의된 값인지, 아니면 임의로 설정된 값인지 확인이 필요합니다. 만약 디자인 시스템에 정의된 높이 값이라면 토큰을 참조하는 것이 좋습니다.
164-170: 빈 상태 레이아웃 변경사항 확인했습니다.spacing 값이
py={20},gap={20}으로 증가하여 더 여유로운 레이아웃이 적용되었습니다. 조건부 렌더링 로직은 정상적으로 유지되고 있습니다.다만 앞서 언급한 것처럼 Flex 컴포넌트의 숫자 값 처리 방식 확인이 필요합니다.
71-74:gap={16}이 디자인 시스템 토큰으로 올바르게 처리되는지 확인이 필요합니다.Flex 컴포넌트의 gap prop에서 숫자 값을 직접 전달하는 경우, 내부적으로
theme.unit[16]과 같은 디자인 시스템 토큰으로 자동 변환되는지 확인해주세요. 자동 변환되지 않으면 px 단위로 적용되어 디자인 시스템과 불일치가 발생할 수 있습니다.src/pages/billDetail/ui/ExpenseTimeHeader/index.tsx (3)
175-183: spacing 값 패턴이 일관적으로 적용되었습니다.계좌번호와 복사 버튼 사이의 gap을 4로 설정하고, Copy 아이콘 크기를 16x16으로 고정했습니다. 아이콘 크기는 적절하나,
gap={4}역시 이전 파일에서 언급한 것처럼 Flex 컴포넌트의 숫자 값 처리 방식 확인이 필요합니다.
197-203: 정산 완료 텍스트 분리가 적절합니다.납부 인원과 전체 인원을 별도의 Text 컴포넌트로 분리하여 각각 다른 색상을 적용할 수 있게 되었습니다. 납부 인원은 오렌지색(
semantic.orange.default)으로, 전체 인원과 "정산 완료"는 역색(semantic.text.inverse)으로 표시되어 시각적 강조가 명확해졌습니다.
214-217: 타이머 섹션 spacing 조정을 확인했습니다.
px={20},gap={12}로 타이머 섹션의 여백이 조정되었습니다. 이전 코멘트에서 언급한 Flex 컴포넌트의 숫자 값 처리 방식 확인이 필요합니다.
💻 작업 내용
피그마 디자인과 실제 구현 결과를 비교했을 때 수치 값이 동일하지만 gap이 미묘하게 달라 보이는 문제가 있었습니다.
확인해보니 Flex 컴포넌트에서 사용하는 spacing propery들의 값 (gap, padding, margin) 에서 px/rem 단위를 섞어서 사용하는게 문제였더라고요.
디자이너분들이 spacing 값을 설정할 때 디자인 시스템의 unit 토큰을 주로 사용하시기 때문에
저희도 기본적으로 숫자를 입력하면 해당하는 unit 토큰을 찾아 적용하도록 통일했습니다!
변경 범위가 좀 큰 것 같아서 영향을 받는 페이지나 컴포넌트 스토리를 정의해두고
chromatic 스냅샷으로 변경 내용 확인할 수 있도록 설정했습니다.
Spacing / Unit 정리
Storybook / Mock / Snapshot
디자인 수정한 컴포넌트 : https://www.chromatic.com/build?appId=6867dc9b2bbd1b3d76b92f4a&number=16
Summary by CodeRabbit
New Features
Style
Chores
✏️ Tip: You can customize this high-level summary in your review settings.