From e523faa2ff623a0b7c5999edd206c9070404bd61 Mon Sep 17 00:00:00 2001 From: Yamyam-code Date: Sun, 28 Jan 2024 08:24:00 +0900 Subject: [PATCH 1/2] Fix: sort filter fix padding --- .../Home/TripSpaceAtHome/TripSpaceAtHome.tsx | 9 +++--- src/components/Home/VoteAtHome/VoteAtHome.tsx | 6 ++-- .../DateFilter/DateFilter.module.scss | 30 ++++++++++--------- .../SearchList/DateFilter/DateFilter.tsx | 13 +++++--- .../SearchFromHome/SearchList/SearchList.tsx | 2 -- src/components/VoteMemo/MemoItem/MemoItem.tsx | 4 ++- 6 files changed, 37 insertions(+), 27 deletions(-) diff --git a/src/components/Home/TripSpaceAtHome/TripSpaceAtHome.tsx b/src/components/Home/TripSpaceAtHome/TripSpaceAtHome.tsx index 7879e8f0..23905cd7 100644 --- a/src/components/Home/TripSpaceAtHome/TripSpaceAtHome.tsx +++ b/src/components/Home/TripSpaceAtHome/TripSpaceAtHome.tsx @@ -1,4 +1,5 @@ import {useEffect, useState} from 'react'; +import {Cookies} from 'react-cookie'; import styles from './TripSpaceAtHome.module.scss'; @@ -17,13 +18,13 @@ function TripSpaceAtHome() { const [data, setData] = useState(); const [slideLocation, setSlideLocation] = useState(0); const [componentRef, size] = useComponentSize(); + const cookie = new Cookies().get('isLogin'); useEffect(() => { - getHomeTripSpace(setData); + if (cookie) { + getHomeTripSpace(setData); + } }, []); - useEffect(() => { - console.log(data); - }, [data]); return (
diff --git a/src/components/Home/VoteAtHome/VoteAtHome.tsx b/src/components/Home/VoteAtHome/VoteAtHome.tsx index f33b1bbe..c76ee967 100644 --- a/src/components/Home/VoteAtHome/VoteAtHome.tsx +++ b/src/components/Home/VoteAtHome/VoteAtHome.tsx @@ -1,4 +1,5 @@ import {useEffect, useState} from 'react'; +import {Cookies} from 'react-cookie'; import styles from './VoteAtHome.module.scss'; @@ -13,13 +14,14 @@ import {Vote} from '@/types/home'; function VoteAtHome() { const [data, setData] = useState(); + const cookie = new Cookies().get('isLogin'); const userData = useGetMyInfo(true).data?.data.nickname; useEffect(() => { - if (userData) { + if (cookie) { getHomeVote(setData); } - }, [userData]); + }, []); return (
diff --git a/src/components/SearchFromHome/SearchList/DateFilter/DateFilter.module.scss b/src/components/SearchFromHome/SearchList/DateFilter/DateFilter.module.scss index 94ee7e41..a6ec29b0 100644 --- a/src/components/SearchFromHome/SearchList/DateFilter/DateFilter.module.scss +++ b/src/components/SearchFromHome/SearchList/DateFilter/DateFilter.module.scss @@ -3,20 +3,20 @@ .container { position: relative; - height: 2.4rem; - - display: flex; - align-items: center; + @include typography(button); + .button { + height: 2.4rem; - padding: 4px 8px; + display: flex; + align-items: center; - cursor: pointer; + padding: 4px 8px; - @include typography(button); - - .icon { - width: 2.4rem; - height: 2.4rem; + cursor: pointer; + .icon { + width: 2.4rem; + height: 2.4rem; + } } .modal { @@ -30,8 +30,6 @@ flex-direction: column; justify-content: space-between; - padding: 20px 32px; - border-radius: 16px; background-color: $neutral0; @@ -42,6 +40,10 @@ overflow: hidden; - transition: 0.5s all; + box-sizing: border-box; + + transition: + 0.5s opacity, + 0.5s height; } } diff --git a/src/components/SearchFromHome/SearchList/DateFilter/DateFilter.tsx b/src/components/SearchFromHome/SearchList/DateFilter/DateFilter.tsx index 50134c90..d230c1dd 100644 --- a/src/components/SearchFromHome/SearchList/DateFilter/DateFilter.tsx +++ b/src/components/SearchFromHome/SearchList/DateFilter/DateFilter.tsx @@ -40,10 +40,15 @@ function DateFilter({forSearch = undefined, wishesFilter = undefined}: PropsType }, [forSearch?.sort]); return ( -
- - {sort} -
+
+

+ + {sort} +

+
{filterData.map((data) => ( { - console.log(data); - if (data) { if (forSearch.category !== 0) { const filterData: SearchItemType[][] = []; diff --git a/src/components/VoteMemo/MemoItem/MemoItem.tsx b/src/components/VoteMemo/MemoItem/MemoItem.tsx index 60be5ff6..e5a43d46 100644 --- a/src/components/VoteMemo/MemoItem/MemoItem.tsx +++ b/src/components/VoteMemo/MemoItem/MemoItem.tsx @@ -7,6 +7,7 @@ import {useDebounce} from '@/hooks/useDebounce'; import useGetSelectedArray from '@/hooks/useGetSelectedArray'; import {selectedTaglineState} from '@/recoil/vote/voteMemo'; +import titleCaseChange from '@/utils/titleCaseChange'; import {MemoItemProps} from '@/types/vote'; @@ -14,6 +15,7 @@ const MemoItem = ({place, existingTagline}: MemoItemProps) => { const [text, setText] = useState(''); const {toggleItemInNewArray, setMemoArray} = useGetSelectedArray(selectedTaglineState); const debouncedText = useDebounce(text, 500); + const title = titleCaseChange(place.title); useEffect(() => { if (existingTagline) { @@ -57,7 +59,7 @@ const MemoItem = ({place, existingTagline}: MemoItemProps) => { {place.title}
-

{place.title}

+

{title}

{place.contentTypeId} {'ꞏ'} From 4fe9bd95097dd67af5c2e1224cc8693fa37794e7 Mon Sep 17 00:00:00 2001 From: Yamyam-code Date: Sun, 28 Jan 2024 09:38:00 +0900 Subject: [PATCH 2/2] Feat: trip connect wish --- .../AddToCandidateButton.tsx | 26 +++++++++++-- .../SelectButton/SelectButton.tsx | 37 ++++++++++++++----- src/components/Route/AddPlace/AddPlace.tsx | 10 ++++- .../SearchItem/SearchItem.module.scss | 5 +++ src/recoil/vote/selectPlace.ts | 6 +++ 5 files changed, 69 insertions(+), 15 deletions(-) diff --git a/src/components/ButtonsInAddingCandidate/AddToCandidateButton/AddToCandidateButton.tsx b/src/components/ButtonsInAddingCandidate/AddToCandidateButton/AddToCandidateButton.tsx index cef3fb63..06f9302e 100644 --- a/src/components/ButtonsInAddingCandidate/AddToCandidateButton/AddToCandidateButton.tsx +++ b/src/components/ButtonsInAddingCandidate/AddToCandidateButton/AddToCandidateButton.tsx @@ -1,13 +1,13 @@ import {Button} from '@chakra-ui/react'; import {useLocation, useNavigate} from 'react-router-dom'; -import {useRecoilValue} from 'recoil'; +import {useRecoilValue, useSetRecoilState} from 'recoil'; -import {selectedPlaceState} from '@/recoil/vote/selectPlace'; +import {usePostPlaces} from '@/hooks/Spaces/space'; + +import {selectedPlaceState, selectedTripPlaceState} from '@/recoil/vote/selectPlace'; //prop이나 params로 trip or vote 판별, onClick에 삼항연산자로 함수 넣기 const AddToCandidateButton = () => { - const selectedPlaces = useRecoilValue(selectedPlaceState); - const counts = selectedPlaces.length; const location = useLocation(); const queryParams = new URLSearchParams(location.search); const spaceId = queryParams.get('placeID'); @@ -16,10 +16,28 @@ const AddToCandidateButton = () => { const voteIdArray = tripDateParam?.split(' ') as string[]; // 띄어쓰기를 기준으로 문자열 분할 const isInVote = voteIdArray[0] === 'vote'; const voteId = voteIdArray[1]; + const selectedPlaces = useRecoilValue(selectedPlaceState); + const selectedTripPlaces = useRecoilValue(selectedTripPlaceState); + const setTripRecoil = useSetRecoilState(selectedTripPlaceState); + const counts = isInVote ? selectedPlaces.length : selectedTripPlaces.length; + const postPlaces = usePostPlaces(); + + const addPlaces = async () => { + await postPlaces.mutateAsync({ + spaceId: Number(spaceId), + journeyId: Number(voteId), + placeIds: selectedTripPlaces, + }); + navigate(`/trip/${spaceId}`, {state: {id: spaceId}}); + setTripRecoil([]); + }; + const handleAddCandidates = () => { // 경로 추후 수정 if (isInVote) { navigate(`/trip/${spaceId}/votes/${voteId}/votememo`, {replace: true}); + } else { + addPlaces(); } }; return ( diff --git a/src/components/ButtonsInAddingCandidate/SelectButton/SelectButton.tsx b/src/components/ButtonsInAddingCandidate/SelectButton/SelectButton.tsx index 84501ce8..91a64a5e 100644 --- a/src/components/ButtonsInAddingCandidate/SelectButton/SelectButton.tsx +++ b/src/components/ButtonsInAddingCandidate/SelectButton/SelectButton.tsx @@ -1,11 +1,11 @@ import {useEffect, useState} from 'react'; -import {useRecoilValue} from 'recoil'; +import {useRecoilValue, useSetRecoilState} from 'recoil'; import styles from './SelectButton.module.scss'; import useGetSelectedArray from '@/hooks/useGetSelectedArray'; -import {selectedPlaceState} from '@/recoil/vote/selectPlace'; +import {selectedPlaceState, selectedTripPlaceState} from '@/recoil/vote/selectPlace'; import {SearchItemType} from '@/types/home'; @@ -15,22 +15,41 @@ interface Propstype { const SelectButton = ({data}: Propstype) => { const [isClicked, setIsClicked] = useState(false); + const queryParams = new URLSearchParams(location.search); + const tripDateParam = queryParams.get('tripDate'); + const voteIdArray = tripDateParam?.split(' ') as string[]; // 띄어쓰기를 기준으로 문자열 분할 + const isInVote = voteIdArray[0] === 'vote'; const selectedPlaces = useRecoilValue(selectedPlaceState); - + const selectedTripPlaces = useRecoilValue(selectedTripPlaceState); + const setRecoil = useSetRecoilState(selectedTripPlaceState); const {toggleItemInNewArray} = useGetSelectedArray(selectedPlaceState); const handleClick = (e: React.MouseEvent) => { + console.log(selectedTripPlaces); + e.preventDefault(); setIsClicked((prev) => !prev); - toggleItemInNewArray(data); + if (isInVote) { + toggleItemInNewArray(data); + } else { + setRecoil((prev) => [...prev, data.id]); + } }; useEffect(() => { - selectedPlaces.map((selectData) => { - if (selectData.id === data.id) { - setIsClicked(true); - } - }); + if (isInVote) { + selectedPlaces.map((selectData) => { + if (selectData.id === data.id) { + setIsClicked(true); + } + }); + } else { + selectedTripPlaces.map((selectData) => { + if (selectData === data.id) { + setIsClicked(true); + } + }); + } }, [data]); return ( diff --git a/src/components/Route/AddPlace/AddPlace.tsx b/src/components/Route/AddPlace/AddPlace.tsx index 4532a21c..51d55d86 100644 --- a/src/components/Route/AddPlace/AddPlace.tsx +++ b/src/components/Route/AddPlace/AddPlace.tsx @@ -20,7 +20,7 @@ function AddPlace({journeyId, day}: AddPlaceProps) {
-

찜 목록 검색

diff --git a/src/components/SearchFromHome/SearchList/SearchItem/SearchItem.module.scss b/src/components/SearchFromHome/SearchList/SearchItem/SearchItem.module.scss index 6ecd3733..eb63fe28 100644 --- a/src/components/SearchFromHome/SearchList/SearchItem/SearchItem.module.scss +++ b/src/components/SearchFromHome/SearchList/SearchItem/SearchItem.module.scss @@ -9,6 +9,8 @@ gap: 12px; .itemBox { + flex: 1; + max-height: 70px; display: flex; @@ -29,6 +31,8 @@ } .text { + flex: 1; + display: flex; flex-direction: column; gap: 2px; @@ -38,6 +42,7 @@ transition: 0.3s all linear; .title { + max-width: calc(100% - 30px); height: 24px; text-overflow: ellipsis; diff --git a/src/recoil/vote/selectPlace.ts b/src/recoil/vote/selectPlace.ts index 9c0a044e..6f405241 100644 --- a/src/recoil/vote/selectPlace.ts +++ b/src/recoil/vote/selectPlace.ts @@ -8,3 +8,9 @@ export const selectedPlaceState = atom({ default: [], effects_UNSTABLE: [persistAtom], }); + +export const selectedTripPlaceState = atom({ + key: 'selectedTripPlaceState', + default: [], + effects_UNSTABLE: [persistAtom], +});