댓글-불러오기,등록-기능-연결 (#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