From 9b4a673013309756fbdba698d961fc19b590ae8e Mon Sep 17 00:00:00 2001
From: twtwkim <alfog23@gmail.com>
Date: Thu, 5 Dec 2024 23:50:45 +0900
Subject: [PATCH 1/3] complete mission

---
 package-lock.json                             |  49 +++++
 package.json                                  |   2 +
 public/index.html                             |   2 +-
 src/App.tsx                                   |  17 +-
 src/api/api.ts                                |  46 ++++-
 src/components/LandingPage/Header.css         |  48 +++++
 src/components/LandingPage/Header.tsx         |  39 +++-
 src/components/LoginPage/InputField.tsx       |  73 ++++---
 src/components/LoginPage/Login.tsx            | 122 ++++++------
 src/components/LoginPage/LoginButton.tsx      |  20 +-
 src/components/LoginPage/SignUpLink.css       |   5 +
 .../RegisterPage/RegisterInputField.tsx       |  25 +--
 src/components/RegisterPage/SignButton.tsx    |  20 +-
 src/components/RegisterPage/Signup.tsx        | 181 ++++++++----------
 src/css/Palette.css                           |   2 +
 15 files changed, 397 insertions(+), 254 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 49916c6ef..96e69ee24 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,8 +15,10 @@
         "@types/node": "^16.18.119",
         "@types/react": "^18.3.12",
         "@types/react-dom": "^18.3.1",
+        "axios": "^1.7.9",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
+        "react-hook-form": "^7.53.2",
         "react-router-dom": "^6.28.0",
         "react-scripts": "5.0.1",
         "typescript": "^4.9.5",
@@ -5020,6 +5022,31 @@
         "node": ">=4"
       }
     },
+    "node_modules/axios": {
+      "version": "1.7.9",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.9.tgz",
+      "integrity": "sha512-LhLcE7Hbiryz8oMDdDptSrWowmB4Bl6RCt6sIJKpRB4XtVf0iEgewX3au/pJqm+Py1kCASkb/FFKjxQaLtxJvw==",
+      "license": "MIT",
+      "dependencies": {
+        "follow-redirects": "^1.15.6",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
+    "node_modules/axios/node_modules/form-data": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.1.tgz",
+      "integrity": "sha512-tzN8e4TX8+kkxGPK8D5u0FNmjPUjw3lwC9lSLxxoB/+GtsJG91CO8bSWy73APlgAZzZbXEYZJuxjkHH2w+Ezhw==",
+      "license": "MIT",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/axobject-query": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.1.0.tgz",
@@ -13656,6 +13683,12 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
+      "license": "MIT"
+    },
     "node_modules/psl": {
       "version": "1.10.0",
       "resolved": "https://registry.npmjs.org/psl/-/psl-1.10.0.tgz",
@@ -13939,6 +13972,22 @@
       "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==",
       "license": "MIT"
     },
+    "node_modules/react-hook-form": {
+      "version": "7.53.2",
+      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.53.2.tgz",
+      "integrity": "sha512-YVel6fW5sOeedd1524pltpHX+jgU2u3DSDtXEaBORNdqiNrsX/nUI/iGXONegttg0mJVnfrIkiV0cmTU6Oo2xw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/react-hook-form"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17 || ^18 || ^19"
+      }
+    },
     "node_modules/react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
diff --git a/package.json b/package.json
index 554ad14d1..f693bc3d1 100644
--- a/package.json
+++ b/package.json
@@ -10,8 +10,10 @@
     "@types/node": "^16.18.119",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
+    "axios": "^1.7.9",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-hook-form": "^7.53.2",
     "react-router-dom": "^6.28.0",
     "react-scripts": "5.0.1",
     "typescript": "^4.9.5",
diff --git a/public/index.html b/public/index.html
index c2c59b73d..9d26a33c0 100644
--- a/public/index.html
+++ b/public/index.html
@@ -18,7 +18,7 @@
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="/manifest" href="%PUBLIC_URL%/manifest.json" />
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
diff --git a/src/App.tsx b/src/App.tsx
index e06bbd2d2..0477af97e 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,4 +1,4 @@
-import { Route, Routes } from "react-router-dom";
+import { Navigate, Route, Routes } from "react-router-dom";
 import "./App.css";
 import MainPage from "./page/MainPage";
 import AddItemPage from "./page/AddItemPage";
