Feat/64 체험 상세페이지 전체 레이아웃 1차완성 #67
Conversation
|
Caution Review failedAn error occurred during the review process. Please try again later. """ Walkthrough여러 컴포넌트의 레이아웃과 UI가 리팩토링 및 확장되었습니다. 신규 SVG 아이콘과 리뷰 타이틀 컴포넌트가 추가되었고, 예약 인터페이스와 팝업, 모달 컴포넌트의 구조와 상태 관리가 통일 및 개선되었습니다. 페이지 레이아웃과 스타일도 세분화 및 조정되었습니다. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant BookingInterface
participant BookingModal
participant DatePicker
participant TimeSelector
User->>BookingInterface: 날짜 선택 버튼 클릭
BookingInterface->>BookingModal: setIsOpen(true)
BookingModal->>DatePicker: 날짜 선택
BookingModal->>TimeSelector: 시간 선택
User->>BookingModal: 확인 버튼 클릭
BookingModal->>BookingInterface: setIsOpen(false)
sequenceDiagram
participant User
participant ActivitiesPage
participant ReviewTitle
participant ReviewCard
participant LocationMap
ActivitiesPage->>ReviewTitle: 리뷰 타이틀 렌더링
ActivitiesPage->>ReviewCard: 여러 리뷰 카드 렌더링
ActivitiesPage->>LocationMap: 위치 맵 렌더링
Estimated code review effort3 (~45분) Possibly related PRs
Suggested reviewers
Poem
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
public/assets/svg/star.tsxOops! Something went wrong! :( ESLint: 9.30.1 ESLint couldn't find the plugin "eslint-plugin-react-hooks". (The package "eslint-plugin-react-hooks" was not found when loaded as a Node module from the directory "".) It's likely that the plugin isn't installed correctly. Try reinstalling by running the following: The plugin "eslint-plugin-react-hooks" was referenced from the config file in " » eslint-config-next/core-web-vitals » /node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/eslint-config-next/index.js". If you still can't figure out the problem, please see https://eslint.org/docs/latest/use/troubleshooting. src/components/FloatingBox/BookingInterface.tsxOops! Something went wrong! :( ESLint: 9.30.1 ESLint couldn't find the plugin "eslint-plugin-react-hooks". (The package "eslint-plugin-react-hooks" was not found when loaded as a Node module from the directory "".) It's likely that the plugin isn't installed correctly. Try reinstalling by running the following: The plugin "eslint-plugin-react-hooks" was referenced from the config file in " » eslint-config-next/core-web-vitals » /node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/eslint-config-next/index.js". If you still can't figure out the problem, please see https://eslint.org/docs/latest/use/troubleshooting. src/types/bookingStoreTypes.tsOops! Something went wrong! :( ESLint: 9.30.1 ESLint couldn't find the plugin "eslint-plugin-react-hooks". (The package "eslint-plugin-react-hooks" was not found when loaded as a Node module from the directory "".) It's likely that the plugin isn't installed correctly. Try reinstalling by running the following: The plugin "eslint-plugin-react-hooks" was referenced from the config file in " » eslint-config-next/core-web-vitals » /node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/eslint-config-next/index.js". If you still can't figure out the problem, please see https://eslint.org/docs/latest/use/troubleshooting.
🪧 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: 5
🔭 Outside diff range comments (6)
src/components/DatePicker/DatePicker.tsx (3)
3-11: 파이프라인 오류를 수정해야 합니다.import 정렬과 props 정렬 문제를 해결해야 합니다.
다음과 같이 수정하세요:
+'use client'; + +import { useEffect, useState } from 'react'; + +import dayjs from 'dayjs'; +import isoWeek from 'dayjs/plugin/isoWeek'; +import weekOfYear from 'dayjs/plugin/weekOfYear'; +import weekday from 'dayjs/plugin/weekday'; +import 'dayjs/locale/ko'; + +import useBookingStore from '@/stores/Booking/useBookingStore'; +import CalendarBody from './CalendarBody'; +import CalendarHeader from './CalendarHeader';
59-65: Props 정렬을 수정해야 합니다.파이프라인 오류에 따라 props를 알파벳 순으로 정렬해야 합니다.
<CalendarBody - viewDate={viewDate} - today={today} - selectedDate={dayjs(selectedDate)} - onSelectDate={handleDateSelect} highlightDates={highlightDates} + selectedDate={dayjs(selectedDate)} + today={today} + viewDate={viewDate} + onSelectDate={handleDateSelect} />
18-31: 프로덕션 코드에서 mockAvailableDates 하드코딩 제거 및 실제 API 연동 필요현재
mockAvailableDates는 오직 한 파일에서만 정의·사용되고 있으며, 프로덕션 빌드에 그대로 포함될 경우 유지보수와 확장성 측면에서 문제가 발생할 수 있습니다.점검 위치:
- src/components/DatePicker/DatePicker.tsx:18 —
const mockAvailableDates = […]정의- src/components/DatePicker/DatePicker.tsx:41 —
setAvailableDates(mockAvailableDates)호출제안 사항:
- 목 데이터 제거 후, 실제 API 호출 또는 환경별 설정으로 대체
- 비동기 로딩 로직 추가 (로딩 스피너, 에러 핸들링 등)
- 필요하다면 Storybook 등 개발 환경에서만 목을 주입하는 방식 검토
src/components/LocationMap.tsx (2)
3-5: 파이프라인 오류를 수정해야 합니다.import 정렬과 props 정렬 문제를 해결해야 합니다.
+'use client'; + +import { useEffect, useState, useRef } from 'react'; + +import { Map, MapMarker, CustomOverlayMap } from 'react-kakao-maps-sdk'; + +import Location from '@assets/svg/location';
93-96: Location 컴포넌트의 props 정렬이 필요합니다.<Location + className='h-5 w-5 px-8 align-middle text-blue-300' size={30} - className='h-5 w-5 px-8 align-middle text-blue-300' />src/components/FloatingBox/BookingInterface.tsx (1)
11-21: 사용하지 않는 코드를 제거하세요.Pipeline에서 사용하지 않는 import와 변수에 대한 오류가 발생했습니다.
-import TabletPopup from './TabletPopup';- const [openTablet, setOpenTablet] = useState(false);
🧹 Nitpick comments (9)
src/components/LocationMap.tsx (1)
44-44: 에러 로깅을 개선할 수 있습니다.콘솔 에러 대신 더 나은 사용자 피드백을 제공하는 것을 고려해보세요.
- console.error('주소 검색 실패:', status); + console.error('주소 검색 실패:', status); + // TODO: 사용자에게 에러 상태를 표시하는 UI 추가 고려src/app/(with-header)/activities/[activitiesId]/components/ReviewTitle.tsx (1)
1-20: 컴포넌트 재사용성을 높이기 위해 props를 활용하세요.현재 평점, 만족도, 리뷰 수가 하드코딩되어 있어 재사용성이 제한됩니다. 동적 데이터를 받을 수 있도록 개선을 제안합니다.
다음과 같이 props를 추가하여 재사용성을 높일 수 있습니다:
+interface ReviewTitleProps { + rating: number; + satisfactionLevel: string; + reviewCount: number; +} + -export default function ReviewTitle() { +export default function ReviewTitle({ + rating, + satisfactionLevel, + reviewCount, +}: ReviewTitleProps) { return ( <div className='mt-10 mb-10 flex flex-col'> <h2 className='text-2xl font-bold'>후기</h2> <div className='mt-15 flex items-center gap-15'> - <h2 className='text-4xl font-bold'>4.2</h2> + <h2 className='text-4xl font-bold'>{rating}</h2> <div className='flex flex-col gap-10'> - <p>매우 만족</p> + <p>{satisfactionLevel}</p> <div className='flex items-center'> <Star /> - <p>1300개 후기</p> + <p>{reviewCount}개 후기</p> </div> </div> </div> </div> ); }src/app/(with-header)/activities/[activitiesId]/page.tsx (3)
7-9: Import 정렬 및 순서를 정리하세요.Pipeline에서 import 정렬 경고가 발생했습니다.
-import BookingInterface from '@/components/FloatingBox/BookingInterface'; -import LocationMap from '@/components/LocationMap'; -import ReviewTitle from './components/ReviewTitle'; +import BookingInterface from '@/components/FloatingBox/BookingInterface'; +import LocationMap from '@/components/LocationMap'; + +import ReviewTitle from './components/ReviewTitle';
27-34: Props 정렬 및 불필요한 boolean 값을 수정하세요.Pipeline에서 props 정렬과 boolean 속성 관련 경고가 발생했습니다.
<Title - title={title} - category={category} - rating={rating} - reviewCount={reviewCount} address={address} - isDropDown={true} + category={category} + isDropDown + rating={rating} + reviewCount={reviewCount} + title={title} />
50-74: 리뷰 카드 데이터 중복을 개선하세요.모든 ReviewCard가 동일한 데이터를 사용하고 있습니다. 실제 데이터 또는 다양한 샘플 데이터를 사용하는 것이 좋겠습니다.
다음과 같이 배열을 사용하여 코드 중복을 줄일 수 있습니다:
+const reviewData = [ + { + userName: '강지현', + date: '2023. 2. 4', + reviewText: '전문가가 직접 강사로 참여하기 때문에 어떤 수준의 춤추는 사람도 쉽게 이해할 수 있었습니다.', + avatarSrc: '/test/image1.png' + }, + // 더 많은 리뷰 데이터... +]; + - <ReviewCard - userName='강지현' - date='2023. 2. 4' - reviewText='전문가가 직접...' - avatarSrc='/test/image1.png' - /> + {reviewData.map((review, index) => ( + <ReviewCard + key={index} + {...review} + /> + ))}src/components/FloatingBox/TabletPopup.tsx (1)
3-6: Import 정렬을 수정하세요.Pipeline에서 import 정렬 경고가 발생했습니다.
+import DatePicker from '../DatePicker/DatePicker'; + import useBookingStore from '@/stores/Booking/useBookingStore'; import IconClose from '@assets/svg/close'; -import DatePicker from '../DatePicker/DatePicker'; import TimeSelector from './TimeSelector';src/ui/TabletBookingModal.tsx (1)
3-7: Import 정렬과 props 정렬을 수정하세요.Pipeline에서 import 정렬 및 props 정렬 경고가 발생했습니다.
+import DatePicker from '@/components/DatePicker/DatePicker'; +import TimeSelector from '@/components/FloatingBox/TimeSelector'; +import Button from '@/components/Button'; + import useBookingStore from '@/stores/Booking/useBookingStore'; -import DatePicker from '@/components/DatePicker/DatePicker'; -import TimeSelector from '@/components/FloatingBox/TimeSelector'; import IconClose from '@assets/svg/close'; -import Button from '@/components/Button';src/components/FloatingBox/BookingInterface.tsx (2)
3-13: Import 정렬을 수정하세요.Pipeline에서 import 정렬 경고가 발생했습니다.
+import { useState } from 'react'; + +import DatePicker from '../DatePicker/DatePicker'; +import Button from '../Button'; +import BookingModal from '@/ui/BookingModal'; + import useBookingStore from '@/stores/Booking/useBookingStore'; import BookingButton from './BookingButton'; import ParticipantsSelector from './ParticipantSelector'; import PriceDisplay from './PriceDisplay'; import TimeSelector from './TimeSelector'; import TotalPriceDisplay from './TotalPriceDisplay'; -import BookingModal from '@/ui/BookingModal'; -import { useState } from 'react'; import TabletPopup from './TabletPopup'; -import DatePicker from '../DatePicker/DatePicker'; -import Button from '../Button';
45-82: 날짜 선택 로직 중복을 개선하세요.태블릿과 모바일에서 동일한 날짜 선택 로직이 중복되고 있습니다.
공통 컴포넌트로 추출하여 중복을 줄일 수 있습니다:
+const DateSelector = ({ onClick, selectedDate, selectedTime, placeholder }) => ( + <div onClick={onClick} className="cursor-pointer"> + {selectedDate && selectedTime ? ( + <h2> + {selectedDate instanceof Date + ? selectedDate.toLocaleDateString() + : selectedDate} + /{selectedTime} + </h2> + ) : ( + placeholder + )} + </div> +);
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (10)
public/assets/svg/star.tsx(1 hunks)src/app/(with-header)/activities/[activitiesId]/components/ReviewCard.tsx(1 hunks)src/app/(with-header)/activities/[activitiesId]/components/ReviewTitle.tsx(1 hunks)src/app/(with-header)/activities/[activitiesId]/components/Title.tsx(3 hunks)src/app/(with-header)/activities/[activitiesId]/page.tsx(2 hunks)src/components/DatePicker/DatePicker.tsx(1 hunks)src/components/FloatingBox/BookingInterface.tsx(2 hunks)src/components/FloatingBox/TabletPopup.tsx(1 hunks)src/components/LocationMap.tsx(1 hunks)src/ui/TabletBookingModal.tsx(1 hunks)
🧰 Additional context used
🪛 GitHub Actions: CI
src/components/DatePicker/DatePicker.tsx
[warning] 3-3: Run autofix to sort these imports! (simple-import-sort/imports)
[warning] 61-63: Props should be sorted alphabetically and callbacks must be listed after all other props (react/jsx-sort-props)
src/app/(with-header)/activities/[activitiesId]/components/ReviewCard.tsx
[warning] 18-18: Props should be sorted alphabetically (react/jsx-sort-props)
src/app/(with-header)/activities/[activitiesId]/page.tsx
[warning] 3-3: Run autofix to sort these imports! (simple-import-sort/imports)
[warning] 29-33: Props should be sorted alphabetically (react/jsx-sort-props)
[warning] 33-33: Value must be omitted for boolean attribute isDropDown (react/jsx-boolean-value)
[warning] 52-73: Props should be sorted alphabetically (react/jsx-sort-props)
src/components/LocationMap.tsx
[warning] 3-95: Run autofix to sort these imports! and props should be sorted alphabetically (simple-import-sort/imports, react/jsx-sort-props)
src/app/(with-header)/activities/[activitiesId]/components/Title.tsx
[warning] 1-1: Run autofix to sort these imports! (simple-import-sort/imports)
src/components/FloatingBox/TabletPopup.tsx
[warning] 3-3: Run autofix to sort these imports! (simple-import-sort/imports)
src/ui/TabletBookingModal.tsx
[warning] 3-38: Run autofix to sort these imports! and props should be sorted alphabetically (simple-import-sort/imports, react/jsx-sort-props)
src/components/FloatingBox/BookingInterface.tsx
[warning] 3-3: Run autofix to sort these imports! (simple-import-sort/imports)
[error] 11-21: 'TabletPopup' is defined but never used (unused-imports/no-unused-imports); 'openTablet' and 'setOpenTablet' are assigned a value but never used (@typescript-eslint/no-unused-vars)
[warning] 46-82: Callbacks must be listed after all other props and props should be sorted alphabetically (react/jsx-sort-props)
🪛 Biome (1.9.4)
src/components/FloatingBox/TabletPopup.tsx
[error] 8-8: Unexpected empty object pattern.
(lint/correctness/noEmptyPattern)
🔇 Additional comments (10)
src/components/DatePicker/DatePicker.tsx (1)
57-57: 최대 높이 제한이 적절히 추가되었습니다.레이아웃 일관성을 위한
max-h-[746px]클래스 추가가 적절합니다.src/components/LocationMap.tsx (1)
69-69: 반응형 레이아웃으로의 개선이 적절합니다.고정 너비에서 flex 레이아웃으로 변경하여 더 유연한 반응형 디자인을 구현했습니다.
src/app/(with-header)/activities/[activitiesId]/components/Title.tsx (2)
31-31: SVG Star 컴포넌트 도입이 우수합니다.일관된 아이콘 사용을 위해 텍스트 별표를 SVG 컴포넌트로 교체한 것이 좋습니다.
29-29: 간격 조정이 적절합니다.UI 일관성을 위한 간격 조정이 잘 이루어졌습니다.
gap-4에서gap-10으로,gap-2에서gap-1로의 변경이 레이아웃 개선에 도움이 됩니다.Also applies to: 41-41
src/app/(with-header)/activities/[activitiesId]/components/ReviewCard.tsx (2)
17-17: 레이아웃 정렬 변경이 적절합니다.중앙 정렬에서 좌측 정렬로 변경하여 새로운 그리드 레이아웃에 더 잘 맞도록 개선되었습니다.
20-20: 수직 정렬 제거가 의도적인 변경으로 보입니다.
items-center클래스 제거가 새로운 레이아웃 요구사항에 맞는 조정으로 판단됩니다.src/app/(with-header)/activities/[activitiesId]/page.tsx (1)
37-76: 레이아웃 구조가 잘 설계되었습니다.3컬럼 그리드 레이아웃으로 체험 설명, 예약 인터페이스, 체험 장소, 리뷰 섹션이 논리적으로 잘 배치되어 있습니다. 반응형 디자인도 적절히 적용되었습니다.
src/components/FloatingBox/TabletPopup.tsx (1)
9-26: 상태 관리와 조건부 렌더링이 잘 구현되었습니다.useBookingStore를 통한 중앙화된 상태 관리와 조건부 렌더링을 통한 성능 최적화가 적절히 적용되었습니다. 헤더와 닫기 버튼도 사용자 경험을 개선합니다.
src/ui/TabletBookingModal.tsx (1)
13-44: 모달 리팩토링이 잘 구현되었습니다.외부 Modal 컴포넌트 의존성을 제거하고 커스텀 모달로 구현한 것이 좋습니다. 조건부 렌더링, 적절한 스타일링, 그리고 사용자 인터랙션이 모두 잘 구현되어 있습니다.
src/components/FloatingBox/BookingInterface.tsx (1)
24-104: 반응형 예약 인터페이스가 잘 구현되었습니다.PC, 태블릿, 모바일 각각에 최적화된 UI가 잘 구현되었고, 중앙화된 모달 관리로 코드 일관성도 개선되었습니다. 사용자 경험을 고려한 반응형 디자인이 인상적입니다.
public/assets/svg/star.tsx
Outdated
| @@ -0,0 +1,19 @@ | |||
| import React from 'react'; | |||
|
|
|||
| const Star = ({ size = 20, color = '#fff', ...props }) => ( | |||
There was a problem hiding this comment.
🛠️ Refactor suggestion
color prop의 기본값과 실제 사용이 일치하지 않습니다.
color prop의 기본값은 #fff이지만 path 요소에서는 항상 #FFC23D가 사용됩니다. 이는 혼란을 야기할 수 있습니다.
다음 중 하나를 선택하여 수정하세요:
옵션 1: path에서 color prop 사용
<path
d='M12.3122 15.0005C12.2069 15.0009 12.1042 14.9681 12.0187 14.9067L7.99966 11.993L3.9806 14.9067C3.89474 14.969 3.79129 15.0024 3.68522 15.002C3.57915 15.0016 3.47595 14.9675 3.39054 14.9046C3.30513 14.8417 3.24193 14.7532 3.21009 14.6521C3.17825 14.5509 3.17942 14.4422 3.21341 14.3417L4.78091 9.69891L0.718413 6.91298C0.630416 6.8527 0.564002 6.76586 0.528872 6.66515C0.493743 6.56444 0.491741 6.45513 0.523158 6.3532C0.554575 6.25127 0.617764 6.16206 0.703494 6.0986C0.789224 6.03514 0.893001 6.00076 0.999663 6.00048H6.01154L7.52404 1.34579C7.55662 1.2453 7.6202 1.15771 7.70564 1.09558C7.79109 1.03346 7.89402 1 7.99966 1C8.10531 1 8.20823 1.03346 8.29368 1.09558C8.37913 1.15771 8.44271 1.2453 8.47529 1.34579L9.98779 6.00204H14.9997C15.1065 6.00199 15.2105 6.03613 15.2964 6.09947C15.3824 6.16281 15.4459 6.25201 15.4775 6.35402C15.5091 6.45603 15.5072 6.56548 15.4721 6.66634C15.437 6.76721 15.3706 6.85419 15.2825 6.91454L11.2184 9.69891L12.785 14.3405C12.8104 14.4156 12.8175 14.4957 12.8058 14.5742C12.7941 14.6526 12.7639 14.7272 12.7177 14.7917C12.6715 14.8561 12.6107 14.9087 12.5401 14.945C12.4696 14.9813 12.3915 15.0003 12.3122 15.0005Z'
- fill='#FFC23D'
+ fill={color}
/>옵션 2: color prop 기본값을 실제 사용 색상으로 변경
-const Star = ({ size = 20, color = '#fff', ...props }) => (
+const Star = ({ size = 20, color = '#FFC23D', ...props }) => (Also applies to: 14-14
🤖 Prompt for AI Agents
In public/assets/svg/star.tsx at lines 3 and 14, the color prop default value is
'#fff' but the path element always uses '#FFC23D', causing inconsistency. Fix
this by either updating the path element to use the color prop value or changing
the color prop default to '#FFC23D' to match the path usage.
🛠️ Refactor suggestion
TypeScript 인터페이스를 추가해야 합니다.
props에 대한 타입 정의가 누락되어 타입 안전성이 보장되지 않습니다.
다음과 같이 인터페이스를 추가하세요:
+interface StarProps extends React.SVGProps<SVGSVGElement> {
+ size?: number;
+ color?: string;
+}
+
-const Star = ({ size = 20, color = '#fff', ...props }) => (
+const Star: React.FC<StarProps> = ({ size = 20, color = '#fff', ...props }) => (📝 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.
| const Star = ({ size = 20, color = '#fff', ...props }) => ( | |
| interface StarProps extends React.SVGProps<SVGSVGElement> { | |
| size?: number; | |
| color?: string; | |
| } | |
| const Star: React.FC<StarProps> = ({ size = 20, color = '#fff', ...props }) => ( | |
| <svg | |
| width={size} | |
| height={size} | |
| viewBox="0 0 24 24" | |
| fill="none" | |
| xmlns="http://www.w3.org/2000/svg" | |
| {...props} | |
| > | |
| <path | |
| fill="#FFC23D" | |
| d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 | |
| 2 9.24l5.46 4.73L5.82 21z" | |
| /> | |
| </svg> | |
| ); |
🤖 Prompt for AI Agents
In public/assets/svg/star.tsx at line 3, the Star component lacks a TypeScript
interface for its props, which reduces type safety. Define a TypeScript
interface specifying the types for size, color, and any additional props, then
apply this interface to the component's props parameter to ensure proper type
checking.
| return ( | ||
| <div className='mx-auto flex max-w-md items-start gap-6 p-6 text-black md:max-w-2xl'> | ||
| <div className='flex max-w-md justify-start gap-6 p-6 text-black md:max-w-2xl'> | ||
| <Avatar src={avatarSrc} size='sm' /> |
There was a problem hiding this comment.
🛠️ Refactor suggestion
파이프라인 오류를 수정해야 합니다.
Avatar 컴포넌트의 props 정렬을 수정해야 합니다.
- <Avatar src={avatarSrc} size='sm' />
+ <Avatar size='sm' src={avatarSrc} />🧰 Tools
🪛 GitHub Actions: CI
[warning] 18-18: Props should be sorted alphabetically (react/jsx-sort-props)
🤖 Prompt for AI Agents
In src/app/(with-header)/activities/[activitiesId]/components/ReviewCard.tsx at
line 18, the props passed to the Avatar component are not properly ordered,
causing a pipeline error. Reorder the props so that they follow a consistent and
logical sequence, typically placing size before src or following the project's
established prop order conventions.
| import DatePicker from '../DatePicker/DatePicker'; | ||
| import TimeSelector from './TimeSelector'; | ||
|
|
||
| export default function TabletPopup({}) { |
There was a problem hiding this comment.
불필요한 빈 객체 패턴을 제거하세요.
정적 분석 도구에서 빈 객체 패턴에 대한 오류가 발생했습니다. props가 필요하지 않다면 매개변수를 제거하세요.
-export default function TabletPopup({}) {
+export default function TabletPopup() {📝 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.
| export default function TabletPopup({}) { | |
| -export default function TabletPopup({}) { | |
| +export default function TabletPopup() { |
🧰 Tools
🪛 Biome (1.9.4)
[error] 8-8: Unexpected empty object pattern.
(lint/correctness/noEmptyPattern)
🤖 Prompt for AI Agents
In src/components/FloatingBox/TabletPopup.tsx at line 8, the function
TabletPopup currently has an unnecessary empty object as its parameter. Remove
the empty object parameter entirely since no props are being used, changing the
function signature to have no parameters.
BokyungCodes
left a comment
BokyungCodes
left a comment
There was a problem hiding this comment.
디바이스 별로 UI 구현 번거로우셨을텐데 잘 해주신 것 같습니다! 고생하셨습니다 😊
LeeCh0129
left a comment
LeeCh0129
left a comment
There was a problem hiding this comment.
상세페이지 전체적인 레이아웃 완성하시고, 모바일, 태블릿 반응형까지 다 구현하셨군요. 고생하셨습니다!
📌 변경 사항 개요
체험 상세페이지 전체 레이아웃 1차완성
📝 상세 내용
🔗 관련 이슈
🖼️ 스크린샷(선택사항)
gkgkdl.mp4.1.mp4
💡 참고 사항
Summary by CodeRabbit
신규 기능
기능 개선
버그 수정