Design/99 체험 등록/수정 페이지 반응형 및 UI 구현 완료 #104
Conversation
Walkthrough이 변경사항은 주로 "내 체험" 관련 폼 및 입력 컴포넌트의 UI 스타일을 전반적으로 리팩터링하고, 입력 필드와 버튼의 스타일, 레이아웃, 텍스트 및 일부 컴포넌트 구조를 개선합니다. 또한 Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant EditActivityForm
participant InfoSection
participant Input
participant Textarea
User->>EditActivityForm: 폼 진입/수정
EditActivityForm->>InfoSection: 입력 필드 렌더링
InfoSection->>Input: 제목, 가격 등 입력
InfoSection->>Textarea: 설명 입력
User->>EditActivityForm: 폼 제출
EditActivityForm-->>User: 결과 반환
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20분 Possibly related PRs
Suggested reviewers
Poem
Note ⚡️ Unit Test Generation is now available in beta!Learn more here, or try it out under "Finishing Touches" below. ✨ 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. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
|
수고많으셨습니다! 페이지 레이아웃이 깔끔해졌네요! |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 8
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (15)
src/app/(with-header)/myactivity/[id]/components/EditActivityForm.tsx(1 hunks)src/app/(with-header)/myactivity/components/AddressInput.tsx(1 hunks)src/app/(with-header)/myactivity/components/CategoryInput.tsx(1 hunks)src/app/(with-header)/myactivity/components/ImagePreview.tsx(1 hunks)src/app/(with-header)/myactivity/components/ImageSection.tsx(1 hunks)src/app/(with-header)/myactivity/components/InfoSection.tsx(2 hunks)src/app/(with-header)/myactivity/components/MainImageSelect.tsx(1 hunks)src/app/(with-header)/myactivity/components/ReservationForm.tsx(1 hunks)src/app/(with-header)/myactivity/components/ScheduleSelect.tsx(1 hunks)src/app/(with-header)/myactivity/components/ScheduleSelectForm.tsx(2 hunks)src/app/(with-header)/myactivity/components/SubImageSelect.tsx(1 hunks)src/app/globals.css(1 hunks)src/components/Input.tsx(3 hunks)src/components/Textarea.tsx(1 hunks)src/types/inputTypes.ts(2 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (2)
src/app/(with-header)/myactivity/components/CategoryInput.tsx (1)
src/app/examples/page.tsx (1)
DropdownExample(7-24)
src/components/Textarea.tsx (2)
src/types/inputTypes.ts (1)
TextareaProps(24-36)src/lib/utils.ts (1)
cn(4-6)
🔇 Additional comments (28)
src/app/globals.css (1)
261-261: 포맷팅 정리가 적절합니다.파일 끝의 불필요한 개행 문자를 제거한 것은 좋은 코드 정리입니다.
src/app/(with-header)/myactivity/components/AddressInput.tsx (1)
52-52: UX 개선이 잘 되었습니다.라벨을 더 명확한 플레이스홀더 텍스트로 변경하여 사용자 경험이 향상되었습니다.
src/components/Input.tsx (1)
22-22: variant 속성 추가가 적절합니다.새로운 compact 변형을 지원하는 variant prop 추가가 PR 목적에 잘 부합합니다.
src/app/(with-header)/myactivity/components/CategoryInput.tsx (3)
13-15: 라벨 제거로 일관된 UI 패턴 적용다른 form 컴포넌트들과 일관성을 맞춰 라벨을 제거한 것이 좋습니다. 플레이스홀더 방식이 더 깔끔한 UX를 제공합니다.
23-25: 플레이스홀더 옵션 개선선택 가능한 프롬프트에서 비활성화된 플레이스홀더로 변경한 것이 더 나은 UX입니다. 사용자가 실수로 유효하지 않은 옵션을 선택하는 것을 방지합니다.
26-27: 카테고리 값 업데이트 확인 및 백엔드 호환성 검증 필요
- src/constants/categories.ts와 CategoryInput.tsx에서 ‘문화 · 예술’ 및 ‘식음료’로 일관되게 변경된 것 확인
- 코드 전반에 ‘문화예술’ 또는 ‘푸드’ 사용 흔적 없음
- 백엔드 API 스펙(데이터베이스 · 기존 저장된 값)과의 호환성은 별도 검증 필요
src/app/(with-header)/myactivity/[id]/components/EditActivityForm.tsx (3)
45-45: 일관된 UI 스타일링 개선배경색과 패딩 조정이 다른 form 컴포넌트들과 일관성을 맞춘 좋은 변경입니다. 모바일 반응형도 고려된 패딩 설정이 적절합니다.
49-49: 제목 텍스트 개선"내 체험 수정"으로 더 명확한 컨텍스트를 제공하고 text-black 클래스로 가독성이 향상되었습니다.
50-58: 버튼 스타일 일관화 확인 및 승인
EditActivityForm.tsx에서ReservationForm.tsx와 동일하게bg-nomad클래스를 사용해 버튼 스타일을 통일했습니다.- 전역 CSS(
src/app/globals.css)에--color-nomad: #112211;이 정의되어 있어 Tailwind의bg-nomad가 정상 작동합니다.src/types/inputTypes.ts (3)
1-1: 적절한 타입 import 추가TextareaHTMLAttributes 추가로 Textarea 컴포넌트 지원이 준비되었습니다.
16-18: variant 프로퍼티 추가로 유연한 스타일링 지원'compact'와 'default' variant로 다양한 입력 컴포넌트 크기를 지원하는 것이 좋습니다. 일관된 디자인 시스템 구축에 도움이 됩니다.
20-36: 일관성 있는 TextareaProps 인터페이스 정의InputProps와 동일한 구조로 TextareaProps를 정의하여 일관성을 유지한 것이 훌륭합니다. 주석도 적절하게 작성되었습니다.
src/app/(with-header)/myactivity/components/ReservationForm.tsx (3)
134-134: EditActivityForm과 일관된 스타일링배경색과 패딩이 EditActivityForm과 완벽하게 일치하도록 업데이트되어 일관성이 향상되었습니다.
138-140: 제목 스타일링 개선text-black 클래스 추가로 가독성이 향상되고, 불필요한 하단 마진 제거로 레이아웃이 깔끔해졌습니다.
141-149: 버튼 스타일링 통일화EditActivityForm과 동일한 버튼 스타일 적용으로 일관된 사용자 경험을 제공합니다. 버튼 텍스트 간소화도 적절합니다.
src/app/(with-header)/myactivity/components/ScheduleSelectForm.tsx (2)
24-24: 일관된 상단 패딩 적용다른 컴포넌트들과 일치하는 pt-24 패딩으로 전체 레이아웃의 일관성이 향상되었습니다.
27-35: 버튼 스타일링 개선고정 크기와 둥근 모서리로 버튼의 시각적 일관성이 향상되었습니다. 추가 div 래퍼로 레이아웃 제어도 더 정확해졌습니다.
src/app/(with-header)/myactivity/components/InfoSection.tsx (4)
34-44: 레이아웃 구조 개선이 잘 적용되었습니다.Grid에서 flexbox로 변경하고 간격을 조정한 부분이 좋습니다. 제목 입력 필드에서 label을 제거하고 placeholder를 사용한 것도 UI 일관성 측면에서 적절합니다.
55-61: Textarea 컴포넌트 도입이 적절합니다.기존
Input컴포넌트의type="textarea"에서 전용Textarea컴포넌트로 변경한 것이 의미론적으로 더 명확하고,rows={10}으로 고정 높이를 설정한 것도 좋습니다.
64-73: 가격 섹션의 레이블 분리가 일관성 있게 처리되었습니다.별도의 레이블을 상단에 배치하고 입력 필드는 placeholder를 사용하는 방식이 다른 섹션들과 일관성을 유지합니다.
appearance-none클래스로 number input의 스피너를 제거한 것도 적절합니다.
75-81: 주소 섹션 구조 개선이 잘 반영되었습니다.가격 섹션과 동일한 패턴으로 레이블을 분리하여 UI 일관성을 유지한 점이 좋습니다.
src/app/(with-header)/myactivity/components/ScheduleSelect.tsx (3)
32-42: 레이아웃 구조가 효과적으로 개선되었습니다.Grid에서 flexbox로 변경하고
items-end로 정렬한 것이 좋습니다. 날짜 입력 필드에compactvariant를 적용한 것도 일관된 디자인 시스템을 구축하는 데 적절합니다.
43-60: 시간 입력 필드의 너비 제한이 적절합니다.
max-w-1/4로 시간 입력 필드의 최대 너비를 제한한 것이 레이아웃 균형을 위해 좋은 선택입니다. 두 시간 입력 필드 모두 동일한 구조를 유지하여 일관성을 보장합니다.
67-67: 버튼 스타일링 개선이 잘 적용되었습니다.고정 크기(
w-44 h-46)와 테두리, 호버 효과를 추가하여 더 명확한 인터랙션을 제공합니다. 중앙 정렬(flex items-center justify-center)도 적절합니다.src/components/Textarea.tsx (4)
16-17: useId 훅 사용과 variant 로직이 적절합니다.접근성을 위한
useId훅 사용과isCompact플래그를 통한 variant 처리가 깔끔하게 구현되었습니다.
30-35: 조건부 스타일링 로직이 잘 구현되었습니다.compact variant에 따른 패딩 조정, focusColor 적용, error 상태에 따른 테두리 색상 변경이 논리적으로 잘 구성되어 있습니다.
resize-none으로 크기 조정을 비활성화한 것도 적절합니다.
37-37: 에러 메시지 표시가 적절하게 구현되었습니다.에러 상태에 따른 조건부 렌더링과 스타일링이 잘 적용되어 있습니다. Input 컴포넌트와 일관된 에러 표시 방식을 사용하고 있습니다.
5-5:@lib/cn경로가 올바르게 설정되어 있습니다.
src/lib/cn.ts파일이export default cn;으로 default 내보내기를 제공하므로
import cn from '@lib/cn';구문이 정상 작동합니다.src/lib/utils.ts는 named export(export function cn)를 사용하니 혼동 없이 사용 중인 경로가 맞습니다.이상으로 import 경로 검증을 완료했습니다.
| type='button' | ||
| onClick={onRemove} | ||
| className='absolute top-2 right-2 rounded-full bg-gray-600 p-1 text-white transition-colors hover:bg-gray-700' | ||
| className='absolute -top-12 -right-12 w-24 h-24 rounded-full text-white transition-colors bg-[rgba(27,27,27,0.8)]' |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
버튼 위치 변경에 대한 검토가 필요합니다.
버튼이 이미지 외부로 이동하면서 다른 요소들과 겹칠 수 있는 레이아웃 문제가 발생할 수 있습니다. 특히 그리드나 플렉스 레이아웃에서 문제가 될 수 있습니다.
다음 스크립트로 ImagePreview 컴포넌트의 사용 위치를 확인해주세요:
🏁 Script executed:
#!/bin/bash
# ImagePreview 컴포넌트가 사용되는 위치와 레이아웃 컨텍스트 확인
rg -A 10 -B 5 "ImagePreview" --type tsxLength of output: 67
다음 스크립트를 실행하여 ImagePreview 컴포넌트의 사용 위치와 구현 내용을 확인해주세요:
🏁 Script executed:
#!/bin/bash
# .tsx 파일 전체에서 ImagePreview 컴포넌트 사용 위치 검색
rg "ImagePreview" -A10 -B5 -g '*.tsx'Length of output: 7411
🏁 Script executed:
#!/bin/bash
# ImagePreview 컴포넌트 구현 코드 확인(상위 200라인)
sed -n '1,200p' "src/app/(with-header)/myactivity/components/ImagePreview.tsx"Length of output: 1315
이미지 삭제 버튼 위치·크기·접근성 검토 및 수정 필요
- 현재 버튼에 적용된
absolute -top-12 -right-12오프셋이 그리드 갭보다 커서(MainImageSelect의 gap-6 = 1.5rem vs 버튼 오프셋 3rem) 인접 셀을 침범할 수 있습니다. - 버튼 크기(
w-24 h-24)가 지나치게 커서 레이아웃 밸런스가 깨질 우려가 있습니다. <IconClose>에alt='삭제 아이콘'을 전달하고 있지만, SVG에는alt속성이 없으며 대신role="img"+aria-label을 사용해야 합니다.- 이미 버튼에
aria-label='이미지 삭제'가 있으므로 SVG에 전달한alt속성은 제거해주세요. - (선택) 버튼 위치를
top-2 right-2등으로 조정하거나, 그리드 갭을 확대해 오버랩을 방지하세요.
[src/app/(with-header)/myactivity/components/ImagePreview.tsx: line 46]
- <button
- className='absolute -top-12 -right-12 w-24 h-24 rounded-full text-white transition-colors bg-[rgba(27,27,27,0.8)]'
+ <button
+ className='absolute top-2 right-2 w-10 h-10 rounded-full text-white transition-colors bg-[rgba(27,27,27,0.8)]'
aria-label='이미지 삭제'
>
- <IconClose className='h-12 w-12 m-auto' fill='currentColor' alt='삭제 아이콘' />
+ <IconClose className='h-6 w-6 m-auto' fill='currentColor' role='img' aria-label='삭제 아이콘' />
</button>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| className='absolute -top-12 -right-12 w-24 h-24 rounded-full text-white transition-colors bg-[rgba(27,27,27,0.8)]' | |
| <button | |
| className='absolute top-2 right-2 w-10 h-10 rounded-full text-white transition-colors bg-[rgba(27,27,27,0.8)]' | |
| aria-label='이미지 삭제' | |
| > | |
| <IconClose | |
| className='h-6 w-6 m-auto' | |
| fill='currentColor' | |
| role='img' | |
| aria-label='삭제 아이콘' | |
| /> | |
| </button> |
🤖 Prompt for AI Agents
In src/app/(with-header)/myactivity/components/ImagePreview.tsx at line 46,
adjust the delete button's position and size to prevent overlap with adjacent
grid cells by reducing the offset from 'absolute -top-12 -right-12' to something
like 'top-2 right-2' and decrease the button size from 'w-24 h-24' to a smaller
dimension for better layout balance. Also, remove the 'alt' attribute from the
<IconClose> SVG component and ensure it uses 'role="img"' with an appropriate
'aria-label' for accessibility, since the button already has 'aria-label="이미지
삭제"'.
| aria-label='이미지 삭제' | ||
| > | ||
| <IconClose /> | ||
| <IconClose className='h-12 w-12 m-auto' fill='currentColor' alt='삭제 아이콘' /> |
There was a problem hiding this comment.
🧹 Nitpick (assertive)
SVG 아이콘의 접근성 속성을 수정해주세요.
SVG 아이콘에는 alt 속성 대신 aria-label이나 title 속성을 사용해야 합니다.
- <IconClose className='h-12 w-12 m-auto' fill='currentColor' alt='삭제 아이콘' />
+ <IconClose className='h-12 w-12 m-auto' fill='currentColor' aria-label='삭제 아이콘' />🤖 Prompt for AI Agents
In src/app/(with-header)/myactivity/components/ImagePreview.tsx at line 49,
replace the incorrect alt attribute on the SVG IconClose component with an
appropriate accessibility attribute such as aria-label or title. Remove the
alt='삭제 아이콘' and add aria-label='삭제 아이콘' or title='삭제 아이콘' to improve
accessibility compliance for the SVG icon.
| onMainImageSelect, | ||
| onMainImageRemove, | ||
| onSubImageAdd, | ||
| onSubImageAdd, |
There was a problem hiding this comment.
🧹 Nitpick (assertive)
불필요한 공백을 제거해주세요.
매개변수 뒤에 불필요한 공백이 추가되었습니다.
- onSubImageAdd,
+ onSubImageAdd,📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| onSubImageAdd, | |
| onSubImageAdd, |
🤖 Prompt for AI Agents
In src/app/(with-header)/myactivity/components/ImageSection.tsx at line 20,
remove the unnecessary trailing whitespace after the parameter 'onSubImageAdd'
to clean up the code and adhere to formatting standards.
| }: MainImageSelectProps) { | ||
| return ( | ||
| <div> | ||
| <div className='pt-24'> |
There was a problem hiding this comment.
🧹 Nitpick (assertive)
상수화 되지 않은 패딩 값을 여러 컴포넌트에서 반복 하드코딩하고 있습니다
pt-24 를 이곳과 SubImageSelect 양쪽에 직접 기입하면, 향후 헤더 높이나 전역 여백 정책이 바뀔 때 모든 컴포넌트를 일일이 수정해야 합니다.
공통 레이아웃(예: PageSection 컴포넌트 또는 전역 CSS 변수/유틸리티 클래스)로 상수화하여 중복을 제거하면 유지보수가 수월해집니다.
🤖 Prompt for AI Agents
In src/app/(with-header)/myactivity/components/MainImageSelect.tsx at line 18,
the padding value 'pt-24' is hardcoded and duplicated in multiple components
like SubImageSelect. To fix this, define a shared constant or use a common
layout component or global CSS variable for this padding value, then replace the
hardcoded 'pt-24' with that constant or shared style to centralize control and
improve maintainability.
| <div className='flex flex-row items-center justify-between gap-5'> | ||
| <p className='text-xl text-black font-bold'>예약 가능한 시간대</p> |
There was a problem hiding this comment.
🧹 Nitpick (assertive)
헤더 요소 변경에 대한 검토
h3에서 p 요소로 변경되었는데, 시각적으로는 개선되었지만 시맨틱 구조 측면에서 고려가 필요합니다. 접근성을 위해 제목 계층 구조를 유지하는 것이 좋을 수 있습니다.
시맨틱한 제목 구조를 유지하려면 다음과 같이 수정하는 것을 고려해보세요:
- <p className='text-xl text-black font-bold'>예약 가능한 시간대</p>
+ <h3 className='text-xl text-black font-bold'>예약 가능한 시간대</h3>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <div className='flex flex-row items-center justify-between gap-5'> | |
| <p className='text-xl text-black font-bold'>예약 가능한 시간대</p> | |
| <div className='flex flex-row items-center justify-between gap-5'> | |
| <h3 className='text-xl text-black font-bold'>예약 가능한 시간대</h3> |
🤖 Prompt for AI Agents
In src/app/(with-header)/myactivity/components/ScheduleSelectForm.tsx around
lines 25 to 26, the heading element was changed from h3 to p, which affects
semantic structure and accessibility. To fix this, revert the p tag back to an
appropriate heading tag like h3 to maintain the correct heading hierarchy and
improve accessibility while keeping the visual style consistent with CSS.
|
|
||
| return ( | ||
| <div> | ||
| <div className='pt-24'> |
There was a problem hiding this comment.
🧹 Nitpick (assertive)
패딩 중복 하드코딩 — 공통 유틸리티 추출을 검토해주세요
pt-24 값을 MainImageSelect 와 동일하게 직접 지정했습니다.
여러 컴포넌트에서 동일한 여백 규칙이 필요하다면 Tailwind @apply 로 커스텀 클래스(예: .section-spacing)를 만들거나 공통 래퍼 컴포넌트로 추출해 주세요.
이렇게 하면 디자인 토큰 변경 시 수정 범위를 최소화할 수 있습니다.
🤖 Prompt for AI Agents
In src/app/(with-header)/myactivity/components/SubImageSelect.tsx at line 22,
the padding-top value 'pt-24' is hardcoded and duplicated from MainImageSelect.
To fix this, create a shared Tailwind custom class using @apply (e.g.,
'.section-spacing') that encapsulates this padding or extract a common wrapper
component applying this spacing. Replace the hardcoded 'pt-24' with this shared
class or wrapper to centralize spacing styles and simplify future design token
updates.
| 'w-full rounded-md border bg-white py-15 pr-50 pl-20 placeholder:text-gray-600 focus:outline-none', | ||
| isCompact ? 'py-10 px-12 text-md' : 'py-15 pr-50 pl-20', |
There was a problem hiding this comment.
🧹 Nitpick (assertive)
className 로직을 개선해주세요.
현재 구현에서 기본 클래스에 py-15 pr-50 pl-20이 포함되어 있고, compact 변형에서 다시 py-10 px-12를 적용하여 중복되는 CSS 클래스가 발생합니다.
className={cn(
- 'w-full rounded-md border bg-white py-15 pr-50 pl-20 placeholder:text-gray-600 focus:outline-none',
- isCompact ? 'py-10 px-12 text-md' : 'py-15 pr-50 pl-20',
+ 'w-full rounded-md border bg-white placeholder:text-gray-600 focus:outline-none',
+ isCompact ? 'py-10 px-12 text-md' : 'py-15 pr-50 pl-20',
focusColor,
error ? 'border-red-300' : 'border-gray-800',
)}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| 'w-full rounded-md border bg-white py-15 pr-50 pl-20 placeholder:text-gray-600 focus:outline-none', | |
| isCompact ? 'py-10 px-12 text-md' : 'py-15 pr-50 pl-20', | |
| className={cn( | |
| 'w-full rounded-md border bg-white placeholder:text-gray-600 focus:outline-none', | |
| isCompact ? 'py-10 px-12 text-md' : 'py-15 pr-50 pl-20', | |
| focusColor, | |
| error ? 'border-red-300' : 'border-gray-800', | |
| )} |
🤖 Prompt for AI Agents
In src/components/Input.tsx around lines 49 to 50, the className logic
redundantly applies padding classes both in the base and conditional parts,
causing duplicate CSS classes. Refactor the className construction to remove the
padding classes from the base string and only apply them conditionally based on
isCompact, ensuring no overlapping or repeated padding classes.
| {label && ( | ||
| <label htmlFor={id} className={cn(className)}> | ||
| {label} | ||
| </label> | ||
| )} |
There was a problem hiding this comment.
🧹 Nitpick (assertive)
레이블 렌더링 로직을 개선할 수 있습니다.
레이블에 className을 적용하고 있는데, 이는 textarea의 className과 혼동될 수 있습니다. 레이블에는 별도의 스타일을 적용하는 것이 좋겠습니다.
다음과 같이 수정을 제안합니다:
- <label htmlFor={id} className={cn(className)}>
+ <label htmlFor={id} className="block text-sm font-medium text-gray-700 mb-1">📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| {label && ( | |
| <label htmlFor={id} className={cn(className)}> | |
| {label} | |
| </label> | |
| )} | |
| {label && ( | |
| <label htmlFor={id} className="block text-sm font-medium text-gray-700 mb-1"> | |
| {label} | |
| </label> | |
| )} |
🤖 Prompt for AI Agents
In src/components/Textarea.tsx around lines 21 to 25, the label element is using
the same className prop as the textarea, which can cause styling confusion. To
fix this, separate the className for the label by either introducing a new prop
for labelClassName or applying a distinct style directly to the label element,
ensuring the textarea and label have independent styling.
There was a problem hiding this comment.
Actionable comments posted: 4
🔭 Outside diff range comments (1)
src/app/(with-header)/myactivity/components/ScheduleSelect.tsx (1)
32-74: 레이아웃 리팩터링과 접근성 고려사항Grid에서 Flexbox로의 전환과 compact variant 사용이 일관성 있게 적용되었습니다. 하지만 라벨 제거로 인한 접근성 문제를 고려해야 합니다.
시각적으로 숨겨진 라벨을 추가하여 접근성을 개선하는 것을 권장합니다:
<div className='flex flex-col gap-10 w-full'> + <label htmlFor={`date-${index}`} className='sr-only'>날짜</label> <Input + id={`date-${index}`} className='w-full' type='date' value={date} onChange={(e) => onDateChange(index, e.target.value)} variant='compact' /> </div>시간 입력 필드들에도 동일하게 적용하세요.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (15)
src/app/(with-header)/myactivity/[id]/components/EditActivityForm.tsx(1 hunks)src/app/(with-header)/myactivity/components/AddressInput.tsx(1 hunks)src/app/(with-header)/myactivity/components/CategoryInput.tsx(1 hunks)src/app/(with-header)/myactivity/components/ImagePreview.tsx(1 hunks)src/app/(with-header)/myactivity/components/ImageSection.tsx(1 hunks)src/app/(with-header)/myactivity/components/InfoSection.tsx(2 hunks)src/app/(with-header)/myactivity/components/MainImageSelect.tsx(1 hunks)src/app/(with-header)/myactivity/components/ReservationForm.tsx(1 hunks)src/app/(with-header)/myactivity/components/ScheduleSelect.tsx(1 hunks)src/app/(with-header)/myactivity/components/ScheduleSelectForm.tsx(2 hunks)src/app/(with-header)/myactivity/components/SubImageSelect.tsx(1 hunks)src/app/globals.css(1 hunks)src/components/Input.tsx(3 hunks)src/components/Textarea.tsx(1 hunks)src/types/inputTypes.ts(2 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (3)
src/app/(with-header)/myactivity/components/CategoryInput.tsx (1)
src/app/examples/page.tsx (1)
DropdownExample(7-24)
src/components/Input.tsx (2)
src/components/Button.tsx (1)
Button(18-49)src/types/modalTypes.ts (1)
ModalProps(9-13)
src/app/(with-header)/myactivity/components/ScheduleSelectForm.tsx (1)
src/components/FloatingBox/TimeSelector.tsx (1)
TimeSelector(4-49)
🔇 Additional comments (26)
src/app/globals.css (1)
261-261: 코드 포맷팅 변경 승인파일 끝의 개행 문자 제거는 일반적인 코드 포맷팅 변경사항입니다. 기능적인 영향은 없습니다.
src/types/inputTypes.ts (3)
1-1: import 확장 승인TextareaHTMLAttributes 추가로 새로운 TextareaProps 인터페이스를 지원합니다.
15-18: InputProps variant 속성 추가 승인compact와 default 변형을 지원하는 variant 속성이 잘 정의되었습니다. 한국어 주석도 명확합니다.
20-36: TextareaProps 인터페이스 구현 승인InputProps와 일관된 구조로 TextareaProps가 잘 정의되었습니다. HTML textarea 속성을 적절히 확장하고 있으며, 동일한 variant 옵션을 제공하여 일관성을 유지합니다.
src/app/(with-header)/myactivity/components/MainImageSelect.tsx (1)
18-18: 레이아웃 패딩 추가 승인pt-24 클래스 추가로 상단 여백이 통일되어 일관된 UI 레이아웃을 제공합니다.
src/app/(with-header)/myactivity/components/SubImageSelect.tsx (1)
22-22: 일관된 레이아웃 패딩 적용 승인MainImageSelect와 동일한 pt-24 클래스를 적용하여 이미지 선택 컴포넌트들 간의 일관된 여백을 제공합니다.
src/app/(with-header)/myactivity/components/AddressInput.tsx (1)
52-52: LGTM! 플레이스홀더 텍스트 개선라벨을 플레이스홀더로 변경하여 UI 일관성을 높인 좋은 개선입니다. 읽기 전용 입력 필드의 용도가 명확하게 전달됩니다.
src/components/Input.tsx (3)
22-22: variant prop 추가 승인새로운
variantprop이 적절히 추가되어 컴포넌트의 유연성이 향상되었습니다.
35-35: 깔끔한 조건부 로직
isCompact변수를 통한 조건부 스타일링 로직이 명확하고 읽기 쉽습니다.
49-50: 스타일링 개선 및 variant 지원플레이스홀더 스타일링이 최신 Tailwind CSS 문법으로 업데이트되었고, compact variant 지원이 잘 구현되었습니다. 기존 스타일을 유지하면서 새로운 옵션을 제공하는 후방 호환적인 접근입니다.
src/app/(with-header)/myactivity/components/ImagePreview.tsx (2)
46-46: 이미지 삭제 버튼 UI 개선버튼 위치를 이미지 컨테이너 외부로 이동하고 반투명 배경을 적용하여 더 현대적이고 사용성이 좋은 디자인으로 개선되었습니다.
49-49: 접근성 및 스타일링 향상아이콘에 명시적인 크기,
fill='currentColor',alt속성을 추가하여 접근성과 스타일 일관성이 향상되었습니다.src/app/(with-header)/myactivity/[id]/components/EditActivityForm.tsx (3)
45-45: 컨테이너 스타일링 개선배경색과 패딩 조정으로 더 일관된 레이아웃을 제공합니다. 반응형 패딩(
md:py-0)도 적절히 적용되었습니다.
49-49: 제목 개선"내 체험 수정"으로 변경하여 사용자에게 더 명확한 컨텍스트를 제공하고,
text-black클래스로 가독성을 향상시켰습니다.
50-58: 버튼 스타일링 및 텍스트 개선버튼의 크기, 패딩, 배경색이 디자인 시스템에 맞게 개선되었고, "수정하기"라는 액션 중심의 텍스트로 변경되어 사용자 경험이 향상되었습니다.
src/app/(with-header)/myactivity/components/CategoryInput.tsx (4)
13-15: 라벨 주석 처리 방식 적절라벨을 주석으로 처리하되 코드를 보존하여 향후 필요시 쉽게 복원할 수 있도록 한 접근이 좋습니다.
16-18: 스타일링 일관성 개선
w-full클래스 명시와text-gray-700색상 적용으로 디자인 일관성이 향상되었습니다.
23-25: 플레이스홀더 옵션 개선선택 불가능한 숨김 플레이스홀더로 변경하여 사용자 경험이 개선되었습니다. 이전의 선택 가능한 프롬프트보다 더 직관적입니다.
26-27: 한국어 용어 개선"문화 · 예술"과 "식음료"로 변경하여 더 정확하고 자연스러운 한국어 표현이 되었습니다.
src/app/(with-header)/myactivity/components/ReservationForm.tsx (3)
134-134: 레이아웃 스타일링 개선 확인됨배경색을
bg-gray-white로 변경하고 반응형 패딩을 적용한 것이 일관된 디자인 시스템 업데이트와 잘 맞습니다.
138-140: 제목 스타일링 개선 확인됨텍스트 색상을
text-black로 통일하고 불필요한 마진을 제거한 것이 깔끔한 레이아웃을 만듭니다.
145-147: 버튼 디자인 개선 및 텍스트 간소화버튼 스타일링이 더 일관성 있게 개선되었고, 텍스트를 "등록하기"로 간소화한 것이 컴팩트한 디자인에 적합합니다.
src/app/(with-header)/myactivity/components/ScheduleSelectForm.tsx (1)
28-35: 버튼 스타일링 개선 확인됨고정 크기와 둥근 모서리를 적용한 버튼 디자인이 일관성 있고 사용자 친화적입니다.
src/components/Textarea.tsx (1)
7-40: 잘 구조화된 Textarea 컴포넌트이 새로운 컴포넌트는 다음과 같은 모범 사례를 잘 따르고 있습니다:
useId를 사용한 접근성 개선- 일관된 variant 지원
- 오류 상태 처리
- 적절한 className 관리
코드 품질과 재사용성이 우수합니다.
src/app/(with-header)/myactivity/components/InfoSection.tsx (2)
6-6: 새로운 Textarea 컴포넌트 통합 확인됨새로운 Textarea 컴포넌트를 적절히 import하여 사용하고 있습니다.
55-62: Textarea 컴포넌트 사용 개선Input에서 전용 Textarea 컴포넌트로 변경한 것이 의미론적으로 더 적절하고,
rows={10}설정으로 사용자 경험이 개선되었습니다.
| onMainImageSelect, | ||
| onMainImageRemove, | ||
| onSubImageAdd, | ||
| onSubImageAdd, |
There was a problem hiding this comment.
🧹 Nitpick (assertive)
사소한 포맷팅 변경
매개변수 뒤에 공백 추가는 사소한 포맷팅 변경사항입니다. 기능적 영향은 없지만, 이런 포맷팅은 자동화 도구로 관리하는 것이 좋습니다.
🤖 Prompt for AI Agents
In src/app/(with-header)/myactivity/components/ImageSection.tsx at line 20,
there is a minor formatting issue where a space is added after a parameter. This
change has no functional impact but should be managed by an automated formatting
tool like Prettier or ESLint. Ensure your project uses such tools and run them
to maintain consistent formatting automatically.
| <div className='relative flex flex-col gap-12 text-xl text-black font-bold'> | ||
| <p>가격</p> | ||
| <Input | ||
| type='number' | ||
| placeholder='가격' | ||
| className='w-full appearance-none' | ||
| value={price} | ||
| onChange={(e) => onPriceChange(e.target.value)} | ||
| /> | ||
| </div> |
There was a problem hiding this comment.
🛠️ Refactor suggestion
폼 접근성 개선 필요
<p> 요소를 라벨로 사용하는 것보다 적절한 <label> 요소를 사용하여 폼 접근성을 개선해야 합니다.
- <div className='relative flex flex-col gap-12 text-xl text-black font-bold'>
- <p>가격</p>
- <Input
- type='number'
- placeholder='가격'
- className='w-full appearance-none'
- value={price}
- onChange={(e) => onPriceChange(e.target.value)}
- />
- </div>
+ <div className='relative flex flex-col gap-12'>
+ <label htmlFor='price' className='text-xl text-black font-bold'>가격</label>
+ <Input
+ id='price'
+ type='number'
+ placeholder='가격'
+ className='w-full appearance-none'
+ value={price}
+ onChange={(e) => onPriceChange(e.target.value)}
+ />
+ </div>주소 필드에도 동일하게 적용하세요.
Also applies to: 75-81
🤖 Prompt for AI Agents
In src/app/(with-header)/myactivity/components/InfoSection.tsx around lines 64
to 73 and 75 to 81, replace the <p> elements used as labels for form inputs with
proper <label> elements linked to their respective inputs using the htmlFor
attribute. This improves form accessibility by correctly associating labels with
inputs. Update both the price input section and the address input section
accordingly.
| <div className='flex flex-col gap-10 w-full max-w-1/4'> | ||
| <Input | ||
| className='w-full' | ||
| label='시작시간' | ||
| type='time' | ||
| value={startTime} | ||
| onChange={(e) => onStartTimeChange(index, e.target.value)} | ||
| variant='compact' | ||
| /> | ||
| </div> | ||
|
|
||
| <div className='sm:col-span-1'> | ||
| <div className='flex flex-col gap-10 w-full max-w-1/4'> |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
반응형 레이아웃 검토 필요
max-w-1/4 클래스가 작은 화면에서 레이아웃 문제를 일으킬 수 있습니다.
다음 스크립트로 반응형 클래스 사용을 확인해보세요:
🏁 Script executed:
#!/bin/bash
# Description: Check for responsive width utilities usage in the codebase
rg -A 2 -B 2 "max-w-1/4|w-1/4" --type tsxLength of output: 71
🏁 Script executed:
#!/bin/bash
# Re-run search without file type restriction to locate all usages of max-w-1/4 or w-1/4
rg -A 2 -B 2 "max-w-1/4|w-1/4"Length of output: 945
반응형 레이아웃 검토 필요
작은 화면에서는 max-w-1/4가 너비를 고정해 레이아웃 깨짐을 유발할 수 있습니다. 반응형 유틸리티를 적용해 주세요.
- 반영 위치:
- 파일:
src/app/(with-header)/myactivity/components/ScheduleSelect.tsx - 라인: 약 43, 52 (
<div className='flex flex-col gap-10 w-full max-w-1/4'>)
- 파일:
변경 예시:
- <div className='flex flex-col gap-10 w-full max-w-1/4'>
+ <div className='flex flex-col gap-10 w-full max-w-full md:max-w-1/4'>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <div className='flex flex-col gap-10 w-full max-w-1/4'> | |
| <Input | |
| className='w-full' | |
| label='시작시간' | |
| type='time' | |
| value={startTime} | |
| onChange={(e) => onStartTimeChange(index, e.target.value)} | |
| variant='compact' | |
| /> | |
| </div> | |
| <div className='sm:col-span-1'> | |
| <div className='flex flex-col gap-10 w-full max-w-1/4'> | |
| <div className='flex flex-col gap-10 w-full max-w-full md:max-w-1/4'> | |
| <Input | |
| className='w-full' | |
| type='time' | |
| value={startTime} | |
| onChange={(e) => onStartTimeChange(index, e.target.value)} | |
| variant='compact' | |
| /> | |
| </div> | |
| <div className='flex flex-col gap-10 w-full max-w-full md:max-w-1/4'> |
🤖 Prompt for AI Agents
In src/app/(with-header)/myactivity/components/ScheduleSelect.tsx around lines
43 to 52, the div elements use a fixed max width class 'max-w-1/4' which can
break the layout on small screens. Replace 'max-w-1/4' with responsive width
utilities such as 'max-w-full sm:max-w-1/4' or use Tailwind's responsive
prefixes to ensure the width adjusts properly on smaller devices, maintaining a
flexible and responsive layout.
| <div className='space-y-4 pt-24'> | ||
| <div className='flex flex-row items-center justify-between gap-5'> | ||
| <p className='text-xl text-black font-bold'>예약 가능한 시간대</p> |
There was a problem hiding this comment.
🛠️ Refactor suggestion
시맨틱 구조 변경에 대한 검토 필요
제목을 <h3>에서 <p>로 변경했는데, 이는 접근성과 SEO 관점에서 의미 있는 제목 계층 구조를 해칠 수 있습니다. 스타일링이 목적이라면 CSS로 해결하는 것을 권장합니다.
- <p className='text-xl text-black font-bold'>예약 가능한 시간대</p>
+ <h3 className='text-xl text-black font-bold'>예약 가능한 시간대</h3>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <div className='space-y-4 pt-24'> | |
| <div className='flex flex-row items-center justify-between gap-5'> | |
| <p className='text-xl text-black font-bold'>예약 가능한 시간대</p> | |
| <div className='space-y-4 pt-24'> | |
| <div className='flex flex-row items-center justify-between gap-5'> | |
| <h3 className='text-xl text-black font-bold'>예약 가능한 시간대</h3> |
🤖 Prompt for AI Agents
In src/app/(with-header)/myactivity/components/ScheduleSelectForm.tsx around
lines 24 to 26, the heading element was changed from an <h3> to a <p>, which
negatively impacts semantic structure and accessibility. Revert the <p> back to
an <h3> to preserve meaningful heading hierarchy, and apply any desired styling
changes using CSS instead of changing the element type.
LeeCh0129
left a comment
LeeCh0129
left a comment
There was a problem hiding this comment.
고생많으셨습니다! 반응형 및 UI 구현 깔끔하게 해주셨네요
📌 변경 사항 개요
체험 등록, 수정 페이지(myactivity) 관련 UI 개선 및 컴포넌트 리팩토링
📝 상세 내용
🔗 관련 이슈
🖼️ 스크린샷(선택사항)
globalnomad-edit.mp4
💡 참고 사항
Summary by CodeRabbit
Style
New Features
Refactor
Bug Fixes