Merge pull request #102 from farmtedPlaydata/FEAT-#111]-Feign통신

[FEAT #87 ] Feign 전달 객체 정형성 교정 + 추가 입찰 반영

auction-service/src/main/java/com/farmted/auctionservice/dto/ResponseBiddingDto/BiddingResponseDto.java

@@ -18,6 +18,7 @@ public class BiddingResponseDto {
     private int stock;
     private String source;
     private String image;
+    private String boardUuid;
 
     public BiddingResponseDto(Bidding bidding, ProductVo productVo){
         biddingPrice = bidding.getBiddingPrice();
@@ -27,5 +28,6 @@ public BiddingResponseDto(Bidding bidding, ProductVo productVo){
         stock = productVo.stock();
         source=productVo.source();
         image = productVo.image();
+        boardUuid = bidding.getBoardUuid();
     }
 }

auction-service/src/main/java/com/farmted/auctionservice/vo/ProductVo.java

@@ -1,8 +1,10 @@
 package com.farmted.auctionservice.vo;
 
+import com.fasterxml.jackson.annotation.JsonProperty;
+
 public record ProductVo(
-    String name,
-    int stock,
-    String source,
-    String image
+    @JsonProperty("name") String name,
+    @JsonProperty("stock") int stock,
+    @JsonProperty("source") String source,
+    @JsonProperty("image") String image
 ){}

front-service/src/App.tsx

@@ -19,8 +19,7 @@ const App = () => (
     <Router>
         <Sidebar />
         <GlobalStyle/>
-        <BiddingList/>
-        {/* <Main/> */}
+        <Main/>
     </Router>
 );
 

front-service/src/components/bidding/biddingList/BiddingList.tsx

@@ -1,5 +1,9 @@
+// BiddingList.tsx
+
 import React, { useEffect, useState } from 'react';
-import { useParams } from 'react-router-dom';
+import styled from 'styled-components';
+import BiddingModalComponent from './BiddingModalComponent';
+
 
 interface BiddingResponseDto {
   biddingPrice: number;
@@ -9,31 +13,61 @@ interface BiddingResponseDto {
   stock: number;
   source: string;
   image: string;
+  boardUuid: string; // boardUuid를 추가
 }
 
+const AuctionDetailContainer = styled.div`
+  margin-top: 16px;
+`;
+
+const AuctionDetailTable = styled.table`
+  width: 100%;
+  margin-bottom: 16px;
+  border-collapse: collapse;
+`;
+
+const AuctionDetailRow = styled.tr`
+  display: flex;
+  justify-content: space-between;
+  border-bottom: 1px solid #d6d6d6;
+  cursor: pointer;
+`;
+
+const AuctionDetailTitle = styled.th`
+  font-size: 18px;
+  margin-bottom: 8px;
+  text-align: left;
+  padding: 10px;
+`;
+
+const AuctionDetailContent = styled.td`
+  font-size: 16px;
+  margin-bottom: 8px;
+  text-align: right;
+  padding: 10px;
+`;
+
 const BiddingList = () => {
   const [biddingList, setBiddingList] = useState<BiddingResponseDto[]>([]);
-  // const { memberUuid } = useParams<{ memberUuid: string }>();
+  const [selectedBiddingItem, setSelectedBiddingItem] = useState<BiddingResponseDto | null>(null);
+  const [isModalOpen, setIsModalOpen] = useState(false);
   const memberUuid = '6036e646-97d3-4e53-aee4-f88e00b57a4b';
 
   useEffect(() => {
-    let isMounted = true; // Flag to check if the component is mounted
-
-
+    let isMounted = true;
 
     const fetchBiddingList = async () => {
-
       try {
         const response = await fetch(`/api/auction-service/bidding-service/${memberUuid}/bidding`);
-    
+
         if (!response.ok) {
           const errorText = await response.text();
           console.error('입찰 목록을 가져오는 데 실패했습니다:', errorText);
           throw new Error('입찰 목록을 가져오는 데 실패했습니다');
         }
-    
+
         const data = await response.json();
-    
+
         if (isMounted) {
           console.log('Data:', data);
           setBiddingList(data);
@@ -45,34 +79,64 @@ const BiddingList = () => {
 
     fetchBiddingList();
 
-    // Cleanup function to set isMounted to false when component is unmounted
     return () => {
       isMounted = false;
     };
   }, [memberUuid]);
 
+  const handleRowClick = (biddingItem: BiddingResponseDto) => {
+    setSelectedBiddingItem(biddingItem);
+    setIsModalOpen(true);
+  };
+
   return (
-    <div>
+    <AuctionDetailContainer>
       <h2>입찰 목록입니다</h2>
-      <h3>회원 {memberUuid}의 입찰 목록</h3>
+      <h3>사용자님의 입찰 목록</h3>
       {biddingList.length > 0 ? (
-        <ul>
-          {biddingList.map((biddingItem, index) => (
-            <li key={index}>
-              <p>입찰 가격: {biddingItem.biddingPrice}</p>
-              <p>입찰 시간: {biddingItem.biddingTime}</p>
-              <p>회원 UUID: {biddingItem.memberUuid}</p>
-              <p>이름: {biddingItem.name}</p>
-              <p>재고: {biddingItem.stock}</p>
-              <p>출처: {biddingItem.source}</p>
-              <img src={biddingItem.image} alt={`${biddingItem.name}에 대한 이미지`} />
-            </li>
-          ))}
-        </ul>
+        <>
+          <AuctionDetailTable>
+            <thead>
+              <AuctionDetailRow>
+                <AuctionDetailTitle>입찰 가격</AuctionDetailTitle>
+                <AuctionDetailTitle>입찰 시간</AuctionDetailTitle>
+                <AuctionDetailTitle>이름</AuctionDetailTitle>
+                <AuctionDetailTitle>재고</AuctionDetailTitle>
+                <AuctionDetailTitle>판매처</AuctionDetailTitle>
+                <AuctionDetailTitle>이미지</AuctionDetailTitle>
+              </AuctionDetailRow>
+            </thead>
+            <tbody>
+              {biddingList.map((biddingItem, index) => (
+                <AuctionDetailRow key={index} onClick={() => handleRowClick(biddingItem)}>
+                  <AuctionDetailContent>{biddingItem.biddingPrice}</AuctionDetailContent>
+                  <AuctionDetailContent>{biddingItem.biddingTime}</AuctionDetailContent>
+                  <AuctionDetailContent>{biddingItem.name}</AuctionDetailContent>
+                  <AuctionDetailContent>{biddingItem.stock}</AuctionDetailContent>
+                  <AuctionDetailContent>{biddingItem.source}</AuctionDetailContent>
+                  <AuctionDetailContent>
+                    <img src={biddingItem.image} alt={`${biddingItem.name}에 대한 이미지`} />
+                  </AuctionDetailContent>
+                </AuctionDetailRow>
+              ))}
+            </tbody>
+          </AuctionDetailTable>
+
+          {/* 모달 컴포넌트 */}
+          {isModalOpen && selectedBiddingItem && (
+            <BiddingModalComponent
+              boardUuid={selectedBiddingItem.boardUuid}
+              memberUuid={memberUuid}
+              onClose={() => setIsModalOpen(false)}
+              isOpen={isModalOpen}
+              closeModal={() => setIsModalOpen(false)}
+              modalContent={`${selectedBiddingItem.biddingPrice}`}          />
+          )}
+        </>
       ) : (
         <p>입찰 목록이 없습니다.</p>
       )}
-    </div>
+    </AuctionDetailContainer>
   );
 };
 

front-service/src/components/bidding/biddingList/BiddingModalComponent.tsx

@@ -0,0 +1,85 @@
+// BiddingModal.tsx
+
+import React, { useState } from 'react';
+import styled from 'styled-components';
+
+interface BiddingModalProps {
+  boardUuid: string;
+  memberUuid: string;
+  onClose: () => void;
+  isOpen: boolean;
+  closeModal: () => void;
+  modalContent: string;
+}
+
+const ModalWrapper = styled.div`
+  border: 2px solid #007bff;
+  padding: 20px;
+  background-color: #fff;
+  width: 600px;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+`;
+
+const BiddingModal: React.FC<BiddingModalProps> = ({ boardUuid, memberUuid, onClose, isOpen, closeModal, modalContent }) => {
+  const [newBiddingPrice, setNewBiddingPrice] = useState<number>();
+  const [memberPrice, setMemberPrice] = useState<number>(10000);
+  const [biddingAutoPrice, setBiddingAutoPrice] = useState<number | null>(null);
+  const [warningMessage, setWarningMessage] = useState<string | null>(null);
+
+  const handleBiddingSubmit = async () => {
+    if (newBiddingPrice && newBiddingPrice > memberPrice) {
+      setWarningMessage('입찰 가격이 회원 가격보다 큽니다. 다시 입력해주세요.');
+      return;
+    }
+
+    try {
+      const response = await fetch(`/api/auction-service/bidding-service/bid/${boardUuid}`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'UUID': memberUuid,
+        },
+        body: JSON.stringify({
+          biddingPrice: newBiddingPrice,
+          memberPrice,
+          biddingAutoPrice,
+        }),
+      });
+
+      if (response.ok) {
+        // 성공적으로 입찰이 이루어졌을 때 모달을 닫습니다.
+        onClose();
+      } else {
+        // 에러 처리 로직을 추가하세요.
+        console.error('입찰 실패:', response);
+      }
+    } catch (error) {
+      // 네트워크 오류 또는 기타 예외 처리 로직을 추가하세요.
+      console.error('네트워크 오류');
+    }
+  };
+
+  return (
+    <ModalWrapper>
+      {/* 모달 내용 및 폼 */}
+      <label htmlFor="biddingPrice">추가 입찰 희망 가격:</label>
+      <input type="number" id="biddingPrice" value={newBiddingPrice} onChange={(e) => setNewBiddingPrice(+e.target.value)} />
+
+      {/* 다른 입력 필드 및 버튼들은 이곳에 추가하세요. */}
+
+      {warningMessage && <div style={{ color: 'red' }}>{warningMessage}</div>}
+
+      <button onClick={handleBiddingSubmit}>입찰 신청</button>
+      <button onClick={onClose}>취소</button>
+
+      {/* modalContent 표시 */}
+      <div>이전 낙찰 내역:{modalContent}</div>
+      <div>현재 잔고: {memberPrice}</div>
+    </ModalWrapper>
+  );
+};
+
+export default BiddingModal;

front-service/src/components/board/boardRoute/BoardRouteController.tsx

@@ -5,15 +5,17 @@ import BoardBody from "../BoardBody"
 import CreateBoard from "../createBoard/CreateBoard"
 import BoardDetail from "../boardDetail/BoardDetail"
 import Authentication from "../../user/authentication";
+import BiddingList from "../../bidding/biddingList/BiddingList"
 import Sidebar from "../../sidebar/sidebar";
 
 const BoardRouteController = () => {
     return(
 
         <>
             <Routes>
-                <Route path="/" element={<BoardBody/>} >
-                    <Route path="/boards" element={<BoardMain/>} />
+                <Route path="/" element={<BoardBody/>}>
+                    <Route path='/boards' element={<BoardMain />} />
+                    <Route path='/bidding' element={<BiddingList/>}/>
                     <Route path='/' element={<Authentication />} />
                     <Route path="/boards/write" element={<CreateBoard/>}/>
                     <Route path="/boards/:boardUUID" element={<BoardDetail />}/>

front-service/src/components/user/authentication/index.tsx

@@ -81,7 +81,7 @@ export default function Authentication() {
                 body: JSON.stringify(requestBody),
                 }
             ).then(
-                ()=>{ navigator("/boards");}
+                ()=>{ navigator("/bidding");}
             );
         };
 

product-service/src/main/java/com/farmted/productservice/controller/ProductController.java

@@ -124,7 +124,7 @@ public ResponseEntity<?> closedAuctionFromProduct(@PathVariable String productUu
     @Operation(summary = "상품 세부 내역 조회")
     public ResponseEntity<?> getProductDetail(@PathVariable (value = "board_uuid") String boardUuid){
         ProductResponseDto productDetail = productService.getProductDetail(boardUuid);
-        return ResponseEntity.ok(GlobalResponseDto.of(productDetail));
+        return ResponseEntity.ok(productDetail);
 
     }
 }

product-service/src/main/java/com/farmted/productservice/vo/ResponseAuctionGetVo.java

@@ -1,11 +1,13 @@
 package com.farmted.productservice.vo;
 
+import com.fasterxml.jackson.annotation.JsonProperty;
+
 import java.time.LocalDateTime;
 
 
 public record ResponseAuctionGetVo (
-        Integer auctionPrice, // 경매 가격 == 낙찰 가격
-        LocalDateTime auctionDeadline, // 경매 종료
-        String productUuid,
-        String auctionBuyer,  // 낙찰자
-        boolean auctionStatus){ }
+        @JsonProperty("auctionPrice") Integer auctionPrice, // 경매 가격 == 낙찰 가격
+        @JsonProperty("auctionDeadline") LocalDateTime auctionDeadline, // 경매 종료
+        @JsonProperty("productUuid") String productUuid,
+        @JsonProperty("auctionBuyer") String auctionBuyer,  // 낙찰자
+        @JsonProperty("auctionStatus") boolean auctionStatus){ }