Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

QA: 여정페이지, 상세페이지 기능 및 디자인 일부 수정 #271

Merged
merged 11 commits into from
Jan 25, 2024
Merged

QA: 여정페이지, 상세페이지 기능 및 디자인 일부 수정 #271

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
eaf7e10
style: 위치 truncate 적용
NohWookJin Jan 25, 2024
7ece2eb
refactor: 값 없을시 null 반환
NohWookJin Jan 25, 2024
66abdbe
style: 워딩 qa 기반 정리
NohWookJin Jan 25, 2024
f83cd5e
style: 썸네일 모양 변경
NohWookJin Jan 25, 2024
10cb586
style: 기호 변경
NohWookJin Jan 25, 2024
487674b
style: 디자인 qa 반영
NohWookJin Jan 25, 2024
62bfb61
style: nav 신규 디자인 반영
NohWookJin Jan 25, 2024
594822a
style: 디자인 qa 적용
NohWookJin Jan 25, 2024
da052d1
style: 폰트 코드 삭제
NohWookJin Jan 25, 2024
abc82a7
style: 디자인 qa 적용
NohWookJin Jan 25, 2024
daae2af
style: 여정 디자인 qa
NohWookJin Jan 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions src/components/DetailSectionTop/DetailAddSchedule.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,8 +85,8 @@ const DetailAddSchedule = () => {
<Dialog.Root open={isOpen} onOpenChange={setIsOpen}>
<Dialog.Trigger asChild>
<button className="flex h-[53px] w-1/2 items-center justify-center gap-2 rounded-lg border border-solid border-gray3 p-2 pr-4 ">
<CalendarIcon className="mb-[2px]" />
<span className="text-sm ">일정 추가</span>
<CalendarIcon className="mb-[2px]" color="#5E5E5E" />
<span className="text-sm text-gray5">일정 추가</span>
</button>
</Dialog.Trigger>
<Dialog.Portal>
Expand Down Expand Up @@ -244,8 +244,8 @@ const DetailAddSchedule = () => {
}
onConfirm={() => handleNavigate('/login')}>
<button className="flex h-[53px] w-1/2 items-center justify-center gap-2 rounded-lg border border-solid border-gray3 p-2 pr-4 ">
<CalendarIcon className="mb-[2px]" />
<span className="text-sm ">일정 추가</span>
<CalendarIcon className="mb-[2px]" color="#5E5E5E" />
<span className="text-sm text-gray5">일정 추가</span>
</button>
</Alert>
)}
Expand Down
4 changes: 2 additions & 2 deletions src/components/DetailSectionTop/DetailToursButtons.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,8 +48,8 @@ export default function DetailTourButtons({
<button
onClick={handlePostingReivew}
className="flex h-[53px] w-1/2 items-center justify-center gap-2 rounded-lg border border-solid border-gray3 p-2 pr-4">
<PenIcon className="mt-[3px]" />
<span className="text-sm ">리뷰 쓰기</span>
<PenIcon className="mt-[0.5px]" color="#5E5E5E" />
<span className="text-sm text-gray5">리뷰 쓰기</span>
</button>
</div>
</>
Expand Down
6 changes: 2 additions & 4 deletions src/components/DetailSectionTop/DetailToursInfo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,17 +9,15 @@ export default function DetailToursInfo({ infoData }: DetailToursInfoProps) {

return (
<>
<div className="column mt-1 flex aspect-[3/2] h-[11.938rem] w-full items-start overflow-hidden rounded-lg">
<div className="column flex aspect-[3/2] max-h-[176px] w-full items-start overflow-hidden rounded-lg">
<img
src={originalThumbnailUrl}
alt="tour-image"
className="h-full w-full"
/>
</div>
<div className="mt-1 flex w-full items-center justify-between py-2">
<h1 className="font-['Pretendard'] text-2xl font-bold text-black ">
{title}
</h1>
<h1 className="text-2xl font-bold text-black ">{title}</h1>
<Like liked={liked} id={id} />
</div>
</>
Expand Down
4 changes: 2 additions & 2 deletions src/components/DetailSectionTop/DetailToursMap.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ export default function DetailToursMap({ mapData }: DetailToursMapProps) {

const MapStyle = {
width: '100%',
height: '180px',
height: '160px',
marginTop: '5px',
marginBottom: '15px',
};
Expand All @@ -42,7 +42,7 @@ export default function DetailToursMap({ mapData }: DetailToursMapProps) {
<div className="flex-col items-start">
<div className="mb-[10px] ml-[-2.5px] flex items-center">
<MapIcon size={24} fill="#888888" color="none" />
<p className="min-w-[310px] flex-shrink-0 flex-grow-0 overflow-hidden text-left text-sm text-[#1e1e1e]">
<p className="max-w-[325px] flex-shrink-0 flex-grow-0 overflow-hidden truncate text-left text-sm text-[#1e1e1e]">
{fullAddress}
</p>
</div>
Expand Down
6 changes: 3 additions & 3 deletions src/components/DetailSectionTop/DetailToursRating.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ export default function DetailToursRating({
<div className="flex w-full cursor-pointer items-center">
{STAR_IDX_ARR.map((item, idx) => {
return (
<span key={`${item}+${idx}`}>
<span key={`${item}+${idx}`} className="pr-[3px]">
<svg
width="16"
height="15"
Expand All @@ -67,8 +67,8 @@ export default function DetailToursRating({
</span>
);
})}
<div className="h-3 pl-1">
<p className="text-xs font-normal leading-4 text-gray4 ">
<div className="h-3 pl-[1px]">
<p className="text-[14px] font-normal leading-4 text-gray4 ">
({reviewTotalCount})
</p>
</div>
Expand Down
4 changes: 2 additions & 2 deletions src/components/MyTrip/MyTrip.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ const MyTrip = () => {
return (
<div className="mt-3 min-h-[100vh]">
<div className="pb-[15px]">
<h1 className="text-2xl font-bold text-black ">나의 여정</h1>
<h1 className="text-[24px] font-bold text-gray7">나의 여정</h1>
</div>
{data.length > 0 ? (
<>
Expand All @@ -42,7 +42,7 @@ const MyTrip = () => {
</>
) : (
<NoDataMessage
message1="저장된 여정 목록이 없습니다."
message1="참여하고 있는 여정이 없어요."
message2="새로운 여행을 계획해보세요!"
icon={<PenIcon size={44} fill="#EDEDED" color="#EDEDED" />}
/>
Expand Down
28 changes: 16 additions & 12 deletions src/components/MyTrip/MyTripAfterList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,18 +17,22 @@ const MyTripAfterList: React.FC<MyTripIngListProps> = ({ myTripsData }) => {
new Date(a.startDate).getTime() - new Date(b.startDate).getTime(),
);

return (
<>
<div className="mb-[10px] mt-[40px]">
<h1 className="text-xl font-bold text-stone-900">지난 여행</h1>
</div>
<div className="no-scrollbar grid grid-cols-1 gap-[5px] overflow-y-scroll">
{sortedTrips.map((myTripList: MyTripType) => (
<MyTripItem key={uuidv4()} myTripList={myTripList} />
))}
</div>
</>
);
if (sortedTrips.length > 0) {
return (
<>
<div className="mb-[10px] mt-[30px]">
<h1 className="text-[18px] font-bold text-gray7">지난 여행</h1>
</div>
<div className="no-scrollbar grid grid-cols-1 gap-[5px] overflow-y-scroll">
{sortedTrips.map((myTripList: MyTripType) => (
<MyTripItem key={uuidv4()} myTripList={myTripList} />
))}
</div>
</>
);
} else {
return null;
}
};

export default MyTripAfterList;
4 changes: 2 additions & 2 deletions src/components/MyTrip/MyTripBeforeList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,8 @@ const MyTripBeforeList: React.FC<MyTripIngListProps> = ({ myTripsData }) => {

return (
<>
<div className="mb-[10px] mt-[40px]">
<h1 className="text-xl font-bold text-stone-900">다가오는 여행</h1>
<div className="mb-[10px] mt-[30px]">
<h1 className="text-[18px] font-bold text-gray7">다가오는 여행</h1>
</div>
<div className="no-scrollbar grid grid-cols-1 gap-[5px] overflow-y-scroll">
{myTripsData.map((myTripList: MyTripType) => (
Expand Down
10 changes: 5 additions & 5 deletions src/components/MyTrip/MyTripIngItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ const MyTripIngItem: React.FC<MyTripItemProps> = ({ myTripList }) => {
<div className="flex">
<div>
<img
className="h-10 min-h-10 w-10 rounded-3xl rounded-lg object-cover"
className="h-10 min-h-10 w-10 rounded-3xl object-cover"
src={tripThumbnailUrl}
alt="여행지 이미지"
/>
Expand All @@ -30,13 +30,13 @@ const MyTripIngItem: React.FC<MyTripItemProps> = ({ myTripList }) => {
</span>
</div>
<div className="ml-[15px] flex max-w-[300px] flex-col items-start justify-between gap-[15px] ">
<div className="mt-[4px] ">
<div className="w-56 truncate text-sm font-bold text-white ">
<div className="mt-[6px]">
<div className="w-56 truncate text-[15px] font-bold text-white ">
{tripName}
</div>

<div className="text-xs font-semibold text-white">
{startDate.replace(/-/g, '.')} ~{' '}
<div className="mt-[4px] text-xs font-semibold text-white">
{startDate.replace(/-/g, '.')} -{' '}
{endDate.replace(/-/g, '.').split('2024.')}{' '}
{tripDuration === '0박 1일' ? null : ` (${tripDuration})`}
</div>
Expand Down
4 changes: 2 additions & 2 deletions src/components/MyTrip/MyTripItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,10 +66,10 @@ const MyTripItem: React.FC<MyTripItemProps> = ({ myTripList }) => {
</div>
<div className="ml-[10px] flex w-full flex-col items-start justify-between ">
<div className="mt-[1px] ">
<div className="truncate text-[15px] text-base font-semibold text-stone-900">
<div className="truncate text-[15px] text-base font-bold text-stone-900">
{tripName}
</div>
<div className="text-sm font-normal text-zinc-500">
<div className="text-[14px] font-normal text-gray5">
{startDate.replace(/-/g, '.')} -{' '}
{endDate.replace(/-/g, '.').split('2024.')}
{tripDuration === '0박 1일' ? null : ` (${tripDuration})`}
Expand Down
65 changes: 51 additions & 14 deletions src/components/Trip/LikedToursList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';

Expand All @@ -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<boolean>(false);
const [selectedContentTypeId, setSelectedContentTypeId] = useState<
null | number
>(null);
Expand All @@ -18,7 +20,7 @@ export const LikedToursList = () => {
const { id: tripId } = useParams();

if (!tripId) {
return;
return null;
}

const { fetchNextPage, hasNextPage, data, isLoading, error } =
Expand Down Expand Up @@ -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 (
<div className="realtive pt-5">
<div className="realtive mt-[10px]">
<LikedToursListCategory onCategoryClick={handleCategoryClick} />

{data?.pages[0].data.content.length > 0 ? (
Expand All @@ -70,24 +85,46 @@ export const LikedToursList = () => {
) : (
<div className="relative min-h-[60vh]">
<NoDataMessage
message1="우리의 관심 목록이 없습니다."
message1="우리의 관심 목록이 비어있어요."
message2="가고 싶은 장소를 추가해보세요!"
icon={<HeartIcon size={44} fill="#EDEDED" color="#EDEDED" />}
/>
</div>
)}

{/* 우리의 관심 여행지 추가 버튼 => 검색 라우터 이동 */}
<div className="sticky bottom-[65px] left-1/2 z-[100] inline-flex h-10 w-[168px] -translate-x-1/2 transform items-center justify-center gap-1.5 rounded-3xl border border-solid border-cyan-400 bg-white px-3.5">
<button
onClick={() => navigate('add')}
className="flex items-center justify-between">
<NewIcon />
<span className="ml-[5px] mt-[0.5px] text-sm font-semibold text-cyan-400">
우리의 관심목록 추가
</span>
</button>
</div>
{isLoggedIn ? (
<div className="sticky bottom-[65px] left-1/2 z-[100] inline-flex h-10 w-[168px] -translate-x-1/2 transform items-center justify-center gap-1.5 rounded-3xl border border-solid border-cyan-400 bg-white px-3.5">
<button
onClick={() => navigate('add')}
className="flex items-center justify-between">
<NewIcon />
<span className="ml-[5px] mt-[0.5px] text-sm font-semibold text-cyan-400">
우리의 관심목록 추가
</span>
</button>
</div>
) : (
<Alert
title={'로그인'}
message={
<>
관심 여행지를 추가하려면 로그인이 필요해요.
<br />
로그인하러 가볼까요?
</>
}
onConfirm={handleConfirm}>
<div className="sticky bottom-[65px] left-1/2 z-[100] inline-flex h-10 w-[168px] -translate-x-1/2 transform items-center justify-center gap-1.5 rounded-3xl border border-solid border-cyan-400 bg-white px-3.5">
<button className="flex items-center justify-between">
<NewIcon />
<span className="ml-[5px] mt-[0.5px] text-sm font-semibold text-cyan-400">
우리의 관심목록 추가
</span>
</button>
</div>
</Alert>
)}
</div>
);
};
4 changes: 2 additions & 2 deletions src/components/Trip/LikedToursLists/LikedToursListCategory.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,9 @@ const LikedToursListCategory: React.FC<LikedToursListCategoryProps> = ({

const categories = [
{ code: null, name: '전체' },
{ code: 12, name: '관광지' },
{ code: 32, name: '숙소' },
{ code: 39, name: '식당' },
{ code: 12, name: '관광지' },
];

const handleSelectCategory = (name: string) => {
Expand All @@ -27,7 +27,7 @@ const LikedToursListCategory: React.FC<LikedToursListCategoryProps> = ({
};

return (
<div className="no-scrollbar mb-6 flex w-[100%] overflow-scroll overflow-y-hidden bg-white">
<div className="no-scrollbar mb-[10px] flex w-[100%] overflow-scroll overflow-y-hidden bg-white">
{categories.map((category) => {
return (
<LikedToursListCategoryItem
Expand Down
2 changes: 1 addition & 1 deletion src/components/Trip/LikedToursLists/LikedToursListCategoryItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ export const LikedToursListCategoryItem: React.FC<
return (
<button
onClick={handleCategoryClick}
className={`body4 mr-[4px] flex items-center justify-center whitespace-nowrap rounded-[30px] border border-solid bg-[#28D8FF] px-[16px] py-[7px] leading-normal ${buttonStyle}`}>
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}
</button>
);
Expand Down
6 changes: 3 additions & 3 deletions src/components/Trip/LikedToursLists/LikedToursListItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,20 +72,20 @@ const LikedToursListItem: React.FC<LikedToursListItemProps> = ({

return (
<div
className={`relative cursor-pointer pb-[4px]`}
className={`relative mb-[4px] cursor-pointer`}
onClick={() => navigate(`/detail/${tourItemId}`)}>
<div className="flex">
<div>
<img
className="rounded-1 h-[72px] max-h-[72px] w-[72px] rounded-[16px] object-cover"
className="rounded-1 h-[72px] max-h-[72px] w-[72px] rounded-[8px] object-cover"
src={smallThumbnailUrl}
alt="여행지 이미지"
/>
</div>

<div className="ml-[8px] flex flex-col items-start justify-between gap-[1px]">
<div className="max-w-[270px]">
<p className=" truncate whitespace-nowrap px-[2px] font-['Pretendard'] text-[16px] font-bold leading-normal text-black">
<p className="truncate whitespace-nowrap px-[2px] text-[16px] font-bold leading-normal text-black">
{title}
</p>

Expand Down
4 changes: 2 additions & 2 deletions src/components/Wish/Wish.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ const Wish = () => {
}

return (
<div className="mt-3 min-h-[100vh]">
<div className="mt-[10px] min-h-[100vh]">
<div className="sticky top-0 z-[105] bg-white py-0.5">
<h1 className="title2 pt-3">나의 관심 목록</h1>
<WishCategory onCategoryClick={handleCategoryClick} />
Expand All @@ -60,7 +60,7 @@ const Wish = () => {
/>
) : (
<NoDataMessage
message1="저장된 관심 목록이 없습니다."
message1="관심 여행지가 없어요."
message2="가고 싶은 장소를 저장해보세요!"
icon={<HeartIcon size={44} fill="#EDEDED" color="#EDEDED" />}
/>
Expand Down
4 changes: 2 additions & 2 deletions src/components/Wish/WishCategory.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,9 @@ const WishCategory: React.FC<WishCategoryProps> = ({ onCategoryClick }) => {

const categories = [
{ code: null, name: '전체' },
{ code: 12, name: '관광지' },
{ code: 32, name: '숙소' },
{ code: 39, name: '식당' },
{ code: 12, name: '관광지' },
];

const handleSelectCategory = (name: string) => {
Expand All @@ -25,7 +25,7 @@ const WishCategory: React.FC<WishCategoryProps> = ({ onCategoryClick }) => {
};

return (
<div className="no-scrollbar mb-6 mt-3 flex w-[100%] overflow-scroll overflow-y-hidden bg-white">
<div className="no-scrollbar mb-[10px] mt-[10px] flex w-[100%] overflow-scroll overflow-y-hidden bg-white">
{categories.map((category) => {
return (
<WishCategoryItem
Expand Down
Loading