wafflestudio · Quad72 · Feb 2, 2025 · Feb 2, 2025
diff --git a/README.md b/README.md
@@ -14,7 +14,9 @@
 
 ### 1. 랜딩, 회원가입, 로그인 페이지
 
-뭐시기 뭐시기
+|                                                                                                           |                                                                                                            |                                                                                                           |
+| --------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------- |
+| <img src="https://github.com/user-attachments/assets/a4041540-c6d3-4ceb-bb02-0819edad4216" width="300px"> | <img src="hhttps://github.com/user-attachments/assets/71dff873-4b8c-491c-9218-63712e67a46a" width="300px"> | <img src="https://github.com/user-attachments/assets/0c81186f-5489-4a3c-ae63-91d41fcdf4b7" width="300px"> |
 
 ### 2. 홈 페이지
 

diff --git a/src/App.tsx b/src/App.tsx
@@ -27,6 +27,7 @@ import LoginPage from './pages/LoginPage';
 import MainPage from './pages/MainPage';
 import MannerPraisePage from './pages/MannerPraisePage';
 import MannersPage from './pages/MannersPage';
+import MyAuctionsPage from './pages/MyAuctionsPage';
 import MyBuysPage from './pages/MyBuysPage';
 import MyCommunityPosts from './pages/MyCommunityPosts';
 import MyLikesPage from './pages/MyLikesPage';
