Fix/raffle details #105 (#132)

* Fix: resultPage, winnerPage에서 필요한 화면 생성 및 버튼 (비)활성화
JMarketYard · Feb 20, 2025 · e24f540 · e24f540
1 parent 1cb2f22
commit e24f540
Show file tree

Hide file tree

Showing 4 changed files with 102 additions and 35 deletions.
diff --git a/src/pages/hostResult/ResultPage.tsx b/src/pages/hostResult/ResultPage.tsx
@@ -53,7 +53,7 @@ const ResultPage: React.FC = () => {
   const [minTicket, setMinTicket] = useState<number>(0);
   const [applyTicket, setApplyTicket] = useState<number>(0);
   const [totalAmount, setTotalAmount] = useState<number>(0);
-
+  const [isChecked, setIsChecked] = useState<boolean>(false);
   useEffect(() => {
     console.log('개최자 결과 페이지 useEffect');
 
@@ -64,9 +64,9 @@ const ResultPage: React.FC = () => {
         );
         console.log('fetchResult 결과:', data);
         setRaffle(data.result);
-        setMinTicket(raffle.minTicket);
-        setApplyTicket(raffle.applyTicket);
-        setTotalAmount(raffle.totalAmount);
+        setMinTicket(data.result.minTicket);
+        setApplyTicket(data.result.applyTicket);
+        setTotalAmount(data.result.totalAmount);
       } catch (error) {
         console.log('fetchResult, 래플 결과 안옴', error);
       }
@@ -82,15 +82,15 @@ const ResultPage: React.FC = () => {
 
         setDelivery(data.result);
         setDeliveryStatus(data.result.deliveryStatus);
-        setMinTicket(delivery.minTicket);
-        setApplyTicket(delivery.applyTicket);
-        setTotalAmount(delivery.finalAmount);
+        setMinTicket(data.result.minTicket);
+        setApplyTicket(data.result.applyTicket);
+        setTotalAmount(data.result.finalAmount);
       } catch (error) {
         console.log('fetchDelivery, 아직 배송지 안 줬음', error);
       }
     };
     fetchDelivery();
-  }, [deliveryId, deliveryStatus]);
+  }, [deliveryId, deliveryStatus, isChecked]);
 
   //모달
   const { openModal } = useModalContext();
@@ -112,7 +112,11 @@ const ResultPage: React.FC = () => {
   };
   const handleMake = () => {
     openModal(({ onClose }) => (
-      <MakeDrawerModal onClose={onClose} raffleId={raffle?.raffleId ?? 0} />
+      <MakeDrawerModal
+        onClose={onClose}
+        raffleId={raffle?.raffleId ?? 0}
+        setIsChecked={setIsChecked}
+      />
     ));
   };
   const handleWait = () => {
@@ -125,7 +129,7 @@ const ResultPage: React.FC = () => {
       <ConsiderModal onClose={onClose} deliveryId={deliveryId} />
     ));
   };
-
+  const navigate = useNavigate();
   return (
     <Wrapper>
       <BigTitle>래플 결과</BigTitle>
@@ -158,7 +162,7 @@ const ResultPage: React.FC = () => {
                   <DeliveryWaitBox>배송지 입력 대기</DeliveryWaitBox>
                 </>
               )}
