Merge branch 'develop' into feature/16

Author: LeeCh0129

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;

public/assets/svg/location.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+
+const Location = ({ size = 24, color = '#9fa6b2', ...props }) => (
+  <svg
+    xmlns='http://www.w3.org/2000/svg'
+    width={size}
+    height={size}
+    fill={color}
+    viewBox='0 0 24 24'
+    
+  >
+    <path
+      fill='#121'
+      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'
+      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>
+);
+
+export default Location;

public/test/image1.png

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

public/test/image2.png

@@ -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>
+    </>
+  );
+}

public/test/image3.png

@@ -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>
+  );
+}