diff --git a/src/components/DetailSectionTop/DetailAddSchedule.tsx b/src/components/DetailSectionTop/DetailAddSchedule.tsx index 6f32843d..7605494e 100644 --- a/src/components/DetailSectionTop/DetailAddSchedule.tsx +++ b/src/components/DetailSectionTop/DetailAddSchedule.tsx @@ -85,8 +85,8 @@ const DetailAddSchedule = () => { @@ -244,8 +244,8 @@ const DetailAddSchedule = () => { } onConfirm={() => handleNavigate('/login')}> )} diff --git a/src/components/DetailSectionTop/DetailToursButtons.tsx b/src/components/DetailSectionTop/DetailToursButtons.tsx index 49de97fb..d25e517d 100644 --- a/src/components/DetailSectionTop/DetailToursButtons.tsx +++ b/src/components/DetailSectionTop/DetailToursButtons.tsx @@ -48,8 +48,8 @@ export default function DetailTourButtons({ diff --git a/src/components/DetailSectionTop/DetailToursInfo.tsx b/src/components/DetailSectionTop/DetailToursInfo.tsx index 8af2a5ee..7b3eaba3 100644 --- a/src/components/DetailSectionTop/DetailToursInfo.tsx +++ b/src/components/DetailSectionTop/DetailToursInfo.tsx @@ -9,7 +9,7 @@ export default function DetailToursInfo({ infoData }: DetailToursInfoProps) { return ( <> -
+
tour-image
-

- {title} -

+

{title}

diff --git a/src/components/DetailSectionTop/DetailToursMap.tsx b/src/components/DetailSectionTop/DetailToursMap.tsx index 07871ac0..7bec6bc9 100644 --- a/src/components/DetailSectionTop/DetailToursMap.tsx +++ b/src/components/DetailSectionTop/DetailToursMap.tsx @@ -17,7 +17,7 @@ export default function DetailToursMap({ mapData }: DetailToursMapProps) { const MapStyle = { width: '100%', - height: '180px', + height: '160px', marginTop: '5px', marginBottom: '15px', }; @@ -42,7 +42,7 @@ export default function DetailToursMap({ mapData }: DetailToursMapProps) {
-

+

{fullAddress}

diff --git a/src/components/DetailSectionTop/DetailToursRating.tsx b/src/components/DetailSectionTop/DetailToursRating.tsx index d92303d2..4f10b83d 100644 --- a/src/components/DetailSectionTop/DetailToursRating.tsx +++ b/src/components/DetailSectionTop/DetailToursRating.tsx @@ -44,7 +44,7 @@ export default function DetailToursRating({
{STAR_IDX_ARR.map((item, idx) => { return ( - + ); })} -
-

+

+

({reviewTotalCount})

diff --git a/src/components/MyTrip/MyTrip.tsx b/src/components/MyTrip/MyTrip.tsx index ae8ed92e..c80f12fc 100644 --- a/src/components/MyTrip/MyTrip.tsx +++ b/src/components/MyTrip/MyTrip.tsx @@ -32,7 +32,7 @@ const MyTrip = () => { return (
-

나의 여정

+

나의 여정

{data.length > 0 ? ( <> @@ -42,7 +42,7 @@ const MyTrip = () => { ) : ( } /> diff --git a/src/components/MyTrip/MyTripAfterList.tsx b/src/components/MyTrip/MyTripAfterList.tsx index ec33c2de..c5d65cb4 100644 --- a/src/components/MyTrip/MyTripAfterList.tsx +++ b/src/components/MyTrip/MyTripAfterList.tsx @@ -17,18 +17,22 @@ const MyTripAfterList: React.FC = ({ myTripsData }) => { new Date(a.startDate).getTime() - new Date(b.startDate).getTime(), ); - return ( - <> -
-

지난 여행

-
-
- {sortedTrips.map((myTripList: MyTripType) => ( - - ))} -
- - ); + if (sortedTrips.length > 0) { + return ( + <> +
+

지난 여행

+
+
+ {sortedTrips.map((myTripList: MyTripType) => ( + + ))} +
+ + ); + } else { + return null; + } }; export default MyTripAfterList; diff --git a/src/components/MyTrip/MyTripBeforeList.tsx b/src/components/MyTrip/MyTripBeforeList.tsx index e4d27037..88dc770f 100644 --- a/src/components/MyTrip/MyTripBeforeList.tsx +++ b/src/components/MyTrip/MyTripBeforeList.tsx @@ -14,8 +14,8 @@ const MyTripBeforeList: React.FC = ({ myTripsData }) => { return ( <> -
-

다가오는 여행

+
+

다가오는 여행

{myTripsData.map((myTripList: MyTripType) => ( diff --git a/src/components/MyTrip/MyTripIngItem.tsx b/src/components/MyTrip/MyTripIngItem.tsx index ca0d08d4..e054b93f 100644 --- a/src/components/MyTrip/MyTripIngItem.tsx +++ b/src/components/MyTrip/MyTripIngItem.tsx @@ -19,7 +19,7 @@ const MyTripIngItem: React.FC = ({ myTripList }) => {
여행지 이미지 @@ -30,13 +30,13 @@ const MyTripIngItem: React.FC = ({ myTripList }) => {
-
-
+
+
{tripName}
-
- {startDate.replace(/-/g, '.')} ~{' '} +
+ {startDate.replace(/-/g, '.')} -{' '} {endDate.replace(/-/g, '.').split('2024.')}{' '} {tripDuration === '0박 1일' ? null : ` (${tripDuration})`}
diff --git a/src/components/MyTrip/MyTripItem.tsx b/src/components/MyTrip/MyTripItem.tsx index 72375a66..7776541d 100644 --- a/src/components/MyTrip/MyTripItem.tsx +++ b/src/components/MyTrip/MyTripItem.tsx @@ -66,10 +66,10 @@ const MyTripItem: React.FC = ({ myTripList }) => {
-
+
{tripName}
-
+
{startDate.replace(/-/g, '.')} -{' '} {endDate.replace(/-/g, '.').split('2024.')} {tripDuration === '0박 1일' ? null : ` (${tripDuration})`} diff --git a/src/components/Trip/LikedToursList.tsx b/src/components/Trip/LikedToursList.tsx index c2b4e969..9fa49f59 100644 --- a/src/components/Trip/LikedToursList.tsx +++ b/src/components/Trip/LikedToursList.tsx @@ -1,4 +1,4 @@ -import { useState } from 'react'; +import { useEffect, useState } from 'react'; import { useNavigate, useParams } from 'react-router-dom'; import { useInfiniteQuery } from '@tanstack/react-query'; @@ -8,8 +8,10 @@ import NoDataMessage from '@components/common/noData/NoDataMessage'; import { getTripsLike } from '@api/trips'; import { HeartIcon, NewIcon } from '@components/common/icons/Icons'; +import Alert from '@components/common/alert/Alert'; export const LikedToursList = () => { + const [isLoggedIn, setIsLoggedIn] = useState(false); const [selectedContentTypeId, setSelectedContentTypeId] = useState< null | number >(null); @@ -18,7 +20,7 @@ export const LikedToursList = () => { const { id: tripId } = useParams(); if (!tripId) { - return; + return null; } const { fetchNextPage, hasNextPage, data, isLoading, error } = @@ -52,8 +54,21 @@ export const LikedToursList = () => { setSelectedContentTypeId(contentTypeId); }; + const handleConfirm = () => { + navigate('/login'); + }; + + useEffect(() => { + const token = window.localStorage.getItem('accessToken'); + if (token) { + setIsLoggedIn(true); + } else { + setIsLoggedIn(false); + } + }, []); + return ( -
+
{data?.pages[0].data.content.length > 0 ? ( @@ -70,7 +85,7 @@ export const LikedToursList = () => { ) : (
} /> @@ -78,16 +93,38 @@ export const LikedToursList = () => { )} {/* 우리의 관심 여행지 추가 버튼 => 검색 라우터 이동 */} -
- -
+ {isLoggedIn ? ( +
+ +
+ ) : ( + + 관심 여행지를 추가하려면 로그인이 필요해요. +
+ 로그인하러 가볼까요? + + } + onConfirm={handleConfirm}> +
+ +
+ + )}
); }; diff --git a/src/components/Trip/LikedToursLists/LikedToursListCategory.tsx b/src/components/Trip/LikedToursLists/LikedToursListCategory.tsx index 8a243c2f..8e78be04 100644 --- a/src/components/Trip/LikedToursLists/LikedToursListCategory.tsx +++ b/src/components/Trip/LikedToursLists/LikedToursListCategory.tsx @@ -12,9 +12,9 @@ const LikedToursListCategory: React.FC = ({ const categories = [ { code: null, name: '전체' }, - { code: 12, name: '관광지' }, { code: 32, name: '숙소' }, { code: 39, name: '식당' }, + { code: 12, name: '관광지' }, ]; const handleSelectCategory = (name: string) => { @@ -27,7 +27,7 @@ const LikedToursListCategory: React.FC = ({ }; return ( -
+
{categories.map((category) => { return ( + className={`body4 mr-[8px] flex h-[32px] w-[58px] items-center justify-center whitespace-nowrap rounded-[30px] border border-solid bg-[#28D8FF] px-[16px] py-[7px] leading-normal ${buttonStyle}`}> {category.name} ); diff --git a/src/components/Trip/LikedToursLists/LikedToursListItem.tsx b/src/components/Trip/LikedToursLists/LikedToursListItem.tsx index 9f7e72a5..c9e73827 100644 --- a/src/components/Trip/LikedToursLists/LikedToursListItem.tsx +++ b/src/components/Trip/LikedToursLists/LikedToursListItem.tsx @@ -72,12 +72,12 @@ const LikedToursListItem: React.FC = ({ return (
navigate(`/detail/${tourItemId}`)}>
여행지 이미지 @@ -85,7 +85,7 @@ const LikedToursListItem: React.FC = ({
-

+

{title}

diff --git a/src/components/Wish/Wish.tsx b/src/components/Wish/Wish.tsx index 11c5d8ef..560a700a 100644 --- a/src/components/Wish/Wish.tsx +++ b/src/components/Wish/Wish.tsx @@ -44,7 +44,7 @@ const Wish = () => { } return ( -
+

나의 관심 목록

@@ -60,7 +60,7 @@ const Wish = () => { /> ) : ( } /> diff --git a/src/components/Wish/WishCategory.tsx b/src/components/Wish/WishCategory.tsx index c288671b..7e9d55af 100644 --- a/src/components/Wish/WishCategory.tsx +++ b/src/components/Wish/WishCategory.tsx @@ -10,9 +10,9 @@ const WishCategory: React.FC = ({ onCategoryClick }) => { const categories = [ { code: null, name: '전체' }, - { code: 12, name: '관광지' }, { code: 32, name: '숙소' }, { code: 39, name: '식당' }, + { code: 12, name: '관광지' }, ]; const handleSelectCategory = (name: string) => { @@ -25,7 +25,7 @@ const WishCategory: React.FC = ({ onCategoryClick }) => { }; return ( -
+
{categories.map((category) => { return ( = ({ return ( ); diff --git a/src/components/Wish/WishItem.tsx b/src/components/Wish/WishItem.tsx index 8a27f666..2dc9eb98 100644 --- a/src/components/Wish/WishItem.tsx +++ b/src/components/Wish/WishItem.tsx @@ -33,12 +33,12 @@ const WishItem: React.FC = ({ wishList }) => { return (
navigate(`/detail/${id}`)}>
여행지 이미지 @@ -48,8 +48,8 @@ const WishItem: React.FC = ({ wishList }) => {
-
-

+

+

{title}

@@ -58,7 +58,7 @@ const WishItem: React.FC = ({ wishList }) => { ? (tourAddress.match(/(.*?[시군구])/)?.[0] || '') + (tourAddress .replace(/(.*?[시군구])/, '') - .match(/(특별시|광역시)?.*?[시군구]/)?.[0] || '') + .match(/(특별`시|광역시)?.*?[시군구]/)?.[0] || '') : tourAddress?.match(/(.*?[시군구])/)?.[0]}

diff --git a/src/components/common/header/DetailHeader.tsx b/src/components/common/header/DetailHeader.tsx index c008416d..2350511d 100644 --- a/src/components/common/header/DetailHeader.tsx +++ b/src/components/common/header/DetailHeader.tsx @@ -13,7 +13,7 @@ export default function DetailHeader() { }; return ( -
+
diff --git a/src/components/common/icons/Icons.tsx b/src/components/common/icons/Icons.tsx index a33a26b2..ac991698 100644 --- a/src/components/common/icons/Icons.tsx +++ b/src/components/common/icons/Icons.tsx @@ -34,7 +34,7 @@ export const HomeIcon: React.FC = ({ }; export const CalendarIcon: React.FC = ({ - size = 25, + size = 20, color = 'black', fill = 'none', className, @@ -44,76 +44,87 @@ export const CalendarIcon: React.FC = ({ xmlns="http://www.w3.org/2000/svg" width={size} height={size} - className={className} - viewBox="0 0 25 25" - fill={fill}> - + viewBox="0 0 21 21" + color={color} + fill={fill} + className={className}> + + ); +}; + +export const CalendarIcon2: React.FC = ({ size = 25 }) => { + return ( + + = ({ ); }; -export const CalendarIcon2: React.FC = ({ size = 25 }) => { +export const CalendarIcon3: React.FC = ({ + size = 25, + color = 'black', + fill = 'none', + className, +}) => { return ( + fill={fill}> + = ({ }; export const PenIcon: React.FC = ({ - size = 25, + size = 20, color = 'black', fill = 'none', className, @@ -386,24 +412,21 @@ export const PenIcon: React.FC = ({ }; export const PhoneIcon: React.FC = ({ - size = 25, - color = 'black', - fill = 'none', + size = 20, + color = '#888888', + fill = '#888888', }) => { return ( - - - + viewBox="0 0 21 21" + fill={fill}> + ); }; diff --git a/src/components/common/like/Like.tsx b/src/components/common/like/Like.tsx index 159bf56d..8ab6504c 100644 --- a/src/components/common/like/Like.tsx +++ b/src/components/common/like/Like.tsx @@ -75,9 +75,9 @@ const Like = ({ liked, id }: LikeProps) => { title={'로그인'} message={ <> - 관심 목록 등록시 로그인이 필요합니다. + 관심 여행지를 추가하려면 로그인이 필요해요.
- 로그인 하시겠습니까? + 로그인하러 가볼까요? } onConfirm={handleConfirm} diff --git a/src/components/common/nav/Nav.tsx b/src/components/common/nav/Nav.tsx index c26329ac..e0b3e51c 100644 --- a/src/components/common/nav/Nav.tsx +++ b/src/components/common/nav/Nav.tsx @@ -1,6 +1,6 @@ import { useLocation, useNavigate } from 'react-router-dom'; import { - CalendarIcon, + CalendarIcon3, CalendarIcon2, HeartIcon, HomeIcon, @@ -45,7 +45,9 @@ const Nav = () => { fill={isActive('/') ? 'currentColor' : 'none'} />
-

홈

+

+ 홈 +

{isLoggedIn ? ( @@ -56,31 +58,33 @@ const Nav = () => { {isActive('/mytrip') ? ( ) : ( - + )}
-

여정

+

+ 일정 +

) : ( - 나의 여정 조회를 위해 로그인이 필요합니다. + 여정을 관리하려면 로그인이 필요해요.
- 로그인 하시겠습니까? + 로그인하러 가볼까요? } onConfirm={handleConfirm}>
-
-

- 여정 +

+ 일정

@@ -96,7 +100,7 @@ const Nav = () => { fill={isActive('/wishlist') ? 'currentColor' : 'none'} />
-

+

관심목록

@@ -105,9 +109,9 @@ const Nav = () => { title={'로그인'} message={ <> - 관심 목록 조회를 위해 로그인이 필요합니다. + 관심 여행지를 관리하려면 로그인이 필요해요.
- 로그인 하시겠습니까? + 로그인하러 가볼까요? } onConfirm={handleConfirm}> @@ -118,7 +122,7 @@ const Nav = () => { fill={isActive('/wishlist') ? 'currentColor' : 'none'} />
-

+

관심목록

@@ -134,7 +138,9 @@ const Nav = () => { fill={isActive('/mypage') ? 'currentColor' : 'none'} />
-

내정보

+

+ 내정보 +

diff --git a/src/components/common/noData/NoDataMessage.tsx b/src/components/common/noData/NoDataMessage.tsx index 6e15c2d2..cab01453 100644 --- a/src/components/common/noData/NoDataMessage.tsx +++ b/src/components/common/noData/NoDataMessage.tsx @@ -15,13 +15,9 @@ const NoDataMessage: React.FC = ({
{icon}
-
- {message1} -
+
{message1}
-
- {message2} -
+
{message2}