Skip to content

Commit

Permalink
Merge pull request #134 from official-Trippy/feature/#127
Browse files Browse the repository at this point in the history 
feat: 티켓 운송수단 svg tsx로 변환
  • Loading branch information
@kimkimjunjun
kimkimjunjun authored Sep 23, 2024
2 parents 34c5243 + 3c55586 commit 9a66554
Show file tree
Hide file tree
Showing 8 changed files with 263 additions and 49 deletions.
67 changes: 39 additions & 28 deletions src/app/edits/[editNum]/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,11 @@ interface ApiResponse {
result: CountryResult;
}

interface CountryResult {
// 기존 프로퍼티들...
isoAlp3?: string; // isoAlp3 프로퍼티 추가 (선택적)
}


function PostEdit({ params }: { params: { editNum: number } }) {
const { data: postData, refetch: postRefetch } = useQuery({
Expand All @@ -62,8 +67,10 @@ function PostEdit({ params }: { params: { editNum: number } }) {
{ imgsrc: car1 },
]);
const [passengerCount, setPassengerCount] = useState(postData?.result.ticket.memberNum);
const [startDate, setStartDate] = useState<Date | null>(null);
const [endDate, setEndDate] = useState<Date | null>(null);
const [startDate, setStartDate] = useState<Date | null>(postData?.result.ticket.startDate);
const [endDate, setEndDate] = useState<Date | null>(postData?.result.ticket.endDate);
const [startDates, setStartDates] = useState<Date | null>(null);
const [endDates, setEndDates] = useState<Date | null>(null);
const [dateOpen, setDateOpen] = useState(false);
const [title, setTitle] = useState(postData?.result.post.title);
const [body, setBody] = useState('');
Expand All @@ -81,15 +88,16 @@ function PostEdit({ params }: { params: { editNum: number } }) {
});
const [result, setResult] = useState<ApiResponse | null>(null);
const [result1, setResult1] = useState<ApiResponse | null>(null);
const [transport, setTransport] = useState(postData?.result.ticket.transport)

const formatDate = (date: Date | null) => {
if (!date) return '';
return date.toLocaleDateString('ko-KR', {
year: 'numeric',
month: '2-digit',
day: '2-digit',
});
};
// const formatDate = (date: Date | null) => {
// if (!date) return '';
// return date.toLocaleDateString('ko-KR', {
// year: 'numeric',
// month: '2-digit',
// day: '2-digit',
// });
// };

function formatDates(date: any) {
const year = date?.getFullYear();
Expand All @@ -100,8 +108,8 @@ function PostEdit({ params }: { params: { editNum: number } }) {
}

const formatDateRange = () => {
if (!startDate || !endDate) return '';
return `${formatDate(startDate)} ~ ${formatDate(endDate)}`;
if (!startDates || !endDates) return '';
return `${formatDates(startDates)} ~ ${formatDates(endDates)}`;
};


Expand Down Expand Up @@ -152,6 +160,7 @@ function PostEdit({ params }: { params: { editNum: number } }) {
});
};


const handleImageUpload = async (event: ChangeEvent<HTMLInputElement>) => {
const file = event.target.files?.[0];
if (event.target.files && event.target.files.length > 0) {
Expand Down Expand Up @@ -187,16 +196,18 @@ function PostEdit({ params }: { params: { editNum: number } }) {
tags: tags,
}
const ticketRequest = {
id: postData?.result.ticket.id,
id: postData?.result?.ticket?.id,
departure: inputValue1,
departureCode: postData?.result?.ticket?.departureCode || (result?.result?.isoAlp3 || ''),
destination: inputValue2,
image: images[0] || postData?.result.ticket.image,
destinationCode: postData?.result?.ticket?.destinationCode || (result1?.result?.isoAlp3 || ''),
image: images[0] || postData?.result?.ticket?.image,
memberNum: Number(passengerCount),
startDate: formatDates(startDate) || postData?.result.ticket.startDate,
endDate: formatDates(endDate) || postData?.result.ticket.endDate,
startDate: startDates || startDate,
endDate: endDates || endDate,
ticketColor: ticketColor,
transport: 'Airplane'
}
transport: transport
};
try {
console.log(postRequest, ticketRequest)
await editPost(postRequest);
Expand Down Expand Up @@ -230,7 +241,7 @@ function PostEdit({ params }: { params: { editNum: number } }) {
}
};
}, [thumbnailPreview]);
console.log(formatDates(startDate), formatDates(endDate))
// console.log(formatDates(startDate), formatDates(endDate))


