Skip to content

Commit 7b98e0b

Browse files
yejinleeeyejinleee
authored
Merge pull request #30 from YAPP-Github/feat/#29
feat/#29 공통컴포넌트 수정
2 parents b4621c1 + 73db4bc commit 7b98e0b

12 files changed

Lines changed: 262 additions & 109 deletions

File tree

‎src/app/globals.css‎

Lines changed: 49 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@
6262
/* Semantic: Line */
6363
--color-line-clickable: #d1d6dc;
6464
--color-line-nonclickable: #e6e8eb;
65-
--color-line-selected: #2e6bfa;
65+
--color-line-selected: #333d4b;
6666

6767
/* Semantic: Dimmed */
6868
--color-dimmed-default: #00000080;
@@ -282,7 +282,7 @@
282282
/* Input Component Styles */
283283
.input-label {
284284
/* text-title-8 */
285-
color: var(--color-text-secondary);
285+
color: var(--color-gray-600);
286286
}
287287

288288
/* Container for layout */
@@ -323,8 +323,8 @@
323323
}
324324

325325
.input-field:focus {
326-
border-color: var(--color-primary-default);
327-
box-shadow: 0 0 0 1px var(--color-primary-default);
326+
border-color: var(--color-line-selected);
327+
box-shadow: 0 0 0 1px var(--color-line-selected);
328328
}
329329

330330
.input-field:disabled {
@@ -410,4 +410,49 @@
410410
white-space: nowrap;
411411
margin-left: auto; /* Align to right */
412412
}
413+
414+
/* Button Component Styles */
415+
.button-base {
416+
/* Layout */
417+
display: flex;
418+
align-items: center;
419+
justify-content: center;
420+
height: 56px;
421+
padding: 16px 20px;
422+
border-radius: 8px;
423+
border: none;
424+
outline: none;
425+
cursor: pointer;
426+
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
427+
428+
/* Background & Text */
429+
background-color: var(--color-primary-default);
430+
color: var(--color-text-inverse);
431+
432+
/* Typography: text-body-2 */
433+
font-family: var(--font-pretendard);
434+
font-weight: 500;
435+
font-size: 16px;
436+
line-height: 24px;
437+
letter-spacing: -0.02em;
438+
}
439+
440+
.button-base:hover:not(:disabled) {
441+
background-color: var(--color-primary-subtle);
442+
}
443+
444+
.button-base:active:not(:disabled) {
445+
transform: scale(0.98);
446+
}
447+
448+
.button-base:disabled {
449+
background-color: var(--color-primary-subtler);
450+
color: var(--color-text-inverse);
451+
cursor: not-allowed;
452+
opacity: 0.6;
453+
}
454+
455+
.button-base.button-full-width {
456+
width: 100%;
457+
}
413458
}

‎src/app/layout.tsx‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -18,11 +18,11 @@ export const metadata: Metadata = {
1818
description: 'Generated by create next app',
1919
};
2020

