From 156b15a4c6a95a53fd657274ef4775448a1e2e19 Mon Sep 17 00:00:00 2001
From: saseungmin <dbd02169@naver.com>
Date: Thu, 30 Nov 2023 01:25:24 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20tags=20=ED=8E=98=EC=9D=B4=EC=A7=80=20?=
 =?UTF-8?q?=ED=83=80=EC=9D=B4=ED=8B=80=20description=20=EB=A7=88=ED=81=AC?=
 =?UTF-8?q?=EC=97=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/tags/index.module.scss | 46 ++++++++++++++++++++++++++++++++++
 src/app/tags/page.tsx          | 21 ++++++++++------
 2 files changed, 60 insertions(+), 7 deletions(-)
 create mode 100644 src/app/tags/index.module.scss

diff --git a/src/app/tags/index.module.scss b/src/app/tags/index.module.scss
new file mode 100644
index 0000000..d11066c
--- /dev/null
+++ b/src/app/tags/index.module.scss
@@ -0,0 +1,46 @@
+@import "/src/styles/main.scss";
+
+.tagsMainWrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+  padding: 44px 30px 37px 30px;
+
+  .nameLabel {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    user-select: none;
+
+    @include text('HS/Heading1');
+
+    .labelText {  
+      @include text-color('grey/09');
+    }
+
+    .nameInput {
+      border: none;
+      background-color: transparent;
+      max-width: 85px;
+      @include text-color('primary/09');
+  
+      &::placeholder {
+        color: color('primary/09');
+      }
+    }
+  }
+
+  .description {
+    @include text('Samlip/Title2');
+
+    .infoDescription {
+      white-space: pre-line;
+
+      @include text-color('grey/09');
+    }
+
+    .boldDescription {
+      @include text-color('primary/05');
+    }
+  }
+}
diff --git a/src/app/tags/page.tsx b/src/app/tags/page.tsx
index d5d48c3..8d4822b 100644
--- a/src/app/tags/page.tsx
+++ b/src/app/tags/page.tsx
@@ -1,17 +1,24 @@
+import clsx from 'clsx';
+
+import fonts from '../fonts';
+
+import styles from './index.module.scss';
+
 function TagsPage() {
   return (
-    <main>
+    <main className={styles.tagsMainWrapper}>
       <div>
-        <label htmlFor="name">
-          작성자 이름:
-          <input id="name" type="text" placeholder="입력하셈" />
+        <label className={clsx(fonts.hSYuji, styles.nameLabel)} htmlFor="name">
+          <span className={styles.labelText}>작성자 이름:</span>
+          &nbsp;
+          <input id="name" type="text" className={styles.nameInput} placeholder="입력하셈" />
         </label>
       </div>
-      <div>
-        <div>
+      <div className={clsx(fonts.samliphopangche, styles.description)}>
+        <div className={styles.infoDescription}>
           {'이미 남겨진 태그중에 선택하거나,\n마음에 드는 태그가 없다면 직접 작성해보세요!'}
         </div>
-        <div>(3개까지 추가 가능)</div>
+        <div className={styles.boldDescription}>(3개까지 추가 가능)</div>
       </div>
       <div>
         <div>#tag</div>