From d0ee9fd6e1b5d59e9dcff4574658506f348f33a5 Mon Sep 17 00:00:00 2001 From: joanShim Date: Tue, 16 Jan 2024 18:19:47 +0900 Subject: [PATCH 01/12] =?UTF-8?q?Feat:=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20?= =?UTF-8?q?=EC=97=AC=EB=B6=80=20=ED=99=95=EC=9D=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Tours/CreateTripButton.tsx | 46 ++++++++++++++++++----- 1 file changed, 37 insertions(+), 9 deletions(-) diff --git a/src/components/Tours/CreateTripButton.tsx b/src/components/Tours/CreateTripButton.tsx index 60e444d1..968546aa 100644 --- a/src/components/Tours/CreateTripButton.tsx +++ b/src/components/Tours/CreateTripButton.tsx @@ -1,18 +1,46 @@ +import { useState } from 'react'; import { useNavigate } from 'react-router-dom'; +import Alert from '@components/common/alert/Alert'; +import { getItem } from '@utils/localStorageFun'; const CreateTripButton = () => { const navigate = useNavigate(); + const [, setShowAlert] = useState(false); + const isLogin = getItem('accessToken'); + + const handleCreateTrip = async () => { + if (isLogin) { + navigate('/create'); + } else { + setShowAlert(true); + } + }; + + const handleConfirm = () => { + navigate('/login'); + }; return ( -
- -
+ <> + + 나의 여정 조회를 위해 로그인이 필요합니다. +
+ 로그인 하시겠습니까? + + } + onConfirm={handleConfirm}> +
+ +
+ + ); }; From 6af85b3e9934ebc89888dc47bcb63f0b08fca8c1 Mon Sep 17 00:00:00 2001 From: joanShim Date: Tue, 16 Jan 2024 18:44:23 +0900 Subject: [PATCH 02/12] =?UTF-8?q?Fix:=20api=20=EB=B3=80=EA=B2=BD=EC=97=90?= =?UTF-8?q?=20=EB=94=B0=EB=A5=B8=20=EB=A1=9C=EB=94=A9=20=EB=B0=8F=20?= =?UTF-8?q?=EC=97=90=EB=9F=AC=20=EC=B2=98=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/create/createTrip.page.tsx | 21 ++++++++++++++------- 1 file changed, 14 insertions(+), 7 deletions(-) diff --git a/src/pages/create/createTrip.page.tsx b/src/pages/create/createTrip.page.tsx index c9e2b865..4d10e129 100644 --- a/src/pages/create/createTrip.page.tsx +++ b/src/pages/create/createTrip.page.tsx @@ -18,24 +18,32 @@ import { formatDate } from '@utils/formatDate'; import { useQuery } from '@tanstack/react-query'; import { getMemberTrips } from '@api/member'; import { useNavigate } from 'react-router-dom'; +import { Spinner } from '@components/common/spinner/Spinner'; export const CreateTrip = () => { const navigate = useNavigate(); const [title, setTitle] = useState(''); const [numOfMembers, increaseNumOfMembers, decreaseNumOfMembers] = useCounter( - 2, - 2, - 12, - ); // (기본값, 최솟값, 최댓값) + 1, + 1, + ); const [showSelectDate, setShowSelectDate] = useState(false); const [showSelectDestination, setShowSelectDestination] = useState(false); + const tripDate = useRecoilValue(tripDateState); - const { data } = useQuery({ + const { data, isLoading, isError } = useQuery({ queryKey: ['myTrips'], queryFn: () => getMemberTrips(), }); - const MY_TRIP_NUMBER = data?.data.numberOfElements + 1; + if (isLoading) { + return ; + } + if (isError) { + return
데이터를 불러오는 중 오류가 발생했습니다.
; + } + console.log(data); + const MY_TRIP_NUMBER = data?.length + 1; const defaultTitle = `나의 여정 ${MY_TRIP_NUMBER}`; const handleSubmit = async () => { @@ -62,7 +70,6 @@ export const CreateTrip = () => { } }; - const tripDate = useRecoilValue(tripDateState); const formattedTripDate = tripDate.startDate && tripDate.endDate ? `${formatDate(tripDate.startDate, 'MM.dd')} - ${formatDate( From 3cc3bfa4902861023d6ad4f60e898d4a122a2df1 Mon Sep 17 00:00:00 2001 From: joanShim Date: Tue, 16 Jan 2024 18:47:00 +0900 Subject: [PATCH 03/12] =?UTF-8?q?Refactor:=20=EB=B2=84=ED=8A=BC=20?= =?UTF-8?q?=EC=98=81=EC=97=AD=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Tours/CreateTripButton.tsx | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/src/components/Tours/CreateTripButton.tsx b/src/components/Tours/CreateTripButton.tsx index 968546aa..1aee1528 100644 --- a/src/components/Tours/CreateTripButton.tsx +++ b/src/components/Tours/CreateTripButton.tsx @@ -26,19 +26,17 @@ const CreateTripButton = () => { title={'로그인'} message={ <> - 나의 여정 조회를 위해 로그인이 필요합니다. + 로그인이 필요한 기능입니다.
로그인 하시겠습니까? } onConfirm={handleConfirm}> -
- -
+ ); From dd3a2a9a44074adc651385386ae8882e8103ad8a Mon Sep 17 00:00:00 2001 From: joanShim Date: Tue, 16 Jan 2024 22:19:30 +0900 Subject: [PATCH 04/12] =?UTF-8?q?Feat:=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20?= =?UTF-8?q?=EC=97=AC=EB=B6=80=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/Tours/CreateTripButton.tsx | 62 +++++++++++++++-------- src/components/common/icons/Icons.tsx | 32 ++++++++++++ src/pages/create/createTrip.page.tsx | 8 +-- 3 files changed, 77 insertions(+), 25 deletions(-) diff --git a/src/components/Tours/CreateTripButton.tsx b/src/components/Tours/CreateTripButton.tsx index 1aee1528..27026623 100644 --- a/src/components/Tours/CreateTripButton.tsx +++ b/src/components/Tours/CreateTripButton.tsx @@ -1,14 +1,33 @@ -import { useState } from 'react'; +import { useEffect, useState } from 'react'; import { useNavigate } from 'react-router-dom'; import Alert from '@components/common/alert/Alert'; -import { getItem } from '@utils/localStorageFun'; +import { getMember } from '@api/member'; const CreateTripButton = () => { const navigate = useNavigate(); + const [isLogin, setIsLogin] = useState(false); const [, setShowAlert] = useState(false); - const isLogin = getItem('accessToken'); + const [checked, setChecked] = useState(false); - const handleCreateTrip = async () => { + useEffect(() => { + const checkLoginStatus = async () => { + try { + const res = await getMember(); + if (res.data.status === 200) { + setIsLogin(true); + } + } catch (err) { + console.error(err); + setIsLogin(false); + } finally { + setChecked(true); + } + }; + + checkLoginStatus(); + }, []); + + const handleCreateTrip = () => { if (isLogin) { navigate('/create'); } else { @@ -19,25 +38,26 @@ const CreateTripButton = () => { const handleConfirm = () => { navigate('/login'); }; - return ( <> - - 로그인이 필요한 기능입니다. -
- 로그인 하시겠습니까? - - } - onConfirm={handleConfirm}> - - + {checked && ( + + 로그인이 필요한 기능입니다. +
+ 로그인 하시겠습니까? + + } + onConfirm={handleConfirm}> + + + )} ); }; diff --git a/src/components/common/icons/Icons.tsx b/src/components/common/icons/Icons.tsx index b03fc9c7..a5fb0eea 100644 --- a/src/components/common/icons/Icons.tsx +++ b/src/components/common/icons/Icons.tsx @@ -1239,3 +1239,35 @@ export const CheckboxIcon: React.FC = ({ ); }; + +export const CounterIcon: React.FC = ({ + size = 10, + color = 'gray3', + fill = 'gray3', +}) => { + return ( + + + + + + + ); +}; diff --git a/src/pages/create/createTrip.page.tsx b/src/pages/create/createTrip.page.tsx index 4d10e129..c9895a56 100644 --- a/src/pages/create/createTrip.page.tsx +++ b/src/pages/create/createTrip.page.tsx @@ -42,7 +42,6 @@ export const CreateTrip = () => { if (isError) { return
데이터를 불러오는 중 오류가 발생했습니다.
; } - console.log(data); const MY_TRIP_NUMBER = data?.length + 1; const defaultTitle = `나의 여정 ${MY_TRIP_NUMBER}`; @@ -124,15 +123,16 @@ export const CreateTrip = () => { -
{numOfMembers}명
+
인원
+
{numOfMembers}명
From 46b48276ecf6e03c60596ef2df080995462669a0 Mon Sep 17 00:00:00 2001 From: joanShim Date: Tue, 16 Jan 2024 22:46:10 +0900 Subject: [PATCH 05/12] =?UTF-8?q?Design:=20=EC=9D=B8=EC=9B=90=20=EC=B9=B4?= =?UTF-8?q?=EC=9A=B4=ED=84=B0=20=EB=B2=84=ED=8A=BC=20=EB=94=94=EC=9E=90?= =?UTF-8?q?=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/icons/Icons.tsx | 71 ++++++++++++++++----------- src/pages/create/createTrip.page.tsx | 13 ++--- 2 files changed, 50 insertions(+), 34 deletions(-) diff --git a/src/components/common/icons/Icons.tsx b/src/components/common/icons/Icons.tsx index a5fb0eea..67ed8ce2 100644 --- a/src/components/common/icons/Icons.tsx +++ b/src/components/common/icons/Icons.tsx @@ -1240,34 +1240,49 @@ export const CheckboxIcon: React.FC = ({ ); }; -export const CounterIcon: React.FC = ({ - size = 10, - color = 'gray3', - fill = 'gray3', -}) => { +export const CounterIcon: React.FC< + IconProps & { plus?: boolean; minus?: boolean } +> = ({ size = 12, fill = '#D7D7D7', plus, minus }) => { return ( - - - - - - + <> + {plus && ( + + + + + )} + {minus && ( + + + + )} + ); }; diff --git a/src/pages/create/createTrip.page.tsx b/src/pages/create/createTrip.page.tsx index c9895a56..56cb6c52 100644 --- a/src/pages/create/createTrip.page.tsx +++ b/src/pages/create/createTrip.page.tsx @@ -3,6 +3,7 @@ import BackHeader from '@components/common/header/BackHeader'; import { CalendarIcon, CloseIcon, + CounterIcon, SearchIcon, UserIcon, } from '@components/common/icons/Icons'; @@ -124,17 +125,17 @@ export const CreateTrip = () => {
인원
-
+
-
{numOfMembers}명
+
{numOfMembers}
From e7cf417fefd478bb5a05f5ae6799a8911c8498c6 Mon Sep 17 00:00:00 2001 From: joanShim Date: Tue, 16 Jan 2024 23:55:33 +0900 Subject: [PATCH 06/12] =?UTF-8?q?Feat:=20=EC=97=AC=ED=96=89=20=EC=9D=BC?= =?UTF-8?q?=EC=A0=95=201=EC=9D=BC=20=EC=84=A0=ED=83=9D=20=EC=A0=81?= =?UTF-8?q?=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/DatePicker/Calendar.tsx | 33 ++++++++++++++---------- src/components/common/icons/Icons.tsx | 2 +- src/components/createTrip/SelectDate.tsx | 10 ++++--- src/pages/create/createTrip.page.tsx | 27 +++++++++++-------- 4 files changed, 43 insertions(+), 29 deletions(-) diff --git a/src/components/DatePicker/Calendar.tsx b/src/components/DatePicker/Calendar.tsx index 5185160e..1c7a1ac7 100644 --- a/src/components/DatePicker/Calendar.tsx +++ b/src/components/DatePicker/Calendar.tsx @@ -49,6 +49,9 @@ const Calendar: React.FC<{ }; const handleDateClick = (date: Date) => { + // if (startDate && !endDate) { + // setEndDate(startDate); + // } else if (startDate && !endDate && date < startDate) { setEndDate(startDate); setStartDate(date); @@ -98,7 +101,7 @@ const Calendar: React.FC<{ let afterClass = ''; if (isStart) { - dayClass = 'rounded-full w-[40px] bg-main2 text-white z-10'; + dayClass = 'rounded-full size-[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]' : ''; @@ -107,7 +110,7 @@ const Calendar: React.FC<{ 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]'; + dayClass = 'bg-[#DAFBFF] w-full'; } const onClick = () => handleDateClick(date); @@ -118,7 +121,7 @@ const Calendar: React.FC<{ className={`relative flex h-[48px] cursor-pointer items-center justify-center ${beforeClass} ${afterClass}`} onClick={onClick}>
+ className={`flex h-[40px] items-center justify-center ${dayClass}`}> {day}
@@ -145,7 +148,7 @@ const Calendar: React.FC<{ } return ( -
+
{format(monthDate, 'yyyy년 MM월', { locale: ko })}
@@ -159,16 +162,18 @@ const Calendar: React.FC<{ return ( <> -
- {startDate && endDate - ? `${format(startDate, 'MM.dd', { locale: ko })} - ${format( - endDate, - 'MM.dd', - { locale: ko }, - )} (${differenceInDays(endDate, startDate)}박 ${ - differenceInDays(endDate, startDate) + 1 - }일)` - : '날짜를 선택해주세요.'} +
+ {startDate && !endDate + ? `${format(startDate, 'MM.dd', { locale: ko })}` + : startDate && endDate + ? `${format(startDate, 'MM.dd', { locale: ko })} - ${format( + endDate, + 'MM.dd', + { locale: ko }, + )} (${differenceInDays(endDate, startDate)}박 ${ + differenceInDays(endDate, startDate) + 1 + }일)` + : '날짜를 선택해주세요.'}
diff --git a/src/components/common/icons/Icons.tsx b/src/components/common/icons/Icons.tsx index 67ed8ce2..e1ccd8bd 100644 --- a/src/components/common/icons/Icons.tsx +++ b/src/components/common/icons/Icons.tsx @@ -1123,7 +1123,7 @@ export const ShareIcon: React.FC = ({ }; export const PlanIcon: React.FC = ({ - size = 20, + size = 24, color = 'black', fill = 'none', }) => { diff --git a/src/components/createTrip/SelectDate.tsx b/src/components/createTrip/SelectDate.tsx index e5fdaa0b..aadc9696 100644 --- a/src/components/createTrip/SelectDate.tsx +++ b/src/components/createTrip/SelectDate.tsx @@ -11,14 +11,18 @@ export const SelectDate = ({ onClose }: { onClose: () => void }) => { const [selectedEndDate, setSelectedEndDate] = useState(null); const handleComplete = () => { - setTripDate({ startDate: selectedStartDate, endDate: selectedEndDate }); + const endDate = selectedEndDate ? selectedEndDate : selectedStartDate; + setTripDate({ startDate: selectedStartDate, endDate }); onClose(); }; return (
-
- +
+
+ +
+
날짜 선택
{ diff --git a/src/pages/create/createTrip.page.tsx b/src/pages/create/createTrip.page.tsx index 56cb6c52..069ed41c 100644 --- a/src/pages/create/createTrip.page.tsx +++ b/src/pages/create/createTrip.page.tsx @@ -4,6 +4,7 @@ import { CalendarIcon, CloseIcon, CounterIcon, + PlanIcon, SearchIcon, UserIcon, } from '@components/common/icons/Icons'; @@ -72,11 +73,13 @@ export const CreateTrip = () => { const formattedTripDate = tripDate.startDate && tripDate.endDate - ? `${formatDate(tripDate.startDate, 'MM.dd')} - ${formatDate( - tripDate.endDate, - 'MM.dd', - )}` - : '여행 날짜(선택)'; + ? tripDate.startDate === tripDate.endDate + ? formatDate(tripDate.startDate, 'yyyy. MM. dd') + : `${formatDate(tripDate.startDate, 'yyyy. MM. dd')} - ${formatDate( + tripDate.endDate, + 'MM. dd', + )}` + : '여행 날짜 (선택)'; if (showSelectDate) { return ( @@ -101,7 +104,7 @@ export const CreateTrip = () => {
여행 생성하기
- + {
인원
- + {numOfMembers !== 1 && ( + + )}
{numOfMembers}
); diff --git a/src/components/search/SearchResult.tsx b/src/components/search/SearchResult.tsx index 5f1ae0c4..74fbb61f 100644 --- a/src/components/search/SearchResult.tsx +++ b/src/components/search/SearchResult.tsx @@ -85,16 +85,7 @@ export const SearchResult = ({ /> ))}
- {/* {searchResults ? ( - - ) : ( -
검색결과가 없습니다.
- )} */} + {noResults ? (
검색결과가 없습니다.
) : ( From b44537dca5d6e1c280d7916dc2175b8adda11f10 Mon Sep 17 00:00:00 2001 From: joanShim Date: Wed, 17 Jan 2024 04:03:29 +0900 Subject: [PATCH 08/12] =?UTF-8?q?Add:=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=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Trip/LikedToursList.tsx | 3 +++ src/components/Trip/TripSectionTop.tsx | 3 ++- 2 files changed, 5 insertions(+), 1 deletion(-) create mode 100644 src/components/Trip/LikedToursList.tsx diff --git a/src/components/Trip/LikedToursList.tsx b/src/components/Trip/LikedToursList.tsx new file mode 100644 index 00000000..67119420 --- /dev/null +++ b/src/components/Trip/LikedToursList.tsx @@ -0,0 +1,3 @@ +export const LikedToursList = () => { + return
LikedToursList
; +}; diff --git a/src/components/Trip/TripSectionTop.tsx b/src/components/Trip/TripSectionTop.tsx index efc0960b..82e03c8e 100644 --- a/src/components/Trip/TripSectionTop.tsx +++ b/src/components/Trip/TripSectionTop.tsx @@ -4,6 +4,7 @@ import TripInfo from './TripInfo'; import { BackBox } from '@components/common'; import { useNavigate } from 'react-router-dom'; import PlanTripButton from './PlanTripButton'; +import { LikedToursList } from './LikedToursList'; const TripSectionTop = () => { const navigate = useNavigate(); @@ -21,7 +22,7 @@ const TripSectionTop = () => { ,
우리의 관심목록
]} + contents={[, ]} />
); From 7065eb4f1fe352d14176673f3076ef925461358b Mon Sep 17 00:00:00 2001 From: joanShim Date: Wed, 17 Jan 2024 12:05:34 +0900 Subject: [PATCH 09/12] =?UTF-8?q?Remove:=20=EC=97=AC=ED=96=89=20=EC=A7=80?= =?UTF-8?q?=EC=97=AD=20=EC=84=A0=ED=83=9D=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/DatePicker/Calendar.tsx | 3 --- .../createTrip/SelectDestination.tsx | 16 -------------- src/pages/create/createTrip.page.tsx | 21 ------------------- 3 files changed, 40 deletions(-) delete mode 100644 src/components/createTrip/SelectDestination.tsx diff --git a/src/components/DatePicker/Calendar.tsx b/src/components/DatePicker/Calendar.tsx index 1c7a1ac7..1db551ab 100644 --- a/src/components/DatePicker/Calendar.tsx +++ b/src/components/DatePicker/Calendar.tsx @@ -49,9 +49,6 @@ const Calendar: React.FC<{ }; const handleDateClick = (date: Date) => { - // if (startDate && !endDate) { - // setEndDate(startDate); - // } else if (startDate && !endDate && date < startDate) { setEndDate(startDate); setStartDate(date); diff --git a/src/components/createTrip/SelectDestination.tsx b/src/components/createTrip/SelectDestination.tsx deleted file mode 100644 index c4abe304..00000000 --- a/src/components/createTrip/SelectDestination.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import { ButtonPrimary } from '@components/common/button/Button'; -import { BackIcon } from '@components/common/icons/Icons'; - -export const SelectDestination = ({ onClose }: { onClose: () => void }) => { - return ( -
-
- -
-
검색
-
- 완료 -
-
- ); -}; diff --git a/src/pages/create/createTrip.page.tsx b/src/pages/create/createTrip.page.tsx index 069ed41c..ca568ca8 100644 --- a/src/pages/create/createTrip.page.tsx +++ b/src/pages/create/createTrip.page.tsx @@ -5,11 +5,9 @@ import { CloseIcon, CounterIcon, PlanIcon, - SearchIcon, UserIcon, } from '@components/common/icons/Icons'; import { InputField } from '@components/createTrip/InputField'; -import { SelectDestination } from '@components/createTrip/SelectDestination'; import { tripDateState } from '@recoil/tripDate'; import { useState } from 'react'; import { useRecoilValue } from 'recoil'; @@ -30,7 +28,6 @@ export const CreateTrip = () => { 1, ); const [showSelectDate, setShowSelectDate] = useState(false); - const [showSelectDestination, setShowSelectDestination] = useState(false); const tripDate = useRecoilValue(tripDateState); const { data, isLoading, isError } = useQuery({ @@ -90,15 +87,6 @@ export const CreateTrip = () => { /> ); } - if (showSelectDestination) { - return ( - { - setShowSelectDestination(false); - }} - /> - ); - } return (
@@ -154,15 +142,6 @@ export const CreateTrip = () => {
{formattedTripDate}
- { - setShowSelectDestination(true); - }} - isClickable> -
여행지 (선택)
- -
완료
From 821398bb6fc1292590e7174177e3593c06c5d3d3 Mon Sep 17 00:00:00 2001 From: sue Date: Wed, 17 Jan 2024 13:06:48 +0900 Subject: [PATCH 10/12] =?UTF-8?q?Design:=20=EA=B2=BD=EB=B9=84=20=EC=B4=88?= =?UTF-8?q?=EA=B3=BC=20=ED=94=84=EB=A1=9C=EA=B7=B8=EB=9E=98=EC=8A=A4?= =?UTF-8?q?=EB=B0=94=20=20=EB=94=94=EC=9E=90=EC=9D=B8=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Plan/TripBudget.tsx | 25 +++++++++++++------------ src/components/common/tab/Tab.tsx | 2 +- 2 files changed, 14 insertions(+), 13 deletions(-) diff --git a/src/components/Plan/TripBudget.tsx b/src/components/Plan/TripBudget.tsx index 54293bea..ab38ffb0 100644 --- a/src/components/Plan/TripBudget.tsx +++ b/src/components/Plan/TripBudget.tsx @@ -10,7 +10,12 @@ const TripBudget = () => { const [targetBudget, setTargetBudget] = useState(0); // 예시 목표 경비 const [currentSpending, setCurrentSpending] = useState(0); // 초기 사용 경비 - // 프로그레스 바 값 계산 + useEffect(() => { + if (budget) { + setTargetBudget(budget.budget || 0); + setCurrentSpending(budget.calculatedPrice || 0); + } + }, [budget]); // 프로그레스 바 값 계산 const progress = Math.min( currentSpending && targetBudget @@ -18,20 +23,12 @@ const TripBudget = () => { : 0, 100, ); - useEffect(() => { // 경비 수정 모달 추가 예정 - const timer = setTimeout(() => setCurrentSpending(3000), 300); + const timer = setTimeout(() => setCurrentSpending(100000), 300); return () => clearTimeout(timer); }, []); - useEffect(() => { - if (budget) { - setTargetBudget(budget.budget || 0); - setCurrentSpending(budget.calculatedPrice || 0); - } - }, [budget]); - // 목표 경비 설정 함수 const handleSetTargetBudget = (newTargetBudget: number) => { setTargetBudget(newTargetBudget); @@ -54,8 +51,12 @@ const TripBudget = () => { }} value={progress}> = 100 ? 'bg-sub2' : 'bg-main2' + } transition-transform duration-[660ms]`} + style={{ + transform: `translateX(${progress >= 100 ? 0 : -100 + progress}%)`, + }} /> diff --git a/src/components/common/tab/Tab.tsx b/src/components/common/tab/Tab.tsx index 34fe447d..3ae8f972 100644 --- a/src/components/common/tab/Tab.tsx +++ b/src/components/common/tab/Tab.tsx @@ -8,7 +8,7 @@ interface TabProps { const Tab = ({ lists, contents }: TabProps) => ( {lists.map((list, index) => { return ( From e17f6d7619857adfca15f2c5a7af38d845fde225 Mon Sep 17 00:00:00 2001 From: sue Date: Wed, 17 Jan 2024 23:31:34 +0900 Subject: [PATCH 11/12] =?UTF-8?q?Design:=20Plus=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 --- src/components/common/icons/Icons.tsx | 29 +++++++++------------------ 1 file changed, 9 insertions(+), 20 deletions(-) diff --git a/src/components/common/icons/Icons.tsx b/src/components/common/icons/Icons.tsx index 493de888..3d70d69e 100644 --- a/src/components/common/icons/Icons.tsx +++ b/src/components/common/icons/Icons.tsx @@ -483,30 +483,19 @@ export const PlusIcon: React.FC = ({ xmlns="http://www.w3.org/2000/svg" width={size} height={size} - viewBox="0 0 21 21" + viewBox="0 0 14 14" fill={fill}> - ); From ff99bed35dac50874b2c38aca91a4606427795de Mon Sep 17 00:00:00 2001 From: sue Date: Wed, 17 Jan 2024 23:31:58 +0900 Subject: [PATCH 12/12] =?UTF-8?q?Feat:=20=EC=A7=80=EB=8F=84=20=EC=9C=84?= =?UTF-8?q?=EC=B9=98=20=EC=9E=AC=EC=84=A4=EC=A0=95=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Plan/TripBudget.tsx | 6 +---- src/components/Plan/TripMap.tsx | 43 +++++++++++++++++++++++++----- 2 files changed, 38 insertions(+), 11 deletions(-) diff --git a/src/components/Plan/TripBudget.tsx b/src/components/Plan/TripBudget.tsx index ab38ffb0..8838fb25 100644 --- a/src/components/Plan/TripBudget.tsx +++ b/src/components/Plan/TripBudget.tsx @@ -16,6 +16,7 @@ const TripBudget = () => { setCurrentSpending(budget.calculatedPrice || 0); } }, [budget]); + // 프로그레스 바 값 계산 const progress = Math.min( currentSpending && targetBudget @@ -23,11 +24,6 @@ const TripBudget = () => { : 0, 100, ); - useEffect(() => { - // 경비 수정 모달 추가 예정 - const timer = setTimeout(() => setCurrentSpending(100000), 300); - return () => clearTimeout(timer); - }, []); // 목표 경비 설정 함수 const handleSetTargetBudget = (newTargetBudget: number) => { diff --git a/src/components/Plan/TripMap.tsx b/src/components/Plan/TripMap.tsx index bf06dced..8c430353 100644 --- a/src/components/Plan/TripMap.tsx +++ b/src/components/Plan/TripMap.tsx @@ -1,4 +1,5 @@ import { Paths } from '@/@types/service'; +import { useEffect, useRef } from 'react'; import { Map, MapMarker, Polyline, useKakaoLoader } from 'react-kakao-maps-sdk'; const VITE_KAKAO_MAP_API_KEY = import.meta.env.VITE_KAKAO_MAP_API_KEY; @@ -8,6 +9,11 @@ const TripMap = ({ paths }: { paths: Paths[] }) => { const latitude = firstPath?.fromLatitude; const longitude = firstPath?.fromLongitude; + // Kakao Maps SDK 로드 상태 + const [_] = useKakaoLoader({ + appkey: VITE_KAKAO_MAP_API_KEY, + }); + const defaultPosition = { lat: Number(latitude), lng: Number(longitude) }; const getCenterPosition = () => { @@ -31,10 +37,6 @@ const TripMap = ({ paths }: { paths: Paths[] }) => { const centerPosition = getCenterPosition(); - const [_] = useKakaoLoader({ - appkey: VITE_KAKAO_MAP_API_KEY, - }); - const MapStyle = { width: '100%', height: '180px', @@ -58,14 +60,43 @@ const TripMap = ({ paths }: { paths: Paths[] }) => { }); } + const mapRef = useRef(null); + + // 지도 범위 재설정 함수 + const setBounds = () => { + if (mapRef.current) { + const bounds = new kakao.maps.LatLngBounds(); + paths.forEach((path) => { + bounds.extend( + new kakao.maps.LatLng( + Number(path.fromLatitude), + Number(path.fromLongitude), + ), + ); + bounds.extend( + new kakao.maps.LatLng( + Number(path.toLatitude), + Number(path.toLongitude), + ), + ); + }); + mapRef.current.setBounds(bounds); + } + }; + + useEffect(() => { + setBounds(); + }, [paths]); + return ( -
+
+ className="relative rounded-lg object-fill" + ref={mapRef}> {paths.map((path, index) => (