@@ -11,11 +11,22 @@ import LoginPage from "./page/LoginPage";
 import RegisterPage from "./page/RegisterPage";
 
 function App() {
+  const isAccessToken = localStorage.getItem("access_token");
   return (
     <Routes>
       <Route path={ROUTES.LANDING} element={<LandingPage />} />
-      <Route path={ROUTES.LOGIN} element={<LoginPage />} />
-      <Route path={ROUTES.REGISTER} element={<RegisterPage />} />
+      <Route
+        path={ROUTES.LOGIN}
+        element={
+          isAccessToken ? <Navigate to={ROUTES.LANDING} /> : <LoginPage />
+        }
+      />
+      <Route
+        path={ROUTES.REGISTER}
+        element={
+          isAccessToken ? <Navigate to={ROUTES.LANDING} /> : <RegisterPage />
+        }
+      />
       <Route path={ROUTES.PRIVACY} element={<Privacy />} />
       <Route path={ROUTES.FAQ} element={<FAQ />} />
       <Route path={ROUTES.MAIN}>
diff --git a/src/api/api.ts b/src/api/api.ts
index e8919f5b0..1c6e561bc 100644
--- a/src/api/api.ts
+++ b/src/api/api.ts
@@ -1,4 +1,4 @@
-const API_BASE_URL = "https://panda-market-api.vercel.app";
+export const API_BASE_URL = "https://panda-market-api.vercel.app";
 
 async function fetchApi(url: string, options = {}) {
   try {
@@ -62,3 +62,47 @@ export async function updateCommentsById(
 
   return fetchApi(url, options);
 }
+
+interface SignupParams {
+  email: string;
+  nickname: string;
+  password: string;
+  passwordConfirmation: string;
+}
+
+export async function signup(data: SignupParams) {
+  const url = `${API_BASE_URL}/auth/signUp`;
+  const options = {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify({
+      email: data.email,
+      nickname: data.nickname,
+      password: data.password,
+      passwordConfirmation: data.passwordConfirmation,
+    }),
+  };
+  return fetchApi(url, options);
+}
+
+interface LoginParams {
+  email: string;
+  password: string;
+}
+
+export async function login(data: LoginParams) {
+  const url = `${API_BASE_URL}/auth/signIn`;
+  const options = {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify({
+      email: data.email,
+      password: data.password,
+    }),
+  };
+  return fetchApi(url, options);
+}
diff --git a/src/components/LandingPage/Header.css b/src/components/LandingPage/Header.css
index a4f099453..af7af2c33 100644
--- a/src/components/LandingPage/Header.css
+++ b/src/components/LandingPage/Header.css
@@ -45,11 +45,51 @@
   text-decoration: none;
 }
 
+.profile-container {
+  position: relative;
+  display: inline-block;
+}
+
+.profile-image {
+  cursor: pointer;
+}
+
+.dropdown {
+  position: absolute;
+  top: 50px;
+  right: 0;
+  background-color: white;
+  border: 1px solid var(--white100);
+  border-bottom: none;
+  border-radius: 8px;
+  padding: 16px 0;
+  width: 139px;
+  height: 51px;
+  text-align: center;
+}
+
+.logout-button {
+  background: none;
+  border: none;
+  color: var(--gray500);
+  cursor: pointer;
+  font-weight: 400;
+  font-size: 16px;
+}
+
 /* 반응형 - Tablet*/
 @media screen and (max-width: 1199px) and (min-width: 768px) {
   .header {
     padding: 0 24px;
   }
+  .dropdown {
+    width: 102px;
+    height: 49px;
+  }
+
+  .logout-button {
+    font-size: 14px;
+  }
 }
 
 /* 반응형 - Mobile*/
@@ -57,4 +97,12 @@
   .header {
     padding: 0 16px;
   }
+  .dropdown {
+    width: 102px;
+    height: 49px;
+  }
+
+  .logout-button {
+    font-size: 14px;
+  }
 }
diff --git a/src/components/LandingPage/Header.tsx b/src/components/LandingPage/Header.tsx
index 00b16e72e..445791a91 100644
--- a/src/components/LandingPage/Header.tsx
+++ b/src/components/LandingPage/Header.tsx
@@ -1,9 +1,22 @@
-import React from "react";
+import React, { useState } from "react";
 import { Link } from "react-router-dom";
 import "./Header.css";
 import logo from "../../assets/image/Property 1=lg.png";
+import profile from "../../assets/image/size=large.png";
 
 function Header() {
+  const isAccessToken = localStorage.getItem("access_token");
+  const [isDropdownVisible, setIsDropdownVisible] = useState(false);
+
+  const toggleDropdown = () => {
+    setIsDropdownVisible((prev) => !prev);
+  };
+
+  const handleLogout = () => {
+    localStorage.clear();
+    window.location.reload();
+  };
+
   return (
     <header className="header">
       <Link to="/">
@@ -11,9 +24,27 @@ function Header() {
           <img className="logo" src={logo} alt="판다마켓" />
         </div>
       </Link>
-      <Link to="/login">
-        <button className="button header-button">로그인</button>
-      </Link>
+      {isAccessToken ? (
+        <div className="profile-container">
+          <img
+            src={profile}
+            alt="프로필 이미지"
+            className="profile-image"
+            onClick={toggleDropdown}
+          />
+          {isDropdownVisible && (
+            <div className="dropdown">
+              <button className="logout-button" onClick={handleLogout}>
+                로그아웃
+              </button>
+            </div>
+          )}
+        </div>
+      ) : (
+        <Link to="/login">
+          <button className="button header-button">로그인</button>
+        </Link>
+      )}
     </header>
   );
 }
diff --git a/src/components/LoginPage/InputField.tsx b/src/components/LoginPage/InputField.tsx
index 628b5c3c0..0ba5ca5ab 100644
--- a/src/components/LoginPage/InputField.tsx
+++ b/src/components/LoginPage/InputField.tsx
@@ -1,4 +1,4 @@
-import React, { ChangeEvent, useState } from "react";
+import React, { forwardRef, useState } from "react";
 import "./InputField.css";
 import visible from "../../assets/image/gnb/btn_visibility_off_24px.png";
 import unvisible from "../../assets/image/gnb/btn_visibility_on_24px.png";
@@ -6,49 +6,46 @@ import unvisible from "../../assets/image/gnb/btn_visibility_on_24px.png";
 interface InputFieldProps {
   label: string;
   type: string;
-  value: string;
-  onChange: (e: ChangeEvent<HTMLInputElement>) => void;
-  error: string;
+  name: string;
   placeholder: string;
+  error?: string;
 }
 
-const InputField = ({
-  label,
-  type,
-  value,
-  onChange,
-  error,
-  placeholder,
-}: InputFieldProps) => {
-  const [isPasswordVisible, setIsPasswordVisible] = useState<boolean>(false);
+const InputField = forwardRef<HTMLInputElement, InputFieldProps>(
+  ({ label, type, name, error, placeholder, ...rest }, ref) => {
+    const [isPasswordVisible, setIsPasswordVisible] = useState(false);
 
-  const togglePasswordVisibility = () => {
-    setIsPasswordVisible((prev) => !prev);
-  };
+    const togglePasswordVisibility = () => {
+      setIsPasswordVisible((prev) => !prev);
+    };
 
-  return (
-    <div>
-      <p className="input-name">{label}</p>
-      <div className="input-pass-box">
-        <input
-          className={`input-tag ${error ? "input-error" : ""}`}
-          type={type === "password" && !isPasswordVisible ? "password" : "text"}
-          value={value}
-          onChange={onChange}
-          placeholder={placeholder}
-        />
-        {type === "password" && (
-          <img
-            src={isPasswordVisible ? unvisible : visible}
-            alt={isPasswordVisible ? "Hide password" : "Show password"}
-            onClick={togglePasswordVisibility}
-            className="password-icon"
+    return (
+      <div>
+        <p className="input-name">{label}</p>
+        <div className="input-pass-box">
+          <input
+            ref={ref}
+            className={`input-tag ${error ? "input-error" : ""}`}
+            type={
+              type === "password" && !isPasswordVisible ? "password" : "text"
+            }
+            placeholder={placeholder}
+            name={name}
+            {...rest}
           />
-        )}
+          {type === "password" && (
+            <img
+              src={isPasswordVisible ? unvisible : visible}
+              alt={isPasswordVisible ? "Hide password" : "Show password"}
+              onClick={togglePasswordVisibility}
+              className="password-icon"
+            />
+          )}
+        </div>
+        {error && <div className="error">{error}</div>}
       </div>
-      {error && <div className="error">{error}</div>}
-    </div>
-  );
-};
+    );
+  }
+);
 
 export default InputField;
diff --git a/src/components/LoginPage/Login.tsx b/src/components/LoginPage/Login.tsx
index 89c44bcc6..842449615 100644
--- a/src/components/LoginPage/Login.tsx
+++ b/src/components/LoginPage/Login.tsx
@@ -1,53 +1,46 @@
 import React, { ChangeEvent, useState, useEffect } from "react";
-import { Link } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
+import { SubmitHandler, useForm } from "react-hook-form";
 import InputField from "./InputField";
 import LoginButton from "./LoginButton";
 import SocialLogin from "./SocialLogin";
 import SignUpLink from "./SignUpLink";
 import "./Login.css";
 import logo from "../../assets/image/Property 1=lg.png";
+import { login } from "../../api/api";
 
-const Login = () => {
-  const [email, setEmail] = useState<string>("");
-  const [password, setPassword] = useState<string>("");
-  const [emailError, setEmailError] = useState<string>("");
-  const [passwordError, setPasswordError] = useState<string>("");
-  const [isButtonActive, setIsButtonActive] = useState<boolean>(false);
-
-  useEffect(() => {
-    const isEmailValid = email && !emailError;
-    const isPasswordValid = password && !passwordError;
-    setIsButtonActive(!!(isEmailValid && isPasswordValid));
-  }, [email, password, emailError, passwordError]);
-
-  const validateEmail = (value: string) => {
-    if (!value) return "이메일을 입력해주세요.";
-    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value))
-      return "잘못된 이메일 형식입니다.";
-    return "";
-  };
-
-  const validatePassword = (value: string) => {
-    if (!value) return "비밀번호를 입력해주세요.";
-    if (value.length < 8) return "비밀번호를 8자 이상 입력해주세요.";
-    return "";
-  };
-
-  const handleEmailChange = (e: ChangeEvent<HTMLInputElement>) => {
-    const value = e.target.value;
-    setEmail(value);
-    setEmailError(validateEmail(value));
-  };
+interface FormValues {
+  email: string;
+  password: string;
+}
 
-  const handlePasswordChange = (e: ChangeEvent<HTMLInputElement>) => {
-    const value = e.target.value;
-    setPassword(value);
-    setPasswordError(validatePassword(value));
-  };
+const Login = () => {
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isValid },
+  } = useForm<FormValues>({ mode: "onChange" });
+  const navigate = useNavigate();
 
-  const handleLoginButtonClick = () => {
-    if (!email) setEmailError("이메일을 입력해주세요.");
-    if (!password) setPasswordError("비밀번호를 입력해주세요.");
+  const onsubmit: SubmitHandler<FormValues> = async (data) => {
+    try {
+      const res = await login(data);
+      localStorage.setItem("access_token", res.accessToken);
+      localStorage.setItem("refresh_token", res.refreshToken);
+      alert("로그인이 정상적으로 완료되었습니다.");
+      navigate("/");
+      console.log(res);
+    } catch (error: any) {
+      console.error(
+        "회원가입 실패:",
+        error.res?.data?.message || error.message
+      );
+      alert(
+        `회원가입 실패: ${
+          error.response?.data?.message || "회원가입 중 오류가 발생했습니다."
+        }`
+      );
+    }
   };
 
   return (
@@ -59,26 +52,35 @@ const Login = () => {
           </Link>
         </section>
         <section className="sub-box">
-          <InputField
-            label="이메일"
-            type="email"
-            value={email}
-            onChange={handleEmailChange}
-            error={emailError}
-            placeholder="이메일을 입력해주세요"
-          />
-          <InputField
-            label="비밀번호"
-            type="password"
-            value={password}
-            onChange={handlePasswordChange}
-            error={passwordError}
-            placeholder="비밀번호를 입력해주세요"
-          />
-          <LoginButton
-            isActive={isButtonActive}
-            onClick={handleLoginButtonClick}
-          />
+          <form onSubmit={handleSubmit(onsubmit)}>
+            <InputField
+              label="이메일"
+              type="email"
+              placeholder="이메일을 입력해주세요"
+              error={errors.email?.message}
+              {...register("email", {
+                required: { value: true, message: "이메일을 입력해주세요." },
+                pattern: {
+                  value: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
+                  message: "잘못된 이메일 형식입니다.",
+                },
+              })}
+            />
+            <InputField
+              label="비밀번호"
+              type="password"
+              placeholder="비밀번호를 입력해주세요"
+              error={errors.password?.message}
+              {...register("password", {
+                required: "비밀번호를 입력해주세요",
+                minLength: {
+                  value: 8,
+                  message: "비밀번호를 8자 이상 입력해주세요.",
+                },
+              })}
+            />
+            <LoginButton isActive={isValid} />
+          </form>
           <SocialLogin />
           <SignUpLink />
         </section>
diff --git a/src/components/LoginPage/LoginButton.tsx b/src/components/LoginPage/LoginButton.tsx
index e514a3ade..4d9902d41 100644
--- a/src/components/LoginPage/LoginButton.tsx
+++ b/src/components/LoginPage/LoginButton.tsx
@@ -1,25 +1,17 @@
 import React from "react";
-import { useNavigate } from "react-router-dom";
 import "./LoginButton.css";
 
 interface LoginButtonProps {
   isActive: boolean;
-  onClick: () => void;
 }
 
-const LoginButton = ({ isActive, onClick }: LoginButtonProps) => {
-  const navigate = useNavigate();
-
-  const handleClick = () => {
-    if (isActive) {
-      navigate("/items");
-    }
-    onClick();
-  };
-
+const LoginButton = ({ isActive }: LoginButtonProps) => {
   return (
-    <div className="login-button-box" onClick={handleClick}>
-      <button className={`login-button ${isActive ? "active" : ""}`}>
+    <div className="login-button-box">
+      <button
+        type="submit"
+        className={`login-button ${isActive ? "active" : ""}`}
+      >
         로그인
       </button>
     </div>
diff --git a/src/components/LoginPage/SignUpLink.css b/src/components/LoginPage/SignUpLink.css
index 142ea3dcb..f1065e824 100644
--- a/src/components/LoginPage/SignUpLink.css
+++ b/src/components/LoginPage/SignUpLink.css
@@ -11,3 +11,8 @@
 .to-signup-link {
   color: var(--blue);
 }
+
+.tosignup-button {
+  border: none;
+  background-color: var(--white);
+}
diff --git a/src/components/RegisterPage/RegisterInputField.tsx b/src/components/RegisterPage/RegisterInputField.tsx
index 0d25e9f23..9ed57d861 100644
--- a/src/components/RegisterPage/RegisterInputField.tsx
+++ b/src/components/RegisterPage/RegisterInputField.tsx
@@ -1,4 +1,4 @@
-import React, { ChangeEvent, useState } from "react";
+import React, { forwardRef, useState } from "react";
 import "./RegisterInputField.css";
 import visible from "../../assets/image/gnb/btn_visibility_off_24px.png";
 import unvisible from "../../assets/image/gnb/btn_visibility_on_24px.png";
@@ -8,21 +8,14 @@ interface RegisterInputFieldProps {
   type: string;
   name: string;
   placeholder: string;
-  value: string;
-  onChange: (e: ChangeEvent<HTMLInputElement>) => void;
   error?: string;
 }
 
-const RegisterInputField = ({
-  label,
-  type,
-  name,
-  placeholder,
-  value,
-  onChange,
-  error,
-}: RegisterInputFieldProps) => {
-  const [isPasswordVisible, setIsPasswordVisible] = useState<boolean>(false);
+const RegisterInputField = forwardRef<
+  HTMLInputElement,
+  RegisterInputFieldProps
+>(({ label, type, name, placeholder, error, ...rest }, ref) => {
+  const [isPasswordVisible, setIsPasswordVisible] = useState(false);
 
   const togglePasswordVisibility = () => {
     setIsPasswordVisible((prev) => !prev);
@@ -33,12 +26,12 @@ const RegisterInputField = ({
       <p className="input-name">{label}</p>
       <div className="input-pass-box">
         <input
+          ref={ref}
           className={`input-tag ${error ? "input-error" : ""}`}
           type={type === "password" && !isPasswordVisible ? "password" : "text"}
           name={name}
           placeholder={placeholder}
-          value={value}
-          onChange={onChange}
+          {...rest}
         />
         {type === "password" && (
           <img
@@ -52,6 +45,6 @@ const RegisterInputField = ({
       {error && <div className="error">{error}</div>}
     </div>
   );
-};
+});
 
 export default RegisterInputField;
diff --git a/src/components/RegisterPage/SignButton.tsx b/src/components/RegisterPage/SignButton.tsx
index 310767a74..d737cbcc7 100644
--- a/src/components/RegisterPage/SignButton.tsx
+++ b/src/components/RegisterPage/SignButton.tsx
@@ -1,25 +1,17 @@
 import React from "react";
-import { useNavigate } from "react-router-dom";
 import "./SignButton.css";
 
 interface SignButtonProps {
   isActive: boolean;
-  onClick: () => void;
 }
 
-const SignButton = ({ isActive, onClick }: SignButtonProps) => {
-  const navigate = useNavigate();
-
-  const handleClick = () => {
-    if (isActive) {
-      alert("회원가입이 정상적으로 완료되었습니다.");
-      navigate("/login");
-    }
-    onClick();
-  };
+const SignButton = ({ isActive }: SignButtonProps) => {
   return (
-    <div className="sign-button-box" onClick={handleClick}>
-      <button className={`sign-button ${isActive ? "active" : ""}`}>
+    <div className="sign-button-box">
+      <button
+        type="submit"
+        className={`sign-button ${isActive ? "active" : ""}`}
+      >
         회원가입
       </button>
     </div>
diff --git a/src/components/RegisterPage/Signup.tsx b/src/components/RegisterPage/Signup.tsx
index 60b226b24..6ff182320 100644
--- a/src/components/RegisterPage/Signup.tsx
+++ b/src/components/RegisterPage/Signup.tsx
@@ -1,129 +1,104 @@
-import React, { ChangeEvent, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { SubmitHandler, useForm } from "react-hook-form";
 import Logo from "./Logo";
 import RegisterInputField from "./RegisterInputField";
 import SignButton from "./SignButton";
 import SocialLogin from "../LoginPage/SocialLogin";
 import "./Signup.css";
+import { signup } from "../../api/api";
 
 interface FormValues {
   email: string;
-  username: string;
+  nickname: string;
   password: string;
-  confirmPassword: string;
-}
-
-interface Errors {
-  email: string;
-  username: string;
-  password: string;
-  confirmPassword: string;
+  passwordConfirmation: string;
 }
 
 const Signup = () => {
-  const [formValues, setFormValues] = useState<FormValues>({
-    email: "",
-    username: "",
-    password: "",
-    confirmPassword: "",
-  });
-
-  const [errors, setErrors] = useState<Errors>({
-    email: "",
-    username: "",
-    password: "",
-    confirmPassword: "",
+  const {
+    register,
+    handleSubmit,
+    watch,
+    formState: { errors, isValid },
+  } = useForm<FormValues>({
+    mode: "onChange",
   });
+  const navigate = useNavigate();
 
-  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
-    const { name, value } = e.target;
-    setFormValues({ ...formValues, [name]: value });
-    validateField(name as keyof FormValues, value);
-  };
-
-  const handleRegisterButtonClick = () => {
-    if (!formValues.email)
-      setErrors((prev) => ({ ...prev, email: "이메일을 입력해주세요." }));
-    if (!formValues.username)
-      setErrors((prev) => ({ ...prev, username: "닉네임을 입력해주세요." }));
-    if (!formValues.password)
-      setErrors((prev) => ({ ...prev, password: "비밀번호를 입력해주세요." }));
-    if (!formValues.confirmPassword)
-      setErrors((prev) => ({
-        ...prev,
-        confirmPassword: "비밀번호를 다시 입력해주세요.",
-      }));
-  };
-
-  const validateField = (name: keyof FormValues, value: string) => {
-    let errorMsg = "";
-
-    if (name === "email") {
-      if (!value) errorMsg = "이메일을 입력해주세요.";
-      else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value))
-        errorMsg = "잘못된 이메일 형식입니다.";
-    } else if (name === "username") {
-      if (!value) errorMsg = "닉네임을 입력해주세요.";
-    } else if (name === "password") {
-      if (!value) errorMsg = "비밀번호를 입력해주세요.";
-      else if (value.length < 8) errorMsg = "비밀번호를 8자 이상 입력해주세요.";
-    } else if (name === "confirmPassword") {
-      if (!value) errorMsg = "비밀번호를 다시 한 번 입력해주세요.";
-      else if (value !== formValues.password)
-        errorMsg = "비밀번호가 일치하지 않습니다.";
+  const onSubmit: SubmitHandler<FormValues> = async (data) => {
+    try {
+      await signup(data);
+      alert("회원가입이 정상적으로 완료되었습니다.");
+      navigate("/login");
+    } catch (error: any) {
+      console.error(
+        "회원가입 실패:",
+        error.res?.data?.message || error.message
+      );
+      alert(
+        `회원가입 실패: ${
+          error.response?.data?.message || "회원가입 중 오류가 발생했습니다."
+        }`
+      );
     }
-
-    setErrors((prevErrors) => ({ ...prevErrors, [name]: errorMsg }));
   };
 
-  const isFormValid =
-    Object.values(errors).every((err) => !err) &&
-    Object.values(formValues).every((val) => val);
+  const password = watch("password");
 
   return (
     <main className="sign-main">
       <section className="sign-main-box">
         <Logo />
         <section className="sub-box">
-          <RegisterInputField
-            label="이메일"
-            type="email"
-            name="email"
-            placeholder="이메일을 입력해주세요"
-            value={formValues.email}
-            onChange={handleChange}
-            error={errors.email}
-          />
-          <RegisterInputField
-            label="닉네임"
-            type="text"
-            name="username"
-            placeholder="닉네임을 입력해주세요"
-            value={formValues.username}
-            onChange={handleChange}
-            error={errors.username}
-          />
-          <RegisterInputField
-            label="비밀번호"
-            type="password"
-            name="password"
-            placeholder="비밀번호를 입력해주세요"
-            value={formValues.password}
-            onChange={handleChange}
-            error={errors.password}
-          />
-          <RegisterInputField
-            label="비밀번호 확인"
-            type="password"
-            name="confirmPassword"
-            placeholder="비밀번호를 다시 한 번 입력해주세요"
-            value={formValues.confirmPassword}
-            onChange={handleChange}
-            error={errors.confirmPassword}
-          />
-          <SignButton
-            isActive={isFormValid}
-            onClick={handleRegisterButtonClick}
-          />
+          <form onSubmit={handleSubmit(onSubmit)}>
+            <RegisterInputField
+              label="이메일"
+              type="email"
+              placeholder="이메일을 입력해주세요"
+              error={errors.email?.message}
+              {...register("email", {
+                required: { value: true, message: "이메일을 입력해주세요" },
+                pattern: {
+                  value: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
+                  message: "잘못된 이메일 형식입니다.",
+                },
+              })}
+            />
+            <RegisterInputField
+              label="닉네임"
+              type="text"
+              placeholder="닉네임을 입력해주세요"
+              error={errors.nickname?.message}
+              {...register("nickname", {
+                required: "닉네임을 입력해주세요.",
+              })}
+            />
+            <RegisterInputField
+              label="비밀번호"
+              type="password"
+              placeholder="비밀번호를 입력해주세요"
+              error={errors.password?.message}
+              {...register("password", {
+                required: "비밀번호를 입력해주세요",
+                minLength: {
+                  value: 8,
+                  message: "비밀번호를 8자 이상 입력해주세요.",
+                },
+              })}
+            />
+            <RegisterInputField
+              label="비밀번호 확인"
+              type="password"
+              placeholder="비밀번호를 다시 한 번 입력해주세요"
+              error={errors.passwordConfirmation?.message}
+              {...register("passwordConfirmation", {
+                required: "비밀번호를 다시 한 번 입력해주세요.",
+                validate: (value) =>
+                  value === password || "비밀번호가 일치하지 않습니다.",
+              })}
+            />
+            <SignButton isActive={isValid} />
+          </form>
           <SocialLogin />
           <p className="to-signup">
             이미 회원이신가요?
diff --git a/src/css/Palette.css b/src/css/Palette.css
index 21a710105..6e57da4ab 100644
--- a/src/css/Palette.css
+++ b/src/css/Palette.css
@@ -10,4 +10,6 @@
   --gray50: #f9fafb;
   --blue: #3692ff;
   --red: #f74747;
+  --white: #ffffff;
+  --white100: #d1d5db;
 }

From d0e23921a2d6c6527be988209bd3394827aa3f93 Mon Sep 17 00:00:00 2001
From: twtwkim <alfog23@gmail.com>
Date: Sat, 7 Dec 2024 11:24:56 +0900
Subject: [PATCH 2/3] modify redux

---
 package-lock.json                     | 96 +++++++++++++++++++++++++++
 package.json                          |  3 +
 src/App.tsx                           | 12 +++-
 src/components/LandingPage/Header.tsx | 10 ++-
 src/components/LoginPage/Login.tsx    |  4 ++
 src/index.tsx                         | 10 ++-
 src/redux/counterAccessToken.ts       | 23 +++++++
 src/redux/store.ts                    | 41 ++++++++++++
 8 files changed, 190 insertions(+), 9 deletions(-)
 create mode 100644 src/redux/counterAccessToken.ts
 create mode 100644 src/redux/store.ts

diff --git a/package-lock.json b/package-lock.json
index 96e69ee24..3ef56836f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "name": "reacttotype",
       "version": "0.1.0",
       "dependencies": {
+        "@reduxjs/toolkit": "^2.4.0",
         "@testing-library/jest-dom": "^5.17.0",
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
@@ -19,8 +20,10 @@
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "react-hook-form": "^7.53.2",
+        "react-redux": "^9.1.2",
         "react-router-dom": "^6.28.0",
         "react-scripts": "5.0.1",
+        "redux": "^5.0.1",
         "typescript": "^4.9.5",
         "web-vitals": "^2.1.4"
       },
@@ -3128,6 +3131,40 @@
         }
       }
     },
+    "node_modules/@reduxjs/toolkit": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.4.0.tgz",
+      "integrity": "sha512-wJZEuSKj14tvNfxiIiJws0tQN77/rDqucBq528ApebMIRHyWpCanJVQRxQ8WWZC19iCDKxDsGlbAir3F1layxA==",
+      "license": "MIT",
+      "dependencies": {
+        "immer": "^10.0.3",
+        "redux": "^5.0.1",
+        "redux-thunk": "^3.1.0",
+        "reselect": "^5.1.0"
+      },
+      "peerDependencies": {
+        "react": "^16.9.0 || ^17.0.0 || ^18",
+        "react-redux": "^7.2.1 || ^8.1.3 || ^9.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        },
+        "react-redux": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@reduxjs/toolkit/node_modules/immer": {
+      "version": "10.1.1",
+      "resolved": "https://registry.npmjs.org/immer/-/immer-10.1.1.tgz",
+      "integrity": "sha512-s2MPrmjovJcoMaHtx6K11Ra7oD05NT97w1IC5zpMkT6Atjr7H8LjaDd81iIxUYpMKSRRNMJE703M1Fhr/TctHw==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/immer"
+      }
+    },
     "node_modules/@remix-run/router": {
       "version": "1.21.0",
       "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.21.0.tgz",
@@ -4040,6 +4077,12 @@
       "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
       "license": "MIT"
     },
+    "node_modules/@types/use-sync-external-store": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz",
+      "integrity": "sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA==",
+      "license": "MIT"
+    },
     "node_modules/@types/ws": {
       "version": "8.5.13",
       "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.13.tgz",
@@ -13994,6 +14037,29 @@
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
       "license": "MIT"
     },
+    "node_modules/react-redux": {
+      "version": "9.1.2",
+      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.1.2.tgz",
+      "integrity": "sha512-0OA4dhM1W48l3uzmv6B7TXPCGmokUU4p1M44DGN2/D9a1FjVPukVjER1PcPX97jIg6aUeLq1XJo1IpfbgULn0w==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/use-sync-external-store": "^0.0.3",
+        "use-sync-external-store": "^1.0.0"
+      },
+      "peerDependencies": {
+        "@types/react": "^18.2.25",
+        "react": "^18.0",
+        "redux": "^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "redux": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-refresh": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
@@ -14168,6 +14234,21 @@
         "node": ">=8"
       }
     },
+    "node_modules/redux": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
+      "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==",
+      "license": "MIT"
+    },
+    "node_modules/redux-thunk": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-3.1.0.tgz",
+      "integrity": "sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "redux": "^5.0.0"
+      }
+    },
     "node_modules/reflect.getprototypeof": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.6.tgz",
@@ -14327,6 +14408,12 @@
       "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
       "license": "MIT"
     },
+    "node_modules/reselect": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/reselect/-/reselect-5.1.1.tgz",
+      "integrity": "sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w==",
+      "license": "MIT"
+    },
     "node_modules/resolve": {
       "version": "1.22.8",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
@@ -16532,6 +16619,15 @@
         "requires-port": "^1.0.0"
       }
     },
+    "node_modules/use-sync-external-store": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.4.0.tgz",
+      "integrity": "sha512-9WXSPC5fMv61vaupRkCKCxsPxBocVnwakBEkMIHHpkTTg6icbJtg6jzgtLDm4bl3cSHAca52rYWih0k4K3PfHw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
diff --git a/package.json b/package.json
index f693bc3d1..9c18c469f 100644
--- a/package.json
+++ b/package.json
@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@reduxjs/toolkit": "^2.4.0",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
@@ -14,8 +15,10 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.53.2",
+    "react-redux": "^9.1.2",
     "react-router-dom": "^6.28.0",
     "react-scripts": "5.0.1",
+    "redux": "^5.0.1",
     "typescript": "^4.9.5",
     "web-vitals": "^2.1.4"
   },
diff --git a/src/App.tsx b/src/App.tsx
index 0477af97e..d4b239363 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,4 +1,5 @@
 import { Navigate, Route, Routes } from "react-router-dom";
+import { useEffect } from "react";
 import "./App.css";
 import MainPage from "./page/MainPage";
 import AddItemPage from "./page/AddItemPage";
@@ -9,22 +10,27 @@ import Privacy from "./components/Privacy";
 import FAQ from "./components/FAQ";
 import LoginPage from "./page/LoginPage";
 import RegisterPage from "./page/RegisterPage";
+import { useSelector } from "react-redux";
 
 function App() {
-  const isAccessToken = localStorage.getItem("access_token");
+  // const isAccessToken = localStorage.getItem("access_token");
+  const count = useSelector((state: any) => state.counter.value);
+  useEffect(() => {
+    console.log("Count changed:", count);
+  }, [count]);
   return (
     <Routes>
       <Route path={ROUTES.LANDING} element={<LandingPage />} />
       <Route
         path={ROUTES.LOGIN}
         element={
-          isAccessToken ? <Navigate to={ROUTES.LANDING} /> : <LoginPage />
+          count === true ? <Navigate to={ROUTES.LANDING} /> : <LoginPage />
         }
       />
       <Route
         path={ROUTES.REGISTER}
         element={
-          isAccessToken ? <Navigate to={ROUTES.LANDING} /> : <RegisterPage />
+          count === true ? <Navigate to={ROUTES.LANDING} /> : <RegisterPage />
         }
       />
       <Route path={ROUTES.PRIVACY} element={<Privacy />} />
diff --git a/src/components/LandingPage/Header.tsx b/src/components/LandingPage/Header.tsx
index 445791a91..a9a1c2d60 100644
--- a/src/components/LandingPage/Header.tsx
+++ b/src/components/LandingPage/Header.tsx
@@ -3,10 +3,13 @@ import { Link } from "react-router-dom";
 import "./Header.css";
 import logo from "../../assets/image/Property 1=lg.png";
 import profile from "../../assets/image/size=large.png";
+import { useDispatch, useSelector } from "react-redux";
+import { reset } from "../../redux/counterAccessToken";
 
 function Header() {
-  const isAccessToken = localStorage.getItem("access_token");
   const [isDropdownVisible, setIsDropdownVisible] = useState(false);
+  const dispatch = useDispatch();
+  const count = useSelector((state: any) => state.counter.value);
 
   const toggleDropdown = () => {
     setIsDropdownVisible((prev) => !prev);
@@ -14,7 +17,8 @@ function Header() {
 
   const handleLogout = () => {
     localStorage.clear();
-    window.location.reload();
+    dispatch(reset());
+    window.location.reload(); // 로그아웃 되면 새로고침
   };
 
   return (
@@ -24,7 +28,7 @@ function Header() {
           <img className="logo" src={logo} alt="판다마켓" />
         </div>
       </Link>
-      {isAccessToken ? (
+      {count ? (
         <div className="profile-container">
           <img
             src={profile}
diff --git a/src/components/LoginPage/Login.tsx b/src/components/LoginPage/Login.tsx
index 842449615..160cf629d 100644
--- a/src/components/LoginPage/Login.tsx
+++ b/src/components/LoginPage/Login.tsx
@@ -8,6 +8,8 @@ import SignUpLink from "./SignUpLink";
 import "./Login.css";
 import logo from "../../assets/image/Property 1=lg.png";
 import { login } from "../../api/api";
+import { useDispatch } from "react-redux";
+import { check } from "../../redux/counterAccessToken";
 
 interface FormValues {
   email: string;
@@ -21,12 +23,14 @@ const Login = () => {
     formState: { errors, isValid },
   } = useForm<FormValues>({ mode: "onChange" });
   const navigate = useNavigate();
+  const dispatch = useDispatch();
 
   const onsubmit: SubmitHandler<FormValues> = async (data) => {
     try {
       const res = await login(data);
       localStorage.setItem("access_token", res.accessToken);
       localStorage.setItem("refresh_token", res.refreshToken);
+      dispatch(check());
       alert("로그인이 정상적으로 완료되었습니다.");
       navigate("/");
       console.log(res);
diff --git a/src/index.tsx b/src/index.tsx
index 70033ccd2..12d6c9259 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -3,14 +3,18 @@ import ReactDOM from "react-dom/client";
 import "./index.css";
 import App from "./App";
 import { BrowserRouter } from "react-router-dom";
+import { Provider } from "react-redux";
+import store from "./redux/store";
 
 const root = ReactDOM.createRoot(
   document.getElementById("root") as HTMLElement
 );
 root.render(
   <React.StrictMode>
-    <BrowserRouter>
-      <App />
-    </BrowserRouter>
+    <Provider store={store}>
+      <BrowserRouter>
+        <App />
+      </BrowserRouter>
+    </Provider>
   </React.StrictMode>
 );
diff --git a/src/redux/counterAccessToken.ts b/src/redux/counterAccessToken.ts
new file mode 100644
index 000000000..4aaf27d42
--- /dev/null
+++ b/src/redux/counterAccessToken.ts
@@ -0,0 +1,23 @@
+import { createSlice } from "@reduxjs/toolkit";
+
+const counterSlice = createSlice({
+  name: "counter",
+  initialState: {
+    value: false,
+  },
+  reducers: {
+    check: (state) => {
+      state.value = true;
+      console.log("check 이후:", state.value);
+    },
+    reset: (state) => {
+      state.value = false;
+      console.log("reset 이후:", state.value);
+    },
+  },
+});
+
+const counterReducer = counterSlice.reducer;
+
+export const { check, reset } = counterSlice.actions;
+export default counterReducer;
diff --git a/src/redux/store.ts b/src/redux/store.ts
new file mode 100644
index 000000000..7aaef759d
--- /dev/null
+++ b/src/redux/store.ts
@@ -0,0 +1,41 @@
+import { configureStore } from "@reduxjs/toolkit";
+import counterReducer from "./counterAccessToken";
+
+// localStorage에서 상태 불러오기
+const loadState = () => {
+  try {
+    const confirmedState = localStorage.getItem("reduxState");
+    if (confirmedState === null) {
+      return undefined; // 초기 localStorage에 상태가 없으면 undefined 반환
+    }
+    const parsedState = JSON.parse(confirmedState);
+    // 상태 구조 확인 및 기본값 추가
+    return {
+      counter: parsedState.counter || { value: false },
+    };
+  } catch (e) {
+    console.error("Could not load state:", e);
+    return undefined;
+  }
+};
+
+const store = configureStore({
+  reducer: {
+    // 상태 업데이트하는 리듀서 정의
+    counter: counterReducer,
+  },
+  preloadedState: loadState(), // 초기 상태 설정
+  // 앱이 다시 시작될 때도 이전 상태를 유지해야하는 경우 사용하는 옵션
+});
+
+// Redux 상태가 변경될 때 localStorage에 저장
+store.subscribe(() => {
+  try {
+    const confirmedState = JSON.stringify(store.getState());
+    localStorage.setItem("reduxState", confirmedState);
+  } catch (e) {
+    console.error("Could not save state:", e);
+  }
+});
+
+export default store;

From 0d0d30b334cabcc9891f4c48024f7949b42c114b Mon Sep 17 00:00:00 2001
From: twtwkim <alfog23@gmail.com>
Date: Sat, 7 Dec 2024 21:44:27 +0900
Subject: [PATCH 3/3] feat: use refresh token

---
 package-lock.json                  |  10 +++
 package.json                       |   1 +
 src/App.tsx                        |   5 --
 src/api/api.ts                     | 102 +++++++++++++++++++++++++++--
 src/components/LoginPage/Login.tsx |   1 -
 src/redux/counterAccessToken.ts    |   2 -
 6 files changed, 109 insertions(+), 12 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 3ef56836f..a70345f6c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,6 +17,7 @@
         "@types/react": "^18.3.12",
         "@types/react-dom": "^18.3.1",
         "axios": "^1.7.9",
+        "jwt-decode": "^4.0.0",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "react-hook-form": "^7.53.2",
@@ -11155,6 +11156,15 @@
         "node": ">=4.0"
       }
     },
+    "node_modules/jwt-decode": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-4.0.0.tgz",
+      "integrity": "sha512-+KJGIyHgkGuIq3IEBNftfhW/LfWhXUIY6OmyVWjliu5KH1y0fw7VQ8YndE2O4qZdMSd9SqbnC8GOcZEy0Om7sA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/keyv": {
       "version": "4.5.4",
       "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
diff --git a/package.json b/package.json
index 9c18c469f..3dd689918 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "axios": "^1.7.9",
+    "jwt-decode": "^4.0.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.53.2",
diff --git a/src/App.tsx b/src/App.tsx
index d4b239363..259275a05 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,5 +1,4 @@
 import { Navigate, Route, Routes } from "react-router-dom";
-import { useEffect } from "react";
 import "./App.css";
 import MainPage from "./page/MainPage";
 import AddItemPage from "./page/AddItemPage";
@@ -13,11 +12,7 @@ import RegisterPage from "./page/RegisterPage";
 import { useSelector } from "react-redux";
 
 function App() {
-  // const isAccessToken = localStorage.getItem("access_token");
   const count = useSelector((state: any) => state.counter.value);
-  useEffect(() => {
-    console.log("Count changed:", count);
-  }, [count]);
   return (
     <Routes>
       <Route path={ROUTES.LANDING} element={<LandingPage />} />
diff --git a/src/api/api.ts b/src/api/api.ts
index 1c6e561bc..482cc7818 100644
--- a/src/api/api.ts
+++ b/src/api/api.ts
@@ -1,5 +1,6 @@
 export const API_BASE_URL = "https://panda-market-api.vercel.app";
 
+// 기본 함수
 async function fetchApi(url: string, options = {}) {
   try {
     const response = await fetch(url, options);
@@ -15,6 +16,7 @@ async function fetchApi(url: string, options = {}) {
   }
 }
 
+// 상품 가져오기 함수
 export async function getProducts({
   page = "",
   pageSize = "",
@@ -24,15 +26,17 @@ export async function getProducts({
   const params = new URLSearchParams({ page, pageSize, orderBy, keyword });
   const url = `${API_BASE_URL}/products?${params}`;
 
-  return fetchApi(url);
+  return fetchWithAuth(url);
 }
 
+// 상품 id별 가져오기 함수
 export async function getProductsById(productId: string | undefined) {
   const url = `${API_BASE_URL}/products/${productId}`;
 
-  return fetchApi(url);
+  return fetchWithAuth(url);
 }
 
+// 댓글 가져오기 함수
 export async function getCommentsById(
   productId: string | undefined,
   { limit = "" }
@@ -40,13 +44,14 @@ export async function getCommentsById(
   const params = new URLSearchParams({ limit });
   const url = `${API_BASE_URL}/products/${productId}/comments?${params}`;
 
-  return fetchApi(url);
+  return fetchWithAuth(url);
 }
 
 interface UpdateCommentParams {
   content: string;
 }
 
+// 댓글 수정 함수
 export async function updateCommentsById(
   commentId: number,
   { content }: UpdateCommentParams
@@ -60,7 +65,7 @@ export async function updateCommentsById(
     body: JSON.stringify({ content }),
   };
 
-  return fetchApi(url, options);
+  return fetchWithAuth(url, options);
 }
 
 interface SignupParams {
@@ -70,6 +75,7 @@ interface SignupParams {
   passwordConfirmation: string;
 }
 
+// 회원가입 함수
 export async function signup(data: SignupParams) {
   const url = `${API_BASE_URL}/auth/signUp`;
   const options = {
@@ -92,6 +98,7 @@ interface LoginParams {
   password: string;
 }
 
+// 로그인 함수
 export async function login(data: LoginParams) {
   const url = `${API_BASE_URL}/auth/signIn`;
   const options = {
@@ -106,3 +113,90 @@ export async function login(data: LoginParams) {
   };
   return fetchApi(url, options);
 }
+
+// 토큰을 디코딩하는 함수
+const parseJwt = (token: string) => {
+  try {
+    const base64Url = token.split(".")[1];
+    const base64 = base64Url.replace(/-/g, "+").replace(/_/g, "/");
+    const decodedPayload = JSON.parse(atob(base64));
+    return decodedPayload;
+  } catch (error) {
+    console.error("JWT 파싱 오류 : ", error);
+    return null;
+  }
+};
+
+// 토큰이 만료되었는지 비교하는 함수
+const isTokenExpired = (token: string) => {
+  if (!token) return true;
+
+  const decodedToken = parseJwt(token);
+  if (!decodedToken) return true;
+
+  const expirationTime = decodedToken.exp * 1000;
+  return Date.now() > expirationTime;
+};
+
+// 리프레시 토큰을 통해 새로운 엑세스 토큰을 받아오는 함수
+const refreshAccessToken = async (refreshToken: string) => {
+  const url = `${API_BASE_URL}/auth/refresh-token`;
+  const options = {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify({ refreshToken }),
+  };
+
+  try {
+    const response = await fetch(url, options);
+    if (!response.ok) {
+      throw new Error("리프레시 토큰 요청 실패");
+    }
+
+    const data = await response.json();
+    const newAccessToken = data.accessToken;
+    if (newAccessToken) {
+      localStorage.setItem("access_token", newAccessToken);
+    }
+    return newAccessToken;
+  } catch (error) {
+    console.error("엑세스 토큰 갱신 오류:", error);
+    throw new Error("엑세스 토큰을 갱신할 수 없습니다.");
+  }
+};
+
+// 로컬 스토리지에서 엑세스 토큰을 가져오고 만료되었으면 리프레시 토큰으로 갱신하는 함수
+export const getAccessToken = async () => {
+  let accessToken = localStorage.getItem("access_token");
+  const refreshToken = localStorage.getItem("refresh_token");
+
+  if (accessToken && !isTokenExpired(accessToken)) {
+    return accessToken;
+  }
+
+  if (refreshToken) {
+    return await refreshAccessToken(refreshToken);
+  }
+
+  return null;
+};
+
+// 모든 API 보낼때 토큰 담아서 보내는 함수
+async function fetchWithAuth(url: string, options: RequestInit = {}) {
+  const accessToken = await getAccessToken();
+
+  if (!accessToken) {
+    throw new Error("로그인이 필요합니다.");
+  }
+
+  const authOptions = {
+    ...options,
+    headers: {
+      ...(options.headers || {}),
+      Authorization: `Bearer ${accessToken}`,
+    },
+  };
+  return fetchApi(url, authOptions);
+}
diff --git a/src/components/LoginPage/Login.tsx b/src/components/LoginPage/Login.tsx
index 160cf629d..cdd340e7c 100644
--- a/src/components/LoginPage/Login.tsx
+++ b/src/components/LoginPage/Login.tsx
@@ -33,7 +33,6 @@ const Login = () => {
       dispatch(check());
       alert("로그인이 정상적으로 완료되었습니다.");
       navigate("/");
-      console.log(res);
     } catch (error: any) {
       console.error(
         "회원가입 실패:",
diff --git a/src/redux/counterAccessToken.ts b/src/redux/counterAccessToken.ts
index 4aaf27d42..3432293de 100644
--- a/src/redux/counterAccessToken.ts
+++ b/src/redux/counterAccessToken.ts
@@ -8,11 +8,9 @@ const counterSlice = createSlice({
   reducers: {
     check: (state) => {
       state.value = true;
-      console.log("check 이후:", state.value);
     },
     reset: (state) => {
       state.value = false;
-      console.log("reset 이후:", state.value);
     },
   },
 });