Skip to content

Commit 769a436

Browse files
LeeCh0129LeeCh0129
authored
Merge pull request #60 from codeit-2team/feature/23
Feature/23 공통 Dropdown 컴포넌트 구현
2 parents 635f3e5 + f08e2a6 commit 769a436

File tree

7 files changed

+437
-19
lines changed

7 files changed

+437
-19
lines changed

‎public/assets/svg/check.tsx‎

Lines changed: 53 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,57 @@
11
import React from 'react';
22

3-
const CheckIcon = ({ size = 24, ...props }) => (
4-
<svg
5-
xmlns='http://www.w3.org/2000/svg'
6-
width={size}
7-
height={size}
8-
fill='none'
9-
viewBox='0 0 24 24'
10-
>
11-
<circle cx='12' cy='12' r='12' fill='#121'></circle>
12-
<path
13-
stroke='#fff'
14-
strokeLinecap='round'
15-
strokeLinejoin='round'
16-
strokeWidth='1.5'
17-
d='m7.607 12.35 3.08 3.15 5.563-7.143'
18-
/>
19-
</svg>
20-
);
3+
interface CheckIconProps {
4+
size?: number;
5+
showBackground?: boolean;
6+
[key: string]: any;
7+
}
8+
9+
const CheckIcon = ({
10+
size = 24,
11+
showBackground = true,
12+
...props
13+
}: CheckIconProps) => {
14+
// 배경 없이 체크만 표시하는 경우
15+
if (!showBackground) {
16+
return (
17+
<svg
18+
xmlns='http://www.w3.org/2000/svg'
19+
width={size}
20+
height={size}
21+
fill='none'
22+
viewBox='0 0 24 24'
23+
{...props}
24+
>
25+
<path
26+
stroke='currentColor'
27+
strokeLinecap='round'
28+
strokeLinejoin='round'
29+
strokeWidth='1.5'
30+
d='m7.607 12.35 3.08 3.15 5.563-7.143'
31+
/>
32+
</svg>
33+
);
34+
}
35+
36+
return (
37+
<svg
38+
xmlns='http://www.w3.org/2000/svg'
39+
width={size}
40+
height={size}
41+
fill='none'
42+
viewBox='0 0 24 24'
43+
{...props}
44+
>
45+
<circle cx='12' cy='12' r='12' fill='#121'></circle>
46+
<path
47+
stroke='#fff'
48+
strokeLinecap='round'
49+
strokeLinejoin='round'
50+
strokeWidth='1.5'
51+
d='m7.607 12.35 3.08 3.15 5.563-7.143'
52+
/>
53+
</svg>
54+
);
55+
};
2156

2257
export default CheckIcon;

‎public/assets/svg/chevron.tsx‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import React from 'react';
2+
3+
const ChevronIcon = ({ size = 24, direction = 'down', ...props }) => (
4+
<svg
5+
xmlns='http://www.w3.org/2000/svg'
6+
width={size}
7+
height={size}
8+
fill='none'
9+
viewBox='0 0 24 24'
10+
style={{
11+
transform: direction === 'up' ? 'rotate(180deg)' : 'none',
12+
...props.style,
13+
}}
14+
>
15+
<path
16+
stroke='#1B1B1B'
17+
strokeLinecap='round'
18+
strokeLinejoin='round'
19+
strokeWidth='1.5'
20+
d='M5.25 9 12 15.75 18.75 9'
21+
/>
22+
</svg>
23+
);
24+
25+
export default ChevronIcon;

‎src/app/examples/page.tsx‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
'use client';
2+
3+
import { useState } from 'react';
4+
import Dropdown from '@components/Dropdown';
5+
import { ACTIVITY_CATEGORIES, ActivityCategory } from '@/constants/categories';
6+
7+
export default function DropdownExample() {
8+
const [category, setCategory] = useState<ActivityCategory | ''>('');
9+
10+
return (
11+
<div className='min-h-screen p-40'>
12+
<h1 className='text-24 mb-40 font-bold'>Dropdown 테스트</h1>
13+
14+
{/* 카테고리 드롭다운 UI 확인 */}
15+
<Dropdown
16+
className='h-56 w-800'
17+
options={ACTIVITY_CATEGORIES}
18+
value={category}
19+
onChange={setCategory}
20+
placeholder='카테고리'
21+
/>
22+
</div>
23+
);
24+
}

