Feat: connect POST API

src/api/detail.ts

@@ -1,4 +1,4 @@
-import {MySpaces, PlacesNearby, Reviews, ReviewsRating, Wishes, placeInfoData} from '@/types/detail';
+import {MySpaces, PlacesNearby, PostReview, Reviews, ReviewsRating, Wishes, placeInfoData} from '@/types/detail';
 import axios from 'axios';
 
 // --------------------------- GET ---------------------------
@@ -93,6 +93,22 @@ export const postWishes = async ({placeId, contentTypeId}: Wishes) => {
   }
 };
 
+export const postReview = async ({placeId, contentTypeId, title, rating, content, images, visitedAt}: PostReview) => {
+  try {
+    const response = await axios.post(
+      '/api/reviews',
+      {placeId, contentTypeId, title, rating, content, images, visitedAt},
+      {
+        withCredentials: true,
+      },
+    );
+    console.log('axios 포스트 성공', response);
+    return response.data;
+  } catch (error) {
+    console.error(error);
+  }
+};
+
 // --------------------------- DELETE ---------------------------
 
 export const deleteWishes = async (id: number) => {

src/api/vote.ts

@@ -53,7 +53,9 @@ export const postVoting = async ({voteId, candidateId}: PostVotingProps) => {
 
 //후보 메모 후 추가
 export const postNewCandidate = async ({voteId, candidateInfos}: PostNewCandidateProps) => {
-  const response = await axios.post(`/api/votes/${voteId}/candidates`, {params: {candidateInfos}});
+  const response = await axios.post(`/api/votes/${voteId}/candidates`, {
+    candidateInfos,
+  });
   return response.data;
 };
 

src/components/Detail/BottomFixedBtn/RegistrationSlide/RegistrationListItem/RegistrationListItem.tsx

@@ -1,38 +1,67 @@
-import { useState } from "react";
-import { IoMdCheckmark } from "react-icons/io";
-import { useRecoilState } from "recoil";
+import {useState} from 'react';
+import {IoMdCheckmark} from 'react-icons/io';
+import {useRecoilState} from 'recoil';
 
-import styles from "./RegistrationListItem.module.scss";
+import styles from './RegistrationListItem.module.scss';
 
-import { isRegistrationSelectedState } from "@/recoil/detail/detail";
+import {isRegistrationSelectedState} from '@/recoil/detail/detail';
 
-import { RegistrationListItemProps } from "@/types/detail";
+import {RegistrationListItemProps} from '@/types/detail';
+import {useGetVotesInfo} from '@/hooks/Votes/vote';
+
+interface LatLng {
+  lat: number;
+  lng: number;
+}
+
+interface PlaceInfo {
+  placeId: number;
+  placeName: string;
+  category: string;
+  placeImageUrl: string;
+  latLng: LatLng;
+}
+
+interface CreatedBy {
+  id: number;
+  nickName: string;
+  profileImageUrl: string;
+}
+
+interface Candidate {
+  id: number;
+  placeInfo: PlaceInfo;
+  createdBy: CreatedBy;
+  tagline: string;
+  amIVote: boolean;
+}
 
 // 투표리스트 item id값으로 title을 대체해야 함
-function RegistrationListItem({
-  title,
-  isSelectedProps,
-}: RegistrationListItemProps) {
-  const [isValuedArray, setIsValuedArray] = useRecoilState<string[]>(
-    isRegistrationSelectedState,
-  );
-  const [isSelected, setIsSelected] = useState<boolean>(
-    isValuedArray.includes(title),
-  );
+function RegistrationListItem({voteId, placeId, title}: RegistrationListItemProps) {
+  const [isValuedArray, setIsValuedArray] = useRecoilState<number[]>(isRegistrationSelectedState);
+  const [isSelected, setIsSelected] = useState<boolean>(isValuedArray.includes(voteId));
+
+  const data = useGetVotesInfo(voteId);
+
+  const voteInfo = data?.data?.data;
+
+  const voteCandidate: Candidate[] = voteInfo?.candidates;
+
+  console.log(voteCandidate, 'voteCandidates');
+
+  const checkCandidate = voteCandidate ? voteCandidate.filter((data: any) => data.placeInfo.placeId === placeId) : [];
 
   return (
     <div
-      className={`${styles.container} ${
-        !isSelectedProps && isSelected ? styles.selected : ""
-      }
-      ${isSelectedProps ? styles.isSelectedProps : ""}`}
+      className={`${styles.container} ${checkCandidate.length === 0 && isSelected ? styles.selected : ''}
+      ${checkCandidate.length > 0 ? styles.isSelectedProps : ''}`}
       onClick={() => {
-        if (!isSelectedProps) {
-          if (!isValuedArray.includes(title)) {
-            setIsValuedArray([...isValuedArray, title]);
+        if (checkCandidate.length === 0) {
+          if (!isValuedArray.includes(voteId)) {
+            setIsValuedArray([...isValuedArray, voteId]);
           } else {
             const arr = [...isValuedArray];
-            arr.splice(isValuedArray.indexOf(title), 1);
+            arr.splice(isValuedArray.indexOf(voteId), 1);
 
             setIsValuedArray([...arr]);
           }
@@ -42,10 +71,10 @@ function RegistrationListItem({
       }}
     >
       <span>{title}</span>
-      {isSelectedProps ? (
+      {checkCandidate.length > 0 ? (
         <span className={styles.container__isSelected}>이미 등록됨</span>
       ) : (
-        <IoMdCheckmark fontSize="2.4rem" />
+        <IoMdCheckmark fontSize='2.4rem' />
       )}
     </div>
   );

src/components/Detail/BottomFixedBtn/RegistrationSlide/RegistrationModal/RegistrationModal.tsx

@@ -8,19 +8,26 @@ import {
   ModalCloseButton,
   ModalContent,
   ModalOverlay,
-} from "@chakra-ui/react";
-import { useState } from "react";
+} from '@chakra-ui/react';
+import {useState} from 'react';
 
-import styles from "./RegistrationModal.module.scss";
+import styles from './RegistrationModal.module.scss';
+import {usePostNewVote} from '@/hooks/Votes/vote';
+import CustomToast from '@/components/CustomToast/CustomToast';
 
 // 공백 제외 1글자 조건문 추가
 interface RegistrationMoalProps {
+  spaceId: number;
   isOpen: boolean;
   onClose: () => void;
 }
 
-const RegistrationModal = ({ isOpen, onClose }: RegistrationMoalProps) => {
-  const [voteName, setVoteName] = useState<string>("");
+const RegistrationModal = ({spaceId, isOpen, onClose}: RegistrationMoalProps) => {
+  const [voteName, setVoteName] = useState<string>('');
+
+  const toast = CustomToast();
+
+  const postNewVote = usePostNewVote();
 
   const handleSetValue = (e: React.ChangeEvent<HTMLInputElement>) => {
     const inputValue = e.target.value;
@@ -30,50 +37,53 @@ const RegistrationModal = ({ isOpen, onClose }: RegistrationMoalProps) => {
     }
   };
 
+  const handleCreateVote = async () => {
+    const res = postNewVote.mutateAsync({spaceId, title: voteName});
+    console.log('response', res);
+  };
+
   return (
-    <Modal isOpen={isOpen} onClose={onClose} size="addVote">
+    <Modal isOpen={isOpen} onClose={onClose} size='addVote'>
       <ModalOverlay />
-      <ModalContent
-        px="24px"
-        py="40px"
-        borderRadius="16px"
-        alignSelf="center"
-        boxSizing="border-box"
-      >
-        <ModalCloseButton fontSize="2rem" mt="16px" mr="20px" />
+      <ModalContent px='24px' py='40px' borderRadius='16px' alignSelf='center' boxSizing='border-box'>
+        <ModalCloseButton fontSize='2rem' mt='16px' mr='20px' />
 
-        <ModalBody p="0">
+        <ModalBody p='0'>
           <p className={styles.title}>투표 제목을 정해주세요</p>
 
-          <FormControl justifyContent={"center"}>
+          <FormControl justifyContent={'center'}>
             <Input
               onChange={(e) => handleSetValue(e)}
               value={voteName}
-              borderColor="neutral.800"
-              focusBorderColor="primary.300"
-              variant="flushed"
-              placeholder=" 숙소 정하자, 카페 정하자"
-              fontSize="subTitle"
-              mt="32px"
+              borderColor='neutral.800'
+              focusBorderColor='primary.300'
+              variant='flushed'
+              placeholder=' 숙소 정하자, 카페 정하자'
+              fontSize='subTitle'
+              mt='32px'
             />
             <FormLabel
-              display="flex"
-              justifyContent="flex-end"
-              fontSize="captionMedium"
-              fontWeight="captionMedium"
-              mt="4px"
-              mr="-1px"
+              display='flex'
+              justifyContent='flex-end'
+              fontSize='captionMedium'
+              fontWeight='captionMedium'
+              mt='4px'
+              mr='-1px'
             >
               {voteName.length}/15자
             </FormLabel>
           </FormControl>
           <Button
-            type="submit"
-            onClick={() => {}}
-            variant="blueButton"
-            w="100%"
-            h="48px"
-            mt="24px"
+            type='submit'
+            onClick={() => {
+              handleCreateVote();
+              toast('투표가 생성되었습니다.');
+              onClose();
+            }}
+            variant='blueButton'
+            w='100%'
+            h='48px'
+            mt='24px'
             isDisabled={voteName.length === 0}
           >
             완료

src/components/Detail/BottomFixedBtn/RegistrationSlide/RegistrationSlide.module.scss

@@ -1,4 +1,4 @@
-@use "@/sass" as *;
+@use '@/sass' as *;
 
 .container {
   z-index: 4;
@@ -61,6 +61,14 @@
     flex-direction: column;
 
     gap: 8px;
+
+    width: 100%;
+    max-height: 30rem;
+
+    overflow-y: scroll;
+    &::-webkit-scrollbar {
+      display: none; /* Chrome, Safari, Opera*/
+    }
   }
 
   &__voteNotValued {