Merge pull request #82 from sopt-makers/feat/storybook

[DOCS] Fonts storybook
sopt-makers · Apr 25, 2024 · 3bbd430 · 3bbd430
2 parents b4aa77a + c3610bb
commit 3bbd430
Show file tree

Hide file tree

Showing 3 changed files with 104 additions and 20 deletions.
diff --git a/apps/docs/src/index.css b/apps/docs/src/index.css
@@ -2,46 +2,41 @@
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  font-family: 'SUIT', sans-serif;
+  font-family: "SUIT", sans-serif;
   font-style: normal;
 }
 
 body {
-  background-color: rgb(0,0,0)
+  background-color: rgb(0, 0, 0);
 }
 
 @font-face {
-  font-family: 'SUIT';
-  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/[email protected]/SUIT-Light.woff2')
-    format('woff2');
+  font-family: "SUIT";
+  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/[email protected]/SUIT-Light.woff2") format("woff2");
   font-weight: 300;
   font-style: normal;
 }
 @font-face {
-  font-family: 'SUIT';
-  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/[email protected]/SUIT-Regular.woff2')
-    format('woff2');
+  font-family: "SUIT";
+  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/[email protected]/SUIT-Regular.woff2") format("woff2");
   font-weight: 400;
   font-style: normal;
 }
 @font-face {
-  font-family: 'SUIT';
-  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/[email protected]/SUIT-Medium.woff2')
-    format('woff2');
+  font-family: "SUIT";
+  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/[email protected]/SUIT-Medium.woff2") format("woff2");
   font-weight: 500;
   font-style: normal;
 }
 @font-face {
-  font-family: 'SUIT';
-  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/[email protected]/SUIT-SemiBold.woff2')
-    format('woff2');
+  font-family: "SUIT";
+  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/[email protected]/SUIT-SemiBold.woff2") format("woff2");
   font-weight: 600;
   font-style: normal;
 }
 @font-face {
-  font-family: 'SUIT';
-  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/[email protected]/SUIT-Bold.woff2')
-    format('woff2');
+  font-family: "SUIT";
+  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/[email protected]/SUIT-Bold.woff2") format("woff2");
   font-weight: 700;
   font-style: normal;
 }
@@ -58,7 +53,7 @@ body {
   flex-direction: column;
   gap: 16px;
   color: white;
-  font-family: 'SUIT', sans-serif;
+  font-family: "SUIT", sans-serif;
 
   h4 {
     font-size: 28px;
@@ -101,4 +96,36 @@ body {
       height: 80px;
     }
   }
-}
+}
+
+.fonts-wrap {
+  padding: 20px;
+  color: white;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  width: 1000px;
+}
+
+.fonts-group {
+  border: 1px solid #3f3f47;
+  padding: 15px 20px;
+  border-radius: 10px;
+
+  & > p:first-of-type {
+    font-size: 20px;
+    font-weight: 700;
+    margin-bottom: 16px;
+  }
+  & > div {
+    margin-bottom: 16px;
+
+    p {
+      color: #c3c3c6;
+      font-size: 16px;
+    }
+    span {
+      color: #808087;
+    }
+  }
+}
diff --git a/apps/docs/src/stories/Colors.stories.tsx b/apps/docs/src/stories/Colors.stories.tsx
@@ -17,7 +17,7 @@ export const Default = {
       });
 
     return <div className="colors-wrap">
-      <p>* 마우스 오버시 이름과 코드가 뜹니다 *</p>
+      <p style={{ fontSize: '20px' }}>* 마우스 오버시 이름과 코드가 뜹니다 *</p>
 
       <h4>Main Color</h4>
       <div className="colors-group">

diff --git a/apps/docs/src/stories/Fonts.stories.tsx b/apps/docs/src/stories/Fonts.stories.tsx
@@ -0,0 +1,57 @@
+import { fontsObject } from '@sopt-makers/fonts';
+import { ChangeEvent, useState } from 'react';
+import { TextField } from '@sopt-makers/ui';
+
+export default {
+  title: 'fonts/Fonts'
+}
+
+type FontName = keyof typeof fontsObject;
+
+const useInput = (defaultValue: string) => {
+  const [input, setInput] = useState(defaultValue);
+
+  const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
+    setInput(e.target.value);
+  }
+
+  return [input, handleInputChange] as const;
+}
+
+export const Default = () => {
+  const [text, handleTextChange] = useInput('SOPT에 없던 새로운 가치를 프로덕트를 통해 만들어 갑니다.');
+
+  const getFontColor = (fontType: string) => {
+    switch (fontType) {
+      case 'HEADING':
+        return '#FFC234';
+      case 'TITLE':
+        return '#16BF81';
+      case 'BODY':
+        return '#F77234';
+      case 'LABEL':
+        return '#346FFA';
+    }
+  }
+
+  return <div className="fonts-wrap">
+    <p style={{ fontSize: '20px' }}>* 공통 스타일 - fontFamily : SUIT / fontStyle : normal *</p>
+    <TextField<string> value={text} onChange={handleTextChange} placeholder="예시 문장을 입력해주세요" />
+
+    {Object.keys(fontsObject).map((fontName) => {
+      const fontObject = fontsObject[fontName as FontName];
+
+      return <div key={fontName} className="fonts-group">
+        <p style={{ color: getFontColor(fontName.split('_')[0]) }}>{fontName}</p>
+        <div>
+          <p><span>fontWeight : </span>{fontObject.fontWeight}</p>
+          <p><span>fontSize : </span>{fontObject.fontSize}</p>
+          <p><span>lineHeight : </span>{fontObject.lineHeight}</p>
+          <p><span>letterSpacing : </span>{fontObject.letterSpacing}</p>
+        </div>
+        <p style={fontObject}>{text}</p>
+      </div>
+    }
+    )}
+  </div>
+}