‎src/app/page.tsx‎

Lines changed: 89 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,89 @@
1-
export default function Home() {}
1+
'use client';
2+
3+
import BellIcon from '@assets/svg/bell';
4+
import CheckIcon from '@assets/svg/check';
5+
import ChevronIcon from '@assets/svg/chevron';
6+
import CloseEyeIcon from '@assets/svg/close-eye';
7+
import CloseIcon from '@assets/svg/close';
8+
import IconDropdown from '@assets/svg/dropdown';
9+
import IconFacebook from '@assets/svg/facebook';
10+
import IconInstagram from '@assets/svg/instagram';
11+
import LeftArrowIcon from '@assets/svg/left-arrow';
12+
import LocationIcon from '@assets/svg/location';
13+
import LogoIcon from '@assets/svg/logo';
14+
import OpenEyeIcon from '@assets/svg/open-eye';
15+
import RightArrowIcon from '@assets/svg/right-arrow';
16+
import IconTwitter from '@assets/svg/twitter';
17+
import IconYoutube from '@assets/svg/youtube';
18+
19+
export default function Home() {
20+
const icons = [
21+
{ name: 'BellIcon', component: <BellIcon size={32} /> },
22+
{ name: 'CheckIcon', component: <CheckIcon size={32} /> },
23+
{
24+
name: 'CheckIcon (no bg)',
25+
component: <CheckIcon size={32} showBackground={false} />,
26+
},
27+
{
28+
name: 'ChevronIcon (down)',
29+
component: <ChevronIcon size={32} direction='down' />,
30+
},
31+
{
32+
name: 'ChevronIcon (up)',
33+
component: <ChevronIcon size={32} direction='up' />,
34+
},
35+
{ name: 'CloseEyeIcon', component: <CloseEyeIcon size={32} /> },
36+
{ name: 'CloseIcon', component: <CloseIcon size={32} /> },
37+
{
38+
name: 'DropdownIcon',
39+
component: <IconDropdown size={32} color='#1B1B1B' />,
40+
},
41+
{
42+
name: 'FacebookIcon',
43+
component: <IconFacebook size={32} color='#1B1B1B' />,
44+
},
45+
{
46+
name: 'InstagramIcon',
47+
component: <IconInstagram size={32} color='#1B1B1B' />,
48+
},
49+
{ name: 'LeftArrowIcon', component: <LeftArrowIcon size={32} /> },
50+
{ name: 'LocationIcon', component: <LocationIcon size={32} /> },
51+
{ name: 'LogoIcon', component: <LogoIcon size={80} /> },
52+
{ name: 'OpenEyeIcon', component: <OpenEyeIcon size={32} /> },
53+
{ name: 'RightArrowIcon', component: <RightArrowIcon size={32} /> },
54+
{
55+
name: 'TwitterIcon',
56+
component: <IconTwitter size={32} color='#1B1B1B' />,
57+
},
58+
{
59+
name: 'YoutubeIcon',
60+
component: <IconYoutube size={32} color='#1B1B1B' />,
61+
},
62+
];
63+
64+
return (
65+
<div className='min-h-screen bg-gray-100 p-40'>
66+
<div className='mx-auto max-w-1200'>
67+
<h1 className='text-32 mb-40 text-center font-bold'>
68+
GlobalNomad 아이콘 샘플
69+
</h1>
70+
71+
<div className='grid grid-cols-2 gap-24 md:grid-cols-3 lg:grid-cols-4'>
72+
{icons.map(({ name, component }, index) => (
73+
<div
74+
key={index}
75+
className='rounded-8 flex min-h-120 flex-col items-center justify-center border border-gray-300 bg-white p-16'
76+
>
77+
<div className='mb-12 flex items-center justify-center'>
78+
{component}
79+
</div>
80+
<p className='text-14 text-center font-medium break-all text-gray-700'>
81+
{name}
82+
</p>
83+
</div>
84+
))}
85+
</div>
86+
</div>
87+
</div>
88+
);
89+
}

0 commit comments

Comments
 (0)