Merge pull request #225 from depromeet/feature/my-page-edit

[Mypage] 로그아웃 구현 / useAuthStore 상태 생성 / 로그인 리다이렉트 구현

src/app/comment/comment-form.tsx

@@ -41,18 +41,18 @@ export const CommentFormPage = () => {
 
   const handleModal = async () => {
     if (nickname.length !== 0 || image.length !== 0) {
-      const result = await confirm(
-        {
+      const result = await confirm({
+        message: {
           title: "칭찬 반응 작성을 그만둘까요?",
           description: "지금 돌아가면 이미지와 텍스트 내용이 삭제돼요",
         },
-        {
-          text: "계속 작성",
-        },
-        {
+        confirm: {
           text: "그만두기",
         },
-      );
+        cancel: {
+          text: "계속 작성",
+        },
+      });
 
       if (!result) return;
     }

src/app/comment/index.tsx

@@ -1,4 +1,3 @@
-import Cookies from "js-cookie";
 import { useEffect } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
 
@@ -10,21 +9,22 @@ import { ButtonProvider } from "@/components/common/button-provider";
 import { PostCardView } from "@/components/common/post-card-view";
 import { DefaultLayout } from "@/components/layout/default";
 import { useApiGetOnePost } from "@/hooks/api/detail/useApiGetOnePost";
+import { useAuthStore } from "@/store/auth";
 
 interface PostIdState {
   state: {
     postId: string;
   };
 }
 
-const Appbar = () => {
+const Appbar = ({ isLogin }: { isLogin: boolean }) => {
   const navigate = useNavigate();
+
   return (
     <div className="flex h-[64px] w-full items-center justify-between px-5 py-2.5">
       <button
         onClick={() => {
           // TODO: 추후에 JWT 토큰으로 변경시 수정이 필요함.
-          const isLogin = Boolean(Cookies.get("k-u-id"));
           isLogin ? navigate("/main") : navigate("/");
         }}
       >
@@ -36,6 +36,7 @@ const Appbar = () => {
 };
 
 export const CommentMainPage = () => {
+  const { auth } = useAuthStore();
   const navigate = useNavigate();
   const location = useLocation() as PostIdState;
   const postId = location.state.postId;
@@ -52,7 +53,7 @@ export const CommentMainPage = () => {
   if (!postId) return <NotFound />;
 
   return (
-    <DefaultLayout appbar={<Appbar />}>
+    <DefaultLayout appbar={<Appbar isLogin={auth.isLogin} />}>
       {/* post area */}
       <section className="flex flex-col justify-between gap-9">
         <h2 className="text-h2">{data.userNickname}님의 칭찬게시물</h2>
@@ -71,8 +72,7 @@ export const CommentMainPage = () => {
         <ButtonProvider.White
           onClick={() => {
             // TODO: 추후에 JWT 토큰으로 변경시 수정이 필요함.
-            const isLogin = Boolean(Cookies.get("k-u-id"));
-            isLogin ? navigate("/main") : navigate("/");
+            auth.isLogin ? navigate("/main") : navigate("/");
           }}
         >
           나도 칭찬 받기

src/app/error/404.tsx

@@ -1,16 +1,15 @@
-import Cookies from "js-cookie";
 import { useNavigate } from "react-router-dom";
 
 import ErrorImg from "@/assets/images/404.svg?react";
 import { ButtonProvider } from "@/components/common/button-provider";
 import { DefaultLayout } from "@/components/layout/default";
-// import useUserStore from "@/features/useUserStore";
+import { useAuthStore } from "@/store/auth";
 
 export const NotFound = () => {
   const navigate = useNavigate();
+
   // TODO: 추후 JWT 토큰 구현 시, 토큰 관련 로직으로 변경
-  // const { isLogin } = useUserStore();
-  const isLogin = Boolean(Cookies.get("k-u-id"));
+  const { auth } = useAuthStore();
 
   return (
     <DefaultLayout>
@@ -25,10 +24,10 @@ export const NotFound = () => {
         {/* TODO: 카카오 로그인 연동 후, 로그인이 되지 않은 상태일 경우에는 다른 메시지 제공 */}
         <ButtonProvider.Primary
           onClick={() => {
-            isLogin ? navigate("/main") : navigate("/");
+            auth.isLogin ? navigate("/main") : navigate("/");
           }}
         >
-          {isLogin ? "메인 홈으로 돌아가기" : "처음으로 돌아가기"}
+          {auth.isLogin ? "메인 홈으로 돌아가기" : "처음으로 돌아가기"}
         </ButtonProvider.Primary>
       </ButtonProvider>
     </DefaultLayout>

src/app/home/index.tsx

@@ -16,6 +16,7 @@ import {
   useApiGetReadPosts,
 } from "@/hooks/api/main/useApiGetReadPosts";
 import { useApiGetUnreadPosts } from "@/hooks/api/main/useApiGetUnreadPosts";
+import { useAuthStore } from "@/store/auth";
 
 const GoToWrite = () => {
   const navigate = useNavigate();
@@ -81,12 +82,14 @@ export const ToMyArchive = ({ posts }: ToMyArchiveProps) => {
 };
 
 export const Home = () => {
-  const { data: unreadPosts } = useApiGetUnreadPosts();
+  const { auth } = useAuthStore((state) => state);
+
+  const { data: unreadPosts } = useApiGetUnreadPosts(auth.userId);
   const {
     data: archivePosts,
     hasNextPage,
     fetchNextPage,
-  } = useApiGetReadPosts();
+  } = useApiGetReadPosts(auth.userId);
   const { data: isCreatable } = useApiGetPostState();
 
   useEffect(() => {

src/app/mypage/index.tsx

@@ -10,6 +10,7 @@ import { Appbar } from "@/components/common/appbar";
 import { ConfirmContext } from "@/components/common/confirm/confirm-context";
 import { DefaultLayout } from "@/components/layout/default";
 import { useApiUserInfo } from "@/hooks/api/my-page/useApiUserInfo";
+import { useAuthStore } from "@/store/auth";
 import { TUserInfo } from "@/types/my-page";
 
 type Temp = {
@@ -70,28 +71,54 @@ const About = ({ onClick }: Temp) => {
 };
 
 const Bottom = ({ onClick }: Temp) => {
+  const nav = useNavigate();
+  const { setAuth } = useAuthStore();
+  const { confirm } = useContext(ConfirmContext);
+
+  const onClickLogout = async () => {
+    const result = await confirm({
+      message: {
+        title: "로그아웃할까요?",
+        description: "",
+      },
+      confirm: {
+        text: "로그아웃",
+      },
+      cancel: {
+        text: "취소",
+      },
+    });
+
+    if (!result) return;
+    Cookies.remove("k-u-id");
+    setAuth(0);
+    nav("/");
+  };
+
   // TODO: add link to
   return (
     <div className="flex grow flex-col gap-5 bg-white px-20px py-36px">
       {[
-        { to: "", label: "로그아웃" },
-        { to: "", label: "회원탈퇴" },
-      ].map(({ to, label }, idx) => (
-        <Link
-          className="text-b2-compact text-secondary"
+        { onClick: onClickLogout, label: "로그아웃" },
+        { onClick, label: "회원탈퇴" },
+      ].map(({ onClick, label }, idx) => (
+        <button
+          className="text-b2-compact text-start text-secondary"
           key={idx}
-          to={to}
           onClick={onClick}
         >
           {label}
-        </Link>
+        </button>
       ))}
     </div>
   );
 };
 
 export const MyPage = () => {
-  const { data } = useApiUserInfo(Cookies.get("k-u-id"));
+  // NOTE: (temp) 로그인 상태 쿠키값 여부로 판단
+  const { auth } = useAuthStore();
+  const { data } = useApiUserInfo(auth.userId);
+
   const nav = useNavigate();
   const { confirm } = useContext(ConfirmContext);
 
@@ -104,15 +131,15 @@ export const MyPage = () => {
   }, [data]);
 
   const onClickDevelop = async () => {
-    await confirm(
-      {
+    await confirm({
+      message: {
         title: "아직 개발중이에요...🫣",
         description: "조금만 기다려주세요!",
       },
-      {
+      cancel: {
         text: "닫기",
       },
-    );
+    });
   };
 
   if (!userInfo) return null;

src/app/mypage/mypage-edit.tsx

@@ -9,6 +9,7 @@ import { Input } from "@/components/common/input";
 import { DefaultLayout } from "@/components/layout/default";
 import { toast } from "@/helpers/toast";
 import { useApiChangeName } from "@/hooks/api/my-page/useApiChangeName";
+import { useAuthStore } from "@/store/auth";
 
 type TLocation = {
   state: {
@@ -19,7 +20,8 @@ type TLocation = {
 export const MyPageEdit = () => {
   const nav = useNavigate();
   const location = useLocation() as TLocation;
-  const { mutate: changeName, isSuccess } = useApiChangeName();
+  const { auth } = useAuthStore();
+  const { mutate: changeName, isSuccess } = useApiChangeName(auth.userId);
 
   const [nickName, setNickName] = useState<string>("");
 

src/app/on-boarding/set-nickname.tsx

@@ -6,10 +6,13 @@ import { Header } from "@/components/common/header";
 import { Input } from "@/components/common/input";
 import { DefaultLayout } from "@/components/layout/default";
 import { useApiUserProfile } from "@/hooks/api/signup/useApiUserName";
+import { useAuthStore } from "@/store/auth";
 
 export const SetNickName = () => {
+  const { auth } = useAuthStore();
+  const { mutate } = useApiUserProfile(auth.userId);
+
   const [name, setName] = useState("");
-  const { mutate } = useApiUserProfile();
 
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setName(event.target.value);

src/app/post/index.tsx

@@ -14,13 +14,15 @@ import { Textarea } from "@/components/common/textarea";
 import { DefaultLayout } from "@/components/layout/default";
 import { useApiBoard } from "@/hooks/api/post/useApiBoard";
 import useImageCompress from "@/hooks/useImageCompress";
+import { useAuthStore } from "@/store/auth";
 
 export type postProps = {
   keyword?: string;
   keywordId?: number;
 };
 
 export const Post = () => {
+  const { auth } = useAuthStore();
   const { confirm } = useContext(ConfirmContext);
   const { compressImage } = useImageCompress();
   const [image, setImage] = useState<string>("");
@@ -30,7 +32,7 @@ export const Post = () => {
   const navigate = useNavigate();
   const location = useLocation();
   const state = location.state as postProps;
-  const { mutate } = useApiBoard();
+  const { mutate } = useApiBoard(auth.userId);
 
   if (state.keyword && state.keywordId) {
     const keywordInfo = {
@@ -43,18 +45,18 @@ export const Post = () => {
   }
 
   const handleModal = async () => {
-    const result = await confirm(
-      {
+    const result = await confirm({
+      message: {
         title: "키워드 선택으로 돌아갈까요?",
         description: "지금 돌아가면 이미지와 텍스트 내용이 삭제돼요.",
       },
-      {
-        text: "계속 작성",
-      },
-      {
+      confirm: {
         text: "돌아가기",
       },
-    );
+      cancel: {
+        text: "계속 작성",
+      },
+    });
 
     if (!result) return;
     navigate("/post/keyword");

src/components/app/archive/marble-card.tsx

@@ -19,18 +19,18 @@ export const MarbleCard = ({ cardData }: Props) => {
     if (!cardData) return;
     setIsShowDeleteBtn(false);
 
-    const result = await confirm(
-      {
+    const result = await confirm({
+      message: {
         title: "칭찬게시물을 삭제할까요?",
         description: "게시물과 쌓인 반응이 모두 삭제돼요.",
       },
-      {
-        text: "취소",
-      },
-      {
+      confirm: {
         text: "삭제",
       },
-    );
+      cancel: {
+        text: "취소",
+      },
+    });
 
     // TODO: Error handling
     if (!result) return;

src/components/app/archive/marble-detail-card.tsx

@@ -38,18 +38,18 @@ export const MarbleDetailCard = forwardRef<HTMLDivElement, Props>(
     const onClickMenu = async () => {
       setIsShowDeleteBtn(false);
 
-      const result = await confirm(
-        {
+      const result = await confirm({
+        message: {
           title: "칭찬반응을 삭제할까요?",
           description: "삭제된 칭찬반응은 복구할 수 없어요",
         },
-        {
-          text: "취소",
-        },
-        {
+        confirm: {
           text: "삭제",
         },
-      );
+        cancel: {
+          text: "취소",
+        },
+      });
 
       // TODO: Error handling
       if (!result) return;

src/components/app/detail/menu.tsx

@@ -47,18 +47,18 @@ export const Menu = ({
   }, [showMenu]);
 
   const handleModal = async () => {
-    const result = await confirm(
-      {
+    const result = await confirm({
+      message: {
         title: "칭찬게시물을 삭제할까요?",
         description: "게시물과 쌓인 반응이 모두 삭제돼요",
       },
-      {
-        text: "취소",
-      },
-      {
+      confirm: {
         text: "삭제",
       },
-    );
+      cancel: {
+        text: "취소",
+      },
+    });
 
     if (!result) return;