Feat/23 공통 Dropdown 컴포넌트 구현

public/assets/svg/check.tsx

@@ -1,22 +1,57 @@
 import React from 'react';
 
-const CheckIcon = ({ size = 24, ...props }) => (
-  <svg
-    xmlns='http://www.w3.org/2000/svg'
-    width={size}
-    height={size}
-    fill='none'
-    viewBox='0 0 24 24'
-  >
-    <circle cx='12' cy='12' r='12' fill='#121'></circle>
-    <path
-      stroke='#fff'
-      strokeLinecap='round'
-      strokeLinejoin='round'
-      strokeWidth='1.5'
-      d='m7.607 12.35 3.08 3.15 5.563-7.143'
-    />
-  </svg>
-);
+interface CheckIconProps {
+  size?: number;
+  showBackground?: boolean;
+  [key: string]: any;
+}
+
+const CheckIcon = ({
+  size = 24,
+  showBackground = true,
+  ...props
+}: CheckIconProps) => {
+  // 배경 없이 체크만 표시하는 경우
+  if (!showBackground) {
+    return (
+      <svg
+        xmlns='http://www.w3.org/2000/svg'
+        width={size}
+        height={size}
+        fill='none'
+        viewBox='0 0 24 24'
+        {...props}
+      >
+        <path
+          stroke='currentColor'
+          strokeLinecap='round'
+          strokeLinejoin='round'
+          strokeWidth='1.5'
+          d='m7.607 12.35 3.08 3.15 5.563-7.143'
+        />
+      </svg>
+    );
+  }
+
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      width={size}
+      height={size}
+      fill='none'
+      viewBox='0 0 24 24'
+      {...props}
+    >
+      <circle cx='12' cy='12' r='12' fill='#121'></circle>
+      <path
+        stroke='#fff'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+        d='m7.607 12.35 3.08 3.15 5.563-7.143'
+      />
+    </svg>
+  );
+};
 
 export default CheckIcon;

public/assets/svg/chevron.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+const ChevronIcon = ({ size = 24, direction = 'down', ...props }) => (
+  <svg
+    xmlns='http://www.w3.org/2000/svg'
+    width={size}
+    height={size}
+    fill='none'
+    viewBox='0 0 24 24'
+    style={{
+      transform: direction === 'up' ? 'rotate(180deg)' : 'none',
+      ...props.style,
+    }}
+  >
+    <path
+      stroke='#1B1B1B'
+      strokeLinecap='round'
+      strokeLinejoin='round'
+      strokeWidth='1.5'
+      d='M5.25 9 12 15.75 18.75 9'
+    />
+  </svg>
+);
+
+export default ChevronIcon;

src/app/examples/page.tsx

@@ -0,0 +1,24 @@
+'use client';
+
+import { useState } from 'react';
+import Dropdown from '@components/Dropdown';
+import { ACTIVITY_CATEGORIES, ActivityCategory } from '@/constants/categories';
+
+export default function DropdownExample() {
+  const [category, setCategory] = useState<ActivityCategory | ''>('');
+
+  return (
+    <div className='min-h-screen p-40'>
+      <h1 className='text-24 mb-40 font-bold'>Dropdown 테스트</h1>
+
+      {/* 카테고리 드롭다운 UI 확인 */}
+      <Dropdown
+        className='h-56 w-800'
+        options={ACTIVITY_CATEGORIES}
+        value={category}
+        onChange={setCategory}
+        placeholder='카테고리'
+      />
+    </div>
+  );
+}

src/app/page.tsx

@@ -1 +1,89 @@
-export default function Home() {}
+'use client';
+
+import BellIcon from '@assets/svg/bell';
+import CheckIcon from '@assets/svg/check';
+import ChevronIcon from '@assets/svg/chevron';
+import CloseEyeIcon from '@assets/svg/close-eye';
+import CloseIcon from '@assets/svg/close';
+import IconDropdown from '@assets/svg/dropdown';
+import IconFacebook from '@assets/svg/facebook';
+import IconInstagram from '@assets/svg/instagram';
+import LeftArrowIcon from '@assets/svg/left-arrow';
+import LocationIcon from '@assets/svg/location';
+import LogoIcon from '@assets/svg/logo';
+import OpenEyeIcon from '@assets/svg/open-eye';
+import RightArrowIcon from '@assets/svg/right-arrow';
+import IconTwitter from '@assets/svg/twitter';
+import IconYoutube from '@assets/svg/youtube';
+
+export default function Home() {
+  const icons = [
+    { name: 'BellIcon', component: <BellIcon size={32} /> },
+    { name: 'CheckIcon', component: <CheckIcon size={32} /> },
+    {
+      name: 'CheckIcon (no bg)',
+      component: <CheckIcon size={32} showBackground={false} />,
+    },
+    {
+      name: 'ChevronIcon (down)',
+      component: <ChevronIcon size={32} direction='down' />,
+    },
+    {
+      name: 'ChevronIcon (up)',
+      component: <ChevronIcon size={32} direction='up' />,
+    },
+    { name: 'CloseEyeIcon', component: <CloseEyeIcon size={32} /> },
+    { name: 'CloseIcon', component: <CloseIcon size={32} /> },
+    {
+      name: 'DropdownIcon',
+      component: <IconDropdown size={32} color='#1B1B1B' />,
+    },
+    {
+      name: 'FacebookIcon',
+      component: <IconFacebook size={32} color='#1B1B1B' />,
+    },
+    {
+      name: 'InstagramIcon',
+      component: <IconInstagram size={32} color='#1B1B1B' />,
+    },
+    { name: 'LeftArrowIcon', component: <LeftArrowIcon size={32} /> },
+    { name: 'LocationIcon', component: <LocationIcon size={32} /> },
+    { name: 'LogoIcon', component: <LogoIcon size={80} /> },
+    { name: 'OpenEyeIcon', component: <OpenEyeIcon size={32} /> },
+    { name: 'RightArrowIcon', component: <RightArrowIcon size={32} /> },
+    {
+      name: 'TwitterIcon',
+      component: <IconTwitter size={32} color='#1B1B1B' />,
+    },
+    {
+      name: 'YoutubeIcon',
+      component: <IconYoutube size={32} color='#1B1B1B' />,
+    },
+  ];
+
+  return (
+    <div className='min-h-screen bg-gray-100 p-40'>
+      <div className='mx-auto max-w-1200'>
+        <h1 className='text-32 mb-40 text-center font-bold'>
+          GlobalNomad 아이콘 샘플
+        </h1>
+
+        <div className='grid grid-cols-2 gap-24 md:grid-cols-3 lg:grid-cols-4'>
+          {icons.map(({ name, component }, index) => (
+            <div
+              key={index}
+              className='rounded-8 flex min-h-120 flex-col items-center justify-center border border-gray-300 bg-white p-16'
+            >
+              <div className='mb-12 flex items-center justify-center'>
+                {component}
+              </div>
+              <p className='text-14 text-center font-medium break-all text-gray-700'>
+                {name}
+              </p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}