const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
Expand Down Expand Up @@ -259,7 +270,7 @@ function PostEdit({ params }: { params: { editNum: number } }) {
}


console.log(postData)
console.log(result)
return (
<div>
<Header />
Expand Down Expand Up @@ -297,7 +308,7 @@ function PostEdit({ params }: { params: { editNum: number } }) {
<div className='w-full mt-[5rem] relative'>
<div className='flex justify-center'>
<div className='ml-[5rem]'>
<h1 className='h-[9rem] text-[6rem] font-extrabold font-akira'>{result1?.result.countryIsoAlp2 || postData?.result.ticket.departureCode}</h1>
<h1 className='h-[9rem] text-[6rem] font-extrabold font-akira'>{result1?.result?.isoAlp3 || postData?.result?.ticket?.departureCode}</h1>
<div className='w-[18rem] h-[3.6rem] px-[2rem] shadowall rounded-[0.8rem] flex mt-4'>
<input
className='w-[12rem] text-[1.6rem] outline-none'
Expand Down Expand Up @@ -341,7 +352,7 @@ function PostEdit({ params }: { params: { editNum: number } }) {
}
</div>
<div>
<h1 className='h-[10rem] text-[6rem] font-extrabold font-akira'>{result?.result.countryIsoAlp2 || postData?.result.ticket.destinationCode}</h1>
<h1 className='h-[10rem] text-[6rem] font-extrabold font-akira'>{result?.result?.isoAlp3 || postData?.result?.ticket?.departureCode}</h1>
<div className='w-[18rem] h-[3.6rem] px-[2rem] shadowall rounded-[0.8rem] flex'>
<input
className='w-[12rem] text-[1.6rem] outline-none'
Expand Down Expand Up @@ -374,17 +385,17 @@ function PostEdit({ params }: { params: { editNum: number } }) {
{dateOpen ? (
<div className='w-[25rem]'>
<DatePicker
selected={startDate || undefined}
selected={startDates || undefined}
onChange={(dates) => {
const [start, end] = dates;
setStartDate(start);
setEndDate(end);
setStartDates(start);
setEndDates(end);
if (start && end) {
setDateOpen(false);
}
}}
startDate={startDate || undefined}
endDate={endDate || undefined}
startDate={startDates || undefined}
endDate={endDates || undefined}
selectsRange
inline
dateFormat="yyyy. MM. dd"
Expand All @@ -393,7 +404,7 @@ function PostEdit({ params }: { params: { editNum: number } }) {
) : (
<div className='w-[25rem] flex items-center' onClick={() => setDateOpen(true)}>
<Image src={date} alt='' />
{startDate && endDate ? (
{startDates && endDates ? (
<span>{formatDateRange()}</span>
) : (
<span>{postData?.result.ticket.startDate} - {postData?.result.ticket.endDate}</span>
Expand Down
21 changes: 12 additions & 9 deletions src/app/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ import busG from "@/dummy/main/busG.svg"
import trainG from "@/dummy/main/trainG.svg"
import bycicleG from "@/dummy/main/bycicleG.svg"
import carG from "@/dummy/main/carG.svg"
import { AirSVG, BusSVG, BycicleSVG, CarSVG, TrainSVG } from "@/components/transportsvg/home";


const PAGE_SIZE = 10;
Expand Down Expand Up @@ -93,18 +94,18 @@ export default function Home() {

const bodyText = getTextFromHtml(posts.post.body);

const getTransportImage = () => {
switch (posts.ticket.transport) {
const getTransportImage = (transport: string, ticketColor: any) => {
switch (transport) {
case 'Airplane':
return airG;
return <AirSVG fillColor={colorTicket[ticketColor]} />;
case 'Car':
return carG;
return <CarSVG fillColor={colorTicket[ticketColor]} />;
case 'Bus':
return busG;
return <BusSVG fillColor={colorTicket[ticketColor]} />;
case 'Bicycle':
return bycicleG;
return <BycicleSVG fillColor={colorTicket[ticketColor]} />;
case 'Train':
return trainG;
return <TrainSVG fillColor={colorTicket[ticketColor]} />;
default:
return null; // 기본값 또는 대체 이미지
}
Expand All @@ -117,15 +118,17 @@ export default function Home() {
{posts.ticket.departureCode ? (
<div className="flex text-[3.2rem] font-extrabold font-akira mx-auto mt-[1rem]">
<span>{posts.ticket.departureCode}</span>
<Image className="mx-[1rem]" src={getTransportImage()} alt="transport" />
<div className="mx-[0.5rem] mt-[1.5rem]">
{getTransportImage(posts.ticket.transport, posts.ticket.ticketColor)}
</div>
<span>{posts.ticket.destinationCode}</span>
</div>
) : (
<div className="flex text-[3.2rem] h-[5.5rem] font-extrabold font-akira mx-auto">
</div>
)}
<div className="px-[1.7rem] flex-1">
<h1 className="font-semibold text-[2.4rem]">{posts.post.title}</h1>
<h1 className="font-semibold text-[2.4rem] theboki text-ellipsis overflow-hidden">{posts.post.title}</h1>
<span className="font-normal text-[2rem] text-[#6B6B6B] text-ellipsis overflow-hidden theboki">{bodyText}</span>
</div>
<div className="p-[1.7rem] flex">
Expand Down
4 changes: 2 additions & 2 deletions src/app/post/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -206,9 +206,9 @@ function PostWrite() {
}
const ticketRequest = {
departure: inputValue1,
departureCode: result?.result.countryIsoAlp2,
departureCode: result?.result.isoAlp3,
destination: inputValue2,
destinationCode: result1?.result.countryIsoAlp2,
destinationCode: result1?.result.isoAlp3,
image: images[0],
memberNum: Number(passengerCount),
startDate: formatDates(startDate),
Expand Down
19 changes: 11 additions & 8 deletions src/components/profile/MyTicket.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import bycicle from '@/dummy/mypage/bycicle.svg'
import car from '@/dummy/mypage/car.svg'
import train from '@/dummy/mypage/train.svg'
import { useRouter } from "next/navigation";
import { MyAirSVG, MyBusSVG, MyBycicleSVG, MyCarSVG, MyTrainSVG } from "../transportsvg/mypage";
interface ticketProps {
totalBoardCount: number | undefined;
}
Expand Down Expand Up @@ -45,18 +46,18 @@ const MyTicket = ({ totalBoardCount }: ticketProps) => {
<div className="grid grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 gap-12">
{myTicketData?.result.map((ticektDatas: any) => {

const getTransportImage = () => {
switch (ticektDatas.ticket.transport) {
const getTransportImage = (transport: string, ticketColor: any) => {
switch (transport) {
case 'Airplane':
return air;
return <MyAirSVG fillColor={colorTicket[ticketColor]} />;
case 'Car':
return car;
return <MyCarSVG fillColor={colorTicket[ticketColor]} />;
case 'Bus':
return bus;
return <MyBusSVG fillColor={colorTicket[ticketColor]} />;
case 'Bicycle':
return bycicle;
return <MyBycicleSVG fillColor={colorTicket[ticketColor]} />;
case 'Train':
return train;
return <MyTrainSVG fillColor={colorTicket[ticketColor]} />;
default:
return null; // 기본값 또는 대체 이미지
}
Expand Down Expand Up @@ -96,7 +97,9 @@ const MyTicket = ({ totalBoardCount }: ticketProps) => {
<div className="mx-auto border border-dashed border-[#CFCFCF]" />
<div className="flex flex-col font-extrabold font-akira mx-auto">
<span className="text-[3.2rem] sm:text-[2.8rem] md:text-[2.4rem] lg:text-[2rem] xl:text-[3.2rem]">{ticektDatas.ticket.departureCode}</span>
<Image className="mx-auto" src={getTransportImage()} width={15} height={15} alt="transport" />
<div className="mx-auto">
{getTransportImage(ticektDatas.ticket.transport, ticektDatas.ticket.ticketColor)}
</div>
<span className="text-[3.2rem] sm:text-[2.8rem] md:text-[2.4rem] lg:text-[2rem] xl:text-[3.2rem]">{ticektDatas.ticket.destinationCode}</span>
</div>
</div>
Expand Down
Loading

0 comments on commit 9a66554

Please sign in to comment.