feat(mobile): 시간 선택 뷰 input을 구현합니다. (#72)

Author: Arooming

.vscode/settings.json

@@ -5,6 +5,7 @@
     }
   ],
   "editor.codeActionsOnSave": {
+    "quickfix.biome": "explicit",
     "source.fixAll": "never",
     // stylelint 자동 수정
     "source.fixAll.stylelint": "explicit",
@@ -15,5 +16,11 @@
     "source.organizeImports": "explicit"
   },
 
-  "stylelint.validate": ["css", "scss", "postcss", "typescript", "typescriptreact"]
+  "stylelint.validate": [
+    "css",
+    "scss",
+    "postcss",
+    "typescript",
+    "typescriptreact"
+  ]
 }

apps/mobile/app/select-date/layout.tsx

@@ -6,9 +6,9 @@ export default function layout({
   children: React.ReactNode;
 }>) {
   return (
-    <>
+    <section>
       <SelectDateHeader />
-      <div className="p-[2rem]">{children}</div>
-    </>
+      <div className="px-[2rem] py-[3rem]">{children}</div>
+    </section>
   );
 }

apps/mobile/app/select-date/page.tsx

@@ -1,3 +1,32 @@
+"use client";
+
+import { TextField } from "@setaday/ui";
+import { useState } from "react";
+
 export default function page() {
-  return <div>hi</div>;
+  const PLACE_HOLDER = "약속 이름을 작성해주세요";
+  const MAX_LENGTH = 16;
+
+  const [planName, setPlanName] = useState("");
+  const [isInputError, setIsInputError] = useState(false);
+
+  const handleChangeInput = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { value } = e.currentTarget;
+    setPlanName(value);
+
+    value.length > MAX_LENGTH ? setIsInputError(true) : setIsInputError(false);
+  };
+
+  return (
+    <>
+      <TextField
+        inputSize="mobile"
+        placeholder={PLACE_HOLDER}
+        value={planName}
+        isError={isInputError}
+        maxLength={MAX_LENGTH}
+        onChange={handleChangeInput}
+      />
+    </>
+  );
 }

apps/mobile/components/select-date/SelectDateHeader.tsx

@@ -10,13 +10,13 @@ function SelectDateHeader() {
   };
   return (
     <header className="border-gray-1 flex h-[5.2rem] w-[100dvw] items-center justify-between border-b-[1px] px-[0.9rem]">
-      <button onClick={clickArrowBtn}>
+      <button type="button" onClick={clickArrowBtn}>
         <MobileIconArrowLeftBlack />
       </button>
 
       <h2 className="font-body3_m_16 text-gray-6">날짜 선택</h2>
 
-      <div className="h-[3.2rem] w-[3.2rem]"></div>
+      <span className="h-[3.2rem] w-[3.2rem]" />
     </header>
   );
 }