21-
const RootLayout = ({
21+
export default function RootLayout({
2222
children,
2323
}: Readonly<{
2424
children: React.ReactNode;
25-
}>) => {
25+
}>) {
2626
return (
2727
<html lang='ko'>
2828
<body
@@ -34,6 +34,4 @@ const RootLayout = ({
3434
</body>
3535
</html>
3636
);
37-
};
38-
39-
export default RootLayout;
37+
}

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

Lines changed: 19 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -7,30 +7,25 @@ export default function IcCircleXFilled(props: HTMLAttributes<HTMLDivElement>) {
77
data-name='ic_circle_x_filled'
88
{...props}
99
>
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>
10+
<svg
11+
width='100%'
12+
height='100%'
13+
viewBox='0 0 24 24'
14+
fill='none'
15+
xmlns='http://www.w3.org/2000/svg'
16+
className='block size-full'
17+
>
18+
<path
19+
fillRule='evenodd'
20+
clipRule='evenodd'
21+
d='M11.9995 3.06201C16.9357 3.06201 20.9377 7.06342 20.938 11.9995C20.938 16.9358 16.9358 20.938 11.9995 20.938C7.06342 20.9377 3.06201 16.9357 3.06201 11.9995C3.06227 7.06358 7.06358 3.06227 11.9995 3.06201ZM14.7437 8.42236C14.5229 8.42249 14.3109 8.51042 14.1548 8.6665L11.9995 10.8218L9.84521 8.6665C9.68816 8.51482 9.4776 8.43134 9.25928 8.43311C9.04082 8.43501 8.83175 8.52279 8.67725 8.67725C8.52274 8.83175 8.435 9.04078 8.43311 9.25928C8.4313 9.47765 8.51479 9.68813 8.6665 9.84521L10.8218 12.0005L8.6665 14.1548C8.51471 14.312 8.43121 14.5232 8.43311 14.7417C8.43512 14.96 8.52284 15.1693 8.67725 15.3237C8.83171 15.478 9.041 15.565 9.25928 15.5669C9.4776 15.5687 9.68816 15.4852 9.84521 15.3335L11.9995 13.1782L14.1548 15.3335C14.3119 15.4852 14.5224 15.5687 14.7407 15.5669C14.959 15.565 15.1683 15.478 15.3228 15.3237C15.4772 15.1693 15.5649 14.96 15.5669 14.7417C15.5688 14.5232 15.4853 14.312 15.3335 14.1548L13.1782 12.0005L15.3335 9.84521C15.4896 9.68904 15.5775 9.47715 15.5776 9.25635C15.5776 9.03538 15.4897 8.82278 15.3335 8.6665C15.1772 8.51029 14.9646 8.42236 14.7437 8.42236Z'
22+
fill='currentColor'
23+
/>
24+
<path
25+
d='M12 2C10.0222 2 8.08879 2.58649 6.4443 3.6853C4.79981 4.78412 3.51809 6.3459 2.76121 8.17316C2.00433 10.0004 1.8063 12.0111 2.19215 13.9509C2.578 15.8907 3.53041 17.6725 4.92894 19.0711C6.32746 20.4696 8.10929 21.422 10.0491 21.8078C11.9889 22.1937 13.9996 21.9957 15.8268 21.2388C17.6541 20.4819 19.2159 19.2002 20.3147 17.5557C21.4135 15.9112 22 13.9778 22 12C21.9971 9.34871 20.9426 6.80684 19.0679 4.9321C17.1932 3.05736 14.6513 2.00287 12 2ZM12 20.3333C10.3518 20.3333 8.74066 19.8446 7.37025 18.9289C5.99984 18.0132 4.93174 16.7117 4.30101 15.189C3.67028 13.6663 3.50525 11.9908 3.82679 10.3742C4.14834 8.75774 4.94201 7.27288 6.10745 6.10744C7.27288 4.94201 8.75774 4.14833 10.3743 3.82679C11.9908 3.50525 13.6663 3.67027 15.189 4.301C16.7117 4.93173 18.0132 5.99984 18.9289 7.37025C19.8446 8.74066 20.3333 10.3518 20.3333 12C20.3309 14.2094 19.4522 16.3276 17.8899 17.8899C16.3276 19.4522 14.2094 20.3309 12 20.3333Z'
26+
fill='currentColor'
27+
/>
28+
</svg>
3429
</div>
3530
);
3631
}

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

Lines changed: 17 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -9,26 +9,23 @@ export default function IcCircleXOutline(
99
data-name='ic_circle_x_outline'
1010
{...props}
1111
>
12-
<div className='absolute inset-[8.33%]'>
13-
<svg
14-
preserveAspectRatio='none'
15-
width='100%'
16-
height='100%'
17-
viewBox='0 0 16.5 17.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'
24-
d='M5.81667 7.59443L10.6833 4.57221M5.81667 9.90555L10.6833 12.9278M0.75 8.75C0.75 9.45724 1.03095 10.1355 1.53105 10.6356C2.03115 11.1357 2.70942 11.4167 3.41667 11.4167C4.12391 11.4167 4.80219 11.1357 5.30229 10.6356C5.80238 10.1355 6.08333 9.45724 6.08333 8.75C6.08333 8.04276 5.80238 7.36448 5.30229 6.86438C4.80219 6.36428 4.12391 6.08333 3.41667 6.08333C2.70942 6.08333 2.03115 6.36428 1.53105 6.86438C1.03095 7.36448 0.75 8.04276 0.75 8.75ZM10.4167 3.41667C10.4167 4.12391 10.6976 4.80219 11.1977 5.30229C11.6978 5.80238 12.3761 6.08333 13.0833 6.08333C13.7906 6.08333 14.4689 5.80238 14.969 5.30229C15.469 4.80219 15.75 4.12391 15.75 3.41667C15.75 2.70942 15.469 2.03115 14.969 1.53105C14.4689 1.03095 13.7906 0.75 13.0833 0.75C12.3761 0.75 11.6978 1.03095 11.1977 1.53105C10.6976 2.03115 10.4167 2.70942 10.4167 3.41667ZM10.4167 14.0833C10.4167 14.7906 10.6976 15.4689 11.1977 15.969C11.6978 16.469 12.3761 16.75 13.0833 16.75C13.7906 16.75 14.4689 16.469 14.969 15.969C15.469 15.4689 15.75 14.7906 15.75 14.0833C15.75 13.3761 15.469 12.6978 14.969 12.1977C14.4689 11.6976 13.7906 11.4167 13.0833 11.4167C12.3761 11.4167 11.6978 11.6976 11.1977 12.1977C10.6976 12.6978 10.4167 13.3761 10.4167 14.0833Z'
25-
stroke='var(--stroke-0, #4E5968)'
26-
strokeWidth='1.5'
27-
strokeLinecap='round'
28-
strokeLinejoin='round'
29-
/>
30-
</svg>
31-
</div>
12+
<svg
13+
width='100%'
14+
height='100%'
15+
viewBox='0 0 24 24'
16+
fill='none'
17+
xmlns='http://www.w3.org/2000/svg'
18+
className='block size-full'
19+
>
20+
<path
21+
d='M15.3333 8.66678C15.177 8.51055 14.9651 8.42279 14.7442 8.42279C14.5232 8.42279 14.3113 8.51055 14.155 8.66678L12 10.8218L9.845 8.66678C9.68783 8.51498 9.47733 8.43099 9.25883 8.43288C9.04033 8.43478 8.83132 8.52242 8.67682 8.67693C8.52231 8.83144 8.43467 9.04045 8.43277 9.25894C8.43087 9.47744 8.51487 9.68794 8.66667 9.84511L10.8217 12.0001L8.66667 14.1551C8.51487 14.3123 8.43087 14.5228 8.43277 14.7413C8.43467 14.9598 8.52231 15.1688 8.67682 15.3233C8.83132 15.4778 9.04033 15.5654 9.25883 15.5673C9.47733 15.5692 9.68783 15.4852 9.845 15.3334L12 13.1784L14.155 15.3334C14.3122 15.4852 14.5227 15.5692 14.7412 15.5673C14.9597 15.5654 15.1687 15.4778 15.3232 15.3233C15.4777 15.1688 15.5653 14.9598 15.5672 14.7413C15.5691 14.5228 15.4851 14.3123 15.3333 14.1551L13.1783 12.0001L15.3333 9.84511C15.4895 9.68884 15.5773 9.47692 15.5773 9.25595C15.5773 9.03498 15.4895 8.82305 15.3333 8.66678Z'
22+
fill='currentColor'
23+
/>
24+
<path
25+
d='M12 2C10.0222 2 8.08879 2.58649 6.4443 3.6853C4.79981 4.78412 3.51809 6.3459 2.76121 8.17316C2.00433 10.0004 1.8063 12.0111 2.19215 13.9509C2.578 15.8907 3.53041 17.6725 4.92894 19.0711C6.32746 20.4696 8.10929 21.422 10.0491 21.8078C11.9889 22.1937 13.9996 21.9957 15.8268 21.2388C17.6541 20.4819 19.2159 19.2002 20.3147 17.5557C21.4135 15.9112 22 13.9778 22 12C21.9971 9.34871 20.9426 6.80684 19.0679 4.9321C17.1932 3.05736 14.6513 2.00287 12 2V2ZM12 20.3333C10.3518 20.3333 8.74066 19.8446 7.37025 18.9289C5.99984 18.0132 4.93174 16.7117 4.30101 15.189C3.67028 13.6663 3.50525 11.9908 3.82679 10.3742C4.14834 8.75774 4.94201 7.27288 6.10745 6.10744C7.27288 4.94201 8.75774 4.14833 10.3743 3.82679C11.9908 3.50525 13.6663 3.67027 15.189 4.301C16.7117 4.93173 18.0132 5.99984 18.9289 7.37025C19.8446 8.74066 20.3333 10.3518 20.3333 12C20.3309 14.2094 19.4522 16.3276 17.8899 17.8899C16.3276 19.4522 14.2094 20.3309 12 20.3333Z'
26+
fill='currentColor'
27+
/>
28+
</svg>
3229
</div>
3330
);
3431
}

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

