인터페이스-변경에따른-수정 (#40)

* Refactor : 토큰을 받아오는 로직 함수로 분리

* Refactor : 네비게이션 바 컴포넌트 변경

* Refactor : 토큰을 받아오는 로직 함수로 분리

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

* Fix : Suspense Query를 useQuery로 변경

* Refactor : Retry 를 하지않음

* Refactor : 유저명 클릭시 해당유저의 프로필로 이동

* Refactor : 인터페이스 변경

client/src/app/layout.tsx

@@ -4,7 +4,7 @@ import { nameOfApp, oneLineMessage } from "@/const/brand";
 import OverrideCSS from "@/const/overrideCSS";
 import { Box, GlobalStyles } from "@mui/material";
 import Pretendard from "~/assets/font/Pretendard";
-import NavigationBar from "~/components/NavigationBar";
+import NavigationBar from "~/components/Navigation/NavigationBar";
 import "./globals.css";
 import CustomQueryClientProvider from "@/components/queryClient/CustomQueryClientProvider";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";

client/src/app/page.tsx

@@ -1,11 +1,11 @@
 "use server";
 import PostCardList from "@/components/post/PostCardList";
 import { getPostListQueryFn } from "@/queries/post/useGetPostListInfiniteQuery";
+import getTokenFromCookies from "@/utils/getTokenFromCookies";
 import { Container, Paper } from "@mui/material";
-import { cookies } from "next/headers";
 
 export default async function Home() {
-  const accessToken = cookies().get("accessToken")?.value;
+  const accessToken = await getTokenFromCookies()
 
   const initialData = await getPostListQueryFn({
     page: 0,

client/src/app/search/page.tsx

@@ -1,6 +1,7 @@
 "use server";
 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";
 
@@ -9,7 +10,7 @@ const SearchPage = async ({
 }: {
   searchParams?: { [key: string]: string | undefined };
 }) => {
-  const accessToken = cookies().get("accessToken")?.value;
+  const accessToken = await getTokenFromCookies()
   const initialData = await getPostListQueryFn({
     searchKeyword: searchParams?.keyword,
     headers: { Authorization: accessToken },

client/src/components/Navigation/NavbarUserImage.tsx

@@ -0,0 +1,20 @@
+"use client";
+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/>;
+  }
+};
+
+export default NavbarUserImage;

client/src/components/Navigation/NavigationBar.tsx

@@ -0,0 +1,82 @@
+"use client";
+import { BottomNavigation, BottomNavigationAction, Paper } from "@mui/material";
+
+import HomeIcon from "~/assets/icons/HomeIcon.svg";
+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 Link from "next/link";
+import { usePathname } from "next/navigation";
+import NavbarUserImage from "@/components/Navigation/NavbarUserImage";
+import { useMemo } from "react";
+
+const NavigationBar = () => {
+  const path = usePathname();
+  const NavbarData = useMemo(
+    () => [
+      {
+        iconComponent: <HomeIcon />,
+        label: "홈",
+        href: HOME,
+      },
+      {
+        iconComponent: <SearchIcon />,
+        label: "검색",
+        href: SEARCH,
+      },
+      {
+        iconComponent: <PostIcon />,
+        href: NEW_POST,
+      },
+      {
+        iconComponent: <BeverageIcon />,
+        label: "술과사전",
+        href: WIKI,
+      },
+      {
+        iconComponent: <NavbarUserImage />,
+        label: "내 정보",
+        href: MY_PROFILE,
+      },
+    ],
+    []
+  );
+  return (
+    <Paper sx={WrapperStyle} elevation={0}>
+      <BottomNavigation value={path} showLabels sx={BtnStyle}>
+        {NavbarData.map(({ label, href, iconComponent, ...others }) => {
+          return (
+            <BottomNavigationAction
+              icon={iconComponent as any}
+              key={String(label)}
+              component={href ? Link : "button"}
+              href={href}
+              value={href}
+              label={label}
+              {...others}
+            />
+          );
+        })}
+      </BottomNavigation>
+    </Paper>
+  );
+};
+
+const WrapperStyle = {
+  position: "fixed",
+  bottom: 0,
+  left: 0,
+  right: 0,
+  borderRadius: 0,
+};
+const BtnStyle = {
+  borderRadius: "12px 12px 0 0",
+  border: "1px solid",
+  borderBottom: "none",
+  borderColor: "gray.secondary",
+  boxSizing: "border-box",
+};
+
+export default NavigationBar;

client/src/components/post/PostCard.tsx

@@ -25,13 +25,17 @@ import useUnLikePostMutation from "@/queries/post/useUnLikePostMutation";
 import "../newpost/quill.mention.css";
 import { sanitize } from "isomorphic-dompurify";
 import UserAvatar from "../user/info/UserAvatar";
+import Link from "next/link";
+import { USER_PAGE } from "@/const/clientPath";
+import { useUserInfoQuery } from "@/queries/auth/useUserInfoQuery";
 
 const PostCard = ({
   postAttachUrls,
   id,
+  createdBy,
   nickname,
   postContent,
-  updateDt,
+  lastModifiedDate,
   tagList,
   postNo,
   likeCount,
@@ -46,13 +50,21 @@ const PostCard = ({
   const hasImage = useMemo(() => postAttachUrls.length !== 0, [postAttachUrls]);
   const { mutate: likeHandler } = useLikePostMutation();
   const { mutate: unLikeHandler } = useUnLikePostMutation();
+  const { data: currentUser } = useUserInfoQuery();
+
+  const isMyPost = useMemo(
+    () => currentUser?.userNo === createdBy,
+    [currentUser]
+  );
 
   return (
     <Card sx={{ display: "flex", gap: 2, p: 2 }}>
-      <UserAvatar
-        src={profileImgUrls[0]}
-        fallback={String(id)[0].toUpperCase()}
-      />
+      <Link href={USER_PAGE(createdBy)}>
+        <UserAvatar
+          src={profileImgUrls[0]}
+          fallback={String(id)[0].toUpperCase()}
+        />
+      </Link>
       <Box sx={{ width: "100%" }}>
         {/* Header */}
         <Box
@@ -72,20 +84,25 @@ const PostCard = ({
             }}
           >
             {/* 타이틀 */}
-            <Typography color="primary.main">{nickname}</Typography>
-            <Typography
-              variant="label"
-              color={"text.secondary"}
-            >{`@${id}`}</Typography>
+            <Link href={USER_PAGE(createdBy)}>
+              <Typography color="primary.main">{nickname}</Typography>
+            </Link>
+            <Link href={USER_PAGE(createdBy)}>
+              <Typography
+                variant="label"
+                color={"text.secondary"}
+              >{`@${id}`}</Typography>
+            </Link>
             <Typography variant="label" color={"text.secondary"}>
-              {dayjs(updateDt).format("MM.DD")}
+              {dayjs(lastModifiedDate).format("MM.DD")}
             </Typography>
           </Box>
 
-          <ButtonBase aria-label="settings" sx={{ p: 0 }}>
-            <MoreVertOutlined />
+          <ButtonBase aria-label="settings" sx={{ p: 0, height: 24 }}>
+            {isMyPost && <MoreVertOutlined />}
           </ButtonBase>
         </Box>
+
         {alcoholName && (
           <AlcoleNameTag alcoholName={alcoholName} alcoholType={alcoholType} />
         )}
@@ -110,7 +127,11 @@ const PostCard = ({
             onClick={() => openPostDetailPage(id, String(postNo))}
             image={postAttachUrls[0].attachUrl}
             alt={`${id}의 포스트`}
-            sx={{ borderRadius: 2, bgcolor: "background.default" }}
+            sx={{
+              borderRadius: 2,
+              bgcolor: "background.default",
+              cursor: "pointer",
+            }}
           />
         )}
         {/* CTA */}

client/src/components/queryClient/CustomQueryClientProvider.tsx

@@ -13,6 +13,7 @@ export default function CustomQueryClientProvider({
       new QueryClient({
         defaultOptions: {
           queries: {
+            retry:false,
             staleTime: 60 * 1000,
           },
         },

client/src/const/clientPath.ts

@@ -15,6 +15,11 @@ export const FORGOTPASSWORD = "/auth/forgot-password" as const;
  * 로그인 했을 경우만 접근 가능한 마이페이지
  */
 export const MY_PROFILE = "/user" as const;
+/**
+ * 유저의 PK를 입력받아 해당유저의 프로필 페이지로 이동하는 URL
+ */
+export const USER_PAGE = (pk:string|number)=>`/user/${pk}`
+
 /**
  * 술과사전 페이지 라우트
  */

client/src/queries/auth/useUserInfoQuery.tsx

@@ -1,20 +1,21 @@
 "use client";
 import { MY_INFO } from "@/const/serverPath";
-import {axiosPrivate} from "@/libs/axios";
+import { axiosPrivate } from "@/libs/axios";
 import { MyInfoInterface } from "@/types/auth/myInfo";
 import { SigninRequirement } from "@/types/auth/signinRequirement";
-import { useSuspenseQuery } from "@tanstack/react-query";
+import getTokenFromLocalStorage from "@/utils/getTokenFromLocalStorage";
+import { useQuery } from "@tanstack/react-query";
 
 export const useUserInfoQuery = () =>
-  useSuspenseQuery({
+  useQuery({
     queryKey: userInfoQueryKeys.all,
     queryFn: getMyInfoByLocalStorage,
   });
 
 export const getMyInfoByLocalStorage = async () => {
-  // const accessToken = localStorage.get("accessToken");
+  const accessToken = getTokenFromLocalStorage();
   const { data } = await axiosPrivate.get<MyInfoInterface>(MY_INFO, {
-    // headers: { Authorization: accessToken },
+    headers: { Authorization: accessToken },
   });
   return data;
 };

client/src/queries/post/useDeletePostMutation.ts

@@ -1,6 +1,6 @@
 import { REMOVE_POST } from "@/const/serverPath";
 import { axiosPrivate } from "@/libs/axios";
-import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { useMutation } from "@tanstack/react-query";
 import { useInvalidatePostList } from "./useGetPostListInfiniteQuery";
 
 export const useDeletePostMutation = () => {

client/src/queries/post/useGetPostDetailQuery.tsx

@@ -1,12 +1,12 @@
-import { useSuspenseQuery } from "@tanstack/react-query";
+import { useQuery } from "@tanstack/react-query";
 import axios from "@/libs/axios";
 import { PostInterface } from "@/types/post/PostInterface";
 
 const useGetPostDetailQuery = (
   postId: string,
   options?: { initialData: PostInterface }
 ) => {
-  return useSuspenseQuery({
+  return useQuery({
     queryKey: ["post", postId],
     queryFn: () => getPostDetailQueryFn(postId),
     initialData: options?.initialData,

client/src/queries/post/useGetPostListInfiniteQuery.tsx

@@ -49,6 +49,7 @@ export interface GetPostListOptions {
   page?: number;
   size?: number;
   searchKeyword?: string;
+  searchUserNos?:string;
 }
 /**
  * 실제 서버에서 응답해주는 값