프로필페이지-개선-팔로잉수-추가 (#41)

* New : 팔로잉 하고있는 유저의 수 표시

* Fix: 사용하지 않는 Test 제거

* Refactor : 실제서버의 응답을 그대로 forward하도록 로그인 라우트 개선,

* Refactor: 커스텀 앱바 조건부랜더링 추가

* Minor : 사용하지 않는모듈 제거

* Fix : Suspense 제거

* Refactor : 유저 정보에 따라 해당 유저의 게시글을 표시

* New : 로그인 여부에 따른 조건부 랜더링

* Minor : 코드컨벤션 개선

client/src/app/api/auth/login/route.ts

@@ -2,6 +2,7 @@ import { LOGIN_API_PATH } from "@/const/serverPath";
 import { setCookie } from "@/hooks/useSetCookie";
 import axios from "@/libs/axios";
 import { SigninResponseInterface } from "@/types/auth/signinResponse";
+import { AxiosResponse, isAxiosError } from "axios";
 import { NextRequest, NextResponse } from "next/server";
 
 export async function POST(request: NextRequest) {
@@ -13,7 +14,20 @@ export async function POST(request: NextRequest) {
     });
     setCookie({ key: "accessToken", value: data.token, httpOnly: true });
     return NextResponse.json({ ...data });
-  } catch {
-    return NextResponse.json({ message: "로그인 실패" }, { status: 400 });
+  } catch (error) {
+    if (
+      isAxiosError<{
+        httpStatus: number;
+        errorMessage: string;
+        detailMessage: string;
+      }>(error) &&
+      error.response
+    ) {
+      const { httpStatus, errorMessage, detailMessage } = error.response?.data;
+      return NextResponse.json(
+        { errorMessage, detailMessage, httpStatus },
+        { status: httpStatus }
+      );
+    }
   }
 }

client/src/app/search/page.tsx

@@ -3,7 +3,6 @@ import SearchArea from "@/components/search/SearchArea";
 import { getPostListQueryFn } from "@/queries/post/useGetPostListInfiniteQuery";
 import getTokenFromCookies from "@/utils/getTokenFromCookies";
 import { Container } from "@mui/material";
