Merge pull request #34 from Duri-Salon/feat/typo-system(DURI-27)

[feat] typo 시스템 및 스토리북 수정
Duri-Salon · Dec 3, 2024 · 32b50c5 · 32b50c5
2 parents 6ab64e1 + c8aeab5
commit 32b50c5
Show file tree

Hide file tree

Showing 5 changed files with 159 additions and 63 deletions.
diff --git a/apps/duri/src/pages/Shop/index.tsx b/apps/duri/src/pages/Shop/index.tsx
@@ -50,6 +50,7 @@ const Shop = () => {
             bg={theme.palette.White}
           >
             <Text typo="Body4">목록</Text>
+            <div></div>
           </Button>
         </ListWrapper>
       </Flex>

diff --git a/packages/ui/src/assets/FullHeart.tsx b/packages/ui/src/assets/FullHeart.tsx
diff --git a/packages/ui/src/assets/index.tsx b/packages/ui/src/assets/index.tsx
@@ -58,7 +58,6 @@ export { default as SpeechBallon } from './SpeechBallon';
 
 import Add from './Add';
 import AddNew from './AddNew';
-import AiStyleBanner from './AiStyleBanner';
 import Approve from './Approve';
 import ArrowBottom from './ArrowBottom';
 import ArrowLeft from './ArrowLeft';
@@ -73,18 +72,29 @@ import Chat from './Chat';
 import Chatting from './Chatting';
 import Close from './Close';
 import CloseCircle from './CloseCircle';
-import Doori from './Doori';
 import DownArrow from './DownArrow';
+import FilledHeart from './FilledHeart';
+import FilledLocation from './FilledLocation';
+import FilledNotification from './FilledNotification';
+import FilledReport from './FilledReport';
+import Filter from './Filter';
+import Heart from './Heart';
 import Help from './Help';
+import Hold from './Hold';
 import Information from './Information';
+import List from './List';
+import Location from './Location';
 import Lock from './Lock';
 import Magnifier from './Magnifier';
 import Menu from './Menu';
 import MyLocation from './MyLocation';
 import Notification from './Notification';
+import Report from './Report';
 import SafetyHelp from './SafetyHelp';
 import SecurityWarning from './SecurityWarning';
+import Send from './Send';
 import Shield from './Shield';
+import Shopping from './Shopping';
 import Star from './Star';
 import UnionDown from './UnionDown';
 import UnionUp from './UnionUp';
@@ -109,12 +119,10 @@ export const icons = {
   Close,
   CloseCircle,
   DownArrow,
-  Doori,
   Help,
   Information,
   Magnifier,
   Menu,
-  Notification,
   SafetyHelp,
   SecurityWarning,
   Shield,
@@ -123,9 +131,21 @@ export const icons = {
   UpArrow,
   Lock,
   Unlock,
-  AiStyleBanner,
   Star,
+  Heart,
+  FilledHeart,
   MyLocation,
+  Location,
+  FilledLocation,
+  Notification,
+  FilledNotification,
+  Report,
+  FilledReport,
+  List,
+  Filter,
+  Send,
+  Shopping,
+  Hold,
 };
 
 export default icons;
diff --git a/packages/ui/src/stories/styles/Typo.mdx b/packages/ui/src/stories/styles/Typo.mdx
@@ -1,8 +1,6 @@
 import React from 'react';
 import { Meta, Typeset } from '@storybook/blocks';
-
 import { theme } from '../../styles';
-import { Text } from '../../components/Typo';
 
 <Meta title="styles/Typography" />
 
@@ -13,48 +11,124 @@ import { Text } from '../../components/Typo';
 
 <br />
 
-### Title
+## Title
+
+### Title Variants
 
 <Typeset
-  fontSizes={[32, 24]}
+  fontSizes={[18]}
+  fontWeight={600}
+  sampleText={'Title1: This is a sample text.'}
+  fontFamily={'Pretendard'}
+/>
+<Typeset
+  fontSizes={[17]}
   fontWeight={600}
-  sampleText={'This is a sample text.'}
+  sampleText={'Title2: This is a sample text.'}
+  fontFamily={'Pretendard'}
+/>
+<Typeset
+  fontSizes={[16]}
+  fontWeight={600}
+  sampleText={'Title3: This is a sample text.'}
   fontFamily={'Pretendard'}
 />
 
-### Medium
+<br />
 
+## Caption
+
+### Caption Variants
+
+<Typeset
+  fontSizes={[14]}
+  fontWeight={300}
+  sampleText={'Caption1: This is a sample text.'}
+  fontFamily={'Pretendard'}
+/>
+<Typeset
+  fontSizes={[13]}
+  fontWeight={400}
+  sampleText={'Caption2: This is a sample text.'}
+  fontFamily={'Pretendard'}
+/>
 <Typeset
-  fontSizes={[24, 20]}
+  fontSizes={[13]}
   fontWeight={500}
-  sampleText={'This is a sample text.'}
+  sampleText={'Caption3: This is a sample text.'}
   fontFamily={'Pretendard'}
 />
-
-### Light
-
 <Typeset
-  fontSizes={[24, 16, 12]}
+  fontSizes={[13]}
+  fontWeight={300}
+  sampleText={'Caption4: This is a sample text.'}
+  fontFamily={'Pretendard'}
+/>
+<Typeset
+  fontSizes={[12]}
   fontWeight={400}
-  sampleText={'This is a sample text.'}
+  sampleText={'Caption5: This is a sample text.'}
   fontFamily={'Pretendard'}
 />
 
-### Light
+<br />
+
+## Label
+
+### Label Variants
 
 <Typeset
-  fontSizes={[16, 12]}
-  fontWeight={300}
-  sampleText={'This is a sample text.'}
+  fontSizes={[14]}
+  fontWeight={600}
+  sampleText={'Label1: This is a sample text.'}
+  fontFamily={'Pretendard'}
+/>
+<Typeset
+  fontSizes={[14]}
+  fontWeight={500}
+  sampleText={'Label2: This is a sample text.'}
+  fontFamily={'Pretendard'}
+/>
+<Typeset
+  fontSizes={[14]}
+  fontWeight={400}
+  sampleText={'Label3: This is a sample text.'}
+  fontFamily={'Pretendard'}
+/>
+<Typeset
+  fontSizes={[13]}
+  fontWeight={600}
+  sampleText={'Label4: This is a sample text.'}
   fontFamily={'Pretendard'}
 />
 
-### Disabled
+<br />
+
+## Body
 
+### Body Variants
+
+<Typeset
+  fontSizes={[20]}
+  fontWeight={500}
+  sampleText={'Body1: This is a sample text.'}
+  fontFamily={'Pretendard'}
+/>
 <Typeset
   fontSizes={[16]}
+  fontWeight={500}
+  sampleText={'Body2: This is a sample text.'}
+  fontFamily={'Pretendard'}
+/>
+<Typeset
+  fontSizes={[15]}
   fontWeight={400}
-  sampleText={'This is a disabled text.'}
+  sampleText={'Body3: This is a sample text.'}
+  fontFamily={'Pretendard'}
+/>
+<Typeset
+  fontSizes={[15]}
+  fontWeight={300}
+  sampleText={'Body4: This is a sample text.'}
   fontFamily={'Pretendard'}
-  style={{ color: theme.palette.Gray300 }}
 />
diff --git a/packages/ui/src/styles/typo.tsx b/packages/ui/src/styles/typo.tsx
@@ -10,13 +10,17 @@ export const calcRem = (px: number) => `${px / 16}rem`;
  * @param Caption2: 박스 안에 들어가는 타이틀 밑 부가설명 텍스트
  * @param Caption3: 거리표시 텍스트
  * @param Caption4: 주소 텍스트
+ * @param Caption5: 미니 박스 내부 텍스트
  *
  * @param Label1: 별점
- * @param Label2: 후기 갯수
- * @param Label3: 스케줄러 숫자 텍스트
+ * @param Label2: 지도 텍스트
+ * @param Label3: 후기 갯수
+ * @param Label4: 스케줄러 숫자 텍스트
  *
- * @param Body1: 스케줄러 이름 텍스트
- * @param Body2: 스케줄러 담당쌤 텍스트 / 스케줄러 성별/특징 텍스트
+ * @param Body1: 정렬 본문 텍스트
+ * @param Body2: 스케줄러 이름 텍스트
+ * @param Body3: 팝업 부가 설명 텍스트
+ * @param Body3: 스케줄러 담당쌤 텍스트 / 스케줄러 성별/특징 텍스트
  */
 
 export const typo = {
@@ -45,20 +49,6 @@ export const typo = {
     line-height: 170%;
   `,
 
-  Body3: css`
-    font-family: 'Pretendard';
-    font-weight: 400;
-    font-size: ${calcRem(13)};
-    line-height: 140%;
-  `,
-
-  Body4: css`
-    font-family: 'Pretendard';
-    font-weight: 400;
-    font-size: ${calcRem(10)};
-    line-height: 140%;
-  `,
-
   // 타이포 시스템
   Title1: css`
     /* 페이지 타이틀 */
@@ -109,6 +99,13 @@ export const typo = {
     font-weight: 300;
     line-height: normal;
   `,
+  Caption5: css`
+    /* 미니 박스 텍스트 */
+    font-family: 'Pretendard';
+    font-size: ${calcRem(12)};
+    font-weight: 400;
+    line-height: normal;
+  `,
   Label1: css`
     /* 별점 */
     font-family: 'Pretendard';
@@ -117,27 +114,48 @@ export const typo = {
     line-height: normal;
   `,
   Label2: css`
+    /* 지도 텍스트 */
+    font-family: 'Pretendard';
+    font-size: ${calcRem(14)};
+    font-weight: 500;
+    line-height: normal;
+  `,
+  Label3: css`
     /* 후기 갯수 */
     font-family: 'Pretendard';
     font-size: ${calcRem(14)};
     font-weight: 400;
     line-height: normal;
   `,
-  Label3: css`
+  Label4: css`
     /* 스케줄러 숫자 텍스트 */
     font-family: 'Pretendard';
     font-size: ${calcRem(13)};
-    font-weight: 500;
+    font-weight: 600;
     line-height: 14px;
   `,
   Body1: css`
+    /* 정렬 본문 텍스트 */
+    font-family: 'Pretendard';
+    font-size: ${calcRem(20)};
+    font-weight: 500;
+    line-height: normal;
+  `,
+  Body2: css`
     /* 스케줄러 이름 텍스트 */
     font-family: 'Pretendard';
     font-size: ${calcRem(16)};
     font-weight: 500;
     line-height: normal;
   `,
-  Body2: css`
+  Body3: css`
+    /* 팝업 부가설명 텍스트 */
+    font-family: 'Pretendard';
+    font-size: ${calcRem(15)};
+    font-weight: 400;
+    line-height: normal;
+  `,
+  Body4: css`
     /* 스케줄러 성별,특징 / 담당쌤 텍스트 */
     font-family: 'Pretendard';
     font-size: ${calcRem(15)};