diff --git a/src/@types/review.types.ts b/src/@types/review.types.ts index fe5fcb10..6f6cf219 100644 --- a/src/@types/review.types.ts +++ b/src/@types/review.types.ts @@ -1,10 +1,10 @@ -export interface Keyword { +interface Keyword { keywordId: number; content: string; - type: string; + type?: string; } -export interface CommentItemProps { +interface CommentItemProps { commentId: number; authorNickname: string; authorProfileImageUrl: string; @@ -14,7 +14,7 @@ export interface CommentItemProps { isAuthor: boolean; } -export interface MyReviewContent { +interface MyReviewContent { reviewId: number; authorNickname: string; authorProfileImageUrl: string; @@ -25,3 +25,10 @@ export interface MyReviewContent { commentCount: number; isAuthor?: boolean; } + +interface ReviewRequest { + tourItemId: number; + rating: number; + keywords: Keyword[]; + content: string; +} diff --git a/src/@types/tours.types.ts b/src/@types/tours.types.ts index 11e862e7..52776135 100644 --- a/src/@types/tours.types.ts +++ b/src/@types/tours.types.ts @@ -1,30 +1,30 @@ -export type TourKeywordInfo = { +interface TourKeywordInfo { keywordId: number; content: string; type: string; keywordCount: number; -}; +} -export interface RegionTypes { +interface RegionTypes { areaCode?: number; subAreaCode?: number; name: string; } -export interface ToursCategoryItemProps extends RegionTypes { +interface ToursCategoryItemProps extends RegionTypes { isSelected: boolean; onSelect: (name: string) => void; } -export interface ToursListProps { +interface ToursListProps { selectedRegion: string; } -export interface ToursCategoryProps extends ToursListProps { +interface ToursCategoryProps extends ToursListProps { setSelectedRegion: (region: string) => void; } -export interface TourType { +interface TourType { contentTypeId?: number; id: number; title: string; @@ -38,7 +38,7 @@ export interface TourType { latitude?: string; } -export interface LikedListType { +interface LikedListType { tripLikedItemId: number; tourItemId: number; contentTypeId: number; @@ -53,7 +53,7 @@ export interface LikedListType { notPreferTotalCount: number; } -export interface ReviewInfoItemProps { +interface ReviewInfoItemProps { reviewId: number; authorNickname: string; authorProfileImageUrl: string; @@ -72,5 +72,5 @@ export interface ReviewInfoItemProps { interface Keyword { keywordId: number; content: string; - type: string; + type?: string; } diff --git a/src/@types/trips.types.ts b/src/@types/trips.types.ts index 36f92cd8..71ab6a4f 100644 --- a/src/@types/trips.types.ts +++ b/src/@types/trips.types.ts @@ -61,3 +61,15 @@ interface TripMemeberInfo { nickname: string; profileImageUrl: string; } + +interface Participant { + memberId: number; + nickname: string; + thumbnail: string; +} + +interface Participants { + tripSurveyMemberCount: number; + tripSurveySetMemberInfos: Participant[]; + nonTripSurveySetMemberInfos: Participant[]; +} diff --git a/src/App.tsx b/src/App.tsx index 909f6bac..030880f3 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,6 +1,3 @@ -import { ThemeProvider } from 'styled-components'; -import { GlobalStyle } from '@styles/globalStyles'; -import { theme } from '@styles/theme'; import { RecoilRoot } from 'recoil'; import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; import { ReactQueryDevtools } from '@tanstack/react-query-devtools'; @@ -17,11 +14,8 @@ const App = () => { - - - - - + + diff --git a/src/api/review.ts b/src/api/review.ts index ec7f4f43..33c11ba8 100644 --- a/src/api/review.ts +++ b/src/api/review.ts @@ -1,6 +1,5 @@ import client from './client'; import authClient from './authClient'; -import { ReviewRequest } from '@recoil/review'; // 리뷰 관련 API // 리뷰수정 diff --git a/src/components/DetailSectionBottom/DetailReviews.tsx b/src/components/DetailSectionBottom/DetailReviews.tsx index 93e1e310..ddb3161c 100644 --- a/src/components/DetailSectionBottom/DetailReviews.tsx +++ b/src/components/DetailSectionBottom/DetailReviews.tsx @@ -26,7 +26,6 @@ import ToastPopUp from '@components/common/toastpopup/ToastPopUp'; import EditDelete from '@components/common/modal/children/EditDelete'; import MyAlert from '@components/common/modal/children/MyAlert'; import { alertTypeState } from '@recoil/modal'; -import { ReviewInfoItemProps } from '@/@types/tours.types'; export default function DetailReviews({ reviewData, diff --git a/src/components/DetailSectionBottom/ReviewItem.tsx b/src/components/DetailSectionBottom/ReviewItem.tsx index 1a2817d9..c11e040e 100644 --- a/src/components/DetailSectionBottom/ReviewItem.tsx +++ b/src/components/DetailSectionBottom/ReviewItem.tsx @@ -21,7 +21,6 @@ import { import { MouseEvent, useState } from 'react'; import { getEmoji } from '@utils/utils'; import { getStarFill } from '@utils/getStarFill'; -import { ReviewInfoItemProps } from '@/@types/tours.types'; const Item: React.FC = (props: ReviewInfoItemProps) => { const { @@ -185,7 +184,7 @@ const Item: React.FC = (props: ReviewInfoItemProps) => { .map((keyword, idx) => (
+ className="rounded-md bg-gray1 px-2 py-1 text-xs text-gray6"> {getEmoji(keyword.content)} {keyword.content}
))} diff --git a/src/components/DetailSectionTop/DetailAddSchedule.tsx b/src/components/DetailSectionTop/DetailAddSchedule.tsx index 6f32843d..656d82a7 100644 --- a/src/components/DetailSectionTop/DetailAddSchedule.tsx +++ b/src/components/DetailSectionTop/DetailAddSchedule.tsx @@ -11,6 +11,7 @@ import { useState, useEffect } from 'react'; import { postTripsItem } from '@api/trips'; import { useParams } from 'react-router-dom'; import { Swiper, SwiperSlide } from 'swiper/react'; +import ToastPopUp from '@components/common/toastpopup/ToastPopUp'; const DetailAddSchedule = () => { const token = localStorage.getItem('accessToken'); @@ -30,6 +31,12 @@ const DetailAddSchedule = () => { (trip) => trip.tripStatus !== '여행완료', ); + const [toastPopUp, setToastPopUp] = useState({ + isPopUp: false, + noun: '', + verb: '', + }); + const handleNavigate = (url: string) => { navigate(url); }; @@ -63,6 +70,11 @@ const DetailAddSchedule = () => { } catch (error) { console.error('요청 실패:', error); } finally { + setToastPopUp(() => ({ + isPopUp: true, + noun: '일정', + verb: '추가', + })); setIsProcessing(false); } } @@ -79,14 +91,30 @@ const DetailAddSchedule = () => { } }, [isOpen]); + useEffect(() => { + if (toastPopUp.isPopUp) { + const timer = setTimeout(() => { + setToastPopUp(() => ({ + isPopUp: false, + noun: '', + verb: '', + })); + }, 2000); + return () => clearTimeout(timer); + } + }, [toastPopUp]); + return ( <> + {toastPopUp.isPopUp && ( + + )} {token ? ( @@ -244,8 +272,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/Review/CommentItem.tsx b/src/components/Review/CommentItem.tsx index 9b8a8fdd..c74ff1c5 100644 --- a/src/components/Review/CommentItem.tsx +++ b/src/components/Review/CommentItem.tsx @@ -6,7 +6,6 @@ import { } from '@recoil/modal'; import { commentState, targetCommentIdState } from '@recoil/review'; import { useRecoilState, useSetRecoilState } from 'recoil'; -import { CommentItemProps } from '@/@types/review.types'; const CommentItem: React.FC = (props: CommentItemProps) => { const { diff --git a/src/components/Review/MyReview.tsx b/src/components/Review/MyReview.tsx index ef5b266b..1f93e8bf 100644 --- a/src/components/Review/MyReview.tsx +++ b/src/components/Review/MyReview.tsx @@ -22,7 +22,7 @@ import MyAlert from '@components/common/modal/children/MyAlert'; import { alertTypeState } from '@recoil/modal'; import { PenIcon } from '@components/common/icons/Icons'; import ScrollTopButton from '@components/common/scrollTopButton/ScrollTopButton'; -import { MyReviewContent } from '@/@types/review.types'; + export default function MyReview() { const [reviewDataLength, setReviewDataLength] = useState(0); diff --git a/src/components/Review/Review.tsx b/src/components/Review/Review.tsx index 30335755..c60a1b28 100644 --- a/src/components/Review/Review.tsx +++ b/src/components/Review/Review.tsx @@ -15,7 +15,6 @@ import { isModalOpenState } from '@recoil/modal'; import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'; import { useParams, useNavigate } from 'react-router-dom'; import { useMutation, useQueryClient } from '@tanstack/react-query'; -import { ReviewRequest } from '@recoil/review'; interface EditReviewMutationParams { reviewData: ReviewRequest; targetReviewId: number; diff --git a/src/components/Review/ReviewComments.tsx b/src/components/Review/ReviewComments.tsx index 965314d2..05dd0244 100644 --- a/src/components/Review/ReviewComments.tsx +++ b/src/components/Review/ReviewComments.tsx @@ -13,7 +13,6 @@ import MyAlert from '@components/common/modal/children/MyAlert'; import { commentState, toastPopUpState } from '@recoil/review'; import { alertTypeState } from '@recoil/modal'; import ToastPopUp from '@components/common/toastpopup/ToastPopUp'; -import { CommentItemProps } from '@/@types/review.types'; export default function ReviewComments() { const params = useParams(); diff --git a/src/components/Review/ReviewKeyword.tsx b/src/components/Review/ReviewKeyword.tsx index 1b33a700..d6c24780 100644 --- a/src/components/Review/ReviewKeyword.tsx +++ b/src/components/Review/ReviewKeyword.tsx @@ -4,7 +4,6 @@ import { getReviewKeywords } from '@api/review'; import { useQuery } from '@tanstack/react-query'; import { useRecoilState } from 'recoil'; import { keywordsState } from '@recoil/review'; -import { Keyword } from '@/@types/review.types'; export default function ReviewKeyword() { const location = useLocation(); diff --git a/src/components/Tours/CreateTripButton.tsx b/src/components/Tours/CreateTripButton.tsx index 27026623..0cffb946 100644 --- a/src/components/Tours/CreateTripButton.tsx +++ b/src/components/Tours/CreateTripButton.tsx @@ -45,9 +45,9 @@ const CreateTripButton = () => { title={'로그인'} message={ <> - 로그인이 필요한 기능입니다. + 여정을 계획하려면 로그인이 필요해요.
- 로그인 하시겠습니까? + 로그인하러 가볼까요? } onConfirm={handleConfirm}> diff --git a/src/components/Tours/ToursCategory.tsx b/src/components/Tours/ToursCategory.tsx index c7f72853..8042e180 100644 --- a/src/components/Tours/ToursCategory.tsx +++ b/src/components/Tours/ToursCategory.tsx @@ -1,4 +1,3 @@ -import { RegionTypes, ToursCategoryProps } from '@/@types/tours.types'; import ToursCategoryItem from './ToursCategoryItem'; import { getPopularRegion } from '@api/region'; import { Swiper, SwiperSlide } from 'swiper/react'; diff --git a/src/components/Tours/ToursCategoryItem.tsx b/src/components/Tours/ToursCategoryItem.tsx index f7e62cb3..f6a11688 100644 --- a/src/components/Tours/ToursCategoryItem.tsx +++ b/src/components/Tours/ToursCategoryItem.tsx @@ -1,5 +1,3 @@ -import { ToursCategoryItemProps } from '@/@types/tours.types'; - const ToursCategoryItem = ({ name, isSelected, diff --git a/src/components/Tours/ToursItem.tsx b/src/components/Tours/ToursItem.tsx index 0e30a938..c6221f5c 100644 --- a/src/components/Tours/ToursItem.tsx +++ b/src/components/Tours/ToursItem.tsx @@ -1,4 +1,3 @@ -import { TourType } from '@/@types/tours.types'; import { HeartIcon, StarIcon } from '@components/common/icons/Icons'; import Like from '@components/common/like/Like'; import { useNavigate } from 'react-router-dom'; diff --git a/src/components/Tours/ToursList.tsx b/src/components/Tours/ToursList.tsx index fd0575ed..9f3a8a09 100644 --- a/src/components/Tours/ToursList.tsx +++ b/src/components/Tours/ToursList.tsx @@ -1,4 +1,3 @@ -import { TourType, ToursListProps } from '@/@types/tours.types'; import { getTours } from '@api/tours'; import { useInfiniteQuery } from '@tanstack/react-query'; import React, { useEffect, useState } from 'react'; 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..e1fb9a2c 100644 --- a/src/components/Wish/WishItem.tsx +++ b/src/components/Wish/WishItem.tsx @@ -1,4 +1,3 @@ -import { TourType } from '@/@types/tours.types'; import { HeartIcon, StarIcon } from '@components/common/icons/Icons'; import Like from '@components/common/like/Like'; import { useEffect, useState } from 'react'; @@ -33,12 +32,12 @@ const WishItem: React.FC = ({ wishList }) => { return (
navigate(`/detail/${id}`)}>
여행지 이미지 @@ -48,8 +47,8 @@ const WishItem: React.FC = ({ wishList }) => {
-
-

+

+

{title}

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

diff --git a/src/components/Wish/WishList.tsx b/src/components/Wish/WishList.tsx index 45c2f717..c4fbb68d 100644 --- a/src/components/Wish/WishList.tsx +++ b/src/components/Wish/WishList.tsx @@ -3,7 +3,6 @@ import InfiniteScroll from 'react-infinite-scroller'; import { v4 as uuidv4 } from 'uuid'; import WishItem from './WishItem'; import ToursItemSkeleton from '@components/Tours/ToursItemSkeleton'; -import { TourType } from '@/@types/tours.types'; import { Spinner } from '@components/common/spinner/Spinner'; interface WishListProps { diff --git a/src/pages/plan/AddToTripPlan/OurLiked.tsx b/src/components/addToList/AddToTripPlan/OurLiked.tsx similarity index 100% rename from src/pages/plan/AddToTripPlan/OurLiked.tsx rename to src/components/addToList/AddToTripPlan/OurLiked.tsx diff --git a/src/pages/plan/AddToTripPlan/OurLikedList.tsx b/src/components/addToList/AddToTripPlan/OurLikedList.tsx similarity index 97% rename from src/pages/plan/AddToTripPlan/OurLikedList.tsx rename to src/components/addToList/AddToTripPlan/OurLikedList.tsx index 76d48865..512ef578 100644 --- a/src/pages/plan/AddToTripPlan/OurLikedList.tsx +++ b/src/components/addToList/AddToTripPlan/OurLikedList.tsx @@ -2,7 +2,6 @@ import React from 'react'; import InfiniteScroll from 'react-infinite-scroller'; import { v4 as uuidv4 } from 'uuid'; import { OurLikedListItem } from './OurLikedListItem'; -import { LikedListType } from '@/@types/tours.types'; import { Spinner } from '@components/common/spinner/Spinner'; interface WishListProps { diff --git a/src/pages/plan/AddToTripPlan/OurLikedListItem.tsx b/src/components/addToList/AddToTripPlan/OurLikedListItem.tsx similarity index 97% rename from src/pages/plan/AddToTripPlan/OurLikedListItem.tsx rename to src/components/addToList/AddToTripPlan/OurLikedListItem.tsx index 19a20840..3548e423 100644 --- a/src/pages/plan/AddToTripPlan/OurLikedListItem.tsx +++ b/src/components/addToList/AddToTripPlan/OurLikedListItem.tsx @@ -1,4 +1,3 @@ -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'; diff --git a/src/pages/plan/addToOurPlace/AddtoListBtn.tsx b/src/components/addToList/addToOurPlace/AddtoListBtn.tsx similarity index 100% rename from src/pages/plan/addToOurPlace/AddtoListBtn.tsx rename to src/components/addToList/addToOurPlace/AddtoListBtn.tsx diff --git a/src/pages/plan/addToOurPlace/MyLiked.tsx b/src/components/addToList/addToOurPlace/MyLiked.tsx similarity index 100% rename from src/pages/plan/addToOurPlace/MyLiked.tsx rename to src/components/addToList/addToOurPlace/MyLiked.tsx diff --git a/src/pages/plan/addToOurPlace/MyLikedList.tsx b/src/components/addToList/addToOurPlace/MyLikedList.tsx similarity index 97% rename from src/pages/plan/addToOurPlace/MyLikedList.tsx rename to src/components/addToList/addToOurPlace/MyLikedList.tsx index 6979f41a..c8acd8d7 100644 --- a/src/pages/plan/addToOurPlace/MyLikedList.tsx +++ b/src/components/addToList/addToOurPlace/MyLikedList.tsx @@ -2,7 +2,6 @@ import React from 'react'; import InfiniteScroll from 'react-infinite-scroller'; import { v4 as uuidv4 } from 'uuid'; import { MyLikedListItem } from './MyLikedListItem'; -import { TourType } from '@/@types/tours.types'; import { Spinner } from '@components/common/spinner/Spinner'; interface WishListProps { diff --git a/src/pages/plan/addToOurPlace/MyLikedListItem.tsx b/src/components/addToList/addToOurPlace/MyLikedListItem.tsx similarity index 97% rename from src/pages/plan/addToOurPlace/MyLikedListItem.tsx rename to src/components/addToList/addToOurPlace/MyLikedListItem.tsx index 67628128..852b5ddd 100644 --- a/src/pages/plan/addToOurPlace/MyLikedListItem.tsx +++ b/src/components/addToList/addToOurPlace/MyLikedListItem.tsx @@ -1,4 +1,3 @@ -import { TourType } from '@/@types/tours.types'; import { ListCheckBtn } from '@components/common/button/ListSelectBtn'; import { StarIcon } from '@components/common/icons/Icons'; import { selectedItemsState } from '@recoil/listItem'; diff --git a/src/pages/plan/addToOurPlace/PlanAddPlace.page.tsx b/src/components/addToList/addToOurPlace/PlanAddPlace.page.tsx similarity index 100% rename from src/pages/plan/addToOurPlace/PlanAddPlace.page.tsx rename to src/components/addToList/addToOurPlace/PlanAddPlace.page.tsx diff --git a/src/pages/plan/addToOurPlace/ResultCategoryPlan.tsx b/src/components/addToList/addToOurPlace/ResultCategoryPlan.tsx similarity index 96% rename from src/pages/plan/addToOurPlace/ResultCategoryPlan.tsx rename to src/components/addToList/addToOurPlace/ResultCategoryPlan.tsx index b8988d18..e7fd80f2 100644 --- a/src/pages/plan/addToOurPlace/ResultCategoryPlan.tsx +++ b/src/components/addToList/addToOurPlace/ResultCategoryPlan.tsx @@ -1,5 +1,4 @@ import { ButtonWhite } from '@components/common/button/Button'; -import { TourType } from '@/@types/tours.types'; import { InfiniteQueryObserverResult } from '@tanstack/react-query'; import { ResultItemPlan } from './ResultItem'; import AddToListButton from './AddtoListBtn'; diff --git a/src/pages/plan/addToOurPlace/ResultItem.tsx b/src/components/addToList/addToOurPlace/ResultItem.tsx similarity index 97% rename from src/pages/plan/addToOurPlace/ResultItem.tsx rename to src/components/addToList/addToOurPlace/ResultItem.tsx index 7d027aaa..9b99dc1e 100644 --- a/src/pages/plan/addToOurPlace/ResultItem.tsx +++ b/src/components/addToList/addToOurPlace/ResultItem.tsx @@ -1,4 +1,3 @@ -import { TourType } from '@/@types/tours.types'; import { ListSelectBtn } from '@components/common/button/ListSelectBtn'; import { StarIcon } from '@components/common/icons/Icons'; import { selectedItemsState } from '@recoil/listItem'; diff --git a/src/pages/plan/addToOurPlace/SearchResult.tsx b/src/components/addToList/addToOurPlace/SearchResult.tsx similarity index 100% rename from src/pages/plan/addToOurPlace/SearchResult.tsx rename to src/components/addToList/addToOurPlace/SearchResult.tsx 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..ec00f17e 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}> + ); }; @@ -683,32 +706,23 @@ export const SearchIcon: React.FC = ({ }) => { return ( - - - - + 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/InputComment.tsx b/src/components/common/nav/InputComment.tsx index 3e3bb64d..00a343dc 100644 --- a/src/components/common/nav/InputComment.tsx +++ b/src/components/common/nav/InputComment.tsx @@ -106,7 +106,7 @@ export const InputComment: React.FC = () => { }; return ( -
+
ㅣ
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}
diff --git a/src/components/common/toggleGroup/ToggleValue.tsx b/src/components/common/toggleGroup/ToggleValue.tsx index fffff6dc..57764632 100644 --- a/src/components/common/toggleGroup/ToggleValue.tsx +++ b/src/components/common/toggleGroup/ToggleValue.tsx @@ -16,7 +16,7 @@ export const ToggleValue = ({ {values.map((value) => ( onToggle(value)}> diff --git a/src/components/search/RegionSelect.tsx b/src/components/search/RegionSelect.tsx index f0383b42..2a5c69ec 100644 --- a/src/components/search/RegionSelect.tsx +++ b/src/components/search/RegionSelect.tsx @@ -9,15 +9,16 @@ export const RegionSelect = ({}) => { const [selectedRegion, setSelectedRegion] = useState(''); // 지역값 쿼리스트링으로 저장 - const onRegionSelect = (value: string) => { + const onRegionSelect = (key: string) => { const queryParams = new URLSearchParams(location.search); + const value = AREA_CODE[key as keyof typeof AREA_CODE]; - if (value === selectedRegion) { + if (key === selectedRegion) { queryParams.delete('region'); setSelectedRegion(''); } else { queryParams.set('region', value); - setSelectedRegion(value); + setSelectedRegion(key); } navigate( @@ -30,6 +31,6 @@ export const RegionSelect = ({}) => { }; return ( - + ); }; diff --git a/src/components/search/ResultCategory.tsx b/src/components/search/ResultCategory.tsx index e6447af1..3f321437 100644 --- a/src/components/search/ResultCategory.tsx +++ b/src/components/search/ResultCategory.tsx @@ -1,5 +1,4 @@ import { ButtonWhite } from '@components/common/button/Button'; -import { TourType } from '@/@types/tours.types'; import { InfiniteQueryObserverResult } from '@tanstack/react-query'; import { ResultItem } from './ResultItem'; diff --git a/src/components/search/ResultItem.tsx b/src/components/search/ResultItem.tsx index 47c86ecc..f27ead28 100644 --- a/src/components/search/ResultItem.tsx +++ b/src/components/search/ResultItem.tsx @@ -1,4 +1,3 @@ -import { TourType } from '@/@types/tours.types'; import { useNavigate } from 'react-router-dom'; export const ResultItem = ({ result }: { result: TourType }) => { @@ -9,7 +8,7 @@ export const ResultItem = ({ result }: { result: TourType }) => { }; return (
{ />
-
{result.title}
+
{result.title}
{result.tourAddress} diff --git a/src/components/search/SearchInput.tsx b/src/components/search/SearchInput.tsx index c3dbbabf..0adedc1c 100644 --- a/src/components/search/SearchInput.tsx +++ b/src/components/search/SearchInput.tsx @@ -52,24 +52,26 @@ const SearchInput = () => {
-
- -
- - {inputValue && ( -
- +
+
+
- )} + + {inputValue && ( +
+ +
+ )} +
); diff --git a/src/components/search/StartSearchBtn.tsx b/src/components/search/StartSearchBtn.tsx index a5b9b3ef..000b3d30 100644 --- a/src/components/search/StartSearchBtn.tsx +++ b/src/components/search/StartSearchBtn.tsx @@ -1,5 +1,5 @@ import { useNavigate } from 'react-router-dom'; -import { ReactComponent as SearchIcon } from '@assets/images/Search.svg'; +import { SearchIcon } from '@components/common/icons/Icons'; export const StartSearchButton = () => { const navigate = useNavigate(); @@ -10,10 +10,10 @@ export const StartSearchButton = () => { return ( ); }; diff --git a/src/constants.ts b/src/constants.ts index 37e408d4..c50f848b 100644 --- a/src/constants.ts +++ b/src/constants.ts @@ -6,14 +6,14 @@ export const AREA_CODE = { 광주: '광주', 대전: '대전', 울산: '울산', - 세종: '세종', + 세종: '세종특별자치시', 제주: '제주', - 경기: '경기', - 강원: '강원', - 충북: '충북', - 충남: '충남', - 경북: '경북', - 경남: '경남', - 전북: '전북', - 전남: '전남', + 경기: '경기도', + 강원: '강원도', + 충북: '충청북도', + 충남: '충청남도', + 경북: '경상북도', + 경남: '경상남도', + 전북: '전라북도', + 전남: '전라남도', }; diff --git a/src/hooks/useReviewStats.ts b/src/hooks/useReviewStats.ts index 001b1a54..2c4a37fd 100644 --- a/src/hooks/useReviewStats.ts +++ b/src/hooks/useReviewStats.ts @@ -1,6 +1,5 @@ import { useQuery } from '@tanstack/react-query'; import { getToursReviews } from '@api/tours'; -import { TourKeywordInfo } from '@/@types/tours.types'; import { useParams } from 'react-router-dom'; type UseGetToursReviewsReturn = { diff --git a/src/hooks/useReviewStatsCalculator.ts b/src/hooks/useReviewStatsCalculator.ts index 88be9c15..89573b0c 100644 --- a/src/hooks/useReviewStatsCalculator.ts +++ b/src/hooks/useReviewStatsCalculator.ts @@ -1,5 +1,4 @@ import { useMemo } from 'react'; -import { TourKeywordInfo } from '@/@types/tours.types'; const getMaxMinCounts = (reviewStats: TourKeywordInfo[]) => { const counts = reviewStats.map((item) => item.keywordCount); diff --git a/src/pages/create/createTrip.page.tsx b/src/pages/create/createTrip.page.tsx index cf52e89a..ce7c23fc 100644 --- a/src/pages/create/createTrip.page.tsx +++ b/src/pages/create/createTrip.page.tsx @@ -102,7 +102,6 @@ export const CreateTrip = () => { onChange={(e) => { setTitle(e.target.value); }} - autoFocus /> {title && (
({ key: 'participantsState', default: { diff --git a/src/router/socketRouter.tsx b/src/router/socketRouter.tsx index 1f02a88f..8de2d225 100644 --- a/src/router/socketRouter.tsx +++ b/src/router/socketRouter.tsx @@ -1,7 +1,7 @@ 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/addToOurPlace/PlanAddPlace.page'; +import { PlanAddPlace } from '@components/addToList/addToOurPlace/PlanAddPlace.page'; import PlanPlaceSearch from '@pages/plan/planPlaceSearch.page'; import Trip from '@pages/trip/trip.page'; import MainLayout from './routerLayout'; diff --git a/src/styles/globalStyles.ts b/src/styles/globalStyles.ts deleted file mode 100644 index e4028567..00000000 --- a/src/styles/globalStyles.ts +++ /dev/null @@ -1,65 +0,0 @@ -import { createGlobalStyle } from 'styled-components'; - -export const GlobalStyle = createGlobalStyle` - html, body, div, span, applet, object, iframe, - h1, h2, h3, h4, h5, h6, p, blockquote, pre, - a, abbr, acronym, address, big, cite, code, - del, dfn, em, img, ins, kbd, q, s, samp, - small, strike, strong, sub, sup, tt, var, - b, u, i, center, - dl, dt, dd, ol, ul, li, - fieldset, form, label, legend, - table, caption, tbody, tfoot, thead, tr, th, td, - article, aside, canvas, details, embed, - figure, figcaption, footer, header, hgroup, - menu, nav, output, ruby, section, summary, - time, mark, audio, video, button { - margin: 0; - padding: 0; - border: 0; - font-size: 100%; - font: inherit; - vertical-align: baseline; - } - - /* HTML5 display-role reset for older browsers */ - article, aside, details, figcaption, figure, - footer, header, hgroup, menu, nav, section { - display: block; - } - - body { - line-height: 1; - } - - ol, ul { - list-style: none; - } - - blockquote, q { - quotes: none; - } - - blockquote:before, blockquote:after, - q:before, q:after { - content: ''; - content: none; - } - - table { - border-collapse: collapse; - border-spacing: 0; - } - * { - box-sizing: border-box; - } - body { - font-family: 'Pretendard Variable', sans-serif; - background-color: ${({ theme }) => theme.colors.bg_page}; - color: ${({ theme }) => theme.colors.text1}; - } - a { - text-decoration: none; - color: inherit; - } -`; diff --git a/src/styles/theme.ts b/src/styles/theme.ts deleted file mode 100644 index 93fe759f..00000000 --- a/src/styles/theme.ts +++ /dev/null @@ -1,61 +0,0 @@ -export const theme = { - colors: { - navy: '#253C59', //primary navy - blue: '#58788c', //옵션에 사용하는 두번째 blue - yellow: '#D9B70D', //찜에 사용하는 yellow - gray1: '#f8f8f8', //제일 어두운 gray - gray2: '#AFAFAF', //중간 gray - gray3: '#757575', - - error: '#CF0000', - success: '#008000', - }, - fonts: { - subtitle1: { - fontSize: '2.5rem', - fontWeight: '900', - lineHeight: '1.5', - }, - subtitle2: { - fontSize: '2rem', - fontWeight: '700', - lineHeight: '1.5', - }, - subtitle3: { - fontSize: '1.75rem', - fontWeight: '600', - lineHeight: '1.5', - }, - subtitle4: { - fontSize: '1.5rem', - fontWeight: '500', - lineHeight: '1.5', - }, - subtitle4_5: { - fontSize: '1.25rem', - fontWeight: '700', - lineHeight: '1.5', - }, - subtitle5: { - fontSize: '1rem', - fontWeight: '700', - lineHeight: '1.5', - }, - body: { - fontSize: '0.875rem', - fontWeight: '700', - lineHeight: '1.6', - }, - }, - shadows: { - shadow1: { - shadow: '0px 4px 8px rgba(0, 0, 0, 0.04)', - }, - shadow2: { - shadow: '0px 8px 16px rgba(0, 0, 0, 0.16)', - }, - shadow3: { - shadow: '0px 12px 40px rgba(0, 0, 0, 0.12)', - }, - }, -};