From 008a8a35a13e276634a26acfce81fa26c89a9923 Mon Sep 17 00:00:00 2001
From: gaaahee <lgh4155@naver.com>
Date: Sat, 18 Jan 2025 17:25:21 +0900
Subject: [PATCH] =?UTF-8?q?style:=20Prettier=EB=A5=BC=20=EC=82=AC=EC=9A=A9?=
 =?UTF-8?q?=ED=95=B4=20=EC=BD=94=EB=93=9C=20=ED=8F=AC=EB=A7=B7=ED=8C=85=20?=
 =?UTF-8?q?=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/dropdown/dropdown.module.scss  |  8 +-
 src/components/postcard/PostCard.module.scss  |  2 +-
 .../tab-navigation/tabNavigation.module.scss  |  6 +-
 .../MyPagePosts/myPagePosts.module.scss       |  2 +-
 .../PostsIdeaMarket/PostsIdeaMarket.tsx       | 62 ++++++++++++++
 .../postsIdeaMarket.module.scss               | 85 +++++++++++++++++++
 6 files changed, 157 insertions(+), 8 deletions(-)
 create mode 100644 src/pages/mypage/PostsIdeaMarket/PostsIdeaMarket.tsx
 create mode 100644 src/pages/mypage/PostsIdeaMarket/postsIdeaMarket.module.scss

diff --git a/src/components/dropdown/dropdown.module.scss b/src/components/dropdown/dropdown.module.scss
index c936ad5..31d3fe3 100644
--- a/src/components/dropdown/dropdown.module.scss
+++ b/src/components/dropdown/dropdown.module.scss
@@ -24,9 +24,9 @@
   justify-content: space-between;
   align-items: center;
   border-radius: 5px;
-  height : 40px;
+  height: 40px;
   border-radius: 5px;
-  height : 40px;
+  height: 40px;
 }
 
 .arrow {
@@ -35,7 +35,7 @@
   width: 25px;
   height: 25px;
   @include flex-center;
-  color : #616161;
+  color: #616161;
 }
 
 .selectBox.open .arrow {
@@ -66,4 +66,4 @@
   &:hover {
     background: #f0f0f0;
   }
-}
\ No newline at end of file
+}
diff --git a/src/components/postcard/PostCard.module.scss b/src/components/postcard/PostCard.module.scss
index 8d01dc3..59a6c68 100644
--- a/src/components/postcard/PostCard.module.scss
+++ b/src/components/postcard/PostCard.module.scss
@@ -66,4 +66,4 @@
       color: #34c759;
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/components/tab-navigation/tabNavigation.module.scss b/src/components/tab-navigation/tabNavigation.module.scss
index 6ad4d1f..43cd6fb 100644
--- a/src/components/tab-navigation/tabNavigation.module.scss
+++ b/src/components/tab-navigation/tabNavigation.module.scss
@@ -12,9 +12,11 @@
   font-size: 20px;
   text-align: center;
   color: #999;
-  transition: background-color 0.3s, color 0.3s;
+  transition:
+    background-color 0.3s,
+    color 0.3s;
   border-bottom: 2px solid transparent;
-  
+
   &.activeTab {
     color: #007aff;
     border-bottom: 3px solid #007aff;
diff --git a/src/pages/mypage/MyPagePosts/myPagePosts.module.scss b/src/pages/mypage/MyPagePosts/myPagePosts.module.scss
index 1e7be89..071dab3 100644
--- a/src/pages/mypage/MyPagePosts/myPagePosts.module.scss
+++ b/src/pages/mypage/MyPagePosts/myPagePosts.module.scss
@@ -36,4 +36,4 @@
     justify-items: center;
     gap: 20px;
   }
-}
\ No newline at end of file
+}
diff --git a/src/pages/mypage/PostsIdeaMarket/PostsIdeaMarket.tsx b/src/pages/mypage/PostsIdeaMarket/PostsIdeaMarket.tsx
new file mode 100644
index 0000000..ced2442
--- /dev/null
+++ b/src/pages/mypage/PostsIdeaMarket/PostsIdeaMarket.tsx
@@ -0,0 +1,62 @@
+import './postsIdeaMarket.module.scss';
+
+interface PurchaseRecord {
+  id: string;
+  paymentMethod: string;
+  amount: number;
+}
+
+interface PostIdeaMarketProps {
+  title: string;
+  price: number;
+  purchaseRecords: PurchaseRecord[];
+}
+
+function PostIdeaMarket({
+  title,
+  price,
+  purchaseRecords,
+}: PostIdeaMarketProps) {
+  return (
+    <div className='postcard-details'>
+      <div className='postcard-header'>
+        <div className='image-placeholder'>이미지</div>
+        <div className='postcard-info'>
+          <h1>{title}</h1>
+          <p>{price.toLocaleString()} 원</p>
+        </div>
+      </div>
+
+      <h2>구매 현황</h2>
+      <table className='purchase-table'>
+        <thead>
+          <tr>
+            <th>아이디</th>
+            <th>거래 방식</th>
+            <th>지불 금액</th>
+            <th>액션</th>
+          </tr>
+        </thead>
+        <tbody>
+          {purchaseRecords.map((record) => (
+            <tr key={record.id}>
+              <td>{record.id}</td>
+              <td>{record.paymentMethod}</td>
+              <td>{record.amount.toLocaleString()}</td>
+              <td>
+                <button className='message-button'>메시지 보내기</button>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+
+      <div className='postcard-actions'>
+        <button className='edit-button'>수정하기</button>
+        <button className='delete-button'>삭제</button>
+      </div>
+    </div>
+  );
+}
+
+export default PostIdeaMarket;
diff --git a/src/pages/mypage/PostsIdeaMarket/postsIdeaMarket.module.scss b/src/pages/mypage/PostsIdeaMarket/postsIdeaMarket.module.scss
new file mode 100644
index 0000000..923a8e8
--- /dev/null
+++ b/src/pages/mypage/PostsIdeaMarket/postsIdeaMarket.module.scss
@@ -0,0 +1,85 @@
+.postcard-details {
+  padding: 20px;
+  font-family: Arial, sans-serif;
+
+  .postcard-header {
+    display: flex;
+    align-items: center;
+    margin-bottom: 20px;
+
+    .image-placeholder {
+      width: 100px;
+      height: 100px;
+      background-color: #f0f0f0;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      margin-right: 20px;
+    }
+
+    .postcard-info {
+      h1 {
+        font-size: 1.5rem;
+        margin: 0;
+      }
+
+      p {
+        font-size: 1.2rem;
+        color: #555;
+      }
+    }
+  }
+
+  h2 {
+    font-size: 1.4rem;
+    margin-bottom: 10px;
+  }
+
+  .purchase-table {
+    width: 100%;
+    border-collapse: collapse;
+    margin-bottom: 20px;
+
+    th,
+    td {
+      border: 1px solid #ccc;
+      padding: 10px;
+      text-align: left;
+    }
+
+    th {
+      background-color: #f9f9f9;
+    }
+  }
+
+  .postcard-actions {
+    display: flex;
+    gap: 10px;
+
+    .edit-button,
+    .delete-button {
+      padding: 10px 20px;
+      border: none;
+      cursor: pointer;
+      font-size: 1rem;
+    }
+
+    .edit-button {
+      background-color: #007bff;
+      color: #fff;
+    }
+
+    .delete-button {
+      background-color: #dc3545;
+      color: #fff;
+    }
+  }
+
+  .message-button {
+    padding: 5px 10px;
+    border: none;
+    background-color: #28a745;
+    color: #fff;
+    cursor: pointer;
+  }
+}