From 2d7dbad486a17781911f524c52e2915758911af4 Mon Sep 17 00:00:00 2001 From: joanShim Date: Sun, 14 Jan 2024 17:55:29 +0900 Subject: [PATCH 01/54] =?UTF-8?q?Feat:=20=EC=97=AC=ED=96=89=20=EC=83=9D?= =?UTF-8?q?=EC=84=B1=20api=20=EC=97=B0=EB=8F=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/create/createTrip.page.tsx | 31 ++++++++++++++++++++++------ 1 file changed, 25 insertions(+), 6 deletions(-) diff --git a/src/pages/create/createTrip.page.tsx b/src/pages/create/createTrip.page.tsx index 7a35c568..b5ca64a3 100644 --- a/src/pages/create/createTrip.page.tsx +++ b/src/pages/create/createTrip.page.tsx @@ -14,6 +14,7 @@ import { ko } from 'date-fns/locale'; import { useState } from 'react'; import { useRecoilValue } from 'recoil'; import { SelectDate } from '../../components/createTrip/SelectDate'; +import { postTrips } from '@api/trips'; export const CreateTrip = () => { const [title, setTitle] = useState(''); @@ -21,6 +22,27 @@ export const CreateTrip = () => { const [showSelectDate, setShowSelectDate] = useState(false); const [showSelectDestination, setShowSelectDestination] = useState(false); + const handleSubmit = async () => { + try { + const tripRequestData = { + tripName: title || '나의 N번째 여정', // title이 빈 문자열일 경우 기본값 설정 + numberOfPeople: numOfMembers, + startDate: tripDate.startDate + ? tripDate.startDate.toISOString().split('T')[0] + : null, + endDate: tripDate.endDate + ? tripDate.endDate.toISOString().split('T')[0] + : null, + }; + + const response = await postTrips(tripRequestData); + console.log('전송 완료: ', response); + // 리코일 초기화 + } catch (error) { + console.error('전송 실패: ', error); + } + }; + const handleIncrease = () => { setNumOfMembers((prevNum) => prevNum + 1); }; @@ -32,11 +54,8 @@ export const CreateTrip = () => { const tripDate = useRecoilValue(tripDateState); const formattedTripDate = tripDate.startDate && tripDate.endDate - ? `${format(tripDate.startDate, 'MM.dd', { locale: ko })} - ${format( - tripDate.endDate, - 'MM.dd', - { locale: ko }, - )}` + ? `${format(tripDate.startDate, 'MM.dd', { locale: ko })} - + ${format(tripDate.endDate, 'MM.dd', { locale: ko })}` : '여행 날짜(선택)'; if (showSelectDate) { @@ -119,7 +138,7 @@ export const CreateTrip = () => {
- {}}>완료 + 완료
); From a591dea428c5cf12cdd872bd550b0695d59ce947 Mon Sep 17 00:00:00 2001 From: joanShim Date: Sun, 14 Jan 2024 18:26:09 +0900 Subject: [PATCH 02/54] =?UTF-8?q?Fix:=20api=20authClient=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/trips.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/api/trips.ts b/src/api/trips.ts index 7d7aeb81..3cb10b13 100644 --- a/src/api/trips.ts +++ b/src/api/trips.ts @@ -1,4 +1,5 @@ import client from './client'; +import authClient from './authClient'; // 여정 관련 API @@ -22,7 +23,7 @@ export const deleteTrips = async (tripId: number) => { // 여정 생성 export const postTrips = async (tripsData: TripRequest) => { - const res = await client.post(`trips`, tripsData); + const res = await authClient.post(`trips`, tripsData); return res; }; From 7c4a4caa8192db98738f3dc9c9a60d01670f1204 Mon Sep 17 00:00:00 2001 From: joanShim Date: Sun, 14 Jan 2024 19:02:16 +0900 Subject: [PATCH 03/54] =?UTF-8?q?Refactor:=20hook,=20utils=20=EB=B6=84?= =?UTF-8?q?=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/@types/trips.types.ts | 8 +++---- src/hooks/useCounter.ts | 21 +++++++++++++++++++ src/pages/create/createTrip.page.tsx | 31 ++++++++++++++-------------- src/utils/formatDate.ts | 9 ++++++++ 4 files changed, 49 insertions(+), 20 deletions(-) create mode 100644 src/hooks/useCounter.ts create mode 100644 src/utils/formatDate.ts diff --git a/src/@types/trips.types.ts b/src/@types/trips.types.ts index cda8b28b..1130cab9 100644 --- a/src/@types/trips.types.ts +++ b/src/@types/trips.types.ts @@ -1,8 +1,8 @@ interface TripRequest { tripName: string; numberOfPeople: number; - startDate: string; - endDate: string; - area: string; - subarea: string; + startDate: string | null; + endDate: string | null; + area: string | null; + subarea: string | null; } diff --git a/src/hooks/useCounter.ts b/src/hooks/useCounter.ts new file mode 100644 index 00000000..4ff26ba9 --- /dev/null +++ b/src/hooks/useCounter.ts @@ -0,0 +1,21 @@ +import { useState } from 'react'; + +const useCounter = ( + initialValue: number = 0, + min: number = 0, + max: number = Infinity, +): [number, () => void, () => void] => { + const [value, setValue] = useState(initialValue); + + const increase = () => { + setValue((prevValue) => Math.min(prevValue + 1, max)); + }; + + const decrease = () => { + setValue((prevValue) => Math.max(prevValue - 1, min)); + }; + + return [value, increase, decrease]; +}; + +export default useCounter; diff --git a/src/pages/create/createTrip.page.tsx b/src/pages/create/createTrip.page.tsx index b5ca64a3..4ddc2fe8 100644 --- a/src/pages/create/createTrip.page.tsx +++ b/src/pages/create/createTrip.page.tsx @@ -9,16 +9,20 @@ import { import { InputField } from '@components/createTrip/InputField'; import { SelectDestination } from '@components/createTrip/SelectDestination'; import { tripDateState } from '@recoil/tripDate'; -import { format } from 'date-fns'; -import { ko } from 'date-fns/locale'; import { useState } from 'react'; import { useRecoilValue } from 'recoil'; import { SelectDate } from '../../components/createTrip/SelectDate'; import { postTrips } from '@api/trips'; +import useCounter from '@hooks/useCounter'; +import { formatDate } from '@utils/formatDate'; export const CreateTrip = () => { const [title, setTitle] = useState(''); - const [numOfMembers, setNumOfMembers] = useState(2); + const [numOfMembers, increaseNumOfMembers, decreaseNumOfMembers] = useCounter( + 2, + 2, + 12, + ); // (기본값, 최솟값, 최댓값) const [showSelectDate, setShowSelectDate] = useState(false); const [showSelectDestination, setShowSelectDestination] = useState(false); @@ -33,29 +37,24 @@ export const CreateTrip = () => { endDate: tripDate.endDate ? tripDate.endDate.toISOString().split('T')[0] : null, + area: null, + subarea: null, }; const response = await postTrips(tripRequestData); console.log('전송 완료: ', response); - // 리코일 초기화 } catch (error) { console.error('전송 실패: ', error); } }; - const handleIncrease = () => { - setNumOfMembers((prevNum) => prevNum + 1); - }; - - const handleDecrease = () => { - setNumOfMembers((prevNum) => Math.max(prevNum - 1, 2)); - }; - const tripDate = useRecoilValue(tripDateState); const formattedTripDate = tripDate.startDate && tripDate.endDate - ? `${format(tripDate.startDate, 'MM.dd', { locale: ko })} - - ${format(tripDate.endDate, 'MM.dd', { locale: ko })}` + ? `${formatDate(tripDate.startDate, 'MM.dd')} - ${formatDate( + tripDate.endDate, + 'MM.dd', + )}` : '여행 날짜(선택)'; if (showSelectDate) { @@ -108,12 +107,12 @@ export const CreateTrip = () => {
diff --git a/src/utils/formatDate.ts b/src/utils/formatDate.ts new file mode 100644 index 00000000..2e5a2d5b --- /dev/null +++ b/src/utils/formatDate.ts @@ -0,0 +1,9 @@ +import { format } from 'date-fns'; +import { ko } from 'date-fns/locale'; + +export const formatDate = ( + date: Date | number, + dateFormat: string, +): string | null => { + return date ? format(date, dateFormat, { locale: ko }) : null; +}; From 188656c118073da39f128d1dcd6186bf58e1085f Mon Sep 17 00:00:00 2001 From: joanShim Date: Sun, 14 Jan 2024 19:42:02 +0900 Subject: [PATCH 04/54] =?UTF-8?q?Feat:=20=EB=82=98=EC=9D=98=EC=97=AC?= =?UTF-8?q?=EC=A0=95=20=EB=94=94=ED=8F=B4=ED=8A=B8=20=ED=83=80=EC=9D=B4?= =?UTF-8?q?=ED=8B=80=20=EC=84=A4=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/member.ts | 10 +++++++--- src/pages/create/createTrip.page.tsx | 14 ++++++++++++-- 2 files changed, 19 insertions(+), 5 deletions(-) diff --git a/src/api/member.ts b/src/api/member.ts index 1e355324..e7c702de 100644 --- a/src/api/member.ts +++ b/src/api/member.ts @@ -44,9 +44,13 @@ export const deleteMember = async () => { }; // 나의 여정 조회 -export const getMemberTrips = async () => { - const res = await authClient.get(`member/trips`); - return res; +export const getMemberTrips = async (page = 0, size = 10) => { + try { + const res = await authClient.get(`trips?&page=${page}&size=${size}`); + return res.data; + } catch (e) { + console.error(e); + } }; // 나의 관심 여행지 조회 diff --git a/src/pages/create/createTrip.page.tsx b/src/pages/create/createTrip.page.tsx index 4ddc2fe8..1d9a4883 100644 --- a/src/pages/create/createTrip.page.tsx +++ b/src/pages/create/createTrip.page.tsx @@ -15,6 +15,8 @@ import { SelectDate } from '../../components/createTrip/SelectDate'; import { postTrips } from '@api/trips'; import useCounter from '@hooks/useCounter'; import { formatDate } from '@utils/formatDate'; +import { useQuery } from '@tanstack/react-query'; +import { getMemberTrips } from '@api/member'; export const CreateTrip = () => { const [title, setTitle] = useState(''); @@ -26,10 +28,18 @@ export const CreateTrip = () => { const [showSelectDate, setShowSelectDate] = useState(false); const [showSelectDestination, setShowSelectDestination] = useState(false); + const { data } = useQuery({ + queryKey: ['myTrips'], + queryFn: () => getMemberTrips(), + }); + + const MY_TRIP_NUMBER = data?.data.numberOfElements + 1; + const defaultTitle = `나의 여정 ${MY_TRIP_NUMBER}`; + const handleSubmit = async () => { try { const tripRequestData = { - tripName: title || '나의 N번째 여정', // title이 빈 문자열일 경우 기본값 설정 + tripName: title || defaultTitle, numberOfPeople: numOfMembers, startDate: tripDate.startDate ? tripDate.startDate.toISOString().split('T')[0] @@ -84,7 +94,7 @@ export const CreateTrip = () => { { setTitle(e.target.value); From a69cad6757164101f308b2a27a8ab396e10c2188 Mon Sep 17 00:00:00 2001 From: joanShim Date: Sun, 14 Jan 2024 20:37:17 +0900 Subject: [PATCH 05/54] =?UTF-8?q?Style:=20=EC=9D=BC=EC=A0=95=20=EC=A4=91?= =?UTF-8?q?=EA=B0=84=EB=82=A0=EC=A7=9C=20=EC=8A=A4=ED=83=80=EC=9D=BC?= =?UTF-8?q?=EB=A7=81=20=EB=A1=9C=EC=A7=81=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/DatePicker/Calendar.tsx | 50 ++++++++++++-------------- 1 file changed, 22 insertions(+), 28 deletions(-) diff --git a/src/components/DatePicker/Calendar.tsx b/src/components/DatePicker/Calendar.tsx index 0c317d68..5185160e 100644 --- a/src/components/DatePicker/Calendar.tsx +++ b/src/components/DatePicker/Calendar.tsx @@ -1,6 +1,5 @@ import React, { useEffect, useRef, useState } from 'react'; import { - addDays, addMonths, differenceInDays, format, @@ -8,13 +7,11 @@ import { isSameDay, isWithinInterval, startOfMonth, - subDays, } from 'date-fns'; import { ko } from 'date-fns/locale'; import 'tailwindcss/tailwind.css'; const CALENDAR_LENGTH = 42; -// const DAY_OF_WEEK = 7; const DAY_LIST = ['일', '월', '화', '수', '목', '금', '토']; const Calendar: React.FC<{ @@ -52,7 +49,10 @@ const Calendar: React.FC<{ }; const handleDateClick = (date: Date) => { - if (!startDate || (startDate && endDate)) { + if (startDate && !endDate && date < startDate) { + setEndDate(startDate); + setStartDate(date); + } else if (!startDate || (startDate && endDate)) { setStartDate(date); setEndDate(null); } else if (date > startDate) { @@ -78,7 +78,9 @@ const Calendar: React.FC<{ const renderDayLabels = () => { return DAY_LIST.map((dayLabel, index) => ( -
+
{dayLabel}
)); @@ -95,16 +97,17 @@ const Calendar: React.FC<{ let beforeClass = ''; let afterClass = ''; - if (isStart || isEnd) { - dayClass = 'rounded-full w-[48px] bg-main2 text-white z-10'; - } else if (isMiddle) { - dayClass = 'bg-[#DAFBFF] z-0'; - beforeClass = isSecondDayInRange(date) - ? 'before:content-[""] before:absolute before:left-[-50%] before:top-0 before:w-1/2 before:h-full before:bg-[#DAFBFF]' - : ''; - afterClass = isSecondLastDayInRange(date) - ? 'after:content-[""] after:absolute after:right-[-50%] after:top-0 after:w-1/2 after:h-full after:bg-[#DAFBFF]' + if (isStart) { + dayClass = 'rounded-full w-[40px] bg-main2 text-white z-10'; + afterClass = endDate + ? 'after:content-[""] after:absolute after:left-[50%] after:top-[4px] after:w-[32px] after:h-[40px] after:bg-[#DAFBFF] after:z-[1]' : ''; + } else if (isEnd) { + dayClass = 'rounded-full w-[40px] bg-main2 text-white z-10'; + beforeClass = + 'before:content-[""] before:absolute before:right-[50%] before:top-[4px] before:w-[32px] before:h-[40px] before:bg-[#DAFBFF] before:z-[1]'; + } else if (isMiddle) { + dayClass = 'bg-[#DAFBFF]'; } const onClick = () => handleDateClick(date); @@ -112,25 +115,16 @@ const Calendar: React.FC<{ return (
- {day} +
+ {day} +
); }; - const isSecondDayInRange = (date: Date) => { - if (!startDate || !endDate) return false; - const nextDay = addDays(startDate, 1); - return isSameDay(date, nextDay); - }; - - const isSecondLastDayInRange = (date: Date) => { - if (!startDate || !endDate) return false; - const prevDay = subDays(endDate, 1); - return isSameDay(date, prevDay); - }; - const renderCalendar = (monthDate: Date) => { const totalMonthDays = getDaysInMonth(monthDate); const startDay = startOfMonth(monthDate).getDay(); From 8860874d8c960d552b75ed441a057fbe02f6e8e9 Mon Sep 17 00:00:00 2001 From: joanShim Date: Sun, 14 Jan 2024 20:41:41 +0900 Subject: [PATCH 06/54] =?UTF-8?q?Feat:=20=EC=83=9D=EC=84=B1=20=EC=99=84?= =?UTF-8?q?=EB=A3=8C=20=ED=9B=84=20=EA=B2=BD=EB=A1=9C=20=EC=84=A4=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/create/createTrip.page.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/pages/create/createTrip.page.tsx b/src/pages/create/createTrip.page.tsx index 1d9a4883..c9e2b865 100644 --- a/src/pages/create/createTrip.page.tsx +++ b/src/pages/create/createTrip.page.tsx @@ -17,8 +17,10 @@ import useCounter from '@hooks/useCounter'; import { formatDate } from '@utils/formatDate'; import { useQuery } from '@tanstack/react-query'; import { getMemberTrips } from '@api/member'; +import { useNavigate } from 'react-router-dom'; export const CreateTrip = () => { + const navigate = useNavigate(); const [title, setTitle] = useState(''); const [numOfMembers, increaseNumOfMembers, decreaseNumOfMembers] = useCounter( 2, @@ -53,6 +55,8 @@ export const CreateTrip = () => { const response = await postTrips(tripRequestData); console.log('전송 완료: ', response); + const tripId = response.data.data.tripId; + navigate('/trip/' + tripId); } catch (error) { console.error('전송 실패: ', error); } From f58a850f7fdf36c8c31f86cd2926d44575551e0f Mon Sep 17 00:00:00 2001 From: sue Date: Sun, 14 Jan 2024 23:54:08 +0900 Subject: [PATCH 07/54] =?UTF-8?q?Feat:=20=EC=97=AC=EC=A0=95=20=EC=A7=80?= =?UTF-8?q?=EB=8F=84=20=EC=83=9D=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/@types/service.ts | 15 ++++++ src/components/Plan/PlanItem.tsx | 6 +++ src/components/Plan/TripMap.tsx | 83 ++++++++++++++++++++++++++++++++ 3 files changed, 104 insertions(+) create mode 100644 src/components/Plan/TripMap.tsx diff --git a/src/@types/service.ts b/src/@types/service.ts index e31ce9a9..11f8be91 100644 --- a/src/@types/service.ts +++ b/src/@types/service.ts @@ -34,6 +34,21 @@ export type subItemRes = { } | null; }; +export type subPath = { + fromSeqNum: number; + toSeqNum: number; + fromLongitude: string; + fromLatitude: string; + toLongitude: string; + toLatitude: string; + transportation: string; + pathInfo: { + price: number; + totalDistance: number; + totalTime: number; + } +}; + export type subPathRes = { status: number; message: string; diff --git a/src/components/Plan/PlanItem.tsx b/src/components/Plan/PlanItem.tsx index 83170af1..802f4d3c 100644 --- a/src/components/Plan/PlanItem.tsx +++ b/src/components/Plan/PlanItem.tsx @@ -19,6 +19,7 @@ import { import SubmitBtn from '@components/common/button/SubmitBtn'; import { PlusIcon } from '@components/common/icons/Icons'; import { useNavigate } from 'react-router-dom'; +import TripMap from './TripMap'; const tripId = 1; const visitDate = '2024-01-03'; @@ -39,6 +40,10 @@ const PlanItem = () => { console.log(tripInfo); } + if (tripPath != null) { + console.log(tripPath); + } + const socketConnect = () => { socketClient.onConnect = () => { subInfo(tripId, (res) => { @@ -86,6 +91,7 @@ const PlanItem = () => { }, []); return ( <> + {tripPath && } navigate('./place')}>
diff --git a/src/components/Plan/TripMap.tsx b/src/components/Plan/TripMap.tsx new file mode 100644 index 00000000..cb637c6d --- /dev/null +++ b/src/components/Plan/TripMap.tsx @@ -0,0 +1,83 @@ +import { subPath } from '@/@types/service'; +import { Map, MapMarker, Polyline, useKakaoLoader } from 'react-kakao-maps-sdk'; + +const VITE_KAKAO_MAP_API_KEY = import.meta.env.VITE_KAKAO_MAP_API_KEY; + + +const TripMap = ({ paths }: { paths: subPath[] }) => { + const firstPath = paths[0]; + const latitude = firstPath?.fromLatitude; + const longitude = firstPath?.fromLongitude; + + const defaultPosition = {lat: Number(latitude), lng: Number(longitude)}; + + const getCenterPosition = () => { + if (paths.length === 0) { + return defaultPosition; + } + + let totalLat = 0; + let totalLng = 0; + + paths.forEach(path => { + totalLat += Number(path.fromLatitude); + totalLng += Number(path.fromLongitude); + }); + + return { + lat: totalLat / paths.length, + lng: totalLng / paths.length + }; + }; + + const centerPosition = getCenterPosition(); + + const [_] = useKakaoLoader({ + appkey: VITE_KAKAO_MAP_API_KEY, + }); + + const MapStyle = { + width: '100%', + height: '180px', + marginTop: '15px', + marginBottom: '15px', + transition: 'height 0.3s ease-in-out', + }; + + const polylinePath = paths.map(path => ({ + lat: Number(path.fromLatitude), + lng: Number(path.fromLongitude), + })); + + return ( +
+ + {paths.map((path, index) => ( +
+ + +
+ ))} + +
+ ) +} + +export default TripMap \ No newline at end of file From f851fb9cc3d06aa781ec5c13a5a718b06642079d Mon Sep 17 00:00:00 2001 From: sue Date: Mon, 15 Jan 2024 16:41:13 +0900 Subject: [PATCH 08/54] =?UTF-8?q?Design:=20=EC=95=84=EC=9D=B4=EC=BD=98=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/icons/Icons.tsx | 38 +++++++++++++++++++++------ 1 file changed, 30 insertions(+), 8 deletions(-) diff --git a/src/components/common/icons/Icons.tsx b/src/components/common/icons/Icons.tsx index 75b880a6..1105935e 100644 --- a/src/components/common/icons/Icons.tsx +++ b/src/components/common/icons/Icons.tsx @@ -983,26 +983,26 @@ export const DocumentIcon: React.FC = ({ cursor={cursor} xmlns="http://www.w3.org/2000/svg"> @@ -1207,3 +1207,25 @@ export const BusIcon: React.FC = ({ ); }; + +export const SettingIcons: React.FC = ({ + size = 18, + color = 'black', + fill = 'none', +}) => { + return ( + + + + ); +}; From 093857a9a3f1746b4de8f5c08b69aeb6e8b15821 Mon Sep 17 00:00:00 2001 From: sue Date: Mon, 15 Jan 2024 16:42:36 +0900 Subject: [PATCH 09/54] =?UTF-8?q?Feat:=20=EC=86=8C=EC=BC=93=20=EB=8D=B0?= =?UTF-8?q?=EC=9D=B4=ED=84=B0=20=ED=8E=98=EC=B9=AD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Plan/PlanItem.tsx | 13 +---------- src/components/Plan/TripBudget.tsx | 30 +++++++++++++++++--------- src/components/Trip/PlanTripButton.tsx | 2 +- src/components/Trip/TripInfo.tsx | 19 ++++++++++++---- src/hooks/useSocket.ts | 4 +++- 5 files changed, 40 insertions(+), 28 deletions(-) diff --git a/src/components/Plan/PlanItem.tsx b/src/components/Plan/PlanItem.tsx index 12fc7fae..605378ab 100644 --- a/src/components/Plan/PlanItem.tsx +++ b/src/components/Plan/PlanItem.tsx @@ -5,25 +5,14 @@ import TripMap from './TripMap'; import PlanItemBox from './PlanItemBox'; import { useContext } from 'react'; import { socketContext } from '@hooks/useSocket'; -import { pubEnterMember } from '@api/socket'; - -const memberId = { - memberId: 1, -}; -const visitDate = '2024-01-04'; const PlanItem = () => { const navigate = useNavigate(); const { tripItem, tripPath } = useContext(socketContext); - // console.log(tripItem); - - // pubEnterMember(memberId, visitDate); - // console.log('펍후', tripItem); - return ( <> - {tripPath && } + {tripPath && }
{tripItem?.data?.tripItems.map((item) => ( diff --git a/src/components/Plan/TripBudget.tsx b/src/components/Plan/TripBudget.tsx index 35892974..8d26dc64 100644 --- a/src/components/Plan/TripBudget.tsx +++ b/src/components/Plan/TripBudget.tsx @@ -1,12 +1,22 @@ +import { SettingIcons } from '@components/common/icons/Icons'; +import { socketContext } from '@hooks/useSocket'; import * as Progress from '@radix-ui/react-progress'; -import { useEffect, useState } from 'react'; +import { useContext, useEffect, useState } from 'react'; const TripBudget = () => { - const [targetBudget, setTargetBudget] = useState(10000); // 예시 목표 경비 - const [currentSpending, setCurrentSpending] = useState(0); // 초기 사용 경비 + const { tripBudget } = useContext(socketContext); + const budget = tripBudget?.data; + + const [targetBudget, setTargetBudget] = useState(budget?.budget || 0); // 예시 목표 경비 + const [currentSpending, setCurrentSpending] = useState( + budget?.calculatedPrice || 0, + ); // 초기 사용 경비 // 프로그레스 바 값 계산 - const progress = (currentSpending / targetBudget) * 100; + const progress = + currentSpending && targetBudget + ? (currentSpending / targetBudget) * 100 + : 0; useEffect(() => { // 경비 수정 모달 추가 예정 @@ -30,24 +40,24 @@ const TripBudget = () => {
-
- 목표 경비 +
+ 목표 경비
diff --git a/src/components/Trip/PlanTripButton.tsx b/src/components/Trip/PlanTripButton.tsx index b2d5012b..b218ef76 100644 --- a/src/components/Trip/PlanTripButton.tsx +++ b/src/components/Trip/PlanTripButton.tsx @@ -5,7 +5,7 @@ const PlanTripButton = () => { diff --git a/src/components/Trip/TripInfo.tsx b/src/components/Trip/TripInfo.tsx index c0f9a54f..f1d24ada 100644 --- a/src/components/Trip/TripInfo.tsx +++ b/src/components/Trip/TripInfo.tsx @@ -1,19 +1,30 @@ import { UserIcon } from '@components/common/icons/Icons'; +import { socketContext } from '@hooks/useSocket'; +import { useContext } from 'react'; const TripInfo = () => { + const { tripInfo } = useContext(socketContext); + const trip = tripInfo?.data; + return (
-
강릉 여행 일정
+
{trip?.tripName}
- 5 + + {trip?.numberOfPeople} +
- +
- 23.12.23 ~ 23.12.25 + + {trip?.startDate} ~ {trip?.endDate} +
); }; diff --git a/src/hooks/useSocket.ts b/src/hooks/useSocket.ts index 9246c338..02da549a 100644 --- a/src/hooks/useSocket.ts +++ b/src/hooks/useSocket.ts @@ -6,6 +6,7 @@ import { subMember, subBudget, pubEnterMember, + pubGetPathAndItems, } from '@api/socket'; import { subInfoRes, @@ -71,7 +72,8 @@ export const useSocket = () => { memberId: 1, }; - pubEnterMember(memberId, visitDate); + pubEnterMember(memberId, '1'); + pubGetPathAndItems({ visitDate: '2024-01-04' }, '1'); console.log(tripInfo); console.log(tripItem); From 4e12288988de71001c55d4fa7e84116df0585a20 Mon Sep 17 00:00:00 2001 From: sue Date: Mon, 15 Jan 2024 16:42:56 +0900 Subject: [PATCH 10/54] =?UTF-8?q?Feat:=20=EC=97=AC=EC=A0=95=20=EC=A7=80?= =?UTF-8?q?=EB=8F=84=20=EC=97=B0=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Plan/TripMap.tsx | 65 ++++++++++++++++++++------------- 1 file changed, 40 insertions(+), 25 deletions(-) diff --git a/src/components/Plan/TripMap.tsx b/src/components/Plan/TripMap.tsx index cb637c6d..41045d7e 100644 --- a/src/components/Plan/TripMap.tsx +++ b/src/components/Plan/TripMap.tsx @@ -3,13 +3,12 @@ import { Map, MapMarker, Polyline, useKakaoLoader } from 'react-kakao-maps-sdk'; const VITE_KAKAO_MAP_API_KEY = import.meta.env.VITE_KAKAO_MAP_API_KEY; - const TripMap = ({ paths }: { paths: subPath[] }) => { const firstPath = paths[0]; const latitude = firstPath?.fromLatitude; const longitude = firstPath?.fromLongitude; - const defaultPosition = {lat: Number(latitude), lng: Number(longitude)}; + const defaultPosition = { lat: Number(latitude), lng: Number(longitude) }; const getCenterPosition = () => { if (paths.length === 0) { @@ -19,14 +18,14 @@ const TripMap = ({ paths }: { paths: subPath[] }) => { let totalLat = 0; let totalLng = 0; - paths.forEach(path => { + paths.forEach((path) => { totalLat += Number(path.fromLatitude); totalLng += Number(path.fromLongitude); }); return { lat: totalLat / paths.length, - lng: totalLng / paths.length + lng: totalLng / paths.length, }; }; @@ -35,7 +34,7 @@ const TripMap = ({ paths }: { paths: subPath[] }) => { const [_] = useKakaoLoader({ appkey: VITE_KAKAO_MAP_API_KEY, }); - + const MapStyle = { width: '100%', height: '180px', @@ -44,40 +43,56 @@ const TripMap = ({ paths }: { paths: subPath[] }) => { transition: 'height 0.3s ease-in-out', }; - const polylinePath = paths.map(path => ({ + // polylinePath를 생성하는 로직 + const polylinePath = paths.map((path) => ({ lat: Number(path.fromLatitude), lng: Number(path.fromLongitude), })); + // 마지막 경로의 toLatitude와 toLongitude 추가 + if (paths.length > 0) { + const lastPath = paths[paths.length - 1]; + polylinePath.push({ + lat: Number(lastPath.toLatitude), + lng: Number(lastPath.toLongitude), + }); + } + return ( -
+
{paths.map((path, index) => (
- - + + +
))} +
- ) -} + ); +}; -export default TripMap \ No newline at end of file +export default TripMap; From 654acface5eb581d376291375507d02e6430d507 Mon Sep 17 00:00:00 2001 From: jisu Seo Date: Mon, 15 Jan 2024 16:54:01 +0900 Subject: [PATCH 11/54] =?UTF-8?q?Feat:=20=EC=9D=B4=EC=9A=A9=EC=95=BD?= =?UTF-8?q?=EA=B4=80=20=EA=B8=B0=EB=8A=A5=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/@types/auth.types.ts | 1 + src/components/common/icons/Icons.tsx | 32 +++++++++++++++++++++++++++ src/pages/signup/signup.page.tsx | 29 ++++++++++++++++++++++++ 3 files changed, 62 insertions(+) diff --git a/src/@types/auth.types.ts b/src/@types/auth.types.ts index 03d9bf8e..b6e1ac93 100644 --- a/src/@types/auth.types.ts +++ b/src/@types/auth.types.ts @@ -13,6 +13,7 @@ export interface AuthRequest { export interface SignupFormValue extends AuthRequest { passwordCheck: string; + checkbox: boolean; } export interface EditPassword { diff --git a/src/components/common/icons/Icons.tsx b/src/components/common/icons/Icons.tsx index ca6db260..824a6dc5 100644 --- a/src/components/common/icons/Icons.tsx +++ b/src/components/common/icons/Icons.tsx @@ -1207,3 +1207,35 @@ export const BusIcon: React.FC = ({ ); }; + +export const CheckboxIcon: React.FC = ({ + size = 21, + color = 'white', + fill = '#D7D7D7', +}) => { + return ( + + + + + + + ); +}; diff --git a/src/pages/signup/signup.page.tsx b/src/pages/signup/signup.page.tsx index 289e5746..77c69186 100644 --- a/src/pages/signup/signup.page.tsx +++ b/src/pages/signup/signup.page.tsx @@ -8,6 +8,7 @@ import { } from '@components/Auth'; import { BackBox } from '@components/common'; import SubmitBtn from '@components/common/button/SubmitBtn'; +import { CheckboxIcon } from '@components/common/icons/Icons'; import { setItem } from '@utils/localStorageFun'; import { SubmitHandler, useForm } from 'react-hook-form'; import { useNavigate } from 'react-router-dom'; @@ -84,6 +85,34 @@ const Signup = () => { />
+ + 완료
From 449b62174406a0c998773d88ce65690e319cb4c8 Mon Sep 17 00:00:00 2001 From: jisu Seo Date: Mon, 15 Jan 2024 17:35:28 +0900 Subject: [PATCH 12/54] =?UTF-8?q?Refactor:=20=EC=97=AC=ED=96=89=20?= =?UTF-8?q?=EC=B7=A8=ED=96=A5=20=EB=AA=A8=EB=91=90=20=EC=84=A0=ED=83=9D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Auth/AuthSurvey/AuthSurvey.tsx | 7 ++----- src/components/Auth/AuthSurvey/AuthSurveyOption.tsx | 4 +++- 2 files changed, 5 insertions(+), 6 deletions(-) diff --git a/src/components/Auth/AuthSurvey/AuthSurvey.tsx b/src/components/Auth/AuthSurvey/AuthSurvey.tsx index 94811ff6..7486b522 100644 --- a/src/components/Auth/AuthSurvey/AuthSurvey.tsx +++ b/src/components/Auth/AuthSurvey/AuthSurvey.tsx @@ -16,9 +16,8 @@ const AuthSurvey = ({ path }: Props) => { const { register, handleSubmit, - watch, setValue, - formState: { isDirty }, + formState: { isDirty, isValid }, } = useForm(); const navigate = useNavigate(); const [userInfo, _] = useRecoilState(UserInfoState); @@ -72,9 +71,7 @@ const AuthSurvey = ({ path }: Props) => { ))}
- - 완료 - + 완료 ); }; diff --git a/src/components/Auth/AuthSurvey/AuthSurveyOption.tsx b/src/components/Auth/AuthSurvey/AuthSurveyOption.tsx index 774317ff..309a6d07 100644 --- a/src/components/Auth/AuthSurvey/AuthSurveyOption.tsx +++ b/src/components/Auth/AuthSurvey/AuthSurveyOption.tsx @@ -40,7 +40,9 @@ const AuthSurveyOption = ({ content, name, register }: Props) => { type="radio" id={content} className={`hidden peer/${content.replace(' ', '')}`} - {...register(name)} + {...register(name, { + required: true, + })} value={content} />