From c128186b8f94fa6cdf7bb83b22b62bf8ed805085 Mon Sep 17 00:00:00 2001
From: 78-artilleryman <ywy040150@gmail.com>
Date: Sat, 6 Apr 2024 17:41:59 +0900
Subject: [PATCH] =?UTF-8?q?design:=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20UI=20=EC=83=9D=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json                             | 16 ++++++
 package.json                                  |  1 +
 src/components/SearchBar.tsx                  |  8 ++-
 .../{input => signinPage}/Input.tsx           | 23 +++++---
 src/components/signinPage/LogoBox.tsx         | 45 ++++++++++++++++
 src/components/signinPage/SubmitBtn.tsx       | 25 +++++++++
 src/pages/index.tsx                           |  2 +-
 src/pages/signin/index.tsx                    | 53 +++++++++++++++++++
 8 files changed, 164 insertions(+), 9 deletions(-)
 rename src/components/{input => signinPage}/Input.tsx (77%)
 create mode 100644 src/components/signinPage/LogoBox.tsx
 create mode 100644 src/components/signinPage/SubmitBtn.tsx
 create mode 100644 src/pages/signin/index.tsx

diff --git a/package-lock.json b/package-lock.json
index 3a118f305b..b4fa0df7c5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,7 @@
         "next": "13.5.6",
         "react": "^18",
         "react-dom": "^18",
+        "react-hook-form": "^7.51.2",
         "react-icons": "^5.0.1",
         "styled-components": "^6.1.8"
       },
@@ -3086,6 +3087,21 @@
         "react": "^18.2.0"
       }
     },
+    "node_modules/react-hook-form": {
+      "version": "7.51.2",
+      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.51.2.tgz",
+      "integrity": "sha512-y++lwaWjtzDt/XNnyGDQy6goHskFualmDlf+jzEZvjvz6KWDf7EboL7pUvRCzPTJd0EOPpdekYaQLEvvG6m6HA==",
+      "engines": {
+        "node": ">=12.22.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/react-hook-form"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17 || ^18"
+      }
+    },
     "node_modules/react-icons": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.0.1.tgz",
diff --git a/package.json b/package.json
index 37fbd46e27..0731d1d5b2 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     "next": "13.5.6",
     "react": "^18",
     "react-dom": "^18",
+    "react-hook-form": "^7.51.2",
     "react-icons": "^5.0.1",
     "styled-components": "^6.1.8"
   },