Lines changed: 16 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -7,31 +7,22 @@ export default function IcOtherShare(props: HTMLAttributes<HTMLDivElement>) {
77
data-name='ic_other_share'
88
{...props}
99
>
10-
<div className='absolute top-1/2 left-1/2 h-[16px] w-[15px] translate-x-[-50%] translate-y-[-50%]'>
11-
<div
12-
className='absolute inset-[-4.69%_-5%]'
13-
style={{ '--stroke-0': 'currentColor' } as React.CSSProperties}
14-
>
15-
<svg
16-
preserveAspectRatio='none'
17-
width='100%'
18-
height='100%'
19-
viewBox='0 0 16.5 16.5'
20-
fill='none'
21-
xmlns='http://www.w3.org/2000/svg'
22-
className='block size-full max-w-none'
23-
>
24-
<path
25-
id='Vector'
26-
d='M0.75 15.75V14.0833C0.75 13.1993 1.10119 12.3514 1.72631 11.7263C2.35143 11.1012 3.19928 10.75 4.08333 10.75H7.41667C8.30072 10.75 9.14857 11.1012 9.77369 11.7263C10.3988 12.3514 10.75 13.1993 10.75 14.0833V15.75M11.5833 0.858337C12.3003 1.04192 12.9359 1.45892 13.3897 2.0436C13.8435 2.62827 14.0899 3.34736 14.0899 4.0875C14.0899 4.82765 13.8435 5.54674 13.3897 6.13141C12.9359 6.71609 12.3003 7.13309 11.5833 7.31667M15.75 15.75V14.0834C15.7458 13.3477 15.4983 12.634 15.0461 12.0537C14.5939 11.4734 13.9624 11.0589 13.25 10.875M2.41667 4.08333C2.41667 4.96739 2.76786 5.81524 3.39298 6.44036C4.0181 7.06548 4.86594 7.41667 5.75 7.41667C6.63405 7.41667 7.4819 7.06548 8.10702 6.44036C8.73214 5.81524 9.08333 4.96739 9.08333 4.08333C9.08333 3.19928 8.73214 2.35143 8.10702 1.72631C7.4819 1.10119 6.63405 0.75 5.75 0.75C4.86594 0.75 4.0181 1.10119 3.39298 1.72631C2.76786 2.35143 2.41667 3.19928 2.41667 4.08333Z'
27-
stroke='var(--stroke-0, #4E5968)'
28-
strokeWidth='1.5'
29-
strokeLinecap='round'
30-
strokeLinejoin='round'
31-
/>
32-
</svg>
33-
</div>
34-
</div>
10+
<svg
11+
width='100%'
12+
height='100%'
13+
viewBox='0 0 24 24'
14+
fill='none'
15+
xmlns='http://www.w3.org/2000/svg'
16+
className='block size-full'
17+
>
18+
<path
19+
d='M9.56667 10.8444L14.4333 7.82221M9.56667 13.1555L14.4333 16.1778M4.5 12C4.5 12.7072 4.78095 13.3855 5.28105 13.8856C5.78115 14.3857 6.45942 14.6667 7.16667 14.6667C7.87391 14.6667 8.55219 14.3857 9.05229 13.8856C9.55238 13.3855 9.83333 12.7072 9.83333 12C9.83333 11.2928 9.55238 10.6145 9.05229 10.1144C8.55219 9.61428 7.87391 9.33333 7.16667 9.33333C6.45942 9.33333 5.78115 9.61428 5.28105 10.1144C4.78095 10.6145 4.5 11.2928 4.5 12ZM14.1667 6.66667C14.1667 7.37391 14.4476 8.05219 14.9477 8.55229C15.4478 9.05238 16.1261 9.33333 16.8333 9.33333C17.5406 9.33333 18.2189 9.05238 18.719 8.55229C19.219 8.05219 19.5 7.37391 19.5 6.66667C19.5 5.95942 19.219 5.28115 18.719 4.78105C18.2189 4.28095 17.5406 4 16.8333 4C16.1261 4 15.4478 4.28095 14.9477 4.78105C14.4476 5.28115 14.1667 5.95942 14.1667 6.66667ZM14.1667 17.3333C14.1667 18.0406 14.4476 18.7189 14.9477 19.219C15.4478 19.719 16.1261 20 16.8333 20C17.5406 20 18.2189 19.719 18.719 19.219C19.219 18.7189 19.5 18.0406 19.5 17.3333C19.5 16.6261 19.219 15.9478 18.719 15.4477C18.2189 14.9476 17.5406 14.6667 16.8333 14.6667C16.1261 14.6667 15.4478 14.9476 14.9477 15.4477C14.4476 15.9478 14.1667 16.6261 14.1667 17.3333Z'
20+
stroke='currentColor'
21+
strokeWidth='1.5'
22+
strokeLinecap='round'
23+
strokeLinejoin='round'
24+
/>
25+
</svg>
3526
</div>
3627
);
3728
}

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

