Feat/64 체험 상세페이지 전체 레이아웃 1차완성

public/assets/svg/location.tsx

@@ -1,22 +1,24 @@
 import React from 'react';
+import { SvgProps } from '@/types/svgType';
 
-const Location = ({ size = 24, color = '#9fa6b2', ...props }) => (
+const Location = ({ size = 24, color = '#9fa6b2', className }: SvgProps) => (
   <svg
     xmlns='http://www.w3.org/2000/svg'
     width={size}
     height={size}
-    fill={color}
     viewBox='0 0 24 24'
-
+    fill='none'
+    className={className}
+    style={{ color }}
   >
     <path
-      fill='#121'
+      fill='currentColor'
       d='M9 7.875a1.125 1.125 0 1 0 0-2.25 1.125 1.125 0 0 0 0 2.25'
-    ></path>
+    />
     <path
-      fill='#121'
+      fill='currentColor'
       d='M9 1.125c-3.101 0-5.625 2.413-5.625 5.379 0 1.412.644 3.29 1.913 5.582 1.02 1.84 2.2 3.504 2.813 4.332a1.117 1.117 0 0 0 1.8 0c.613-.828 1.793-2.492 2.813-4.332 1.267-2.291 1.911-4.17 1.911-5.582 0-2.966-2.524-5.379-5.625-5.379M9 9a2.25 2.25 0 1 1 0-4.5A2.25 2.25 0 0 1 9 9'
-    ></path>
+    />
   </svg>
 );
 

public/assets/svg/star.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { SvgProps } from '@/types/svgType';
+
+const Star = ({ size = 20, color = '#fff', ...props }:SvgProps) => (
+  <svg
+    xmlns='http://www.w3.org/2000/svg'
+    width={size}
+    height={size}
+    viewBox='0 0 20 20'
+    fill={color}
+    {...props}
+  >
+    <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'
+    />
+  </svg>
+);
+
+export default Star;

src/app/(with-header)/activities/[activitiesId]/components/ImageGrid.tsx

@@ -2,16 +2,12 @@
 
 import Image from 'next/image';
 import React, { useState } from 'react';
-
-interface ActivityImageProps {
-  mainImage: string;
-  subImages: string[];
-}
+import { ImageGridProps } from '@/types/activityDetailType';
 
 export default function ImageGrid({
   mainImage,
   subImages,
-}: ActivityImageProps) {
+}: ImageGridProps) {
   const images = [mainImage, ...subImages];
   const [currentIndex, setCurrentIndex] = useState(0); //캐러셀 구현용 state
 

src/app/(with-header)/activities/[activitiesId]/components/ReviewCard.tsx

@@ -1,23 +1,17 @@
 import Avatar from '@/components/Avatar';
-
-interface UserReviewProps {
-  userName: string;
-  date: string;
-  reviewText: string;
-  avatarSrc: string;
-}
+import { ReviewCardProps } from '@/types/activityDetailType';
 
 export default function ReviewCard({
   userName,
   date,
   reviewText,
   avatarSrc,
-}: UserReviewProps) {
+}: ReviewCardProps) {
   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' />
       <div className='grid flex-1 gap-6'>
-        <div className='flex items-center gap-10 text-sm md:text-lg'>
+        <div className='flex gap-10 text-sm md:text-lg'>
           <p className='font-bold'>{userName}</p>
           <p className='text-black'>|</p>
           <p className='text-gray-600'>{date}</p>

src/app/(with-header)/activities/[activitiesId]/components/ReviewTitle.tsx

@@ -0,0 +1,20 @@
+import Star from '@assets/svg/star';
+
+export default function ReviewTitle() {
+  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>
+        <div className='flex flex-col gap-10'>
+          <p>매우 만족</p>
+          <div className='flex items-center'>
+            <Star />
+            <p>1300개 후기</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/app/(with-header)/activities/[activitiesId]/components/Title.tsx

@@ -1,14 +1,7 @@
 import React from 'react';
 import IconDropdown from '@assets/svg/dropdown';
-
-interface TitleProps {
-  title: string;
-  category: string;
-  rating: number;
-  reviewCount: number;
-  address: string;
-  isDropDown?: boolean;
-}
+import Star from '@assets/svg/star';
+import { TitleProps } from '@/types/activityDetailType';
 
 export default function Title({
   title,
@@ -25,9 +18,9 @@ export default function Title({
         <h1 className='mb-2 text-2xl font-bold text-black md:text-3xl'>
           {title}
         </h1>
-        <div className='flex items-center gap-4 text-sm text-gray-600'>
+        <div className='flex items-center gap-10 text-sm text-gray-600'>
           <div className='flex items-center gap-1'>
-            <span className='text-yellow-500'>★</span>
+            <Star />
             <span className='font-medium'>
               {rating.toFixed(1)} ({reviewCount}명)
             </span>
@@ -37,7 +30,7 @@ export default function Title({
       </div>
 
       {isDropDown && (
-        <div className='mt-30 flex items-center gap-2'>
+        <div className='mt-30 flex items-center gap-1'>
           <IconDropdown />
         </div>
       )}

src/app/(with-header)/activities/[activitiesId]/page.tsx

@@ -4,6 +4,9 @@ import { mockActivity } from './mock/mock';
 import Title from './components/Title';
 import ImageGrid from './components/ImageGrid';
 import ReviewCard from './components/ReviewCard';
+import BookingInterface from '@/components/FloatingBox/BookingInterface';
+import LocationMap from '@/components/LocationMap';
+import ReviewTitle from './components/ReviewTitle';
 
 export default function ActivityDetailPage() {
   const {
@@ -31,18 +34,46 @@ export default function ActivityDetailPage() {
       />
       <ImageGrid mainImage={bannerImageUrl} subImages={subImageUrls} />
 
-      <div className='mt-8 grid grid-cols-1 gap-8 md:grid-cols-3'>
+      <div className='mt-86 grid grid-cols-1 gap-15 md:grid-cols-3'>
         <div className='md:col-span-2'>
-          <h2 className='mb-4 border-b pb-2 text-2xl font-bold'>체험 설명</h2>
-          <p>{description}</p>
+          <h2 className='mb-4 pb-2 text-2xl font-bold'>체험 설명</h2>
+          <p className='whitespace-pre-line'>{description}</p>
+        </div>
+        <div className='md:row-span-2'>
+          <BookingInterface />
+        </div>
+
+        <div className='md:col-span-2'>
+          <h2 className='mb-4 pb-2 text-2xl font-bold'>체험 장소</h2>
+          <LocationMap address='서울특별시 강남구' />
+          <ReviewTitle />
+          <ReviewCard
+            userName='강지현'
+            date='2023. 2. 4'
+            reviewText='전문가가 직접 강사로 참여하기 때문에 어떤 수준의 춤추는 사람도 쉽게 이해할 수 있었습니다. 이번 체험을 거쳐 저의 춤추기 실력은 더욱 향상되었어요.'
+            avatarSrc='/test/image1.png'
+          />
+          <ReviewCard
+            userName='강지현'
+            date='2023. 2. 4'
+            reviewText='전문가가 직접 강사로 참여하기 때문에 어떤 수준의 춤추는 사람도 쉽게 이해할 수 있었습니다. 이번 체험을 거쳐 저의 춤추기 실력은 더욱 향상되었어요.'
+            avatarSrc='/test/image1.png'
+          />
+
+          <ReviewCard
+            userName='강지현'
+            date='2023. 2. 4'
+            reviewText='전문가가 직접 강사로 참여하기 때문에 어떤 수준의 춤추는 사람도 쉽게 이해할 수 있었습니다. 이번 체험을 거쳐 저의 춤추기 실력은 더욱 향상되었어요.'
+            avatarSrc='/test/image1.png'
+          />
+          <ReviewCard
+            userName='강지현'
+            date='2023. 2. 4'
+            reviewText='전문가가 직접 강사로 참여하기 때문에 어떤 수준의 춤추는 사람도 쉽게 이해할 수 있었습니다. 이번 체험을 거쳐 저의 춤추기 실력은 더욱 향상되었어요.'
+            avatarSrc='/test/image1.png'
+          />
         </div>
       </div>
-      <ReviewCard
-        userName='강지현'
-        date='2023. 2. 4'
-        reviewText='전문가가 직접 강사로 참여하기 때문에 어떤 수준의 춤추는 사람도 쉽게 이해할 수 있었습니다. 이번 체험을 거쳐 저의 춤추기 실력은 더욱 향상되었어요.'
-        avatarSrc='/test/image1.png'
-      />
     </div>
   );
 }

src/components/DatePicker/CalendarBody.tsx

@@ -2,13 +2,7 @@
 
 import type dayjs from 'dayjs';
 
-interface CalendarBodyProps {
-  viewDate: dayjs.Dayjs;
-  today: dayjs.Dayjs;
-  selectedDate: dayjs.Dayjs;
-  onSelectDate: (date: dayjs.Dayjs) => void;
-  highlightDates?: dayjs.Dayjs[];
-}
+import { CalendarBodyProps } from '@/types/datePickerTypes';
 
 export default function CalendarBody({
   viewDate,

src/components/DatePicker/CalendarHeader.tsx

@@ -1,11 +1,6 @@
 'use client';
 
-import type dayjs from 'dayjs';
-
-interface CalendarHeaderProps {
-  viewDate: dayjs.Dayjs;
-  onMonthChange: (direction: 'add' | 'subtract') => void;
-}
+import { CalendarHeaderProps } from '@/types/datePickerTypes';
 
 export default function CalendarHeader({
   viewDate,

src/components/DatePicker/DatePicker.tsx

@@ -54,7 +54,7 @@ export default function DatePicker() {
   const highlightDates = availableDates.map((item) => dayjs(item.date));
 
   return (
-    <div className='w-full max-w-md rounded-2xl bg-white p-6'>
+    <div className='max-h-[746px] w-full max-w-md rounded-2xl bg-white p-6'>
       <CalendarHeader viewDate={viewDate} onMonthChange={changeMonth} />
       <CalendarBody
         viewDate={viewDate}

src/components/FloatingBox/BookingButton.tsx

@@ -3,16 +3,18 @@ import React from 'react';
 interface BookingButtonProps {
   onClick: () => void;
   children: React.ReactNode;
+  disabled?: boolean;
 }
-
 export default function BookingButton({
   onClick,
   children,
+  disabled = false,
 }: BookingButtonProps) {
   return (
     <button
       onClick={onClick}
-      className='mt-4 mb-6 w-full max-w-sm rounded-lg bg-green-800 py-20 font-medium text-white hover:bg-green-900'
+      disabled={disabled}
+      className={`mt-4 mb-6 w-full max-w-sm rounded-lg py-20 font-medium ${disabled ? 'cursor-not-allowed bg-gray-300 text-gray-500' : 'bg-green-800 text-white hover:bg-green-900'}`}
     >
       {children}
     </button>