diff --git a/src/components/SearchBar.tsx b/src/components/SearchBar.tsx
index 88b99fa309..2c3c93e81f 100644
--- a/src/components/SearchBar.tsx
+++ b/src/components/SearchBar.tsx
@@ -52,7 +52,11 @@ function SearchBar() {
     if (key.key === "Enter" && value.trim() !== "") {
       const queryParams = new URLSearchParams();
       queryParams.set("search", value.trim());
-      router.push(`/folder?${queryParams.toString()}`);
+      console.log(queryParams.toString());
+      router.push({
+        pathname: "/folder",
+        query: `${queryParams.toString()}`,
+      });
     }
     if (value.trim() === "") {
       router.push(`/folder`);
@@ -67,7 +71,7 @@ function SearchBar() {
     <Container>
       <Icon src="Icons/Search.svg" alt="Search" />
       <Input
-        type="text"
+        type="search"
         value={value}
         onChange={onChange}
         placeholder="링크를 검색해 보세요."
diff --git a/src/components/input/Input.tsx b/src/components/signinPage/Input.tsx
similarity index 77%
rename from src/components/input/Input.tsx
rename to src/components/signinPage/Input.tsx
index 0fd89dd818..5970ec99d4 100644
--- a/src/components/input/Input.tsx
+++ b/src/components/signinPage/Input.tsx
@@ -1,8 +1,9 @@
 import Image from "next/image";
-import React, { InputHTMLAttributes, ReactNode, useRef, useState } from "react";
+import React, { InputHTMLAttributes, RefObject, useRef, useState } from "react";
 import styled from "styled-components";
 import setPwOff from "@/public/Icons/eye-off.svg";
 import setPwOn from "@/public/Icons/eye-on.svg";
+import { useForm } from "react-hook-form";
 
 type InputStyledProps = {
   $error?: boolean;
@@ -51,13 +52,21 @@ const ErrorMesage = styled.p`
 `;
 
 interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
-  error: boolean;
+  id: string;
+  placeholder: string;
+  error?: boolean;
+  label: string;
 }
 
-function Input({ id, type = "text", placeholder, error }: InputProps) {
+function Input({ id, type = "text", placeholder, error, label }: InputProps) {
   const [pwState, setPwState] = useState(false);
   const passwordRef = useRef<HTMLInputElement>(null);
 
+  const {
+    register,
+    formState: { errors },
+  } = useForm();
+
   const toggleEyesButton = () => {
     if (passwordRef.current) {
       if (pwState) {
@@ -73,10 +82,10 @@ function Input({ id, type = "text", placeholder, error }: InputProps) {
   return (
     <>
       <Layout>
-        <Label htmlFor={id}></Label>
+        <Label htmlFor={id}>{label}</Label>
         <InputForm
-          id={id}
           type={type}
+          {...register(id, { required: true })}
           placeholder={placeholder}
           ref={passwordRef}
           $error={error}
@@ -91,7 +100,9 @@ function Input({ id, type = "text", placeholder, error }: InputProps) {
           </ImgPosition>
         )}
       </Layout>
-      {error && <ErrorMesage>test</ErrorMesage>}
+      {errors.category?.type === "required" && (
+        <ErrorMesage>필수 입력사항입니다.</ErrorMesage>
+      )}
     </>
   );
 }
diff --git a/src/components/signinPage/LogoBox.tsx b/src/components/signinPage/LogoBox.tsx
new file mode 100644
index 0000000000..859e00d61e
--- /dev/null
+++ b/src/components/signinPage/LogoBox.tsx
@@ -0,0 +1,45 @@
+import React from "react";
+import logo from "@/public/Icons/logo.svg";
+import Image from "next/image";
+import Link from "next/link";
+import styled from "styled-components";
+
+const Layout = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+`;
+
+const Text = styled.p`
+  color: var(--black, #000);
+  font-family: Pretendard;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 24px; /* 150% */
+  margin-bottom: 30px;
+`;
+
+const LinkStyle = {
+  color: "#6D6AFE",
+  fontSize: "16px",
+  fontWeight: 600,
+};
+
+function LogoBox() {
+  return (
+    <Layout>
+      <Link href={`/`}>
+        <Image src={logo} alt="logo" width={210} height={38}></Image>
+      </Link>
+      <Text>
+        회원이 아니신가요?{" "}
+        <Link style={LinkStyle} href={`/`}>
+          회원 가입하기
+        </Link>
+      </Text>
+    </Layout>
+  );
+}
+
+export default LogoBox;
diff --git a/src/components/signinPage/SubmitBtn.tsx b/src/components/signinPage/SubmitBtn.tsx
new file mode 100644
index 0000000000..afe2e0a074
--- /dev/null
+++ b/src/components/signinPage/SubmitBtn.tsx
@@ -0,0 +1,25 @@
+import React, { ReactNode } from "react";
+import styled from "styled-components";
+
+const Submit = styled.button`
+  width: 100%;
+  padding: 16px 20px;
+  border-radius: 8px;
+  background: var(
+    --gra-purpleblue-to-skyblue,
+    linear-gradient(91deg, #6d6afe 0.12%, #6ae3fe 101.84%)
+  );
+  border: none;
+  color: var(--Grey-Light, #f5f5f5);
+  font-size: 18px;
+`;
+
+interface SubmitBtnProps {
+  children: ReactNode;
+}
+
+function SubmitBtn({ children }: SubmitBtnProps) {
+  return <Submit type="submit">{children}</Submit>;
+}
+
+export default SubmitBtn;
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 38b2bc4248..a8524803e8 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,7 +1,7 @@
 import Head from "next/head";
 import Image from "next/image";
 import { Inter } from "next/font/google";
-import Input from "../components/input/Input";
+import Input from "../components/signinPage/Input";
 
 const inter = Inter({ subsets: ["latin"] });
 
diff --git a/src/pages/signin/index.tsx b/src/pages/signin/index.tsx
new file mode 100644
index 0000000000..2f21d8843c
--- /dev/null
+++ b/src/pages/signin/index.tsx
@@ -0,0 +1,53 @@
+import React from "react";
+import Input from "@/src/components/signinPage/Input";
+import styled from "styled-components";
+import SubmitBtn from "@/src/components/signinPage/SubmitBtn";
+import LogoBox from "@/src/components/signinPage/LogoBox";
+import { useForm } from "react-hook-form";
+
+const BackGround = styled.div`
+  width: 100%;
+  padding: 150px 0px 253px 0px;
+  margin: 0 auto;
+  background: var(--Linkbrary-bg, #f0f6ff);
+`;
+
+const Layout = styled.div`
+  width: 400px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin: 0 auto;
+`;
+
+const Form = styled.form`
+  display: flex;
+  flex-direction: column;
+  gap: 30px;
+`;
+function SigninPage() {
+  return (
+    <BackGround>
+      <Layout>
+        <LogoBox />
+        <Form action="">
+          <Input
+            label="이메일"
+            id="user_email"
+            type="email"
+            placeholder="이메일을 입력해 주세요"
+          ></Input>
+          <Input
+            label="비밀번호"
+            id="user_pw"
+            type="password"
+            placeholder="비밀번호를 입력해 주세요"
+          ></Input>
+          <SubmitBtn>로그인</SubmitBtn>
+        </Form>
+      </Layout>
+    </BackGround>
+  );
+}
+
+export default SigninPage;