[JR-733] 투표 상세페이지 api 적용

apps/jurumarble/src/app/vote/[id]/components/Comment.tsx

@@ -1,4 +1,5 @@
 import { useOutsideClick, useToggle } from "@monorepo/hooks";
+import ModifyDeleteButtonBox from "app/vote/components/MenuBox";
 import Image from "next/image";
 import { ExImg1 } from "public/images";
 import React from "react";
@@ -54,20 +55,20 @@ function Comment({ comment, mutateDeleteComment, mutateLike, mutateHate }: Props
             <DivideTag /> {mbti} */}
             여 | 20대 | INTJ | 10병
           </TagBox>
-          <NickName> {nickName}</NickName>
         </Flex>
+        <NickName> {nickName}</NickName>
 
         <Contents>{content}</Contents>
         <CommentInfo>
           <div>{createdDate.slice(0, 10)}</div>・
-          <InteractionButton onClick={mutateLike}>❤️ 좋아요 {likeCount}</InteractionButton> ・
-          <InteractionButton onClick={mutateHate}>🖤 싫어요 {hateCount}</InteractionButton>{" "}
+          <InteractionButton onClick={mutateLike}>❤️ 좋아요 {likeCount ?? 0}</InteractionButton> ・
+          <InteractionButton onClick={mutateHate}>🖤 싫어요 {hateCount ?? 0}</InteractionButton>{" "}
         </CommentInfo>
       </ContentsBox>
       <div onClick={onToggleMenu} ref={targetEl}>
         <SvgIcMenu width={20} height={20} />
       </div>
-      {/* {toggleMenu && <ModifyDeleteButtonBox onDelete={onToggleWarningModal} right="20px" />} */}
+      {toggleMenu && <ModifyDeleteButtonBox onDelete={onToggleWarningModal} right="20px" />}
       {toggleWarningModal && (
         <CommentDeleteModal onToggleModal={onToggleWarningModal} onSubmit={mutateDeleteComment} />
       )}
@@ -95,7 +96,7 @@ const ContentsBox = styled.div`
 `;
 
 const Contents = styled.div`
-  padding: 8px 0 8px 0;
+  padding: 12px 0 12px 0;
   display: flex;
   align-items: center;
   ${({ theme }) => css`
@@ -127,6 +128,7 @@ const DivideTag = styled.div`
 `;
 
 const NickName = styled.div`
+  padding-top: 6px;
   font-weight: 700;
   ${({ theme }) => css`
     color: ${theme.colors.black_02};

apps/jurumarble/src/app/vote/[id]/components/CommentContainer.tsx

@@ -1,7 +1,11 @@
+import { useQueryClient } from "@tanstack/react-query";
+import { queryKeys } from "lib/queryKeys";
 import Link from "next/link";
+import { useState } from "react";
 import styled from "styled-components";
 
-import useCommentFilter from "../hooks/useCommentFilter";
+// import useCommentFilter from "../hooks/useCommentFilter";
+import useCommentServices from "../services/useCommentServices";
 
 import Comment from "./Comment";
 import CommentForm from "./CommentForm";
