Merge pull request #136 from official-Trippy/feature/#127

design: 게시글 운행수단 ui수정
official-Trippy · Sep 23, 2024 · 2d0699a · 2d0699a
2 parents d4e7d33 + e815e35
commit 2d0699a
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 4 deletions.
diff --git a/src/app/board/[boardId]/page.tsx b/src/app/board/[boardId]/page.tsx
@@ -36,6 +36,7 @@ import deleteBoard from "@/services/board/delete/deleteBoard";
 import Swal from "sweetalert2";
 import menubars from "@/dummy/menubars.svg"
 import deleteReply from "@/services/board/delete/deleteReply";
+import { PostAirSVG, PostBusSVG, PostBycicleSVG, PostCarSVG, PostTrainSVG } from "@/components/transportsvg/post";
 
 export default function BoardPage({ params }: { params: { boardId: number } }) {
   const accessToken = Cookies.get("accessToken");
@@ -307,6 +308,24 @@ export default function BoardPage({ params }: { params: { boardId: number } }) {
     setReplyMemId(memberId);
   };
   console.log(replyId);
+
+  const getTransportImage = (transport: string, ticketColor: any) => {
+    switch (transport) {
+      case 'Airplane':
+        return <PostAirSVG fillColor={colorTicket[ticketColor]} />;
+      case 'Car':
+        return <PostCarSVG fillColor={colorTicket[ticketColor]} />;
+      case 'Bus':
+        return <PostBusSVG fillColor={colorTicket[ticketColor]} />;
+      case 'Bicycle':
+        return <PostBycicleSVG fillColor={colorTicket[ticketColor]} />;
+      case 'Train':
+        return <PostTrainSVG fillColor={colorTicket[ticketColor]} />;
+      default:
+        return null; // 기본값 또는 대체 이미지
+    }
+  };
+
   return (
     <div>
       <Header />
@@ -376,10 +395,10 @@ export default function BoardPage({ params }: { params: { boardId: number } }) {
                     </span>
                   </div>
                 </div>
-                <div className="relative flex -mt-[3.5rem] bg-white z-10 mx-[5%]">
-                  <Image className="" src={air} alt="비행기" />
+                <div className="relative flex bg-white mt-[3rem] z-10 mx-[3%]">
+                  {getTransportImage(postData?.result.ticket.transport, postData?.result.ticket.ticketColor)}
                 </div>
-                <div className="ml-[5rem]">
+                <div className="">
                   <h1 className="text-[6rem] font-extrabold font-akira">{postData?.result.ticket.destinationCode}</h1>
                   <div className="w-[16rem] h-[3.6rem] pl-[2rem] rounded-[0.8rem] flex">
                     <span className="text-[#9D9D9D] text-[2.4rem] font-semibold">

diff --git a/src/components/transportsvg/post.tsx b/src/components/transportsvg/post.tsx
@@ -51,7 +51,7 @@ export const PostCarSVG = ({ fillColor }: any) => (
 )
 
 export const PostTrainSVG = ({ fillColor }: any) => (
-    <svg width="33" height="32" viewBox="0 0 33 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <svg width="40" height="41" viewBox="0 0 33 32" fill="none" xmlns="http://www.w3.org/2000/svg">
         <g id="high-speed-train-front">
             <path id="Union" fill-rule="evenodd" clip-rule="evenodd" d="M5.72851 2.74496C8.36931 0.821593 11.9207 0.0175781 15.6851 0.0175781C19.4495 0.0175781 23.0009 0.821593 25.6416 2.74496C28.3363 4.70755 29.9573 7.74679 29.9573 11.8925C29.9573 15.5351 28.7107 19.4743 26.6592 22.7248C24.326 18.6183 20.1959 16.8498 15.6909 16.8498C11.1822 16.8498 7.04915 18.6212 4.71708 22.7344C2.6621 19.4821 1.41302 15.5387 1.41302 11.8925C1.41302 7.74679 3.03385 4.70755 5.72851 2.74496ZM6.64153 25.3025C9.03219 27.9909 12.1596 29.8999 15.6851 29.8999C19.2145 29.8999 22.3449 27.9868 24.7367 25.2935C23.1376 21.4121 19.8018 19.707 15.6909 19.707C11.5771 19.707 8.23913 21.4145 6.64153 25.3025ZM7.47189 9.70586C7.47189 8.10128 8.77264 6.80053 10.3772 6.80053H21.0016C22.6062 6.80053 23.907 8.10128 23.907 9.70586C23.907 11.3104 22.6062 12.6112 21.0016 12.6112H10.3772C8.77264 12.6112 7.47189 11.3104 7.47189 9.70586ZM5.72064 26.851C6.35182 27.5568 6.29141 28.6405 5.58572 29.2718L3.02316 31.5637C2.31748 32.1948 1.23373 32.1344 0.602557 31.4288C-0.0286211 30.723 0.0317816 29.6394 0.737469 29.0083L3.30002 26.7162C4.00572 26.0851 5.08947 26.1454 5.72064 26.851ZM26.4736 26.851C25.8425 27.5568 25.9029 28.6405 26.6087 29.2718L29.1712 31.5637C29.8768 32.1948 30.9607 32.1344 31.5918 31.4288C32.2229 30.723 32.1625 29.6394 31.4569 29.0083L28.8944 26.7162C28.1886 26.0851 27.1049 26.1454 26.4736 26.851Z" fill={fillColor} />
         </g>