refactor: separate diff pages to diff file

sparcs-kaist · Mar 22, 2024 · 25fa5a1 · 25fa5a1
1 parent 5eb1ccd
commit 25fa5a1
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 46 deletions.
diff --git a/src/components/Auth/Auth.tsx b/src/components/Auth/Auth.tsx
@@ -3,7 +3,7 @@ import { useAppDispatch, useAppSelector } from "@/types";
 import { type RootState } from "@/redux/store";
 import { Board } from "@/components/Board";
 import { loginThunk } from "@/redux/auth/loginThunk";
-import style from "./Auth.module.scss";
+import { LoginPage } from "@/components/Auth/LoginPage";
 
 export const AuthPage = () => {
   const [deviceId, setDeviceId] = useState("");
@@ -33,50 +33,14 @@ export const AuthPage = () => {
     setPin("");
   };
 
-  if (isLoggedIn) {
-    return <Board />;
-  }
-
-  return (
-    <div className={style.modalWrapper}>
-      <div className={style.modalContainer}>
-        <h1 className={style.modalTitle}> Zabo Board Login</h1>
-        <br />
-        <p className={style.modalContent}>
-          Zabo Board 서비스를 이용하기 위해서는 등록된 device Id와 PIN을
-          입력하세요.
-          <br />
-          Zabo Board 서비스를 등록하기 위해서는 zabo.sparcs.org 채널톡으로
-          문의해주세요.
-        </p>
-        <div className={style.form}>
-          <label className={style.input}>
-            device Id
-            <input
-              className={style.input}
-              name="deviceId"
-              onChange={onDeviceIdChange}
-            />
-          </label>
-          <label className={style.input}>
-            PIN
-            <input
-              className={style.input}
-              type="password"
-              name="PIN"
-              onChange={onPinChange}
-            />
-          </label>
-        </div>
-        <button
-          type="submit"
-          className={style.submit}
-          onClick={onSubmitHandler}
-        >
-          Submit
-        </button>
-        <div className={style.errorBox}>{errorMessage}</div>
-      </div>
-    </div>
+  return isLoggedIn ? (
+    <Board />
+  ) : (
+    <LoginPage
+      errorMessage={errorMessage}
+      onDeviceIdChange={onDeviceIdChange}
+      onPinChange={onPinChange}
+      onSubmitHandler={onSubmitHandler}
+    />
   );
 };
diff --git a/src/components/Auth/LoginPage.tsx b/src/components/Auth/LoginPage.tsx
@@ -0,0 +1,53 @@
+import type { ChangeEvent } from "react";
+import style from "./Auth.module.scss";
+
+type LoginPageProps = {
+  onDeviceIdChange: (e: ChangeEvent<HTMLInputElement>) => void;
+  onPinChange: (e: ChangeEvent<HTMLInputElement>) => void;
+  onSubmitHandler: () => void;
+  errorMessage: string;
+};
+
+export const LoginPage = ({
+  onDeviceIdChange,
+  onPinChange,
+  onSubmitHandler,
+  errorMessage,
+}: LoginPageProps) => (
+  <div className={style.modalWrapper}>
+    <div className={style.modalContainer}>
+      <h1 className={style.modalTitle}> Zabo Board Login</h1>
+      <br />
+      <p className={style.modalContent}>
+        Zabo Board 서비스를 이용하기 위해서는 등록된 device Id와 PIN을
+        입력하세요.
+        <br />
+        Zabo Board 서비스를 등록하기 위해서는 zabo.sparcs.org 채널톡으로
+        문의해주세요.
+      </p>
+      <div className={style.form}>
+        <label className={style.input}>
+          device Id
+          <input
+            className={style.input}
+            name="deviceId"
+            onChange={onDeviceIdChange}
+          />
+        </label>
+        <label className={style.input}>
+          PIN
+          <input
+            className={style.input}
+            type="password"
+            name="PIN"
+            onChange={onPinChange}
+          />
+        </label>
+      </div>
+      <button type="submit" className={style.submit} onClick={onSubmitHandler}>
+        Submit
+      </button>
+      <div className={style.errorBox}>{errorMessage}</div>
+    </div>
+  </div>
+);