@@ -12,39 +16,97 @@ interface Props {
 }
 
 function CommentContainer({ postId }: Props) {
-  const { commentFilter, onChangeCommentFilter } = useCommentFilter();
+  const queryClient = useQueryClient();
+  const [sortBy, setSortBy] = useState<"ByTime" | "ByPopularity">("ByTime");
+  const onChangeFilter = (sort: "ByTime" | "ByPopularity") => {
+    setSortBy(sort);
+  };
+
+  // const { commentFilter, onChangeCommentFilter } = useCommentFilter();
+  const { comments, isError, isLoading, mutateHate, mutateLike, mutateComment } =
+    useCommentServices(postId, sortBy, "votes");
+
+  const [commentForm, setCommentForm] = useState("");
+  const onChangeCommentForm = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setCommentForm(e.target.value);
+  };
+  const onSubmitComment = () => {
+    mutateComment(
+      {
+        content: commentForm,
+        parentId: null,
+      },
+      {
+        onSuccess: () => {
+          queryClient.invalidateQueries([queryKeys.DETAIL_COMMENT_LIST]);
+          setCommentForm("");
+        },
+      },
+    );
+  };
+
+  if (isError) return <div>에러</div>;
+  if (!comments) return <div>데이터 없음</div>;
+
+  const commentList = comments.pages.flatMap((page) => page.content);
+
   return (
-    <Container>
-      <CommentToolBar commentCount={65} onChangeFilter={onChangeCommentFilter} />
-      {/* <CommentForm
-        commentForm={commentForm}
-        onChangeCommentForm={onChangeCommentForm}
-        onSubmitComment={onSubmitComment}
-        profileImage={userInfo?.imageUrl}
-      /> */}
-      <CommentForm />
-      <Comment
-        comment={{
-          id: 1,
-          content: "댓글 내용",
-          age: 1,
-          createdDate: "21.07.07",
-          gender: "댓글 내용",
-          hateCount: 1,
-          imageUrl: "댓글 내용",
-          likeCount: 1,
-          mbti: "댓글 내용",
-          nickName: "댓글 내용",
-          parentId: 1,
-          userId: 1,
-        }}
-        mutateDeleteComment={() => void 0}
-        mutateLike={() => void 0}
-        mutateHate={() => void 0}
-        key={`comment_id`}
-      />
-      <hr />
-    </Container>
+    <>
+      <Container>
+        <CommentToolBar
+          commentCount={comments.pages[0].numberOfElements}
+          onChangeFilter={onChangeFilter}
+          sortBy={sortBy}
+        />
+        <CommentForm
+          commentForm={commentForm}
+          onChangeCommentForm={onChangeCommentForm}
+          onSubmitComment={onSubmitComment}
+        />
+
+        {!isLoading &&
+          commentList.map(
+            (
+              {
+                id,
+                age,
+                content,
+                createdDate,
+                gender,
+                hateCount,
+                imageUrlstring,
+                likeCount,
+                mbti,
+                nickName,
+                userId,
+              },
+              index,
+            ) => (
+              <Comment
+                comment={{
+                  id,
+                  content,
+                  age,
+                  createdDate,
+                  gender,
+                  hateCount,
+                  imageUrlstring,
+                  likeCount,
+                  mbti,
+                  nickName,
+                  userId: userId,
+                }}
+                mutateDeleteComment={() => void 0}
+                mutateLike={() => mutateLike(id)}
+                mutateHate={() => mutateHate(id)}
+                key={`comment_id_${index}`}
+              />
+            ),
+          )}
+        <br />
+      </Container>
+      <BgContainer />
+    </>
   );
 }
 
@@ -55,21 +117,11 @@ const Container = styled.div`
   gap: 16px;
 `;
 
-const DetailButton = styled.button`
-  position: absolute;
-  bottom: -50px;
-  right: 50%;
-  transform: translateX(50%);
-`;
-
-const DetailButtonInner = styled.div`
+const BgContainer = styled.div`
+  background-color: ${({ theme }) => theme.colors.bg_02};
   width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 7px;
