From 05b75ec02e3e544deafd169cb16ea489664ead68 Mon Sep 17 00:00:00 2001
From: nalsae <101828759+nalsae@users.noreply.github.com>
Date: Tue, 17 Oct 2023 16:37:14 +0900
Subject: [PATCH] =?UTF-8?q?Revert=20"[FE]=20=E2=99=BB=EF=B8=8F=20Signin,?=
 =?UTF-8?q?=20Signup,=20Profile,=20History=20=EC=BB=B4=ED=8F=AC=EB=84=8C?=
 =?UTF-8?q?=ED=8A=B8=20=EB=B0=8F=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=A6=AC?=
 =?UTF-8?q?=ED=8C=A9=ED=86=A0=EB=A7=81"?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/api/axios.ts                       |  85 ---------
 client/src/app/history/[id]/page.tsx          |  30 ++--
 client/src/app/page.tsx                       |   4 +-
 client/src/app/post/[id]/page.tsx             |  14 +-
 client/src/app/profile/page.tsx               |  43 ++---
 client/src/app/signin/page.tsx                |  24 +--
 client/src/app/signup/page.tsx                |  16 +-
 client/src/components/board/RankBoard.tsx     |   6 +-
 client/src/components/common/Header.tsx       |  11 +-
 client/src/components/common/HeaderNav.tsx    |  11 +-
 client/src/components/common/SeoHead.tsx      |   6 +-
 client/src/components/common/index.ts         |  71 --------
 .../src/components/history/ConfirmModal.tsx   |  25 ++-
 client/src/components/history/Dropdown.tsx    |  29 +--
 .../src/components/history/FailureModal.tsx   |  21 +--
 .../src/components/history/HistoryBoard.tsx   |  46 +++--
 client/src/components/history/HistoryBox.tsx  |  33 ++--
 .../src/components/history/HistoryComment.tsx |  55 +++---
 .../src/components/history/HistoryLikes.tsx   |  34 ++--
 .../components/history/HistoryPostCard.tsx    |  26 ++-
 client/src/components/history/ResignModal.tsx | 101 ++++++-----
 .../src/components/history/SuccessedModal.tsx |  18 +-
 client/src/components/history/UserButton.tsx  |  10 +-
 client/src/components/history/UserInfo.tsx    |  68 +++----
 client/src/components/history/index.ts        |  27 ---
 ...ofileModal.tsx => ChangeNicknameModal.tsx} |  31 ++--
 .../profile/ChangePasswordModal.tsx           |  34 ++++
 client/src/components/profile/ImageForm.tsx   |  64 +++++--
 .../src/components/profile/NicknameForm.tsx   |  31 +++-
 .../src/components/profile/PasswordForm.tsx   |  33 +++-
 client/src/components/profile/ProfileBox.tsx  |  20 +--
 client/src/components/profile/index.ts        |  13 --
 client/src/components/sign/SignInput.tsx      |  54 ++++--
 client/src/components/sign/SignLink.tsx       |   5 +-
 client/src/components/sign/SignModalInput.tsx |  63 +++++--
 .../src/components/sign/SignPasswordInput.tsx |  47 +++--
 client/src/components/sign/index.ts           |   6 -
 client/src/components/signin/FailureModal.tsx |  14 +-
 .../components/signin/FindPasswordModal.tsx   | 102 ++++++-----
 client/src/components/signin/LoginButton.tsx  |  51 ++++--
 client/src/components/signin/SigninForm.tsx   |  73 ++++++--
 client/src/components/signin/SigninIntro.tsx  |  13 +-
 .../src/components/signin/SuccessedModal.tsx  |  15 +-
 client/src/components/signin/index.ts         |  15 --
 .../src/components/signup/AuthEmailModal.tsx  |  88 +++++----
 client/src/components/signup/FailureModal.tsx |  15 +-
 client/src/components/signup/SignButton.tsx   |  16 +-
 client/src/components/signup/SignupForm.tsx   |  90 ++++++----
 client/src/components/signup/SignupIntro.tsx  |  13 +-
 client/src/components/signup/index.ts         |   7 -
 client/src/constants/contents.ts              |  17 +-
 client/src/hooks/useAuthEmail.ts              |  19 --
 client/src/hooks/useChagnePassword.ts         |  48 -----
 client/src/hooks/useChangeImage.ts            |  73 --------
 client/src/hooks/useChangeNickname.ts         |  40 -----
 client/src/hooks/useDeleteUser.ts             |  20 ---
 client/src/hooks/useFindPassword.ts           |  41 -----
 client/src/hooks/useGetMetaData.ts            | 167 +++++++++---------
 client/src/hooks/useGoogleLogin.ts            |  47 -----
 client/src/hooks/useHistoryBoard.ts           |  29 ---
 client/src/hooks/useHistoryComment.ts         |  28 ---
 client/src/hooks/useHistoryLikes.ts           |  30 ----
 client/src/hooks/useResignCheck.ts            |  26 ---
 client/src/hooks/useSignIn.ts                 |  63 -------
 client/src/hooks/useSignup.ts                 |  36 ----
 client/src/hooks/useUserInfo.ts               |  22 ---
 client/src/stores/modalStore.ts               |  57 ------
 client/src/stores/signStore.ts                |   8 +-
 client/src/stores/userStore.ts                |  25 ++-
 client/src/types/common.d.ts                  |  13 +-
 client/src/utils/getPasswordByType.ts         |  34 ----
 client/src/utils/getRegisterByType.ts         |  61 -------
 72 files changed, 1007 insertions(+), 1624 deletions(-)
 delete mode 100644 client/src/api/axios.ts
 delete mode 100644 client/src/components/common/index.ts
 delete mode 100644 client/src/components/history/index.ts
 rename client/src/components/profile/{ChangeProfileModal.tsx => ChangeNicknameModal.tsx} (53%)
 create mode 100644 client/src/components/profile/ChangePasswordModal.tsx
 delete mode 100644 client/src/components/profile/index.ts
 delete mode 100644 client/src/components/sign/index.ts
 delete mode 100644 client/src/components/signin/index.ts
 delete mode 100644 client/src/components/signup/index.ts
 delete mode 100644 client/src/hooks/useAuthEmail.ts
 delete mode 100644 client/src/hooks/useChagnePassword.ts
 delete mode 100644 client/src/hooks/useChangeImage.ts
 delete mode 100644 client/src/hooks/useChangeNickname.ts
 delete mode 100644 client/src/hooks/useDeleteUser.ts
 delete mode 100644 client/src/hooks/useFindPassword.ts
 delete mode 100644 client/src/hooks/useGoogleLogin.ts
 delete mode 100644 client/src/hooks/useHistoryBoard.ts
 delete mode 100644 client/src/hooks/useHistoryComment.ts
 delete mode 100644 client/src/hooks/useHistoryLikes.ts
 delete mode 100644 client/src/hooks/useResignCheck.ts
 delete mode 100644 client/src/hooks/useSignIn.ts
 delete mode 100644 client/src/hooks/useSignup.ts
 delete mode 100644 client/src/hooks/useUserInfo.ts
 delete mode 100644 client/src/stores/modalStore.ts
 delete mode 100644 client/src/utils/getPasswordByType.ts
 delete mode 100644 client/src/utils/getRegisterByType.ts

diff --git a/client/src/api/axios.ts b/client/src/api/axios.ts
deleted file mode 100644
index a42fe30e..00000000
--- a/client/src/api/axios.ts
+++ /dev/null
@@ -1,85 +0,0 @@
-import axios, {
-  AxiosRequestConfig,
-  AxiosResponse,
-  InternalAxiosRequestConfig,
-} from 'axios';
-
-import useUserStore from '@/stores/userStore';
-
-const { setAccessToken } = useUserStore();
-
-const accessToken =
-  typeof window !== 'undefined'
-    ? JSON.parse(localStorage.getItem('user-key') as string).state.accessToken
-    : null;
-
-const refreshToken =
-  typeof window !== 'undefined'
-    ? JSON.parse(localStorage.getItem('user-key') as string).state.refreshToken
-    : null;
-
-const instance = axios.create({
-  baseURL: process.env.NEXT_PUBLIC_API_URL,
-  headers: {
-    Authorization: accessToken,
-    Refresh: refreshToken,
-  },
-  withCredentials: true,
-});
-
-// atob을 활용한 JWT 디코딩
-const parseJWT = (token: string | null) => {
-  if (token) return JSON.parse(atob(token.split('.')[1]));
-};
-
-const authVerify = () => {
-  const decodedAccess = parseJWT(accessToken);
-  const decodedRefresh = parseJWT(refreshToken);
-
-  if (decodedAccess.exp * 1000 < Date.now()) {
-    return 'Access Token Expired';
-  }
-
-  if (decodedRefresh.exp * 1000 < Date.now()) {
-    return 'Refresh Token Expired';
-  }
-
-  return true;
-};
-
-// 응답 받기 전, 새로운 accessToke이 존재하면 바꿔주기
-export const onFulfiled = async (response: AxiosResponse) => {
-  if (authVerify() === 'Access Token Expired') {
-    const { authorization: newAccessToken } = response.headers;
-
-    setAccessToken(newAccessToken);
-
-    // 타입 호환을 위해 새로운 객체를 만들어서 업데이트하기
-    response.config.headers = Object.assign({}, response.config.headers, {
-      authorization: `${newAccessToken}`,
-    });
-
-    return await axios(response.config);
-  }
-
-  return response;
-};
-
-instance.interceptors.request.use(
-  //! AxiosRequestConfig 대신 InternalAxiosRequestConfig를 사용하라고 하는데...
-  // InternalAxiosRequestConfig를 개발자가 직접 건드는게 좋은건 아니라고 하던데 흠...
-  async (config: InternalAxiosRequestConfig) => {
-    config.headers = config.headers ?? {};
-
-    if (accessToken) {
-      config.headers.Authorization = `${accessToken}`;
-    }
-
-    return config;
-  },
-  (error) => Promise.reject(error),
-);
-
-instance.interceptors.response.use(onFulfiled, (error) => {
-  return Promise.reject(error);
-});
diff --git a/client/src/app/history/[id]/page.tsx b/client/src/app/history/[id]/page.tsx
index 21c5cdaa..6e864f64 100644
--- a/client/src/app/history/[id]/page.tsx
+++ b/client/src/app/history/[id]/page.tsx
@@ -2,16 +2,14 @@
 
 import { motion } from 'framer-motion';
 
-import useModalStore, { ModalType } from '@/stores/modalStore';
+import useSignModalStore from '@/stores/signModalStore';
 
-import {
-  ResignModal,
-  ConfirmModal,
-  SuccessedModal,
-  FailureModal,
-  HistoryBox,
-} from '@/components/history';
-import { Footer } from '@/components/common';
+import ResignModal from '@/components/history/ResignModal';
+import ConfirmModal from '@/components/history/ConfirmModal';
+import SuccessedModal from '@/components/history/SuccessedModal';
+import FailureModal from '@/components/history/FailureModal';
+import HistoryBox from '@/components/history/HistoryBox';
+import Footer from '@/components/common/Footer';
 
 import { MOUNT_ANIMATION_VALUES } from '@/constants/values';
 
