자잘한 UI 리팩토링 #261
Merged
자잘한 UI 리팩토링 #261
Conversation
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
📝 WalkthroughWalkthrough이 변경사항은 여러 UI 컴포넌트와 페이지의 스타일링, 레이아웃, 접근성, 입력 유효성 검증을 개선합니다. 주요 변경점으로는 체크박스와 라디오 버튼의 스타일 업데이트, 스크롤 동작 수정, 비밀번호 정책 강화, 일부 레이아웃 및 텍스트 오버플로우 처리 등이 포함됩니다. Changes
Sequence Diagram(s)(해당 변경들은 주로 스타일 및 레이아웃 관련이므로 시퀀스 다이어그램 생성이 적합하지 않습니다.) Estimated code review effort🎯 2 (Simple) | ⏱️ ~8 minutes Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Note ⚡️ Unit Test Generation is now available in beta!Learn more here, or try it out under "Finishing Touches" below. 📜 Recent review detailsConfiguration used: .coderabbit.yaml 📒 Files selected for processing (3)
🚧 Files skipped from review as they are similar to previous changes (3)
✨ Finishing Touches
🧪 Generate unit tests
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
Documentation and Community
|
|
🚀 오늘뭐해 Preview Deploy 완료! |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (3)
apps/what-today/src/components/notification/NotificationPopover.tsx (1)
129-135: 새 알림 표시가 완전히 사라졌습니다
DotIcon을 주석 처리하면서 새 알림 여부를 사용자에게 전달할 방법이 없어졌습니다. 알림을 확인하지 못하면 UX 가 크게 저하됩니다.-{/* <DotIcon ... /> */} +{(data?.pages[0].totalCount ?? 0) > 0 && ( + <DotIcon + aria-label='새 알림 있음' + className='absolute top-2 left-12 size-8' + color='var(--color-red-500)' + id='notification-dot' + /> +)}조건부 렌더링으로 대체하는 방안을 고려해주세요.
packages/design-system/src/components/RadioGroup/RadioGroup.tsx (1)
159-162: 스타일 업데이트 확인
가독성 향상 및 hover 색상 완화가 적절합니다. 배경/글자 대비만 WCAG 기준에 맞는지 한번 더 확인해주세요.packages/design-system/src/components/MainSearchInput/MainSearchInput.tsx (1)
32-40: 검색 아이콘이 버튼이 아닙니다
SearchIcon을 클릭해도 동작하지 않으므로 시각적 affordance 와 실제 기능이 불일치합니다.button으로 감싸거나onClick핸들러를 제거하여 혼동을 줄이세요.
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (11)
apps/what-today/src/components/auth/AgreeCheckbox.tsx(1 hunks)apps/what-today/src/components/auth/AgreeContent.tsx(2 hunks)apps/what-today/src/components/notification/NotificationPopover.tsx(1 hunks)apps/what-today/src/pages/main/index.tsx(2 hunks)apps/what-today/src/pages/signup/index.tsx(1 hunks)apps/what-today/src/schemas/auth.ts(3 hunks)packages/design-system/src/components/MainSearchInput/MainSearchInput.tsx(1 hunks)packages/design-system/src/components/MypageProfileHeader.tsx(2 hunks)packages/design-system/src/components/RadioGroup/RadioGroup.tsx(1 hunks)packages/design-system/src/components/TimePicker.tsx(2 hunks)packages/design-system/src/components/select/SelectContent.tsx(1 hunks)
🧰 Additional context used
🧠 Learnings (18)
📓 Common learnings
Learnt from: kjhyun0830
PR: What-Today-FE/What-Today#77
File: apps/what-today/src/pages/mypage/manage-activities/index.tsx:50-63
Timestamp: 2025-07-19T01:23:56.149Z
Learning: User kjhyun0830 follows an incremental development approach in What-Today project, implementing UI first and adding functionality in later iterations, as confirmed in PR #77 for the experience management page.
Learnt from: MyungJiwoo
PR: What-Today-FE/What-Today#119
File: apps/what-today/src/pages/mypage/edit-profile/index.tsx:63-92
Timestamp: 2025-07-24T08:30:12.556Z
Learning: MyungJiwoo indicated they will implement validation checks for the edit profile page (password confirmation validation) immediately after PR #119 is merged, following their incremental development approach.
Learnt from: kjhyun0830
PR: What-Today-FE/What-Today#219
File: apps/what-today/src/pages/mypage/main/index.tsx:108-157
Timestamp: 2025-08-03T00:45:03.763Z
Learning: kjhyun0830은 What-Today 프로젝트의 마이페이지(apps/what-today/src/pages/mypage/main/index.tsx)에서 다음 브랜치에 스켈레톤 UI 작업과 함께 로딩 상태 처리를 구현할 계획이라고 언급함.
Learnt from: kjhyun0830
PR: What-Today-FE/What-Today#169
File: apps/what-today/src/hooks/useMyActivitiesQuery.ts:23-25
Timestamp: 2025-07-29T14:50:14.117Z
Learning: kjhyun0830은 What-Today 프로젝트에서 토스터 알림과 같은 UI 일관성이 필요한 기능들을 여러 페이지에 걸쳐 한 번에 수정하는 접근 방식을 선호한다.
Learnt from: MyungJiwoo
PR: What-Today-FE/What-Today#90
File: apps/what-today/src/pages/signup/index.tsx:67-71
Timestamp: 2025-07-21T05:32:48.443Z
Learning: MyungJiwoo plans to implement form validation using zod and react-hook-form in a future iteration rather than adding quick validation checks in the current signup page implementation in apps/what-today/src/pages/signup/index.tsx.
Learnt from: kjhyun0830
PR: What-Today-FE/What-Today#178
File: apps/what-today/src/index.css:63-83
Timestamp: 2025-07-30T13:22:43.195Z
Learning: kjhyun0830은 What-Today 프로젝트에서 기능적으로 문제가 없는 코드에 대해서는 장기적인 유지보수 개선사항보다는 현재 작동하는 상태를 유지하는 것을 선호하는 실용적인 접근 방식을 취한다.
Learnt from: MyungJiwoo
PR: What-Today-FE/What-Today#63
File: packages/design-system/src/pages/NoResultDoc.tsx:8-8
Timestamp: 2025-07-17T11:29:24.913Z
Learning: MyungJiwoo indicated that code duplication in documentation files (like design system documentation) is acceptable and doesn't need to be fixed, as it's not actual service code but rather demo/documentation code with different standards.
📚 Learning: the mainpage component in apps/what-today/src/pages/main/index.tsx contains placeholder/example code...
Learnt from: MyungJiwoo
PR: What-Today-FE/What-Today#43
File: apps/what-today/src/pages/main/index.tsx:7-7
Timestamp: 2025-07-14T13:36:17.941Z
Learning: The MainPage component in apps/what-today/src/pages/main/index.tsx contains placeholder/example code that will be modified later, including the fixed height class 'h-1400' which the user indicated is temporary.
Applied to files:
apps/what-today/src/components/notification/NotificationPopover.tsxapps/what-today/src/pages/main/index.tsxapps/what-today/src/components/auth/AgreeContent.tsxapps/what-today/src/pages/signup/index.tsxpackages/design-system/src/components/MainSearchInput/MainSearchInput.tsxpackages/design-system/src/components/MypageProfileHeader.tsxpackages/design-system/src/components/TimePicker.tsxapps/what-today/src/components/auth/AgreeCheckbox.tsx
📚 Learning: packages/design-system/src/components/datepicker.tsx에서 taeil08은 sr-only 클래스를 가진 div 요소가 달력 트리거 버튼의 세...
Learnt from: Taeil08
PR: What-Today-FE/What-Today#125
File: packages/design-system/src/components/DatePicker.tsx:25-28
Timestamp: 2025-07-24T13:33:33.202Z
Learning: packages/design-system/src/components/DatePicker.tsx에서 Taeil08은 sr-only 클래스를 가진 div 요소가 달력 트리거 버튼의 세로 정렬에 필요하다고 설명했음. 이 요소를 제거하면 버튼 정렬이 깨지는 레이아웃 의존성이 있음.
Applied to files:
apps/what-today/src/components/notification/NotificationPopover.tsxapps/what-today/src/pages/main/index.tsxpackages/design-system/src/components/select/SelectContent.tsxpackages/design-system/src/components/RadioGroup/RadioGroup.tsxapps/what-today/src/pages/signup/index.tsxpackages/design-system/src/components/MainSearchInput/MainSearchInput.tsxpackages/design-system/src/components/MypageProfileHeader.tsxpackages/design-system/src/components/TimePicker.tsxapps/what-today/src/components/auth/AgreeCheckbox.tsx
📚 Learning: in packages/design-system/src/components/button/index.tsx, harryseop uses handleclick wrapper for se...
Learnt from: HarrySeop
PR: What-Today-FE/What-Today#53
File: packages/design-system/src/components/button/index.tsx:32-41
Timestamp: 2025-07-16T06:51:15.152Z
Learning: In packages/design-system/src/components/button/index.tsx, HarrySeop uses handleClick wrapper for security purposes to prevent execution when users remove disabled attributes via developer tools. The onClick handler should be extracted from rest props before spreading to avoid being overwritten.
Applied to files:
apps/what-today/src/components/notification/NotificationPopover.tsxapps/what-today/src/pages/signup/index.tsxpackages/design-system/src/components/MainSearchInput/MainSearchInput.tsxapps/what-today/src/components/auth/AgreeCheckbox.tsx
📚 Learning: in the button component (packages/design-system/src/components/button/index.tsx), the children filte...
Learnt from: HarrySeop
PR: What-Today-FE/What-Today#53
File: packages/design-system/src/components/button/index.tsx:63-70
Timestamp: 2025-07-15T16:38:40.310Z
Learning: In the Button component (packages/design-system/src/components/button/index.tsx), the children filtering logic that only allows strings and Icon components is intentional design decision by HarrySeop. The validChildren filter is meant to restrict button content to only text strings and Icon components for consistency and to prevent component misuse.
Applied to files:
apps/what-today/src/components/notification/NotificationPopover.tsxpackages/design-system/src/components/RadioGroup/RadioGroup.tsxpackages/design-system/src/components/MainSearchInput/MainSearchInput.tsxapps/what-today/src/components/auth/AgreeCheckbox.tsx
📚 Learning: popovertrigger component in controlled mode (when open and onopenchange props are provided to popove...
Learnt from: MyungJiwoo
PR: What-Today-FE/What-Today#117
File: apps/what-today/src/components/notification/NotificationPopover.tsx:21-21
Timestamp: 2025-07-24T08:18:09.297Z
Learning: PopoverTrigger component in controlled mode (when open and onOpenChange props are provided to PopoverRoot) does not automatically toggle the popover state on click. The developer must provide a manual onClick handler to manage the state toggle, as the internal handleClick only works when !isControlled.
Applied to files:
apps/what-today/src/components/notification/NotificationPopover.tsxpackages/design-system/src/components/select/SelectContent.tsx
📚 Learning: kjhyun0830은 what-today 프로젝트의 마이페이지(apps/what-today/src/pages/mypage/main/index.tsx)에서 다음 브랜치에 스켈레톤 u...
Learnt from: kjhyun0830
PR: What-Today-FE/What-Today#219
File: apps/what-today/src/pages/mypage/main/index.tsx:108-157
Timestamp: 2025-08-03T00:45:03.763Z
Learning: kjhyun0830은 What-Today 프로젝트의 마이페이지(apps/what-today/src/pages/mypage/main/index.tsx)에서 다음 브랜치에 스켈레톤 UI 작업과 함께 로딩 상태 처리를 구현할 계획이라고 언급함.
Applied to files:
apps/what-today/src/pages/main/index.tsxapps/what-today/src/pages/signup/index.tsx
📚 Learning: kjhyun0830 프로젝트에서 @what-today/design-system 패키지의 reservationstatus 타입이 calendar/index.ts에서 re-export...
Learnt from: kjhyun0830
PR: What-Today-FE/What-Today#91
File: apps/what-today/src/pages/mypage/reservations-status/index.tsx:2-2
Timestamp: 2025-07-22T03:59:52.657Z
Learning: kjhyun0830 프로젝트에서 @what-today/design-system 패키지의 ReservationStatus 타입이 calendar/index.ts에서 re-export되지 않아 메인 엔트리 포인트에서 접근할 수 없는 문제가 있음. DayCell.tsx에서 정의된 타입들을 calendar 모듈에서 명시적으로 export해야 함.
Applied to files:
apps/what-today/src/pages/main/index.tsxapps/what-today/src/pages/signup/index.tsxpackages/design-system/src/components/TimePicker.tsx
📚 Learning: user kjhyun0830 follows an incremental development approach in what-today project, implementing ui f...
Learnt from: kjhyun0830
PR: What-Today-FE/What-Today#77
File: apps/what-today/src/pages/mypage/manage-activities/index.tsx:50-63
Timestamp: 2025-07-19T01:23:56.149Z
Learning: User kjhyun0830 follows an incremental development approach in What-Today project, implementing UI first and adding functionality in later iterations, as confirmed in PR #77 for the experience management page.
Applied to files:
apps/what-today/src/pages/main/index.tsx
📚 Learning: taeil08이 what-today 프로젝트의 체험 등록 페이지(apps/what-today/src/pages/experiences/iindex.tsx)에서 주소 입력 컴포넌트가 ...
Learnt from: Taeil08
PR: What-Today-FE/What-Today#134
File: apps/what-today/src/pages/experiences/iindex.tsx:11-16
Timestamp: 2025-07-25T03:14:08.579Z
Learning: Taeil08이 What-Today 프로젝트의 체험 등록 페이지(apps/what-today/src/pages/experiences/iindex.tsx)에서 주소 입력 컴포넌트가 아직 만들어지지 않아서 상태 관리를 나중에 추가할 예정이라고 언급함. 이는 프로젝트의 점진적 개발 접근법에 따른 것임.
Applied to files:
apps/what-today/src/pages/main/index.tsxapps/what-today/src/pages/signup/index.tsx
📚 Learning: in the selectroot component (packages/design-system/src/components/select/selectroot.tsx), myungjiwo...
Learnt from: MyungJiwoo
PR: What-Today-FE/What-Today#57
File: packages/design-system/src/components/select/SelectRoot.tsx:37-38
Timestamp: 2025-07-17T01:20:26.915Z
Learning: In the SelectRoot component (packages/design-system/src/components/select/SelectRoot.tsx), MyungJiwoo questioned the need for implementing controlled component pattern. The current implementation only handles internal→external state changes via onChangeValue callback, but doesn't handle external→internal changes when the value prop is updated, which breaks the typical React controlled component contract.
Applied to files:
apps/what-today/src/pages/main/index.tsxpackages/design-system/src/components/select/SelectContent.tsxpackages/design-system/src/components/RadioGroup/RadioGroup.tsxapps/what-today/src/pages/signup/index.tsxpackages/design-system/src/components/MainSearchInput/MainSearchInput.tsxpackages/design-system/src/components/TimePicker.tsxapps/what-today/src/components/auth/AgreeCheckbox.tsx
📚 Learning: taeil08 prefers using translate-x-1/2 and translate-x-1/2 for carousel navigation button positioning...
Learnt from: Taeil08
PR: What-Today-FE/What-Today#237
File: packages/design-system/src/components/Carousel/Carousel.tsx:19-25
Timestamp: 2025-08-04T04:16:10.940Z
Learning: Taeil08 prefers using translate-x-1/2 and translate-x-1/2 for carousel navigation button positioning in packages/design-system/src/components/Carousel/Carousel.tsx as it provides better flexibility for button positioning compared to fixed positioning without transforms.
Applied to files:
apps/what-today/src/pages/main/index.tsxpackages/design-system/src/components/TimePicker.tsx
📚 Learning: myungjiwoo indicated they will implement validation checks for the edit profile page (password confi...
Learnt from: MyungJiwoo
PR: What-Today-FE/What-Today#119
File: apps/what-today/src/pages/mypage/edit-profile/index.tsx:63-92
Timestamp: 2025-07-24T08:30:12.556Z
Learning: MyungJiwoo indicated they will implement validation checks for the edit profile page (password confirmation validation) immediately after PR #119 is merged, following their incremental development approach.
Applied to files:
apps/what-today/src/schemas/auth.ts
📚 Learning: myungjiwoo plans to implement form validation using zod and react-hook-form in a future iteration ra...
Learnt from: MyungJiwoo
PR: What-Today-FE/What-Today#90
File: apps/what-today/src/pages/signup/index.tsx:67-71
Timestamp: 2025-07-21T05:32:48.443Z
Learning: MyungJiwoo plans to implement form validation using zod and react-hook-form in a future iteration rather than adding quick validation checks in the current signup page implementation in apps/what-today/src/pages/signup/index.tsx.
Applied to files:
apps/what-today/src/schemas/auth.tsapps/what-today/src/pages/signup/index.tsx
📚 Learning: in the radiogroup component (packages/design-system/src/components/radiogroup.tsx), the input type s...
Learnt from: Taeil08
PR: What-Today-FE/What-Today#35
File: packages/design-system/src/components/RadioGroup.tsx:0-0
Timestamp: 2025-07-13T13:18:33.545Z
Learning: In the RadioGroup component (packages/design-system/src/components/RadioGroup.tsx), the input type should be 'checkbox' rather than 'radio' to support the intended toggle behavior where users can click a selected option again to deselect it. The handleChange function already implements this toggle logic with `onSelect?.(isSelected ? '' : value);`.
Applied to files:
packages/design-system/src/components/RadioGroup/RadioGroup.tsxapps/what-today/src/pages/signup/index.tsxpackages/design-system/src/components/TimePicker.tsxapps/what-today/src/components/auth/AgreeCheckbox.tsx
📚 Learning: in the radiogroup component (packages/design-system/src/components/radiogroup.tsx), when using type=...
Learnt from: Taeil08
PR: What-Today-FE/What-Today#35
File: packages/design-system/src/components/RadioGroup.tsx:0-0
Timestamp: 2025-07-13T13:33:19.860Z
Learning: In the RadioGroup component (packages/design-system/src/components/RadioGroup.tsx), when using type="checkbox" for toggle behavior, adding role="radio" maintains proper semantic meaning for screen readers while preserving the desired UX functionality where users can click to deselect options.
Applied to files:
packages/design-system/src/components/RadioGroup/RadioGroup.tsxapps/what-today/src/pages/signup/index.tsxapps/what-today/src/components/auth/AgreeCheckbox.tsx
📚 Learning: profileimageinput 컴포넌트(packages/design-system/src/components/profileimageinput.tsx)에서 previewurl은 의도...
Learnt from: MyungJiwoo
PR: What-Today-FE/What-Today#79
File: packages/design-system/src/components/ProfileImageInput.tsx:44-45
Timestamp: 2025-07-19T17:03:39.193Z
Learning: ProfileImageInput 컴포넌트(packages/design-system/src/components/ProfileImageInput.tsx)에서 previewUrl은 의도적으로 내부 상태로 관리됩니다. 이는 미리보기 이미지 관리와 API로 받아온 원본 이미지와의 비교를 위한 용도로, 외부에서 제어할 필요가 없는 uncontrolled 컴포넌트 + 콜백 패턴입니다.
Applied to files:
packages/design-system/src/components/MypageProfileHeader.tsx
📚 Learning: in korean react calendar components, it's common to use english weekday abbreviations (s, m, t, etc....
Learnt from: kjhyun0830
PR: What-Today-FE/What-Today#31
File: packages/design-system/src/components/calendar/CalendarGrid.tsx:13-13
Timestamp: 2025-07-12T16:11:37.214Z
Learning: In Korean React calendar components, it's common to use English weekday abbreviations (S, M, T, etc.) while keeping month/year displays in Korean format. CalendarGrid can use dayjs.locale('en') for weekdays while CalendarHeader uses hardcoded Korean format strings like 'YYYY년 MM월', and these don't conflict since the Korean text is hardcoded in the format string.
Applied to files:
packages/design-system/src/components/TimePicker.tsx
🧬 Code Graph Analysis (1)
packages/design-system/src/components/MainSearchInput/MainSearchInput.tsx (2)
packages/design-system/src/components/input/index.ts (1)
Input(37-46)packages/design-system/src/components/icons/SearchIcon.tsx (1)
SearchIcon(27-36)
🔇 Additional comments (17)
packages/design-system/src/components/select/SelectContent.tsx (1)
26-26: 스크롤 동작 개선이 적절합니다.
overflow-y-scroll에서overflow-y-auto로 변경하여 컨텐츠가 넘칠 때만 스크롤바가 표시되도록 개선했습니다. 이는 더 깔끔한 UI를 제공합니다.packages/design-system/src/components/MypageProfileHeader.tsx (3)
15-15: 프로필 이미지 컨테이너의 정사각형 비율 보장이 적절합니다.
aspect-square클래스 추가로 프로필 이미지 컨테이너가 항상 정사각형 비율을 유지하도록 개선했습니다.
19-19: 프로필 이미지의 정사각형 비율 보장이 적절합니다.이미지 요소에도
aspect-square클래스를 추가하여 일관된 정사각형 형태를 보장합니다.
29-30: 텍스트 오버플로우 처리가 적절합니다.
line-clamp-1클래스 추가로 이름과 이메일 텍스트가 한 줄로 제한되고, 넘치는 경우 생략 처리됩니다. 이는 프로필 위젯이 잘리는 문제를 해결하는 좋은 방법입니다.apps/what-today/src/schemas/auth.ts (3)
3-11: 비밀번호 정책 강화가 우수합니다.새로운
PASSWORD_REGEX는 보안성을 크게 향상시킵니다:
- 8자 이상 길이
- 대소문자, 숫자, 특수문자 각각 최소 1개
- 공백 문자 불허
정규식 패턴도 lookahead를 사용하여 각 조건을 정확하게 검증합니다.
42-43: 회원가입 비밀번호 검증 로직 개선이 적절합니다.기존의 단순한 길이 검사를 강화된 정규식 검사로 교체하여 보안성을 향상시켰습니다.
143-147: 프로필 수정 비밀번호 검증 로직 개선이 적절합니다.정규식 검사 도입과 함께 에러 코드를
custom으로 변경하여 일관된 에러 처리를 구현했습니다.apps/what-today/src/components/auth/AgreeContent.tsx (2)
39-39: 텍스트 스타일 일관성 개선이 적절합니다.
body-text클래스 추가로 개인정보 처리방침 컨텐츠의 텍스트 스타일이 다른 UI 컴포넌트들과 일관성을 갖도록 개선했습니다.
65-65: 텍스트 스타일 일관성 개선이 적절합니다.
body-text클래스 추가로 위치정보 이용약관 컨텐츠의 텍스트 스타일이 다른 UI 컴포넌트들과 일관성을 갖도록 개선했습니다.packages/design-system/src/components/TimePicker.tsx (1)
75-75: 시간 선택 영역의 스크롤 동작 개선이 적절합니다.시간과 분 선택 컨테이너 모두에서
overflow-y-scroll을overflow-y-auto로 변경하여, 컨텐츠가 넘칠 때만 스크롤바가 표시되도록 개선했습니다. 이는 더 깔끔한 UI를 제공하며 다른 컴포넌트들과의 일관성도 유지합니다.Also applies to: 94-94
apps/what-today/src/components/notification/NotificationPopover.tsx (1)
141-142:overflow-y-auto변경 👍
스크롤바를 필요할 때만 노출하도록 수정한 점이 시각적 복잡도를 줄여 줍니다.apps/what-today/src/pages/signup/index.tsx (1)
115-124: 접근성·스타일 개선 👍
htmlFor-id연결과 포커스 링 커스텀으로 접근성이 좋아졌습니다.apps/what-today/src/pages/main/index.tsx (5)
173-173: 간격 조정이 적절합니다.컨테이너의 수직 간격을 60에서 100으로 증가시켜 더 나은 시각적 여백을 제공합니다.
198-199: 헤더 구조 개선이 좋습니다.제목을 독립적인 헤딩 요소로 분리하여 레이아웃이 더 명확해졌습니다.
202-243: 레이아웃 구조화가 잘 되었습니다.카테고리 라디오 그룹과 가격 정렬 드롭다운을 나란히 배치하여 사용자 경험이 개선되었습니다. 24px의 적절한 간격으로 요소들이 균형 있게 배치되어 있습니다.
208-226: 일관된 폰트 스타일링 적용.모든 라디오 버튼에
font-normal클래스를 일관되게 적용하여 통일된 디자인을 구현했습니다. 첫 번째 라디오 버튼의 명시적인gap-8설정도 적절합니다.
228-242: 드롭다운 스타일링 개선이 우수합니다.
rounded-xl보더와border-gray-100로 더 부드러운 외관을 제공하고,py-6으로 수직 패딩을 적용하여 터치 친화적인 UI를 구현했습니다. 내부 그룹의 텍스트 정렬도 적절합니다.
HarrySeop
approved these changes
Aug 4, 2025
Member
HarrySeop
left a comment
HarrySeop
left a comment
There was a problem hiding this comment.
토끼 리뷰만 확인해주시면 좋을 것 같아요! 고생하셨습니다!
Closed
|
🚀 오늘뭐해 Preview Deploy 완료! |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
🧩 관련 이슈 번호
📌 작업 내용
✅ 체크리스트
📷 UI 변경 사항 (선택)
❓무슨 문제가 발생했나요? (선택)
💬 기타 참고 사항 (선택)
Summary by CodeRabbit
스타일
버그 수정
신규 기능
접근성