[정성현] sprint11

src/apis/apis.ts

@@ -1,9 +1,19 @@
-import { StringObj, GetArticlesRes, GetArticlesParams } from "./apis.type";
+import {
+  StringObj,
+  GetArticlesRes,
+  GetArticlesParams,
+  PostSignUpParams,
+  PostSignUpRes,
+  PostLogInParams,
+  PostLogInRes,
+} from "./apis.type";
 
 const BASE_URL = "https://panda-market-api.vercel.app/";
 
 const PATH = {
   ARTICLE: "articles",
+  SIGNUP: "auth/signUp",
+  LOGIN: "auth/signIn",
 };
 
 async function processResponse(response: Response) {
@@ -30,3 +40,49 @@ export async function getArticles({
   const response = await fetch(url);
   return processResponse(response);
 }
+
+export async function postSignUp({
+  email,
+  nickname,
+  password,
+  passwordConfirmation,
+}: PostSignUpParams): Promise<PostSignUpRes> {
+  const url = new URL(PATH.SIGNUP, BASE_URL);
+  const headObj = new Headers({
+    "Content-Type": "application/json",
+  });
+  const bodyObj: StringObj = {
+    email,
+    nickname,
+    password,
+    passwordConfirmation,
+  };
+
+  const response = await fetch(url, {
+    method: "post",
+    headers: headObj,
+    body: JSON.stringify(bodyObj),
+  });
+  return processResponse(response);
+}
+
+export async function postLogIn({
+  email,
+  password,
+}: PostLogInParams): Promise<PostLogInRes> {
+  const url = new URL(PATH.LOGIN, BASE_URL);
+  const headObj = new Headers({
+    "Content-Type": "application/json",
+  });
+  const bodyObj: StringObj = {
+    email,
+    password,
+  };
+
+  const response = await fetch(url, {
+    method: "post",
+    headers: headObj,
+    body: JSON.stringify(bodyObj),
+  });
+  return processResponse(response);
+}

src/apis/apis.type.ts

@@ -27,3 +27,30 @@ export interface ArticleProps {
 }
 export type GetArticlesParams = GetListParams<ArticleOrderType>;
 export type GetArticlesRes = GetListRes<ArticleProps>;
+
+interface UserProps {
+  user: {
+    id: number;
+    nickname: string;
+    image: string | null;
+    createdAt: string;
+    updatedAt: string;
+    email: string;
+  };
+  accessToken: string;
+  refreshToken: string;
+}
+
+export interface PostSignUpParams {
+  email: string;
+  nickname: string;
+  password: string;
+  passwordConfirmation: string;
+}
+export type PostSignUpRes = UserProps;
+
+export interface PostLogInParams {
+  email: string;
+  password: string;
+}
+export type PostLogInRes = UserProps;

src/components/layout/Header.module.css

@@ -62,3 +62,16 @@
 .profile {
   width: 40px;
 }
+
+.logInButton {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 128px;
+  height: 48px;
+  border-radius: 8px;
+  background-color: var(--blue-100);
+  font-size: var(--size-lg);
+  font-weight: var(--semibold);
+  color: var(--gray-100);
+}

src/components/layout/Header.tsx

@@ -1,3 +1,4 @@
+import { useState, useEffect } from "react";
 import Link from "next/link";
 import Image from "next/image";
 import { useRouter } from "next/router";
@@ -6,6 +7,10 @@ import styles from "./Header.module.css";
 
 export default function Header() {
   const path = useRouter().pathname;
+  const [token, setToken] = useState<string | null>(null);
+  useEffect(() => {
+    setToken(window.localStorage.getItem("accessToken"));
+  }, []);
 
   return (
     <header className={styles.header}>
@@ -30,7 +35,17 @@ export default function Header() {
           </li>
         </ul>
       </nav>
-      <Image className={styles.profile} src={profileImage} alt="프로필 사진" />
+      {token ? (
+        <Image
+          className={styles.profile}
+          src={profileImage}
+          alt="프로필 사진"
+        />
+      ) : (
+        <Link className={styles.logInButton} href="/login">
+          로그인
+        </Link>
+      )}
     </header>
   );
 }

src/components/pages/account/LogInForm.module.css

@@ -0,0 +1,87 @@
+.form {
+  display: flex;
+  flex-direction: column;
+}
+
+.formField {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+}
+
+.label {
+  margin-bottom: 16px;
+  font-size: var(--size-2lg);
+  font-weight: bold;
+}
+@media (max-width: 767px) {
+  .label {
+    margin-bottom: 8px;
+    font-size: var(--size-md);
+  }
+}
+
+.input {
+  display: block;
+  width: 100%;
+  padding: 16px 24px;
+  border-radius: 12px;
+  background-color: var(--gray-100);
+  border: 2px solid #00000000;
+  outline: none;
+  font-size: var(--size-lg);
+}
+@media (max-width: 767px) {
+  .input {
+    font-size: var(--size-md);
+  }
+}
+
+.input::placeholder {
+  color: var(--gray-400);
+}
+
+.input:focus {
+  border: 2px solid var(--blue-100);
+}
+
+.input_error {
+  border: 2px solid var(--red);
+}
+
+.toggleButton {
+  position: absolute;
+  top: calc(43px + (60px / 2) - (24px / 2));
+  right: 24px;
+}
+@media (max-width: 767px) {
+  .toggleButton {
+    top: calc(29px + (60px / 2) - (24px / 2));
+  }
+}
+
+.error {
+  height: 27px;
+  padding: 3px 16px;
+  font-size: var(--size-md);
+  color: white;
+}
+
+.error_active {
+  color: var(--red);
+}
+
+.submitButton {
+  margin-top: 8px;
+  padding: 13px 0;
+  border-radius: 9999px;
+  background-color: var(--blue-100);
+  text-align: center;
+  font-size: var(--size-xl);
+  font-weight: 500;
+  color: var(--gray-100);
+}
+
+.submitButton:disabled {
+  background-color: var(--gray-400);
+}

src/components/pages/account/LogInForm.tsx

@@ -0,0 +1,83 @@
+import { ChangeEvent, FormEvent, useState } from "react";
+import { useRouter } from "next/router";
+import Image from "next/image";
+import { PostLogInParams, PostLogInRes } from "@/apis/apis.type";
+import { useQuery } from "@/hooks/useQuery";
+import { postLogIn } from "@/apis/apis";
+import closedEye from "#/icons/eye_close.svg";
+import styles from "./LogInForm.module.css";
+
+export default function LogInForm() {
+  const [formData, setFormData] = useState<PostLogInParams>({
+    email: "",
+    password: "",
+  });
+  const { error, data, query } = useQuery<PostLogInParams, PostLogInRes>(
+    postLogIn
+  );
+  const { replace } = useRouter();
+
+  const handleFormSubmit = async (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    await query(formData);
+
+    if (error || !data) {
+      alert("로그인에 실패했습니다.\n다시 시도해 주세요!");
+      return;
+    }
+
+    window.localStorage.setItem("accessToken", data.accessToken);
+    window.localStorage.setItem("refreshToken", data.refreshToken);
+    alert("로그인에 성공했습니다.\n즐거운 판다마켓 되세요!");
+    replace("/");
+  };
+
+  const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
+    setFormData((prevData) => {
+      const nextData = { ...prevData };
+      nextData[e.target.name as keyof PostLogInParams] = e.target.value;
+      return nextData;
+    });
+  };
+
+  return (
+    <form className={styles.form} method="post" onSubmit={handleFormSubmit}>
+      <div className={styles.formField}>
+        <label className={styles.label} htmlFor="emailInput">
+          이메일
+        </label>
+        <input
+          className={styles.input}
+          id="emailInput"
+          name="email"
+          type="email"
+          placeholder="이메일을 입력해 주세요"
+          value={formData.email}
+          onChange={handleInputChange}
+        />
+        <span className={styles.error}></span>
+      </div>
+      <div className={styles.formField}>
+        <label className={styles.label} htmlFor="passwordInput">
+          비밀번호
+        </label>
+        <input
+          className={styles.input}
+          id="passwordInput"
+          name="password"
+          type="password"
+          placeholder="비밀번호를 입력해 주세요"
+          value={formData.password}
+          onChange={handleInputChange}
+        />
+        <button className={styles.toggleButton} type="button">
+          <Image src={closedEye} alt="비밀번호 보기" />
+        </button>
+        <span className={styles.error}></span>
+      </div>
+      <button className={styles.submitButton} type="submit">
+        로그인
+      </button>
+    </form>
+  );
+}