fix : Build시 생기는 에러 수정

sunub · Jan 17, 2024 · 561c2e5 · 561c2e5
1 parent d91ee93
commit 561c2e5
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 95 deletions.
diff --git a/src/components/LoginForm/Form/Form.styled.ts b/src/components/LoginForm/Form/Form.styled.ts
@@ -132,11 +132,11 @@ export const HeaderWrapper = styled.div`
 `;
 
 export const MainWrapper = styled.div`
-  grid-area: main / fullbleed;
+  grid-area: main / main-start / footer / main-end;
   grid-template-rows: auto auto;
 `;
 
 export const FooterWrapper = styled.div`
-  grid-area: footer / fullbleed;
+  grid-area: footer / main-start / system-gesture / main-end;
   grid-template-rows: auto auto;
 `;
diff --git a/src/components/LoginForm/Form/Form.tsx b/src/components/LoginForm/Form/Form.tsx
@@ -1,64 +1,40 @@
-// "use client";
+"use client";
 
-// import React from "react";
-// import * as Styled from "./Form.styled";
-// import Id from "./Id";
-// import Password from "./Password";
-// import Helper from "./Helper";
-// import InvalidMessage from "../../InvalidMessage";
-// import { createUserInfo } from "@/lib/action";
+import React from "react";
+import * as Styled from "./Form.styled";
+import LoginInput from "./LoginInput";
+import LoginButton from "./LoginButton";
 
-// function Form() {
-//   const [id, setId] = React.useState("");
-//   const [password, setPassword] = React.useState("");
-//   const [isIdValid, setIsIdValid] = React.useState({
-//     id: true,
-//     password: true,
-//   });
+function Form() {
+  const [id, setId] = React.useState("");
+  const [password, setPassword] = React.useState("");
+  const [isIdValid, setIsIdValid] = React.useState({
+    id: true,
+    password: true,
+  });
 
-//   return (
-//     <form
-//       method="post"
-//       action={"/login"}
-//       onSubmit={(e) => {
-//         e.preventDefault();
-//         const formData = new FormData(e.currentTarget);
-//         createUserInfo(formData);
-//       }}
-//     >
-//       <Styled.InputGroup>
-//         <Id setId={setId} />
-//         <Password setPassword={setPassword} />
-//       </Styled.InputGroup>
-//       <Helper />
-//       {isIdValid.id ? null : (
-//         <InvalidMessage message={"아이디 입력이 잘못되었습니다."} />
-//       )}
-//       {isIdValid.password ? null : (
-//         <InvalidMessage message={"비밀번호 입력이 잘못되었습니다."} />
-//       )}
-//       <Styled.Button
-//         id={"submit-id-pwd-btn"}
-//         type="submit"
-//         onClick={() => {
-//           if (id.length >= 6 && id.length <= 20) {
-//             setIsIdValid((prev) => ({ ...prev, id: true }));
-//           }
-//           if (password.length >= 8) {
-//             setIsIdValid((prev) => ({ ...prev, password: true }));
-//           }
+  const InputProps = {
+    setId,
+    setPassword,
+    isIdValid,
+  };
 
-//           if (id.length < 6 || id.length > 20) {
-//             setIsIdValid((prev) => ({ ...prev, id: false }));
-//           } else if (password.length < 8) {
-//             setIsIdValid((prev) => ({ ...prev, password: false }));
-//           }
-//         }}
-//       >
-//         로그인
-//       </Styled.Button>
-//     </form>
-//   );
-// }
+  const ButtonProps = {
+    id,
+    password,
+    setIsIdValid,
+  };
 
-// export default Form;
+  return (
+    <React.Fragment>
+      <Styled.MainWrapper>
+        <LoginInput props={InputProps} />
+      </Styled.MainWrapper>
+      <Styled.FooterWrapper>
+        <LoginButton props={ButtonProps} />
+      </Styled.FooterWrapper>
+    </React.Fragment>
+  );
+}
+
+export default Form;
diff --git a/src/components/LoginForm/Form/index.ts b/src/components/LoginForm/Form/index.ts
diff --git a/src/components/LoginForm/FormHeader/FormHeader.styled.tsx b/src/components/LoginForm/FormHeader/FormHeader.styled.tsx
@@ -2,6 +2,10 @@
 
 import styled from "styled-components";
 
+export const Wrapper = styled.div`
+  grid-area: primary-header / fullbleed;
+`;
+
 export const Header = styled.header`
   display: flex;
   justify-content: center;

diff --git a/src/components/LoginForm/FormHeader/FormHeader.tsx b/src/components/LoginForm/FormHeader/FormHeader.tsx
@@ -4,10 +4,12 @@ import VisuallyHidden from "@compo/VisuallyHidden";
 
 function FormHeader() {
   return (
-    <Styled.Header>
-      <VisuallyHidden>사이트 로그인 페이지</VisuallyHidden>
-      <Styled.Title>로그인</Styled.Title>
-    </Styled.Header>
+    <Styled.Wrapper>
+      <Styled.Header>
+        <VisuallyHidden>사이트 로그인 페이지</VisuallyHidden>
+        <Styled.Title>로그인</Styled.Title>
+      </Styled.Header>
+    </Styled.Wrapper>
   );
 }
 

diff --git a/src/components/LoginForm/LoginForm.tsx b/src/components/LoginForm/LoginForm.tsx
@@ -6,27 +6,9 @@ import FormHeader from "./FormHeader";
 import { createUserInfo } from "@/lib/action";
 import LoginInput from "./Form/LoginInput";
 import LoginButton from "./Form/LoginButton";
+import Form from "./Form/Form";
 
 function LoginForm() {
-  const [id, setId] = React.useState("");
-  const [password, setPassword] = React.useState("");
-  const [isIdValid, setIsIdValid] = React.useState({
-    id: true,
-    password: true,
-  });
-
-  const InputProps = {
-    setId,
-    setPassword,
-    isIdValid,
-  };
-
-  const ButtonProps = {
-    id,
-    password,
-    setIsIdValid,
-  };
-
   return (
     <Styled.Form
       method="post"
@@ -37,15 +19,8 @@ function LoginForm() {
         createUserInfo(formData);
       }}
     >
-      <Styled.HeaderWrapper>
-        <FormHeader />
-      </Styled.HeaderWrapper>
-      <Styled.MainWrapper>
-        <LoginInput props={InputProps} />
-      </Styled.MainWrapper>
-      <Styled.FooterWrapper>
-        <LoginButton props={ButtonProps} />
-      </Styled.FooterWrapper>
+      <FormHeader />
+      <Form />
     </Styled.Form>
   );
 }