-              {deliveryStatus === 'READY' && (
+              {(deliveryStatus === 'READY' || deliveryStatus === 'SHIPPED') && (
                 <>
                   <DeliveryDoneBox>배송 가능</DeliveryDoneBox>
                 </>
@@ -215,12 +219,24 @@ const ResultPage: React.FC = () => {
                 <PurpleButtonBox onClick={handleDelver}>
                   운송장 입력하기
                 </PurpleButtonBox>
-                <PurpleButtonBox>
+                <PurpleButtonBox
+                  onClick={() => navigate(`/raffles/${raffleId}`)}
+                >
                   나중에 입력하기 (입력기한 :{' '}
                   {formatDate(delivery?.shippingDeadline)})
                 </PurpleButtonBox>
               </>
             )}
+            {deliveryStatus === 'SHIPPED' && (
+              <>
+                <GrayButtonBox>운송장 입력완료</GrayButtonBox>
+                <PurpleButtonBox
+                  onClick={() => navigate(`/raffles/${raffleId}`)}
+                >
+                  래플 보러가기
+                </PurpleButtonBox>
+              </>
+            )}
             {deliveryStatus === 'ADDRESS_EXPIRED' && (
               <>
                 <PurpleButtonBox onClick={handleEnd}>

diff --git a/src/pages/hostResult/modal/DeliverModal.tsx b/src/pages/hostResult/modal/DeliverModal.tsx
@@ -43,7 +43,7 @@ const DeliverModal: React.FC<ModalProps> = ({ onClose, deliveryId }) => {
           해당 운송장은 당첨자가 이메일과
           <br /> 알림페이지로 확인할 수 있습니다.
         </Short>
-        <Button onClick={handleClick}>홈 화면으로 돌아가기</Button>
+        <Button onClick={handleClick}>운송장 입력하기</Button>
       </Container>
     </Modal>
   );

diff --git a/src/pages/hostResult/modal/MakeDrawerModal.tsx b/src/pages/hostResult/modal/MakeDrawerModal.tsx
@@ -8,18 +8,26 @@ import axiosInstance from '../../../apis/axiosInstance';
 interface ModalProps {
   onClose: () => void;
   raffleId: number;
+  setIsChecked: React.Dispatch<React.SetStateAction<boolean>>;
 }
 //미추첨 당첨자 뽑기
-const MakeDrawerModal: React.FC<ModalProps> = ({ onClose, raffleId }) => {
+const MakeDrawerModal: React.FC<ModalProps> = ({
+  onClose,
+  raffleId,
+  setIsChecked,
+}) => {
   const navigate = useNavigate();
-  const handleClick = async () => {
+  const handleClick = () => {
     try {
-      const { data } = await axiosInstance.post(
-        `/api/member/raffles/${raffleId}/draw`,
-      );
-      console.log(data);
+      const postCheck = async () => {
+        const { data } = await axiosInstance.post(
+          `/api/member/raffles/${raffleId}/draw`,
+        );
+      };
+      postCheck();
       onClose();
-      navigate('');
+      setIsChecked((prev: boolean) => !prev);
+      navigate(`/host-result`);
     } catch (error) {
       console.error('POST 요청 실패', error);
     }

diff --git a/src/pages/winner/winnerPage.tsx b/src/pages/winner/winnerPage.tsx
@@ -55,6 +55,7 @@ const WinnerPage: React.FC = () => {
     setChecked(event.target.checked);
   };
   const { shouldRefetch, triggerRefetch } = useDeliveryStore();
+  const [isChecked, setIsChecked] = useState<boolean>(false);
 
   const [address, setAddress] = useState<TAddress>({
     addressId: 0,
@@ -417,21 +418,42 @@ const WinnerPage: React.FC = () => {
           </InfoLayout>
 
           <ButtonLayout>
-            <PurpleButton onClick={handleCompletedModal}>
-              거래 완료
-            </PurpleButton>
-            <PurpleButton
-              onClick={() =>
-                navigate('/review', {
-                  state: { deliveryId: { deliveryId } },
-                })
-              }
-            >
-              후기 작성하기
-            </PurpleButton>
-            <PurpleButton onClick={() => navigate('/')}>
-              홈 화면으로 돌아가기
-            </PurpleButton>
+            {deliveryStatus === 'SHIPPED' && (
+              <>
+                <PurpleButton onClick={handleCompletedModal}>
+                  거래 완료
+                </PurpleButton>
+                <PurpleButton
+                  onClick={() =>
+                    navigate('/review', {
+                      state: { deliveryId: { deliveryId } },
+                    })
+                  }
+                >
+                  후기 작성하기
+                </PurpleButton>
+                <PurpleButton onClick={() => navigate('/')}>
+                  홈 화면으로 돌아가기
+                </PurpleButton>
+              </>
+            )}
+            {deliveryStatus === 'READY' && (
+              <>
+                <GrayButton>거래 완료</GrayButton>
+                <GrayButton
+                  onClick={() =>
+                    navigate('/review', {
+                      state: { deliveryId: { deliveryId } },
+                    })
+                  }
+                >
+                  후기 작성하기
+                </GrayButton>
+                <PurpleButton onClick={() => navigate('/')}>
+                  홈 화면으로 돌아가기
+                </PurpleButton>
+              </>
+            )}
           </ButtonLayout>
         </Wrapper>
       );
@@ -648,6 +670,27 @@ const PurpleButton = styled.button`
   cursor: pointer;
 `;
 
+const GrayButton = styled.div`
+  width: 474px;
+  min-height: 46px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  border-radius: 7px;
+  border: 1px solid #8f8e94;
+  background: #e4e4e4;
+
+  color: #8f8e94;
+  text-align: center;
+  font-family: Pretendard;
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 18px; /* 100% */
+  letter-spacing: -0.165px;
+`;
+
 const Box = styled.img`
   width: 209px;
   height: 209px;