Lines changed: 16 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -3,31 +3,22 @@ import type { HTMLAttributes } from 'react';
33
export default function IcPeople(props: HTMLAttributes<HTMLDivElement>) {
44
return (
55
<div className='relative h-full w-full' data-name='ic_people' {...props}>
6-
<div className='absolute inset-[16.67%_16.67%_20.83%_20.83%]'>
7-
<div
8-
className='absolute inset-[-5%]'
9-
style={{ '--stroke-0': 'currentColor' } as React.CSSProperties}
10-
>
11-
<svg
12-
preserveAspectRatio='none'
13-
width='100%'
14-
height='100%'
15-
viewBox='0 0 16.5 16.5'
16-
fill='none'
17-
xmlns='http://www.w3.org/2000/svg'
18-
className='block size-full max-w-none'
19-
>
20-
<path
21-
id='Vector'
22-
d='M0.75 15.75V14.0833C0.75 13.1993 1.10119 12.3514 1.72631 11.7263C2.35143 11.1012 3.19928 10.75 4.08333 10.75H7.41667C8.30072 10.75 9.14857 11.1012 9.77369 11.7263C10.3988 12.3514 10.75 13.1993 10.75 14.0833V15.75M11.5833 0.858337C12.3003 1.04192 12.9359 1.45892 13.3897 2.0436C13.8435 2.62827 14.0899 3.34736 14.0899 4.82765C14.0899 4.82765 13.8435 5.54674 13.3897 6.13141C12.9359 6.71609 12.3003 7.13309 11.5833 7.31667M15.75 15.75V14.0834C15.7458 13.3477 15.4983 12.634 15.0461 12.0537C14.5939 11.4734 13.9624 11.0589 13.25 10.875M2.41667 4.08333C2.41667 4.96739 2.76786 5.81524 3.39298 6.44036C4.0181 7.06548 4.86594 7.41667 5.75 7.41667C6.63405 7.41667 7.4819 7.06548 8.10702 6.44036C8.73214 5.81524 9.08333 4.96739 9.08333 4.08333C9.08333 3.19928 8.73214 2.35143 8.10702 1.72631C7.4819 1.10119 6.63405 0.75 5.75 0.75C4.86594 0.75 4.0181 1.10119 3.39298 1.72631C2.76786 2.35143 2.41667 3.19928 2.41667 4.08333Z'
23-
stroke='var(--stroke-0, #4E5968)'
24-
strokeWidth='1.5'
25-
strokeLinecap='round'
26-
strokeLinejoin='round'
27-
/>
28-
</svg>
29-
</div>
30-
</div>
6+
<svg
7+
width='100%'
8+
height='100%'
9+
viewBox='0 0 24 24'
10+
fill='none'
11+
xmlns='http://www.w3.org/2000/svg'
12+
className='block size-full'
13+
>
14+
<path
15+
d='M5 19V17.3333C5 16.4493 5.35119 15.6014 5.97631 14.9763C6.60143 14.3512 7.44928 14 8.33333 14H11.6667C12.5507 14 13.3986 14.3512 14.0237 14.9763C14.6488 15.6014 15 16.4493 15 17.3333V19M15.8333 4.10834C16.5503 4.29192 17.1859 4.70892 17.6397 5.2936C18.0935 5.87827 18.3399 6.59736 18.3399 7.3375C18.3399 8.07765 18.0935 8.79674 17.6397 9.38141C17.1859 9.96609 16.5503 10.3831 15.8333 10.5667M20 19V17.3334C19.9958 16.5977 19.7483 15.884 19.2961 15.3037C18.8439 14.7234 18.2124 14.3089 17.5 14.125M6.66667 7.33333C6.66667 8.21739 7.01786 9.06524 7.64298 9.69036C8.2681 10.3155 9.11594 10.6667 10 10.6667C10.8841 10.6667 11.7319 10.3155 12.357 9.69036C12.9821 9.06524 13.3333 8.21739 13.3333 7.33333C13.3333 6.44928 12.9821 5.60143 12.357 4.97631C11.7319 4.35119 10.8841 4 10 4C9.11594 4 8.2681 4.35119 7.64298 4.97631C7.01786 5.60143 6.66667 6.44928 6.66667 7.33333Z'
16+
stroke='currentColor'
17+
strokeWidth='1.5'
18+
strokeLinecap='round'
19+
strokeLinejoin='round'
20+
/>
21+
</svg>
3122
</div>
3223
);
3324
}

