Skip to content

Commit 9467f9c

Browse files
jaeml06jaeml06
authored
Merge pull request #18 from YAPP-Github/feat/#17
[FEAT] 공통 아이콘 컴포넌트 구현
2 parents 8c83b06 + a79b0c3 commit 9467f9c

25 files changed

+813
-7
lines changed

‎.storybook/preview.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import '../src/app/globals.css';
2+
13
import type { Preview } from '@storybook/nextjs-vite';
24

35
const preview: Preview = {

‎postcss.config.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
/* eslint-disable @typescript-eslint/no-require-imports */
2+
module.exports = {
3+
plugins: [require('@tailwindcss/postcss')],
4+
};

‎postcss.config.mjs‎

Lines changed: 0 additions & 7 deletions
This file was deleted.

‎src/shared/assets/icons/ArrowDown.tsx‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import type { HTMLAttributes } from 'react';
2+
3+
export default function ArrowDown(props: HTMLAttributes<HTMLDivElement>) {
4+
return (
5+
<div className='relative h-full w-full' data-name='arrow_down' {...props}>
6+
<div className='absolute top-[37.5%] right-1/4 bottom-[37.5%] left-1/4 flex items-center justify-center'>
7+
<div className='h-[10px] w-[5px] flex-none rotate-[90deg]'>
8+
<div className='relative size-full'>
9+
<div
10+
className='absolute inset-[-7.5%_-15%]'
11+
style={{ '--stroke-0': 'currentColor' } as React.CSSProperties}
12+
>
13+
<svg
14+
preserveAspectRatio='none'
15+
width='100%'
16+
height='100%'
17+
viewBox='0 0 6.5 11.5'
18+
fill='none'
19+
xmlns='http://www.w3.org/2000/svg'
20+
className='block size-full max-w-none'
21+
>
22+
<path
23+
id='Vector 9'
24+
d='M5.75 0.75L0.75 5.75L5.75 10.75'
25+
stroke='var(--stroke-0, #333D4B)'
26+
strokeWidth='1.5'
27+
strokeLinecap='round'
28+
strokeLinejoin='round'
29+
/>
30+
</svg>
31+
</div>
32+
</div>
33+
</div>
34+
</div>
35+
</div>
36+
);
37+
}

‎src/shared/assets/icons/ArrowNext.tsx‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import type { HTMLAttributes } from 'react';
2+
3+
export default function ArrowNext(props: HTMLAttributes<HTMLDivElement>) {
4+
return (
5+
<div className='relative h-full w-full' data-name='arrow_next' {...props}>
6+
<div className='absolute top-1/4 right-[33.42%] bottom-1/4 left-[41.58%] flex items-center justify-center'>
7+
<div className='h-[10px] w-[5px] flex-none rotate-[180deg]'>
8+
<div className='relative size-full'>
9+
<div
10+
className='absolute inset-[-7.5%_-15%]'
11+
style={{ '--stroke-0': 'currentColor' } as React.CSSProperties}
12+
>
13+
<svg
14+
preserveAspectRatio='none'
15+
width='100%'
16+
height='100%'
17+
viewBox='0 0 6.5 11.5'
18+
fill='none'
19+
xmlns='http://www.w3.org/2000/svg'
20+
className='block size-full max-w-none'
21+
>
22+
<path
23+
id='Vector 9'
24+
d='M5.75 0.75L0.75 5.75L5.75 10.75'
25+
stroke='var(--stroke-0, #333D4B)'
26+
strokeWidth='1.5'
27+
strokeLinecap='round'
28+
strokeLinejoin='round'
29+
/>
30+
</svg>
31+
</div>
32+
</div>
33+
</div>
34+
</div>
35+
</div>
36+
);
37+
}

‎src/shared/assets/icons/ArrowPrev.tsx‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import type { HTMLAttributes } from 'react';
2+
3+
export default function ArrowPrev(props: HTMLAttributes<HTMLDivElement>) {
4+
return (
5+
<div className='relative h-full w-full' data-name='arrow_prev' {...props}>
6+
<div className='absolute top-1/4 right-[33.42%] bottom-1/4 left-[41.58%] flex items-center justify-center'>
7+
<div className='h-[10px] w-[5px] flex-none'>
8+
<div className='relative size-full'>
9+
<div
10+
className='absolute inset-[-7.5%_-15%]'
11+
style={{ '--stroke-0': 'currentColor' } as React.CSSProperties}
12+
>
13+
<svg
14+
preserveAspectRatio='none'
15+
width='100%'
16+
height='100%'
17+
viewBox='0 0 6.5 11.5'
18+
fill='none'
19+
xmlns='http://www.w3.org/2000/svg'
20+
className='block size-full max-w-none'
21+
>
22+
<path
23+
id='Vector 9'
24+
d='M5.75 0.75L0.75 5.75L5.75 10.75'
25+
stroke='var(--stroke-0, #333D4B)'
26+
strokeWidth='1.5'
27+
strokeLinecap='round'
28+
strokeLinejoin='round'
29+
/>
30+
</svg>
31+
</div>
32+
</div>
33+
</div>
34+
</div>
35+
</div>
36+
);
37+
}

‎src/shared/assets/icons/ArrowUp.tsx‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import type { HTMLAttributes } from 'react';
2+
3+
export default function ArrowUp(props: HTMLAttributes<HTMLDivElement>) {
4+
return (
5+
<div className='relative h-full w-full' data-name='arrow_up' {...props}>
6+
<div className='absolute top-[37.5%] right-1/4 bottom-[37.5%] left-1/4 flex items-center justify-center'>
7+
<div className='h-[10px] w-[5px] flex-none scale-y-[-100%] rotate-[270deg]'>
8+
<div className='relative size-full'>
9+
<div
10+
className='absolute inset-[-7.5%_-15%]'
11+
style={{ '--stroke-0': 'currentColor' } as React.CSSProperties}
12+
>
13+
<svg
14+
preserveAspectRatio='none'
15+
width='100%'
16+
height='100%'
17+
viewBox='0 0 6.5 11.5'
18+
fill='none'
19+
xmlns='http://www.w3.org/2000/svg'
20+
className='block size-full max-w-none'
21+
>
22+
<path
23+
id='Vector 9'
24+
d='M5.75 0.75L0.75 5.75L5.75 10.75'
25+
stroke='var(--stroke-0, #333D4B)'
26+
strokeWidth='1.5'
27+
strokeLinecap='round'
28+
strokeLinejoin='round'
29+
/>
30+
</svg>
31+
</div>
32+
</div>
33+
</div>
34+
</div>
35+
</div>
36+
);
37+
}

‎src/shared/assets/icons/IcCircleCheckFilled.tsx‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import type { HTMLAttributes } from 'react';
2+
3+
export default function IcCircleCheckFilled(
4+
props: HTMLAttributes<HTMLDivElement>,
5+
) {
6+
return (
7+
<div
8+
className='relative h-full w-full'
9+
data-name='ic_circle_check_filled'
10+
{...props}
11+
>
12+
<div className='absolute inset-[8.33%]'>
13+
<svg
14+
preserveAspectRatio='none'
15+
width='100%'
16+
height='100%'
17+
viewBox='0 0 20 20'
18+
fill='none'
19+
xmlns='http://www.w3.org/2000/svg'
20+
className='block size-full max-w-none'
21+
>
22+
<g id='Group 1'>
23+
<path
24+
id='Exclude'
25+
d='M10 0.811523C14.9363 0.811524 18.9375 4.81369 18.9375 9.75C18.9375 14.6863 14.9363 18.6875 10 18.6875C5.06371 18.6875 1.06156 14.6863 1.06152 9.75C1.06152 4.81369 5.06369 0.811523 10 0.811523ZM13.7295 7.66406C13.4366 7.37139 12.9608 7.3713 12.668 7.66406L8.91406 11.4209L7.20801 9.50195C6.93289 9.19248 6.459 9.16452 6.14941 9.43945C5.83984 9.71464 5.81175 10.1885 6.08691 10.498L8.32227 13.0127C8.45943 13.1669 8.65405 13.2575 8.86035 13.2637C9.06679 13.2696 9.26711 13.1901 9.41309 13.0439L13.7295 8.72461C14.0219 8.43169 14.0221 7.95678 13.7295 7.66406Z'
26+
fill='currentColor'
27+
/>
28+
<path
29+
id='Vector'
30+
d='M10 0C8.02219 0 6.08879 0.58649 4.4443 1.6853C2.79981 2.78412 1.51809 4.3459 0.761209 6.17316C0.00433286 8.00043 -0.1937 10.0111 0.192152 11.9509C0.578004 13.8907 1.53041 15.6725 2.92894 17.0711C4.32746 18.4696 6.10929 19.422 8.0491 19.8078C9.98891 20.1937 11.9996 19.9957 13.8268 19.2388C15.6541 18.4819 17.2159 17.2002 18.3147 15.5557C19.4135 13.9112 20 11.9778 20 10C19.9971 7.34871 18.9426 4.80684 17.0679 2.9321C15.1932 1.05736 12.6513 0.00286757 10 0V0ZM10 18.3333C8.35183 18.3333 6.74066 17.8446 5.37025 16.9289C3.99984 16.0132 2.93174 14.7117 2.30101 13.189C1.67028 11.6663 1.50525 9.99075 1.82679 8.37425C2.14834 6.75774 2.94201 5.27288 4.10745 4.10744C5.27288 2.94201 6.75774 2.14833 8.37425 1.82679C9.99076 1.50525 11.6663 1.67027 13.189 2.301C14.7117 2.93173 16.0132 3.99984 16.9289 5.37025C17.8446 6.74066 18.3333 8.35182 18.3333 10C18.3309 12.2094 17.4522 14.3276 15.8899 15.8899C14.3276 17.4522 12.2094 18.3309 10 18.3333V18.3333Z'
31+
fill='currentColor'
32+
/>
33+
</g>
34+
</svg>
35+
</div>
36+
</div>
37+
);
38+
}

‎src/shared/assets/icons/IcCircleCheckOutline.tsx‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import type { HTMLAttributes } from 'react';
2+
3+
export default function IcCircleCheckOutline(
4+
props: HTMLAttributes<HTMLDivElement>,
5+
) {
6+
return (
7+
<div
8+
className='relative h-full w-full'
9+
data-name='ic_circle_check_outline'
10+
{...props}
11+
>
12+
<div className='absolute inset-[8.33%]'>
13+
<svg
14+
preserveAspectRatio='none'
15+
width='100%'
16+
height='100%'
17+
viewBox='0 0 20 20'
18+
fill='none'
19+
xmlns='http://www.w3.org/2000/svg'
20+
className='block size-full max-w-none'
21+
>
22+
<g id='Group 1'>
23+
<path
24+
id='Vector 11'
25+
d='M6.64722 10L8.88241 12.5146L13.1987 8.19459'
26+
stroke='currentColor'
27+
strokeWidth='1.5'
28+
strokeLinecap='round'
29+
strokeLinejoin='round'
30+
/>
31+
<path
32+
id='Vector'
33+
d='M10 0C8.02219 0 6.08879 0.58649 4.4443 1.6853C2.79981 2.78412 1.51809 4.3459 0.761209 6.17316C0.00433286 8.00043 -0.1937 10.0111 0.192152 11.9509C0.578004 13.8907 1.53041 15.6725 2.92894 17.0711C4.32746 18.4696 6.10929 19.422 8.0491 19.8078C9.98891 20.1937 11.9996 19.9957 13.8268 19.2388C15.6541 18.4819 17.2159 17.2002 18.3147 15.5557C19.4135 13.9112 20 11.9778 20 10C19.9971 7.34871 18.9426 4.80684 17.0679 2.9321C15.1932 1.05736 12.6513 0.00286757 10 0V0ZM10 18.3333C8.35183 18.3333 6.74066 17.8446 5.37025 16.9289C3.99984 16.0132 2.93174 14.7117 2.30101 13.189C1.67028 11.6663 1.50525 9.99075 1.82679 8.37425C2.14834 6.75774 2.94201 5.27288 4.10745 4.10744C5.27288 2.94201 6.75774 2.14833 8.37425 1.82679C9.99076 1.50525 11.6663 1.67027 13.189 2.301C14.7117 2.93173 16.0132 3.99984 16.9289 5.37025C17.8446 6.74066 18.3333 8.35182 18.3333 10C18.3309 12.2094 17.4522 14.3276 15.8899 15.8899C14.3276 17.4522 12.2094 18.3309 10 18.3333V18.3333Z'
34+
fill='currentColor'
35+
/>
36+
</g>
37+
</svg>
38+
</div>
39+
</div>
40+
);
41+
}

‎src/shared/assets/icons/IcCircleXFilled.tsx‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import type { HTMLAttributes } from 'react';
2+
3+
export default function IcCircleXFilled(props: HTMLAttributes<HTMLDivElement>) {
4+
return (
5+
<div
6+
className='relative h-full w-full'
7+
data-name='ic_circle_x_filled'
8+
{...props}
9+
>
10+
<div className='absolute inset-[8.33%]'>
11+
<svg
12+
preserveAspectRatio='none'
13+
width='100%'
14+
height='100%'
15+
viewBox='0 0 20 20'
16+
fill='none'
17+
xmlns='http://www.w3.org/2000/svg'
18+
className='block size-full max-w-none'
19+
>
20+
<g id='Group 1'>
21+
<path
22+
id='Vector'
23+
d='M13.3333 6.66679C13.177 6.51056 12.9651 6.4228 12.7441 6.4228C12.5231 6.4228 12.3112 6.51056 12.1549 6.66679L9.99995 8.82179L7.84496 6.66679C7.68779 6.51499 7.47729 6.43099 7.25879 6.43289C7.04029 6.43479 6.83128 6.52243 6.67678 6.67694C6.52227 6.83144 6.43463 7.04045 6.43273 7.25895C6.43083 7.47745 6.51483 7.68795 6.66662 7.84512L8.82162 10.0001L6.66662 12.1551C6.51483 12.3123 6.43083 12.5228 6.43273 12.7413C6.43463 12.9598 6.52227 13.1688 6.67678 13.3233C6.83128 13.4778 7.04029 13.5654 7.25879 13.5673C7.47729 13.5692 7.68779 13.4852 7.84496 13.3335L9.99995 11.1785L12.1549 13.3335C12.3121 13.4852 12.5226 13.5692 12.7411 13.5673C12.9596 13.5654 13.1686 13.4778 13.3231 13.3233C13.4776 13.1688 13.5653 12.9598 13.5672 12.7413C13.5691 12.5228 13.4851 12.3123 13.3333 12.1551L11.1783 10.0001L13.3333 7.84512C13.4895 7.68885 13.5773 7.47692 13.5773 7.25595C13.5773 7.03498 13.4895 6.82306 13.3333 6.66679Z'
24+
fill='currentColor'
25+
/>
26+
<path
27+
id='Vector_2'
28+
d='M10 0C8.02219 0 6.08879 0.58649 4.4443 1.6853C2.79981 2.78412 1.51809 4.3459 0.761209 6.17316C0.00433286 8.00043 -0.1937 10.0111 0.192152 11.9509C0.578004 13.8907 1.53041 15.6725 2.92894 17.0711C4.32746 18.4696 6.10929 19.422 8.0491 19.8078C9.98891 20.1937 11.9996 19.9957 13.8268 19.2388C15.6541 18.4819 17.2159 17.2002 18.3147 15.5557C19.4135 13.9112 20 11.9778 20 10C19.9971 7.34871 18.9426 4.80684 17.0679 2.9321C15.1932 1.05736 12.6513 0.00286757 10 0V0ZM10 18.3333C8.35183 18.3333 6.74066 17.8446 5.37025 16.9289C3.99984 16.0132 2.93174 14.7117 2.30101 13.189C1.67028 11.6663 1.50525 9.99075 1.82679 8.37425C2.14834 6.75774 2.94201 5.27288 4.10745 4.10744C5.27288 2.94201 6.75774 2.14833 8.37425 1.82679C9.99076 1.50525 11.6663 1.67027 13.189 2.301C14.7117 2.93173 16.0132 3.99984 16.9289 5.37025C17.8446 6.74066 18.3333 8.35182 18.3333 10C18.3309 12.2094 17.4522 14.3276 15.8899 15.8899C14.3276 17.4522 12.2094 18.3309 10 18.3333V18.3333Z'
29+
fill='currentColor'
30+
/>
31+
</g>
32+
</svg>
33+
</div>
34+
</div>
35+
);
36+
}

0 commit comments

Comments
 (0)