Refactor: home page detail

src/api/home.ts

@@ -28,7 +28,7 @@ export async function getHomeVote(set: Dispatch<React.SetStateAction<Vote | unde
       withCredentials: true,
     });
     if (fetchData.data) {
-      set(fetchData.data);
+      set(fetchData.data.data);
     }
     console.log(fetchData);
   } catch (error) {

src/components/ButtonsInAddingCandidate/AddToCandidateButton/AddToCandidateButton.tsx

@@ -1,12 +1,12 @@
 import {Button} from '@chakra-ui/react';
 import {useRecoilValue} from 'recoil';
 
-import {selectedCandidatesState} from '@/recoil/vote/candidateList';
+import {selectedPlaceState} from '@/recoil/vote/selectPlace';
 
 //prop이나 params로 trip or vote 판별, onClick에 삼항연산자로 함수 넣기
 const AddToCandidateButton = () => {
-  const selectedCandidates = useRecoilValue(selectedCandidatesState);
-  const counts = selectedCandidates.size;
+  const selectedPlaces = useRecoilValue(selectedPlaceState);
+  const counts = selectedPlaces.length;
   // const navigate = useNavigate();
 
   // const addCandidates = () => {

src/components/ButtonsInAddingCandidate/SelectButton/SelectButton.tsx

@@ -1,4 +1,4 @@
-import {useState} from 'react';
+import {useEffect, useState} from 'react';
 import {useRecoilValue} from 'recoil';
 
 import styles from './SelectButton.module.scss';
@@ -26,7 +26,14 @@ const SelectButton = ({data}: Propstype) => {
     console.log(data);
   };
 
-  console.log('선택한 배열', selectedPlaces);
+  useEffect(() => {
+    selectedPlaces.map((selectData) => {
+      if (selectData.id === data.id) {
+        setIsClicked(true);
+      }
+    });
+  }, [data]);
+
   return (
     <button
       className={`${styles.container} ${isClicked ? styles.clicked : ''}`}

src/components/Home/TripSpaceAtHome/TripSpaceItem/TripSpaceItem.module.scss

@@ -19,8 +19,6 @@
     width: 6.6rem;
     height: 100%;
 
-    padding: 26px 12px 32px 20px;
-
     border-radius: 1.6rem 0 0 1.6rem;
 
     overflow: hidden;

src/components/Home/TripSpaceAtHome/TripSpaceItem/TripSpaceItem.tsx

@@ -1,4 +1,4 @@
-import {Link} from 'react-router-dom';
+import {useNavigate} from 'react-router-dom';
 
 import styles from './TripSpaceItem.module.scss';
 
@@ -15,9 +15,16 @@ function TripSpaceItem({data}: PropsData) {
   const startDate: string = data.startDate ? setSpaceDate_DOW(data.startDate, data.endDate) : '여행 날짜를 정해주세요!';
   const imgSrc: string = data.thumbnail ? data.thumbnail : tripImg;
   const dDay = new Date(data.startDate) <= new Date() ? '여행 중' : `D - ${data.dueDate}`;
+  const navigate = useNavigate();
+
   return (
-    <Link to='/trip/1' className={styles.container}>
-      <div className={styles.img_box}>
+    <div
+      className={styles.container}
+      onClick={() => {
+        navigate(`trip/${data.id}`, {state: {id: data.id}});
+      }}
+    >
+      <div className={styles.img_box} style={{padding: data.thumbnail ? 'none' : '26px 12px 32px 20px'}}>
         <img className={styles.trip_img} src={imgSrc} alt={`${data.title}의 사진`} />
         {data.dueDate !== null && (
           <>
@@ -31,7 +38,7 @@ function TripSpaceItem({data}: PropsData) {
         <span className={styles.trip_day}>{startDate}</span>
         <span className={styles.trip_title}>{data.title}</span>
       </p>
-    </Link>
+    </div>
   );
 }
 

src/components/Home/VoteAtHome/VoteAtHome.tsx

@@ -18,9 +18,9 @@ function VoteAtHome() {
 
   return (
     <div className={styles.container}>
-      {data ? (
+      {data && data.voteResponse.length > 0 ? (
         <p className={styles.title}>
-          길동님,
+          <span className={styles.titleNull}>길동님</span>
           <br />
           진행 중인 투표가 있어요!
         </p>
@@ -32,7 +32,7 @@ function VoteAtHome() {
         </p>
       )}
 
-      {data && data?.voteResponse ? <CardHaveVote data={data} /> : <CardNull />}
+      {data && data?.voteResponse.length > 0 ? <CardHaveVote data={data} /> : <CardNull />}
     </div>
   );
 }

src/components/Home/VoteAtHome/VoteCard/CardHaveVote/CardHaveVote.tsx

@@ -8,6 +8,8 @@ import useComponentSize from '@/hooks/useComponetSize';
 
 import SlideButton from '@/components/SlideButton/SlideButton';
 
+import {setSpaceDate_DOW} from '@/utils/formatDate';
+
 import {Vote} from '@/types/home';
 
 interface PropsType {
@@ -37,13 +39,15 @@ function CardHaveVote({data}: PropsType) {
       >
         {data &&
           data.voteResponse.map((data) => {
+            const date = setSpaceDate_DOW(data.spaceInfo.startDate, data.spaceInfo.endDate);
+
             return (
               <div className={styles.vote_box} key={data.voteId}>
                 <div className={styles.contents}>
                   <div className={styles.text_box}>
                     <p className={styles.vote_title}>
-                      <span>{data.title}</span>
-                      <span>{data.title}</span>
+                      <span>{data.spaceInfo.title}</span>
+                      <span>{date}</span>
                     </p>
                     <p className={styles.discussion}>
                       <img
@@ -54,7 +58,7 @@ function CardHaveVote({data}: PropsType) {
                       <span>{data.title}</span>
                     </p>
                   </div>
-                  <Link to={'/vote/1'} className={styles.button_box}>
+                  <Link to={`/votes/${data.voteId}`} className={styles.button_box}>
                     <button>
                       투표하기
                       <p>

src/components/Route/AddPlace/AddPlace.tsx

@@ -1,30 +1,39 @@
-import { AiOutlineHeart as WishIcon } from "react-icons/ai";
-import { AiOutlineSearch as SearchIcon } from "react-icons/ai";
-import { BiTask as VoteIcon } from "react-icons/bi";
+import {AiOutlineHeart as WishIcon} from 'react-icons/ai';
+import {AiOutlineSearch as SearchIcon} from 'react-icons/ai';
+import {BiTask as VoteIcon} from 'react-icons/bi';
+import {useNavigate} from 'react-router-dom';
 
-import styles from "./AddPlace.module.scss";
+import styles from './AddPlace.module.scss';
 
 function AddPlace() {
+  const navigate = useNavigate();
+
   return (
     <>
       <div className={styles.container}>
         <h1>일정 추가하기</h1>
         <div className={styles.buttonsContainer}>
           <div className={styles.buttonContainer}>
-            <button>
-              <SearchIcon color="#979C9E" size="2.4rem" />
+            <button
+              onClick={() => {
+                navigate(
+                  `/search?keyword=없음&category=0&map=false&location=전국&sort=등록순&hot=false&placeID=여기에넣어줘요&tripDate=여기에넣어줘요`,
+                );
+              }}
+            >
+              <SearchIcon color='#979C9E' size='2.4rem' />
             </button>
             <p>장소 검색</p>
           </div>
           <div className={styles.buttonContainer}>
             <button>
-              <WishIcon color="#FF85B1" size="2.4rem" />
+              <WishIcon color='#FF85B1' size='2.4rem' />
             </button>
             <p>찜 목록 검색</p>
           </div>
           <div className={styles.buttonContainer}>
             <button>
-              <VoteIcon color="#62AAFF" size="2.4rem" />
+              <VoteIcon color='#62AAFF' size='2.4rem' />
             </button>
             <p>투표 불러오기</p>
           </div>

src/components/SearchFromHome/MapHeader/MapHeader.module.scss

@@ -1,8 +1,8 @@
-@use "@/sass" as *;
+@use '@/sass' as *;
 
 .container {
-  width: 100%;
-  height: 5.6rem;
+  width: 14rem;
+  min-height: 5.6rem;
 
   display: flex;
   align-items: center;

src/components/SearchFromHome/MapHeader/MapHeader.tsx

@@ -12,24 +12,27 @@ interface PropsType {
 }
 
 function MapHeader({forSearch, setForSearch}: PropsType) {
+  const dataName = forSearch.placeID !== 'undefined' ? '장소 검색' : forSearch.keyword;
   const navigate = useNavigate();
 
   function offMap() {
-    const before = forSearch;
-    before.map = 'false';
-    setForSearch(before);
-    navigate(
-      `/search?keyword=${forSearch.keyword}&category=${forSearch.category}&map=false&location=${forSearch.location}&sort=${forSearch.sort}&hot=${forSearch.hot}&placeID=${forSearch.placeID}&tripDate=${forSearch.tripDate}`,
-    );
+    if (forSearch.placeID !== 'undefined') {
+      history.back();
+    } else {
+      const before = forSearch;
+      before.map = 'false';
+      setForSearch(before);
+      navigate(
+        `/search?keyword=${forSearch.keyword}&category=${forSearch.category}&map=false&location=${forSearch.location}&sort=${forSearch.sort}&hot=${forSearch.hot}&placeID=${forSearch.placeID}&tripDate=${forSearch.tripDate}`,
+      );
+    }
   }
 
   return (
-    <div className={styles.container}>
-      <button onClick={offMap}>
-        <BackIcon />
-      </button>
-      <span>{forSearch.keyword}</span>
-    </div>
+    <button className={styles.container} onClick={offMap}>
+      <BackIcon />
+      <span>{dataName}</span>
+    </button>
   );
 }
 

src/components/SearchFromHome/SearchBar/SearchBar.module.scss

@@ -1,4 +1,4 @@
-@use "@/sass" as *;
+@use '@/sass' as *;
 
 @mixin icon {
   position: absolute;
@@ -23,8 +23,6 @@
   .search_container {
     position: relative;
 
-    padding: 5px 32px 8px 32px;
-
     .bottom_line {
       position: absolute;
       bottom: 0;

src/components/SearchFromHome/SearchBar/SearchBar.tsx

@@ -54,7 +54,10 @@ function SearchBar({forSearch, setForSearch}: PropsType) {
 
   return (
     <div className={styles.container}>
-      <div className={styles.search_container}>
+      <div
+        className={styles.search_container}
+        style={{padding: forSearch.placeID !== 'undefined' ? '5px 32px 8px 10px' : '5px 32px 8px 32px'}}
+      >
         <div className={styles.searchBar}>
           <input
             type='text'
@@ -70,9 +73,11 @@ function SearchBar({forSearch, setForSearch}: PropsType) {
             ref={inputBar}
           />
         </div>
-        <button className={styles.return} onClick={removeValue}>
-          <BackIcon />
-        </button>
+        {forSearch.placeID === 'undefined' && (
+          <button className={styles.return} onClick={removeValue}>
+            <BackIcon />
+          </button>
+        )}
         <button className={styles.enter} onClick={search}>
           <SearchIcon />
         </button>

src/components/SearchFromHome/SearchHome/SearchHome.module.scss

@@ -1,10 +1,12 @@
-@use "@/sass" as *;
+@use '@/sass' as *;
 
 .lists_box {
   display: flex;
   flex-direction: column;
   gap: 48px;
 
+  padding-top: 24px;
+
   -ms-overflow-style: none;
   scrollbar-width: none;
   ::-webkit-scrollbar {

src/components/SearchFromHome/SearchList/SearchList.tsx

@@ -1,5 +1,5 @@
 import {useEffect, useState} from 'react';
-import {useNavigate, useSearchParams} from 'react-router-dom';
+import {useNavigate} from 'react-router-dom';
 
 import styles from './SearchList.module.scss';
 
@@ -25,8 +25,6 @@ function SearchList({forSearch}: PropsType) {
   const [data, setData] = useState<SearchItemType[] | undefined>();
   const [filterData, setFilterData] = useState<SearchItemType[] | undefined>();
   const [categoryChange, setCategoryChange] = useState(false);
-  const [searchParams] = useSearchParams();
-  const tripspaceID = searchParams.get('tripspaceID');
   const navigate = useNavigate();
 
   useEffect(() => {
@@ -60,8 +58,14 @@ function SearchList({forSearch}: PropsType) {
   }
 
   return (
-    <div className={styles.container} style={{height: forSearch.map === 'true' ? '100%' : 'calc(100% - 72px)'}}>
-      {forSearch.hot === 'false' && <Tabs forSearch={forSearch} setCategoryChange={setCategoryChange} />}
+    <div
+      className={styles.container}
+      style={{
+        height: forSearch.map === 'true' ? '100%' : 'calc(100% - 72px)',
+        paddingTop: forSearch.placeID !== 'undefinde' ? '24px' : 0,
+      }}
+    >
+      {forSearch.hot === 'false' && <Tabs data={data} forSearch={forSearch} setCategoryChange={setCategoryChange} />}
       {forSearch.map === 'true' && filterData ? (
         <Map data={filterData} categoryChange={categoryChange} />
       ) : (
@@ -82,7 +86,7 @@ function SearchList({forSearch}: PropsType) {
               </div>
             )}
           </ul>
-          {tripspaceID ? (
+          {forSearch.placeID !== 'undefined' ? (
             <AddToCandidateButton />
           ) : (
             <button onClick={onMap}>