Merge pull request #24 from tag-wonder/feat/tags-page-markup

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');
+    }
+  }
+}

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>