Merge pull request codestates-seb#306 from codestates-seb/revert-304-…

…develop

[FE] ♻️ Signin, Signup, Profile, History 컴포넌트 및 페이지 리팩토링

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 />
     </>

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

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';
 

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 />
     </>

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

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

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

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,15 +90,15 @@ export default function Header() {
           <li className="max-[480px]:hidden">
             <HeaderLink
               location={
-                isClient && (isEmailLogin || isGoogleLogin)
+                isClient && (isLogin || isGoogleLogin)
                   ? `/leafs/${userId}`
                   : '/signin'
               }
               content="activity"
               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 }}