공통 컴포넌트들의 변경 사항에 모두 대응한다. (SWYP-team-2th#192)

* 아이콘 추가 및 수정 * Typography System 추가 반영 * 바텀시트 내부 padding 값 수정 * 버튼 크기, text, primary color 수정 * 헤더 상하 높이, 여백 수정 * 바텀시트 하부 여백, 아이콘 사이즈 수정 * 텍스트 필드 높이 줄임 * 토스트 내부 간격, 텍스트 수정
YOOJS1205 · Mar 3, 2025 · 7f6dba6 · 7f6dba6
1 parent 379a700
commit 7f6dba6
Show file tree

Hide file tree

Showing 15 changed files with 72 additions and 48 deletions.
diff --git a/src/assets/icons/filter.svg b/src/assets/icons/filter.svg
diff --git a/src/assets/icons/home-filled.svg b/src/assets/icons/home-filled.svg
diff --git a/src/assets/icons/home.svg b/src/assets/icons/home.svg
diff --git a/src/assets/icons/home_fill_24px.svg b/src/assets/icons/home_fill_24px.svg
diff --git a/src/assets/icons/home_outline_24px.svg b/src/assets/icons/home_outline_24px.svg
diff --git a/src/assets/icons/talk.svg b/src/assets/icons/talk.svg
diff --git a/src/assets/icons/vote.svg b/src/assets/icons/vote.svg
diff --git a/src/components/common/BottomSheet/BottomSheet.tsx b/src/components/common/BottomSheet/BottomSheet.tsx
@@ -15,8 +15,8 @@ export default function BottomSheet({
   const { closeBottomSheet } = useBottomSheet();
 
   return (
-    <div className="py-8 rounded-t-2xl relative w-full max-w-[480px] bg-gray-100">
-      <h3 className="px-8 text-h3 pb-4 border-b-[1px] border-gray-400">
+    <div className="py-[28px] rounded-t-2xl relative w-full max-w-[480px] bg-gray-100">
+      <h3 className="px-10 text-h3 pb-4 border-b-[1px] border-gray-400">
         {title}
       </h3>
       {hasCloseButton && (
@@ -27,7 +27,7 @@ export default function BottomSheet({
           <Icon name="Cross" size="large" />
         </button>
       )}
-      <div className="pt-4 px-8">{children}</div>
+      <div className="pt-4 px-10">{children}</div>
     </div>
   );
 }
diff --git a/src/components/common/Button/Button.tsx b/src/components/common/Button/Button.tsx
@@ -12,12 +12,12 @@ const buttonVariants = cva(
         outline: 'border bg-gray-100',
       },
       size: {
-        small: 'w-[157px] h-[40px]  rounded-lg text-label-medium',
-        medium: 'w-[212px] h-[48px]  rounded-xl text-title-small',
-        large: 'w-full h-[63px] rounded-2xl text-title-medium',
+        small: 'w-[157px] h-[40px] rounded-lg text-label-medium',
+        medium: 'w-[212px] h-[46px] rounded-xl text-label-large',
+        large: 'w-full h-[58px] rounded-2xl text-title-small-1',
       },
       solidType: {
-        primary: 'bg-primary-400',
+        primary: 'bg-primary-500',
         secondary: 'bg-primary-600 ',
         disabled: 'bg-gray-500 text-gray-100',
       },

diff --git a/src/components/common/Header/Header.tsx b/src/components/common/Header/Header.tsx
@@ -16,14 +16,14 @@ export function Header({
   return (
     <div
       className={cn(
-        'flex items-center justify-between w-full max-w-[480px] py-4 px-5 border-b border-gray-400 fixed top-0 left-1/2 -translate-x-1/2 z-40 bg-gray-100',
+        'flex items-center justify-between w-full max-w-[480px] pt-5 pb-[18px] px-5 border-b border-gray-400 fixed top-0 left-1/2 -translate-x-1/2 z-40 bg-gray-100 ',
         className,
       )}
       {...props}
     >
-      <div className="w-[32px] h-[32px]">{leftNode}</div>
+      <div className="w-[32px]">{leftNode}</div>
       {centerNode}
-      <div className="w-[32px] h-[32px]">{rightNode}</div>
+      <div className="w-[32px]">{rightNode}</div>
     </div>
   );
 }
diff --git a/src/components/common/Icon/Icon.tsx b/src/components/common/Icon/Icon.tsx
@@ -12,12 +12,13 @@ import BookmarkOutline from '@/assets/icons/bookmark_outline_24px.svg?react';
 import Check from '@/assets/icons/check_24px.svg?react';
 import Cross from '@/assets/icons/cross_24px.svg?react';
 import Edit from '@/assets/icons/edit_24px.svg?react';
+import Filter from '@/assets/icons/filter.svg?react';
 import HeartFill from '@/assets/icons/heart_fill_24px.svg?react';
 import HeartFillRed from '@/assets/icons/heart_fill_Red.svg?react';
 import HeartOutline from '@/assets/icons/heart_outline_24px.svg?react';
 import HeartOutlineWhite from '@/assets/icons/heart_outline_white.svg?react';
-import HomeFill from '@/assets/icons/home_fill_24px.svg?react';
-import HomeOutline from '@/assets/icons/home_outline_24px.svg?react';
+import HomeFilled from '@/assets/icons/home-filled.svg?react';
+import HomeOutline from '@/assets/icons/home.svg?react';
 import KakaoLogo from '@/assets/icons/kako_logo.svg?react';
 import Link from '@/assets/icons/link_24px.svg?react';
 import LinkWhite from '@/assets/icons/link_white.svg?react';
@@ -43,6 +44,7 @@ import Post from '@/assets/icons/post_24px.svg?react';
 import SearchFill from '@/assets/icons/search_fill_24px.svg?react';
 import Send from '@/assets/icons/send_24px.svg?react';
 import SettingsOutline from '@/assets/icons/settings_outline_24px.svg?react';
+import Talk from '@/assets/icons/talk.svg?react';
 import ThumbUpFill from '@/assets/icons/thumb-up_fill_24px.svg?react';
 import ThumbUpOutline from '@/assets/icons/thumb-up_outline_24px.svg?react';
 import ToastError from '@/assets/icons/toast_error.svg?react';
@@ -54,9 +56,14 @@ import User2Fill from '@/assets/icons/user2_fill_24px.svg?react';
 import User2Outline from '@/assets/icons/user2_outline_24px.svg?react';
 import UserFill from '@/assets/icons/user_fill_24px.svg?react';
 import UserOutline from '@/assets/icons/user_outline_24px.svg?react';
+import Vote from '@/assets/icons/vote.svg?react';
 import VoteClose from '@/assets/icons/vote_close.svg?react';
 import World from '@/assets/icons/world_24px.svg?react';
 export const ICONS = {
+  Vote,
+  Talk,
+  HomeFilled,
+  Filter,
   ArrowRightPurple,
   PlusGray,
   AlertFill,
@@ -74,7 +81,6 @@ export const ICONS = {
   HeartFill,
   HeartFillRed,
   HeartOutline,
-  HomeFill,
   HomeOutline,
   Link,
   LockFill,
@@ -117,9 +123,11 @@ export const ICONS = {
 } as const;
 
 export const ICON_SIZE = {
+  'extra-small': 12,
   small: 16,
   medium: 24,
   large: 32,
+  'extra-large': 40,
 } as const;
 
 export interface IconProps extends SVGProps<SVGSVGElement> {

diff --git a/src/components/common/LinkShareBottomSheet/LinkShareBottomSheet.tsx b/src/components/common/LinkShareBottomSheet/LinkShareBottomSheet.tsx
@@ -16,7 +16,7 @@ export default function LinkShareBottomSheet({
 
   return (
     <BottomSheet title="투표 공유하기" hasCloseButton>
-      <div className="flex flex-col gap-5 text-title-medium mt-2 mb-6">
+      <div className="flex flex-col gap-5 text-title-medium mt-2 mb-2">
         <button
           onClick={handleClickKakaoShareButton}
           className="flex gap-4 items-center"
@@ -28,8 +28,8 @@ export default function LinkShareBottomSheet({
           onClick={handleClickUrlShareButton}
           className="flex gap-4 items-center"
         >
-          <div className="p-1 bg-gray-600 rounded-full">
-            <Icon name="LinkWhite" size="medium" />
+          <div className="p-2 bg-gray-600 rounded-full">
+            <Icon name="LinkWhite" size="small" />
           </div>
           <p>URL로 공유하기</p>
         </button>

diff --git a/src/components/common/TextField/TextField.tsx b/src/components/common/TextField/TextField.tsx
@@ -39,7 +39,7 @@ const TextField = React.forwardRef<HTMLTextAreaElement, TextFieldProps>(
         <div className="relative">
           <textarea
             className={cn(
-              'w-full resize-none px-4 py-3 h-[149px] rounded-xl border-[1px] border-gray-500 border-solid text-body-1-long text-gray-700 [&:hover]:text-gray-800 focus:outline-none',
+              'w-full resize-none px-4 py-3 h-[100px] rounded-xl border-[1px] border-gray-500 border-solid text-body-1-long text-gray-700 [&:hover]:text-gray-800 focus:outline-none',
               {
                 'border-success':
                   status === 'success' && variant === 'outlined',

diff --git a/src/components/common/Toast/Toast.tsx b/src/components/common/Toast/Toast.tsx
@@ -3,14 +3,14 @@ import { ToastProps } from './types';
 
 export default function Toast({ type, title, description }: ToastProps) {
   return (
-    <div className="px-8 py-4 rounded-2xl bg-[rgba(0,0,0,0.6)] w-full h-[100px] flex gap-6 items-center">
+    <div className="px-8 py-3 rounded-2xl bg-[rgba(0,0,0,0.6)] w-full h-[100px] flex gap-4 items-center">
       {type === 'success' && <Icon name="ToastSuccess" size="large" />}
       {type === 'error' && <Icon name="ToastError" size="large" />}
       {type === 'warning' && <Icon name="ToastWarning" size="large" />}
       {type === 'info' && <Icon name="ToastInfo" size="large" />}
       <div className="text-gray-100">
-        <h3 className="text-title-medium">{title}</h3>
-        <p className="text-body-1-long whitespace-pre-wrap">{description}</p>
+        <h3 className="text-title-small">{title}</h3>
+        <p className="text-body-2-long whitespace-pre-wrap">{description}</p>
       </div>
     </div>
   );

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -23,27 +23,40 @@ export const theme = {
       ],
       'title-medium': [
         '20px',
-        { lineHeight: '1.25', letterSpacing: '-0.015em', fontWeight: '600' },
+        { lineHeight: '1.2', letterSpacing: '-0.015em', fontWeight: '600' },
       ],
-      'title-small': [
+      'title-small-1': [
         '18px',
         { lineHeight: '1.2', letterSpacing: '-0.01em', fontWeight: '600' },
       ],
+      'title-small-2': [
+        '18px',
+        { lineHeight: '1.2', letterSpacing: '-0.015em', fontWeight: '400' },
+      ],
       'title-x-small': [
         '16px',
         { lineHeight: '1.2', letterSpacing: '-0.015em', fontWeight: '600' },
       ],
-      'body-1-long': ['16px', { lineHeight: '1.3', letterSpacing: '-0.01em' }],
+      'body-1-long': [
+        '16px',
+        { lineHeight: '1.3', letterSpacing: '-0.01em', fontWeight: '400' },
+      ],
       'body-1-normal': [
         '16px',
-        { lineHeight: '1.25', letterSpacing: '-0.01em' },
+        { lineHeight: '1.25', letterSpacing: '-0.01em', fontWeight: '500' },
+      ],
+      'body-2-long': [
+        '14px',
+        { lineHeight: '1.25', letterSpacing: '-0.01em', fontWeight: '400' },
       ],
-      'body-2-long': ['14px', { lineHeight: '1.25', letterSpacing: '-0.01em' }],
       'body-2-normal': [
         '14px',
-        { lineHeight: '1.2', letterSpacing: '-0.01em' },
+        { lineHeight: '1.2', letterSpacing: '-0.01em', fontWeight: '500' },
+      ],
+      caption: [
+        '12px',
+        { lineHeight: '1.25', letterSpacing: '-0.02em', fontWeight: '400' },
       ],
-      caption: ['12px', { lineHeight: '1.25', letterSpacing: '-0.02em' }],
       'label-large': [
         '16px',
         { lineHeight: '1.2', letterSpacing: '-0.015em', fontWeight: 'bold' },
@@ -56,6 +69,14 @@ export const theme = {
         '12px',
         { lineHeight: '1.3', letterSpacing: '-0.015em', fontWeight: 'bold' },
       ],
+      'label-x-small-1': [
+        '11px',
+        { lineHeight: '1.2', letterSpacing: '-0.02em', fontWeight: 'bold' },
+      ],
+      'label-x-small-2': [
+        '11px',
+        { lineHeight: '1.2', letterSpacing: '-0.02em', fontWeight: '400' },
+      ],
     },
   },
 };