-  padding-right: 4px;
-  font-size: 14px;
+  height: 76px;
+  padding-bottom: 50px;
 `;
 
 export default CommentContainer;

apps/jurumarble/src/app/vote/[id]/components/CommentForm.tsx

@@ -4,22 +4,22 @@ import { ExImg1 } from "public/images";
 import React from "react";
 import styled, { css } from "styled-components";
 
-interface Props {}
+interface Props {
+  commentForm: string;
+  onChangeCommentForm(e: React.ChangeEvent<HTMLInputElement>): void;
+  onSubmitComment(): void;
+}
 
-function CommentForm() {
+function CommentForm({ commentForm, onChangeCommentForm, onSubmitComment }: Props) {
   const onSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
-    // onSubmitComment();
+    onSubmitComment();
   };
 
   return (
     <Container>
       <Form onSubmit={onSubmit}>
-        <Input
-          placeholder="댓글을 남겨주세요"
-          //   value={commentForm.content}
-          //   onChange={onChangeCommentForm}
-        />
+        <Input placeholder="댓글을 남겨주세요" value={commentForm} onChange={onChangeCommentForm} />
         <SubmitButton type="submit">등록</SubmitButton>
       </Form>
     </Container>

apps/jurumarble/src/app/vote/[id]/components/CommentToolbar.tsx

@@ -3,23 +3,24 @@ import styled, { css } from "styled-components";
 
 interface Props {
   commentCount: number;
-  sortBy?: string;
-  onChangeFilter: (sort: string) => void;
+  sortBy: "ByTime" | "ByPopularity";
+  onChangeFilter: (sort: "ByTime" | "ByPopularity") => void;
 }
 
 function CommentToolBar({ commentCount, onChangeFilter, sortBy }: Props) {
+  console.log("sortBy", sortBy);
   return (
     <Container>
       <Title>
         댓글 <span className="point">{commentCount}</span>
       </Title>
       <ButtonGroup>
-        <Button onClick={() => onChangeFilter("인기순")} bold={sortBy === "인기순"}>
-          인기순
+        <Button onClick={() => onChangeFilter("ByTime")} bold={sortBy === "ByTime"}>
+          최신순
         </Button>
         <Divider />
-        <Button onClick={() => onChangeFilter("최신순")} bold={sortBy === "최신순"}>
-          최신순
+        <Button onClick={() => onChangeFilter("ByPopularity")} bold={sortBy === "ByPopularity"}>
+          인기순
         </Button>
       </ButtonGroup>
     </Container>

apps/jurumarble/src/app/vote/[id]/components/VoteDescription.tsx

@@ -1,7 +1,10 @@
+import { postExecuteVote } from "lib/apis/vote";
 import Image, { StaticImageData } from "next/image";
+import { useParams } from "next/navigation";
 import React from "react";
 import SvgIcPrev from "src/assets/icons/components/IcPrev";
 import styled, { css } from "styled-components";
+import useExecuteVoteService from "../services/useExecuteVoteService";
 
 type AorB = "A" | "B";
 type ActiveType = "active" | "inactive" | null;
@@ -32,6 +35,9 @@ function VoteDescription({
   totalCountB,
   onMutateVoting,
 }: Props) {
+  const params = useParams();
+  console.log(select);
+
   const getAB = (direction: Direction) => {
     return direction === "left" ? "A" : "B";
   };
@@ -57,9 +63,12 @@ function VoteDescription({
           <Image
             src={imageA}
             alt="A 이미지"
-            fill
+            width={160}
+            height={160}
             style={{
-              maxWidth: "720px",
+              objectFit: "cover",
+              width: "auto",
+              height: "100%",
             }}
           />
           <div className="overlay">
@@ -75,7 +84,17 @@ function VoteDescription({
           onClick={() => onClickVote("B")}
           percent={percentageB > 0 ? percentageB : 0}
         >
-          <Image src={imageB} alt="B 이미지" fill />
+          <Image
+            src={imageB}
+            alt="B 이미지"
+            width={160}
+            height={160}
+            style={{
+              objectFit: "cover",
+              width: "auto",
+              height: "100%",
+            }}
+          />
           <div className="overlay">
             <OverLayTitle>{titleB}</OverLayTitle>
             <OverlayPercent>{percentageB}%</OverlayPercent>
@@ -93,7 +112,9 @@ function VoteDescription({
   );
 }
 
-const Container = styled.div``;
+const Container = styled.div`
+  overflow: hidden;
+`;
 
 const ImageWrapper = styled.div`
   position: relative;
@@ -126,13 +147,15 @@ const FlexRow = styled.div`
 const variantStyles = {
   active: css`
     transition: all 0.3s ease-in-out;
-    width: 100%;
+    width: 90%;
     font-size: 16px;
     font-weight: 700;
     padding: 0 1px;
+    pointer-events: none;
   `,
   inactive: css`
-    width: 0%;
+    width: 10%;
+    pointer-events: none;
   `,
 };
 
@@ -147,6 +170,7 @@ const LeftVote = styled.div<{ selected: ActiveType; percent: number }>`
   aspect-ratio: 1;
   max-height: 300px;
   display: flex;
+  transition: all 0.3s ease-in-out;
   justify-content: center;
   .overlay {
     position: absolute;
@@ -164,6 +188,7 @@ const LeftVote = styled.div<{ selected: ActiveType; percent: number }>`
     background: rgba(250, 94, 45, 0.7);
     border-radius: 10px;
     border: 2px solid #ff4a16;
+
     ${({ selected, percent }) =>
       selected === "active" &&
       css`
@@ -172,6 +197,9 @@ const LeftVote = styled.div<{ selected: ActiveType; percent: number }>`
       `};
   }
   ${({ selected }) => typeGuardVariantStyle(selected)}
+  &:hover {
+    width: 90%;
+  }
 `;
 
 const RightVote = styled(LeftVote)`