댓글-불러오기,등록-기능-연결 (#65)

* Minor : 아이콘 추가 * Minor : 디렉토리 구조 변경에 따른 변경 * Refactor : 모달 position 속성 absolute 로 변경 * Minor : 포매팅 * Refactor : PostCard 스켈레톤 컴포넌트 구현 * New : 댓글 Interface 정의 * New : 댓글, 카드 관련 컨텍스트 정의 * Refactor : 페이지 디자인 개선 * Fix : 현재 페이지와 디테일 페이지가 일치하는 경우 이동하지 않도록 개선 * Minor : 인용기능 삭제 * New : PostComment 스켈레톤 컴포넌트 구현 * Refactor : Post Detail Suspense적용 * New : 댓글 작성, 조회 기능 구현
potenday-project · Dec 3, 2023 · 8ac5044 · 8ac5044
1 parent 1095ab9
commit 8ac5044
Show file tree

Hide file tree

Showing 31 changed files with 568 additions and 191 deletions.
diff --git a/client/src/app/@Modal/(.)post/[userId]/[postId]/page.tsx b/client/src/app/@Modal/(.)post/[userId]/[postId]/page.tsx
diff --git a/client/src/app/@Modal/layout.tsx b/client/src/app/@Modal/layout.tsx
@@ -5,7 +5,7 @@ import { usePathname } from "next/navigation";
 
 export default function Layout({ children }: any) {
   const pathname = usePathname();
-  const allowedPath = ["/post/", NEW_POST, SIGNIN];
+  const allowedPath = [NEW_POST, SIGNIN];
 
   return allowedPath.some((path) => pathname.startsWith(path))
     ? children

diff --git a/client/src/app/post/[userId]/[postId]/page.tsx b/client/src/app/post/[userId]/[postId]/page.tsx
@@ -1,8 +1,10 @@
 "use server";
-import PostDetail from "@/components/post/PostDetail";
+import PostDetail from "@/components/post/detail/PostDetail";
 import { getPostDetailQueryFn } from "@/queries/post/useGetPostDetailQuery";
 import getTokenFromCookies from "@/utils/getTokenFromCookies";
+import { Paper, Container } from "@mui/material";
 import { redirect } from "next/navigation";
+import CustomAppbar from "@/components/CustomAppbar";
 
 const PostDetailPage = async ({ params }: { params: { postId: string } }) => {
   const parsedPostId = params.postId;
@@ -15,7 +17,22 @@ const PostDetailPage = async ({ params }: { params: { postId: string } }) => {
   } catch {
     redirect("/not-found");
   }
-  return <PostDetail postNo={parsedPostId} initialData={initialData} />;
+  return (
+    <>
+      <CustomAppbar title={`${initialData.nickname}님의 리뷰`} />
+      <Container sx={{ px: { xs: 0, sm: 4 }, pb: "132px" }} maxWidth={"lg"}>
+        <Paper
+          sx={{
+            display: "flex",
+            position: "relative",
+            flexDirection: "column",
+          }}
+        >
+          <PostDetail postNo={parsedPostId} initialData={initialData} />
+        </Paper>
+      </Container>
+    </>
+  );
 };
 
 export default PostDetailPage;
diff --git a/client/src/assets/icons/CommentIcon.svg b/client/src/assets/icons/CommentIcon.svg
diff --git a/client/src/assets/icons/comment/SubmitCommentIcon.svg b/client/src/assets/icons/comment/SubmitCommentIcon.svg
diff --git a/client/src/components/ModalWrapper.tsx b/client/src/components/ModalWrapper.tsx
@@ -29,6 +29,7 @@ const ModalWrapper = ({ children, disableBox }: ModalInterface) => {
         alignItems: "center",
         justifyContent: "center",
         display: "flex",
+        position:'absolute'
       }}
     >
       {
@@ -39,6 +40,7 @@ const ModalWrapper = ({ children, disableBox }: ModalInterface) => {
             p: disableBox ? 0 : 4,
             maxWidth: "90%",
             maxHeight: "90%",
+            overflowY:'auto'
           }}
         >
           <>{children}</>

diff --git a/client/src/components/Navigation/NavigationBar.tsx b/client/src/components/Navigation/NavigationBar.tsx
@@ -5,8 +5,15 @@ 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 { useGlobalNavbarVisibility } from "@/store/useGlobalNavbarVisibility";
 
-import HOME, { MY_PROFILE, NEW_POST, SEARCH, SIGNIN, 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";
@@ -16,6 +23,9 @@ import { useMyInfoQuery } from "@/queries/auth/useMyInfoQuery";
 const NavigationBar = () => {
   const path = usePathname();
   const { data: userInfo } = useMyInfoQuery();
+
+  const isVisible = useGlobalNavbarVisibility(({ isVisible }) => isVisible);
+
   const NavbarData = useMemo(
     () => [
       {
@@ -45,35 +55,32 @@ const NavigationBar = () => {
     ],
     [userInfo]
   );
-  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>
+  return isVisible ? (
+    <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>
+  ) : (
+    <></>
   );
 };
 
-const WrapperStyle = {
+const BtnStyle = {
   position: "fixed",
   bottom: 0,
   left: 0,
   right: 0,
-  borderRadius: 0,
-};
-const BtnStyle = {
   borderRadius: "12px 12px 0 0",
   border: "1px solid",
   borderBottom: "none",

diff --git a/client/src/components/post/PostCard.tsx b/client/src/components/post/PostCard.tsx
@@ -18,7 +18,6 @@ import { useContext, useMemo } from "react";
 import ShareIcon from "@/assets/icons/ShareIcon.svg";
 import LikeIcon from "@/assets/icons/LikeIcon.svg";
 import CommentIcon from "@/assets/icons/CommentIcon.svg";
-import QuoteIcon from "@/assets/icons/QuoteIcon.svg";
 import AlcoholNameTag from "@/components/wiki/AlcoholNameTag";
 import dayjs from "dayjs";
 import useLikePostMutation from "@/queries/post/useLikePostMutation";
@@ -30,7 +29,7 @@ import Link from "next/link";
 import { USER_PAGE } from "@/const/clientPath";
 import { useMyInfoQuery } from "@/queries/auth/useMyInfoQuery";
 import PostCardOptionDropdown from "./PostCardOptionDropdown";
-import { postcardContext } from "@/store/PostCardContext";
+import { postcardContext } from "@/store/post/PostCardContext";
 
 const PostCard = ({
   postAttachUrls,
@@ -47,7 +46,6 @@ const PostCard = ({
   alcoholType,
   commentCount,
   likedByMe,
-  quoteCount,
   alcoholNo,
 }: PostInterface) => {
   const openPostDetailPage = useOpenPostDetailPage();
@@ -163,10 +161,6 @@ const PostCard = ({
             </Box>
             <Typography variant="label">{likeCount ?? 0}</Typography>
           </ButtonBase>
-          <ButtonBase data-testid="QuoteBtn" aria-label="Quote">
-            <QuoteIcon />
-            <Typography variant="label">{quoteCount ?? 0}</Typography>
-          </ButtonBase>
           <ButtonBase data-testid="shareBtn" aria-label="share">
             <ShareIcon />
             <Typography variant="label">공유</Typography>

diff --git a/client/src/components/post/PostCardList.tsx b/client/src/components/post/PostCardList.tsx
@@ -6,12 +6,13 @@ import useGetPostListInfiniteQuery, {
 } from "@/queries/post/useGetPostListInfiniteQuery";
 import { useInView } from "react-intersection-observer";
 import { useEffect } from "react";
-import { Box, CircularProgress, Stack } from "@mui/material";
+import { Stack } from "@mui/material";
 import { useMemo } from "react";
 import Image from "next/image";
 import NoResult from "@/assets/images/noResult.png";
 import getTokenFromLocalStorage from "@/utils/getTokenFromLocalStorage";
-import { postcardContext } from "@/store/PostCardContext";
+import { postcardContext } from "@/store/post/PostCardContext";
+import PostCardSkeleton from "./PostCardSkeleton";
 
 function PostCardList(props: UseGetPostListQueryInterface) {
   const {
@@ -28,7 +29,7 @@ function PostCardList(props: UseGetPostListQueryInterface) {
 
   const { searchKeyword, searchUserNos } = props;
 
-  const { ref, inView } = useInView({ threshold: 0.9 });
+  const { ref, inView } = useInView();
   useEffect(() => {
     if (hasNextPage && inView) fetchNextPage();
   }, [inView, hasNextPage]);
@@ -55,9 +56,7 @@ function PostCardList(props: UseGetPostListQueryInterface) {
         )}
         {/* 로딩창 */}
         {isFetchingNextPage || isLoading ? (
-          <Box sx={{ width: "100%", textAlign: "center", py: 1 }}>
-            <CircularProgress />
-          </Box>
+            <PostCardSkeleton />
         ) : (
           // 인터섹션옵저버
           <div style={{ height: 60 }} ref={ref}></div>

diff --git a/client/src/components/post/PostCardOptionDropdown.tsx b/client/src/components/post/PostCardOptionDropdown.tsx
@@ -4,17 +4,17 @@ import { ButtonBase, Menu, MenuItem } from "@mui/material";
 import { useDeletePostMutation } from "@/queries/post/useDeletePostMutation";
 
 type PostCardOptionDropdownProps = {
-  postId:number
+  postId: number;
 };
 
-const PostCardOptionDropdown = ({postId}: PostCardOptionDropdownProps) => {
+const PostCardOptionDropdown = ({ postId }: PostCardOptionDropdownProps) => {
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
   const open = Boolean(anchorEl);
 
   const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
     setAnchorEl(event.currentTarget);
   };
-const {mutate:deletePost}=useDeletePostMutation()
+  const { mutate: deletePost } = useDeletePostMutation();
 
   const handleClose = () => {
     setAnchorEl(null);
@@ -25,11 +25,15 @@ const {mutate:deletePost}=useDeletePostMutation()
         <MoreVertOutlined />
       </ButtonBase>
       <Menu open={open} anchorEl={anchorEl} onClose={handleClose}>
-        <MenuItem onClick={()=>{
-          if(confirm('정말 삭제하시겠습니까?')){
-            deletePost(postId)
-          }
-          }}>삭제</MenuItem>
+        <MenuItem
+          onClick={() => {
+            if (confirm("정말 삭제하시겠습니까?")) {
+              deletePost(postId);
+            }
+          }}
+        >
+          삭제
+        </MenuItem>
         <MenuItem>수정</MenuItem>
       </Menu>
     </>

diff --git a/client/src/components/post/PostCardSkeleton.tsx b/client/src/components/post/PostCardSkeleton.tsx
@@ -0,0 +1,35 @@
+import { Box, Card, Skeleton, Stack } from "@mui/material";
+
+const PostCardSkeleton = () => {
+  return (
+    <Card sx={{ display: "flex", gap: 2, p: 2 }}>
+      <Skeleton width={40} height={40} variant="circular" />
+      <Box sx={{ flexGrow: 1 }}>
+        <Stack justifyContent="space-between" gap={2} px={0}>
+          <Stack
+            direction="row"
+            gap={1}
+            alignItems= {"center"}
+          >
+            <Skeleton width={100} />
+            <Skeleton width={80} />
+            <Skeleton width={50} />
+          </Stack>
+          <Stack>
+            <Skeleton width={'100%'} />
+            <Skeleton width={'50%'} />
+          </Stack>
+          <Skeleton width={"100%"} height={142} variant="rectangular" />
+          <Stack direction="row" justifyContent={"end"} gap={2}>
+            <Skeleton width={50} />
+            <Skeleton width={50} />
+            <Skeleton width={50} />
+            <Skeleton width={50} />
+          </Stack>
+        </Stack>
+      </Box>
+    </Card>
+  );
+};
+
+export default PostCardSkeleton;
diff --git a/client/src/components/post/PostComment.tsx b/client/src/components/post/PostComment.tsx