@@ -104,6 +105,7 @@ export const App = () => {
           <Route path="/mypage/likes" element={<MyLikesPage />} />
           <Route path="/mypage/sells" element={<MySellsPage />} />
           <Route path="/mypage/buys" element={<MyBuysPage />} />
+          <Route path="/mypage/auctions" element={<MyAuctionsPage />} />
           <Route path="/mypage/posts" element={<MyCommunityPosts />} />
           <Route path="/profile/:nickname" element={<ProfilePage />} />
           <Route path="/profile/:nickname/sells" element={<SellsPage />} />

diff --git a/src/components/ParticipatingAuctionItem.tsx b/src/components/ParticipatingAuctionItem.tsx
@@ -0,0 +1,86 @@
+import { useEffect, useState } from 'react';
+import { NavLink } from 'react-router-dom';
+
+//import peopleIcon from '../assets/people-gray.svg';
+import heartIcon from '../assets/heart_filled_gray.svg';
+import placeHolder from '../assets/placeholder_gray.png';
+import styles from '../css/ParticipatingAuctionItem.module.css';
+import type { PreviewAuctionItem } from '../typings/auctionitem';
+import { calculateTimeLeft } from '../utils/utils';
+
+type ItemProps = {
+  ItemInfo: PreviewAuctionItem;
+};
+
+const ParticipatingAuctionItem = ({ ItemInfo }: ItemProps) => {
+  const [timeLeft, setTimeLeft] = useState('');
+  const [isHighestBidder, setIsHighestBidder] = useState(true);
+
+  useEffect(() => {
+    const interval = calculateTimeLeft(ItemInfo.endTime, setTimeLeft);
+    setIsHighestBidder(true);
+
+    return () => {
+      clearInterval(interval);
+    };
+  }, [ItemInfo.endTime]);
+
+  return (
+    <NavLink to={`/auctions/${ItemInfo.id}`} className={styles.navLink}>
+      <div className={styles.main}>
+        <div className={styles.upperBox}>
+          <img
+            src={
+              ItemInfo.imagePresignedUrl === ''
+                ? placeHolder
+                : ItemInfo.imagePresignedUrl
+            }
+            className={styles.image}
+          />
+          <div className={styles.contentBox}>
+            <div className={styles.textBox}>
+              <p className={styles.itemName}>{ItemInfo.title}</p>
+              <p
+                className={styles.itemInfo}
+              >{`${ItemInfo.location} · ${timeLeft}`}</p>
+              <p className={styles.initPrice}>
+                {`시작가:  ${Intl.NumberFormat('ko-KR').format(ItemInfo.startingPrice)}원`}
+              </p>
+              <p className={styles.presentPrice}>
+                {`현재 입찰가:  ${Intl.NumberFormat('ko-KR').format(ItemInfo.currentPrice)}원`}
+              </p>
+            </div>
+            <div className={styles.subBox}>
+              <div className={styles.iconBox}>
+                {ItemInfo.likeCount > 0 && (
+                  <div className={styles.iconBox}>
+                    <img src={heartIcon} className={styles.smallIcon} />
+                    {ItemInfo.likeCount}
+                  </div>
+                )}
+              </div>
+            </div>
+            <div className={styles.actionContainer}>
+              {timeLeft !== '경매 종료' ? (
+                isHighestBidder ? (
+                  <span className={styles.statusText}>현재 상위 입찰</span>
+                ) : (
+                  <span className={styles.statusText}>더 높은 입찰 존재</span>
+                )
+              ) : isHighestBidder ? (
+                <div className={styles.successContainer}>
+                  <span className={styles.successText}>낙찰 성공!</span>
+                  <button className={styles.chatButton}>채팅하기</button>
+                </div>
+              ) : (
+                <span className={styles.failureText}>낙찰 실패</span>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </NavLink>
+  );
+};
+
+export default ParticipatingAuctionItem;
diff --git a/src/css/AuctionItem.module.css b/src/css/AuctionItem.module.css
@@ -93,3 +93,14 @@
   width: 18px;
   height: 18px;
 }
+
+.chatButton {
+  background: var(--daangn-orange);
+  border: none;
+  border-radius: 6px;
+  color: white;
+  padding: 6px;
+  margin-top: 10px;
+  font-weight: bold;
+  font-size: 14px;
+}
diff --git a/src/css/ParticipatingAuctionItem.module.css b/src/css/ParticipatingAuctionItem.module.css
@@ -0,0 +1,134 @@
+.navLink {
+  display: flex;
+  padding: 15px 15px 0;
+  width: 100vw;
+  text-decoration: none;
+}
+
+.main {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  gap: 15px;
+  padding-bottom: 15px;
+  border-bottom: 1px solid var(--daangn-lightgray);
+  text-decoration: none;
+}
+
+.upperBox {
+  display: flex;
+  flex: 1;
+  gap: 15px;
+}
+
+.image {
+  width: 120px;
+  height: 120px;
+  border-radius: 5px;
+  border: 0.5px solid var(--daangn-lightgray);
+}
+
+.contentBox {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.itemName {
+  font-size: 18px;
+  color: black;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  word-break: break-word;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+
+.itemInfo {
+  color: var(--daangn-gray);
+}
+
+.itemStatus {
+  padding: 5px;
+  font-size: 13px;
+  background-color: #444444;
+  border-radius: 2px;
+  color: white;
+}
+
+.initPrice {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 12px;
+  color: #444444;
+}
+
+.presentPrice {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 18px;
+  font-weight: bold;
+  color: black;
+}
+
+.subBox {
+  display: flex;
+  justify-content: right;
+  gap: 3px;
+}
+
+.iconBox {
+  display: flex;
+  gap: 3px;
+  align-items: center;
+  color: var(--daangn-gray);
+}
+
+.smallIcon {
+  width: 18px;
+  height: 18px;
+}
+
+.chatButton {
+  background: var(--daangn-orange);
+  border: none;
+  border-radius: 6px;
+  color: white;
+  padding: 6px;
+  margin-top: 10px;
+  font-weight: bold;
+  font-size: 14px;
+}
+
+.highestText {
+  font-size: 14px;
+  color: var(--daangn-orange);
+}
+
+.statusText {
+  font-size: 14px;
+  color: var(--daangn-gray);
+}
+
+.successText {
+  font-size: 14px;
+  font-weight: bold;
+  color: var(--daangn-orange);
+}
+
+.failureText {
+  font-size: 14px;
+  font-weight: bold;
+  color: var(--daangn-gray);
+}
+
+.successContainer {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+}
diff --git a/src/pages/AuctionItemPage.tsx b/src/pages/AuctionItemPage.tsx
@@ -37,7 +37,8 @@ const ItemPage = () => {
   const [item, setItem] = useState<AuctionItem>();
   const userId = localStorage.getItem('userId');
   const [isMyItem, setIsMyItem] = useState(false);
-  const [isHighestBid, setIsHighestBid] = useState(false);
+  //const [isHighestBid, setIsHighestBid] = useState(false);
+  const [highestBidder, setHighestBidder] = useState('');
   const [myNickname, setMyNickname] = useState<string>('');
   const [images, setImages] = useState<string[]>([]);
   const [timeLeft, setTimeLeft] = useState('');
@@ -276,7 +277,7 @@ const ItemPage = () => {
       //const socket = new SockJS(`http://${window.location.host}/ws`);
       const socket = new SockJS(`https://toykarrot.shop/ws`);
       const stompClient: Client = Stomp.over(() => socket);
-      const storedNickname = localStorage.getItem('nickname');
+      //const storedNickname = localStorage.getItem('nickname');
       socketRef.current = stompClient;
 
       socketRef.current.onConnect = () => {
@@ -289,11 +290,12 @@ const ItemPage = () => {
           ) as AuctionMessage;
           setPrice(data.price);
 
-          if (data.senderNickname === storedNickname) {
+          /*if (data.senderNickname === storedNickname) {
             setIsHighestBid(true);
           } else {
             setIsHighestBid(false);
-          }
+          }*/
+          setHighestBidder(data.senderNickname);
         });
       };
 
@@ -612,9 +614,9 @@ const ItemPage = () => {
                   <p className={styles.price}>
                     {`${Intl.NumberFormat('ko-KR').format(price)}원`}
                   </p>
-                  {isHighestBid && (
-                    <p className={styles.highestBidText}>현재 최고 입찰!</p>
-                  )}
+                  <p
+                    className={styles.highestBidText}
+                  >{`현재 최고 입찰: ${highestBidder}`}</p>
                 </div>
               </div>
               <button className={styles.chatbutton} onClick={handleSendBid}>