‎src/shared/ui/button/Button.stories.tsx‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
import type { Meta, StoryObj } from '@storybook/nextjs-vite';
2+
3+
import Button from './Button';
4+
5+
const meta = {
6+
title: 'Shared/UI/Button',
7+
component: Button,
8+
parameters: {
9+
layout: 'centered',
10+
},
11+
tags: ['autodocs'],
12+
argTypes: {
13+
children: { control: 'text', description: '버튼 텍스트' },
14+
disabled: { control: 'boolean', description: '비활성화 여부' },
15+
fullWidth: { control: 'boolean', description: '너비 100% 여부' },
16+
onClick: { action: 'clicked', description: '클릭 핸들러' },
17+
},
18+
decorators: [
19+
(Story) => (
20+
<div style={{ width: '335px' }}>
21+
<Story />
22+
</div>
23+
),
24+
],
25+
} satisfies Meta<typeof Button>;
26+
27+
export default meta;
28+
type Story = StoryObj<typeof meta>;
29+
30+
// 기본 형태 (Default)
31+
export const Default: Story = {
32+
args: {
33+
children: '일정 투표하기',
34+
},
35+
};
36+
37+
// 비활성화 상태 (Disabled)
38+
export const Disabled: Story = {
39+
args: {
40+
children: '일정 투표하기',
41+
disabled: true,
42+
},
43+
};
44+
45+
// 전체 너비 (Full Width)
46+
export const FullWidth: Story = {
47+
parameters: {
48+
layout: 'padded',
49+
},
50+
args: {
51+
children: '날짜 선택하기',
52+
fullWidth: true,
53+
},
54+
decorators: [
55+
(Story) => (
56+
<div style={{ width: '100%', padding: '20px' }}>
57+
<Story />
58+
</div>
59+
),
60+
],
61+
};
62+
63+
// 긴 텍스트 (Long Text)
64+
export const LongText: Story = {
65+
args: {
66+
children: '아주 긴 버튼 텍스트가 들어가면 어떻게 보일까요',
67+
},
68+
};
69+
70+
// 짧은 텍스트 (Short Text)
71+
export const ShortText: Story = {
72+
args: {
73+
children: '확인',
74+
},
75+
};
76+
77+
// 클릭 이벤트 (With Click Event)
78+
export const WithClickEvent: Story = {
79+
args: {
80+
children: '클릭해보세요',
81+
onClick: () => alert('버튼이 클릭되었습니다!'),
82+
},
83+
};

0 commit comments

Comments
 (0)