design: 로그인 페이지 UI 생성

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"
   },

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="링크를 검색해 보세요."

src/components/input/Input.tsx → 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>
+      )}
     </>
   );
 }

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;

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;

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"] });
 

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;