From b2d8b06bf91686283cfb07d1110cfad44f313bf1 Mon Sep 17 00:00:00 2001
From: kimkimjunjun <wnsgnl323@gmail.com>
Date: Mon, 14 Oct 2024 18:12:09 +0900
Subject: [PATCH] =?UTF-8?q?design:=20=ED=85=8D=EC=8A=A4=ED=8A=B8=20?=
 =?UTF-8?q?=EB=B0=8F=20=ED=8B=B0=EC=BC=93=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/board/[boardId]/page.tsx | 36 +++++++++++++++++++-------------
 src/app/edits/[editNum]/page.tsx | 22 +++++++++----------
 tailwind.config.ts               |  1 +
 3 files changed, 34 insertions(+), 25 deletions(-)

diff --git a/src/app/board/[boardId]/page.tsx b/src/app/board/[boardId]/page.tsx
index 6da8867..0b2f45f 100644
--- a/src/app/board/[boardId]/page.tsx
+++ b/src/app/board/[boardId]/page.tsx
@@ -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) {
@@ -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">
@@ -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
@@ -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>
@@ -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>
@@ -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(); // 공백 제거
 
@@ -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>
                                 );
@@ -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}
@@ -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
diff --git a/src/app/edits/[editNum]/page.tsx b/src/app/edits/[editNum]/page.tsx
index 536e6d9..d8ecd8f 100644
--- a/src/app/edits/[editNum]/page.tsx
+++ b/src/app/edits/[editNum]/page.tsx
@@ -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)}`;
+    // };
 
 
 
@@ -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>) => {
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 85e617e..f6a606e 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -32,6 +32,7 @@ const config: Config = {
 
         'xs-400': '400px',
         'md': '800px',
+        'sm-640': '640px',
         'sm-700': '700px',
         'md-850': '850px',
         'md-1000': '1000px',