-import { cookies } from "next/headers";
 
 const SearchPage = async ({
   searchParams,

client/src/app/user/[userId]/layout.tsx

@@ -1,20 +1,29 @@
 "use client";
 import CustomAppbar from "@/components/CustomAppbar";
+import { useUserInfoQuery } from "@/queries/auth/useUserInfoQuery";
 import { Container, Paper } from "@mui/material";
-import React from "react";
+import React, { useMemo } from "react";
 
 type Props = {
   children: React.ReactNode;
+  params: { userId: string };
 };
 
-const UserInfoPageLayout = ({ children }: Props) => {
-
+const UserInfoPageLayout = ({ children, params }: Props) => {
+  const { data: userInfo } = useUserInfoQuery();
+  const isMyProfile = useMemo(
+    () => String(userInfo?.userNo) === String(params.userId),
+    [userInfo,params.userId]
+  );
+
   return (
     <Paper>
       <CustomAppbar
-        title={""}
-        buttonTitle={"설정"}
+        buttonTitle={isMyProfile ? "설정" : undefined}
         onClickButton={() => {
+          if(!isMyProfile){
+            return
+          }
           console.log("눌림");
         }}
       />

client/src/app/user/[userId]/page.tsx

@@ -6,16 +6,17 @@ import NoResult from "@/assets/images/noResult.png";
 import { Box } from "@mui/material";
 import Image from "next/image";
 import PostCardList from "@/components/post/PostCardList";
+import { USER_SUMMARY } from "@/const/serverPath";
 
 const page = async ({ params }: { params: { userId: string } }) => {
   try {
     const { data } = await axios.get<
       MyInfoInterface & { isFollowing: boolean }
-    >(`/user/${params.userId}/summary`);
+    >(USER_SUMMARY(params.userId));
     return (
       <>
         <UserInfoCard data={data} />
-        <PostCardList/>
+        <PostCardList searchUserNos={params.userId} />
       </>
     );
   } catch {

client/src/components/CustomAppbar.tsx

@@ -1,16 +1,17 @@
-'use client'
+"use client";
 import { AppBar, Button, IconButton, Toolbar, Typography } from "@mui/material";
 import GoBackIcon from "@/assets/icons/GoBackIcon.svg";
 import { MouseEventHandler, memo } from "react";
 import { useRouter } from "next/navigation";
 
 interface CustomAppbarInterface {
-  title: string;
-  buttonTitle: string;
+  title?: string;
+  buttonTitle?: string;
   disableButton?: boolean;
   onClickButton?: MouseEventHandler<HTMLButtonElement>;
 }
 
+
 const CustomAppbar = ({
   title,
   buttonTitle,
@@ -23,19 +24,21 @@ const CustomAppbar = ({
     <AppBar position={"static"}>
       <Toolbar sx={{ display: "flex", justifyContent: "space-between" }}>
         <IconButton onClick={() => router.back()}>
-          <GoBackIcon></GoBackIcon>
+          <GoBackIcon/>
         </IconButton>
         <Typography variant="subtitle2" fontWeight={"bold"}>
           {title}
         </Typography>
-        <Button
-          disabled={disableButton}
-          onClick={onClickButton}
-          variant="text"
-          sx={{ minWidth: 40, fontWeight: "medium" }}
-        >
-          {buttonTitle}
-        </Button>
+        {buttonTitle && (
+          <Button
+            disabled={disableButton}
+            onClick={onClickButton}
+            variant="text"
+            sx={{ minWidth: 40, fontWeight: "medium" }}
+          >
+            {buttonTitle}
+          </Button>
+        )}
       </Toolbar>
     </AppBar>
   );

client/src/components/Navigation/NavbarUserImage.tsx

@@ -3,18 +3,16 @@ import { useUserInfoQuery } from "@/queries/auth/useUserInfoQuery";
 import UserAvatar from "../user/info/UserAvatar";
 import MyIcon from "~/assets/icons/MyIcon.svg";
 const NavbarUserImage = () => {
-  try {
-    const { data } = useUserInfoQuery();
-    return (
-      <UserAvatar
-        sx={{ width: 28, height: 28, m:0.25 }}
-        src={data?.profileImages[0]?.attachUrl}
-        fallback={data?.id}
-      />
-    );
-  } catch (err) {
-    return <MyIcon/>;
-  }
+  const { data } = useUserInfoQuery();
+  return data ? (
+    <UserAvatar
+      sx={{ width: 28, height: 28, m: 0.25 }}
+      src={data?.profileImages[0]?.attachUrl}
+      fallback={data?.id}
+    />
+  ) : (
+    <MyIcon />
+  );
 };
 
 export default NavbarUserImage;

client/src/components/Navigation/NavigationBar.tsx

@@ -6,14 +6,16 @@ import SearchIcon from "~/assets/icons/SearchIcon.svg";
 import PostIcon from "~/assets/icons/PostIcon.svg";
 import BeverageIcon from "~/assets/icons/BeverageIcon.svg";
 
-import HOME, { MY_PROFILE, NEW_POST, SEARCH, WIKI } from "@/const/clientPath";
+import HOME, { MY_PROFILE, NEW_POST, SEARCH, SIGNIN, WIKI } from "@/const/clientPath";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import NavbarUserImage from "@/components/Navigation/NavbarUserImage";
 import { useMemo } from "react";
+import { useUserInfoQuery } from "@/queries/auth/useUserInfoQuery";
 
 const NavigationBar = () => {
   const path = usePathname();
+  const { data: userInfo } = useUserInfoQuery();
   const NavbarData = useMemo(
     () => [
       {
@@ -38,10 +40,10 @@ const NavigationBar = () => {
       {
         iconComponent: <NavbarUserImage />,
         label: "내 정보",
-        href: MY_PROFILE,
+        href: userInfo ? `${MY_PROFILE}/${userInfo.userNo}` : SIGNIN,
       },
     ],
-    []
+    [userInfo]
   );
   return (
     <Paper sx={WrapperStyle} elevation={0}>

client/src/components/search/SearchArea.tsx

@@ -41,18 +41,10 @@ const SearchArea = ({ initialData, searchKeyword }: Props) => {
           }}
         />
       </motion.div>
-      <Suspense
-        fallback={
-          <Box sx={{ width: "100%", textAlign: "center", py: 1 }}>
-            <CircularProgress />
-          </Box>
-        }
-      >
-        <PostCardList
-          initialData={!keyword ? MemoidInitailData : undefined}
-          searchKeyword={debouncedValue}
-        />
-      </Suspense>
+      <PostCardList
+        initialData={!keyword ? MemoidInitailData : undefined}
+        searchKeyword={debouncedValue}
+      />
     </Paper>
   );
 };

client/src/components/user/info/UserInfoCard.tsx

@@ -4,14 +4,15 @@ import UserAvatar from "@/components/user/info/UserAvatar";
 import { Box, Button, Typography } from "@mui/material";
 
 type Props = {
-  data: MyInfoInterface & { isFollowing: boolean };
+  data: MyInfoInterface;
 };
 
 const UserInfo = ({ data }: Props) => {
 
   const {
     id,
     followerCount,
+    followingCount,
     nickname,
     profileImages,
     isFollowing,
@@ -38,6 +39,8 @@ const UserInfo = ({ data }: Props) => {
       <Box sx={RowWrapperSX}>
         <Typography fontWeight="bold">{followerCount}</Typography>
         <Typography color="text.secondary">팔로워</Typography>
+        <Typography fontWeight="bold">{followingCount}</Typography>
+        <Typography color="text.secondary">팔로잉</Typography>
       </Box>
       {isFollowing ? (
         <Button variant="outlined" fullWidth>

client/src/const/serverPath.ts

@@ -51,4 +51,10 @@ export const POST_LIKE_URL = (id:string)=>`/posts/like/${id}` as const
  * 포스트의 PK를 입력받아 해당 PK의 게시글의 좋아요 취소를 요청
  * @param id 게시글의 PK
  */
-export const POST_UN_LIKE_URL = (id:string)=>`/posts/like-cancel/${id}` as const
+export const POST_UN_LIKE_URL = (id:string)=>`/posts/like-cancel/${id}` as const
+/**
+ * 유저 ID 를 입력받아 해당 유저의 정보를 불러오는 URL
+ * @param id 유저 PK
+ * @returns 
+ */
+export const USER_SUMMARY = (id:string)=>`/user/${id}/summary` as const

client/src/queries/newPost/useNewPostMutation.tsx

@@ -1,7 +1,8 @@
 import { useMutation } from "@tanstack/react-query";
-import { axiosPrivate } from "@/libs/axios";
+import axios from "@/libs/axios";
 import { POST_LIST } from "@/const/serverPath";
 import { NewPostRequestInterface } from "@/types/newPost/NewPostInterface";
+import getTokenFromLocalStorage from "@/utils/getTokenFromLocalStorage";
 
 const useNewPostMutation = () => {
   return useMutation({
@@ -13,10 +14,9 @@ const useNewPostMutation = () => {
 };
 
 const usePostNewPostFn = async (formData: NewPostRequestInterface) => {
-  const { data } = await axiosPrivate.post<{ postNo: number }>(
-    POST_LIST,
-    formData
-  );
+  const { data } = await axios.post<{ postNo: number }>(POST_LIST, formData, {
+    headers: { Authorization: getTokenFromLocalStorage() },
+  });
   return data;
 };