Merge pull request #75 from TeamPiickle/feat/#63-mock_api_category

Feat/#63 mock api category
TeamPiickle · Jul 19, 2022 · a62c710 · a62c710
2 parents eb00cf1 + 65930eb
commit a62c710
Show file tree

Hide file tree

Showing 7 changed files with 109 additions and 56 deletions.
diff --git a/src/components/CardCollection/LoginModal/index.tsx b/src/components/CardCollection/LoginModal/index.tsx
@@ -4,16 +4,16 @@ import { St } from "./style";
 
 interface LoginCheckProps {
   closeHandler: () => void;
+  contents: string;
 }
-
 export default function LoginModal(props: LoginCheckProps) {
-  const { closeHandler } = props;
+  const { closeHandler, contents } = props;
   return (
     <Modal closeHandler={closeHandler}>
       <St.Container>
         <St.Wrapper>
           <IcGrayHeart />
-          <St.ModalContents>로그인을 하시면 북마크 기능인 마이피클을 이용할 수 있어요!</St.ModalContents>
+          <St.ModalContents>로그인을 하시면 {contents} 이용할 수 있어요!</St.ModalContents>
         </St.Wrapper>
         <St.Buttons>
           <St.Button type="button">

diff --git a/src/components/CardCollection/index.tsx b/src/components/CardCollection/index.tsx
@@ -48,7 +48,7 @@ export default function CardCollection() {
         cardsTypeLoaction={cardsTypeLoaction}
       />
 
-      {isLoginOpened && <LoginModal closeHandler={closeLoginModal} />}
+      {isLoginOpened && <LoginModal closeHandler={closeLoginModal} contents={"북마크기능인 마이피클을"} />}
       {isOpened && <FilterModal typeLocation={cardsTypeLoaction.type} closeHandler={closeModal} />}
     </St.MainPage>
   );

diff --git a/src/components/Vote/AfterVoteList/index.tsx b/src/components/Vote/AfterVoteList/index.tsx
@@ -2,31 +2,46 @@ import { IcCheck1 } from "../../../asset/icon";
 import { voteContent } from "../../../core/vote/voteContent";
 import { St } from "./style";
 
-export default function AfterVoteList(props: any) {
-  const { setIsVoted, setIsSuccess, currentIndex } = props;
+interface AfterVoteListProps = {
+  setIsVoted: React.Dispatch<React.SetStateAction<boolean>>;
+  setIsSuccess: React.Dispatch<React.SetStateAction<boolean>>;
+  currentIndex: number;
+  ballotTopic: any;
+  setIsPosted: React.Dispatch<React.SetStateAction<boolean>>;
+};
+export default function AfterVoteList(props: AfterVoteListProps) {
+  const { setIsVoted, setIsSuccess, currentIndex, ballotTopic, setIsPosted } = props;
   const cancelVote = () => {
     setIsSuccess(false);
     setIsVoted(false);
+    setIsPosted(true);
+    handlePost();
   };
+
+  const handlePost = () => {
+    real.postVote(ballotTopic?.data.ballotTopic._id, ballotTopic?.data.userSelect.ballotItemId);
+  };
+
   return (
     <>
       <St.VoteOptionContainer>
-        {voteContent.map((element) => {
-          return (
-            <St.VoteOptionList key={element.id}>
-              <St.VotedDescription>
-                <St.IconTextContainer>
-                  {currentIndex === element.id && <IcCheck1 />}
-                  <St.VoteOptionText isSelected={element.id === currentIndex}>{element.name}</St.VoteOptionText>
-                </St.IconTextContainer>
-                <St.VotedPercent>65.6%</St.VotedPercent>
-              </St.VotedDescription>
-              <St.VotedProgressBarContainer isSelected={element.id === currentIndex}>
-                <St.VotedProgressBar isSelected={element.id === currentIndex} />
-              </St.VotedProgressBarContainer>
-            </St.VoteOptionList>
-          );
-        })}
+        {ballotTopic &&
+          ballotTopic.data.ballotItems.map((element: any) => {
+            return (
+              <St.VoteOptionList key={element._id}>
+                <St.VotedDescription>
+                  <St.IconTextContainer>
+                    {currentIndex === element._id && <IcCheck1 />}
+                    <St.VoteOptionText isSelected={element._id === currentIndex}>{element.content}</St.VoteOptionText>
+                  </St.IconTextContainer>
+                  <St.VotedPercent>{element.status}%</St.VotedPercent>
+                </St.VotedDescription>
+                <St.VotedProgressBarContainer isSelected={element._id === currentIndex}>
+                  <St.VotedProgressBar width={element.status} isSelected={element._id === currentIndex} />
+                </St.VotedProgressBarContainer>
+              </St.VoteOptionList>
+            );
+          })}
       </St.VoteOptionContainer>
       <St.VoteBtnContainer>
         <St.VoteBtn onClick={cancelVote}>재투표하기</St.VoteBtn>

diff --git a/src/components/Vote/AfterVoteList/style.ts b/src/components/Vote/AfterVoteList/style.ts
@@ -62,9 +62,9 @@ export const St = {
     overflow: hidden;
   `,
 
-  VotedProgressBar: styled.div<{ isSelected: boolean }>`
+  VotedProgressBar: styled.div<{ isSelected: boolean; width: number }>`
     height: 1rem;
-    width: 65%;
+    width: ${({ width }) => (width ? `${width}%` : 0)};
 
     background-color: ${({ theme, isSelected }) => (isSelected ? theme.colors.green : theme.colors.sub_green1)};
     opacity: 1;

diff --git a/src/components/Vote/BeforeVoteList/index.tsx b/src/components/Vote/BeforeVoteList/index.tsx
@@ -1,24 +1,33 @@
 import { useEffect, useState } from "react";
 
 import { IcCheck2 } from "../../../asset/icon";
-import useBallotTopic from "../../../core/api/vote";
-import { voteContent } from "../../../core/vote/voteContent";
+import useBallotTopic, { real } from "../../../core/api/vote";
+import LoginModal from "../../CardCollection/LoginModal";
 import { St } from "./style";
+interface BeforeVoteListProps {
+  isVoted: boolean;
+  setIsVoted: React.Dispatch<React.SetStateAction<boolean>>;
+  setIsSuccess: React.Dispatch<React.SetStateAction<boolean>>;
+  setSelectedOption: React.Dispatch<React.SetStateAction<number | null>>;
+  setCurrentIndex: React.Dispatch<React.SetStateAction<number>>;
+  currentIndex: number;
+  isPosted: boolean;
+  LOGIN_STATE: boolean;
+}
 
-export default function BeforeVoteList(props: any) {
-  const { isVoted, setIsVoted, setIsSuccess, setSelectedOption, currentIndex, setCurrentIndex } = props;
-  // const { ballotTopic, isLoading, isError } = useBallotTopic("투표id");
-  const successVote = () => {
-    if (isVoted === true) {
+export default function BeforeVoteList(props: BeforeVoteListProps) {
+  const { isVoted, setIsVoted, setIsSuccess, setSelectedOption, currentIndex, setCurrentIndex, isPosted, LOGIN_STATE } =
+    props;
+  const { ballotTopic, isLoading, isError } = useBallotTopic("투표id");
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  useEffect(() => {
+    if (ballotTopic?.data.userSelect.ballotItemId !== "" && isPosted === false) {
       setIsSuccess(true);
-      setSelectedOption(currentIndex);
+      setCurrentIndex(ballotTopic?.data.userSelect.ballotItemId);
     }
-  };
-  // useEffect(() => {
-  //   console.log(ballotTopic);
-  // }, [ballotTopic]);
+  }, []);
 
-  //함수단위 쪼개기
   const clickHandle = (key: number) => {
     if (isVoted === true) {
       if (currentIndex === key) {
@@ -30,14 +39,39 @@ export default function BeforeVoteList(props: any) {
       setCurrentIndex(key);
     }
   };
+
+  const successVote = () => {
+    if (LOGIN_STATE === false) {
+      setIsModalOpen(true);
+    } else {
+      if (isVoted === true) {
+        setIsSuccess(true);
+        setSelectedOption(currentIndex);
+        handlePost();
+      }
+    }
+  };
+
+  const handlePost = () => {
+    real.postVote(ballotTopic?.data.ballotTopic._id, ballotTopic?.data.userSelect.ballotItemId);
+  };
+
+  const closeLoginModal = () => {
+    setIsModalOpen(false);
+  };
+
   return (
     <>
       <St.VoteOptionContainer>
-        {voteContent &&
-          voteContent.map((element: any, i: number) => {
+        {ballotTopic &&
+          ballotTopic.data.ballotItems.map((element: any) => {
+            // 이부분에 element 타입을 어떻게 지정해줘야할지 몰라서 피알 올리고 고민해볼께요!
             return (
-              <St.VoteOptionList key={i} onClick={() => clickHandle(i)} isClicked={isVoted && i === currentIndex}>
-                <St.VoteOptionText>{element.name}</St.VoteOptionText>
+              <St.VoteOptionList
+                key={element._id}
+                onClick={() => clickHandle(element._id)}
+                isClicked={isVoted && element._id === currentIndex}>
+                <St.VoteOptionText>{element.content}</St.VoteOptionText>
                 <IcCheck2 />
               </St.VoteOptionList>
             );
@@ -46,6 +80,7 @@ export default function BeforeVoteList(props: any) {
       <St.VoteBtnContainer>
         <St.VoteBtn onClick={successVote}>투표하기</St.VoteBtn>
       </St.VoteBtnContainer>
+      {isModalOpen && <LoginModal closeHandler={closeLoginModal} contents={"투표기능인 피클미를"} />}
     </>
   );
 }
diff --git a/src/components/Vote/VoteContent/index.tsx b/src/components/Vote/VoteContent/index.tsx
@@ -18,33 +18,32 @@ export default function VoteContent() {
 
   const [isVoted, setIsVoted] = useState(false);
   const [isSuccess, setIsSuccess] = useState(false);
-  const [selectedOption, setSelectedOption] = useState<IseledtedOptions | null>(null);
+  const [selectedOption, setSelectedOption] = useState<number | null>(null);
   const [currentIndex, setCurrentIndex] = useState(0);
+  const [isPosted, setIsPosted] = useState(true);
+  const LOGIN_STATE = localStorage.getItem("piickle-token") ? true : false;
 
   return (
     <St.VoteContentContainer>
-      <St.VoteContentTitle>
-        민초 vs 반민초 <br />
-        여러분의 의견은?
-      </St.VoteContentTitle>
-      {isSuccess ? (
+      <St.VoteContentTitle>{ballotTopic && ballotTopic.data.ballotTopic.ballotTopicContent}</St.VoteContentTitle>
+      {ballotTopic && isSuccess ? (
         <AfterVoteList
           setIsVoted={setIsVoted}
           setIsSuccess={setIsSuccess}
-          selectedOption={selectedOption}
-          setSelectedOption={setSelectedOption}
           currentIndex={currentIndex}
-          setCurrentIndex={setCurrentIndex}
+          ballotTopic={ballotTopic}
+          setIsPosted={setIsPosted}
         />
       ) : (
         <BeforeVoteList
           isVoted={isVoted}
           setIsVoted={setIsVoted}
           setIsSuccess={setIsSuccess}
-          selectedOption={selectedOption}
           setSelectedOption={setSelectedOption}
           currentIndex={currentIndex}
           setCurrentIndex={setCurrentIndex}
+          isPosted={isPosted}
+          LOGIN_STATE={LOGIN_STATE}
         />
       )}
     </St.VoteContentContainer>

diff --git a/src/mocks/handlers/ballots.ts b/src/mocks/handlers/ballots.ts
@@ -35,24 +35,28 @@ export const ballotsHandler = [
 
   rest.get(`${process.env.REACT_APP_BASE_URL}${PATH.BALLOTS}/:ballotTopicId`, (req, res, ctx) => {
     const { ballotTopicId } = req.params;
-    const isLoginNVoted = false;
+    const isLoginNVoted = true;
 
     let data = {};
     if (isLoginNVoted) {
       data = {
+        ballotTopic: {
+          _id: "62cff6135b1e11673a0a876f",
+          ballotTopicContent: "민초는 맛있나!",
+        },
         ballotItems: [
           {
-            _id: "어쩌구저ㄱ쩌구",
+            _id: "62cff6585b1e11673a0a8776",
             status: 50,
-            name: "호",
+            content: "호",
           },
           {
-            _id: "ㅁㄴㅇㅁㄴㅇ",
+            _id: "62cff6585b1e11673a0a8777",
             status: 30,
             content: "불",
           },
           {
-            _id: "ㅁㄴㅇㅁㄴㅇ1",
+            _id: "62cff6585b1e11673a0a8778",
             status: 20,
             content: "중",
           },