Merge pull request #51 from codeit-2team/feat/48

evaain706 · web-flow · commit a665244eddf7 · 2025-07-19T13:08:56.000+09:00
feat/48 레이아웃분리/상세페이지 타이틀,이미지그리드 컴포넌트 구현/배포에러잡히는 부분 수정
diff --git a/public/assets/svg/dropdown.tsx b/public/assets/svg/dropdown.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+
+interface IconBellProps extends React.SVGProps<SVGSVGElement> {
+  size?: number;
+  color?: string;
+}
+
+const IconDropdown = ({ size = 64, color = '#000', ...props }) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox='0 0 52 52'
+    fill={color}
+    xmlns='http://www.w3.org/2000/svg'
+    {...props}
+  >
+    <path
+      fill='#535358'
+      d='M16 10a2 2 0 100-4 2 2 0 000 4zM16 18a2 2 0 100-4 2 2 0 000 4zM16 26a2 2 0 100-4 2 2 0 000 4z'
+    />
+  </svg>
+);
+
+export default IconDropdown;
diff --git a/public/test/image1.png b/public/test/image1.png
diff --git a/public/test/image2.png b/public/test/image2.png
diff --git a/public/test/image3.png b/public/test/image3.png
diff --git a/public/test/image4.png b/public/test/image4.png
diff --git a/public/test/image5.png b/public/test/image5.png
diff --git a/src/app/(non-header)/layout.tsx b/src/app/(non-header)/layout.tsx
@@ -0,0 +1,3 @@
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return <main className='min-h-screen'>{children}</main>;
+}
diff --git a/src/app/(with-header)/activities/[activitiesId]/components/ImageGrid.tsx b/src/app/(with-header)/activities/[activitiesId]/components/ImageGrid.tsx
@@ -0,0 +1,90 @@
+'use client';
+
+import Image from 'next/image';
+import React, { useState } from 'react';
+
+interface ActivityImageProps {
+  mainImage: string;
+  subImages: string[];
+}
+
+export default function ImageGrid({
+  mainImage,
+  subImages,
+}: ActivityImageProps) {
+  const images = [mainImage, ...subImages];
+  const [currentIndex, setCurrentIndex] = useState(0); //캐러셀 구현용 state
+
+  //  첫번째 이미지면 마지막 이미지로 아니면 -1
+  const prevSlide = () => {
+    setCurrentIndex((prev) => (prev === 0 ? images.length - 1 : prev - 1));
+  };
+
+  // 현재 마지막 이미지면 첫 이미지로 아니면 +1
+  const nextSlide = () => {
+    setCurrentIndex((prev) => (prev === images.length - 1 ? 0 : prev + 1));
+  };
+
+  return (
+    <>
+      {/* 모바일 */}
+      <div className='relative block aspect-square h-[300px] w-full overflow-hidden rounded-lg md:hidden'>
+        <Image
+          src={images[currentIndex]}
+          alt={`${currentIndex + 1}`}
+          fill
+          className='object-cover hover:animate-pulse'
+        />
+
+        <button
+          onClick={prevSlide}
+          className='absolute top-1/2 left-2 -translate-y-1/2 rounded-full bg-black/50 px-6 py-10 text-white'
+        >
+          ‹
+        </button>
+        <button
+          onClick={nextSlide}
+          className='absolute top-1/2 right-2 -translate-y-1/2 rounded-full bg-black/50 px-6 py-10 text-white'
+        >
+          ›
+        </button>
+
+        <div className='absolute bottom-2 left-1/2 flex -translate-x-1/2 gap-1'>
+          {images.map((_, i) => (
+            <div
+              key={i}
+              className={`h-10 w-10 rounded-full ${
+                i === currentIndex ? 'bg-white' : 'bg-white/40'
+              }`}
+            />
+          ))}
+        </div>
+      </div>
+      {/* PC 태블릿 */}
+      <div className='hidden h-[500px] grid-cols-4 grid-rows-4 gap-6 md:grid'>
+        <div className='relative col-span-2 row-span-4 hover:animate-pulse'>
+          <Image
+            src={mainImage}
+            alt='메인이미지'
+            fill
+            className='rounded-lg object-cover'
+          />
+        </div>
+
+        {subImages.slice(0, 4).map((image, index) => (
+          <div
+            key={index}
+            className='relative col-span-1 row-span-2 h-full hover:animate-pulse'
+          >
+            <Image
+              src={image}
+              alt={`서브이미지 ${index + 1}`}
+              fill
+              className='rounded-lg object-cover'
+            />
+          </div>
+        ))}
+      </div>
+    </>
+  );
+}
diff --git a/src/app/(with-header)/activities/[activitiesId]/components/Title.tsx b/src/app/(with-header)/activities/[activitiesId]/components/Title.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import IconDropdown from '@assets/svg/dropdown';
+
+interface TitleProps {
+  title: string;
+  category: string;
+  rating: number;
+  reviewCount: number;
+  address: string;
+  isDropDown?: boolean;
+}
+
+export default function Title({
+  title,
+  category,
+  rating,
+  reviewCount,
+  address,
+  isDropDown,
+}: TitleProps) {
+  return (
+    <div className='mb-6 flex items-start justify-between'>
+      <div className='flex flex-col gap-8'>
+        <p>{category}</p>
+        <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-1'>
+            <span className='text-yellow-500'>★</span>
+            <span className='font-medium'>
+              {rating.toFixed(1)} ({reviewCount}명)
+            </span>
+          </div>
+          <span>{address}</span>
+        </div>
+      </div>
+
+      {isDropDown && (
+        <div className='mt-30 flex items-center gap-2'>
+          <IconDropdown />
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/app/(with-header)/activities/[activitiesId]/mock/mock.ts b/src/app/(with-header)/activities/[activitiesId]/mock/mock.ts
@@ -0,0 +1,58 @@
+export const mockActivity = {
+  id: 5088,
+  userId: 2145,
+  title: '함께 배우면 즐거운 스트릿댄스',
+  description: '둠칫 둠칫 두둠칫',
+  category: '투어',
+  price: 10000,
+  address: '서울특별시 강남구 테헤란로 427',
+  bannerImageUrl: '/test/image1.png',
+  rating: 0,
+  reviewCount: 0,
+  createdAt: '2025-07-16T16:49:19.971Z',
+  updatedAt: '2025-07-16T16:49:19.971Z',
+  subImages: [
+    {
+      id: 10643,
+      imageUrl: '/test/image2.png',
+    },
+    {
+      id: 10644,
+      imageUrl: '/test/image3.png',
+    },
+    {
+      id: 10645,
+      imageUrl: '/test/image4.png',
+    },
+    {
+      id: 10646,
+      imageUrl: '/test/image5.png',
+    },
+  ],
+  schedules: [
+    {
+      id: 21515,
+      date: '2025-12-01',
+      startTime: '12:00',
+      endTime: '13:00',
+    },
+    {
+      id: 21516,
+      date: '2025-12-05',
+      startTime: '12:00',
+      endTime: '13:00',
+    },
+    {
+      id: 21517,
+      date: '2025-12-05',
+      startTime: '13:00',
+      endTime: '14:00',
+    },
+    {
+      id: 21518,
+      date: '2025-12-05',
+      startTime: '14:00',
+      endTime: '15:00',
+    },
+  ],
+};
diff --git a/src/app/(with-header)/activities/[activitiesId]/page.tsx b/src/app/(with-header)/activities/[activitiesId]/page.tsx
@@ -0,0 +1,41 @@
+'use client';
+
+import { mockActivity } from './mock/mock';
+import Title from './components/Title';
+import ImageGrid from './components/ImageGrid';
+
+export default function ActivityDetailPage() {
+  const {
+    title,
+    category,
+    description,
+    address,
+    bannerImageUrl,
+    subImages,
+    rating,
+    reviewCount,
+  } = mockActivity;
+
+  const subImageUrls = subImages.map((image) => image.imageUrl);
+
+  return (
+    <div className='mx-auto max-w-1200 p-4 sm:px-20 lg:p-8'>
+      <Title
+        title={title}
+        category={category}
+        rating={rating}
+        reviewCount={reviewCount}
+        address={address}
+        isDropDown={true}
+      />
+      <ImageGrid mainImage={bannerImageUrl} subImages={subImageUrls} />
+
+      <div className='mt-8 grid grid-cols-1 gap-8 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>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/(with-header)/layout.tsx b/src/app/(with-header)/layout.tsx
@@ -0,0 +1,17 @@
+import Header from '@/components/Header';
+import Footer from '@/components/Footer';
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      {/* 공통 헤더 */}
+      <Header />
+
+      {/* 메인 콘텐츠 */}
+      <main className='min-h-screen pt-70'>{children}</main>
+
+      {/* 공통 푸터 */}
+      <Footer />
+    </>
+  );
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,6 +1,5 @@
-import Header from '@/components/Header';
-import Footer from '@/components/Footer';
 import './globals.css';
+import QueryProvider from '@/lib/queryProvider';
 
 export default function RootLayout({
   children,
@@ -9,15 +8,11 @@ export default function RootLayout({
 }) {
   return (
     <html lang='ko'>
-      <body className='bg-white text-gray-900'>
-        {/* 공통 헤더 */}
-        <Header />
+      <body>
+        <QueryProvider>
+          <main>{children}</main>
+        </QueryProvider>
 
-        {/* 메인 콘텐츠 */}
-        <main className='min-h-screen pt-70'>{children}</main>
-
-        {/* 공통 푸터 */}
-        <Footer />
         <div id='modal-root' />
       </body>
     </html>
diff --git a/src/components/Avatar.tsx b/src/components/Avatar.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { ReactNode, useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import Image from 'next/image';
 import cn from '@/lib/cn';
 import type { StaticImageData } from 'next/image';
diff --git a/src/components/FloatingBox/BookingButton.tsx b/src/components/FloatingBox/BookingButton.tsx
@@ -1,4 +1,4 @@
-import React, { Children } from 'react';
+import React from 'react';
 
 interface BookingButtonProps {
   onClick: () => void;
diff --git a/src/lib/queryProvider.tsx b/src/lib/queryProvider.tsx
@@ -0,0 +1,30 @@
+'use client';
+
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { useState } from 'react';
+
+interface Props {
+  children: React.ReactNode;
+}
+
+export default function QueryProvider({ children }: Props) {
+  const [queryClient] = useState(
+    () =>
+      new QueryClient({
+        defaultOptions: {
+          queries: {
+            // 데이터가 5분간 fresh 상태 유지
+            staleTime: 5 * 60 * 1000,
+            // 캐시에서 10분 후 제거
+            gcTime: 10 * 60 * 1000,
+            // 실패 시 1번만 재시도
+            retry: 1,
+          },
+        },
+      }),
+  );
+
+  return (
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  );
+}
diff --git a/src/ui/MobileBookingModal.tsx b/src/ui/MobileBookingModal.tsx
@@ -27,11 +27,11 @@ export default function MobileModal() {
     setStep((prev) => (prev === 'confirm' ? 'participants' : 'date-time'));
   };
 
-  const handleBooking = () => {
-    alert('예약이 완료되었습니다!');
-    setIsOpen(false);
-    setStep('date-time');
-  };
+  // const handleBooking = () => {
+  //   alert('예약이 완료되었습니다!');
+  //   setIsOpen(false);
+  //   setStep('date-time');
+  // };
 
   return (
     <Modal isOpen={isOpen} onOpenChange={setIsOpen}>

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+export default function Layout({ children }: { children: React.ReactNode }) {`
	`2`	`+ return <main className='min-h-screen'>{children}</main>;`
	`3`	`+}`