@@ -20,14 +18,7 @@ interface HistoryProps {
 }
 
 export default function History({ params }: HistoryProps) {
-  const { isOpen, type } = useModalStore();
-
-  const renderModal = (type: ModalType) => {
-    if (type === 'ResignModal') return <ResignModal />;
-    if (type === 'ConfirmModal') return <ConfirmModal />;
-    if (type === 'SuccessedModal') return <SuccessedModal />;
-    if (type === 'FailureModal') return <FailureModal />;
-  };
+  const currentState = useSignModalStore((state) => state.currentState);
 
   return (
     <>
@@ -38,7 +29,10 @@ export default function History({ params }: HistoryProps) {
         className="flex flex-col justify-center items-center h-auto min-h-full pb-[343px] mx-4">
         <HistoryBox paramsId={params.id} />
 
-        {isOpen && renderModal(type)}
+        {currentState === 'ResignModal' && <ResignModal />}
+        {currentState === 'ConfirmModal' && <ConfirmModal />}
+        {currentState === 'FailureModal' && <FailureModal />}
+        {currentState === 'SuccessedModal' && <SuccessedModal />}
       </motion.div>
       <Footer />
     </>
diff --git a/client/src/app/page.tsx b/client/src/app/page.tsx
index 6ad12916..7abbcccb 100644
--- a/client/src/app/page.tsx
+++ b/client/src/app/page.tsx
@@ -18,7 +18,7 @@ import { getScrollTop } from '@/utils/getScrollTop';
 export default function Home() {
   const isClient = useClient();
 
-  const { isEmailLogin, isGoogleLogin } = useUserStore();
+  const { isLogin, isGoogleLogin } = useUserStore();
 
   const handleClick = () => {
     const top = getScrollTop(window.innerWidth);
@@ -69,7 +69,7 @@ export default function Home() {
                   <ServiceInfo key={index} order={index} />
                 ))}
               </div>
-              {!(isEmailLogin || isGoogleLogin) && (
+              {!(isLogin || isGoogleLogin) && (
                 <motion.section
                   initial={{ y: 100, opacity: 0 }}
                   whileInView={{ y: 0, opacity: 1 }}
diff --git a/client/src/app/post/[id]/page.tsx b/client/src/app/post/[id]/page.tsx
index 90e80706..1401e484 100644
--- a/client/src/app/post/[id]/page.tsx
+++ b/client/src/app/post/[id]/page.tsx
@@ -13,15 +13,10 @@ import useUserStore from '@/stores/userStore';
 
 import useEffectOnce from '@/hooks/useEffectOnce';
 
-import {
-  PageTitle,
-  PostCountInfo,
-  Screws,
-  LoadingNotice,
-  ErrorMessage,
-  Footer,
-} from '@/components/common';
 import PostDeleteModal from '@/components/post/PostDeleteModal';
+import PageTitle from '@/components/common/PageTitle';
+import PostCountInfo from '@/components/common/PostCountInfo';
+import Screws from '@/components/common/Screws';
 import Comment from '@/components/post/Comment';
 import CommentForm from '@/components/post/CommentForm';
 import PostContent from '@/components/post/PostContent';
@@ -30,6 +25,9 @@ import PostImage from '@/components/post/PostImage';
 import PostProfile from '@/components/post/PostProfile';
 import HashTags from '@/components/post/HashTags';
 import CommentDeleteModal from '@/components/post/CommentDeleteModal';
+import LoadingNotice from '@/components/common/LoadingNotice';
+import ErrorMessage from '@/components/common/ErrorMessage';
+import Footer from '@/components/common/Footer';
 
 import { CommentDataInfo, PostDataInfo } from '@/types/data';
 
diff --git a/client/src/app/profile/page.tsx b/client/src/app/profile/page.tsx
index 89968a54..e75eede6 100644
--- a/client/src/app/profile/page.tsx
+++ b/client/src/app/profile/page.tsx
@@ -4,38 +4,24 @@ import { notFound } from 'next/navigation';
 
 import { motion } from 'framer-motion';
 
+import useSignModalStore from '@/stores/signModalStore';
 import useUserStore from '@/stores/userStore';
-import useModalStore, { ModalType } from '@/stores/modalStore';
 
-import useEffectOnce from '@/hooks/useEffectOnce';
-
-import { ProfileBox, ChangeProfileModal } from '@/components/profile';
-import {
-  ResignModal,
-  ConfirmModal,
-  SuccessedModal,
-  FailureModal,
-} from '@/components/history';
-import { Footer } from '@/components/common';
+import ProfileBox from '@/components/profile/ProfileBox';
+import ChangePasswordModal from '@/components/profile/ChangePasswordModal';
+import ChangeNicknameModal from '@/components/profile/ChangeNicknameModal';
+import ConfirmModal from '@/components/history/ConfirmModal';
+import ResignModal from '@/components/history/ResignModal';
+import FailureModal from '@/components/history/FailureModal';
+import SuccessedModal from '@/components/history/SuccessedModal';
+import Footer from '@/components/common/Footer';
 
 import { ADMIN_USER_ID, MOUNT_ANIMATION_VALUES } from '@/constants/values';
+import useEffectOnce from '@/hooks/useEffectOnce';
 
 export default function Profile() {
+  const currentState = useSignModalStore((state) => state.currentState);
   const { userId } = useUserStore();
-  const { isOpen, type } = useModalStore();
-
-  const renderModal = (type: ModalType) => {
-    if (type === 'ChangePasswordModal')
-      return <ChangeProfileModal type="password" />;
-    if (type === 'ChangeNicknameModal')
-      return <ChangeProfileModal type="nickname" />;
-    if (type === 'ChangeImageModal') return <ChangeProfileModal type="image" />;
-
-    if (type === 'ResignModal') return <ResignModal />;
-    if (type === 'ConfirmModal') return <ConfirmModal />;
-    if (type === 'SuccessedModal') return <SuccessedModal />;
-    if (type === 'FailureModal') return <FailureModal />;
-  };
 
   useEffectOnce(() => {
     userId === ADMIN_USER_ID && notFound();
@@ -50,7 +36,12 @@ export default function Profile() {
         className="flex flex-col justify-center items-center h-auto min-h-full pb-[343px] mx-4">
         <ProfileBox />
 
-        {isOpen && renderModal(type)}
+        {currentState === 'ChangePasswordModal' && <ChangePasswordModal />}
+        {currentState === 'ChangeNicknameModal' && <ChangeNicknameModal />}
+        {currentState === 'ConfirmModal' && <ConfirmModal />}
+        {currentState === 'ResignModal' && <ResignModal />}
+        {currentState === 'FailureModal' && <FailureModal />}
+        {currentState === 'SuccessedModal' && <SuccessedModal />}
       </motion.div>
       <Footer />
     </>
diff --git a/client/src/app/signin/page.tsx b/client/src/app/signin/page.tsx
index 31c0f33e..469e9651 100644
--- a/client/src/app/signin/page.tsx
+++ b/client/src/app/signin/page.tsx
@@ -2,23 +2,15 @@
 
 import { motion } from 'framer-motion';
 
-import useModalStore, { ModalType } from '@/stores/modalStore';
+import useSignModalStore from '@/stores/signModalStore';
 
-import {
-  SigninIntro,
-  FindPasswordModal,
-  SuccessedModal,
-  FailureModal,
-} from '@/components/signin';
+import SigninIntro from '@/components/signin/SigninIntro';
+import FindPasswordModal from '@/components/signin/FindPasswordModal';
+import SuccessedModal from '@/components/signin/SuccessedModal';
+import FailureModal from '@/components/signin/FailureModal';
 
 export default function Signin() {
-  const { isOpen, type } = useModalStore();
-
-  const renderModal = (type: ModalType) => {
-    if (type === 'FindPasswordModal') return <FindPasswordModal />;
-    if (type === 'SuccessedModal') return <SuccessedModal />;
-    if (type === 'FailureModal') return <FailureModal />;
-  };
+  const currentState = useSignModalStore((state) => state.currentState);
 
   return (
     <motion.div
@@ -28,7 +20,9 @@ export default function Signin() {
       className="flex flex-col justify-center items-center h-full mx-4 pb-[40px]">
       <SigninIntro />
 
-      {isOpen && renderModal(type)}
+      {currentState === 'FindPasswordModal' && <FindPasswordModal />}
+      {currentState === 'SuccessedModal' && <SuccessedModal />}
+      {currentState === 'FailureModal' && <FailureModal />}
     </motion.div>
   );
 }
diff --git a/client/src/app/signup/page.tsx b/client/src/app/signup/page.tsx
index f6838285..2504527d 100644
--- a/client/src/app/signup/page.tsx
+++ b/client/src/app/signup/page.tsx
@@ -2,17 +2,14 @@
 
 import { motion } from 'framer-motion';
 
-import useModalStore, { ModalType } from '@/stores/modalStore';
+import useSignModalStore from '@/stores/signModalStore';
 
-import { AuthEmailModal, FailureModal, SignupIntro } from '@/components/signup';
+import AuthEmailModal from '@/components/signup/AuthEmailModal';
+import FailureModal from '@/components/signup/FailureModal';
+import SignupIntro from '@/components/signup/SignupIntro';
 
 export default function Signup() {
-  const { isOpen, type } = useModalStore();
-
-  const renderModal = (type: ModalType) => {
-    if (type === 'AuthEmailModal') return <AuthEmailModal />;
-    if (type === 'FailureModal') return <FailureModal />;
-  };
+  const currentState = useSignModalStore((state) => state.currentState);
 
   return (
     <motion.div
@@ -22,7 +19,8 @@ export default function Signup() {
       className="flex flex-col justify-center items-center h-full mx-4 pb-[40px]">
       <SignupIntro />
 
-      {isOpen && renderModal(type)}
+      {currentState === 'AuthEmailModal' && <AuthEmailModal />}
+      {currentState === 'Not Code' && <FailureModal />}
     </motion.div>
   );
 }
diff --git a/client/src/components/board/RankBoard.tsx b/client/src/components/board/RankBoard.tsx
index cea0e1a0..6491154b 100644
--- a/client/src/components/board/RankBoard.tsx
+++ b/client/src/components/board/RankBoard.tsx
@@ -50,11 +50,11 @@ export default function RankBoard() {
       variants={MOUNT_ANIMATION_VALUES}
       initial="initial"
       animate="animate"
-      className="pt-[64px] w-[448px] h-[268px] flex flex-col items-center bg-contain bg-center bg-no-repeat bg-[url('/assets/img/bg_board_lg.png')] drop-shadow-[0_4px_4px_rgba(0,0,0,0.25)] scale-100 max-[604px]:w-[313px] max-[604px]:-mb-12 max-[604px]:px-6 max-[604px]:pt-[78px]">
-      <h2 className="text-2xl leading-6 text-brown-10 font-bold max-[604px]:text-lg">
+      className="pt-[60px] w-[448px] h-[268px] flex flex-col items-center bg-contain bg-center bg-no-repeat bg-[url('/assets/img/bg_board_lg.png')] drop-shadow-[0_4px_4px_rgba(0,0,0,0.25)] scale-100 max-[604px]:w-[313px] max-[604px]:-mb-3 max-[604px]:px-6 max-[604px]:pt-[78px]">
+      <h2 className="text-2xl leading-6 text-brown-10 font-bold max-[604px]:text-xl">
         이주의 좋아요 순위
       </h2>
-      <div className="pt-7 pb-5 w-full max-w-[720px] flex flex-col items-center gap-2 text-base leading-4 text-brown-10 font-normal whitespace-nowrap overflow-x-hidden max-[604px]:text-xs max-[604px]:gap-1 max-[604px]:pt-1">
+      <div className="py-5 w-full max-w-[720px] flex flex-col items-center gap-2 text-base leading-4 text-brown-10 font-normal whitespace-nowrap overflow-x-hidden max-[604px]:text-xs max-[604px]:gap-1 max-[604px]:pt-1">
         {boardRank.slice(0, 3).map((board) => {
           return (
             <Link
diff --git a/client/src/components/common/Header.tsx b/client/src/components/common/Header.tsx
index c65c5169..6890f556 100644
--- a/client/src/components/common/Header.tsx
+++ b/client/src/components/common/Header.tsx
@@ -18,8 +18,7 @@ export default function Header() {
   const [isProfileHover, setIsProfileHover] = useState(false);
   const [isMenuHover, setIsMenuHover] = useState(false);
 
-  const { userId, isEmailLogin, isGoogleLogin, profileImageUrl } =
-    useUserStore();
+  const { userId, isLogin, isGoogleLogin, profileImageUrl } = useUserStore();
   const getSigninForm = useSignStore((state) => state.getSigninForm);
 
   const isClient = useClient();
@@ -73,7 +72,7 @@ export default function Header() {
           <li className="max-[480px]:hidden">
             <HeaderLink
               location={
-                isClient && (isEmailLogin || isGoogleLogin)
+                isClient && (isLogin || isGoogleLogin)
                   ? `/garden/${userId}`
                   : '/signin'
               }
@@ -91,7 +90,7 @@ export default function Header() {
           <li className="max-[480px]:hidden">
             <HeaderLink
               location={
-                isClient && (isEmailLogin || isGoogleLogin)
+                isClient && (isLogin || isGoogleLogin)
                   ? `/leafs/${userId}`
                   : '/signin'
               }
@@ -99,7 +98,7 @@ export default function Header() {
               title="leafCard"
             />
           </li>
-          {isClient && (isEmailLogin || isGoogleLogin) ? (
+          {isClient && (isLogin || isGoogleLogin) ? (
             <li
               onMouseOver={() => setIsProfileHover(true)}
               onMouseLeave={() => setIsProfileHover(false)}>
@@ -110,7 +109,7 @@ export default function Header() {
                 width={36}
                 height={36}
               />
-              {isProfileHover && (isEmailLogin || isGoogleLogin) && (
+              {isProfileHover && (isLogin || isGoogleLogin) && (
                 <motion.div
                   initial={{ opacity: 0 }}
                   animate={{ opacity: 1 }}
diff --git a/client/src/components/common/HeaderNav.tsx b/client/src/components/common/HeaderNav.tsx
index 08e17e7a..0f30225d 100644
--- a/client/src/components/common/HeaderNav.tsx
+++ b/client/src/components/common/HeaderNav.tsx
@@ -17,10 +17,11 @@ export default function HeaderNav({
 }: HeaderNavProps) {
   const router = useRouter();
 
-  const { isEmailLogin, isGoogleLogin, userId, setClear } = useUserStore();
+  const { isLogin, isGoogleLogin, userId, setClear } = useUserStore();
   const { getSigninForm, getSignupForm } = useSignStore();
 
   const logout = () => {
+    localStorage.clear();
     setClear();
 
     getSigninForm(false);
@@ -55,9 +56,7 @@ export default function HeaderNav({
               <div className="w-full flex justify-center items-center border-b border-brown-10 border-dashed py-[8px] border-opacity-80">
                 <Link
                   href={
-                    isEmailLogin || isGoogleLogin
-                      ? `/garden/${userId}`
-                      : '/signin'
+                    isLogin || isGoogleLogin ? `/garden/${userId}` : '/signin'
                   }>
                   정원
                 </Link>
@@ -68,9 +67,7 @@ export default function HeaderNav({
               <div className="flex justify-center py-[8px] cursor-pointer">
                 <Link
                   href={
-                    isEmailLogin || isGoogleLogin
-                      ? `/leafs/${userId}`
-                      : '/signin'
+                    isLogin || isGoogleLogin ? `/leafs/${userId}` : '/signin'
                   }>
                   식물 카드
                 </Link>
diff --git a/client/src/components/common/SeoHead.tsx b/client/src/components/common/SeoHead.tsx
index 10c951bb..ceac1e26 100644
--- a/client/src/components/common/SeoHead.tsx
+++ b/client/src/components/common/SeoHead.tsx
@@ -1,8 +1,8 @@
 import { useRouter } from 'next/router';
 
-// import getMetaData from '@/hooks/useGetMetaData';
+import getMetaDate from '@/hooks/useGetMetaData';
 
-import { PageType, Post } from '@/types/common';
+import { ContextType, PageType, Post } from '@/types/common';
 
 type MetaDataProps = {
   post: Post;
@@ -11,7 +11,7 @@ type MetaDataProps = {
 
 export default function SeoHead({ post, page }: MetaDataProps) {
   const router = useRouter();
-  // const metaData = getMetaData(page, router.query, post);
+  const metaData = getMetaDate(page, router.query, post);
   //TODO: 주석에 원하는대로 값이 나오는지 테스트가 필요하다
   //TODO: og 이미지는 어떻게 할 것인가?
   return;
diff --git a/client/src/components/common/index.ts b/client/src/components/common/index.ts
deleted file mode 100644
index 9aa0327a..00000000
--- a/client/src/components/common/index.ts
+++ /dev/null
@@ -1,71 +0,0 @@
-import CommonButton from './CommonButton';
-import ConnectCheckBox from './ConnectCheckBox';
-import ControlButton from './ControlButton';
-import ErrorMessage from './ErrorMessage';
-import ErrorNotice from './ErrorNotice';
-import Footer from './Footer';
-import FooterLink from './FooterLink';
-import HashTag from './HashTag';
-import Header from './Header';
-import HeaderLink from './HeaderLink';
-import HeaderNav from './HeaderNav';
-import ImageUpload from './ImageUpload';
-import Intro from './Intro';
-import Leaf from './Leaf';
-import LeafForm from './LeafForm';
-import LeafName from './LeafName';
-import LoadingMessage from './LoadingMessage';
-import LoadingNotice from './LoadingNotice';
-import Logo from './Logo';
-import Modal from './Modal';
-import ModalPortal from './ModalPortal';
-import NoImage from './NoImage';
-import PageTitle from './PageTitle';
-import PasswordInput from './PasswordInput';
-import PostCountInfo from './PostCountInfo';
-import Preview from './Preview';
-import ReactQueryProvider from './ReactQueryProvider';
-import Screws from './Screws';
-import SeoHead from './SeoHead';
-import ShareButton from './ShareButton';
-import ShareModal from './ShareModal';
-import TagInput from './TagInput';
-import TextArea from './TextArea';
-import TextInput from './TextInput';
-
-export {
-  CommonButton,
-  ConnectCheckBox,
-  ControlButton,
-  ErrorMessage,
-  ErrorNotice,
-  Footer,
-  FooterLink,
-  HashTag,
-  Header,
-  HeaderLink,
-  HeaderNav,
-  ImageUpload,
-  Intro,
-  Leaf,
-  LeafForm,
-  LeafName,
-  LoadingMessage,
-  LoadingNotice,
-  Logo,
-  Modal,
-  ModalPortal,
-  NoImage,
-  PageTitle,
-  PasswordInput,
-  PostCountInfo,
-  Preview,
-  ReactQueryProvider,
-  Screws,
-  SeoHead,
-  ShareButton,
-  ShareModal,
-  TagInput,
-  TextArea,
-  TextInput,
-};
diff --git a/client/src/components/history/ConfirmModal.tsx b/client/src/components/history/ConfirmModal.tsx
index 0ceeaba1..a87efc2e 100644
--- a/client/src/components/history/ConfirmModal.tsx
+++ b/client/src/components/history/ConfirmModal.tsx
@@ -1,31 +1,42 @@
 'use client';
 
-import useDeleteUser from '@/hooks/useDeleteUser';
+import { deleteUser } from '@/api/history';
 
-import { CommonButton, Modal, ModalPortal } from '../common';
+import useSignModalStore from '@/stores/signModalStore';
+import useUserStore from '@/stores/userStore';
+
+import Modal from '../common/Modal';
+import ModalPortal from '../common/ModalPortal';
+import CommonButton from '../common/CommonButton';
 
 export default function ConfirmModal() {
-  const { onDeleteUser, close } = useDeleteUser();
+  const { close, changeState } = useSignModalStore();
+
+  const hanldeDeleteUser = async () => {
+    const response = await deleteUser();
+
+    if (response === 204) {
+      return changeState('SuccessedModal');
+    }
+  };
 
   return (
     <ModalPortal>
       <Modal className="min-w-[312px] h-fit flex flex-col justify-center items-center mx-1">
         <div className="px-3 py-9 flex flex-col items-center gap-4">
-          <div className="text-[22px] font-bold text-brown-90">
+          <div className="text-[22px]  font-bold text-brown-90">
             정말&nbsp;
             <span className="text-red-50">탈퇴</span>
             하시겠습니까?
           </div>
-
           <div className="flex gap-3">
             <CommonButton
               type="button"
               size="sm"
               className="py-2 px-4 text-[18px]"
-              onCheck={() => onDeleteUser()}>
+              onCheck={hanldeDeleteUser}>
               네
             </CommonButton>
-
             <CommonButton
               type="button"
               size="sm"
diff --git a/client/src/components/history/Dropdown.tsx b/client/src/components/history/Dropdown.tsx
index 691f8f0a..ebbb2abc 100644
--- a/client/src/components/history/Dropdown.tsx
+++ b/client/src/components/history/Dropdown.tsx
@@ -1,6 +1,5 @@
 'use client';
 
-import Image from 'next/image';
 import { Collapse } from '@material-tailwind/react';
 
 import useHistoryStore from '@/stores/historyStore';
@@ -14,8 +13,8 @@ export default function Dropdown() {
   const { setIsOpen, isOpen, ref } = useDetectClose(false);
 
   return (
-    <nav className="absolute left-6">
-      <section className="relative bottom-8">
+    <div className="absolute left-6">
+      <div className="relative bottom-8">
         <div
           className="flex items-center w-[168px] h-[36px] rounded-lg border-2 border-brown-70 bg-white-10 shadow-outer/down cursor-pointer"
           onClick={() => {
@@ -25,30 +24,18 @@ export default function Dropdown() {
           <div className="w-full flex justify-between px-2">
             <div className="flex justify-start">
               {DROPDOWN_OPTIONS.map((list, index) => (
-                <p className="text-xs text-brown-80" key={list.title}>
+                <p className="text-xs text-brown-80" key={index}>
                   {selectOption === list.title && list.selected}
                 </p>
               ))}
             </div>
-
             {isOpen ? (
-              <Image
-                src="/assets/icon/up.svg"
-                alt="up button"
-                width={16}
-                height={16}
-              />
+              <img src="/assets/icon/up.svg" />
             ) : (
-              <Image
-                src="/assets/icon/down.svg"
-                alt="down button"
-                width={16}
-                height={16}
-              />
+              <img src="/assets/icon/down.svg" />
             )}
           </div>
         </div>
-
         <Collapse open={isOpen}>
           {isOpen && (
             <div className="flex flex-col w-[168px] h-[92px] mt-1 rounded-lg border-2 border-brown-70 bg-white-10 shadow-outer/down cursor-pointer">
@@ -62,7 +49,6 @@ export default function Dropdown() {
                     작성한 게시글
                   </p>
                 </div>
-
                 <div
                   className=" border-b border-dotted border-brown-50"
                   onClick={() => setSelectOption('boardLiked')}>
@@ -70,7 +56,6 @@ export default function Dropdown() {
                     좋아요를 누른 게시글
                   </p>
                 </div>
-
                 <div
                   onClick={() => {
                     setSelectOption('commentWritten');
@@ -83,7 +68,7 @@ export default function Dropdown() {
             </div>
           )}
         </Collapse>
-      </section>
-    </nav>
+      </div>
+    </div>
   );
 }
diff --git a/client/src/components/history/FailureModal.tsx b/client/src/components/history/FailureModal.tsx
index f4417427..1ec15a1b 100644
--- a/client/src/components/history/FailureModal.tsx
+++ b/client/src/components/history/FailureModal.tsx
@@ -1,31 +1,32 @@
 'use client';
 
-import useModalStore from '@/stores/modalStore';
+import useSignModalStore from '@/stores/signModalStore';
 
-import { CommonButton, Modal, ModalPortal } from '../common';
+import Modal from '../common/Modal';
+import ModalPortal from '../common/ModalPortal';
+import CommonButton from '../common/CommonButton';
 
 export default function FailureModal() {
-  const { close } = useModalStore();
+  const close = useSignModalStore((state) => state.close);
 
   return (
     <ModalPortal>
-      <Modal className="min-w-[312px] h-fit flex flex-col justify-center items-center mx-1">
-        <div className="flex flex-col items-center gap-6 pt-10 pb-8">
-          <div className="flex flex-col items-center gap-3 px-5 text-[22px]">
-            <p className="font-bold text-brown-70 text-center break-keep leading-8">
+      <Modal className="w-full min-w-[312px] max-w-[480px] h-fit flex flex-col justify-center items-center mx-1">
+        <div className="flex flex-col items-center gap-6 py-10">
+          <div className="flex flex-col items-center gap-3 px-5">
+            <p className="font-bold text-brown-70 text-[28px] text-center break-keep leading-8">
               비밀번호가
             </p>
-            <p className="font-bold">
+            <p className="font-bold text-[28px]">
               <b className="text-red-50">일치하지 않습니다.</b>
             </p>
           </div>
         </div>
-
         <div>
           <CommonButton
             type="button"
             size="md"
-            className="py-2 px-4 text-[20px] mb-6"
+            className="w-[96px] h-[52px] text-[24px] mb-5"
             onClose={close}>
             닫기
           </CommonButton>
diff --git a/client/src/components/history/HistoryBoard.tsx b/client/src/components/history/HistoryBoard.tsx
index 1d33e9c4..89f0bba0 100644
--- a/client/src/components/history/HistoryBoard.tsx
+++ b/client/src/components/history/HistoryBoard.tsx
@@ -1,30 +1,40 @@
 'use client';
 
 import { useRouter } from 'next/navigation';
+import { useInfiniteQuery } from '@tanstack/react-query';
 import InfiniteScroll from 'react-infinite-scroller';
 
-import useUserStore from '@/stores/userStore';
+import { getBoardWrittenByPage } from '@/api/history';
 
-import useHistoryBoard from '@/hooks/useHistoryBoard';
+import useUserStore from '@/stores/userStore';
 
-import { HistoryPostCard } from '.';
 import EmptyDiary from '../leaf/EmptyDiary';
-import { ErrorMessage, LoadingMessage } from '../common';
+import HistoryPostCard from './HistoryPostCard';
+
+import ErrorMessage from '../common/ErrorMessage';
+import LoadingMessage from '../common/LoadingMessage';
 
 import { HistoryBoradProps } from '@/types/common';
+import useClient from '@/hooks/useClient';
 
 export default function HistoryBoard({ paramsId }: HistoryBoradProps) {
   const router = useRouter();
+  const isClient = useClient();
+  const userId = useUserStore((state) => state.userId);
 
-  const { userId } = useUserStore();
+  const { data, fetchNextPage, hasNextPage, isLoading, isError } =
+    useInfiniteQuery(
+      ['boardWritten'],
+      ({ pageParam = 1 }) => getBoardWrittenByPage({ pageParam }, paramsId),
 
-  const {
-    data: boards,
-    fetchNextPage,
-    hasNextPage,
-    isLoading,
-    isError,
-  } = useHistoryBoard(paramsId);
+      {
+        getNextPageParam: (lastPage) => {
+          return lastPage.pageInfo.page !== lastPage.pageInfo.totalPages
+            ? lastPage.pageInfo.page + 1
+            : undefined;
+        },
+      },
+    );
 
   const likesAmount = (likes: []) => {
     if (likes?.length === 0) return 0;
@@ -34,10 +44,10 @@ export default function HistoryBoard({ paramsId }: HistoryBoradProps) {
 
   return (
     <>
-      {boards?.map((page, index) => (
+      {data?.pages.map((page, index) => (
         <div key={index}>
           {page?.boardWritten?.length === 0 ? (
-            <section
+            <div
               key={index}
               className="w-[715px] my-4 max-[730px]:w-[512px] max-[630px]:w-[312px] flex justify-center items-center ml-1">
               <EmptyDiary
@@ -47,12 +57,12 @@ export default function HistoryBoard({ paramsId }: HistoryBoradProps) {
                 addInfo="addBoard"
                 className="max-w-[314px] max-[507px]:mx-3 max-[430px]:w-[214px] text-[13px]"
               />
-            </section>
+            </div>
           ) : (
             <InfiniteScroll
               hasMore={hasNextPage}
               loadMore={() => fetchNextPage()}>
-              <section className="grid grid-cols-3 gap-4 place-items-center items-start max-[730px]:grid-cols-2 max-[530px]:grid-cols-1 pb-4">
+              <div className="grid grid-cols-3 gap-4 place-items-center items-start max-[730px]:grid-cols-2 max-[530px]:grid-cols-1 pb-4">
                 {page.boardWritten?.map((board: any) => (
                   <div
                     key={board.boardId}
@@ -70,18 +80,16 @@ export default function HistoryBoard({ paramsId }: HistoryBoradProps) {
                     />
                   </div>
                 ))}
-              </section>
+              </div>
             </InfiniteScroll>
           )}
         </div>
       ))}
-
       {isLoading && (
         <div className="w-[715px] py-6 max-[730px]:w-[512px] max-[630px]:w-[312px] flex justify-center items-center">
           <LoadingMessage />
         </div>
       )}
-
       {isError && (
         <div className="w-[715px] py-6 max-[730px]:w-[512px] max-[630px]:w-[312px] flex justify-center items-center">
           <ErrorMessage />
diff --git a/client/src/components/history/HistoryBox.tsx b/client/src/components/history/HistoryBox.tsx
index a23826cd..b4c8d17e 100644
--- a/client/src/components/history/HistoryBox.tsx
+++ b/client/src/components/history/HistoryBox.tsx
@@ -5,14 +5,12 @@ import useUserStore from '@/stores/userStore';
 
 import useClient from '@/hooks/useClient';
 
-import {
-  UserButton,
-  UserInfo,
-  Dropdown,
-  HistoryBoard,
-  HistoryLikes,
-  HistoryComment,
-} from '.';
+import UserButton from './UserButton';
+import UserInfo from './UserInfo';
+import Dropdown from './Dropdown';
+import HistoryBoard from './HistoryBoard';
+import HistoryLikes from './HistoryLikes';
+import HistoryComment from './HistoryComment';
 
 import { ADMIN_USER_ID } from '@/constants/values';
 
@@ -21,22 +19,23 @@ interface HistoryProps {
 }
 
 export default function HistoryBox({ paramsId }: HistoryProps) {
-  const { userId } = useUserStore();
-  const { selectOption } = useHistoryStore();
-
   const isClient = useClient();
 
   const id = paramsId;
+  const userId = useUserStore((state) => state.userId);
+
+  const selectOption = useHistoryStore((state) => state.selectOption);
+
   const isOwner = userId === id;
 
   const isBoardWritten = selectOption === 'boardWritten';
-  const isBoardLikes = selectOption === 'boardLiked';
-  const isBoardComments = selectOption === 'commentWritten';
+  const isBoardLike = selectOption === 'boardLiked';
+  const isComment = selectOption === 'commentWritten';
 
   return (
     <>
       {isClient && (
-        <section className="relative bg-[url('/assets/img/bg_wood_yellow.png')] rounded-[12px] border-8 border-border-30 shadow-outer/down shadow-container border-gradient mb-[60px]">
+        <div className="relative bg-[url('/assets/img/bg_wood_yellow.png')] rounded-[12px] border-8 border-border-30 shadow-outer/down shadow-container border-gradient mb-[60px]">
           <div className="flex flex-col items-center justify-center mb-2 max-[730px]:w-[512px] max-[530px]:w-[412px] max-[430px]:w-[312px] min-w-[312px] max-w-[715px] max-h-[650px] p-4 pt-9">
             {userId !== ADMIN_USER_ID && (
               <div className="w-full flex justify-end gap-3 mr-1 mb-4 max-[530px]:flex max-[530px]:justify-center max-[530px]:items-center">
@@ -57,12 +56,12 @@ export default function HistoryBox({ paramsId }: HistoryProps) {
             {(userId || paramsId) && (
               <div className="h-full min-h-[200px] pt-1 px-2 overflow-y-scroll overflow-x-hidden scrollbar">
                 {isBoardWritten && <HistoryBoard paramsId={id} />}
-                {isOwner && isBoardLikes && <HistoryLikes paramsId={id} />}
-                {isOwner && isBoardComments && <HistoryComment paramsId={id} />}
+                {isOwner && isBoardLike && <HistoryLikes paramsId={id} />}
+                {isOwner && isComment && <HistoryComment paramsId={id} />}
               </div>
             )}
           </div>
-        </section>
+        </div>
       )}
     </>
   );
diff --git a/client/src/components/history/HistoryComment.tsx b/client/src/components/history/HistoryComment.tsx
index bf8c15a5..815087f0 100644
--- a/client/src/components/history/HistoryComment.tsx
+++ b/client/src/components/history/HistoryComment.tsx
@@ -1,43 +1,44 @@
 'use client';
 
 import { useRouter } from 'next/navigation';
+import { useInfiniteQuery } from '@tanstack/react-query';
 import InfiniteScroll from 'react-infinite-scroller';
 
-import useUserStore from '@/stores/userStore';
+import { getCommentWrittenByPage } from '@/api/history';
 
-import useHistoryComment from '@/hooks/useHistoryComment';
+import useUserStore from '@/stores/userStore';
 
-import { HistoryPostCard } from '.';
 import EmptyDiary from '../leaf/EmptyDiary';
-import { ErrorMessage, LoadingMessage } from '../common';
+import HistoryPostCard from './HistoryPostCard';
+
+import LoadingMessage from '../common/LoadingMessage';
+import ErrorMessage from '../common/ErrorMessage';
 
 import { HistoryBoradProps } from '@/types/common';
 
 export default function HistoryComment({ paramsId }: HistoryBoradProps) {
   const router = useRouter();
+  const userId = useUserStore((state) => state.userId);
 
-  const { userId } = useUserStore();
-
-  const {
-    data: comments,
-    fetchNextPage,
-    hasNextPage,
-    isLoading,
-    isError,
-  } = useHistoryComment(paramsId);
-
-  const likesAmount = (likes: []) => {
-    if (likes?.length === 0) return 0;
-
-    return likes.length;
-  };
+  const { data, fetchNextPage, hasNextPage, isLoading, isError } =
+    useInfiniteQuery(
+      ['commentWritten'],
+      ({ pageParam = 1 }) => getCommentWrittenByPage({ pageParam }, paramsId),
+      {
+        getNextPageParam: (lastPage) => {
+          return lastPage.pageInfo.page !== lastPage.pageInfo.totalPages
+            ? lastPage.pageInfo.page + 1
+            : undefined;
+        },
+      },
+    );
 
   return (
     <>
-      {comments?.map((page, index) => (
+      {data?.pages.map((page, index) => (
         <div key={index}>
           {page.commentWritten?.length === 0 ? (
-            <section
+            <div
               key={index}
               className="w-[715px] my-4 max-[730px]:w-[512px] max-[630px]:w-[312px] flex justify-center items-center ml-1">
               <EmptyDiary
@@ -46,12 +47,12 @@ export default function HistoryComment({ paramsId }: HistoryBoradProps) {
                 info="comment"
                 className="max-w-[314px] max-[507px]:mx-3 max-[430px]:w-[214px] text-[13px]"
               />
-            </section>
+            </div>
           ) : (
             <InfiniteScroll
               hasMore={hasNextPage}
               loadMore={() => fetchNextPage()}>
-              <section className="grid grid-cols-3 gap-4 place-items-center items-start max-[730px]:grid-cols-2 max-[530px]:grid-cols-1 pb-4">
+              <div className="grid grid-cols-3 gap-4 place-items-center items-start max-[730px]:grid-cols-2 max-[530px]:grid-cols-1 pb-4">
                 {page.commentWritten?.map((board: any) => (
                   <div
                     key={board.boardId}
@@ -64,23 +65,23 @@ export default function HistoryComment({ paramsId }: HistoryBoradProps) {
                           : board.imageUrls[0]
                       }
                       title={board.title}
-                      likes={likesAmount(board.likes)}
+                      likes={
+                        board.likes?.length === 0 ? 0 : board.likes?.length
+                      }
                       comment={board.commentNums}
                     />
                   </div>
                 ))}
-              </section>
+              </div>
             </InfiniteScroll>
           )}
         </div>
       ))}
-
       {isLoading && (
         <div className="w-[715px] py-6 max-[730px]:w-[512px] max-[630px]:w-[312px] flex justify-center items-center">
           <LoadingMessage />
         </div>
       )}
-
       {isError && (
         <div className="w-[715px] py-6 max-[730px]:w-[512px] max-[630px]:w-[312px] flex justify-center items-center">
           <ErrorMessage />
diff --git a/client/src/components/history/HistoryLikes.tsx b/client/src/components/history/HistoryLikes.tsx
index a50b70d7..4add05fc 100644
--- a/client/src/components/history/HistoryLikes.tsx
+++ b/client/src/components/history/HistoryLikes.tsx
@@ -1,30 +1,39 @@
 'use client';
 
 import { useRouter } from 'next/navigation';
+import { useInfiniteQuery } from '@tanstack/react-query';
 import InfiniteScroll from 'react-infinite-scroller';
 
-import useHistoryLikes from '@/hooks/useHistoryLikes';
+import { getBoardLikedByPage } from '@/api/history';
 
 import useUserStore from '@/stores/userStore';
 
-import { HistoryPostCard } from '.';
 import EmptyDiary from '../leaf/EmptyDiary';
-import { ErrorMessage, LoadingMessage } from '../common';
+import HistoryPostCard from './HistoryPostCard';
+
+import LoadingMessage from '../common/LoadingMessage';
+import ErrorMessage from '../common/ErrorMessage';
 
 import { HistoryBoradProps } from '@/types/common';
 
 export default function HistoryLikes({ paramsId }: HistoryBoradProps) {
   const router = useRouter();
+  const userId = useUserStore((state) => state.userId);
 
-  const { userId } = useUserStore();
+  const { data, fetchNextPage, hasNextPage, isLoading, isError } =
+    useInfiniteQuery(
+      ['boardLiked'],
+      ({ pageParam = 1 }) => getBoardLikedByPage({ pageParam }, paramsId),
+      {
+        getNextPageParam: (lastPage) => {
+          if (lastPage.pageInfo.totalElement === 0) return;
 
-  const {
-    data: likes,
-    fetchNextPage,
-    hasNextPage,
-    isLoading,
-    isError,
-  } = useHistoryLikes(paramsId);
+          if (lastPage.pageInfo.page !== lastPage.pageInfo.totalPages) {
+            return lastPage.pageInfo.page + 1;
+          }
+        },
+      },
+    );
 
   const likesAmount = (likes: []) => {
     if (likes?.length === 0) return 0;
@@ -34,7 +43,7 @@ export default function HistoryLikes({ paramsId }: HistoryBoradProps) {
 
   return (
     <>
-      {likes?.map((page, index) => (
+      {data?.pages.map((page, index) => (
         <div key={index}>
           {page?.boardLiked?.length === 0 ? (
             <div
@@ -79,7 +88,6 @@ export default function HistoryLikes({ paramsId }: HistoryBoradProps) {
           <LoadingMessage />
         </div>
       )}
-
       {isError && (
         <div className="w-[715px] py-6 max-[730px]:w-[512px] max-[630px]:w-[312px] flex justify-center items-center">
           <ErrorMessage />
diff --git a/client/src/components/history/HistoryPostCard.tsx b/client/src/components/history/HistoryPostCard.tsx
index 630d2ac5..a297b0d9 100644
--- a/client/src/components/history/HistoryPostCard.tsx
+++ b/client/src/components/history/HistoryPostCard.tsx
@@ -1,5 +1,5 @@
-import Image from 'next/image';
 import { motion } from 'framer-motion';
+import Image from 'next/image';
 
 interface HistoryPostCardProps {
   imageUrl: string;
@@ -20,13 +20,23 @@ export default function HistoryPostCard({
       whileTap={{ scale: 0.95 }}
       className="flex flex-col items-center justify-center w-[200px] h-[175px] rounded-lg border-2 border-brown-50 bg-brown-10 shadow-outer/down">
       <div className="w-[121px] h-[92px] mb-2 mx-auto">
-        <Image
-          src={imageUrl ? imageUrl : '/assets/img/bg_default_post.png'}
-          className="object-cover object-center w-full h-full border-2 border-brown-40 rounded-lg bg-brown-20"
-          width={117}
-          height={88}
-          alt="post_image"
-        />
+        {imageUrl ? (
+          <Image
+            src={imageUrl}
+            className="object-cover object-center w-full h-full border-2 border-brown-40 rounded-lg bg-brown-20"
+            width={117}
+            height={88}
+            alt="post_image"
+          />
+        ) : (
+          <Image
+            src={'/assets/img/bg_default_post.png'}
+            className="object-cover object-center w-full h-full border-2 border-brown-40 rounded-lg bg-brown-20"
+            width={117}
+            height={88}
+            alt="post_image"
+          />
+        )}
       </div>
 
       <div className="w-[180px] mb-1">
diff --git a/client/src/components/history/ResignModal.tsx b/client/src/components/history/ResignModal.tsx
index 00f24111..d9a836f3 100644
--- a/client/src/components/history/ResignModal.tsx
+++ b/client/src/components/history/ResignModal.tsx
@@ -2,10 +2,15 @@
 
 import { useForm } from 'react-hook-form';
 
-import useResignCheck from '@/hooks/useResignCheck';
+import { postUserPassword } from '@/api/history';
 
-import { SignModalInput } from '../sign';
-import { CommonButton, Modal, ModalPortal } from '../common';
+import useSignModalStore from '@/stores/signModalStore';
+import useUserStore from '@/stores/userStore';
+
+import Modal from '../common/Modal';
+import ModalPortal from '../common/ModalPortal';
+import SignModalInput from '../sign/SignModalInput';
+import CommonButton from '../common/CommonButton';
 
 import { SignFormValue } from '@/types/common';
 
@@ -13,61 +18,67 @@ export default function ResignModal() {
   const {
     register,
     watch,
-    handleSubmit,
-    formState: { errors, isSubmitting },
+    formState: { isSubmitting },
   } = useForm<SignFormValue>();
 
-  const { onPasswordCheck, close } = useResignCheck();
+  const setAccessToken = useUserStore((state) => state.setAccessToken);
+  const { close, changeState } = useSignModalStore();
 
   const userPassword = watch('password');
 
+  const handlePasswordCheck = async () => {
+    if (!userPassword) return;
+
+    const response = await postUserPassword(userPassword);
+
+    if (response) {
+      return (
+        changeState('ConfirmModal'),
+        setAccessToken(response.headers?.authorization)
+      );
+    }
+
+    return changeState('FailureModal');
+  };
+
   return (
     <ModalPortal>
       <Modal className="min-w-[312px] h-fit flex flex-col justify-center items-center mx-1">
-        <form
-          onSubmit={handleSubmit(() => onPasswordCheck(userPassword))}
-          className="flex flex-col items-center">
-          <div className="flex flex-col items-center gap-4 px-5 mt-10 mx-4">
-            <div className="flex flex-col items-center leading-8 text-[22px] max-[705px]:text-[18px]">
-              <p className="font-bold text-brown-70 text-center break-keep">
-                탈퇴하시려면
+        <div className="flex flex-col items-center gap-4 px-5 mt-10 mx-4">
+          <div className="flex flex-col items-center leading-8 text-[22px] max-[705px]:text-[18px]">
+            <p className="font-bold text-brown-70 text-center break-keep  ">
+              탈퇴하시려면
+            </p>
+            <div className="flex flex-col items-center font-bold text-brown-70 ">
+              <p className="font-bold text-brown-80 text-center break-keep leading-8 ">
+                가입 시 등록하셨던
               </p>
-              <div className="flex flex-col items-center font-bold text-brown-70 ">
-                <p className="font-bold text-brown-80 text-center break-keep leading-8">
-                  가입 시 등록하셨던
-                </p>
-                <div className="font-bold text-brown-80 text-center break-keep leading-8">
-                  비밀번호
-                  <span className="text-brown-70">를 입력해주세요.</span>
-                </div>
+              <div className="font-bold text-brown-80 text-center break-keep leading-8 ">
+                비밀번호
+                <span className="text-brown-70 ">를 입력해주세요.</span>
               </div>
             </div>
-
-            <SignModalInput
-              type="password"
-              register={register}
-              errors={errors}
-            />
           </div>
+          <SignModalInput type="password" register={register} />
+        </div>
+        <div className="flex gap-4 mt-6 mb-6">
+          <CommonButton
+            type="button"
+            size="sm"
+            className="py-2 px-4 text-[20px]"
+            disabled={isSubmitting}
+            onCheck={handlePasswordCheck}>
+            완료
+          </CommonButton>
 
-          <div className="flex gap-4 mt-1 mb-6">
-            <CommonButton
-              type="submit"
-              size="sm"
-              className="py-2 px-4 text-[20px]"
-              disabled={isSubmitting}>
-              완료
-            </CommonButton>
-
-            <CommonButton
-              type="button"
-              size="sm"
-              className="py-2 px-4 text-[20px]"
-              onClose={close}>
-              취소
-            </CommonButton>
-          </div>
-        </form>
+          <CommonButton
+            type="button"
+            size="sm"
+            className="py-2 px-4 text-[20px]"
+            onClose={close}>
+            취소
+          </CommonButton>
+        </div>
       </Modal>
     </ModalPortal>
   );
diff --git a/client/src/components/history/SuccessedModal.tsx b/client/src/components/history/SuccessedModal.tsx
index b1a79a44..a5dc1dec 100644
--- a/client/src/components/history/SuccessedModal.tsx
+++ b/client/src/components/history/SuccessedModal.tsx
@@ -2,19 +2,22 @@
 
 import { useRouter } from 'next/navigation';
 
+import useSignModalStore from '@/stores/signModalStore';
 import useUserStore from '@/stores/userStore';
-import useModalStore from '@/stores/modalStore';
 
-import { CommonButton, Modal, ModalPortal } from '../common';
+import CommonButton from '../common/CommonButton';
+import Modal from '../common/Modal';
+import ModalPortal from '../common/ModalPortal';
 
 export default function SuccessedModal() {
   const router = useRouter();
 
-  const { setClear } = useUserStore();
-  const { close } = useModalStore();
+  const close = useSignModalStore((state) => state.close);
+  const setClear = useUserStore((state) => state.setClear);
 
   const allCloseData = () => {
     setClear();
+    localStorage.clear();
     close();
 
     router.push('/');
@@ -33,15 +36,14 @@ export default function SuccessedModal() {
             <span>이용해 주셔서 감사합니다.</span>
             <span className="mt-6">다음에 또 놀러 오세요!</span>
           </div>
-
           <div>
             <CommonButton
               type="button"
               size="sm"
+              children="닫기"
               className="py-2 px-4 text-[18px]"
-              onClose={allCloseData}>
-              닫기
-            </CommonButton>
+              onClose={allCloseData}
+            />
           </div>
         </div>
       </Modal>
diff --git a/client/src/components/history/UserButton.tsx b/client/src/components/history/UserButton.tsx
index e0e0d66b..e43dd67a 100644
--- a/client/src/components/history/UserButton.tsx
+++ b/client/src/components/history/UserButton.tsx
@@ -3,19 +3,18 @@
 import { useRouter } from 'next/navigation';
 
 import useUserStore from '@/stores/userStore';
-import useModalStore from '@/stores/modalStore';
+import useSignModalStore from '@/stores/signModalStore';
 
-import { CommonButton } from '../common';
+import CommonButton from '../common/CommonButton';
 
 export default function UserButton() {
   const router = useRouter();
 
   const { isGoogleLogin } = useUserStore();
-  const { changeType, open } = useModalStore();
+  const changeState = useSignModalStore((state) => state.changeState);
 
   const handleResignModal = () => {
-    open();
-    isGoogleLogin ? changeType('ConfirmModal') : changeType('ResignModal');
+    isGoogleLogin ? changeState('ConfirmModal') : changeState('ResignModal');
   };
 
   return (
@@ -27,7 +26,6 @@ export default function UserButton() {
         onProfile={() => router.push('/profile')}>
         정보 수정
       </CommonButton>
-
       <CommonButton
         type="button"
         size="md"
diff --git a/client/src/components/history/UserInfo.tsx b/client/src/components/history/UserInfo.tsx
index 5d7724b6..e55d7193 100644
--- a/client/src/components/history/UserInfo.tsx
+++ b/client/src/components/history/UserInfo.tsx
@@ -1,28 +1,41 @@
 'use client';
 
-import Image from 'next/image';
+import { useEffect } from 'react';
 import { useRouter } from 'next/navigation';
+import Image from 'next/image';
+
+import { getUserInfo } from '@/api/history';
 
 import useUserStore from '@/stores/userStore';
+import useHistoryStore from '@/stores/historyStore';
 
 import useClient from '@/hooks/useClient';
-import useUserInfo from '@/hooks/useUserInfo';
 
-import { CommonButton } from '../common';
+import CommonButton from '../common/CommonButton';
 
 interface HistoryUserProps {
   paramsId: string;
 }
 
 export default function UserInfo({ paramsId }: HistoryUserProps) {
+  const isClient = useClient();
+  const router = useRouter();
+
+  const userId = useUserStore((state) => state.userId);
   const id = paramsId;
 
-  const router = useRouter();
+  const { setHistoryUser, profileImageUrl, displayName, grade, point } =
+    useHistoryStore();
 
-  const { userId } = useUserStore();
+  useEffect(() => {
+    const getHistoryData = async () => {
+      const response = await getUserInfo(id);
 
-  const isClient = useClient();
-  const { profileImageUrl, displayName, grade, point } = useUserInfo(id);
+      setHistoryUser(response.data);
+    };
+
+    getHistoryData();
+  }, [id]);
 
   return (
     <div className="flex flex-col justify-center items-center">
@@ -35,52 +48,43 @@ export default function UserInfo({ paramsId }: HistoryUserProps) {
           alt="profile_img"
         />
       )}
-
-      <section className="flex flex-col justify-center items-center mb-6 gap-2">
-        <h3 className="text-2xl font-bold text-brown-80">{displayName}</h3>
-        <h4 className="font-bold text-brown-70">{grade}</h4>
-      </section>
-
+      <div className="flex flex-col justify-center items-center mb-6 gap-2">
+        <div className="text-2xl font-bold text-brown-80">{displayName}</div>
+        <p className="font-bold text-brown-70">{grade}</p>
+      </div>
       {userId === id ? (
-        <section className="flex items-center justify-center bg-[url('/assets/img/bg_board_sm.png')] w-[192px] h-[96px] shadow-outer/down mb-5">
+        <div className="flex items-center justify-center bg-[url('/assets/img/bg_board_sm.png')] w-[192px] h-[96px] shadow-outer/down mb-5">
           <div className="flex items-center justify-center gap-2">
-            <Image
-              src="/assets/img/point.svg"
-              alt="point icon"
-              width={24}
-              height={24}
-            />
+            <img src="/assets/img/point.svg" />
             <p className="text-xl font-bold text-brown-10">
               {point?.toLocaleString()}
             </p>
           </div>
-        </section>
+        </div>
       ) : (
         <>
           <div className="flex justify-center gap-3 max-[580px]:flex-col items-center">
             <CommonButton
               type="button"
               size="lg"
+              children="정원 구경하기"
               className="w-[196px] h-[52px] text-[22px] px-4"
-              onGoToGarden={() => router.push(`/garden/${id}`)}>
-              정원 구경하기
-            </CommonButton>
-
+              onGoToGarden={() => router.push(`/garden/${id}`)}
+            />
             <CommonButton
               type="button"
               size="lg"
+              children="식물 카드 열람"
               className="w-[196px] h-[52px] text-[22px] px-4"
-              onGoToLeafs={() => router.push(`/leafs/${id}`)}>
-              식물 카드 열람
-            </CommonButton>
+              onGoToLeafs={() => router.push(`/leafs/${id}`)}
+            />
           </div>
-
           <CommonButton
             type="button"
             size="lg"
-            className="w-[203px] h-[52px] text-brown-50 border-brown-50 bg-[url('/assets/img/bg_wood_light.png')] mt-6 cursor-default max-[580px]:mt-3">
-            작성한 게시글
-          </CommonButton>
+            children="작성한 게시글"
+            className="w-[203px] h-[52px] text-brown-50 border-brown-50 bg-[url('/assets/img/bg_wood_light.png')] mt-6 cursor-default max-[580px]:mt-3"
+          />
         </>
       )}
     </div>
diff --git a/client/src/components/history/index.ts b/client/src/components/history/index.ts
deleted file mode 100644
index 7c343f68..00000000
--- a/client/src/components/history/index.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import ConfirmModal from './ConfirmModal';
-import Dropdown from './Dropdown';
-import FailureModal from './FailureModal';
-import HistoryBoard from './HistoryBoard';
-import HistoryBox from './HistoryBox';
-import HistoryComment from './HistoryComment';
-import HistoryLikes from './HistoryLikes';
-import HistoryPostCard from './HistoryPostCard';
-import ResignModal from './ResignModal';
-import SuccessedModal from './SuccessedModal';
-import UserButton from './UserButton';
-import UserInfo from './UserInfo';
-
-export {
-  ConfirmModal,
-  Dropdown,
-  FailureModal,
-  HistoryBoard,
-  HistoryBox,
-  HistoryComment,
-  HistoryLikes,
-  HistoryPostCard,
-  ResignModal,
-  SuccessedModal,
-  UserButton,
-  UserInfo,
-};
diff --git a/client/src/components/profile/ChangeProfileModal.tsx b/client/src/components/profile/ChangeNicknameModal.tsx
similarity index 53%
rename from client/src/components/profile/ChangeProfileModal.tsx
rename to client/src/components/profile/ChangeNicknameModal.tsx
index 2e90e4f7..84a0dbee 100644
--- a/client/src/components/profile/ChangeProfileModal.tsx
+++ b/client/src/components/profile/ChangeNicknameModal.tsx
@@ -1,38 +1,33 @@
-import useModalStore from '@/stores/modalStore';
+import useSignModalStore from '@/stores/signModalStore';
 
-import { CommonButton, Modal, ModalPortal } from '../common';
+import CommonButton from '../common/CommonButton';
+import Modal from '../common/Modal';
+import ModalPortal from '../common/ModalPortal';
 
-import { PROFILE_MODAL_TEXT } from '@/constants/contents';
-
-interface ChangeProfileModalProps {
-  type: 'password' | 'nickname' | 'image';
-}
-
-export default function ChangeProfileModal({ type }: ChangeProfileModalProps) {
-  const { close } = useModalStore();
+export default function ChangeNicknameModal() {
+  const close = useSignModalStore((state) => state.close);
 
   return (
     <ModalPortal>
       <Modal className="min-w-[312px] h-[200px] flex flex-col justify-center items-center mx-1">
-        <section className="px-9 flex flex-col items-center gap-6">
+        <div className="px-9 flex flex-col items-center gap-6">
           <div className="flex flex-col items-center gap-3">
             <p className="font-bold text-brown-70 text-[28px] leading-9 text-center max-[790px]:text-[22px] max-[705px]:leading-7">
-              {PROFILE_MODAL_TEXT[type]}&nbsp;
-              <br className="hidden max-[845px]:block max-[790px]:hidden max-[705px]:block " />
+              닉네임이
+              <br className="hidden max-[845px]:block max-[790px]:hidden max-[705px]:block " />{' '}
               <span className="text-brown-90">변경되었습니다!</span>
             </p>
           </div>
-
           <div>
             <CommonButton
               type="button"
               size="sm"
+              children="닫기"
               className="py-2 px-4 text-[20px]"
-              onClose={close}>
-              닫기
-            </CommonButton>
+              onClose={close}
+            />
           </div>
-        </section>
+        </div>
       </Modal>
     </ModalPortal>
   );
diff --git a/client/src/components/profile/ChangePasswordModal.tsx b/client/src/components/profile/ChangePasswordModal.tsx
new file mode 100644
index 00000000..fbff2fae
--- /dev/null
+++ b/client/src/components/profile/ChangePasswordModal.tsx
@@ -0,0 +1,34 @@
+import useSignModalStore from '@/stores/signModalStore';
+
+import CommonButton from '../common/CommonButton';
+import Modal from '../common/Modal';
+import ModalPortal from '../common/ModalPortal';
+
+export default function ChangePasswordModal() {
+  const close = useSignModalStore((state) => state.close);
+
+  return (
+    <ModalPortal>
+      <Modal className="min-w-[312px] h-[200px] flex flex-col justify-center items-center mx-1">
+        <div className="flex flex-col items-center gap-6 px-9">
+          <div className="flex flex-col items-center gap-3">
+            <p className="font-bold text-brown-70 text-[28px] leading-9 text-center max-[790px]:text-[22px] max-[750px]:leading-7">
+              비밀번호가
+              <br className="hidden max-[901px]:block max-[790px]:hidden max-[750px]:block " />{' '}
+              <span className="text-brown-90">변경되었습니다!</span>
+            </p>
+          </div>
+          <div>
+            <CommonButton
+              type="button"
+              size="sm"
+              children="닫기"
+              className="py-2 px-4 text-[20px]"
+              onClose={close}
+            />
+          </div>
+        </div>
+      </Modal>
+    </ModalPortal>
+  );
+}
diff --git a/client/src/components/profile/ImageForm.tsx b/client/src/components/profile/ImageForm.tsx
index 4a45c350..3e1a98a3 100644
--- a/client/src/components/profile/ImageForm.tsx
+++ b/client/src/components/profile/ImageForm.tsx
@@ -1,24 +1,67 @@
 'use client';
 
+import { useRef, useState } from 'react';
 import Image from 'next/image';
 
+import { updateUserProfileImage } from '@/api/profile';
+
+import useUserStore from '@/stores/userStore';
+
 import useClient from '@/hooks/useClient';
-import useChangeImage from '@/hooks/useChangeImage';
 
-import { CommonButton } from '../common';
+import CommonButton from '../common/CommonButton';
 
 import { DefaultProps } from '@/types/common';
 
 export default function ImageForm({ className }: DefaultProps) {
   const isClient = useClient();
-  const {
-    imageUploadRef,
-    imageUrl,
-    isDisabled,
 
-    onImageChange,
-    onImageSubmit,
-  } = useChangeImage();
+  const { profileImageUrl, setProfileImageUrl, setAccessToken } =
+    useUserStore();
+
+  const [image, setImage] = useState<FileList>();
+  const [imageUrl, setImageUrl] = useState(profileImageUrl);
+  const [isDisabled, setIsDisabled] = useState(true);
+
+  const imageUploadRef = useRef<HTMLInputElement | null>(null);
+
+  const checkFileSize = (file: File) => {
+    if (file && file.type.startsWith('image/')) {
+      if (file.size <= 2 * 1024 * 1024) {
+        return true;
+      }
+    }
+
+    alert('2mb 이하의 이미지만 등록이 가능합니다.');
+    return false;
+  };
+
+  const onImageChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files;
+
+    if (!file) return;
+
+    if (file[0] && checkFileSize(file[0])) {
+      setImage(file);
+
+      const newFileURL = URL.createObjectURL(file[0]);
+      setImageUrl(newFileURL);
+      setIsDisabled(false);
+    }
+  };
+
+  const onImageSubmit = async () => {
+    if (image && !isDisabled) {
+      const response = await updateUserProfileImage(image[0]);
+
+      setProfileImageUrl(imageUrl);
+      setIsDisabled(true);
+
+      if (response.status === 204) {
+        setAccessToken(response.headers?.authorization);
+      }
+    }
+  };
 
   return (
     <>
@@ -34,7 +77,6 @@ export default function ImageForm({ className }: DefaultProps) {
               priority
               onClick={() => imageUploadRef.current?.click()}
             />
-
             <input
               type="file"
               accept="image/*"
@@ -42,7 +84,6 @@ export default function ImageForm({ className }: DefaultProps) {
               ref={imageUploadRef}
               onChange={onImageChange}
             />
-
             <CommonButton
               type="submit"
               size="sm"
@@ -51,7 +92,6 @@ export default function ImageForm({ className }: DefaultProps) {
               disabled={isDisabled}>
               이미지 등록
             </CommonButton>
-
             <p className="text-gray-70 text-xs mb-8">
               2mb 이하의 이미지만 등록이 가능합니다.
             </p>
diff --git a/client/src/components/profile/NicknameForm.tsx b/client/src/components/profile/NicknameForm.tsx
index 9ec0e3bc..c6f10b3d 100644
--- a/client/src/components/profile/NicknameForm.tsx
+++ b/client/src/components/profile/NicknameForm.tsx
@@ -3,22 +3,29 @@
 import { useEffect } from 'react';
 import { useForm } from 'react-hook-form';
 
-import useChangeNickname from '@/hooks/useChangeNickname';
+import { updateUserNickname } from '@/api/profile';
 
-import { CommonButton, TextInput } from '../common';
+import useUserStore from '@/stores/userStore';
+import useSignModalStore from '@/stores/signModalStore';
+
+import TextInput from '../common/TextInput';
+import CommonButton from '../common/CommonButton';
 
 import { InputValues } from '@/types/common';
 
 export default function NicknameForm() {
+  const { setDisplayName, displayName } = useUserStore();
   const {
     register,
     handleSubmit,
     formState: { errors, isSubmitting },
     watch,
+    reset,
     setValue,
   } = useForm<InputValues>();
 
-  const { updateNickName, displayName } = useChangeNickname();
+  const changeState = useSignModalStore((state) => state.changeState);
+  const setAccessToken = useUserStore((state) => state.setAccessToken);
 
   const nickname = watch('nickname');
 
@@ -26,9 +33,23 @@ export default function NicknameForm() {
     setValue('nickname', displayName);
   }, [displayName]);
 
+  const updateNickName = async () => {
+    if (!nickname) return;
+
+    const response = await updateUserNickname(nickname);
+    setDisplayName(nickname);
+
+    if (response.status === 204) {
+      setAccessToken(response.headers?.authorization);
+    }
+
+    reset();
+    changeState('ChangeNicknameModal');
+  };
+
   return (
     <form
-      onSubmit={handleSubmit(() => updateNickName(nickname))}
+      onSubmit={handleSubmit(updateNickName)}
       className="relative w-fit flex justify-center">
       <div className="w-fit flex justify-center max-[580px]:flex-col">
         <label
@@ -36,7 +57,6 @@ export default function NicknameForm() {
           className="text-[20px] text-brown-80 font-bold pt-2 pr-2.5 ml-[68px] max-[580px]:ml-0 max-[580px]:p-0 max-[580px]:pb-3">
           닉네임 :
         </label>
-
         <div className="flex">
           <TextInput
             id="nickname"
@@ -45,7 +65,6 @@ export default function NicknameForm() {
             errors={errors}
             className="w-[244px] max-[420px]:w-[200px]"
           />
-
           <div className="mt-[2px]">
             <CommonButton
               type="submit"
diff --git a/client/src/components/profile/PasswordForm.tsx b/client/src/components/profile/PasswordForm.tsx
index 7ed55174..1a69d279 100644
--- a/client/src/components/profile/PasswordForm.tsx
+++ b/client/src/components/profile/PasswordForm.tsx
@@ -2,9 +2,13 @@
 
 import { useForm } from 'react-hook-form';
 
-import useChangePassword from '@/hooks/useChagnePassword';
+import { updateUserPassword } from '@/api/profile';
 
-import { CommonButton, PasswordInput } from '../common';
+import useSignModalStore from '@/stores/signModalStore';
+import useUserStore from '@/stores/userStore';
+
+import PasswordInput from '../common/PasswordInput';
+import CommonButton from '../common/CommonButton';
 
 import { InputValues } from '@/types/common';
 
@@ -14,15 +18,32 @@ export default function PasswordForm() {
     handleSubmit,
     formState: { errors, isSubmitting },
     watch,
+    reset,
   } = useForm<InputValues>();
 
+  const changeState = useSignModalStore((state) => state.changeState);
+  const setAccessToken = useUserStore((state) => state.setAccessToken);
+
   const presentPassword = watch('password');
   const changedPassword = watch('newPasswordCheck');
 
-  const { updatePassword } = useChangePassword(
-    presentPassword,
-    changedPassword,
-  );
+  const updatePassword = async () => {
+    if (!presentPassword && !changedPassword) return;
+
+    if (presentPassword === changedPassword) {
+      alert('기존 비밀번호와 동일합니다. 새로운 비밀번호를 입력해 주세요.');
+      return;
+    }
+
+    const response = await updateUserPassword(presentPassword, changedPassword);
+
+    if (response.status === 204) {
+      setAccessToken(response.headers?.authorization);
+    }
+
+    reset();
+    changeState('ChangePasswordModal');
+  };
 
   return (
     <form
diff --git a/client/src/components/profile/ProfileBox.tsx b/client/src/components/profile/ProfileBox.tsx
index 01a92247..ad20c9eb 100644
--- a/client/src/components/profile/ProfileBox.tsx
+++ b/client/src/components/profile/ProfileBox.tsx
@@ -1,33 +1,33 @@
 'use client';
 
 import useUserStore from '@/stores/userStore';
-import useModalStore from '@/stores/modalStore';
+import useSignModalStore from '@/stores/signModalStore';
 
-import { ImageForm, NicknameForm, PasswordForm } from '.';
+import ImageForm from './ImageForm';
+import NicknameForm from './NicknameForm';
+import PasswordForm from './PasswordForm';
 
-import { Screws, CommonButton } from '../common';
+import Screws from '../common/Screws';
+import CommonButton from '../common/CommonButton';
 
 import { ADMIN_USER_ID } from '@/constants/values';
 
 export default function ProfileBox() {
   const { userId, isGoogleLogin } = useUserStore();
-  const { changeType, open } = useModalStore();
+  const changeState = useSignModalStore((state) => state.changeState);
 
   const handleResignModal = () => {
-    isGoogleLogin ? changeType('ConfirmModal') : changeType('ResignModal');
-    open();
+    isGoogleLogin ? changeState('ConfirmModal') : changeState('ResignModal');
   };
 
   return (
-    <main className="relative flex flex-col items-center justify-center bg-[url('/assets/img/bg_wood_yellow.png')] w-full min-w-[312px] max-w-[560px] h-full rounded-xl shadow-container border-gradient mb-[60px]">
+    <div className="relative flex flex-col items-center justify-center bg-[url('/assets/img/bg_wood_yellow.png')] w-full min-w-[312px] max-w-[560px] h-full rounded-xl shadow-container border-gradient mb-[60px]">
       <Screws />
       <ImageForm className="mt-8" />
 
       <div className="w-full flex flex-col items-center mb-4">
         <NicknameForm />
-
         {!isGoogleLogin && <PasswordForm />}
-
         {userId !== ADMIN_USER_ID && (
           <CommonButton
             type="button"
@@ -38,6 +38,6 @@ export default function ProfileBox() {
           </CommonButton>
         )}
       </div>
-    </main>
+    </div>
   );
 }
diff --git a/client/src/components/profile/index.ts b/client/src/components/profile/index.ts
deleted file mode 100644
index a40c41fb..00000000
--- a/client/src/components/profile/index.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import ChangeProfileModal from './ChangeProfileModal';
-import ImageForm from './ImageForm';
-import NicknameForm from './NicknameForm';
-import PasswordForm from './PasswordForm';
-import ProfileBox from './ProfileBox';
-
-export {
-  ChangeProfileModal,
-  ImageForm,
-  NicknameForm,
-  PasswordForm,
-  ProfileBox,
-};
diff --git a/client/src/components/sign/SignInput.tsx b/client/src/components/sign/SignInput.tsx
index ce447bd6..c66d8f88 100644
--- a/client/src/components/sign/SignInput.tsx
+++ b/client/src/components/sign/SignInput.tsx
@@ -2,18 +2,14 @@
 
 import { UseFormRegister, FieldErrors } from 'react-hook-form';
 
-import { SignFormValue } from '@/types/common';
-
-import { SIGN_REQUIRE } from '@/constants/contents';
+import { SIGNIN_REQUIRE, SIGNIN_VAILDATION } from '@/constants/contents';
 
-import getRegisterByType from '@/utils/getRegisterByType';
+import { SignFormValue } from '@/types/common';
 
 interface SignInputProps {
   type: 'email' | 'nickname';
-
   register: UseFormRegister<SignFormValue>;
   errors: FieldErrors<SignFormValue>;
-
   disabled?: boolean;
 }
 
@@ -23,25 +19,61 @@ export default function SignInput({
   errors,
   disabled,
 }: SignInputProps) {
-  const registerFormat = getRegisterByType(type);
-
   const errorMsg = errors[type]?.message;
 
+  const getRegisterByType = (type: string) => {
+    if (type === 'email') {
+      return {
+        validation: {
+          required: true,
+          pattern: {
+            value: /\S+@\S+\.\S+/,
+            message: SIGNIN_VAILDATION[type],
+          },
+        },
+      };
+    }
+
+    if (type === 'nickname') {
+      return {
+        validation: {
+          required: true,
+          pattern: {
+            value: /^[가-힣a-zA-Z]+$/,
+            message: SIGNIN_VAILDATION.nickname,
+          },
+          minLength: {
+            value: 2,
+            message: SIGNIN_VAILDATION.nickname,
+          },
+          maxLength: {
+            value: 6,
+            message: '6글자 이하의 영문 또는 한글을 입력해야 합니다.',
+          },
+        },
+      };
+    }
+
+    return null;
+  };
+
+  const registerFormat = getRegisterByType(type);
+
   return (
     <div className="flex flex-col max-[420px]:mx-5">
       <input
         type={type}
         autoComplete="off"
         className={`pl-9 py-[10px] font-normal text-[12px] border-2 border-brown-70 rounded-lg bg-[center_left_12px] bg-no-repeat ${SIGN_INPUT_BG[type]} leading-[12px] outline-none shadow-outer/down min-[420px]:min-w-[300px]`}
-        placeholder={SIGN_REQUIRE[type]}
+        placeholder={SIGNIN_REQUIRE[type]}
         disabled={disabled}
         required
         {...register(type, registerFormat?.validation)}
       />
 
-      <p className="h-[12px] mt-[8px] pl-[38px] w-full text-[0.6rem] leading-3 text-red-50">
+      <div className="h-[12px] mt-[8px] pl-[38px] w-full text-[0.6rem] leading-3 text-red-50">
         {errorMsg}
-      </p>
+      </div>
     </div>
   );
 }
diff --git a/client/src/components/sign/SignLink.tsx b/client/src/components/sign/SignLink.tsx
index 121b3995..31dc48d0 100644
--- a/client/src/components/sign/SignLink.tsx
+++ b/client/src/components/sign/SignLink.tsx
@@ -10,7 +10,6 @@ interface SignLinkProps extends DefaultProps {
   type: 'signin' | 'signup';
   route: '/signin' | '/signup';
   text: 'signinText' | 'signupText';
-
   onLinkTo?: () => void;
   onClick?: React.MouseEventHandler<HTMLButtonElement>;
 }
@@ -26,9 +25,9 @@ export default function SignLink({
     <div className={twMerge('text-brown-80', className)} onClick={onLinkTo}>
       <Link href={route}>
         {SIGN_LINK_TO[text]}
-        <p className="inline-block font-bold hover:scale-110 transition-transform">
+        <div className="inline-block font-bold hover:scale-110 transition-transform">
           &nbsp;{SIGN_LINK_TO[type]}
-        </p>
+        </div>
       </Link>
     </div>
   );
diff --git a/client/src/components/sign/SignModalInput.tsx b/client/src/components/sign/SignModalInput.tsx
index e9e518e0..70094331 100644
--- a/client/src/components/sign/SignModalInput.tsx
+++ b/client/src/components/sign/SignModalInput.tsx
@@ -1,41 +1,70 @@
-import { FieldErrors, UseFormRegister } from 'react-hook-form';
+import { UseFormRegister } from 'react-hook-form';
 
-import { SignFormValue } from '@/types/common';
-
-import { SIGN_REQUIRE } from '@/constants/contents';
+import { SIGNIN_REQUIRE, SIGNIN_VAILDATION } from '@/constants/contents';
 
-import getRegisterByType from '@/utils/getRegisterByType';
+import { SignFormValue } from '@/types/common';
 
 interface SignModalInputProps {
   type: 'code' | 'email' | 'password';
-
   register: UseFormRegister<SignFormValue>;
-  errors: FieldErrors<SignFormValue>;
 }
 
 export default function SignModalInput({
   type,
   register,
-  errors,
 }: SignModalInputProps) {
-  const registerFormat = getRegisterByType(type);
+  const getRegisterByType = (type: string) => {
+    if (type === 'code') {
+      return {
+        validation: {
+          required: '올바른 인증번호를 입력해주세요.',
+          pattern: {
+            value: /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8}$/,
+            message: SIGNIN_VAILDATION[type],
+          },
+        },
+      };
+    }
 
-  const errorMsg = errors[type]?.message;
+    if (type === 'email') {
+      return {
+        validation: {
+          required: '올바른 이메일을 입력해주세요.',
+          pattern: {
+            value: /\S+@\S+\.\S+/,
+            message: SIGNIN_VAILDATION[type],
+          },
+        },
+      };
+    }
+
+    if (type === 'password') {
+      return {
+        validation: {
+          required: true,
+          pattern: {
+            value: /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,12}$/,
+            message: SIGNIN_VAILDATION[type],
+          },
+        },
+      };
+    }
+
+    return null;
+  };
+
+  const registerFormat = getRegisterByType(type);
 
   return (
-    <section>
+    <>
       <input
         type={type}
         autoComplete="off"
         className={`w-full max-w-[300px] pl-4 py-[10px] font-normal text-[12px] border-2 border-brown-70 rounded-[50px] bg-[center_left_12px] bg-no-repeat leading-[12px] outline-none shadow-outer/down max-[705px]:py-[6px]`}
-        placeholder={SIGN_REQUIRE[type]}
+        placeholder={SIGNIN_REQUIRE[type]}
         required
         {...register(type, registerFormat?.validation)}
       />
-
-      <p className="flex justify-center items-center w-full h-[12px] mt-[8px] px-1 text-[0.6rem] leading-3 text-red-50 tracking-[-0.07em]">
-        {errorMsg}
-      </p>
-    </section>
+    </>
   );
 }
diff --git a/client/src/components/sign/SignPasswordInput.tsx b/client/src/components/sign/SignPasswordInput.tsx
index 4aef0a6c..fcdabc0c 100644
--- a/client/src/components/sign/SignPasswordInput.tsx
+++ b/client/src/components/sign/SignPasswordInput.tsx
@@ -2,40 +2,67 @@
 
 import { UseFormRegister, FieldErrors, UseFormWatch } from 'react-hook-form';
 
-import { SignFormValue } from '@/types/common';
-
-import { SIGN_REQUIRE } from '@/constants/contents';
+import { SIGNIN_REQUIRE, SIGNIN_VAILDATION } from '@/constants/contents';
 
-import getPasswordByType from '@/utils/getPasswordByType';
+import { SignFormValue } from '@/types/common';
 
 interface SignPasswordInputProps {
   tag: 'password' | 'passwordCheck';
   register: UseFormRegister<SignFormValue>;
-  watch: UseFormWatch<SignFormValue>;
   errors: FieldErrors<SignFormValue>;
+  watch: UseFormWatch<SignFormValue>;
   disabled?: boolean;
 }
 
 export default function SignPasswordInput({
   tag,
   register,
-  watch,
   errors,
+  watch,
   disabled,
 }: SignPasswordInputProps) {
-  const passwordFormat = getPasswordByType(tag, watch);
-
   const errorMsg = errors[tag]?.message;
 
+  const getRegisterByType = (
+    tag: string,
+    watch?: UseFormWatch<SignFormValue>,
+  ) => {
+    if (tag === 'password') {
+      return {
+        validation: {
+          required: true,
+          pattern: {
+            value: /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,12}$/,
+            message: SIGNIN_VAILDATION[tag],
+          },
+        },
+      };
+    }
+
+    if (tag === 'passwordCheck' && watch) {
+      return {
+        validation: {
+          required: true,
+          validate: (value: string) =>
+            value === watch('password') || SIGNIN_VAILDATION[tag],
+        },
+      };
+    }
+
+    return null;
+  };
+
+  const registerFormat = getRegisterByType(tag, watch);
+
   return (
     <div className="flex flex-col max-[420px]:mx-5">
       <input
         type="password"
         className={`pl-9 py-[10px] font-normal text-[12px] border-2 border-brown-70 rounded-lg bg-[center_left_12px] bg-no-repeat ${SIGN_INPUT_BG[tag]} leading-[12px] outline-none shadow-outer/down min-[420px]:min-w-[300px]`}
-        placeholder={SIGN_REQUIRE[tag]}
+        placeholder={SIGNIN_REQUIRE[tag]}
         disabled={disabled}
         required
-        {...register(tag, passwordFormat?.validation)}
+        {...register(tag, registerFormat?.validation)}
       />
 
       <div className="h-[12px] mt-[8px] pl-[38px] w-full text-[0.6rem] leading-3 text-red-50">
diff --git a/client/src/components/sign/index.ts b/client/src/components/sign/index.ts
deleted file mode 100644
index 584da0cf..00000000
--- a/client/src/components/sign/index.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import SignInput from './SignInput';
-import SignLink from './SignLink';
-import SignModalInput from './SignModalInput';
-import SignPasswordInput from './SignPasswordInput';
-
-export { SignInput, SignLink, SignModalInput, SignPasswordInput };
diff --git a/client/src/components/signin/FailureModal.tsx b/client/src/components/signin/FailureModal.tsx
index 8530bea9..e796011c 100644
--- a/client/src/components/signin/FailureModal.tsx
+++ b/client/src/components/signin/FailureModal.tsx
@@ -1,12 +1,14 @@
-import useModalStore from '@/stores/modalStore';
+import useSignModalStore from '@/stores/signModalStore';
 
-import { CommonButton, Modal, ModalPortal } from '../common';
+import CommonButton from '../common/CommonButton';
+import Modal from '../common/Modal';
+import ModalPortal from '../common/ModalPortal';
 
 export default function FailureModal() {
-  const { changeType } = useModalStore();
+  const { changeState } = useSignModalStore();
 
   const handleEmailFailure = () => {
-    return changeType('FindPasswordModal');
+    return changeState('FindPasswordModal');
   };
 
   return (
@@ -15,14 +17,12 @@ export default function FailureModal() {
         <div className="flex flex-col items-center gap-6 py-10">
           <div className="flex flex-col items-center gap-3 px-5">
             <p className="font-bold text-brown-70 text-[28px] text-center break-keep leading-8 max-[480px]:text-2xl">
-              <b className="text-red-50">등록되지 않은&nbsp;</b>
-              &nbsp;이메일입니다.
+              <b className="text-red-50">등록되지 않은 </b> 이메일입니다.
             </p>
             <p className="font-bold text-brown-90 text-[28px] max-[480px]:text-2xl">
               다시 입력해주세요.
             </p>
           </div>
-
           <div>
             <CommonButton
               type="button"
diff --git a/client/src/components/signin/FindPasswordModal.tsx b/client/src/components/signin/FindPasswordModal.tsx
index 212f1f1d..a7be0caa 100644
--- a/client/src/components/signin/FindPasswordModal.tsx
+++ b/client/src/components/signin/FindPasswordModal.tsx
@@ -2,63 +2,83 @@
 
 import { useForm } from 'react-hook-form';
 
-import useFindPassword from '@/hooks/useFindPassword';
+import { getUsersEmail, sendTemporaryPasswordByEmail } from '@/api/user';
 
-import { SignModalInput } from '../sign';
-import { CommonButton, Modal, ModalPortal } from '../common';
+import useSignModalStore from '@/stores/signModalStore';
 
-import { SignFormValue } from '@/types/common';
+import Modal from '../common/Modal';
+import ModalPortal from '../common/ModalPortal';
+import SignModalInput from '../sign/SignModalInput';
+import CommonButton from '../common/CommonButton';
+
+import { SignFormValue, UserData } from '@/types/common';
 
 export default function FindPasswordModal() {
   const {
     register,
     watch,
-    handleSubmit,
-    formState: { errors, isSubmitting },
+    formState: { isSubmitting },
   } = useForm<SignFormValue>();
 
-  const { onEmailCheck, close } = useFindPassword();
+  const { close, changeState } = useSignModalStore();
 
   const userEmail = watch('email');
 
+  const postNewPassword = async (email: string) => {
+    if (!email) return;
+
+    await sendTemporaryPasswordByEmail(email);
+  };
+
+  const handleEmailCheck = async (email: string) => {
+    if (!userEmail) return;
+
+    const response = await getUsersEmail();
+
+    const existEmail = response?.data.data.find(
+      (current: UserData) => current.email === userEmail,
+    );
+
+    if (!existEmail) return changeState('FailureModal');
+
+    postNewPassword(email);
+    return changeState('SuccessedModal');
+  };
+
   return (
     <ModalPortal>
       <Modal className="w-full min-w-[312px] max-w-[531px] h-fit flex flex-col justify-center items-center max-[572px]:max-w-[448px] max-[480px]:max-w-[312px]">
-        <form
-          onSubmit={handleSubmit(() => onEmailCheck(userEmail))}
-          className="flex flex-col items-center">
-          <div className="flex flex-col items-center gap-6 px-5 mt-10">
-            <div className="flex flex-col items-center gap-1">
-              <p className="font-bold text-brown-70 text-[24px] text-center break-keep leading-8">
-                가입하셨던 이메일로
-              </p>
-              <p className="font-bold text-brown-70 text-[28px] text-center break-keep leading-8">
-                <span className="text-brown-90">임시 비밀번호</span>를
-                발송해드립니다.
-              </p>
-            </div>
-
-            <SignModalInput type="email" register={register} errors={errors} />
-          </div>
-
-          <div className="flex gap-2">
-            <CommonButton
-              type="submit"
-              size="md"
-              className="w-[88px] h-[52px] text-[24px] mb-8"
-              disabled={isSubmitting}>
-              완료
-            </CommonButton>
-
-            <CommonButton
-              type="button"
-              size="md"
-              className="w-[88px] h-[52px] text-[24px]"
-              onClose={close}>
-              취소
-            </CommonButton>
+        <div className="flex flex-col items-center gap-6 px-5 mt-10">
+          <div className="flex flex-col items-center gap-1">
+            <p className="font-bold text-brown-70 text-[24px] text-center break-keep leading-8">
+              가입하셨던 이메일로
+            </p>
+            <p className="font-bold text-brown-70 text-[28px] text-center break-keep leading-8">
+              <span className="text-brown-90">임시 비밀번호</span>를
+              발송해드립니다.
+            </p>
           </div>
-        </form>
+          <SignModalInput type="email" register={register} />
+        </div>
+        <div className="flex gap-2 mt-6">
+          <CommonButton
+            type="button"
+            size="md"
+            className="w-[88px] h-[52px] text-[24px] mb-8"
+            disabled={isSubmitting}
+            onCheck={() => {
+              handleEmailCheck(userEmail);
+            }}>
+            완료
+          </CommonButton>
+          <CommonButton
+            type="button"
+            size="md"
+            className="w-[88px] h-[52px] text-[24px]"
+            onClose={close}>
+            취소
+          </CommonButton>
+        </div>
       </Modal>
     </ModalPortal>
   );
diff --git a/client/src/components/signin/LoginButton.tsx b/client/src/components/signin/LoginButton.tsx
index edd343c4..1420cbdf 100644
--- a/client/src/components/signin/LoginButton.tsx
+++ b/client/src/components/signin/LoginButton.tsx
@@ -1,29 +1,60 @@
 'use client';
 
 import { useRouter } from 'next/navigation';
+import { useEffect } from 'react';
 
+import useUserStore from '@/stores/userStore';
 import useSignStore from '@/stores/signStore';
 
 import useClient from '@/hooks/useClient';
-import useGoogleLogin from '@/hooks/useGoogleLogin';
 
-import { CommonButton } from '../common';
+import CommonButton from '../common/CommonButton';
 
 export default function LoginButtion() {
   const googleOauth = process.env.NEXT_PUBLIC_GOOGLE_OAUTH_URL;
 
+  const isClient = useClient();
   const router = useRouter();
 
-  const { getSigninForm } = useSignStore();
-
-  const isClient = useClient();
-  const { isGoogleLogin, isEmailLogin, onGoogleLogin } = useGoogleLogin();
+  const getSigninForm = useSignStore((state) => state.getSigninForm);
+  const { isGoogleLogin, setGoogleUser, isLogin } = useUserStore();
 
-  const goToGoogleLogin = () => {
+  const onGoogleLogin = () => {
     router.push(`${googleOauth}`);
-    onGoogleLogin;
   };
 
+  useEffect(() => {
+    const queryString = window?.location?.search;
+    const urlParams = new URLSearchParams(queryString);
+
+    const userId = String(urlParams.get('accountId'));
+    const accessToken = `Bearer ${urlParams.get('access_token')}`;
+    const refreshToken = urlParams.get('refresh_token');
+    const username = urlParams.get('displayName');
+    //! profileIamgeUrl
+    const profileImageUrl = urlParams.get('profileIamgeUrl');
+
+    const displayName = decodeURIComponent(username as string);
+
+    if (
+      userId &&
+      accessToken &&
+      refreshToken &&
+      displayName &&
+      profileImageUrl
+    ) {
+      setGoogleUser({
+        accessToken,
+        refreshToken,
+        userId,
+        displayName,
+        profileImageUrl,
+      });
+
+      router.push('/');
+    }
+  }, [isGoogleLogin]);
+
   return (
     <>
       {isClient && (
@@ -31,8 +62,8 @@ export default function LoginButtion() {
           <CommonButton
             type="submit"
             size="fix"
-            onGoogle={() => goToGoogleLogin()}
-            disabled={isEmailLogin}
+            onGoogle={onGoogleLogin}
+            disabled={isLogin}
             className="hover:scale-105 transition-transform">
             구글로 로그인
           </CommonButton>
diff --git a/client/src/components/signin/SigninForm.tsx b/client/src/components/signin/SigninForm.tsx
index d8f2ecac..4b50f557 100644
--- a/client/src/components/signin/SigninForm.tsx
+++ b/client/src/components/signin/SigninForm.tsx
@@ -1,13 +1,19 @@
 'use client';
 
-import { useForm } from 'react-hook-form';
+import { useRouter } from 'next/navigation';
 
-import useModalStore from '@/stores/modalStore';
+import { SubmitHandler, useForm } from 'react-hook-form';
 
-import useSignin from '@/hooks/useSignIn';
+import { postUserInfo } from '@/api/user';
 
-import { SignPasswordInput, SignInput } from '../sign';
-import { CommonButton } from '../common';
+import useSignModalStore from '@/stores/signModalStore';
+import useSignStore from '@/stores/signStore';
+import useUserStore from '@/stores/userStore';
+
+import SignPasswordInput from '../sign/SignPasswordInput';
+import SignInput from '../sign/SignInput';
+
+import CommonButton from '../common/CommonButton';
 
 import { SignFormValue } from '@/types/common';
 
@@ -17,22 +23,56 @@ export default function SigninForm() {
     handleSubmit,
     formState: { errors, isSubmitting },
     watch,
+    reset,
   } = useForm<SignFormValue>();
 
-  const { open, changeType } = useModalStore();
+  const router = useRouter();
+
+  const changeState = useSignModalStore((state) => state.changeState);
+  const setUser = useUserStore((state) => state.setUser);
+  const { getSigninForm, getSignupForm } = useSignStore();
+
+  const onLogin: SubmitHandler<SignFormValue> = async ({
+    email,
+    password,
+  }: SignFormValue) => {
+    try {
+      const response = await postUserInfo(email, password);
+
+      const userId = String(response.data.accountId);
+      const accessToken = response.headers.authorization;
+      const refreshToken = response.headers.refresh;
+      const displayName = decodeURIComponent(
+        response.data.displayName,
+      ).replaceAll('+', ' ');
+      const profileImageUrl = response.data.profileImageUrl;
 
-  const { onSiginIn } = useSignin();
+      setUser({
+        userId,
+        accessToken,
+        refreshToken,
+        displayName,
+        profileImageUrl,
+      });
 
-  const email = watch('email');
-  const password = watch('password');
+      getSigninForm(false);
+      getSignupForm(false);
+
+      reset();
+
+      router.push('/');
+    } catch (error) {
+      alert('로그인에 실패했습니다. 다시 시도해 주세요.');
+      console.error(error);
+    }
+  };
 
   return (
-    <section className="flex flex-col items-center gap-5 px-5 mt-3">
-      <form onSubmit={handleSubmit(() => onSiginIn({ email, password }))}>
+    <div className="flex flex-col items-center gap-5 px-5 mt-3">
+      <form onSubmit={handleSubmit(onLogin)}>
         <div className="flex flex-col gap-6">
           <div className="flex flex-col gap-1">
             <SignInput type="email" register={register} errors={errors} />
-
             <SignPasswordInput
               tag="password"
               register={register}
@@ -40,7 +80,6 @@ export default function SigninForm() {
               watch={watch}
             />
           </div>
-
           <div className="flex justify-center items-center gap-3">
             <CommonButton
               type="submit"
@@ -49,20 +88,16 @@ export default function SigninForm() {
               disabled={isSubmitting}>
               로그인
             </CommonButton>
-
             <CommonButton
               type="button"
               size="md"
               className="w-[161px] h-[44px]"
-              onFind={() => {
-                changeType('FindPasswordModal');
-                open();
-              }}>
+              onFind={() => changeState('FindPasswordModal')}>
               비밀번호 찾기
             </CommonButton>
           </div>
         </div>
       </form>
-    </section>
+    </div>
   );
 }
diff --git a/client/src/components/signin/SigninIntro.tsx b/client/src/components/signin/SigninIntro.tsx
index fa58beb7..47ca33ea 100644
--- a/client/src/components/signin/SigninIntro.tsx
+++ b/client/src/components/signin/SigninIntro.tsx
@@ -2,15 +2,18 @@
 
 import useSignStore from '@/stores/signStore';
 
-import { SigninForm, LoginButtion } from '.';
-import { SignLink } from '../sign';
-import { Logo, Screws } from '../common';
+import SignLink from '../sign/SignLink';
+import SigninForm from './SigninForm';
+import LoginButtion from './LoginButton';
+
+import Logo from '@/components/common/Logo';
+import Screws from '@/components/common/Screws';
 
 export default function SigninIntro() {
   const { isEmailSignin, getSignupForm } = useSignStore();
 
   return (
-    <main className="relative flex flex-col items-center justify-center bg-[url('/assets/img/bg_wood_yellow.png')] w-full min-w-[312px] max-w-[480px] h-fit rounded-[12px] border-8 border-border-30 shadow-outer/down shadow-container border-gradient">
+    <div className="relative flex flex-col items-center justify-center bg-[url('/assets/img/bg_wood_yellow.png')] w-full min-w-[312px] max-w-[480px] h-fit rounded-[12px] border-8 border-border-30 shadow-outer/down shadow-container border-gradient">
       <div className="flex flex-col items-center gap-5 py-10">
         <Logo size="medium" className="hover:scale-105 transition-transform" />
 
@@ -25,6 +28,6 @@ export default function SigninIntro() {
         />
       </div>
       <Screws />
-    </main>
+    </div>
   );
 }
diff --git a/client/src/components/signin/SuccessedModal.tsx b/client/src/components/signin/SuccessedModal.tsx
index 36075554..5d74a68a 100644
--- a/client/src/components/signin/SuccessedModal.tsx
+++ b/client/src/components/signin/SuccessedModal.tsx
@@ -1,9 +1,11 @@
-import useModalStore from '@/stores/modalStore';
+import useSignModalStore from '@/stores/signModalStore';
 
-import { CommonButton, Modal, ModalPortal } from '../common';
+import CommonButton from '../common/CommonButton';
+import Modal from '../common/Modal';
+import ModalPortal from '../common/ModalPortal';
 
 export default function SuccessedModal() {
-  const { close } = useModalStore();
+  const close = useSignModalStore((state) => state.close);
 
   return (
     <ModalPortal>
@@ -18,15 +20,14 @@ export default function SuccessedModal() {
               <span className="text-brown-90">비밀번호를 변경해주세요.</span>
             </p>
           </div>
-
           <div>
             <CommonButton
               type="button"
               size="sm"
+              children="닫기"
               className="py-2 px-4 text-[20px]"
-              onClose={close}>
-              닫기
-            </CommonButton>
+              onClose={close}
+            />
           </div>
         </div>
       </Modal>
diff --git a/client/src/components/signin/index.ts b/client/src/components/signin/index.ts
deleted file mode 100644
index b6ef6927..00000000
--- a/client/src/components/signin/index.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import FailureModal from './FailureModal';
-import FindPasswordModal from './FindPasswordModal';
-import LoginButtion from './LoginButton';
-import SigninForm from './SigninForm';
-import SigninIntro from './SigninIntro';
-import SuccessedModal from './SuccessedModal';
-
-export {
-  FailureModal,
-  FindPasswordModal,
-  LoginButtion,
-  SigninForm,
-  SigninIntro,
-  SuccessedModal,
-};
diff --git a/client/src/components/signup/AuthEmailModal.tsx b/client/src/components/signup/AuthEmailModal.tsx
index 29a484e7..aa31e537 100644
--- a/client/src/components/signup/AuthEmailModal.tsx
+++ b/client/src/components/signup/AuthEmailModal.tsx
@@ -2,11 +2,13 @@
 
 import { useForm } from 'react-hook-form';
 
-import useModalStore from '@/stores/modalStore';
+import useSignModalStore from '@/stores/signModalStore';
 import useSignStore from '@/stores/signStore';
 
-import { SignModalInput } from '../sign';
-import { CommonButton, Modal, ModalPortal } from '../common';
+import Modal from '../common/Modal';
+import ModalPortal from '../common/ModalPortal';
+import SignModalInput from '../sign/SignModalInput';
+import CommonButton from '../common/CommonButton';
 
 import { SignFormValue } from '@/types/common';
 
@@ -14,12 +16,11 @@ export default function AuthEmailModal() {
   const {
     register,
     watch,
-    handleSubmit,
-    formState: { errors, isSubmitting },
+    formState: { isSubmitting },
   } = useForm<SignFormValue>();
 
-  const { close, changeType } = useModalStore();
-  const { code, setIsCode } = useSignStore();
+  const { close, changeState } = useSignModalStore();
+  const code = useSignStore((state) => state.code);
 
   const userCode = watch('code');
 
@@ -27,54 +28,49 @@ export default function AuthEmailModal() {
     if (!userCode) return;
 
     if (userCode === code) {
-      return setIsCode(true), close();
+      return changeState('Successed');
     }
 
-    return changeType('FailureModal');
+    return changeState('Not Code');
   };
 
   return (
     <ModalPortal>
       <Modal className="w-full min-w-[312px] max-w-[460px] h-fit flex flex-col justify-center items-center max-[480px]:max-w-[312px]">
-        <form
-          onSubmit={handleSubmit(handleCodeCheck)}
-          className="flex flex-col items-center">
-          <div className="flex flex-col items-center gap-6 px-5 mt-10 mx-4">
-            <div className="flex flex-col items-center gap-2">
-              <p className="font-bold text-brown-70 text-[24px]">
-                이메일로 전송된
-              </p>
-              <p className="font-bold text-brown-70  text-[28px] text-center break-keep leading-8">
-                <span className="text-brown-90">인증 번호</span>를 입력해주세요.
-              </p>
-              <p className="mt-2 font-bold text-red-50 text-sm text-center break-keep leading-5">
-                메일이 도착하지 않았다면
-                <br />
-                스팸 메일함을 확인해주세요!
-              </p>
-            </div>
-
-            <SignModalInput type="code" register={register} errors={errors} />
+        <div className="flex flex-col items-center gap-6 px-5 mt-10 mx-4">
+          <div className="flex flex-col items-center gap-2">
+            <p className="font-bold text-brown-70 text-[24px]">
+              이메일로 전송된
+            </p>
+            <p className="font-bold text-brown-70  text-[28px] text-center break-keep leading-8">
+              <span className="text-brown-90">인증 번호</span>를 입력해주세요.
+            </p>
+            <p className="mt-2 font-bold text-red-50 text-sm text-center break-keep leading-5">
+              메일이 도착하지 않았다면
+              <br />
+              스팸 메일함을 확인해주세요!
+            </p>
           </div>
+          <SignModalInput type="code" register={register} />
+        </div>
 
-          <div className="flex gap-2 mt-6 mb-8">
-            <CommonButton
-              type="submit"
-              size="md"
-              className="w-[88px] h-[52px] text-[24px]"
-              disabled={isSubmitting}>
-              완료
-            </CommonButton>
-
-            <CommonButton
-              type="button"
-              size="md"
-              className="w-[88px] h-[52px] text-[24px]"
-              onClose={close}>
-              취소
-            </CommonButton>
-          </div>
-        </form>
+        <div className="flex gap-2 mt-6 mb-8">
+          <CommonButton
+            type="button"
+            size="md"
+            className="w-[88px] h-[52px] text-[24px]"
+            disabled={isSubmitting}
+            onCheck={handleCodeCheck}>
+            완료
+          </CommonButton>
+          <CommonButton
+            type="button"
+            size="md"
+            className="w-[88px] h-[52px] text-[24px]"
+            onClose={close}>
+            취소
+          </CommonButton>
+        </div>
       </Modal>
     </ModalPortal>
   );
diff --git a/client/src/components/signup/FailureModal.tsx b/client/src/components/signup/FailureModal.tsx
index 974092a3..1fe682f9 100644
--- a/client/src/components/signup/FailureModal.tsx
+++ b/client/src/components/signup/FailureModal.tsx
@@ -1,12 +1,14 @@
-import useModalStore from '@/stores/modalStore';
+import useSignModalStore from '@/stores/signModalStore';
 
-import { CommonButton, Modal, ModalPortal } from '../common';
+import CommonButton from '../common/CommonButton';
+import Modal from '../common/Modal';
+import ModalPortal from '../common/ModalPortal';
 
 export default function FailureModal() {
-  const { changeType } = useModalStore();
+  const changeState = useSignModalStore((state) => state.changeState);
 
   const handleCodeFailure = () => {
-    return changeType('AuthEmailModal');
+    return changeState('AuthEmailModal');
   };
 
   return (
@@ -15,14 +17,13 @@ export default function FailureModal() {
         <div className="flex flex-col items-center gap-6 px-5 mt-10 mx-4">
           <div className="flex flex-col items-center gap-1">
             <p className="font-bold text-brown-70 text-[28px] text-center break-keep leading-8">
-              인증에&nbsp;
-              <span className="text-red-50">실패했습니다.</span>
+              인증에
+              <span className="text-red-50"> 실패했습니다.</span>
             </p>
             <p className="font-bold text-brown-90 text-2xl">
               다시 입력해주세요.
             </p>
           </div>
-
           <div>
             <CommonButton
               type="button"
diff --git a/client/src/components/signup/SignButton.tsx b/client/src/components/signup/SignButton.tsx
index f7c2a554..70e7543f 100644
--- a/client/src/components/signup/SignButton.tsx
+++ b/client/src/components/signup/SignButton.tsx
@@ -2,28 +2,28 @@
 
 import useSignStore from '@/stores/signStore';
 
-import { CommonButton } from '../common';
+import CommonButton from '../common/CommonButton';
 
 export default function SignButton() {
   const { isEmailSignup, getSignupForm } = useSignStore();
 
   return (
     <>
-      <section className="flex flex-col items-center justify-center bg-[url('/assets/img/bg_board_md.png')] w-[320px] h-[224px] shadow-outer/down max-[432px]:scale-75 max-[432px]:-my-4-6">
+      <div className="flex flex-col items-center justify-center bg-[url('/assets/img/bg_board_md.png')] w-[320px] h-[224px] shadow-outer/down max-[432px]:scale-75 max-[432px]:-my-4-6">
         <div className="flex flex-col items-center text-[20px] text-white-10 mb-4">
-          <p className="mb-1">
+          <div className="mb-1">
             <span className=" text-green-10">나만의 정원</span>을
-          </p>
+          </div>
           꾸며 보세요!
         </div>
         <div className="flex flex-col items-center text-[24px] text-white-10 font-bold">
-          <p className="mb-2">지금 가입하면</p>
-          <p>
+          <div className="mb-2">지금 가입하면</div>
+          <div>
             <span className="text-[28px] text-green-10">500포인트</span>
             증정!
-          </p>
+          </div>
         </div>
-      </section>
+      </div>
 
       <CommonButton
         type="button"
diff --git a/client/src/components/signup/SignupForm.tsx b/client/src/components/signup/SignupForm.tsx
index 3be097d0..de31cf90 100644
--- a/client/src/components/signup/SignupForm.tsx
+++ b/client/src/components/signup/SignupForm.tsx
@@ -1,73 +1,87 @@
 'use client';
 
-import { useForm } from 'react-hook-form';
+import { useRouter } from 'next/navigation';
+import { SubmitHandler, useForm } from 'react-hook-form';
 
-import useModalStore from '@/stores/modalStore';
+import { postCreateUser, sendCodeByEmail } from '@/api/user';
+
+import useSignModalStore from '@/stores/signModalStore';
 import useSignStore from '@/stores/signStore';
 
-import useAuthEmail from '@/hooks/useAuthEmail';
-import useSignup from '@/hooks/useSignup';
-import useEffectOnce from '@/hooks/useEffectOnce';
+import SignInput from '../sign/SignInput';
+import SignPasswordInput from '../sign/SignPasswordInput';
 
-import { SignInput, SignPasswordInput } from '../sign';
-import { CommonButton } from '../common';
+import CommonButton from '../common/CommonButton';
 
 import { SignFormValue } from '@/types/common';
 
 export default function SignupForm() {
+  const router = useRouter();
   const {
     register,
     handleSubmit,
     formState: { errors, isSubmitting },
     watch,
+    reset,
   } = useForm<SignFormValue>();
 
-  const { changeType, open } = useModalStore();
-  const { isCode, setIsCode } = useSignStore();
+  const { changeState, currentState } = useSignModalStore();
+  const { setCode, getSigninForm, getSignupForm } = useSignStore();
+
+  const successedCode = currentState === 'Successed';
 
-  const { sendCodeWithEmail } = useAuthEmail();
-  const { onSignup } = useSignup();
+  const handleValidateEmail = () => {
+    changeState('AuthEmailModal');
+  };
 
   const email = watch('email');
-  const password = watch('password');
-  const nickname = watch('nickname');
 
-  const onValidateEmail = () => {
-    if (!email) return;
+  const onSignup: SubmitHandler<SignFormValue> = async ({
+    email,
+    password,
+    nickname,
+  }: SignFormValue) => {
+    try {
+      await postCreateUser(email, password, nickname);
+
+      reset();
 
-    changeType('AuthEmailModal');
-    open();
+      getSigninForm(false);
+      getSignupForm(false);
+
+      router.push('/signin');
+    } catch (error) {
+      console.error(error);
+    }
   };
 
-  useEffectOnce(() => {
-    changeType(null);
-    setIsCode(false);
-  });
+  const sendCodeWithEmail = async (email: string) => {
+    if (!email) return;
+
+    try {
+      const response = await sendCodeByEmail(email);
+      setCode(response.data.data.authCode);
+    } catch (error) {
+      console.error(error);
+    }
+  };
 
   return (
-    <section>
-      <form
-        onSubmit={handleSubmit(() =>
-          onSignup({
-            email,
-            password,
-            nickname,
-          }),
-        )}>
+    <div>
+      <form onSubmit={handleSubmit(onSignup)}>
         <div className="flex flex-col gap-1 w-[300px]">
           <SignInput type="email" register={register} errors={errors} />
-
           <div className="flex justify-center">
             <CommonButton
               type="button"
               size="sm"
               onOpen={() => {
-                onValidateEmail();
+                handleValidateEmail();
                 sendCodeWithEmail(email);
               }}
               className="mb-3"
-              disabled={isCode}>
-              {isCode ? '인증 완료!' : '이메일 인증하기'}
+              disabled={successedCode}>
+              {successedCode ? '인증 완료!' : '이메일 인증하기'}
             </CommonButton>
           </div>
 
@@ -75,7 +89,7 @@ export default function SignupForm() {
             type="nickname"
             register={register}
             errors={errors}
-            disabled={!isCode}
+            disabled={!successedCode}
           />
 
           <SignPasswordInput
@@ -83,7 +97,7 @@ export default function SignupForm() {
             register={register}
             errors={errors}
             watch={watch}
-            disabled={!isCode}
+            disabled={!successedCode}
           />
 
           <SignPasswordInput
@@ -91,7 +105,7 @@ export default function SignupForm() {
             register={register}
             errors={errors}
             watch={watch}
-            disabled={!isCode}
+            disabled={!successedCode}
           />
 
           <div className="flex flex-col justify-center items-center gap-3">
@@ -105,6 +119,6 @@ export default function SignupForm() {
           </div>
         </div>
       </form>
-    </section>
+    </div>
   );
 }
diff --git a/client/src/components/signup/SignupIntro.tsx b/client/src/components/signup/SignupIntro.tsx
index 62f5abc7..078341f3 100644
--- a/client/src/components/signup/SignupIntro.tsx
+++ b/client/src/components/signup/SignupIntro.tsx
@@ -1,14 +1,17 @@
 import useSignStore from '@/stores/signStore';
 
-import { SignupForm, SignButton } from '.';
-import { SignLink } from '../sign';
-import { Logo, Screws } from '../common';
+import SignupForm from './SignupForm';
+import SignLink from '../sign/SignLink';
+import SignButton from './SignButton';
+
+import Logo from '@/components/common/Logo';
+import Screws from '@/components/common/Screws';
 
 export default function SignupIntro() {
   const { isEmailSignup, getSigninForm } = useSignStore();
 
   return (
-    <main className="relative flex flex-col items-center justify-center bg-[url('/assets/img/bg_wood_yellow.png')] w-full min-w-[312px] max-w-[480px] h-fit rounded-[12px] border-8 border-border-30 shadow-outer/down shadow-container border-gradient">
+    <div className="relative flex flex-col items-center justify-center bg-[url('/assets/img/bg_wood_yellow.png')] w-full min-w-[312px] max-w-[480px] h-fit rounded-[12px] border-8 border-border-30 shadow-outer/down shadow-container border-gradient">
       <Screws />
       <div className="flex flex-col items-center gap-6 pt-10">
         <Logo size="medium" className="hover:scale-105 transition-transform" />
@@ -25,6 +28,6 @@ export default function SignupIntro() {
           className="mt-6 pb-10"
         />
       </div>
-    </main>
+    </div>
   );
 }
diff --git a/client/src/components/signup/index.ts b/client/src/components/signup/index.ts
deleted file mode 100644
index 4e2221a2..00000000
--- a/client/src/components/signup/index.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import AuthEmailModal from './AuthEmailModal';
-import FailureModal from './FailureModal';
-import SignButton from './SignButton';
-import SignupForm from './SignupForm';
-import SignupIntro from './SignupIntro';
-
-export { AuthEmailModal, FailureModal, SignButton, SignupForm, SignupIntro };
diff --git a/client/src/constants/contents.ts b/client/src/constants/contents.ts
index 795f7e03..25a044ca 100644
--- a/client/src/constants/contents.ts
+++ b/client/src/constants/contents.ts
@@ -24,7 +24,7 @@ export const CONTROLLER_TITLES = {
   left: '왼쪽',
 };
 
-export const SIGN_REQUIRE = {
+export const SIGNIN_REQUIRE = {
   email: '이메일을 입력해주세요.',
   nickname: '닉네임을 입력해주세요.',
   password: '비밀번호를 입력해주세요.',
@@ -32,10 +32,9 @@ export const SIGN_REQUIRE = {
   code: '인증 번호를 입력해주세요.',
 } as const;
 
-export const SIGN_VAILDATION = {
+export const SIGNIN_VAILDATION = {
   email: '올바른 이메일 형식이 아닙니다.',
   nickname: '2글자 이상의 영문 또는 한글을 사용해야 합니다.',
-  maxLength: '6글자 이하의 영문 또는 한글을 입력해야 합니다.',
   password: '6~12글자의 영문과 숫자를 함께 사용해야 합니다.',
   passwordCheck: '비밀번호가 일치하지 않습니다.',
   code: '올바른 인증 번호 형식이 아닙니다.',
@@ -111,16 +110,4 @@ export const FOOTER_LINK = {
   seungtae: 'https://github.com/NtoZero',
   hanbin: 'https://github.com/hanbinchoi',
   doyeon: 'https://github.com/shimdokite',
-} as const;
-
-export const ALERT_TEXT = {
-  login: '로그인에 실패했습니다. 다시 시도해 주세요.',
-  password: '기존 비밀번호와 동일합니다. 새로운 비밀번호를 입력해 주세요.',
-  image: '2mb 이하의 이미지만 등록이 가능합니다.',
-} as const;
-
-export const PROFILE_MODAL_TEXT = {
-  password: '비밀번호가',
-  nickname: '닉네임이',
-  image: '이미지가',
 };
diff --git a/client/src/hooks/useAuthEmail.ts b/client/src/hooks/useAuthEmail.ts
deleted file mode 100644
index e2b78e18..00000000
--- a/client/src/hooks/useAuthEmail.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { useMutation } from '@tanstack/react-query';
-
-import { sendCodeByEmail } from '@/api/user';
-
-import useSignStore from '@/stores/signStore';
-
-const useAuthEmail = () => {
-  const { setCode, isCode } = useSignStore();
-
-  const { mutate: sendCodeWithEmail } = useMutation({
-    mutationFn: (email: string) => sendCodeByEmail(email),
-    onSuccess(data) {
-      setCode(data.data.data.authCode);
-    },
-  });
-  return { sendCodeWithEmail, isCode };
-};
-
-export default useAuthEmail;
diff --git a/client/src/hooks/useChagnePassword.ts b/client/src/hooks/useChagnePassword.ts
deleted file mode 100644
index f1f020bf..00000000
--- a/client/src/hooks/useChagnePassword.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-import { useForm } from 'react-hook-form';
-import { useMutation } from '@tanstack/react-query';
-
-import { updateUserPassword } from '@/api/profile';
-
-import useUserStore from '@/stores/userStore';
-import useModalStore from '@/stores/modalStore';
-
-import { InputValues } from '@/types/common';
-
-import { ALERT_TEXT } from '@/constants/contents';
-
-const useChangePassword = (
-  presentPassword: string,
-  changedPassword: string,
-) => {
-  const { reset } = useForm<InputValues>();
-
-  const { changeType, open } = useModalStore();
-  const { setAccessToken } = useUserStore();
-
-  const { mutate: changePassword } = useMutation({
-    mutationFn: () => updateUserPassword(presentPassword, changedPassword),
-
-    onSuccess: (data) => {
-      setAccessToken(data.headers?.authorization);
-
-      changeType('ChangePasswordModal');
-      open();
-    },
-  });
-
-  const updatePassword = async () => {
-    if (!presentPassword && !changedPassword) return;
-
-    if (presentPassword === changedPassword) {
-      alert(ALERT_TEXT.password);
-      return;
-    }
-
-    changePassword();
-    reset();
-  };
-
-  return { updatePassword };
-};
-
-export default useChangePassword;
diff --git a/client/src/hooks/useChangeImage.ts b/client/src/hooks/useChangeImage.ts
deleted file mode 100644
index 96698635..00000000
--- a/client/src/hooks/useChangeImage.ts
+++ /dev/null
@@ -1,73 +0,0 @@
-import { useRef, useState } from 'react';
-import { useMutation } from '@tanstack/react-query';
-
-import { updateUserProfileImage } from '@/api/profile';
-
-import useModalStore from '@/stores/modalStore';
-import useUserStore from '@/stores/userStore';
-
-import { ALERT_TEXT } from '@/constants/contents';
-
-import isValidFileSize from '@/utils/isValidFileSize';
-
-const useChangeImage = () => {
-  const { profileImageUrl, setProfileImageUrl, setAccessToken } =
-    useUserStore();
-  const { changeType, open } = useModalStore();
-
-  const imageUploadRef = useRef<HTMLInputElement | null>(null);
-  const [image, setImage] = useState<FileList>();
-  const [imageUrl, setImageUrl] = useState(profileImageUrl);
-  const [isDisabled, setIsDisabled] = useState(true);
-
-  const { mutate: changeImage } = useMutation({
-    mutationFn: (image: FileList) => updateUserProfileImage(image[0]),
-
-    onSuccess: (data) => {
-      setProfileImageUrl(imageUrl);
-      setIsDisabled(true);
-
-      changeType('ChangeImageModal');
-      open();
-
-      setAccessToken(data.headers?.authorization);
-    },
-  });
-
-  const checkFileSize = (file: File) => {
-    if (isValidFileSize(file)) return true;
-
-    alert(ALERT_TEXT.image);
-    return false;
-  };
-
-  const onImageChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const file = event.target.files;
-
-    if (!file) return;
-
-    if (file[0] && checkFileSize(file[0])) {
-      setImage(file);
-
-      const newFileURL = URL.createObjectURL(file[0]);
-      setImageUrl(newFileURL);
-      setIsDisabled(false);
-    }
-  };
-
-  const onImageSubmit = async () => {
-    if (image && !isDisabled) {
-      changeImage(image);
-    }
-  };
-
-  return {
-    imageUploadRef,
-    imageUrl,
-    isDisabled,
-    onImageChange,
-    onImageSubmit,
-  };
-};
-
-export default useChangeImage;
diff --git a/client/src/hooks/useChangeNickname.ts b/client/src/hooks/useChangeNickname.ts
deleted file mode 100644
index 81dc9194..00000000
--- a/client/src/hooks/useChangeNickname.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import { useForm } from 'react-hook-form';
-import { useMutation } from '@tanstack/react-query';
-
-import { updateUserNickname } from '@/api/profile';
-
-import useUserStore from '@/stores/userStore';
-import useModalStore from '@/stores/modalStore';
-
-import { InputValues } from '@/types/common';
-
-const useChangeNickname = () => {
-  const { reset } = useForm<InputValues>();
-
-  const { setAccessToken, setDisplayName, displayName } = useUserStore();
-  const { changeType, open } = useModalStore();
-
-  const { mutate: onChangeNickname } = useMutation({
-    mutationFn: (nickname: string) => updateUserNickname(nickname),
-
-    onSuccess: (data, nickname) => {
-      setDisplayName(nickname);
-      setAccessToken(data.headers?.authorization);
-
-      reset();
-
-      changeType('ChangeNicknameModal');
-      open();
-    },
-  });
-
-  const updateNickName = async (nickname: string) => {
-    if (!nickname) return;
-
-    onChangeNickname(nickname);
-  };
-
-  return { updateNickName, displayName };
-};
-
-export default useChangeNickname;
diff --git a/client/src/hooks/useDeleteUser.ts b/client/src/hooks/useDeleteUser.ts
deleted file mode 100644
index e58345cc..00000000
--- a/client/src/hooks/useDeleteUser.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { useMutation } from '@tanstack/react-query';
-
-import { deleteUser } from '@/api/history';
-
-import useModalStore from '@/stores/modalStore';
-
-const useDeleteUser = () => {
-  const { close, changeType } = useModalStore();
-
-  const { mutate: onDeleteUser } = useMutation({
-    mutationFn: () => deleteUser(),
-    onSuccess: () => {
-      return changeType('SuccessedModal');
-    },
-  });
-
-  return { onDeleteUser, close };
-};
-
-export default useDeleteUser;
diff --git a/client/src/hooks/useFindPassword.ts b/client/src/hooks/useFindPassword.ts
deleted file mode 100644
index adc9c129..00000000
--- a/client/src/hooks/useFindPassword.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-import { useMutation, useQuery } from '@tanstack/react-query';
-
-import { getUsersEmail, sendTemporaryPasswordByEmail } from '@/api/user';
-
-import useModalStore from '@/stores/modalStore';
-
-import { UserData } from '@/types/common';
-
-const useFindPassword = () => {
-  const { close, changeType } = useModalStore();
-
-  const { data } = useQuery({
-    queryKey: ['userEmail'],
-    queryFn: () => getUsersEmail(),
-  });
-
-  const { mutate: temporaryPassword } = useMutation({
-    mutationFn: (email: string) => sendTemporaryPasswordByEmail(email),
-
-    onSuccess: () => {
-      changeType('SuccessedModal');
-    },
-  });
-
-  const onEmailCheck = async (userEmail: string) => {
-    if (!userEmail) return;
-
-    const existEmail = data?.data.data.find(
-      (current: UserData) => current.email === userEmail,
-    );
-
-    if (!existEmail) return changeType('FailureModal');
-
-    temporaryPassword(userEmail);
-    return changeType('SuccessedModal');
-  };
-
-  return { onEmailCheck, close };
-};
-
-export default useFindPassword;
diff --git a/client/src/hooks/useGetMetaData.ts b/client/src/hooks/useGetMetaData.ts
index d07f1729..8f965551 100644
--- a/client/src/hooks/useGetMetaData.ts
+++ b/client/src/hooks/useGetMetaData.ts
@@ -1,5 +1,6 @@
 import { DOMAIN } from '@/constants/contents';
-// import { ContextType, PageType, Post } from '@/types/common';
+
+import { ContextType, PageType, Post } from '@/types/common';
 
 type MetaDataType = {
   title: string;
@@ -8,97 +9,97 @@ type MetaDataType = {
   image?: string;
 };
 
-// const getMetaData = (
-//   pageType: PageType,
-//   contextType: ContextType,
-//   post: Post,
-// ): MetaDataType => {
-//   const { garden, leaf, leafId, leafs, history, slug } = contextType;
+const getMetaDate = (
+  pageType: PageType,
+  contextType: ContextType,
+  post: Post,
+): MetaDataType => {
+  const { garden, leaf, leafId, leafs, history, slug } = contextType;
 
-//   const BASIC_THUMBNAIL = '/assets/img/bg_default_post.png';
+  const BASIC_THUMBNAIL = '/assets/img/bg_default_post.png';
 
-//   const metaData = {
-//     title: '',
-//     url: '',
-//     description: '',
-//     image: BASIC_THUMBNAIL,
-//   };
+  const metaData = {
+    title: '',
+    url: '',
+    description: '',
+    image: BASIC_THUMBNAIL,
+  };
 
-//   switch (pageType) {
-//     case PageType.Main:
-//       metaData.title = `${DOMAIN.domain_kor} | ${DOMAIN.domain}`;
-//       // 그로우 스토리 | grow-story.vercel.app
-//       metaData.url = `${DOMAIN.domain}`;
-//       // grow-story.vercel.app
-//       metaData.description = `${DOMAIN.domain_kor} 입니다.`;
-//       // 그로우 스토리 입니다.
-//       break;
+  switch (pageType) {
+    case PageType.Main:
+      metaData.title = `${DOMAIN.domain_kor} | ${DOMAIN.domain}`;
+      // 그로우 스토리 | grow-story.vercel.app
+      metaData.url = `${DOMAIN.domain}`;
+      // grow-story.vercel.app
+      metaData.description = `${DOMAIN.domain_kor} 입니다.`;
+      // 그로우 스토리 입니다.
+      break;
 
-//     case PageType.Signup:
-//       metaData.title = `회원 가입 | ${DOMAIN.domain}`;
-//       // 회원 가입 | grow-story.vercel.app
-//       metaData.url = `${DOMAIN.domain}/signup`;
-//       // grow-story.vercel.app/signup
-//       metaData.description = `지금 그로우 스토리에 가입해 보세요!`;
-//       // 지금 그로우 스토리에 가입해 보세요!
-//       break;
+    case PageType.Signup:
+      metaData.title = `회원 가입 | ${DOMAIN.domain}`;
+      // 회원 가입 | grow-story.vercel.app
+      metaData.url = `${DOMAIN.domain}/signup`;
+      // grow-story.vercel.app/signup
+      metaData.description = `지금 그로우 스토리에 가입해 보세요!`;
+      // 지금 그로우 스토리에 가입해 보세요!
+      break;
 
-//     case PageType.Signin:
-//       metaData.title = `로그인 | ${DOMAIN.domain}`;
-//       // 로그인 | grow-story.vercel.app
-//       metaData.url = `${DOMAIN.domain}/signin`;
-//       // grow-story.vercel.app/signin
-//       metaData.description = `그로우 스토리 로그인 페이지 입니다.`;
-//       // 그로우 스토리 로그인 페이지 입니다.
-//       break;
+    case PageType.Signin:
+      metaData.title = `로그인 | ${DOMAIN.domain}`;
+      // 로그인 | grow-story.vercel.app
+      metaData.url = `${DOMAIN.domain}/signin`;
+      // grow-story.vercel.app/signin
+      metaData.description = `그로우 스토리 로그인 페이지 입니다.`;
+      // 그로우 스토리 로그인 페이지 입니다.
+      break;
 
-//     case PageType.Garden:
-//       metaData.title = `${garden} 님의 정원 | ${DOMAIN.domain}`;
-//       // OOO 님의 정원 | grow-story.vercel.app
-//       metaData.url = `${DOMAIN.domain}/garden/${slug}`;
-//       // grow-story.vercel.app/garden/1
-//       metaData.description = `${garden} 님의 정원 입니다.`;
-//       // OOO 님의 정원 입니다.
-//       break;
+    case PageType.Garden:
+      metaData.title = `${garden} 님의 정원 | ${DOMAIN.domain}`;
+      // OOO 님의 정원 | grow-story.vercel.app
+      metaData.url = `${DOMAIN.domain}/garden/${slug}`;
+      // grow-story.vercel.app/garden/1
+      metaData.description = `${garden} 님의 정원 입니다.`;
+      // OOO 님의 정원 입니다.
+      break;
 
-//     case PageType.Board:
-//       metaData.title = `커뮤니티 | ${DOMAIN.domain}`;
-//       // 커뮤니티 | grow-story.vercel.app
-//       metaData.url = `${DOMAIN.domain}/board`;
-//       // grow-story.vercel.app/board
-//       metaData.description = `그로우 스토리에서 다른 사람들과 소통해 보세요!`;
-//       // 그로우 스토리에서 다른 사람들과 소통해 보세요!
-//       break;
+    case PageType.Board:
+      metaData.title = `커뮤니티 | ${DOMAIN.domain}`;
+      // 커뮤니티 | grow-story.vercel.app
+      metaData.url = `${DOMAIN.domain}/board`;
+      // grow-story.vercel.app/board
+      metaData.description = `그로우 스토리에서 다른 사람들과 소통해 보세요!`;
+      // 그로우 스토리에서 다른 사람들과 소통해 보세요!
+      break;
 
-//     case PageType.Leaf:
-//       metaData.title = `${leaf} | ${DOMAIN.domain}`;
-//       // 바지리 | grow-story.vercel.app
-//       metaData.url = `${DOMAIN.domain}/leaf/${slug}/${leafId}`;
-//       // grow-story.vercel.app/leaf/1/1
-//       metaData.description = `${leaf}`;
-//       // 바지리
-//       break;
+    case PageType.Leaf:
+      metaData.title = `${leaf} | ${DOMAIN.domain}`;
+      // 바지리 | grow-story.vercel.app
+      metaData.url = `${DOMAIN.domain}/leaf/${slug}/${leafId}`;
+      // grow-story.vercel.app/leaf/1/1
+      metaData.description = `${leaf}`;
+      // 바지리
+      break;
 
-//     case PageType.Leafs:
-//       metaData.title = `${leafs} 님의 식물 카드 목록 | ${DOMAIN.domain}`;
-//       // OOO 님의 식물 카드 목록 | grow-story.vercel.app
-//       metaData.url = `${DOMAIN.domain}/leafs/${slug}`;
-//       // grow-story.vercel.app/leafs/1
-//       metaData.description = `${leafs} 님의 식물 카드 목록입니다.`;
-//       // OOO 님의 식물 카드 목록입니다.
-//       break;
+    case PageType.Leafs:
+      metaData.title = `${leafs} 님의 식물 카드 목록 | ${DOMAIN.domain}`;
+      // OOO 님의 식물 카드 목록 | grow-story.vercel.app
+      metaData.url = `${DOMAIN.domain}/leafs/${slug}`;
+      // grow-story.vercel.app/leafs/1
+      metaData.description = `${leafs} 님의 식물 카드 목록입니다.`;
+      // OOO 님의 식물 카드 목록입니다.
+      break;
 
-//     case PageType.History:
-//       metaData.title = `${history} 님의 히스토리 | ${DOMAIN.domain}`;
-//       // OOO 님의 히스토리 | grow-story.vercel.app
-//       metaData.url = `${DOMAIN.domain}/history/${slug}`;
-//       // grow-story.vercel.app/history/1
-//       metaData.description = `${garden} 님의 히스토리 입니다.`;
-//       // OOO 님의 히스토리 입니다.
-//       break;
-//   }
+    case PageType.History:
+      metaData.title = `${history} 님의 히스토리 | ${DOMAIN.domain}`;
+      // OOO 님의 히스토리 | grow-story.vercel.app
+      metaData.url = `${DOMAIN.domain}/history/${slug}`;
+      // grow-story.vercel.app/history/1
+      metaData.description = `${garden} 님의 히스토리 입니다.`;
+      // OOO 님의 히스토리 입니다.
+      break;
+  }
 
-//   return metaData;
-// };
+  return metaData;
+};
 
-// export default getMetaData;
+export default getMetaDate;
diff --git a/client/src/hooks/useGoogleLogin.ts b/client/src/hooks/useGoogleLogin.ts
deleted file mode 100644
index c0516169..00000000
--- a/client/src/hooks/useGoogleLogin.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-import { useEffect } from 'react';
-import { useRouter } from 'next/navigation';
-
-import useUserStore from '@/stores/userStore';
-
-const useGoogleLogin = () => {
-  const router = useRouter();
-
-  const { isGoogleLogin, setGoogleUser, isEmailLogin } = useUserStore();
-
-  const onGoogleLogin = useEffect(() => {
-    const queryString = window?.location?.search;
-    const urlParams = new URLSearchParams(queryString);
-
-    const userId = String(urlParams.get('accountId'));
-
-    const accessToken = `Bearer ${urlParams.get('access_token')}`;
-    const refreshToken = urlParams.get('refresh_token');
-
-    const username = urlParams.get('displayName');
-    const displayName = decodeURIComponent(username as string);
-
-    const profileImageUrl = urlParams.get('profileIamgeUrl');
-
-    if (
-      userId &&
-      accessToken &&
-      refreshToken &&
-      displayName &&
-      profileImageUrl
-    ) {
-      setGoogleUser({
-        userId,
-        accessToken,
-        refreshToken,
-        displayName,
-        profileImageUrl,
-      });
-
-      router.push('/');
-    }
-  }, [isGoogleLogin]);
-
-  return { isGoogleLogin, setGoogleUser, isEmailLogin, onGoogleLogin };
-};
-
-export default useGoogleLogin;
diff --git a/client/src/hooks/useHistoryBoard.ts b/client/src/hooks/useHistoryBoard.ts
deleted file mode 100644
index fccf9db5..00000000
--- a/client/src/hooks/useHistoryBoard.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { useInfiniteQuery } from '@tanstack/react-query';
-
-import { getBoardWrittenByPage } from '@/api/history';
-
-const useHistoryBoard = (paramsId: string) => {
-  const { data, fetchNextPage, hasNextPage, isLoading, isError } =
-    useInfiniteQuery(
-      ['boardWritten'],
-      ({ pageParam = 1 }) => getBoardWrittenByPage({ pageParam }, paramsId),
-
-      {
-        getNextPageParam: (lastPage) => {
-          return lastPage.pageInfo.page !== lastPage.pageInfo.totalPages
-            ? lastPage.pageInfo.page + 1
-            : undefined;
-        },
-      },
-    );
-
-  return {
-    data: data?.pages,
-    fetchNextPage,
-    hasNextPage,
-    isLoading,
-    isError,
-  };
-};
-
-export default useHistoryBoard;
diff --git a/client/src/hooks/useHistoryComment.ts b/client/src/hooks/useHistoryComment.ts
deleted file mode 100644
index 9b8911e8..00000000
--- a/client/src/hooks/useHistoryComment.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import { useInfiniteQuery } from '@tanstack/react-query';
-
-import { getCommentWrittenByPage } from '@/api/history';
-
-const useHistoryComment = (paramsId: string) => {
-  const { data, fetchNextPage, hasNextPage, isLoading, isError } =
-    useInfiniteQuery(
-      ['commentWritten'],
-      ({ pageParam = 1 }) => getCommentWrittenByPage({ pageParam }, paramsId),
-      {
-        getNextPageParam: (lastPage) => {
-          return lastPage.pageInfo.page !== lastPage.pageInfo.totalPages
-            ? lastPage.pageInfo.page + 1
-            : undefined;
-        },
-      },
-    );
-
-  return {
-    data: data?.pages,
-    fetchNextPage,
-    hasNextPage,
-    isLoading,
-    isError,
-  };
-};
-
-export default useHistoryComment;
diff --git a/client/src/hooks/useHistoryLikes.ts b/client/src/hooks/useHistoryLikes.ts
deleted file mode 100644
index c02e7acb..00000000
--- a/client/src/hooks/useHistoryLikes.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import { useInfiniteQuery } from '@tanstack/react-query';
-
-import { getBoardLikedByPage } from '@/api/history';
-
-const useHistoryLikes = (paramsId: string) => {
-  const { data, fetchNextPage, hasNextPage, isLoading, isError } =
-    useInfiniteQuery(
-      ['boardLiked'],
-      ({ pageParam = 1 }) => getBoardLikedByPage({ pageParam }, paramsId),
-      {
-        getNextPageParam: (lastPage) => {
-          if (lastPage.pageInfo.totalElement === 0) return;
-
-          if (lastPage.pageInfo.page !== lastPage.pageInfo.totalPages) {
-            return lastPage.pageInfo.page + 1;
-          }
-        },
-      },
-    );
-
-  return {
-    data: data?.pages,
-    fetchNextPage,
-    hasNextPage,
-    isLoading,
-    isError,
-  };
-};
-
-export default useHistoryLikes;
diff --git a/client/src/hooks/useResignCheck.ts b/client/src/hooks/useResignCheck.ts
deleted file mode 100644
index 3f66a079..00000000
--- a/client/src/hooks/useResignCheck.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { useMutation } from '@tanstack/react-query';
-
-import { postUserPassword } from '@/api/history';
-
-import useModalStore from '@/stores/modalStore';
-import useUserStore from '@/stores/userStore';
-
-const useResignCheck = () => {
-  const { setAccessToken } = useUserStore();
-  const { changeType, close } = useModalStore();
-
-  const { mutate: onPasswordCheck } = useMutation({
-    mutationFn: (userPassword: string) => postUserPassword(userPassword),
-    onSuccess: (data) => {
-      if (!data.data.data) {
-        return changeType('FailureModal');
-      }
-
-      changeType('ConfirmModal'), setAccessToken(data.headers?.authorization);
-    },
-  });
-
-  return { onPasswordCheck, close };
-};
-
-export default useResignCheck;
diff --git a/client/src/hooks/useSignIn.ts b/client/src/hooks/useSignIn.ts
deleted file mode 100644
index 9dbdf079..00000000
--- a/client/src/hooks/useSignIn.ts
+++ /dev/null
@@ -1,63 +0,0 @@
-import { useRouter } from 'next/navigation';
-import { useMutation } from '@tanstack/react-query';
-import { useForm } from 'react-hook-form';
-
-import { postUserInfo } from '@/api/user';
-
-import useSignStore from '@/stores/signStore';
-import useUserStore from '@/stores/userStore';
-
-import { SigninFormValue } from '@/types/common';
-
-import { ALERT_TEXT } from '@/constants/contents';
-
-const useSignin = () => {
-  const router = useRouter();
-
-  const { reset } = useForm<SigninFormValue>();
-
-  const { setEmailUser } = useUserStore();
-  const { getSigninForm, getSignupForm } = useSignStore();
-
-  const { mutate: onSiginIn } = useMutation({
-    mutationFn: ({ email, password }: SigninFormValue) =>
-      postUserInfo(email, password),
-
-    onSuccess: (data) => {
-      const userId = String(data.data.accountId);
-
-      const accessToken = data.headers.authorization;
-      const refreshToken = data.headers.refresh;
-
-      const displayName = decodeURIComponent(data.data.displayName).replaceAll(
-        '+',
-        ' ',
-      );
-
-      const profileImageUrl = data.data.profileImageUrl;
-
-      setEmailUser({
-        userId,
-        accessToken,
-        refreshToken,
-        displayName,
-        profileImageUrl,
-      });
-
-      getSigninForm(false);
-      getSignupForm(false);
-
-      reset();
-
-      router.push('/');
-    },
-
-    onError: () => {
-      alert(ALERT_TEXT.login);
-    },
-  });
-
-  return { onSiginIn };
-};
-
-export default useSignin;
diff --git a/client/src/hooks/useSignup.ts b/client/src/hooks/useSignup.ts
deleted file mode 100644
index e2341a6a..00000000
--- a/client/src/hooks/useSignup.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import { useRouter } from 'next/navigation';
-import { useMutation } from '@tanstack/react-query';
-import { useForm } from 'react-hook-form';
-
-import { postCreateUser } from '@/api/user';
-
-import useSignStore from '@/stores/signStore';
-
-import { SignupFormValue } from '@/types/common';
-
-const useSignup = () => {
-  const router = useRouter();
-
-  const { reset } = useForm<SignupFormValue>();
-
-  const { getSigninForm, getSignupForm, setIsCode } = useSignStore();
-
-  const { mutate: onSignup } = useMutation({
-    mutationFn: ({ email, password, nickname }: SignupFormValue) =>
-      postCreateUser(email, password, nickname as string),
-
-    onSuccess: () => {
-      reset();
-
-      getSigninForm(false);
-      getSignupForm(false);
-      setIsCode(false);
-
-      router.push('/signin');
-    },
-  });
-
-  return { onSignup };
-};
-
-export default useSignup;
diff --git a/client/src/hooks/useUserInfo.ts b/client/src/hooks/useUserInfo.ts
deleted file mode 100644
index b774ec29..00000000
--- a/client/src/hooks/useUserInfo.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { useEffect } from 'react';
-
-import { useQuery } from '@tanstack/react-query';
-
-import { getUserInfo } from '@/api/history';
-
-import useHistoryStore from '@/stores/historyStore';
-
-const useUserInfo = (id: string) => {
-  const { setHistoryUser, profileImageUrl, displayName, grade, point } =
-    useHistoryStore();
-
-  const { data } = useQuery(['userEmail', id], () => getUserInfo(id));
-
-  useEffect(() => {
-    if (data) return setHistoryUser(data.data);
-  }, [data]);
-
-  return { profileImageUrl, displayName, grade, point };
-};
-
-export default useUserInfo;
diff --git a/client/src/stores/modalStore.ts b/client/src/stores/modalStore.ts
deleted file mode 100644
index e9c29516..00000000
--- a/client/src/stores/modalStore.ts
+++ /dev/null
@@ -1,57 +0,0 @@
-import { create } from 'zustand';
-
-export type PostType = 'post' | 'comment';
-
-export type GardenType =
-  | 'leafExist'
-  | 'noLeafExist'
-  | 'selectLeaf'
-  | 'purchaseInfo'
-  | 'purchase'
-  | 'emptyInventory'
-  | 'share';
-
-export type SignType =
-  | 'FindPasswordModal'
-  | 'SuccessedModal'
-  | 'FailureModal'
-  | 'AuthEmailModal';
-
-export type HistoryType =
-  | 'ResignModal'
-  | 'ConfirmModal'
-  | 'ResignSuccessedModal'
-  | 'ResignFailureModal';
-
-export type ProfileType =
-  | 'ChangePasswordModal'
-  | 'ChangeNicknameModal'
-  | 'ChangeImageModal';
-
-export type ModalType =
-  | PostType
-  | GardenType
-  | SignType
-  | HistoryType
-  | ProfileType
-  | null;
-
-export interface ModalState {
-  isOpen: boolean;
-  type: ModalType;
-
-  changeType: (type: ModalType) => void;
-  open: () => void;
-  close: () => void;
-}
-
-const useModalStore = create<ModalState>((set) => ({
-  isOpen: false,
-  type: null,
-
-  changeType: (type) => set(() => ({ type })),
-  open: () => set(() => ({ isOpen: true })),
-  close: () => set(() => ({ isOpen: false })),
-}));
-
-export default useModalStore;
diff --git a/client/src/stores/signStore.ts b/client/src/stores/signStore.ts
index bf655d8e..270d42f6 100644
--- a/client/src/stores/signStore.ts
+++ b/client/src/stores/signStore.ts
@@ -1,31 +1,31 @@
 import { create } from 'zustand';
 
 interface SignState {
-  isCode: boolean;
   isEmailSignup: boolean;
   isEmailSignin: boolean;
+  isCorrectPassword: boolean;
 
   code: string;
 
-  setIsCode: (isCode: boolean) => void;
   setCode: (code: string) => void;
 
   getSignupForm: (isEmailSignup: boolean) => void;
   getSigninForm: (isEmailSignin: boolean) => void;
+  getPassword: (isCorrectPassword: boolean) => void;
 }
 
 const useSignStore = create<SignState>((set) => ({
-  isCode: false,
   isEmailSignup: false,
   isEmailSignin: false,
+  isCorrectPassword: false,
 
   code: '',
 
-  setIsCode: (isCode) => set({ isCode }),
   setCode: (newCode) => set({ code: newCode }),
 
   getSigninForm: (isEmailSignin) => set({ isEmailSignin }),
   getSignupForm: (isEmailSignup) => set({ isEmailSignup }),
+  getPassword: (isEmailSignup) => set({ isEmailSignup }),
 }));
 
 export default useSignStore;
diff --git a/client/src/stores/userStore.ts b/client/src/stores/userStore.ts
index baabccc4..73e1e5df 100644
--- a/client/src/stores/userStore.ts
+++ b/client/src/stores/userStore.ts
@@ -6,19 +6,16 @@ const StorageKey = 'user-key';
 interface UserInfo {
   accessToken: string;
   refreshToken: string;
-
   userId: string;
   displayName: string;
   profileImageUrl: string;
-
-  isEmailLogin?: boolean;
+  isLogin?: boolean;
   isGoogleLogin?: boolean;
 }
 interface User extends UserInfo {
   setAccessToken: (accessToken: string) => void;
-
+  setUser: (userInfo: UserInfo) => void;
   setGoogleUser: (userInfo: UserInfo) => void;
-  setEmailUser: (userInfo: UserInfo) => void;
 
   setProfileImageUrl: (profileImageUrl: string) => void;
   setDisplayName: (displayName: string) => void;
@@ -29,7 +26,7 @@ interface User extends UserInfo {
 const useUserStore = create(
   persist<User>(
     (set) => ({
-      isEmailLogin: false,
+      isLogin: false,
       isGoogleLogin: false,
 
       accessToken: '',
@@ -43,7 +40,7 @@ const useUserStore = create(
         set({ accessToken });
       },
 
-      setGoogleUser: (userInfo: UserInfo) => {
+      setUser: (userInfo: UserInfo) => {
         const {
           accessToken,
           refreshToken,
@@ -57,12 +54,12 @@ const useUserStore = create(
           userId,
           displayName,
           profileImageUrl,
-          isEmailLogin: false,
-          isGoogleLogin: true,
+          isLogin: true,
+          isGoogleLogin: false,
         });
       },
 
-      setEmailUser: (userInfo: UserInfo) => {
+      setGoogleUser: (userInfo: UserInfo) => {
         const {
           accessToken,
           refreshToken,
@@ -76,22 +73,21 @@ const useUserStore = create(
           userId,
           displayName,
           profileImageUrl,
-          isEmailLogin: true,
-          isGoogleLogin: false,
+          isLogin: false,
+          isGoogleLogin: true,
         });
       },
 
       setProfileImageUrl: (profileImageUrl) => {
         set({ profileImageUrl });
       },
-
       setDisplayName: (displayName) => {
         set({ displayName });
       },
 
       setClear: () =>
         set({
-          isEmailLogin: false,
+          isLogin: false,
           isGoogleLogin: false,
 
           accessToken: '',
@@ -102,7 +98,6 @@ const useUserStore = create(
           profileImageUrl: '/assets/img/bg_default_profile.png',
         }),
     }),
-
     {
       name: StorageKey,
       storage: createJSONStorage(() => localStorage),
diff --git a/client/src/types/common.d.ts b/client/src/types/common.d.ts
index f59cb456..003d5663 100644
--- a/client/src/types/common.d.ts
+++ b/client/src/types/common.d.ts
@@ -38,24 +38,13 @@ export type InputValues = {
 
 export type SignFormValue = {
   email: string;
+  nickname: string;
   password: string;
   passwordCheck: string;
-  nickname: string;
   code: string;
   onLogin: () => void;
 };
 
-export type SignupFormValue = {
-  email: string;
-  password: string;
-  nickname: string;
-};
-
-export type SigninFormValue = {
-  email: string;
-  password: string;
-};
-
 export type UserData = {
   accountId: number;
   displayName: string;
diff --git a/client/src/utils/getPasswordByType.ts b/client/src/utils/getPasswordByType.ts
deleted file mode 100644
index 38aa6478..00000000
--- a/client/src/utils/getPasswordByType.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import { UseFormWatch } from 'react-hook-form';
-
-import { SignFormValue } from '@/types/common';
-
-import { SIGN_VAILDATION } from '@/constants/contents';
-
-export default function getPasswordByType(
-  tag: string,
-  watch?: UseFormWatch<SignFormValue>,
-) {
-  if (tag === 'password') {
-    return {
-      validation: {
-        required: true,
-        pattern: {
-          value: /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,12}$/,
-          message: SIGN_VAILDATION[tag],
-        },
-      },
-    };
-  }
-
-  if (tag === 'passwordCheck' && watch) {
-    return {
-      validation: {
-        required: true,
-        validate: (value: string) =>
-          value === watch('password') || SIGN_VAILDATION[tag],
-      },
-    };
-  }
-
-  return null;
-}
diff --git a/client/src/utils/getRegisterByType.ts b/client/src/utils/getRegisterByType.ts
deleted file mode 100644
index 2fcb08b9..00000000
--- a/client/src/utils/getRegisterByType.ts
+++ /dev/null
@@ -1,61 +0,0 @@
-import { SIGN_VAILDATION } from '@/constants/contents';
-
-export default function getRegisterByType(type: string) {
-  if (type === 'email') {
-    return {
-      validation: {
-        required: true,
-        pattern: {
-          value: /\S+@\S+\.\S+/,
-          message: SIGN_VAILDATION[type],
-        },
-      },
-    };
-  }
-
-  if (type === 'code') {
-    return {
-      validation: {
-        required: true,
-        pattern: {
-          value: /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8}$/,
-          message: SIGN_VAILDATION[type],
-        },
-      },
-    };
-  }
-
-  if (type === 'nickname') {
-    return {
-      validation: {
-        required: true,
-        pattern: {
-          value: /^[가-힣a-zA-Z]+$/,
-          message: SIGN_VAILDATION.nickname,
-        },
-        minLength: {
-          value: 2,
-          message: SIGN_VAILDATION.nickname,
-        },
-        maxLength: {
-          value: 6,
-          message: SIGN_VAILDATION.maxLength,
-        },
-      },
-    };
-  }
-
-  if (type === 'password') {
-    return {
-      validation: {
-        required: true,
-        pattern: {
-          value: /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,12}$/,
-          message: SIGN_VAILDATION[type],
-        },
-      },
-    };
-  }
-
-  return null;
-}