Skip to content

Commit

Permalink
Merge pull request #229 from official-Trippy/feature/#127
Browse files Browse the repository at this point in the history
design: 텍스트 및 티켓수정
  • Loading branch information
kimkimjunjun authored Oct 14, 2024
2 parents d1dea69 + b2d8b06 commit bf84f5a
Show file tree
Hide file tree
Showing 3 changed files with 34 additions and 25 deletions.
36 changes: 22 additions & 14 deletions src/app/board/[boardId]/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -423,7 +423,7 @@ export default function BoardPage({ params }: { params: { boardId: number } }) {
setReplyNickname(nickName);
setReplyMemId(memberId);
};
// console.log(postData);
console.log(postData);

const getTransportImage = (transport: string, ticketColor: any) => {
switch (transport) {
Expand Down Expand Up @@ -639,12 +639,12 @@ export default function BoardPage({ params }: { params: { boardId: number } }) {
</div>
<div className="w-full h-[11rem] xl:h-[32rem] lg:h-[20rem] sm:h-[11rem] rounded-[1rem] flex mt-[5rem] shadowall">
<div
className={`w-[1.4rem] xl:w-[5rem] lg:w-[3rem] sm:w-[1.4rem] h-full shadowall ${colorTicket[postData.result.ticket.ticketColor] ? `bg-[${colorTicket[postData.result.ticket.ticketColor]}]` : ""} rounded-l-[1rem]`}
className={`w-[1.4rem] xl:w-[5rem] lg:w-[3rem] sm:w-[1.4rem] h-full shadowall ${colorTicket[postData?.result.ticket.ticketColor] ? `bg-[${colorTicket[postData?.result.ticket.ticketColor]}]` : ""} rounded-l-[1rem]`}
></div>
<div className="w-full mt-[1.7rem] xl:mt-[5rem] lg:mt-[3rem] sm:mt-[0.7rem] relative">
<div className="w-full mt-[0.7rem] xl:mt-[5rem] lg:mt-[3rem] sm:mt-[0.7rem] relative">
<div className="flex justify-center">
<div className="w-[5rem] 2xl:w-[16rem] xl:w-[10rem] sm-700:w-[5rem]">
<h1 className="w-[5rem] 2xl:w-[16rem] xl:w-[10rem] lg:w-[5rem] h-[4rem] xl:h-[8rem] md-1000:h-[4rem] flex justify-center items-center text-[6rem] 2xl:text-[6rem] xl:text-[3rem] sm-700:text-[2rem] text-[#292929] font-extrabold font-akira">
<h1 className="w-[10rem] xl:w-[16rem] sm-1500:w-[10rem] h-[4rem] xl:h-[8rem] sm-1500:h-[4rem] flex items-center text-[2rem] 2xl:text-[6rem] xl:text-[3rem] sm-1550:text-[2rem] text-[#292929] font-extrabold font-akira">
{postData?.result.ticket.departureCode}
</h1>
<div className="w-[5rem] 2xl:w-[16rem] xl:w-[10rem] md-1000:w-[5rem] rounded-[0.8rem] flex justify-center">
Expand All @@ -654,7 +654,7 @@ export default function BoardPage({ params }: { params: { boardId: number } }) {
</span>
</div>
</div>
<div className="relative flex bg-white mt-[0.7rem] xl:mt-[2.8rem] lg:mt-[1rem] sm:mt-[0.7rem] w-[1.7rem] lg:w-[3.2rem] sm:w-[1.7rem] h-[1.7rem] lg:h-[2.8rem] sm:h-[3.7rem] z-10 ml-[10%] mr-[8%]">
<div className="relative flex bg-white mt-[1rem] xl:mt-[2.8rem] sm:mt-[1rem] w-[1.7rem] lg:w-[3.2rem] sm:w-[1.7rem] h-[1.7rem] lg:h-[2.8rem] sm:h-[3.7rem] z-10 ml-[10%] mr-[8%]">
{getTransportImage(
postData?.result.ticket.transport,
postData?.result.ticket.ticketColor
Expand All @@ -664,7 +664,7 @@ export default function BoardPage({ params }: { params: { boardId: number } }) {
<h1 className="w-[10rem] xl:w-[16rem] sm-1500:w-[10rem] h-[4rem] xl:h-[8rem] sm-1500:h-[4rem] flex justify-center items-center text-[2rem] 2xl:text-[6rem] xl:text-[3rem] sm-1550:text-[2rem] text-[#292929] font-extrabold font-akira">
{postData?.result.ticket.destinationCode}
</h1>
<div className="w-[5rem] xl:w-[16rem] lg:w-[10rem] sm:w-[10rem] rounded-[0.8rem] flex justify-center">
<div className="w-[10rem] xl:w-[16rem] lg:w-[10rem] sm:w-[10rem] rounded-[0.8rem] flex justify-center">
<span className={`text-[#9D9D9D] text-[0.8rem] font-semibold ${postData?.result.ticket.destination?.length > 5 || postData?.result.ticket.departure?.length > 5 ? 'text-[2rem]' : 'xl:text-[2rem] lg:text-[1.6rem] sm:text-[0.8rem]'}`}>
{postData?.result.ticket.destination}
</span>
Expand Down Expand Up @@ -706,7 +706,7 @@ export default function BoardPage({ params }: { params: { boardId: number } }) {
</div>
</div>
<div
className={`w-[15rem] xl:w-[40rem] lg:w-[20rem] sm:w-[15rem] h-full shadowall ${colorTicket[postData.result.ticket.ticketColor] ? `bg-[${colorTicket[postData.result.ticket.ticketColor]}]` : ""} rounded-r-[1rem] ml-auto`}
className={`w-[15rem] xl:w-[40rem] lg:w-[20rem] sm:w-[15rem] h-full shadowall ${colorTicket[postData?.result.ticket.ticketColor] ? `bg-[${colorTicket[postData?.result.ticket.ticketColor]}]` : ""} rounded-r-[1rem] ml-auto`}
>
<div className="absolute">
<div className="relative bg-white w-[1.3rem] xl:w-[4rem] sm:w-[1.3rem] h-[1.3rem] xl:h-[4rem] sm:h-[1.3rem] rounded-full -mt-[0.6rem] xl:-mt-[2rem] sm:-mt-[0.6rem] -ml-[0.8rem] xl:-ml-[2rem] sm:-ml-[0.8rem]"></div>
Expand All @@ -726,7 +726,7 @@ export default function BoardPage({ params }: { params: { boardId: number } }) {
</div>
</div>
</div>
<div className="py-[5rem] min-h-[100rem] ">
<div className="w-full py-[5rem] ">
{bodyWithImages.split(/<\/?p>/).filter(Boolean).map((item: string, index: number) => {
const trimmedItem = item.trim(); // 공백 제거

Expand All @@ -741,11 +741,11 @@ export default function BoardPage({ params }: { params: { boardId: number } }) {
return (
<div key={index} className="w-full">
<img
className="max-w-[60rem] max-h-[60rem]"
className="w-full"
src={images[imageIndex].accessUri}
alt=""
width={900}
height={900}
width={400}
height={300}
/>
</div>
);
Expand All @@ -764,7 +764,7 @@ export default function BoardPage({ params }: { params: { boardId: number } }) {
return (
<div key={index} className="w-full">
<img
className="max-w-[60rem] max-h-[60rem]"
className="w-full max-w-[50rem]"
src={imgSrc}
alt=""
width={900}
Expand All @@ -775,16 +775,24 @@ export default function BoardPage({ params }: { params: { boardId: number } }) {
}
}

// HTML 태그 제거: &lt; 및 &gt;를 실제 '<' 및 '>'로 변환
const cleanText = trimmedItem
.replace(/&lt;/g, '<')
.replace(/&gt;/g, '>')
.replace(/&nbsp;/g, '')
.replace(/<\/?[^>]+(>|$)/g, ""); // 모든 HTML 태그 제거

// 텍스트인 경우
return (
<p key={index} className="text-[1.6rem] font-medium">
{trimmedItem}
{cleanText}
</p>
);
})}

</div>



<div className="flex flex-wrap">
{postData?.result.post.tags.map((tagData: string, index: number) => (
<span
Expand Down
22 changes: 11 additions & 11 deletions src/app/edits/[editNum]/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -142,18 +142,18 @@ function PostEdit({ params }: { params: { editNum: number } }) {
// });
// };

function formatDates(date: any) {
const year = date?.getFullYear();
const month = String(date?.getMonth() + 1).padStart(2, '0');
const day = String(date?.getDate()).padStart(2, '0');
// function formatDates(date: any) {
// const year = date?.getFullYear();
// const month = String(date?.getMonth() + 1).padStart(2, '0');
// const day = String(date?.getDate()).padStart(2, '0');

return `${year}-${month}-${day}`;
}
// return `${year}-${month}-${day}`;
// }

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



Expand Down Expand Up @@ -387,7 +387,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
1 change: 1 addition & 0 deletions tailwind.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ const config: Config = {

'xs-400': '400px',
'md': '800px',
'sm-640': '640px',
'sm-700': '700px',
'md-850': '850px',
'md-1000': '1000px',
Expand Down

0 comments on commit bf84f5a

Please sign in to comment.