feat: data fetching refacting, 내프로필 수정 버튼 추가 (#35)

Mogazoa-team20 · Jun 14, 2024 · 4708193 · 4708193
1 parent b29e6fa
commit 4708193
Show file tree

Hide file tree

Showing 9 changed files with 128 additions and 86 deletions.
diff --git a/src/app/(userpage)/page.tsx b/src/app/(userpage)/page.tsx
diff --git a/src/app/(userpage)/types.tsx → src/app/(userpage)/types.ts b/src/app/(userpage)/types.tsx → src/app/(userpage)/types.ts
diff --git a/src/app/(userpage)/user/[userId]/components/FollowModal/FollowModal.tsx b/src/app/(userpage)/user/[userId]/components/FollowModal/FollowModal.tsx
@@ -1,6 +1,7 @@
+import { useQuery } from "@tanstack/react-query";
 import Image from "next/image";
 import { useSession } from "next-auth/react";
-import React, { useEffect, useState } from "react";
+import React from "react";
 import { UserProduct } from "@/app/(userpage)/types";
 import Modal from "@/components/Modal/Modal";
 import cn from "@/utils/classNames";
@@ -18,31 +19,26 @@ type ModalProps = {
 
 export default function FollowModal({ isModalState, setIsModalState, followState }: ModalProps) {
   const { data: session } = useSession();
-  const [followData, setFollowData] = useState<UserProduct>();
+  const userId = session?.user.id;
+  const ACCESS_TOKEN = session?.accessToken ?? "";
 
   const httpClient = new HttpClient(process.env.NEXT_PUBLIC_BASE_URL!);
 
-  const handleData = async () => {
-    if (session && followState) {
-      const userId = session.user.id;
-      const ACCESS_TOKEN = session.accessToken;
-      setFollowData(
-        await httpClient.get(`users/${userId}/${followState}`, {
-          headers: { Authorization: ACCESS_TOKEN },
-          cache: "no-cache",
-        }),
-      );
-    }
-  };
-
-  useEffect(() => {
-    handleData();
-  }, [followState]);
+  const { data } = useQuery({
+    queryKey: ["followData", followState],
+    queryFn: async () => {
+      const res = httpClient.get<UserProduct>(`users/${userId}/${followState}`, {
+        headers: { Authorization: ACCESS_TOKEN },
+        cache: "no-cache",
+      });
+      return res;
+    },
+  });
 
   const handleClose = () => setIsModalState(false);
   return (
     <>
-      {followData !== undefined && isModalState && (
+      {data !== undefined && isModalState && (
         <Modal onClose={handleClose}>
           <div className={cn(styles.container)}>
             <div
@@ -59,10 +55,10 @@ export default function FollowModal({ isModalState, setIsModalState, followState
               />
             </div>
             <h1>nickname님{followState === "followees" ? "이" : "을"} 팔로우 하는 유저</h1>
-            {followData.list.length < 1 ? (
+            {data.list.length < 1 ? (
               <div className={cn(styles.noFollowBox)}>팔로우하는 유저가 없어요</div>
             ) : (
-              <FollowList followData={followData} />
+              <FollowList followData={data} />
             )}
           </div>
         </Modal>

diff --git a/src/app/(userpage)/user/[userId]/components/MyProfileButton/MyProfileButton.module.scss b/src/app/(userpage)/user/[userId]/components/MyProfileButton/MyProfileButton.module.scss
@@ -0,0 +1,9 @@
+@import "@/styles/_index";
+@import "@/styles/_media";
+
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  width: 100%;
+}
diff --git a/src/app/(userpage)/user/[userId]/components/MyProfileButton/MyProfileButton.tsx b/src/app/(userpage)/user/[userId]/components/MyProfileButton/MyProfileButton.tsx
@@ -0,0 +1,28 @@
+import React, { useState } from "react";
+import Button from "@/components/Button/Button";
+import Modal from "@/components/Modal/Modal";
+import cn from "@/utils/classNames";
+import styles from "./MyProfileButton.module.scss";
+
+export default function MyProfileButton() {
+  const [isModal, setIsModal] = useState(false);
+  const handleClose = () => setIsModal(false);
+  const handleOpen = () => setIsModal(true);
+
+  return (
+    <div className={cn(styles.container)}>
+      {isModal && (
+        <Modal onClose={handleClose}>
+          <div className={styles.profileEdit}>모달 테스트</div>
+        </Modal>
+      )}
+      <Button
+        styleType='primary'
+        onClick={handleOpen}
+      >
+        프로필 수정
+      </Button>
+      <Button styleType='tertiary'>로그아웃</Button>
+    </div>
+  );
+}
diff --git a/src/app/(userpage)/user/[userId]/components/UserInfo/UserInfo.module.scss b/src/app/(userpage)/user/[userId]/components/UserInfo/UserInfo.module.scss
@@ -92,3 +92,15 @@
     width: 194px;
   }
 }
+
+.profile {
+  width: 250px;
+
+  @include respond-to(tablet) {
+    width: 80%;
+  }
+
+  @include respond-to(mobile) {
+    width: 245px;
+  }
+}
diff --git a/src/app/(userpage)/user/[userId]/components/UserInfo/UserInfo.tsx b/src/app/(userpage)/user/[userId]/components/UserInfo/UserInfo.tsx
@@ -1,6 +1,7 @@
 /* eslint-disable import/no-named-as-default */
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
+import { useSession } from "next-auth/react";
 import React, { useState } from "react";
 import Button from "@/components/Button/Button";
 import { UserImage } from "@/components/UserImage";
@@ -9,8 +10,11 @@ import styles from "./UserInfo.module.scss";
 import FollowModal from "../FollowModal/FollowModal";
 // eslint-disable-next-line no-restricted-imports
 import HTMLContent from "../HTMLContent/HTMLContent";
+// eslint-disable-next-line no-restricted-imports
+import MyProfileButton from "../MyProfileButton/MyProfileButton";
 
 type UserInfoProps = {
+  userId: number;
   nickname: string;
   image: string;
   description: string;
@@ -19,11 +23,21 @@ type UserInfoProps = {
   isfollow: boolean;
 };
 
-export default function UserInfo({ nickname, image, description, follower, folloing, isfollow }: UserInfoProps) {
-  // textarea에서 쓴 줄바꿈 변환해서 서버로 보내기
-  // const formattedDescription = description.replace(/\n/g, "<br>")
+export default function UserInfo({
+  userId,
+  nickname,
+  image,
+  description,
+  follower,
+  folloing,
+  isfollow,
+}: UserInfoProps) {
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [followModalProps, setFollowModalProps] = useState("");
+  const { data: session } = useSession();
+  const loginUser = session?.user.id;
+
+  console.log(loginUser, userId);
 
   const handelFolloweesModal = () => {
     setFollowModalProps("followees");
@@ -62,22 +76,28 @@ export default function UserInfo({ nickname, image, description, follower, follo
             <p>팔로잉</p>
           </div>
         </div>
-        {isfollow ? (
-          <Button
-            styleType='tertiary'
-            disabled
-            className='profile'
-          >
-            팔로우 취소
-          </Button>
+        {Number(userId) === loginUser ? (
+          <MyProfileButton />
         ) : (
-          <Button
-            styleType='primary'
-            disabled={false}
-            className='profile'
-          >
-            팔로우
-          </Button>
+          <div>
+            {isfollow ? (
+              <Button
+                styleType='tertiary'
+                disabled
+                className={styles.profile}
+              >
+                팔로우 취소
+              </Button>
+            ) : (
+              <Button
+                styleType='primary'
+                disabled={false}
+                className={styles.profile}
+              >
+                팔로우
+              </Button>
+            )}
+          </div>
         )}
       </div>
     </>

diff --git a/src/app/(userpage)/user/[userId]/page.tsx b/src/app/(userpage)/user/[userId]/page.tsx
@@ -2,13 +2,11 @@
 
 /* eslint-disable no-restricted-imports */
 
+import { useQuery } from "@tanstack/react-query";
 import { useSession } from "next-auth/react";
-import React, { useEffect, useState } from "react";
-// user mock data
-// import { userMock } from "@/app/(userpage)/userMock";
+import React from "react";
 import Activity from "@/components/Card/Activity/Activity";
 import cn from "@/utils/classNames";
-// 추후 데이터 연결시 받아온데이터로 변환 예정
 import HttpClient from "@/utils/httpClient";
 import UserActivityList from "./components/UserActivityList/UserActivityList";
 import UserInfo from "./components/UserInfo/UserInfo";
@@ -17,53 +15,49 @@ import { UserDetail } from "../../types";
 
 export default function UserPage({ params }: { params: { userId: number } }) {
   const { data: session } = useSession();
-  const [userData, setUserData] = useState<UserDetail>();
+  const ACCESS_TOKEN = session?.accessToken;
 
   const httpClient = new HttpClient(process.env.NEXT_PUBLIC_BASE_URL!);
 
-  const getUserData = async () => {
-    if (session) {
-      const ACCESS_TOKEN = session.accessToken;
-      setUserData(
-        await httpClient.get(`users/${params.userId}`, {
-          headers: { Authorization: ACCESS_TOKEN },
-          cache: "no-cache",
-        }),
-      );
-    }
-  };
-
-  useEffect(() => {
-    getUserData();
-  }, []);
+  const { data } = useQuery({
+    queryKey: ["userData", params.userId],
+    queryFn: async () => {
+      const res = httpClient.get<UserDetail>(`users/${params.userId}`, {
+        headers: { Authorization: ACCESS_TOKEN ?? "" },
+        cache: "no-cache",
+      });
+      return res;
+    },
+  });
 
   return (
     <div className={cn(styles.container)}>
-      {userData && (
+      {data && (
         <>
           <UserInfo
-            nickname={userData.nickname}
-            image={userData.image}
-            description={userData.description}
-            follower={userData.followersCount}
-            folloing={userData.followeesCount}
-            isfollow={userData.isFollowing}
+            userId={params.userId}
+            nickname={data.nickname}
+            image={data.image}
+            description={data.description}
+            follower={data.followersCount}
+            folloing={data.followeesCount}
+            isfollow={data.isFollowing}
           />
           <div className={styles.activity}>
             <section>
               <p className={styles.activityDetailText}>활동 내역</p>
               <div className={styles.activityDetails}>
                 <Activity
                   title='남긴 별점 평균'
-                  averageRating={userData.averageRating}
+                  averageRating={data.averageRating}
                 />
                 <Activity
                   title='남긴 리뷰'
-                  reviewCount={userData.reviewCount}
+                  reviewCount={data.reviewCount}
                 />
                 <Activity
                   title='관심 카테고리'
-                  chipCategoty={userData.mostFavoriteCategory}
+                  chipCategoty={data.mostFavoriteCategory}
                 />
               </div>
             </section>

diff --git a/src/components/Button/Button.module.scss b/src/components/Button/Button.module.scss
@@ -54,15 +54,3 @@
     border: 1px solid $gray-300;
   }
 }
-
-.profile {
-  width: 250px;
-
-  @include respond-to(tablet) {
-    width: 400px;
-  }
-
-  @include respond-to(mobile) {
-    width: 245px;
-  }
-}