Use Input and Textarea for rendering input fields

marshallku · Feb 23, 2024 · 3fb0794 · 3fb0794
1 parent a91a412
commit 3fb0794
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 14 deletions.
diff --git a/apps/blog/src/components/CommentForm/index.module.scss b/apps/blog/src/components/CommentForm/index.module.scss
@@ -36,21 +36,12 @@
     }
 
     &__input {
-        @include typography(b2);
         margin-bottom: 12px;
-        padding: 4px 12px;
-        background-color: color(comment);
-        border-radius: 4px;
     }
 
     &__textarea {
-        @include typography(b1);
         height: 7em;
         margin-top: 12px;
-        padding: 8px 12px;
-        background-color: color(comment);
-        border-radius: 4px;
-        resize: none;
     }
 
     &__buttons {

diff --git a/apps/blog/src/components/CommentForm/index.tsx b/apps/blog/src/components/CommentForm/index.tsx
@@ -4,8 +4,10 @@ import { FormEventHandler, useCallback, useRef, useState } from "react";
 import { Icon } from "@marshallku/icon";
 import { classNames } from "@marshallku/utils";
 import { usePostComment } from "#api/comment/queries";
-import Typography from "#components/Typography";
 import CommentAvatar from "#components/CommentAvatar";
+import Input from "#components/Input";
+import Textarea from "#components/Textarea";
+import Typography from "#components/Typography";
 import styles from "./index.module.scss";
 
 interface CommentFormProps {
@@ -68,7 +70,7 @@ function CommentForm({ slug }: CommentFormProps) {
                 <Typography variant="c1" marginBottom={16}>
                     댓글을 남겨주세요. (이메일 주소는 공개되지 않습니다.)
                 </Typography>
-                <input
+                <Input
                     className={cx("__input")}
                     name="name"
                     placeholder="이름 (미입력시 '익명')"
@@ -77,9 +79,9 @@ function CommentForm({ slug }: CommentFormProps) {
                         setName(value);
                     }}
                 />
-                <input className={cx("__input")} name="url" inputMode="url" placeholder="주소" />
-                <input className={cx("__input")} name="email" inputMode="email" placeholder="이메일 (비공개)" />
-                <textarea
+                <Input className={cx("__input")} name="url" inputMode="url" placeholder="주소" />
+                <Input className={cx("__input")} name="email" inputMode="email" placeholder="이메일 (비공개)" />
+                <Textarea
                     className={cx("__textarea")}
                     name="body"
                     value={body}