Fix/raffle detail #105 (#115)

* Fix: winner:no인 사람이 winner-page 이동 못 하도록 수정

* Feat: 당첨여부 확인 후 래플상세보기로 돌아왔을 때 리렌더링

* Feat: 래플 결과 확인 후 리렌더링 시도 중

src/pages/raffleDetail/RaffleDetailPage.tsx

@@ -7,6 +7,7 @@ import axiosInstance from '../../apis/axiosInstance';
 import { useParams, useLocation } from 'react-router-dom';
 import RaffleDetailProps from '../../types/RaffleDetailProps';
 import { TRaffleDetail } from '../../types/raffleDetails';
+import { useWinnerStatusChanged } from '../../store/storeWinnerStatus';
 
 const RaffleDetailPage: React.FC = () => {
   const { type } = useParams<{ type?: string }>();
@@ -36,6 +37,8 @@ const RaffleDetailPage: React.FC = () => {
   });
   const [isApplying, setIsApplying] = useState<boolean>(false);
   const [followingState, setFollowingState] = useState<boolean>(false);
+  const { isWinnerStatusChanged, toggleWinnerStatus } =
+    useWinnerStatusChanged();
 
   const typeNumber = type ? parseInt(type, 10) : undefined;
 
@@ -55,7 +58,7 @@ const RaffleDetailPage: React.FC = () => {
     };
 
     fetchRaffleData();
-  }, [isApplying, followingState]);
+  }, [isApplying, followingState, isWinnerStatusChanged]);
 
   return (
     <Wrapper>

src/pages/raffleDetail/components/Item.tsx

@@ -81,13 +81,6 @@ const Item: React.FC<ItemProps> = ({ setIsApplying, ...raffle }) => {
         {...drawData}
       />
     ));
-    openModal(({ onClose }) => (
-      <RandomModal
-        onClose={onClose}
-        image={raffle.imageUrls[0]}
-        {...drawData}
-      />
-    ));
   };
 
   const formatDate = (isoString: string) =>

src/pages/raffleDetail/components/modal/RandomModal.tsx

@@ -32,6 +32,7 @@ export default function RandomModal({
   const [items, setItems] = useState<string[]>([]);
   const [winner, setWinner] = useState<string>('');
   const [isRolling, setIsRolling] = useState(false);
+  const [isWin, setIsWin] = useState<boolean>(false);
   const { openModal } = useModalContext();
 
   const handleAddName = () => {
@@ -49,7 +50,6 @@ export default function RandomModal({
     setWinner(winnerNickname);
   }, [deliveryId]);
 
-  console.log('참여자 목록', items);
 
   const handleClick = () => {
     if (!isRolling && winner && sliderRef.current) {
@@ -72,6 +72,8 @@ export default function RandomModal({
             deliveryId={deliveryId}
             winnerNickname={winnerNickname}
             image={image}
+            win={win}
+            raffleId={raffleId}
           />
         ));
       }, 1500);

src/pages/raffleDetail/components/modal/RandomOkModal.tsx

@@ -7,24 +7,31 @@ import yellow from '../../../../assets/yellowVector.svg';
 import { useNavigate } from 'react-router-dom';
 import axiosInstance from '../../../../apis/axiosInstance';
 import { useParams, useLocation } from 'react-router-dom';
+import { useWinnerStatusChanged } from '../../../../store/storeWinnerStatus';
 
 interface RandomOkModalProps {
   onClose: () => void;
   winnerNickname: string;
   deliveryId: number;
   image: string;
+  win: boolean;
+  raffleId: number;
 }
 
 export default function RandomOkModal({
   onClose,
   winnerNickname,
   deliveryId,
   image,
+  win,
+  raffleId,
 }: PropsWithChildren<RandomOkModalProps>) {
   const { clearModals } = useModalContext();
   const navigate = useNavigate();
   const { type } = useParams<{ type?: string }>();
   const typeNumber = type ? Number(type) : undefined;
+  const { isWinnerStatusChanged, toggleWinnerStatus } =
+    useWinnerStatusChanged();
 
   useEffect(() => {
     document.body.style.overflow = 'hidden';
@@ -41,10 +48,19 @@ export default function RandomOkModal({
       );
     };
     postCheck();
-    onClose(); // 모달 닫기
-    navigate(`/winner-page`, {
-      state: { deliveryId: deliveryId, image: image },
-    }); //state로 devliery_id 전달
+    // onClose(); // 모달 닫기
+
+    if (win) {
+      navigate(`/winner-page`, {
+        state: { deliveryId: deliveryId, image: image },
+      }); //state로 devliery_id 전달
+    } else {
+      console.log('전:', isWinnerStatusChanged);
+      toggleWinnerStatus();
+      console.log('후', isWinnerStatusChanged);
+      console.log('당첨 안됨');
+      navigate(`/raffles/${raffleId}`);
+    }
   };
 
   return ReactDOM.createPortal(

src/pages/winner/winnerPage.tsx

@@ -275,11 +275,13 @@ const WinnerPage: React.FC = () => {
           </BigTitle>
 
           <AddressLayout>
-            {/*<Checkbox fill={'#C908FF'} />*/}
             <AddressContainer>
-              <TitleSpan>{address.addressName}</TitleSpan>
+              <TitleSpan>{address?.addressName ?? '?'}</TitleSpan>
               <DefaultBox>기본 배송지</DefaultBox>
-              <AddressSpan>{address.addressDetail}</AddressSpan>
+              <AddressSpan>
+                {address?.addressDetail ??
+                  '배송지 설정 페이지에서 배송지를 입력하세요'}
+              </AddressSpan>
             </AddressContainer>
           </AddressLayout>
 

src/store/storeWinnerStatus.ts

@@ -0,0 +1,12 @@
+import { create } from 'zustand';
+
+interface WinnerStatusChanged {
+  isWinnerStatusChanged: boolean;
+  toggleWinnerStatus: () => void; // 상태를 토글하는 함수
+}
+
+export const useWinnerStatusChanged = create<WinnerStatusChanged>((set) => ({
+  isWinnerStatusChanged: false,
+  toggleWinnerStatus: () =>
+    set((state) => ({ isWinnerStatusChanged: !state.isWinnerStatusChanged })),
+}));