From 0b312885a0723d80d73ff9da2397678089a17913 Mon Sep 17 00:00:00 2001 From: jisu Seo Date: Thu, 18 Jan 2024 05:54:03 +0900 Subject: [PATCH 01/24] =?UTF-8?q?Design:=20=EA=B3=B5=EC=9C=A0=20=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EB=A7=88=ED=81=AC=EC=97=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 1 + pnpm-lock.yaml | 35 ++++++++++++++++ src/api/trips.ts | 12 ++++++ src/components/Share/CopyBox.tsx | 38 +++++++++++++++++ src/components/Share/CopyToast.tsx | 36 ++++++++++++++++ src/components/Trip/TripSectionTop.tsx | 5 ++- src/components/common/BackBox/BackBox.tsx | 6 ++- src/pages/share/share.page.tsx | 51 +++++++++++++++++++++++ src/router/socketRouter.tsx | 2 + tailwind.config.js | 2 + 10 files changed, 186 insertions(+), 2 deletions(-) create mode 100644 src/components/Share/CopyBox.tsx create mode 100644 src/components/Share/CopyToast.tsx create mode 100644 src/pages/share/share.page.tsx diff --git a/package.json b/package.json index 753474f8..a47d801e 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "@radix-ui/react-radio-group": "^1.1.3", "@radix-ui/react-select": "^2.0.0", "@radix-ui/react-tabs": "^1.0.4", + "@radix-ui/react-toast": "^1.1.5", "@radix-ui/react-toggle-group": "^1.0.4", "@stomp/stompjs": "^7.0.0", "@svgr/rollup": "^8.1.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 4d42035a..ed96f9f2 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -32,6 +32,9 @@ dependencies: '@radix-ui/react-tabs': specifier: ^1.0.4 version: 1.0.4(@types/react-dom@18.2.18)(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0) + '@radix-ui/react-toast': + specifier: ^1.1.5 + version: 1.1.5(@types/react-dom@18.2.18)(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0) '@radix-ui/react-toggle-group': specifier: ^1.0.4 version: 1.0.4(@types/react-dom@18.2.18)(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0) @@ -2424,6 +2427,38 @@ packages: react-dom: 18.2.0(react@18.2.0) dev: false + /@radix-ui/react-toast@1.1.5(@types/react-dom@18.2.18)(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-fRLn227WHIBRSzuRzGJ8W+5YALxofH23y0MlPLddaIpLpCDqdE0NZlS2NRQDRiptfxDeeCjgFIpexB1/zkxDlw==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + dependencies: + '@babel/runtime': 7.23.6 + '@radix-ui/primitive': 1.0.1 + '@radix-ui/react-collection': 1.0.3(@types/react-dom@18.2.18)(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0) + '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.45)(react@18.2.0) + '@radix-ui/react-context': 1.0.1(@types/react@18.2.45)(react@18.2.0) + '@radix-ui/react-dismissable-layer': 1.0.5(@types/react-dom@18.2.18)(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0) + '@radix-ui/react-portal': 1.0.4(@types/react-dom@18.2.18)(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0) + '@radix-ui/react-presence': 1.0.1(@types/react-dom@18.2.18)(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0) + '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.18)(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0) + '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.45)(react@18.2.0) + '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.45)(react@18.2.0) + '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.2.45)(react@18.2.0) + '@radix-ui/react-visually-hidden': 1.0.3(@types/react-dom@18.2.18)(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0) + '@types/react': 18.2.45 + '@types/react-dom': 18.2.18 + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + dev: false + /@radix-ui/react-toggle-group@1.0.4(@types/react-dom@18.2.18)(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0): resolution: {integrity: sha512-Uaj/M/cMyiyT9Bx6fOZO0SAG4Cls0GptBWiBmBxofmDbNVnYYoyRWj/2M/6VCi/7qcXFWnHhRUfdfZFvvkuu8A==} peerDependencies: diff --git a/src/api/trips.ts b/src/api/trips.ts index 3441cb6b..e704e469 100644 --- a/src/api/trips.ts +++ b/src/api/trips.ts @@ -68,3 +68,15 @@ export const getTripsSurvey = async (tripId: number) => { const res = await client.get(`trips/${tripId}/survey`); return res; }; + +// 여정 참여 코드 조회 +export const getTripsjoin = async (tripId: number) => { + const res = await authClient.get(`trips/${tripId}/join`); + return res; +}; + +// 여정 참여 +export const postTripsjoin = async (tripId: number, joinCode: number) => { + const res = await client.post(`trips/${tripId}/join`, { joinCode }); + return res; +}; diff --git a/src/components/Share/CopyBox.tsx b/src/components/Share/CopyBox.tsx new file mode 100644 index 00000000..7dc6a289 --- /dev/null +++ b/src/components/Share/CopyBox.tsx @@ -0,0 +1,38 @@ +import CopyToast from './CopyToast'; + +interface Props { + title: string; + subTitle: string; + copyValue: string; +} + +const CopyBox = ({ title, subTitle, copyValue }: Props) => { + const onCopyClick = () => { + navigator.clipboard.writeText(copyValue); + }; + + return ( +
+
+ {`${title} 복사`} + {subTitle} +
+
+ + +
+ 복사 +
+ +
+
+ ); +}; + +export default CopyBox; diff --git a/src/components/Share/CopyToast.tsx b/src/components/Share/CopyToast.tsx new file mode 100644 index 00000000..4f7492a3 --- /dev/null +++ b/src/components/Share/CopyToast.tsx @@ -0,0 +1,36 @@ +import * as Toast from '@radix-ui/react-toast'; +import { ReactNode, useState } from 'react'; +import { ReactComponent as CircleCheckIcon } from '@assets/images/CircleCheck.svg'; + +interface Props { + title: string; + children: ReactNode; +} + +const CopyToast = ({ title, children }: Props) => { + const [open, setOpen] = useState(false); + + return ( + + + + + + + {`${title}가 복사되었습니다.`} + + + + + ); +}; + +export default CopyToast; diff --git a/src/components/Trip/TripSectionTop.tsx b/src/components/Trip/TripSectionTop.tsx index 82e03c8e..de28b0a6 100644 --- a/src/components/Trip/TripSectionTop.tsx +++ b/src/components/Trip/TripSectionTop.tsx @@ -13,10 +13,13 @@ const TripSectionTop = () => {
{ navigate(-1); }} + showShare={true} + shareHandler={() => { + navigate('share'); + }} /> diff --git a/src/components/common/BackBox/BackBox.tsx b/src/components/common/BackBox/BackBox.tsx index 4af0db0f..0d29c96f 100644 --- a/src/components/common/BackBox/BackBox.tsx +++ b/src/components/common/BackBox/BackBox.tsx @@ -10,6 +10,7 @@ interface Props { showSave?: boolean; saveHandler?: VoidFunction; showShare?: boolean; + shareHandler?: VoidFunction; } const BackBox = ({ @@ -21,6 +22,7 @@ const BackBox = ({ showSave, saveHandler, showShare, + shareHandler, }: Props) => { const onBackClick = () => { backHandler && backHandler(); @@ -55,7 +57,9 @@ const BackBox = ({ )} {showShare && ( - )} diff --git a/src/pages/share/share.page.tsx b/src/pages/share/share.page.tsx new file mode 100644 index 00000000..afa87318 --- /dev/null +++ b/src/pages/share/share.page.tsx @@ -0,0 +1,51 @@ +import { getTripsjoin } from '@api/trips'; +import CopyBox from '@components/Share/CopyBox'; +import { BackBox } from '@components/common'; +import { useEffect, useState } from 'react'; +import { useNavigate } from 'react-router-dom'; + +const Share = () => { + const navigate = useNavigate(); + const [joinCode, setJoinCode] = useState(null); + + useEffect(() => { + const getTripCode = async () => { + try { + const { data } = await getTripsjoin(27); + if (data.status === 200) { + setJoinCode(data.data); + } + } catch (err) { + console.error(err); + } + }; + getTripCode(); + }, []); + return ( +
+ { + navigate(-1); + }}> + 공유하기 + +
+ + {joinCode && ( + + )} +
+
+ ); +}; + +export default Share; diff --git a/src/router/socketRouter.tsx b/src/router/socketRouter.tsx index 4503f830..53fcb1ca 100644 --- a/src/router/socketRouter.tsx +++ b/src/router/socketRouter.tsx @@ -7,6 +7,7 @@ import Trip from '@pages/trip/trip.page'; import MainLayout from './routerLayout'; import { useRecoilValue } from 'recoil'; import { tripIdState, visitDateState } from '@recoil/socket'; +import Share from '@pages/share/share.page'; const SocketRoutes = () => { const tripId = useRecoilValue(tripIdState); @@ -31,6 +32,7 @@ const SocketRouter = () => { }> } /> + } /> } /> diff --git a/tailwind.config.js b/tailwind.config.js index 0ec3313f..44bf1e11 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -6,6 +6,8 @@ export default { colors: { main1: '#062139', main2: '#29DDF6', + main3: '#DAF9FF', + main4: '#F2FDFF', sub1: '#FFEC3E', sub2: '#FF2167', gray1: '#f8f8f8', From d377689f99e698833c506d32d516078d9d435ee0 Mon Sep 17 00:00:00 2001 From: jisu Seo Date: Thu, 18 Jan 2024 07:34:13 +0900 Subject: [PATCH 02/24] =?UTF-8?q?Design:=20=EC=BD=94=EB=93=9C=EC=9E=85?= =?UTF-8?q?=EB=A0=A5=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=A7=88=ED=81=AC?= =?UTF-8?q?=EC=97=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/trips.ts | 2 +- src/pages/share/shareCode.page.tsx | 82 ++++++++++++++++++++++++++++++ src/router/socketRouter.tsx | 2 + 3 files changed, 85 insertions(+), 1 deletion(-) create mode 100644 src/pages/share/shareCode.page.tsx diff --git a/src/api/trips.ts b/src/api/trips.ts index e704e469..b2803936 100644 --- a/src/api/trips.ts +++ b/src/api/trips.ts @@ -76,7 +76,7 @@ export const getTripsjoin = async (tripId: number) => { }; // 여정 참여 -export const postTripsjoin = async (tripId: number, joinCode: number) => { +export const postTripsjoin = async (tripId: number, joinCode: string) => { const res = await client.post(`trips/${tripId}/join`, { joinCode }); return res; }; diff --git a/src/pages/share/shareCode.page.tsx b/src/pages/share/shareCode.page.tsx new file mode 100644 index 00000000..431f8e90 --- /dev/null +++ b/src/pages/share/shareCode.page.tsx @@ -0,0 +1,82 @@ +import { postTripsjoin } from '@api/trips'; +import { BackBox } from '@components/common'; +import { useState } from 'react'; +import { useNavigate } from 'react-router-dom'; + +const shareCode = () => { + const navigate = useNavigate(); + const [inputCode, setInputCode] = useState(''); + const [showError, setShowError] = useState(false); + + const onCodeChange = async (e: React.ChangeEvent) => { + const changeValue = e.target.value; + if (changeValue.length <= 5) { + setInputCode(e.target.value); + } + if (changeValue.length === 5) { + try { + const res = await postTripsjoin(27, changeValue); + console.log(res); + } catch (err) { + setShowError(true); + setInputCode(''); + console.error('참여 코드 요청 중 에러 발생', err); + } + } + }; + + return ( +
+ { + navigate(-1); + }} + /> +
+
+ 편집 참여 코드 입력 + + 편집 참여 코드를 입력하면 여행 계획을 편집할 수 있어요. + +
+ +
+ + {inputCode.split('').map((code, index) => { + return ( +
+ {code} +
+ ); + })} + {Array(5 - inputCode.length) + .fill(null) + .map((_, index) => { + return ( +
+ ); + })} +
+ {showError && ( +
+ 편집 참여 코드를 다시 한번 확인해주세요. +
+ )} +
+
+ ); +}; + +export default shareCode; diff --git a/src/router/socketRouter.tsx b/src/router/socketRouter.tsx index 53fcb1ca..111d60bd 100644 --- a/src/router/socketRouter.tsx +++ b/src/router/socketRouter.tsx @@ -8,6 +8,7 @@ import MainLayout from './routerLayout'; import { useRecoilValue } from 'recoil'; import { tripIdState, visitDateState } from '@recoil/socket'; import Share from '@pages/share/share.page'; +import ShareCode from '@pages/share/shareCode.page'; const SocketRoutes = () => { const tripId = useRecoilValue(tripIdState); @@ -33,6 +34,7 @@ const SocketRouter = () => { }> } /> } /> + } /> } /> From a0a37b27487b5767f012a38f9ebb9b79e842407c Mon Sep 17 00:00:00 2001 From: jisu Seo Date: Sat, 20 Jan 2024 02:04:08 +0900 Subject: [PATCH 03/24] =?UTF-8?q?Refactor:=20=ED=8E=B8=EC=A7=91=20?= =?UTF-8?q?=EC=BD=94=EB=93=9C=20=EC=9A=94=EC=B2=AD=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/trips.ts | 4 ++-- src/pages/share/share.page.tsx | 24 ++++++++++++++++-------- 2 files changed, 18 insertions(+), 10 deletions(-) diff --git a/src/api/trips.ts b/src/api/trips.ts index b2803936..c9c42736 100644 --- a/src/api/trips.ts +++ b/src/api/trips.ts @@ -70,13 +70,13 @@ export const getTripsSurvey = async (tripId: number) => { }; // 여정 참여 코드 조회 -export const getTripsjoin = async (tripId: number) => { +export const getTripsjoin = async (tripId: string) => { const res = await authClient.get(`trips/${tripId}/join`); return res; }; // 여정 참여 export const postTripsjoin = async (tripId: number, joinCode: string) => { - const res = await client.post(`trips/${tripId}/join`, { joinCode }); + const res = await authClient.post(`trips/${tripId}/join`, { joinCode }); return res; }; diff --git a/src/pages/share/share.page.tsx b/src/pages/share/share.page.tsx index afa87318..ecd87444 100644 --- a/src/pages/share/share.page.tsx +++ b/src/pages/share/share.page.tsx @@ -2,25 +2,33 @@ import { getTripsjoin } from '@api/trips'; import CopyBox from '@components/Share/CopyBox'; import { BackBox } from '@components/common'; import { useEffect, useState } from 'react'; -import { useNavigate } from 'react-router-dom'; +import { useNavigate, useParams } from 'react-router-dom'; const Share = () => { const navigate = useNavigate(); const [joinCode, setJoinCode] = useState(null); + const params = useParams(); + const tripId = params.id; useEffect(() => { const getTripCode = async () => { - try { - const { data } = await getTripsjoin(27); - if (data.status === 200) { - setJoinCode(data.data); + if (tripId) { + try { + const { data } = await getTripsjoin(tripId); + if (data.status === 200) { + setJoinCode(data.data); + } + } catch (err) { + console.error('편집 참여 코드 요청 중 에러 발생', err); } - } catch (err) { - console.error(err); } }; getTripCode(); }, []); + + const url = window.location.href; + const shareUrl = url.replace('/share', ''); + return (
{ {joinCode && ( Date: Sat, 20 Jan 2024 02:32:50 +0900 Subject: [PATCH 04/24] =?UTF-8?q?Feat:=20=EB=A6=AC=EB=B7=B0=ED=86=B5?= =?UTF-8?q?=EA=B3=84=20=EB=8D=94=EB=B3=B4=EA=B8=B0=20=EC=95=84=EC=9D=B4?= =?UTF-8?q?=EC=BD=98=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../DetailSectionBottom/DetailReviewStats.tsx | 6 ++-- src/components/Plan/PlanSectionTop.tsx | 1 - src/components/Trip/TripRealtimeEditor.tsx | 20 +++++------ src/components/Trip/TripSchedule.tsx | 3 -- src/components/common/icons/Icons.tsx | 33 +++++-------------- 5 files changed, 22 insertions(+), 41 deletions(-) diff --git a/src/components/DetailSectionBottom/DetailReviewStats.tsx b/src/components/DetailSectionBottom/DetailReviewStats.tsx index c428443c..f87f181b 100644 --- a/src/components/DetailSectionBottom/DetailReviewStats.tsx +++ b/src/components/DetailSectionBottom/DetailReviewStats.tsx @@ -1,7 +1,7 @@ import { useState } from 'react'; import { useGetToursReviews } from '@hooks/useReviewStats'; import { v4 as uuidv4 } from 'uuid'; -import { DownIcon } from '@components/common/icons/Icons'; +import { DropdownIcon } from '@components/common/icons/Icons'; import useReviewStatsCalculator from '@hooks/useReviewStatsCalculator'; import { getEmoji } from '@utils/utils'; @@ -45,11 +45,11 @@ const DetailReviewStats = () => {
setShowAll(!showAll)} - className="cursor-pointer transition-transform duration-300" + className="mt-[9px] cursor-pointer transition-transform duration-300" style={{ transform: showAll ? 'rotate(180deg)' : 'rotate(0deg)', }}> - +
)} diff --git a/src/components/Plan/PlanSectionTop.tsx b/src/components/Plan/PlanSectionTop.tsx index 5f99f5d4..114ee5a5 100644 --- a/src/components/Plan/PlanSectionTop.tsx +++ b/src/components/Plan/PlanSectionTop.tsx @@ -13,7 +13,6 @@ import { dayState, dateState } from '@recoil/plan'; import { tripIdState, memberIdState } from '@recoil/socket'; import { calculateDayAndDate } from '@utils/utils'; import { TripSchedule } from '@components/Trip/TripSchedule'; -import { getItem } from '@utils/localStorageFun'; const PlanSectionTop = () => { const navigate = useNavigate(); diff --git a/src/components/Trip/TripRealtimeEditor.tsx b/src/components/Trip/TripRealtimeEditor.tsx index 4d810455..7c5b9f1a 100644 --- a/src/components/Trip/TripRealtimeEditor.tsx +++ b/src/components/Trip/TripRealtimeEditor.tsx @@ -26,16 +26,16 @@ const TripRealtimeEditor = () => { setPubMember({ token: token || '' }); }, [token]); - useEffect(() => { - if (pubMember && tripId) { - callBackPub(() => { - pubConnectMember(pubMember, tripId); - }); - return () => { - callBackPub(() => pubDisconnectMember(pubMember, tripId)); - }; - } - }, [pubMember]); + // useEffect(() => { + // if (pubMember && tripId) { + // callBackPub(() => { + // pubConnectMember(pubMember, tripId); + // }); + // return () => { + // callBackPub(() => pubDisconnectMember(pubMember, tripId)); + // }; + // } + // }, [pubMember]); const tripMemberData = tripMember?.data; useEffect(() => { diff --git a/src/components/Trip/TripSchedule.tsx b/src/components/Trip/TripSchedule.tsx index ad55e20e..c68a60e3 100644 --- a/src/components/Trip/TripSchedule.tsx +++ b/src/components/Trip/TripSchedule.tsx @@ -12,9 +12,6 @@ export const TripSchedule = () => { 5
- 23.12.23 - 23.12.25 diff --git a/src/components/common/icons/Icons.tsx b/src/components/common/icons/Icons.tsx index ab793d75..1c66fb80 100644 --- a/src/components/common/icons/Icons.tsx +++ b/src/components/common/icons/Icons.tsx @@ -1299,7 +1299,6 @@ export const CounterIcon: React.FC< ); }; - export const PlanColorIcon: React.FC = ({ size = 21 }) => { return ( = ({ size = 21 }) => { ); }; - export const ThumbsUp: React.FC = ({ size = 16, fill = '#1E1E1E', @@ -1675,34 +1673,21 @@ export const PaperIcon: React.FC = ({}) => { ); }; -export const PlanColorIcon = () => { +export const DropdownIcon: React.FC = ({}) => { return ( + preserveAspectRatio="xMidYMid meet"> - - - ); }; From 463da03b38cef2b2e734da301171c273b4e94486 Mon Sep 17 00:00:00 2001 From: jisu Seo Date: Sat, 20 Jan 2024 02:40:09 +0900 Subject: [PATCH 05/24] =?UTF-8?q?Refactor:=20=EC=BD=94=EB=93=9C=20?= =?UTF-8?q?=EC=A0=95=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/share/share.page.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/pages/share/share.page.tsx b/src/pages/share/share.page.tsx index ecd87444..7d6d5887 100644 --- a/src/pages/share/share.page.tsx +++ b/src/pages/share/share.page.tsx @@ -7,8 +7,7 @@ import { useNavigate, useParams } from 'react-router-dom'; const Share = () => { const navigate = useNavigate(); const [joinCode, setJoinCode] = useState(null); - const params = useParams(); - const tripId = params.id; + const { id: tripId } = useParams(); useEffect(() => { const getTripCode = async () => { From 8ac1555950862a7d4ce76418153311e67b3cc912 Mon Sep 17 00:00:00 2001 From: jisu Seo Date: Sat, 20 Jan 2024 02:41:58 +0900 Subject: [PATCH 06/24] =?UTF-8?q?Feat:=20=EC=9D=B4=EB=AF=B8=20=ED=8E=B8?= =?UTF-8?q?=EC=A7=91=20=EA=B0=80=EB=8A=A5=ED=95=9C=20=EC=9C=A0=EC=A0=80=20?= =?UTF-8?q?=EB=A6=AC=EB=8B=A4=EC=9D=B4=EB=A0=89=ED=8A=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/share/shareCode.page.tsx | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) diff --git a/src/pages/share/shareCode.page.tsx b/src/pages/share/shareCode.page.tsx index 431f8e90..86909ae8 100644 --- a/src/pages/share/shareCode.page.tsx +++ b/src/pages/share/shareCode.page.tsx @@ -1,10 +1,20 @@ import { postTripsjoin } from '@api/trips'; import { BackBox } from '@components/common'; -import { useState } from 'react'; +import { useGetTripsAuthority } from '@hooks/useGetTripsAuthority'; +import { useEffect, useState } from 'react'; import { useNavigate } from 'react-router-dom'; const shareCode = () => { const navigate = useNavigate(); + const { tripAuthority, TripId } = useGetTripsAuthority(); + + useEffect(() => { + if (tripAuthority === 'WRITE' && TripId) { + alert('이미 편집 가능한 여정입니다.'); + navigate(`/trip/${TripId}`); + } + }, [tripAuthority, TripId]); + const [inputCode, setInputCode] = useState(''); const [showError, setShowError] = useState(false); @@ -13,9 +23,9 @@ const shareCode = () => { if (changeValue.length <= 5) { setInputCode(e.target.value); } - if (changeValue.length === 5) { + if (changeValue.length === 5 && TripId) { try { - const res = await postTripsjoin(27, changeValue); + const res = await postTripsjoin(TripId, changeValue); console.log(res); } catch (err) { setShowError(true); From 0080ff78ebfcf16fd85740656ab15c37281910e8 Mon Sep 17 00:00:00 2001 From: jisu Seo Date: Sat, 20 Jan 2024 04:12:53 +0900 Subject: [PATCH 07/24] =?UTF-8?q?Feat:=20=EC=B0=B8=EC=97=AC=20=EC=BD=94?= =?UTF-8?q?=EB=93=9C=20=EC=9E=85=EB=A0=A5=20=EA=B8=B0=EB=8A=A5=20=EA=B5=AC?= =?UTF-8?q?=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Share/IsEditableModal.tsx | 69 ++++++++++++++++++++++++ src/components/Trip/TripSectionTop.tsx | 12 ++++- src/components/common/icons/Icons.tsx | 50 +++++++++++++++++ src/pages/share/shareCode.page.tsx | 8 +-- 4 files changed, 135 insertions(+), 4 deletions(-) create mode 100644 src/components/Share/IsEditableModal.tsx diff --git a/src/components/Share/IsEditableModal.tsx b/src/components/Share/IsEditableModal.tsx new file mode 100644 index 00000000..31dccb96 --- /dev/null +++ b/src/components/Share/IsEditableModal.tsx @@ -0,0 +1,69 @@ +import * as Dialog from '@radix-ui/react-dialog'; +import { EditStarIcon } from '@components/common/icons/Icons'; +import Alert from '@components/common/alert/Alert'; +import { useNavigate } from 'react-router-dom'; +import { getItem } from '@utils/localStorageFun'; + +interface Props { + isEditable: boolean; + setIsEditable: React.Dispatch>; +} + +const IsEditableModal = ({ isEditable, setIsEditable }: Props) => { + const navigate = useNavigate(); + const isLogin = getItem('accessToken'); + + const handleConfirm = () => { + navigate('/login'); + }; + + return ( + + + + + + + + + 편집 참여 코드를 입력하시면 +
+ 여행 계획을 함께 편집할 수 있어요! + + + + + {isLogin ? ( + + ) : ( + + 편집 참여 코드 입력을 위해 로그인이 필요해요. +
+ 로그인하시겠어요? + + } + onConfirm={handleConfirm}> + + + )} + + + + + + + ); +}; + +export default IsEditableModal; diff --git a/src/components/Trip/TripSectionTop.tsx b/src/components/Trip/TripSectionTop.tsx index 5c124851..d1388108 100644 --- a/src/components/Trip/TripSectionTop.tsx +++ b/src/components/Trip/TripSectionTop.tsx @@ -6,15 +6,25 @@ import { useNavigate } from 'react-router-dom'; import PlanTripButton from './PlanTripButton'; import { LikedToursList } from './LikedToursList'; import { useGetTripsAuthority } from '@hooks/useGetTripsAuthority'; +import { useEffect, useState } from 'react'; +import IsEditableModal from '@components/Share/IsEditableModal'; const TripSectionTop = () => { const navigate = useNavigate(); const { tripAuthority } = useGetTripsAuthority(); + const [isEditable, setIsEditable] = useState(false); - console.log(tripAuthority); + useEffect(() => { + if (tripAuthority !== null) { + if (tripAuthority !== 'WRITE') { + setIsEditable(true); + } + } + }, [tripAuthority]); return (
+ { diff --git a/src/components/common/icons/Icons.tsx b/src/components/common/icons/Icons.tsx index ab793d75..a86f092a 100644 --- a/src/components/common/icons/Icons.tsx +++ b/src/components/common/icons/Icons.tsx @@ -1562,6 +1562,56 @@ export const OrangeIcon: React.FC = ({ size = 20, className }) => { ); }; +export const EditStarIcon = () => { + return ( + + + + + + + + + + + + + ); +}; + export const GreenIcon: React.FC = ({ size = 20, className }) => { return ( { useEffect(() => { if (tripAuthority === 'WRITE' && TripId) { alert('이미 편집 가능한 여정입니다.'); - navigate(`/trip/${TripId}`); + navigate(`/trip/${TripId}`, { replace: true }); } }, [tripAuthority, TripId]); @@ -25,8 +25,10 @@ const shareCode = () => { } if (changeValue.length === 5 && TripId) { try { - const res = await postTripsjoin(TripId, changeValue); - console.log(res); + const { data } = await postTripsjoin(TripId, changeValue); + if (data.status === 200) { + navigate(`/trip/${TripId}`, { replace: true }); + } } catch (err) { setShowError(true); setInputCode(''); From 0008df4cc0c45becfcb7969aa713524de79e90e5 Mon Sep 17 00:00:00 2001 From: jisu Seo Date: Sat, 20 Jan 2024 04:33:39 +0900 Subject: [PATCH 08/24] =?UTF-8?q?Feat:=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20?= =?UTF-8?q?=ED=9B=84=20=EC=BD=94=EB=93=9C=20=EC=9E=85=EB=A0=A5=20=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=EB=A1=9C=20=EC=9D=B4=EB=8F=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Auth/Login/LoginForm.tsx | 10 ++++++++-- src/components/Plan/PlanSectionTop.tsx | 1 - src/components/Share/IsEditableModal.tsx | 9 ++++----- 3 files changed, 12 insertions(+), 8 deletions(-) diff --git a/src/components/Auth/Login/LoginForm.tsx b/src/components/Auth/Login/LoginForm.tsx index db12f7bc..d1e88621 100644 --- a/src/components/Auth/Login/LoginForm.tsx +++ b/src/components/Auth/Login/LoginForm.tsx @@ -1,7 +1,7 @@ import type { AuthRequest } from '@/@types/auth.types'; import { SubmitHandler, useForm } from 'react-hook-form'; import { postEmailLogin } from '@api/auth'; -import { useNavigate } from 'react-router-dom'; +import { useLocation, useNavigate } from 'react-router-dom'; import { AxiosError } from 'axios'; import { useState } from 'react'; import SubmitBtn from '@components/common/button/SubmitBtn'; @@ -26,6 +26,8 @@ const LoginForm = () => { }); const navigate = useNavigate(); + const { state } = useLocation(); + // const [userInfo, setUserInfo] = useRecoilState(UserInfoState); const onLoginSubmit: SubmitHandler = async (data) => { @@ -38,7 +40,11 @@ const LoginForm = () => { if (res.data.status === 200) { setItem('accessToken', res.data.data.tokenInfo.accessToken); // setUserInfo(res.data.data.memberDto); - navigate('/'); + if (state) { + navigate(`${state.prevPath}/code`); + } else { + navigate('/'); + } } } catch (err) { if (err instanceof AxiosError) { diff --git a/src/components/Plan/PlanSectionTop.tsx b/src/components/Plan/PlanSectionTop.tsx index 5f99f5d4..114ee5a5 100644 --- a/src/components/Plan/PlanSectionTop.tsx +++ b/src/components/Plan/PlanSectionTop.tsx @@ -13,7 +13,6 @@ import { dayState, dateState } from '@recoil/plan'; import { tripIdState, memberIdState } from '@recoil/socket'; import { calculateDayAndDate } from '@utils/utils'; import { TripSchedule } from '@components/Trip/TripSchedule'; -import { getItem } from '@utils/localStorageFun'; const PlanSectionTop = () => { const navigate = useNavigate(); diff --git a/src/components/Share/IsEditableModal.tsx b/src/components/Share/IsEditableModal.tsx index 31dccb96..ee917224 100644 --- a/src/components/Share/IsEditableModal.tsx +++ b/src/components/Share/IsEditableModal.tsx @@ -1,7 +1,7 @@ import * as Dialog from '@radix-ui/react-dialog'; import { EditStarIcon } from '@components/common/icons/Icons'; import Alert from '@components/common/alert/Alert'; -import { useNavigate } from 'react-router-dom'; +import { useLocation, useNavigate } from 'react-router-dom'; import { getItem } from '@utils/localStorageFun'; interface Props { @@ -11,19 +11,18 @@ interface Props { const IsEditableModal = ({ isEditable, setIsEditable }: Props) => { const navigate = useNavigate(); + const { pathname } = useLocation(); + const isLogin = getItem('accessToken'); const handleConfirm = () => { - navigate('/login'); + navigate('/login', { state: { prevPath: pathname } }); }; return ( - - - 편집 참여 코드를 입력하시면 From a85edc758713cbc22c6323d8147a9776339edaa3 Mon Sep 17 00:00:00 2001 From: jisu Seo Date: Sat, 20 Jan 2024 06:18:28 +0900 Subject: [PATCH 09/24] =?UTF-8?q?Feat:=20=EB=AA=A8=EB=8B=AC=20=EC=B0=B8?= =?UTF-8?q?=EC=97=AC=20=EC=BD=94=EB=93=9C=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Share/CodeInput.tsx | 39 ++++++++++++++++++ src/components/Trip/EditCodeModal.tsx | 59 +++++++++++++++++++++++++++ src/components/Trip/TripSchedule.tsx | 5 +-- src/components/common/alert/Alert.tsx | 14 ++++--- 4 files changed, 109 insertions(+), 8 deletions(-) create mode 100644 src/components/Share/CodeInput.tsx create mode 100644 src/components/Trip/EditCodeModal.tsx diff --git a/src/components/Share/CodeInput.tsx b/src/components/Share/CodeInput.tsx new file mode 100644 index 00000000..3fca6375 --- /dev/null +++ b/src/components/Share/CodeInput.tsx @@ -0,0 +1,39 @@ +interface Props { + inputCode: string; + setInputCode: React.Dispatch>; + showError: boolean; +} + +const CodeInput = ({ inputCode, setInputCode, showError }: Props) => { + const onCodeChange = async (e: React.ChangeEvent) => { + const changeValue = e.target.value; + if (changeValue.length <= 5) { + setInputCode(e.target.value); + } + }; + return ( +
+
+ +
+ {showError && ( +
+ 편집 참여 코드를 다시 한번 확인해주세요. +
+ )} +
+ ); +}; + +export default CodeInput; diff --git a/src/components/Trip/EditCodeModal.tsx b/src/components/Trip/EditCodeModal.tsx new file mode 100644 index 00000000..09609bfb --- /dev/null +++ b/src/components/Trip/EditCodeModal.tsx @@ -0,0 +1,59 @@ +import { postTripsjoin } from '@api/trips'; +import CodeInput from '@components/Share/CodeInput'; +import Alert from '@components/common/alert/Alert'; +import { useGetTripsAuthority } from '@hooks/useGetTripsAuthority'; +import { useState } from 'react'; +import { useParams } from 'react-router-dom'; + +const EditCodeModal = () => { + const [isModalOpen, setIsModalOpen] = useState(false); + const [inputCode, setInputCode] = useState(''); + const [showError, setShowError] = useState(false); + + const { id: tripId } = useParams(); + const { tripAuthority } = useGetTripsAuthority(); + + const handleConfirm = async () => { + if (tripId) { + try { + const { data } = await postTripsjoin(Number(tripId), inputCode); + if (data.status === 200) { + setIsModalOpen(false); + } + } catch (err) { + setShowError(true); + setInputCode(''); + console.error('참여 코드 요청 중 에러 발생', err); + } + } + }; + + return ( + <> + {tripAuthority === 'WRITE' ? ( + + ) : ( + + } + isOpen={isModalOpen} + setIsOpen={setIsModalOpen} + onConfirm={handleConfirm}> + + + )} + + ); +}; + +export default EditCodeModal; diff --git a/src/components/Trip/TripSchedule.tsx b/src/components/Trip/TripSchedule.tsx index ad55e20e..9d6ea0cd 100644 --- a/src/components/Trip/TripSchedule.tsx +++ b/src/components/Trip/TripSchedule.tsx @@ -1,4 +1,5 @@ import { UserIcon } from '@components/common/icons/Icons'; +import EditCodeModal from './EditCodeModal'; export const TripSchedule = () => { return ( @@ -12,9 +13,7 @@ export const TripSchedule = () => { 5
- + 23.12.23 - 23.12.25 diff --git a/src/components/common/alert/Alert.tsx b/src/components/common/alert/Alert.tsx index df7f1dd1..dbb26a3f 100644 --- a/src/components/common/alert/Alert.tsx +++ b/src/components/common/alert/Alert.tsx @@ -3,13 +3,15 @@ import * as Dialog from '@radix-ui/react-dialog'; interface AlertProps { title: string; - message: ReactNode; + message?: ReactNode; onConfirm: (() => void) | ((e: React.MouseEvent) => void); onCancel?: (() => void) | ((e: React.MouseEvent) => void); children: ReactNode; content?: ReactNode; closeOnConfirm?: boolean; isCheck?: number | null; + isOpen?: boolean; + setIsOpen?: React.Dispatch>; } const Alert: FC = ({ @@ -21,8 +23,10 @@ const Alert: FC = ({ content, closeOnConfirm = false, isCheck = true, + isOpen, + setIsOpen, }) => ( - + {children} @@ -31,10 +35,10 @@ const Alert: FC = ({ + } fixed left-[50%] top-[50%] z-[130] flex min-h-[192px] w-[309px] translate-x-[-50%] translate-y-[-50%] flex-col items-center justify-center rounded-2xl bg-white px-[14px] shadow-lg focus:outline-none`}>

= ({ From 19fd1d6228dcf1275dbce28c15d7f35f06eea6e3 Mon Sep 17 00:00:00 2001 From: jisu Seo Date: Sat, 20 Jan 2024 06:28:07 +0900 Subject: [PATCH 10/24] =?UTF-8?q?Refactor:=20=EA=B3=B5=EC=9C=A0=20?= =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=9D=B4=EB=8F=99=20=EA=B5=AC?= =?UTF-8?q?=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Plan/PlanSectionTop.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/components/Plan/PlanSectionTop.tsx b/src/components/Plan/PlanSectionTop.tsx index 114ee5a5..99be9d1f 100644 --- a/src/components/Plan/PlanSectionTop.tsx +++ b/src/components/Plan/PlanSectionTop.tsx @@ -51,10 +51,13 @@ const PlanSectionTop = () => {

{ navigate(-1); }} + showShare={true} + shareHandler={() => { + navigate(`/trip/${tripId}/share`); + }} /> From 191b514634ec3e4f180a76aadc510188234355cf Mon Sep 17 00:00:00 2001 From: jisu Seo Date: Sat, 20 Jan 2024 06:32:48 +0900 Subject: [PATCH 11/24] =?UTF-8?q?Refactor:=20=EB=A1=9C=EA=B7=B8=EC=9D=B8?= =?UTF-8?q?=20=ED=9B=84=20url=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Auth/Login/LoginForm.tsx | 2 +- src/components/Share/IsEditableModal.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Auth/Login/LoginForm.tsx b/src/components/Auth/Login/LoginForm.tsx index d1e88621..0491d686 100644 --- a/src/components/Auth/Login/LoginForm.tsx +++ b/src/components/Auth/Login/LoginForm.tsx @@ -41,7 +41,7 @@ const LoginForm = () => { setItem('accessToken', res.data.data.tokenInfo.accessToken); // setUserInfo(res.data.data.memberDto); if (state) { - navigate(`${state.prevPath}/code`); + navigate(state.prevPath); } else { navigate('/'); } diff --git a/src/components/Share/IsEditableModal.tsx b/src/components/Share/IsEditableModal.tsx index ee917224..1465ff79 100644 --- a/src/components/Share/IsEditableModal.tsx +++ b/src/components/Share/IsEditableModal.tsx @@ -16,7 +16,7 @@ const IsEditableModal = ({ isEditable, setIsEditable }: Props) => { const isLogin = getItem('accessToken'); const handleConfirm = () => { - navigate('/login', { state: { prevPath: pathname } }); + navigate('/login', { state: { prevPath: `${pathname}/code` } }); }; return ( From 7fea8c0e78afd9caa89868a11224ec0641ec7203 Mon Sep 17 00:00:00 2001 From: Shim Jeong ah <35457850+joanShim@users.noreply.github.com> Date: Sat, 20 Jan 2024 18:21:27 +0900 Subject: [PATCH 12/24] =?UTF-8?q?feat:=20=EC=9A=B0=EB=A6=AC=EC=9D=98=20?= =?UTF-8?q?=EA=B4=80=EC=8B=AC=EB=AA=A9=EB=A1=9D=20=EC=97=85=EB=8D=B0?= =?UTF-8?q?=EC=9D=B4=ED=8A=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/trips.ts | 42 ++++-- .../common/button/ListSelectBtn.tsx | 8 +- src/pages/plan/OurLikedList.tsx | 124 ++++++++---------- src/pages/plan/addPlace/AddtoListBtn.tsx | 29 ++-- src/pages/plan/addPlace/MyLiked.tsx | 11 +- src/pages/plan/addPlace/MyLikedList.tsx | 2 +- src/pages/plan/addPlace/MyLikedListItem.tsx | 7 +- src/pages/plan/addPlace/PlanAddPlace.page.tsx | 6 +- .../plan/addPlace/ResultCategoryPlan.tsx | 7 +- src/pages/plan/addPlace/ResultItem.tsx | 6 +- src/pages/plan/addPlace/SearchResult.tsx | 7 +- src/pages/search/search.page.tsx | 4 +- src/pages/trip/AddOurList.tsx | 2 +- src/router/routerLayout.tsx | 4 +- src/utils/getTripIdFromUrl.ts | 7 + 15 files changed, 145 insertions(+), 121 deletions(-) create mode 100644 src/utils/getTripIdFromUrl.ts diff --git a/src/api/trips.ts b/src/api/trips.ts index be019a7f..b9aac400 100644 --- a/src/api/trips.ts +++ b/src/api/trips.ts @@ -10,8 +10,16 @@ export const getTrips = async (tripId: number) => { }; // 여정 기본정보 수정 -export const putTrips = async (tripId: number, tripsData: TripRequest) => { - const res = await client.put(`trips/${tripId}`, tripsData); +export const putTrips = async ( + tripId: number, + tourItemId: number, + visitDate: string, +) => { + const requestBody = { + tourItemId: tourItemId, + visitDate: visitDate, + }; + const res = await authClient.post(`trips/${tripId}`, requestBody); return res; }; @@ -33,16 +41,26 @@ export const postTrips = async (tripsData: TripRequest) => { }; // 우리의 관심목록 조회 -export const getTripsLike = async ( - tripId: number, - category: number, - page: number, - size: number, -) => { - const res = await client.get( - `trips/${tripId}/tripLikedTours?category=${category}&page=${page}$size=${size}`, - ); - return res; +export const getTripsLike = async (options: { + tripId: number; + category?: string; + page?: number; + size?: number; +}) => { + const { tripId, category, page = 0, size } = options; + + let query = `trips/${tripId}/tripLikedTours?`; + + if (category) { + query += `&category=${category}`; + } + query += `&page=${page}`; + + if (size) { + query += `&size=${size}`; + } + const res = await authClient.get(query); + return res.data; }; // 우리의 관심 목록 등록 diff --git a/src/components/common/button/ListSelectBtn.tsx b/src/components/common/button/ListSelectBtn.tsx index 4328e6d2..e4f439df 100644 --- a/src/components/common/button/ListSelectBtn.tsx +++ b/src/components/common/button/ListSelectBtn.tsx @@ -9,8 +9,9 @@ interface ListSelectBtnProps { export const ListSelectBtn = ({ children, onClick }: ListSelectBtnProps) => { const [isActive, setIsActive] = useState(false); - const handleClick = () => { + const handleClick = (e: React.MouseEvent) => { setIsActive(!isActive); + e.stopPropagation(); if (onClick) { onClick(); } @@ -36,15 +37,16 @@ interface ListCheckBtnProps { export const ListCheckBtn = ({ onClick }: ListCheckBtnProps) => { const [isActive, setIsActive] = useState(false); - const handleClick = () => { + const handleClick = (e: React.MouseEvent) => { setIsActive(!isActive); + e.stopPropagation(); if (onClick) { onClick(); } }; return ( -
+
+
- 23.12.23 - 23.12.25 + + {startDate?.substring(2).replace(/-/g, '.') || ''} -{' '} + {endDate?.substring(5).replace(/-/g, '.') || ''} + ); }; diff --git a/src/components/Trip/TripSectionTop.tsx b/src/components/Trip/TripSectionTop.tsx index 59ef58eb..82e03c8e 100644 --- a/src/components/Trip/TripSectionTop.tsx +++ b/src/components/Trip/TripSectionTop.tsx @@ -5,13 +5,9 @@ import { BackBox } from '@components/common'; import { useNavigate } from 'react-router-dom'; import PlanTripButton from './PlanTripButton'; import { LikedToursList } from './LikedToursList'; -import { useGetTripsAuthority } from '@hooks/useGetTripsAuthority'; const TripSectionTop = () => { const navigate = useNavigate(); - const { tripAuthority } = useGetTripsAuthority(); - - console.log(tripAuthority); return (
diff --git a/src/components/common/icons/Icons.tsx b/src/components/common/icons/Icons.tsx index 1c66fb80..5bc316d1 100644 --- a/src/components/common/icons/Icons.tsx +++ b/src/components/common/icons/Icons.tsx @@ -1314,14 +1314,14 @@ export const PlanColorIcon: React.FC = ({ size = 21 }) => { { + const { id } = useParams(); + + const defaultReturn = { + tripName: null, + startDate: null, + endDate: null, + numberOfPeople: null, + }; + + if (!id) { + return defaultReturn; + } + + const { data, isLoading, isError } = useQuery({ + queryKey: ['getTrips', id], + queryFn: () => getTrips(id), + enabled: !!id, + staleTime: 60000, + }); + + const tripName = data?.data.data.tripName; + const startDate = data?.data.data.startDate; + const endDate = data?.data.data.endDate; + const numberOfPeople = data?.data.data.numberOfPeople; + + if (isLoading || isError) { + return defaultReturn; + } + + return { tripName, startDate, endDate, numberOfPeople }; +}; diff --git a/src/hooks/useGetTripsAuthority.ts b/src/hooks/useGetTripsAuthority.ts index efef5695..1dd72859 100644 --- a/src/hooks/useGetTripsAuthority.ts +++ b/src/hooks/useGetTripsAuthority.ts @@ -6,7 +6,7 @@ import { useParams } from 'react-router-dom'; type useGetTripsAuthorityReturn = { tripAuthority: string | null; memberId: number | null; - TripId: number | null; + tripId: string | null; }; export const useGetTripsAuthority = (): useGetTripsAuthorityReturn => { @@ -15,7 +15,7 @@ export const useGetTripsAuthority = (): useGetTripsAuthorityReturn => { const defaultReturn = { tripAuthority: null, memberId: null, - TripId: null, + tripId: null, }; if (!id) { @@ -25,15 +25,16 @@ export const useGetTripsAuthority = (): useGetTripsAuthorityReturn => { queryKey: ['getTripsAuthority', id], queryFn: () => getTripsAuthority(id), enabled: !!id, + staleTime: 60000, }); const tripAuthority = data?.data.data.tripAuthority; const memberId = data?.data.data.memberId; - const TripId = data?.data.data.TripId; + const tripId = data?.data.data.TripId; if (isLoading || isError) { return defaultReturn; } - return { tripAuthority, memberId, TripId }; + return { tripAuthority, memberId, tripId }; }; diff --git a/src/hooks/useSocket.ts b/src/hooks/useSocket.ts index 6f07b0ca..37b7831a 100644 --- a/src/hooks/useSocket.ts +++ b/src/hooks/useSocket.ts @@ -16,6 +16,9 @@ import { } from '@/@types/service'; import { createContext } from 'react'; import { useState, useEffect } from 'react'; +import { useParams } from 'react-router-dom'; +import { useRecoilValue } from 'recoil'; +import { visitDateState } from '@recoil/socket'; export const socketContext = createContext({ tripInfo: null, @@ -23,16 +26,20 @@ export const socketContext = createContext({ tripPath: null, tripMember: null, tripBudget: null, + tripId: '', callBackPub: () => {}, }); -export const useSocket = (tripId: string, visitDate: string) => { +export const useSocket = () => { + const { id } = useParams(); + const tripId = id ?? ''; + const visitDate = useRecoilValue(visitDateState); + const [tripInfo, setTripInfo] = useState(null); const [tripItem, setTripItem] = useState(null); const [tripPath, setTripPath] = useState(null); const [tripMember, setTripMember] = useState(null); const [tripBudget, setTripBudget] = useState(null); - const [socketCallback, setSocketCallback] = useState<(() => void) | null>( null, ); @@ -41,7 +48,7 @@ export const useSocket = (tripId: string, visitDate: string) => { setSocketCallback(() => callback); }; - const socketConnect = () => { + const socketConnect = (tripId: string, visitDate: string) => { socketClient.onConnect = () => { subInfo(tripId, (res) => { if (res) { @@ -63,7 +70,6 @@ export const useSocket = (tripId: string, visitDate: string) => { subMember(tripId, (res) => { if (res) { - // console.log('subMemberRes', res); setTripMember(res); } }); @@ -83,13 +89,23 @@ export const useSocket = (tripId: string, visitDate: string) => { }; useEffect(() => { - socketConnect(); - console.log('소켓연결'); + if (tripId && visitDate) { + socketConnect(tripId, visitDate.visitDate); + console.log(visitDate); + } return () => { socketClient.deactivate(); }; }, [tripId, visitDate, socketCallback]); - return { tripInfo, tripItem, tripPath, tripMember, tripBudget, callBackPub }; + return { + tripInfo, + tripItem, + tripPath, + tripMember, + tripBudget, + tripId, + callBackPub, + }; }; diff --git a/src/recoil/socket.ts b/src/recoil/socket.ts index ab7bb76b..fca451c7 100644 --- a/src/recoil/socket.ts +++ b/src/recoil/socket.ts @@ -2,15 +2,10 @@ import { atom } from 'recoil'; export const tripIdState = atom({ key: 'tripIdState', - default: '1', + default: '', }); export const visitDateState = atom<{ visitDate: string } | null>({ key: 'visitDateState', - default: { visitDate: '2024-01-03' }, -}); - -export const memberIdState = atom<{ token: number | null }>({ - key: 'memberIdState', - default: { token: null }, + default: { visitDate: '' }, }); diff --git a/src/router/socketRouter.tsx b/src/router/socketRouter.tsx index e679617b..228c62b5 100644 --- a/src/router/socketRouter.tsx +++ b/src/router/socketRouter.tsx @@ -5,19 +5,11 @@ import { PlanAddPlace } from '@pages/plan/addPlace/PlanAddPlace.page'; import PlanPlaceSearch from '@pages/plan/planPlaceSearch.page'; import Trip from '@pages/trip/trip.page'; import MainLayout from './routerLayout'; -import { useRecoilValue } from 'recoil'; -import { tripIdState, visitDateState } from '@recoil/socket'; import { AddOurList } from '@pages/trip/AddOurList'; const SocketRoutes = () => { - const tripId = useRecoilValue(tripIdState); - const visitDate = useRecoilValue(visitDateState); - if (!tripId || !visitDate) { - return
에러
; - } - return ( - + } /> } /> From 5017bcf152f3969e85ef2f3396d7147150f05eb0 Mon Sep 17 00:00:00 2001 From: Shim Jeong ah <35457850+joanShim@users.noreply.github.com> Date: Sun, 21 Jan 2024 00:04:13 +0900 Subject: [PATCH 14/24] =?UTF-8?q?Feat:=20=EC=97=AC=EC=A0=95=EA=B3=84?= =?UTF-8?q?=ED=9A=8D=20=EC=95=84=EC=9D=B4=ED=85=9C=20=EC=B6=94=EA=B0=80=20?= =?UTF-8?q?api=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/@types/tours.types.ts | 15 +++++ src/api/socket.ts | 4 +- src/api/trips.ts | 2 +- .../OurLiked.tsx} | 11 ++-- src/pages/plan/AddToTripPlan/OurLikedList.tsx | 62 +++++++++++++++++ .../plan/AddToTripPlan/OurLikedListItem.tsx | 66 +++++++++++++++++++ .../AddtoListBtn.tsx | 28 ++++++-- .../{addPlace => addToOurPlace}/MyLiked.tsx | 0 .../MyLikedList.tsx | 0 .../MyLikedListItem.tsx | 6 ++ .../PlanAddPlace.page.tsx | 4 +- .../ResultCategoryPlan.tsx | 0 .../ResultItem.tsx | 0 .../SearchResult.tsx | 0 .../{AddOurList.tsx => AddOurList.page.tsx} | 4 +- src/router/socketRouter.tsx | 4 +- 16 files changed, 185 insertions(+), 21 deletions(-) rename src/pages/plan/{OurLikedList.tsx => AddToTripPlan/OurLiked.tsx} (91%) create mode 100644 src/pages/plan/AddToTripPlan/OurLikedList.tsx create mode 100644 src/pages/plan/AddToTripPlan/OurLikedListItem.tsx rename src/pages/plan/{addPlace => addToOurPlace}/AddtoListBtn.tsx (50%) rename src/pages/plan/{addPlace => addToOurPlace}/MyLiked.tsx (100%) rename src/pages/plan/{addPlace => addToOurPlace}/MyLikedList.tsx (100%) rename src/pages/plan/{addPlace => addToOurPlace}/MyLikedListItem.tsx (95%) rename src/pages/plan/{addPlace => addToOurPlace}/PlanAddPlace.page.tsx (91%) rename src/pages/plan/{addPlace => addToOurPlace}/ResultCategoryPlan.tsx (100%) rename src/pages/plan/{addPlace => addToOurPlace}/ResultItem.tsx (100%) rename src/pages/plan/{addPlace => addToOurPlace}/SearchResult.tsx (100%) rename src/pages/trip/{AddOurList.tsx => AddOurList.page.tsx} (84%) diff --git a/src/@types/tours.types.ts b/src/@types/tours.types.ts index 2b722c6d..ccd95671 100644 --- a/src/@types/tours.types.ts +++ b/src/@types/tours.types.ts @@ -37,3 +37,18 @@ export interface TourType { longitude?: string; latitude?: string; } + +export interface LikedListType { + tripLikedItemId: number; + tourItemId: number; + contentTypeId: number; + title: string; + ratingAverage: number; + reviewCount: number; + smallThumbnailUrl: string; + tourAddress: string; + prefer: boolean; + notPrefer: boolean; + preferTotalCount: number; + notPreferTotalCount: number; +} diff --git a/src/api/socket.ts b/src/api/socket.ts index 000830cf..300d9037 100644 --- a/src/api/socket.ts +++ b/src/api/socket.ts @@ -79,6 +79,7 @@ export const pubAddTripItem = ( destination: `/pub/trips/${tripId}/addTripItems`, body: JSON.stringify(pubAddTripItem), }); + console.log(pubAddTripItem); }; // 여행 아이템 예상 가격 업데이트 이벤트 발생시 @@ -101,8 +102,6 @@ export const pubUpdateTripItem = ( destination: `/pub/trips/${tripId}/updateTripItemOrder`, body: JSON.stringify(pubUpdateTripItem), }); - - console.log('데이터', pubUpdateTripItem); }; // 여행 날짜별 교통 수단 변경 이벤트 발생시 (01/16 업데이트) @@ -136,7 +135,6 @@ export const pubDeleteItem = ( destination: `/pub/tripItems/${tripItemId}/deleteItem`, body: JSON.stringify(pubDeleteItem), }); - console.log(pubDeleteItem); }; // 멤버 여정 페이지로 입장 이벤트 발생시 diff --git a/src/api/trips.ts b/src/api/trips.ts index dc41f9e3..405dd43d 100644 --- a/src/api/trips.ts +++ b/src/api/trips.ts @@ -54,7 +54,7 @@ export const getTripsLike = async ( }; // 우리의 관심 목록 등록 -export const postTripsLike = async (tripId: number, tourItemIds: number[]) => { +export const postTripsLike = async (tripId: string, tourItemIds: number[]) => { const requestBody = { tourItemIds: tourItemIds, }; diff --git a/src/pages/plan/OurLikedList.tsx b/src/pages/plan/AddToTripPlan/OurLiked.tsx similarity index 91% rename from src/pages/plan/OurLikedList.tsx rename to src/pages/plan/AddToTripPlan/OurLiked.tsx index 907790ac..7b0dae46 100644 --- a/src/pages/plan/OurLikedList.tsx +++ b/src/pages/plan/AddToTripPlan/OurLiked.tsx @@ -3,12 +3,11 @@ import { useState } from 'react'; import { Spinner } from '@components/common/spinner/Spinner'; import { getTripsLike } from '@api/trips'; import { getTripIdFromUrl } from '@utils/getTripIdFromUrl'; - -import { MyLikedList } from './addPlace/MyLikedList'; import WishCategory from '@components/Wish/WishCategory'; -import AddToListButton from './addPlace/AddtoListBtn'; +import AddToListButton from '../addToOurPlace/AddtoListBtn'; +import { OurLikedList } from './OurLikedList'; -export const OurLikedList = () => { +export const OurLiked = () => { const [selectedContentTypeId, setSelectedContentTypeId] = useState< null | number >(null); @@ -60,10 +59,10 @@ export const OurLikedList = () => { {noResults ? (
- 나의 관심목록이 없습니다. + 우리의 관심목록이 없습니다.
) : ( - }; + fetchNextPage: () => void; + hasNextPage: boolean; + isLoading: boolean; + selectedContentTypeId: number | null; +} + +export const OurLikedList: React.FC = ({ + toursData, + fetchNextPage, + hasNextPage, + isLoading, + selectedContentTypeId, +}) => { + if (!toursData || toursData.pages.length === 0) { + return
데이터를 불러오는 중 오류가 발생했습니다.
; + } + + const filteredData = + selectedContentTypeId !== null + ? toursData.pages.map((group) => ({ + data: { + content: group.data.content.filter( + (item) => item.contentTypeId === selectedContentTypeId, + ), + }, + })) + : toursData.pages; + + return ( +
+ fetchNextPage()} + hasMore={hasNextPage} + loader={ +
+ +
+ }> +
+ {!isLoading && + filteredData.map((group) => ( + + {group?.data.content.map((wishList: LikedListType) => ( + + ))} + + ))} +
+ +
+ ); +}; diff --git a/src/pages/plan/AddToTripPlan/OurLikedListItem.tsx b/src/pages/plan/AddToTripPlan/OurLikedListItem.tsx new file mode 100644 index 00000000..19a20840 --- /dev/null +++ b/src/pages/plan/AddToTripPlan/OurLikedListItem.tsx @@ -0,0 +1,66 @@ +import { LikedListType } from '@/@types/tours.types'; +import { ListCheckBtn } from '@components/common/button/ListSelectBtn'; +import { StarIcon } from '@components/common/icons/Icons'; +import { selectedItemsState } from '@recoil/listItem'; +import { useRecoilState } from 'recoil'; +import { useNavigate } from 'react-router-dom'; +import { useEffect } from 'react'; + +interface WishItemProps { + wishList: LikedListType; +} + +export const OurLikedListItem: React.FC = ({ wishList }) => { + const { + tourItemId, + title, + ratingAverage, + reviewCount, + smallThumbnailUrl, + tourAddress, + } = wishList; + + const [selectedItems, setSelectedItems] = useRecoilState(selectedItemsState); + const navigate = useNavigate(); + + useEffect(() => { + setSelectedItems([]); + }, []); + + const handleSelect = () => { + if (selectedItems.includes(tourItemId)) { + setSelectedItems(selectedItems.filter((item) => item !== tourItemId)); + } else { + setSelectedItems([...selectedItems, tourItemId]); + } + }; + + return ( +
navigate(`/detail/${tourItemId}`)}> +
+ {title} +
+
+
{title}
+
+
+ +
+ + {ratingAverage.toFixed(1)}({reviewCount}) + + + {tourAddress ? tourAddress : '제공되는 주소가 없습니다.'} + +
+
+ +
+ ); +}; diff --git a/src/pages/plan/addPlace/AddtoListBtn.tsx b/src/pages/plan/addToOurPlace/AddtoListBtn.tsx similarity index 50% rename from src/pages/plan/addPlace/AddtoListBtn.tsx rename to src/pages/plan/addToOurPlace/AddtoListBtn.tsx index 4b3bcb08..6fc1ff16 100644 --- a/src/pages/plan/addPlace/AddtoListBtn.tsx +++ b/src/pages/plan/addToOurPlace/AddtoListBtn.tsx @@ -1,9 +1,13 @@ import { useRecoilValue } from 'recoil'; import { selectedItemsState } from '@recoil/listItem'; import { ButtonPrimary } from '@components/common/button/Button'; -import { postTripsLike, putTrips } from '@api/trips'; +import { postTripsLike } from '@api/trips'; import { getTripIdFromUrl } from '@utils/getTripIdFromUrl'; import { useNavigate } from 'react-router-dom'; +import { pubAddTripItem } from '@api/socket'; +import { useContext } from 'react'; +import { socketContext } from '@hooks/useSocket'; +import { visitDateState } from '@recoil/socket'; const AddToListButton = ({ apiType, @@ -11,20 +15,34 @@ const AddToListButton = ({ apiType: 'postTripsLike' | 'putTrips'; }) => { const selectedTourItemIds = useRecoilValue(selectedItemsState); - const VISIT_DATE = '2024-02-01'; + console.log('selectedTourItemIds', selectedTourItemIds); + const visitDate = useRecoilValue(visitDateState); + console.log('visitDate', visitDate); + const { callBackPub } = useContext(socketContext); const navigate = useNavigate(); const handleAddClick = async () => { - const tripId = getTripIdFromUrl(); + const tripId = getTripIdFromUrl().toString(); if (tripId) { try { let response; if (apiType === 'postTripsLike') { response = await postTripsLike(tripId, selectedTourItemIds); navigate(`/trip/${tripId}`); - } else if (apiType === 'putTrips' && selectedTourItemIds.length > 0) { - response = await putTrips(tripId, selectedTourItemIds[0], VISIT_DATE); + } else if (apiType === 'putTrips' && visitDate) { + const newTripItems = selectedTourItemIds.map((tourItemId) => ({ + tourItemId: tourItemId, + })); + + const pubAddTripItemData = { + visitDate: visitDate.visitDate, + newTripItems, + }; + + console.log('pubAddTripItemData', pubAddTripItemData); + callBackPub(() => pubAddTripItem(pubAddTripItemData, tripId)); + navigate(`/trip/${tripId}/plan`); } console.log('API response:', response); } catch (error) { diff --git a/src/pages/plan/addPlace/MyLiked.tsx b/src/pages/plan/addToOurPlace/MyLiked.tsx similarity index 100% rename from src/pages/plan/addPlace/MyLiked.tsx rename to src/pages/plan/addToOurPlace/MyLiked.tsx diff --git a/src/pages/plan/addPlace/MyLikedList.tsx b/src/pages/plan/addToOurPlace/MyLikedList.tsx similarity index 100% rename from src/pages/plan/addPlace/MyLikedList.tsx rename to src/pages/plan/addToOurPlace/MyLikedList.tsx diff --git a/src/pages/plan/addPlace/MyLikedListItem.tsx b/src/pages/plan/addToOurPlace/MyLikedListItem.tsx similarity index 95% rename from src/pages/plan/addPlace/MyLikedListItem.tsx rename to src/pages/plan/addToOurPlace/MyLikedListItem.tsx index 8e5fdf81..67628128 100644 --- a/src/pages/plan/addPlace/MyLikedListItem.tsx +++ b/src/pages/plan/addToOurPlace/MyLikedListItem.tsx @@ -4,6 +4,7 @@ import { StarIcon } from '@components/common/icons/Icons'; import { selectedItemsState } from '@recoil/listItem'; import { useRecoilState } from 'recoil'; import { useNavigate } from 'react-router-dom'; +import { useEffect } from 'react'; interface WishItemProps { wishList: TourType; @@ -21,6 +22,11 @@ export const MyLikedListItem: React.FC = ({ wishList }) => { const [selectedItems, setSelectedItems] = useRecoilState(selectedItemsState); const navigate = useNavigate(); + + useEffect(() => { + setSelectedItems([]); + }, []); + const handleSelect = () => { if (selectedItems.includes(id)) { setSelectedItems(selectedItems.filter((item) => item !== id)); diff --git a/src/pages/plan/addPlace/PlanAddPlace.page.tsx b/src/pages/plan/addToOurPlace/PlanAddPlace.page.tsx similarity index 91% rename from src/pages/plan/addPlace/PlanAddPlace.page.tsx rename to src/pages/plan/addToOurPlace/PlanAddPlace.page.tsx index 303ad92c..4fcfa8bf 100644 --- a/src/pages/plan/addPlace/PlanAddPlace.page.tsx +++ b/src/pages/plan/addToOurPlace/PlanAddPlace.page.tsx @@ -2,7 +2,7 @@ import SearchInput from '@components/search/SearchInput'; import { useEffect, useState } from 'react'; import { useLocation } from 'react-router-dom'; import { SearchResultForPlan } from './SearchResult'; -import { OurLikedList } from '../OurLikedList'; +import { OurLiked } from '../AddToTripPlan/OurLiked'; export const PlanAddPlace = () => { const location = useLocation(); @@ -25,7 +25,7 @@ export const PlanAddPlace = () => { {searchWord ? ( ) : ( - + )}
); diff --git a/src/pages/plan/addPlace/ResultCategoryPlan.tsx b/src/pages/plan/addToOurPlace/ResultCategoryPlan.tsx similarity index 100% rename from src/pages/plan/addPlace/ResultCategoryPlan.tsx rename to src/pages/plan/addToOurPlace/ResultCategoryPlan.tsx diff --git a/src/pages/plan/addPlace/ResultItem.tsx b/src/pages/plan/addToOurPlace/ResultItem.tsx similarity index 100% rename from src/pages/plan/addPlace/ResultItem.tsx rename to src/pages/plan/addToOurPlace/ResultItem.tsx diff --git a/src/pages/plan/addPlace/SearchResult.tsx b/src/pages/plan/addToOurPlace/SearchResult.tsx similarity index 100% rename from src/pages/plan/addPlace/SearchResult.tsx rename to src/pages/plan/addToOurPlace/SearchResult.tsx diff --git a/src/pages/trip/AddOurList.tsx b/src/pages/trip/AddOurList.page.tsx similarity index 84% rename from src/pages/trip/AddOurList.tsx rename to src/pages/trip/AddOurList.page.tsx index 38da00c8..14ce38b8 100644 --- a/src/pages/trip/AddOurList.tsx +++ b/src/pages/trip/AddOurList.page.tsx @@ -1,6 +1,6 @@ import SearchInput from '@components/search/SearchInput'; -import { MyLiked } from '@pages/plan/addPlace/MyLiked'; -import { SearchResultForPlan } from '@pages/plan/addPlace/SearchResult'; +import { MyLiked } from '@pages/plan/addToOurPlace/MyLiked'; +import { SearchResultForPlan } from '@pages/plan/addToOurPlace/SearchResult'; import { useEffect, useState } from 'react'; import { useLocation } from 'react-router-dom'; diff --git a/src/router/socketRouter.tsx b/src/router/socketRouter.tsx index e679617b..b8bfc39b 100644 --- a/src/router/socketRouter.tsx +++ b/src/router/socketRouter.tsx @@ -1,13 +1,13 @@ import { Route, Routes } from 'react-router-dom'; import { useSocket, socketContext } from '@hooks/useSocket'; import PlanTrip from '@pages/plan/planTrip.page'; -import { PlanAddPlace } from '@pages/plan/addPlace/PlanAddPlace.page'; +import { PlanAddPlace } from '@pages/plan/addToOurPlace/PlanAddPlace.page'; import PlanPlaceSearch from '@pages/plan/planPlaceSearch.page'; import Trip from '@pages/trip/trip.page'; import MainLayout from './routerLayout'; import { useRecoilValue } from 'recoil'; import { tripIdState, visitDateState } from '@recoil/socket'; -import { AddOurList } from '@pages/trip/AddOurList'; +import { AddOurList } from '@pages/trip/AddOurList.page'; const SocketRoutes = () => { const tripId = useRecoilValue(tripIdState); From 89b29cceabd3f5e7d92c29a2c9e5cafc5ff5cd00 Mon Sep 17 00:00:00 2001 From: sue Date: Sun, 21 Jan 2024 00:24:16 +0900 Subject: [PATCH 15/24] =?UTF-8?q?Fix:=20=ED=83=AD=20=ED=8A=B8=EB=A6=AC?= =?UTF-8?q?=EA=B1=B0=20=EB=94=94=EC=9E=90=EC=9D=B8=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/tab/Tab.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/common/tab/Tab.tsx b/src/components/common/tab/Tab.tsx index f3a799c9..c75d14f2 100644 --- a/src/components/common/tab/Tab.tsx +++ b/src/components/common/tab/Tab.tsx @@ -37,7 +37,7 @@ const Tab = ({ lists, contents }: TabProps) => { key={index} className={`${ isDayTab ? 'caption1' : 'headline1 flex-1' - } flex min-w-[57px] cursor-pointer select-none items-center justify-center overflow-x-scroll border-b-2 border-solid border-gray2 py-[8px] leading-none text-gray4 outline-none data-[state=active]:border-b-2 data-[state=active]:border-solid data-[state=active]:border-black data-[state=active]:text-black`} + } flex min-w-[57px] cursor-pointer select-none items-center justify-center border-b-2 border-solid border-gray2 py-[8px] leading-none text-gray4 outline-none data-[state=active]:border-b-2 data-[state=active]:border-solid data-[state=active]:border-black data-[state=active]:text-black`} value={`tab${index}`}> {list} From f58e6291b9728e77a2cbedba2ddd0fc90ff1c80b Mon Sep 17 00:00:00 2001 From: Hojin Date: Sun, 21 Jan 2024 11:08:07 +0900 Subject: [PATCH 16/24] =?UTF-8?q?Feat:=20=EC=83=81=EC=84=B8=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EC=9D=BC=EC=A0=95=EC=B6=94=EA=B0=80?= =?UTF-8?q?=ED=95=98=EA=B8=B0=20=ED=8D=BC=EB=B8=94=EB=A6=AC=EC=8B=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/trips.ts | 6 ++ .../DetailSectionTop/DetailAddSchedule.tsx | 78 ++++++++++++++----- src/components/common/icons/Icons.tsx | 4 +- src/hooks/useGetMyTrips.ts | 28 +++++++ src/utils/utils.ts | 19 +++-- 5 files changed, 110 insertions(+), 25 deletions(-) create mode 100644 src/hooks/useGetMyTrips.ts diff --git a/src/api/trips.ts b/src/api/trips.ts index 675b6ee4..c2fdf166 100644 --- a/src/api/trips.ts +++ b/src/api/trips.ts @@ -91,3 +91,9 @@ export const getTripsAuthority = async (tripId: string) => { const res = await authClient.get(`trips/${tripId}/authority`); return res; }; + +// 나의 여정목록 조회 +export const getMyTrips = async () => { + const res = await authClient.get(`trips`); + return res; +}; diff --git a/src/components/DetailSectionTop/DetailAddSchedule.tsx b/src/components/DetailSectionTop/DetailAddSchedule.tsx index d6fac6dd..faf5982a 100644 --- a/src/components/DetailSectionTop/DetailAddSchedule.tsx +++ b/src/components/DetailSectionTop/DetailAddSchedule.tsx @@ -2,14 +2,35 @@ import * as Dialog from '@radix-ui/react-dialog'; import { CalendarIcon } from '@components/common/icons/Icons'; import Alert from '@components/common/alert/Alert'; import { useNavigate } from 'react-router-dom'; +import { PlusIcon } from '@components/common/icons/Icons'; +import { useGetMyTrips } from '@hooks/useGetMyTrips'; +import { calculateTripDuration } from '@utils/calculateTripDuration'; +import { calculateDayAndDate } from '@utils/utils'; const DetailAddSchedule = () => { + const { myTrips } = useGetMyTrips(); + const tripDuration = calculateTripDuration( + myTrips[0]?.startDate, + myTrips[0]?.endDate, + ); + + const { SmallDayArr } = calculateDayAndDate( + myTrips[0]?.startDate, + myTrips[0]?.endDate, + ); + + console.log(SmallDayArr); + const navigate = useNavigate(); const handleConfirm = () => { navigate('/login'); }; + const handleCreate = () => { + navigate('/create'); + }; + return ( @@ -24,30 +45,51 @@ const DetailAddSchedule = () => { - -
-
-
- -
-
- 강릉 속초 여행 -
-
- 2023.12.20 - 12.22 (3박 4일) + {myTrips.map((trip, index) => { + // 각 여행에 대한 기간을 계산합니다. + const tripDuration = calculateTripDuration( + trip.startDate, + trip.endDate, + ); + + return ( +
+
+
+ {`Thumbnail +
+
+ {trip.tripName} +
+
+ {trip.startDate?.replace(/-/g, '.')} -{' '} + {trip.endDate?.substring(5).replace(/-/g, '.')} ( + {tripDuration}) +
+
-
-
+ ); + })} +
@@ -67,7 +109,7 @@ const DetailAddSchedule = () => { } onConfirm={handleConfirm}>
-
diff --git a/src/components/common/icons/Icons.tsx b/src/components/common/icons/Icons.tsx index 5bc316d1..9ae7a7f8 100644 --- a/src/components/common/icons/Icons.tsx +++ b/src/components/common/icons/Icons.tsx @@ -478,6 +478,7 @@ export const PlusIcon: React.FC = ({ size = 20, color = 'black', fill = 'none', + className, }) => { return ( = ({ width={size} height={size} viewBox="0 0 14 14" - fill={fill}> + fill={fill} + className={className}> { + const { data, isLoading, isError } = useQuery({ + queryKey: ['getMyTrips'], + queryFn: () => getMyTrips(), + staleTime: 60000, + }); + + const myTrips = data?.data.data; + + if (isLoading || isError) { + return { myTrips: [] }; + } + + return { myTrips }; +}; diff --git a/src/utils/utils.ts b/src/utils/utils.ts index b371a609..6176f3e0 100644 --- a/src/utils/utils.ts +++ b/src/utils/utils.ts @@ -30,13 +30,19 @@ export const getEmoji = (content: string) => { export function calculateDayAndDate(startDate: string, endDate: string) { let start = new Date(startDate); const end = new Date(endDate); - const differenceInDays: number = - (end.getTime() - start.getTime()) / (1000 * 60 * 60 * 24); - - const DayArr = Array.from( - { length: Math.ceil(differenceInDays) + 1 }, - (_, i) => `DAY ${i + 1}`, + const differenceInDays: number = Math.round( + (end.getTime() - start.getTime()) / (1000 * 3600 * 24), ); + + const createDayArray = (prefix: string) => + Array.from( + { length: differenceInDays + 1 }, + (_, i) => `${prefix} ${i + 1}`, + ); + + const DayArr = createDayArray('DAY'); + const SmallDayArr = createDayArray('Day'); + const DateArr = []; while (start <= end) { @@ -47,5 +53,6 @@ export function calculateDayAndDate(startDate: string, endDate: string) { return { DayArr, DateArr, + SmallDayArr, }; } From 405af799da9f3309981ff0c80dfe5b015bdac86b Mon Sep 17 00:00:00 2001 From: Hojin Date: Sun, 21 Jan 2024 14:55:43 +0900 Subject: [PATCH 17/24] =?UTF-8?q?Refactor:=20=EC=97=AC=EC=A0=95=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EB=A6=AC=ED=8E=99=ED=86=A0=EB=A7=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/@types/service.ts | 10 ++-- src/@types/socket.types.ts | 12 ++--- src/@types/trips.types.ts | 6 +-- src/api/socket.ts | 1 - src/api/trips.ts | 10 ++-- src/components/MyTrip/MyTripItem.tsx | 2 +- src/components/Plan/PlanEditItemBox.tsx | 10 +++- src/components/Plan/PlanItem.tsx | 10 ++-- src/components/Plan/PlanMoveItem.tsx | 50 ++++++++++--------- src/components/Plan/PlanSectionTop.tsx | 2 - src/components/Plan/TripBudget.tsx | 5 +- src/components/Trip/EditCodeModal.tsx | 2 +- src/components/Trip/LikedToursList.tsx | 11 ++-- .../LikedToursLists/LikedToursListBox.tsx | 2 +- .../LikedToursLists/LikedToursListItem.tsx | 2 +- src/components/Trip/TripRealtimeEditor.tsx | 1 - src/components/Trip/TripSchedule.tsx | 5 +- src/components/Trip/TripSectionTop.tsx | 5 -- src/hooks/useGetTripsAuthority.ts | 1 - src/hooks/useSocket.ts | 1 - src/pages/plan/AddToTripPlan/OurLiked.tsx | 8 ++- src/pages/plan/addToOurPlace/AddtoListBtn.tsx | 21 ++++---- src/pages/plan/addToOurPlace/MyLiked.tsx | 3 -- src/pages/plan/addToOurPlace/SearchResult.tsx | 10 +--- src/pages/share/shareCode.page.tsx | 14 +++--- src/pages/trip/AddOurList.page.tsx | 1 - src/recoil/socket.ts | 10 ++-- src/router/socketRouter.tsx | 5 +- 28 files changed, 99 insertions(+), 121 deletions(-) diff --git a/src/@types/service.ts b/src/@types/service.ts index de3751a9..bae375b2 100644 --- a/src/@types/service.ts +++ b/src/@types/service.ts @@ -2,7 +2,7 @@ export type subInfoRes = { status: number; message: string; data: { - tripId: number; + tripId: string; startDate: string; endDate: string; numberOfPeople: number; @@ -16,7 +16,7 @@ export type subItemRes = { status: number; message: string; data: { - tripId: number; + tripId: string; visitDate: string; transportation: 'CAR' | 'PUBLIC_TRANSPORTATION'; tripItems: { @@ -52,7 +52,7 @@ export type subPathRes = { status: number; message: string; data: { - tripId: number; + tripId: string; visitDate: string; transportation: 'CAR' | 'PUBLIC_TRANSPORTATION'; paths: { @@ -77,7 +77,7 @@ export type subMemberRes = { status: number; message: string; data: { - tripId: number; + tripId: string; tripMembers: { memberId: number; name: string; @@ -91,7 +91,7 @@ export type subBudgetRes = { status: number; message: string; data: { - tripId: number; + tripId: string; budget: number; calculatedPrice: number; } | null; diff --git a/src/@types/socket.types.ts b/src/@types/socket.types.ts index 2a70ed7b..49244096 100644 --- a/src/@types/socket.types.ts +++ b/src/@types/socket.types.ts @@ -2,7 +2,7 @@ type subInfoMessage = (message: { status: number; message: string; data: { - tripId: number; + tripId: string; startDate: string; endDate: string; numberOfPeople: number; @@ -16,7 +16,7 @@ type subItemMessage = (response: { status: number; message: string; data: { - tripId: number; + tripId: string; visitDate: string; transportation: 'CAR' | 'PUBLIC_TRANSPORTATION'; tripItems: { @@ -36,7 +36,7 @@ type subPathMessage = (response: { status: number; message: string; data: { - tripId: number; + tripId: string; visitDate: string; transportation: 'CAR' | 'PUBLIC_TRANSPORTATION'; paths: { @@ -61,7 +61,7 @@ type subMemberMessage = (response: { status: number; message: string; data: { - tripId: number; + tripId: string; tripMembers: { memberId: number; name: string; @@ -76,7 +76,7 @@ type subBudgetMessage = (response: { status: number; message: string; data: { - tripId: number; + tripId: string; budget: number; calculatedPrice: number; }; @@ -98,7 +98,7 @@ interface pubAddTripItem { } interface pubUpdatePrice { - tripId: number; + tripId: string; visitDate: string; price: number; } diff --git a/src/@types/trips.types.ts b/src/@types/trips.types.ts index 3197ccfe..0b4d17df 100644 --- a/src/@types/trips.types.ts +++ b/src/@types/trips.types.ts @@ -8,7 +8,7 @@ interface TripRequest { } interface MyTripType { - tripId: number; + tripId: string; tripName: string; startDate: string; endDate: string; @@ -35,7 +35,7 @@ interface ourTripType { } interface ThumbsProps { - tripId: number; + tripId: string; tourId: number; prefer: boolean; notPrefer: boolean; @@ -47,6 +47,6 @@ interface AuthorityType { data: { memberId: number; tripAuthority: string; - TripId: number; + tripId: string; }; } diff --git a/src/api/socket.ts b/src/api/socket.ts index 300d9037..0ade3027 100644 --- a/src/api/socket.ts +++ b/src/api/socket.ts @@ -79,7 +79,6 @@ export const pubAddTripItem = ( destination: `/pub/trips/${tripId}/addTripItems`, body: JSON.stringify(pubAddTripItem), }); - console.log(pubAddTripItem); }; // 여행 아이템 예상 가격 업데이트 이벤트 발생시 diff --git a/src/api/trips.ts b/src/api/trips.ts index 0f309f3c..9c89db61 100644 --- a/src/api/trips.ts +++ b/src/api/trips.ts @@ -11,7 +11,7 @@ export const getTrips = async (tripId: string) => { // 여정 기본정보 수정 export const putTrips = async ( - tripId: number, + tripId: string, tourItemId: number, visitDate: string, ) => { @@ -24,7 +24,7 @@ export const putTrips = async ( }; // 여정 탈퇴 -export const deleteTrips = async (tripId: number) => { +export const deleteTrips = async (tripId: string) => { try { const res = await authClient.delete(`trips/${tripId}`); @@ -42,7 +42,7 @@ export const postTrips = async (tripsData: TripRequest) => { // 우리의 관심목록 조회 export const getTripsLike = async ( - tripId: number, + tripId: string, page: number, size: number, ) => { @@ -67,7 +67,7 @@ export const postTripsLike = async (tripId: string, tourItemIds: number[]) => { // 우리의 관심 목록 좋아요/싫어요 export const postTripsLikeHate = async ( - tripId: number, + tripId: string, tourId: number, prefer: boolean, notPrefer: boolean, @@ -113,7 +113,7 @@ export const getTripsjoin = async (tripId: string) => { }; // 여정 참여 -export const postTripsjoin = async (tripId: number, joinCode: string) => { +export const postTripsjoin = async (tripId: string, joinCode: string) => { const res = await authClient.post(`trips/${tripId}/join`, { joinCode }); return res; }; diff --git a/src/components/MyTrip/MyTripItem.tsx b/src/components/MyTrip/MyTripItem.tsx index 2762a3d1..f327aa9c 100644 --- a/src/components/MyTrip/MyTripItem.tsx +++ b/src/components/MyTrip/MyTripItem.tsx @@ -31,7 +31,7 @@ const MyTripItem: React.FC = ({ myTripList }) => { const tripDuration = calculateTripDuration(startDate, endDate); const { mutate: deleteMyTripMutate } = useMutation({ - mutationFn: (tripId: number) => deleteTrips(tripId), + mutationFn: (tripId: string) => deleteTrips(tripId), onSuccess: () => { queryClient.invalidateQueries({ queryKey: ['myTrips'] }); }, diff --git a/src/components/Plan/PlanEditItemBox.tsx b/src/components/Plan/PlanEditItemBox.tsx index e5b0f944..4c5ce80d 100644 --- a/src/components/Plan/PlanEditItemBox.tsx +++ b/src/components/Plan/PlanEditItemBox.tsx @@ -14,6 +14,8 @@ import { pubUpdateTripItemReq } from '@/@types/service'; import Alert from '@components/common/alert/Alert'; import ToastPopUp from '@components/common/toastpopup/ToastPopUp'; import PlanMoveItem from './PlanMoveItem'; +import { useRecoilState } from 'recoil'; +import { isEditState } from '@recoil/socket'; type PlanItemBoxProps = { item: TripItem[]; @@ -33,7 +35,7 @@ const PlanEditItemBox = ({ } const { callBackPub } = useContext(socketContext); - + const [, setIsEdit] = useRecoilState(isEditState); const [items, setItems] = useState(item); const [newData, setNewData] = useState(null); const [selectedItemId, setSelectedItemId] = useState(null); @@ -78,6 +80,7 @@ const PlanEditItemBox = ({ noun: '여행지', verb: '삭제', })); + setIsEdit(false); }; const handleRadioChange = (id: number | null) => { @@ -105,7 +108,10 @@ const PlanEditItemBox = ({ {(provided) => ( -
+
{day}
{items.map((item, index) => ( = ({ date, day }) => { const navigate = useNavigate(); const { tripAuthority } = useGetTripsAuthority(); - const [isEdit, SetIsEdit] = useState(false); + const [isEdit, setIsEdit] = useRecoilState(isEditState); + const tap = useRecoilValue(tapState); const [, setVisitDate] = useRecoilState(visitDateState); const { tripItem, tripPath, callBackPub, tripId } = useContext(socketContext); @@ -31,11 +32,12 @@ const PlanItem: React.FC = ({ date, day }) => { if (date && tripId) { callBackPub(() => pubGetPathAndItems({ visitDate: date }, tripId)); } + setIsEdit(false); } }, [tap]); const handleEdit = () => { - SetIsEdit((prev) => !prev); + setIsEdit((prev) => !prev); }; const handleTranspo = ( diff --git a/src/components/Plan/PlanMoveItem.tsx b/src/components/Plan/PlanMoveItem.tsx index b06df513..0daa5b5f 100644 --- a/src/components/Plan/PlanMoveItem.tsx +++ b/src/components/Plan/PlanMoveItem.tsx @@ -7,6 +7,8 @@ import { useContext } from 'react'; import { socketContext } from '@hooks/useSocket'; import { useState, useEffect } from 'react'; import ToastPopUp from '@components/common/toastpopup/ToastPopUp'; +import { useRecoilState } from 'recoil'; +import { isEditState } from '@recoil/socket'; interface PlanMoveItemProps { isCheck: number | null; @@ -19,6 +21,7 @@ const PlanMoveItem: React.FC = ({ tripId, visitDate, }) => { + const [, setIsEdit] = useRecoilState(isEditState); const { callBackPub } = useContext(socketContext); const day = useRecoilValue(dayState); const date = useRecoilValue(dateState); @@ -50,6 +53,7 @@ const PlanMoveItem: React.FC = ({ noun: '날짜 이동', verb: '완료', })); + setIsEdit(false); }; useEffect(() => { @@ -81,31 +85,29 @@ const PlanMoveItem: React.FC = ({ - - + +
-
-
-
-

- 날짜 이동 -

-
-
-
- {day.map((day, index) => ( - - - - ))} -
+
+
+

+ 날짜 이동 +

+
+
+
+ {day.map((day, index) => ( + + + + ))}
diff --git a/src/components/Plan/PlanSectionTop.tsx b/src/components/Plan/PlanSectionTop.tsx index f089f621..480ec571 100644 --- a/src/components/Plan/PlanSectionTop.tsx +++ b/src/components/Plan/PlanSectionTop.tsx @@ -15,14 +15,12 @@ import { useEffect } from 'react'; import { useRecoilState } from 'recoil'; import { dayState, dateState } from '@recoil/plan'; import { calculateDayAndDate } from '@utils/utils'; -import { TripSchedule } from '@components/Trip/TripSchedule'; import { useGetTrips } from '@hooks/useGetTrips'; import { visitDateState } from '@recoil/socket'; import { useState } from 'react'; import { getItem } from '@utils/localStorageFun'; import PlanSchedule from './PlanSchedule'; - const PlanSectionTop = () => { const navigate = useNavigate(); const [, setDay] = useRecoilState(dayState); diff --git a/src/components/Plan/TripBudget.tsx b/src/components/Plan/TripBudget.tsx index ee1e5388..97a63c32 100644 --- a/src/components/Plan/TripBudget.tsx +++ b/src/components/Plan/TripBudget.tsx @@ -4,14 +4,11 @@ import { CloseIcon, SettingIcons } from '@components/common/icons/Icons'; import { useGetTripsAuthority } from '@hooks/useGetTripsAuthority'; import { socketContext } from '@hooks/useSocket'; import * as Progress from '@radix-ui/react-progress'; -import { tripIdState } from '@recoil/socket'; import { useContext, useState } from 'react'; -import { useRecoilValue } from 'recoil'; const TripBudget = () => { const { tripAuthority } = useGetTripsAuthority(); - const { tripBudget } = useContext(socketContext); - const tripId = useRecoilValue(tripIdState); + const { tripBudget, tripId } = useContext(socketContext); const budget = tripBudget?.data; diff --git a/src/components/Trip/EditCodeModal.tsx b/src/components/Trip/EditCodeModal.tsx index 09609bfb..928deef6 100644 --- a/src/components/Trip/EditCodeModal.tsx +++ b/src/components/Trip/EditCodeModal.tsx @@ -16,7 +16,7 @@ const EditCodeModal = () => { const handleConfirm = async () => { if (tripId) { try { - const { data } = await postTripsjoin(Number(tripId), inputCode); + const { data } = await postTripsjoin(tripId, inputCode); if (data.status === 200) { setIsModalOpen(false); } diff --git a/src/components/Trip/LikedToursList.tsx b/src/components/Trip/LikedToursList.tsx index eab8eeea..5587077e 100644 --- a/src/components/Trip/LikedToursList.tsx +++ b/src/components/Trip/LikedToursList.tsx @@ -15,15 +15,16 @@ export const LikedToursList = () => { >(null); const navigate = useNavigate(); - const params = useParams(); + const { id: tripId } = useParams(); - const [selectedTripId, _] = useState(Number(params.id)); + if (!tripId) { + return; + } const { fetchNextPage, hasNextPage, data, isLoading, error } = useInfiniteQuery({ queryKey: ['ourTrips'], - queryFn: ({ pageParam = 0 }) => - getTripsLike(selectedTripId, pageParam, 10), + queryFn: ({ pageParam = 0 }) => getTripsLike(tripId, pageParam, 10), initialPageParam: 0, getNextPageParam: (lastPage) => { if ( @@ -62,7 +63,7 @@ export const LikedToursList = () => { fetchNextPage={fetchNextPage} hasNextPage={hasNextPage} isLoading={isLoading} - selectedTripId={selectedTripId} + selectedTripId={tripId} selectedContentTypeId={selectedContentTypeId} />
diff --git a/src/components/Trip/LikedToursLists/LikedToursListBox.tsx b/src/components/Trip/LikedToursLists/LikedToursListBox.tsx index 56c2db3d..39ef3aae 100644 --- a/src/components/Trip/LikedToursLists/LikedToursListBox.tsx +++ b/src/components/Trip/LikedToursLists/LikedToursListBox.tsx @@ -12,7 +12,7 @@ interface LikedToursListProps { hasNextPage: boolean; isLoading: boolean; selectedContentTypeId: number | null; - selectedTripId: number; + selectedTripId: string; } const LikedToursListBox: React.FC = ({ diff --git a/src/components/Trip/LikedToursLists/LikedToursListItem.tsx b/src/components/Trip/LikedToursLists/LikedToursListItem.tsx index 8fb54656..7260e8fa 100644 --- a/src/components/Trip/LikedToursLists/LikedToursListItem.tsx +++ b/src/components/Trip/LikedToursLists/LikedToursListItem.tsx @@ -12,7 +12,7 @@ import { useState } from 'react'; interface LikedToursListItemProps { ourTripList: ourTripType; - selectedTripId: number; + selectedTripId: string; } const LikedToursListItem: React.FC = ({ diff --git a/src/components/Trip/TripRealtimeEditor.tsx b/src/components/Trip/TripRealtimeEditor.tsx index b7f83c6d..3e47bee2 100644 --- a/src/components/Trip/TripRealtimeEditor.tsx +++ b/src/components/Trip/TripRealtimeEditor.tsx @@ -1,4 +1,3 @@ -import { useEffect, useState } from 'react'; import { socketContext } from '@hooks/useSocket'; import { useContext } from 'react'; import { UserIcon } from '@components/common/icons/Icons'; diff --git a/src/components/Trip/TripSchedule.tsx b/src/components/Trip/TripSchedule.tsx index a84d6fd6..ce4f7cf3 100644 --- a/src/components/Trip/TripSchedule.tsx +++ b/src/components/Trip/TripSchedule.tsx @@ -2,7 +2,6 @@ import { UserIcon } from '@components/common/icons/Icons'; import { useGetTrips } from '@hooks/useGetTrips'; import EditCodeModal from './EditCodeModal'; - export const TripSchedule = () => { const { tripName, startDate, endDate, numberOfPeople } = useGetTrips(); @@ -18,11 +17,11 @@ export const TripSchedule = () => {
-
+ {/*
-
+
*/}
diff --git a/src/components/Trip/TripSectionTop.tsx b/src/components/Trip/TripSectionTop.tsx index a966bab9..d1388108 100644 --- a/src/components/Trip/TripSectionTop.tsx +++ b/src/components/Trip/TripSectionTop.tsx @@ -5,10 +5,6 @@ import { BackBox } from '@components/common'; import { useNavigate } from 'react-router-dom'; import PlanTripButton from './PlanTripButton'; import { LikedToursList } from './LikedToursList'; - - -const TripSectionTop = () => { - const navigate = useNavigate(); import { useGetTripsAuthority } from '@hooks/useGetTripsAuthority'; import { useEffect, useState } from 'react'; import IsEditableModal from '@components/Share/IsEditableModal'; @@ -26,7 +22,6 @@ const TripSectionTop = () => { } }, [tripAuthority]); - return (
diff --git a/src/hooks/useGetTripsAuthority.ts b/src/hooks/useGetTripsAuthority.ts index 1dd72859..2db402cc 100644 --- a/src/hooks/useGetTripsAuthority.ts +++ b/src/hooks/useGetTripsAuthority.ts @@ -11,7 +11,6 @@ type useGetTripsAuthorityReturn = { export const useGetTripsAuthority = (): useGetTripsAuthorityReturn => { const { id } = useParams(); - const defaultReturn = { tripAuthority: null, memberId: null, diff --git a/src/hooks/useSocket.ts b/src/hooks/useSocket.ts index 37b7831a..d0eeef0f 100644 --- a/src/hooks/useSocket.ts +++ b/src/hooks/useSocket.ts @@ -91,7 +91,6 @@ export const useSocket = () => { useEffect(() => { if (tripId && visitDate) { socketConnect(tripId, visitDate.visitDate); - console.log(visitDate); } return () => { diff --git a/src/pages/plan/AddToTripPlan/OurLiked.tsx b/src/pages/plan/AddToTripPlan/OurLiked.tsx index 7b0dae46..3071afe5 100644 --- a/src/pages/plan/AddToTripPlan/OurLiked.tsx +++ b/src/pages/plan/AddToTripPlan/OurLiked.tsx @@ -6,8 +6,10 @@ import { getTripIdFromUrl } from '@utils/getTripIdFromUrl'; import WishCategory from '@components/Wish/WishCategory'; import AddToListButton from '../addToOurPlace/AddtoListBtn'; import { OurLikedList } from './OurLikedList'; +import { useParams } from 'react-router-dom'; export const OurLiked = () => { + const { id: tripId } = useParams(); const [selectedContentTypeId, setSelectedContentTypeId] = useState< null | number >(null); @@ -16,12 +18,10 @@ export const OurLiked = () => { setSelectedContentTypeId(contentTypeId); }; - const tripId = getTripIdFromUrl(); - const { fetchNextPage, hasNextPage, data, isLoading, error } = useInfiniteQuery({ queryKey: ['ourTrips'], - queryFn: ({ pageParam = 0 }) => getTripsLike(tripId, pageParam, 10), + queryFn: ({ pageParam = 0 }) => getTripsLike(tripId || '', pageParam, 10), initialPageParam: 0, getNextPageParam: (lastPage) => { if ( @@ -41,8 +41,6 @@ export const OurLiked = () => { }, }); - console.log('data', data); - if (isLoading) { return ; } diff --git a/src/pages/plan/addToOurPlace/AddtoListBtn.tsx b/src/pages/plan/addToOurPlace/AddtoListBtn.tsx index 6fc1ff16..86cb0bb1 100644 --- a/src/pages/plan/addToOurPlace/AddtoListBtn.tsx +++ b/src/pages/plan/addToOurPlace/AddtoListBtn.tsx @@ -1,9 +1,8 @@ -import { useRecoilValue } from 'recoil'; +import { useRecoilValue, useRecoilState } from 'recoil'; import { selectedItemsState } from '@recoil/listItem'; import { ButtonPrimary } from '@components/common/button/Button'; import { postTripsLike } from '@api/trips'; -import { getTripIdFromUrl } from '@utils/getTripIdFromUrl'; -import { useNavigate } from 'react-router-dom'; +import { useNavigate, useParams } from 'react-router-dom'; import { pubAddTripItem } from '@api/socket'; import { useContext } from 'react'; import { socketContext } from '@hooks/useSocket'; @@ -14,16 +13,15 @@ const AddToListButton = ({ }: { apiType: 'postTripsLike' | 'putTrips'; }) => { - const selectedTourItemIds = useRecoilValue(selectedItemsState); - console.log('selectedTourItemIds', selectedTourItemIds); + const { id: tripId } = useParams(); + const [selectedTourItemIds, setSelectedTourItemIds] = + useRecoilState(selectedItemsState); const visitDate = useRecoilValue(visitDateState); - console.log('visitDate', visitDate); - + console.log(selectedTourItemIds); const { callBackPub } = useContext(socketContext); const navigate = useNavigate(); const handleAddClick = async () => { - const tripId = getTripIdFromUrl().toString(); if (tripId) { try { let response; @@ -40,11 +38,12 @@ const AddToListButton = ({ newTripItems, }; - console.log('pubAddTripItemData', pubAddTripItemData); callBackPub(() => pubAddTripItem(pubAddTripItemData, tripId)); - navigate(`/trip/${tripId}/plan`); + setTimeout(() => { + setSelectedTourItemIds([]); + navigate(`/trip/${tripId}/plan`); + }, 500); } - console.log('API response:', response); } catch (error) { console.error('API error:', error); } diff --git a/src/pages/plan/addToOurPlace/MyLiked.tsx b/src/pages/plan/addToOurPlace/MyLiked.tsx index 8c9d455c..c31aa717 100644 --- a/src/pages/plan/addToOurPlace/MyLiked.tsx +++ b/src/pages/plan/addToOurPlace/MyLiked.tsx @@ -38,8 +38,6 @@ export const MyLiked = () => { }, }); - console.log('data', data); - if (isLoading) { return ; } @@ -48,7 +46,6 @@ export const MyLiked = () => { } const searchResults = data?.pages.flatMap((page) => page.data.content) || []; - // console.log('searchResults:', searchResults); const noResults = searchResults && searchResults.length === 0; return ( diff --git a/src/pages/plan/addToOurPlace/SearchResult.tsx b/src/pages/plan/addToOurPlace/SearchResult.tsx index 89d42f25..997e0f56 100644 --- a/src/pages/plan/addToOurPlace/SearchResult.tsx +++ b/src/pages/plan/addToOurPlace/SearchResult.tsx @@ -1,7 +1,7 @@ import { getToursSearch } from '@api/tours'; import { useInfiniteQuery } from '@tanstack/react-query'; import ToursCategoryItem from '@components/Tours/ToursCategoryItem'; -import { useEffect, useState } from 'react'; +import { useState } from 'react'; import { Spinner } from '@components/common/spinner/Spinner'; import { ResultCategoryPlan } from './ResultCategoryPlan'; @@ -16,19 +16,11 @@ export const SearchResultForPlan = ({ }: SearchResultProps) => { const categories = ['전체', '숙소', '식당', '관광지']; const [selectedCategory, setSelectedCategory] = useState('전체'); - useEffect(() => { - console.log(selectedCategory); - }, [selectedCategory]); const handleSelectCategory = (category: string) => { setSelectedCategory(category); }; - useEffect(() => { - console.log('searchWord: ' + searchWord); - }, [searchWord]); - console.log(); - const { data, fetchNextPage, diff --git a/src/pages/share/shareCode.page.tsx b/src/pages/share/shareCode.page.tsx index 587e9187..817c7801 100644 --- a/src/pages/share/shareCode.page.tsx +++ b/src/pages/share/shareCode.page.tsx @@ -6,14 +6,14 @@ import { useNavigate } from 'react-router-dom'; const shareCode = () => { const navigate = useNavigate(); - const { tripAuthority, TripId } = useGetTripsAuthority(); + const { tripAuthority, tripId } = useGetTripsAuthority(); useEffect(() => { - if (tripAuthority === 'WRITE' && TripId) { + if (tripAuthority === 'WRITE' && tripId) { alert('이미 편집 가능한 여정입니다.'); - navigate(`/trip/${TripId}`, { replace: true }); + navigate(`/trip/${tripId}`, { replace: true }); } - }, [tripAuthority, TripId]); + }, [tripAuthority, tripId]); const [inputCode, setInputCode] = useState(''); const [showError, setShowError] = useState(false); @@ -23,11 +23,11 @@ const shareCode = () => { if (changeValue.length <= 5) { setInputCode(e.target.value); } - if (changeValue.length === 5 && TripId) { + if (changeValue.length === 5 && tripId) { try { - const { data } = await postTripsjoin(TripId, changeValue); + const { data } = await postTripsjoin(tripId, changeValue); if (data.status === 200) { - navigate(`/trip/${TripId}`, { replace: true }); + navigate(`/trip/${tripId}`, { replace: true }); } } catch (err) { setShowError(true); diff --git a/src/pages/trip/AddOurList.page.tsx b/src/pages/trip/AddOurList.page.tsx index 14ce38b8..14eaf416 100644 --- a/src/pages/trip/AddOurList.page.tsx +++ b/src/pages/trip/AddOurList.page.tsx @@ -6,7 +6,6 @@ import { useLocation } from 'react-router-dom'; export const AddOurList = () => { const location = useLocation(); - const queryParams = new URLSearchParams(location.search); const searchWordFromQuery = queryParams.get('searchWord'); diff --git a/src/recoil/socket.ts b/src/recoil/socket.ts index fca451c7..f8a995c9 100644 --- a/src/recoil/socket.ts +++ b/src/recoil/socket.ts @@ -1,11 +1,11 @@ import { atom } from 'recoil'; -export const tripIdState = atom({ - key: 'tripIdState', - default: '', -}); - export const visitDateState = atom<{ visitDate: string } | null>({ key: 'visitDateState', default: { visitDate: '' }, }); + +export const isEditState = atom({ + key: 'isEditState', + default: false, +}); diff --git a/src/router/socketRouter.tsx b/src/router/socketRouter.tsx index 9892bd95..e99a1ecc 100644 --- a/src/router/socketRouter.tsx +++ b/src/router/socketRouter.tsx @@ -5,12 +5,9 @@ import { PlanAddPlace } from '@pages/plan/addToOurPlace/PlanAddPlace.page'; import PlanPlaceSearch from '@pages/plan/planPlaceSearch.page'; import Trip from '@pages/trip/trip.page'; import MainLayout from './routerLayout'; -import { useRecoilValue } from 'recoil'; -import { tripIdState, visitDateState } from '@recoil/socket'; import Share from '@pages/share/share.page'; import ShareCode from '@pages/share/shareCode.page'; -import { AddOurList } from '@pages/trip/AddOurList'; - +import { AddOurList } from '@pages/trip/AddOurList.page'; const SocketRoutes = () => { return ( From 47fd1c53f967372f68bfe4519f4063ba7aaf8ad3 Mon Sep 17 00:00:00 2001 From: Hojin Date: Sun, 21 Jan 2024 14:58:21 +0900 Subject: [PATCH 18/24] =?UTF-8?q?Fix:=20=EB=B9=8C=EB=93=9C=EC=97=90?= =?UTF-8?q?=EB=9F=AC=20=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/DetailSectionTop/DetailAddSchedule.tsx | 4 ---- src/pages/plan/AddToTripPlan/OurLiked.tsx | 1 - 2 files changed, 5 deletions(-) diff --git a/src/components/DetailSectionTop/DetailAddSchedule.tsx b/src/components/DetailSectionTop/DetailAddSchedule.tsx index faf5982a..57880903 100644 --- a/src/components/DetailSectionTop/DetailAddSchedule.tsx +++ b/src/components/DetailSectionTop/DetailAddSchedule.tsx @@ -9,10 +9,6 @@ import { calculateDayAndDate } from '@utils/utils'; const DetailAddSchedule = () => { const { myTrips } = useGetMyTrips(); - const tripDuration = calculateTripDuration( - myTrips[0]?.startDate, - myTrips[0]?.endDate, - ); const { SmallDayArr } = calculateDayAndDate( myTrips[0]?.startDate, diff --git a/src/pages/plan/AddToTripPlan/OurLiked.tsx b/src/pages/plan/AddToTripPlan/OurLiked.tsx index 3071afe5..8737ae66 100644 --- a/src/pages/plan/AddToTripPlan/OurLiked.tsx +++ b/src/pages/plan/AddToTripPlan/OurLiked.tsx @@ -2,7 +2,6 @@ import { useInfiniteQuery } from '@tanstack/react-query'; import { useState } from 'react'; import { Spinner } from '@components/common/spinner/Spinner'; import { getTripsLike } from '@api/trips'; -import { getTripIdFromUrl } from '@utils/getTripIdFromUrl'; import WishCategory from '@components/Wish/WishCategory'; import AddToListButton from '../addToOurPlace/AddtoListBtn'; import { OurLikedList } from './OurLikedList'; From 9ab1d22c40f3f780a44ca0889fd764148624a96a Mon Sep 17 00:00:00 2001 From: sue Date: Sun, 21 Jan 2024 16:48:05 +0900 Subject: [PATCH 19/24] =?UTF-8?q?Design:=20=EC=97=AC=EC=A0=95=20=ED=8E=B8?= =?UTF-8?q?=EC=A7=91=20=EB=A7=88=ED=81=AC=EC=97=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/trip/tripEdit.page.tsx | 55 ++++++++++++++++++++++++++++++++ src/router/socketRouter.tsx | 2 ++ 2 files changed, 57 insertions(+) create mode 100644 src/pages/trip/tripEdit.page.tsx diff --git a/src/pages/trip/tripEdit.page.tsx b/src/pages/trip/tripEdit.page.tsx new file mode 100644 index 00000000..2f95e5c1 --- /dev/null +++ b/src/pages/trip/tripEdit.page.tsx @@ -0,0 +1,55 @@ +import { BackBox } from '@components/common'; +import { + CalendarIcon, + PaperIcon, + SearchIcon, + UserIcon, +} from '@components/common/icons/Icons'; + +const TripEdit = () => { + return ( + <> + 여정 수정하기 + +
+
+
+ +
+

나의 여정 N

+
+ +
+
+ +
+

인원

+
+ +
+
+ +
+

+ 2023.12.14 ~ 2024.12.16 +

+
+ +
+
+ +
+

+ 강릉 ・ 속초 +

+
+ + +
+ + ); +}; + +export default TripEdit; diff --git a/src/router/socketRouter.tsx b/src/router/socketRouter.tsx index e679617b..c1afe104 100644 --- a/src/router/socketRouter.tsx +++ b/src/router/socketRouter.tsx @@ -8,6 +8,7 @@ import MainLayout from './routerLayout'; import { useRecoilValue } from 'recoil'; import { tripIdState, visitDateState } from '@recoil/socket'; import { AddOurList } from '@pages/trip/AddOurList'; +import TripEdit from '@pages/trip/tripEdit.page'; const SocketRoutes = () => { const tripId = useRecoilValue(tripIdState); @@ -33,6 +34,7 @@ const SocketRouter = () => { }> } /> } /> + } /> } /> From 0c5847cf2cfd9c31f8476ccb313b2d2ecfd37859 Mon Sep 17 00:00:00 2001 From: sue Date: Mon, 22 Jan 2024 04:50:12 +0900 Subject: [PATCH 20/24] =?UTF-8?q?Feat:=20=EC=97=AC=EC=A0=95=20=EC=88=98?= =?UTF-8?q?=EC=A0=95=20api=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/@types/trips.types.ts | 6 +++--- src/api/trips.ts | 9 +++++++++ src/components/Trip/TripSchedule.tsx | 5 ----- src/pages/plan/AddToTripPlan/OurLiked.tsx | 2 +- src/pages/plan/addToOurPlace/AddtoListBtn.tsx | 4 ++-- src/pages/plan/addToOurPlace/ResultCategoryPlan.tsx | 2 +- 6 files changed, 16 insertions(+), 12 deletions(-) diff --git a/src/@types/trips.types.ts b/src/@types/trips.types.ts index 0b4d17df..6b6bceec 100644 --- a/src/@types/trips.types.ts +++ b/src/@types/trips.types.ts @@ -3,8 +3,8 @@ interface TripRequest { numberOfPeople: number; startDate: string | null; endDate: string | null; - area: string | null; - subarea: string | null; + area?: string | null; + subarea?: string | null; } interface MyTripType { @@ -40,7 +40,7 @@ interface ThumbsProps { prefer: boolean; notPrefer: boolean; } - + interface AuthorityType { status: number; message: string; diff --git a/src/api/trips.ts b/src/api/trips.ts index 9c89db61..0a89bb54 100644 --- a/src/api/trips.ts +++ b/src/api/trips.ts @@ -11,6 +11,15 @@ export const getTrips = async (tripId: string) => { // 여정 기본정보 수정 export const putTrips = async ( + tripId: string, + tripRequestData: TripRequest, +) => { + const res = await authClient.put(`trips/${tripId}`, tripRequestData); + return res; +}; + +// 여행 상세페이지에서 여정에 여행지 등록 +export const postTripsItem = async ( tripId: string, tourItemId: number, visitDate: string, diff --git a/src/components/Trip/TripSchedule.tsx b/src/components/Trip/TripSchedule.tsx index ce4f7cf3..79a8c178 100644 --- a/src/components/Trip/TripSchedule.tsx +++ b/src/components/Trip/TripSchedule.tsx @@ -17,11 +17,6 @@ export const TripSchedule = () => {
- {/*
- -
*/}
diff --git a/src/pages/plan/AddToTripPlan/OurLiked.tsx b/src/pages/plan/AddToTripPlan/OurLiked.tsx index 8737ae66..f80e6ef2 100644 --- a/src/pages/plan/AddToTripPlan/OurLiked.tsx +++ b/src/pages/plan/AddToTripPlan/OurLiked.tsx @@ -68,7 +68,7 @@ export const OurLiked = () => { /> )}
- +
); diff --git a/src/pages/plan/addToOurPlace/AddtoListBtn.tsx b/src/pages/plan/addToOurPlace/AddtoListBtn.tsx index 86cb0bb1..4d74e9c8 100644 --- a/src/pages/plan/addToOurPlace/AddtoListBtn.tsx +++ b/src/pages/plan/addToOurPlace/AddtoListBtn.tsx @@ -11,7 +11,7 @@ import { visitDateState } from '@recoil/socket'; const AddToListButton = ({ apiType, }: { - apiType: 'postTripsLike' | 'putTrips'; + apiType: 'postTripsLike' | 'postTripsItem'; }) => { const { id: tripId } = useParams(); const [selectedTourItemIds, setSelectedTourItemIds] = @@ -28,7 +28,7 @@ const AddToListButton = ({ if (apiType === 'postTripsLike') { response = await postTripsLike(tripId, selectedTourItemIds); navigate(`/trip/${tripId}`); - } else if (apiType === 'putTrips' && visitDate) { + } else if (apiType === 'postTripsItem' && visitDate) { const newTripItems = selectedTourItemIds.map((tourItemId) => ({ tourItemId: tourItemId, })); diff --git a/src/pages/plan/addToOurPlace/ResultCategoryPlan.tsx b/src/pages/plan/addToOurPlace/ResultCategoryPlan.tsx index c87b6cb9..b8988d18 100644 --- a/src/pages/plan/addToOurPlace/ResultCategoryPlan.tsx +++ b/src/pages/plan/addToOurPlace/ResultCategoryPlan.tsx @@ -10,7 +10,7 @@ interface ResultCategoryProps { fetchNextPage: (() => Promise>) | null; hasNextPage: boolean; isFetchingNextPage: boolean; - apiType: 'postTripsLike' | 'putTrips'; + apiType: 'postTripsLike' | 'postTripsItem'; } export const ResultCategoryPlan = ({ From 2ca114d6024f38c7f5600bf86945dd01d9bc5794 Mon Sep 17 00:00:00 2001 From: sue Date: Mon, 22 Jan 2024 04:50:46 +0900 Subject: [PATCH 21/24] =?UTF-8?q?Feat:=20=EC=97=AC=EC=A0=95=20=EC=88=98?= =?UTF-8?q?=EC=A0=95=20=EB=B0=8F=20=EC=82=AD=EC=A0=9C=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Trip/EditCodeModal.tsx | 72 ++++++- .../common/toastpopup/ToastPopUp.tsx | 2 +- src/hooks/useCounter.ts | 6 +- src/pages/trip/tripEdit.page.tsx | 191 ++++++++++++++---- 4 files changed, 227 insertions(+), 44 deletions(-) diff --git a/src/components/Trip/EditCodeModal.tsx b/src/components/Trip/EditCodeModal.tsx index 928deef6..7d3ca648 100644 --- a/src/components/Trip/EditCodeModal.tsx +++ b/src/components/Trip/EditCodeModal.tsx @@ -1,18 +1,44 @@ -import { postTripsjoin } from '@api/trips'; +import { deleteTrips, postTripsjoin } from '@api/trips'; import CodeInput from '@components/Share/CodeInput'; import Alert from '@components/common/alert/Alert'; import { useGetTripsAuthority } from '@hooks/useGetTripsAuthority'; import { useState } from 'react'; -import { useParams } from 'react-router-dom'; +import { useNavigate, useParams } from 'react-router-dom'; +import * as Dialog from '@radix-ui/react-dialog'; +import { DeleteIcon, PenIcon } from '@components/common/icons/Icons'; +import { useMutation, useQueryClient } from '@tanstack/react-query'; +import ToastPopUp from '@components/common/toastpopup/ToastPopUp'; const EditCodeModal = () => { + const navigate = useNavigate(); const [isModalOpen, setIsModalOpen] = useState(false); const [inputCode, setInputCode] = useState(''); const [showError, setShowError] = useState(false); + const [isEditModal, setIsEditModal] = useState(false); + const [isToastVisible, setIsToastVisible] = useState(false); const { id: tripId } = useParams(); const { tripAuthority } = useGetTripsAuthority(); + const queryClient = useQueryClient(); + + const { mutate: deleteMutate } = useMutation({ + mutationFn: (tripId: string) => deleteTrips(tripId), + onSuccess: () => { + queryClient.invalidateQueries({ queryKey: ['myTrips'] }); + }, + onError: () => console.log('error'), + }); + + const handleDelete = () => { + if (tripId) { + deleteMutate(tripId); + } + setIsEditModal(false); + setIsToastVisible(true); + setTimeout(() => navigate('/mytrip'), 2000); + }; + const handleConfirm = async () => { if (tripId) { try { @@ -30,10 +56,46 @@ const EditCodeModal = () => { return ( <> + {isToastVisible && } {tripAuthority === 'WRITE' ? ( - + + + + + {isEditModal && ( + + + + + 나의 여정 + + + <> + + + + + + + + )} + ) : ( = ({ noun, verb }) => { }, []); useEffect(() => { - if (noun === '일정' || noun === '날짜 이동') { + if (noun === '일정' || noun === '날짜 이동' || noun === '여행 일정') { setParticle('이'); } }, [noun]); diff --git a/src/hooks/useCounter.ts b/src/hooks/useCounter.ts index 4ff26ba9..f5465463 100644 --- a/src/hooks/useCounter.ts +++ b/src/hooks/useCounter.ts @@ -1,4 +1,4 @@ -import { useState } from 'react'; +import { useEffect, useState } from 'react'; const useCounter = ( initialValue: number = 0, @@ -7,6 +7,10 @@ const useCounter = ( ): [number, () => void, () => void] => { const [value, setValue] = useState(initialValue); + useEffect(() => { + setValue(initialValue); + }, [initialValue]); + const increase = () => { setValue((prevValue) => Math.min(prevValue + 1, max)); }; diff --git a/src/pages/trip/tripEdit.page.tsx b/src/pages/trip/tripEdit.page.tsx index 2f95e5c1..cd9cb371 100644 --- a/src/pages/trip/tripEdit.page.tsx +++ b/src/pages/trip/tripEdit.page.tsx @@ -1,54 +1,171 @@ +import { putTrips } from '@api/trips'; import { BackBox } from '@components/common'; +import { ButtonPrimary } from '@components/common/button/Button'; import { CalendarIcon, - PaperIcon, - SearchIcon, + CloseIcon, + CounterIcon, + PlanIcon, UserIcon, } from '@components/common/icons/Icons'; +import { InputField } from '@components/createTrip/InputField'; +import useCounter from '@hooks/useCounter'; +import { useGetTrips } from '@hooks/useGetTrips'; +import { useGetTripsAuthority } from '@hooks/useGetTripsAuthority'; +import { tripDateState } from '@recoil/tripDate'; +import { formatDate } from '@utils/formatDate'; +import { useEffect, useState } from 'react'; +import { useNavigate } from 'react-router-dom'; +import { useRecoilState } from 'recoil'; +import { SelectDate } from '../../components/createTrip/SelectDate'; const TripEdit = () => { - return ( - <> - 여정 수정하기 + const navigate = useNavigate(); + const tripId = useGetTripsAuthority().tripId; + const { tripName, numberOfPeople, startDate, endDate } = useGetTrips(); -
-
-
- -
-

나의 여정 N

-
+ const [title, setTitle] = useState(''); + const [numOfMembers, increaseNumOfMembers, decreaseNumOfMembers] = useCounter( + numberOfPeople ?? 1, + 1, + ); + const [showSelectDate, setShowSelectDate] = useState(false); + const [tripDate, setTripDate] = useRecoilState(tripDateState); -
-
- -
-

인원

-
+ let start: Date, end: Date; + if (startDate && endDate) { + start = new Date(startDate); + end = new Date(endDate); + } -
-
- -
-

- 2023.12.14 ~ 2024.12.16 -

-
+ useEffect(() => { + if (startDate && endDate) { + setTripDate({ startDate: start, endDate: end }); + } + if (tripName) { + setTitle(tripName); + } + }, [tripName, startDate, endDate]); + + const handleSubmit = async () => { + try { + let adjustedStartDate, adjustedEndDate; -
-
- + if (tripDate.startDate) { + adjustedStartDate = new Date(tripDate.startDate); + adjustedStartDate.setDate(adjustedStartDate.getDate() + 1); + } + if (tripDate.endDate) { + adjustedEndDate = new Date(tripDate.endDate); + adjustedEndDate.setDate(adjustedEndDate.getDate() + 1); + } + + const tripRequestData = { + tripName: title, + numberOfPeople: numOfMembers, + startDate: adjustedStartDate + ? adjustedStartDate.toISOString().split('T')[0] + : null, + endDate: adjustedEndDate + ? adjustedEndDate.toISOString().split('T')[0] + : null, + }; + + if (tripId) { + const response = await putTrips(tripId, tripRequestData); + console.log('전송 완료: ', response); + navigate('/trip/' + tripId); + window.location.reload(); + } + } catch (error) { + console.error('전송 실패: ', error); + } + }; + + const formattedTripDate = + tripDate.startDate && tripDate.endDate + ? tripDate.startDate === tripDate.endDate + ? formatDate(tripDate.startDate, 'yyyy. MM. dd') + : `${formatDate(tripDate.startDate, 'yyyy. MM. dd')} - ${formatDate( + tripDate.endDate, + 'MM. dd', + )}` + : '여행 날짜 (선택)'; + + if (showSelectDate) { + return ( + { + setShowSelectDate(false); + }} + /> + ); + } + return ( +
+ { + navigate(-1); + }} + children="여정 수정하기" + /> +
+ + + { + setTitle(e.target.value); + }} + autoFocus + /> + {title && ( +
{ + setTitle(''); + }}> +
-

- 강릉 ・ 속초 -

+ )} + + + +
인원
+
+ {numOfMembers !== 1 && ( + + )} +
{numOfMembers}
+
+ + + { + setShowSelectDate(true); + }} + isClickable> +
{formattedTripDate}
+ - - - +
+ 완료 +
+
); }; From 838344c7bb25c9ebc1060a19ab6bd90833b2265a Mon Sep 17 00:00:00 2001 From: sue Date: Mon, 22 Jan 2024 04:57:23 +0900 Subject: [PATCH 22/24] =?UTF-8?q?Chore:=20=EB=B9=8C=EB=93=9C=20=EC=97=90?= =?UTF-8?q?=EB=9F=AC=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/plan/addToOurPlace/PlanAddPlace.page.tsx | 2 +- src/pages/plan/addToOurPlace/SearchResult.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/plan/addToOurPlace/PlanAddPlace.page.tsx b/src/pages/plan/addToOurPlace/PlanAddPlace.page.tsx index 4fcfa8bf..faac0821 100644 --- a/src/pages/plan/addToOurPlace/PlanAddPlace.page.tsx +++ b/src/pages/plan/addToOurPlace/PlanAddPlace.page.tsx @@ -23,7 +23,7 @@ export const PlanAddPlace = () => {
{searchWord ? ( - + ) : ( )} diff --git a/src/pages/plan/addToOurPlace/SearchResult.tsx b/src/pages/plan/addToOurPlace/SearchResult.tsx index 997e0f56..47573b93 100644 --- a/src/pages/plan/addToOurPlace/SearchResult.tsx +++ b/src/pages/plan/addToOurPlace/SearchResult.tsx @@ -7,7 +7,7 @@ import { ResultCategoryPlan } from './ResultCategoryPlan'; interface SearchResultProps { searchWord: string; - apiType: 'postTripsLike' | 'putTrips'; + apiType: 'postTripsLike' | 'postTripsItem'; } export const SearchResultForPlan = ({ From b42e97d0fa0512a01832110bb55b849587ba425c Mon Sep 17 00:00:00 2001 From: sue Date: Mon, 22 Jan 2024 05:25:26 +0900 Subject: [PATCH 23/24] =?UTF-8?q?Design:=20=EA=B2=BD=EB=B9=84=20=EB=94=94?= =?UTF-8?q?=EC=9E=90=EC=9D=B8=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Plan/TripBudget.tsx | 65 ++++++++++++++++-------------- 1 file changed, 35 insertions(+), 30 deletions(-) diff --git a/src/components/Plan/TripBudget.tsx b/src/components/Plan/TripBudget.tsx index 97a63c32..0cd9d2a6 100644 --- a/src/components/Plan/TripBudget.tsx +++ b/src/components/Plan/TripBudget.tsx @@ -40,11 +40,11 @@ const TripBudget = () => { return ( <> -
+
사용 경비
- {budget?.calculatedPrice.toLocaleString() ?? '-'} + {budget?.calculatedPrice.toLocaleString() ?? 0} 원
@@ -67,44 +67,47 @@ const TripBudget = () => { /> -
-
- 목표 경비 +
+
+ + 목표 경비 + {tripAuthority == 'WRITE' && ( handleSetTargetBudget(inputBudget)} + onCancel={() => setInputBudget('')} closeOnConfirm={true} children={ } content={ @@ -112,13 +115,13 @@ const TripBudget = () => {
setInputBudget(e.target.value)} />
setInputBudget('')}> {showCloseIcon && ( @@ -126,13 +129,15 @@ const TripBudget = () => {
- 원 + + 원 +
} /> )}
-
+
{budget?.budget.toLocaleString() ?? '- '} 원
From 49a350155014080a0313afdafc1c9be413388806 Mon Sep 17 00:00:00 2001 From: sue Date: Mon, 22 Jan 2024 05:37:06 +0900 Subject: [PATCH 24/24] =?UTF-8?q?Chore:=20=EB=B9=8C=EB=93=9C=EC=97=90?= =?UTF-8?q?=EB=9F=AC=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/plan/addToOurPlace/AddtoListBtn.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/pages/plan/addToOurPlace/AddtoListBtn.tsx b/src/pages/plan/addToOurPlace/AddtoListBtn.tsx index 4d74e9c8..ea7589f6 100644 --- a/src/pages/plan/addToOurPlace/AddtoListBtn.tsx +++ b/src/pages/plan/addToOurPlace/AddtoListBtn.tsx @@ -24,9 +24,8 @@ const AddToListButton = ({ const handleAddClick = async () => { if (tripId) { try { - let response; if (apiType === 'postTripsLike') { - response = await postTripsLike(tripId, selectedTourItemIds); + await postTripsLike(tripId, selectedTourItemIds); navigate(`/trip/${tripId}`); } else if (apiType === 'postTripsItem' && visitDate) { const newTripItems = selectedTourItemIds.map((tourItemId) => ({