Fix/raffle details #105 (#124)

* Design: hostResult에서 주소 박스 크기 border-box 처리 * Fix: 래플 결과 렌더링 확인 중 * Fix: 내가 개최한 래플 상세보기에서 마이페이지로 이동
JMarketYard · Feb 20, 2025 · 3fe15d4 · 3fe15d4
1 parent 22ff490
commit 3fe15d4
Show file tree

Hide file tree

Showing 6 changed files with 70 additions and 25 deletions.
diff --git a/src/pages/hostResult/ResultPage.tsx b/src/pages/hostResult/ResultPage.tsx
@@ -14,6 +14,7 @@ import MakeDrawerModal from './modal/MakeDrawerModal';
 import ConsiderModal from './modal/ConsiderModal';
 import WaitModal from './modal/WaitModal';
 import { formatMinutesToHoursAndMinutes } from '../../utils/FormatMinuitesToHourAndMinutes';
+import { formatDate } from '../../utils/formatDate';
 
 interface RaffleResult {
   raffleId: number;
@@ -49,6 +50,9 @@ const ResultPage: React.FC = () => {
   const deliveryId = location.state?.deliveryId;
   const raffleStatus = location.state?.status;
   const raffleId = location.state?.raffleId;
+  const [minTicket, setMinTicket] = useState<number>(0);
+  const [applyTicket, setApplyTicket] = useState<number>(0);
+  const [totalAmount, setTotalAmount] = useState<number>(0);
 
   useEffect(() => {
     console.log('개최자 결과 페이지 useEffect');
@@ -58,10 +62,13 @@ const ResultPage: React.FC = () => {
         const { data } = await axiosInstance.get(
           `/api/member/raffles/${raffleId}/result`,
         );
-        console.log('래플 결과:', data);
+        console.log('fetchResult 결과:', data);
         setRaffle(data.result);
+        setMinTicket(raffle.minTicket);
+        setApplyTicket(raffle.applyTicket);
+        setTotalAmount(raffle.totalAmount);
       } catch (error) {
-        console.error(error);
+        console.log('fetchResult, 래플 결과 안옴', error);
       }
     };
     fetchResult();
@@ -71,11 +78,15 @@ const ResultPage: React.FC = () => {
         const { data } = await axiosInstance.get(
           `/api/member/delivery/${deliveryId}/owner`,
         );
-        console.log('API Response:', data);
+        console.log('fetchDelivery 결과:', data);
+
         setDelivery(data.result);
         setDeliveryStatus(data.result.deliveryStatus);
+        setMinTicket(delivery.minTicket);
+        setApplyTicket(delivery.applyTicket);
+        setTotalAmount(delivery.finalAmount);
       } catch (error) {
-        console.error(error);
+        console.log('fetchDelivery, 아직 배송지 안 줬음', error);
       }
     };
     fetchDelivery();
@@ -121,21 +132,21 @@ const ResultPage: React.FC = () => {
       <ResultLayout>
         <ResultContainer>
           <TextBox>최소 마감 티켓</TextBox>
-          <TextBox>{raffle.minTicket} 개</TextBox>
+          <TextBox>{minTicket} 개</TextBox>
         </ResultContainer>
         <ResultContainer>
           <TextBox>현재 티켓</TextBox>
-          {raffle.applyTicket >= raffle.minTicket && (
-            <PurpleTextBox>{raffle.applyTicket} 개</PurpleTextBox>
+          {applyTicket >= minTicket && (
+            <PurpleTextBox>{applyTicket} 개</PurpleTextBox>
           )}
-          {raffle.applyTicket < raffle.minTicket && (
-            <GrayTextBox>{raffle.applyTicket} 개</GrayTextBox>
+          {applyTicket < minTicket && (
+            <GrayTextBox>{applyTicket} 개</GrayTextBox>
           )}
         </ResultContainer>
         <HorizonBox />
         <ResultContainer>
           <TextBox>배송 후 정산금액</TextBox>
-          <PurpleTextBox>{raffle.totalAmount} 원</PurpleTextBox>
+          <PurpleTextBox>{totalAmount} 원</PurpleTextBox>
         </ResultContainer>
         <ResultContainer>
           {raffleStatus === 'ENDED' && (
@@ -194,7 +205,8 @@ const ResultPage: React.FC = () => {
               <>
                 <GrayButtonBox>운송장 입력하기</GrayButtonBox>
                 <GrayButtonBox>
-                  나중에 입력하기 (입력기한 : {delivery.shippingDeadline})
+                  나중에 입력하기 (입력기한 :{' '}
+                  {formatDate(delivery?.shippingDeadline)})
                 </GrayButtonBox>
               </>
             )}
@@ -204,7 +216,8 @@ const ResultPage: React.FC = () => {
                   운송장 입력하기
                 </PurpleButtonBox>
                 <PurpleButtonBox>
-                  나중에 입력하기 (입력기한 : {delivery.shippingDeadline})
+                  나중에 입력하기 (입력기한 :{' '}
+                  {formatDate(delivery?.shippingDeadline)})
                 </PurpleButtonBox>
               </>
             )}
@@ -406,14 +419,15 @@ const DeliveryTimeoverBox = styled.div`
 const WhiteAddressBox = styled.div`
   width: 636px;
   height: 59px;
+  box-sizing: border-box;
   border-radius: 10px;
   border: 1px solid #8f8e94;
   margin-top: 45px;
-  padding: 0 22px 0 27.5px;
+  padding: 0 2px 0 27.5px;
 
   display: flex;
   flex-direction: row;
-  justify-content: space-between;
+  justify-content: flex-start;
   align-items: center;
 `;
 
@@ -431,6 +445,7 @@ const VerticalBox = styled.div`
   width: 1px;
   height: 47px;
   background: #8f8e94;
+  margin: 0 27.5px;
 `;
 const AddressBox = styled.div`
   display: flex;

diff --git a/src/pages/raffleDetail/RaffleDetailPage.tsx b/src/pages/raffleDetail/RaffleDetailPage.tsx
@@ -63,7 +63,11 @@ const RaffleDetailPage: React.FC = () => {
 
   return (
     <Wrapper>
-      <Item {...raffleData} setIsApplying={setIsApplying} />
+      <Item
+        {...raffleData}
+        setIsApplying={setIsApplying}
+        setIsChecked={setIsChecked}
+      />
       <MoreInfoLayout>
         <Market
           {...raffleData}

diff --git a/src/pages/raffleDetail/components/Market.tsx b/src/pages/raffleDetail/components/Market.tsx
@@ -64,10 +64,19 @@ const Market: React.FC<MarketProps> = ({
       <BigTitleBox>
         <TitleIcon />
         <div>상점 정보</div>
-        <MoreListBox onClick={() => navigate(`/user/${raffle.storeId}`)}>
-          프로필 보기
-          <img src={moreList} alt="moreList" />
-        </MoreListBox>
+        {raffle.userStatus === 'host' && (
+          <MoreListBox onClick={() => navigate(`/mypage`)}>
+            프로필 보기
+            <img src={moreList} alt="moreList" />
+          </MoreListBox>
+        )}
+        {(raffle.userStatus === 'participant' ||
+          raffle.userStatus === 'nonParticipant') && (
+          <MoreListBox onClick={() => navigate(`/user/${raffle.storeId}`)}>
+            프로필 보기
+            <img src={moreList} alt="moreList" />
+          </MoreListBox>
+        )}
       </BigTitleBox>
       <MarketLayout>
         <ImageBox imageUrl={raffle.storeImageUrl} />

diff --git a/src/pages/winner/modals/GiveUpModal.tsx b/src/pages/winner/modals/GiveUpModal.tsx
@@ -9,9 +9,14 @@ import useDeliveryStore from '../store/deliveryStore';
 interface ModalProps {
   onClose: () => void;
   deliveryId: number;
+  raffleId: number;
 }
 
-const GiveUpModal: React.FC<ModalProps> = ({ onClose, deliveryId }) => {
+const GiveUpModal: React.FC<ModalProps> = ({
+  onClose,
+  deliveryId,
+  raffleId,
+}) => {
   const navigate = useNavigate();
   const { triggerRefetch } = useDeliveryStore();
 
@@ -21,12 +26,11 @@ const GiveUpModal: React.FC<ModalProps> = ({ onClose, deliveryId }) => {
         `/api/member/delivery/${deliveryId}/winner/cancel`,
         {},
       );
-      triggerRefetch();
+      console.log('당첨포기!!');
+      navigate(`/raffles/${raffleId}`);
     } catch (error) {
       console.error(error);
     }
-    onClose();
-    navigate(`/`);
   };
 
   return (

diff --git a/src/pages/winner/winnerPage.tsx b/src/pages/winner/winnerPage.tsx
@@ -66,7 +66,7 @@ const WinnerPage: React.FC = () => {
   });
   const [winnerData, setWinnerData] = useState<TWinner>();
   const [deliveryStatus, setDeliveryStatus] = useState<TDeliveryStatus>();
-
+  const [raffleId, setRaffleId] = useState<number>(0);
   const queryParams = new URLSearchParams(location.search);
   const approvedAt = queryParams.get('approvedAt');
 
@@ -182,6 +182,7 @@ const WinnerPage: React.FC = () => {
         setWinnerData(data.result);
         setDeliveryStatus(data.result.deliveryStatus);
         setAddress(data.result.address);
+        setRaffleId(data.result.raffleId);
         console.log(data.result);
         console.log(data.result.address);
       } catch (error) {
@@ -193,7 +194,11 @@ const WinnerPage: React.FC = () => {
 
   const handleGiveUpModal = () => {
     openModal(({ onClose }) => (
-      <GiveUpModal onClose={onClose} deliveryId={deliveryId} />
+      <GiveUpModal
+        onClose={onClose}
+        deliveryId={deliveryId}
+        raffleId={raffleId}
+      />
     ));
   };
 

diff --git a/src/utils/formatDate.ts b/src/utils/formatDate.ts
@@ -0,0 +1,8 @@
+export const formatDate = (isoString: string | null | undefined): string => {
+  if (!isoString) return '';
+  const date = new Date(isoString);
+  const month = date.getMonth() + 1; // getMonth()는 0부터 시작하므로 +1
+  const day = date.getDate();
+
+  return `${month}/${day}`;
+};