[3주차-ts] 이상형 with TS

week3_ts/src/component/MainHeader.tsx

@@ -0,0 +1,42 @@
+import { HandsomeGuy } from "@/assets/images";
+import styled from "styled-components";
+
+interface MainHeaderProps {
+    round: string;
+    matchWinners: React.MutableRefObject<HandsomeGuy[]>;
+    fighterList: HandsomeGuy[];
+}
+
+export default function MainHeader(props: MainHeaderProps) {
+    const { round, matchWinners, fighterList } = props;
+
+    // 현재 몇 라운드인지
+    const countRoundNum = (): number => {
+        return matchWinners.current.length + 1;
+    };
+    // 이번 강에는 총 몇 번의 라운드가 있는지
+    const totalRoundNum = (): number => {
+        return Math.ceil((fighterList.length + matchWinners.current.length * 2) / 2);
+    };
+
+    return (
+        <>
+            <GameTitle>내가 사랑하는 남성 월드컵 {round}</GameTitle>
+            <GameRound>
+                {countRoundNum()}/{totalRoundNum()}
+            </GameRound>
+        </>
+    );
+}
+
+export const GameTitle = styled.header`
+    font-size: 4rem;
+    margin: 2rem 0;
+`;
+
+export const GameRound = styled.div`
+    font-size: 4rem;
+    margin: 1.5rem 0;
+    color: purple;
+    font-weight: bold;
+`;

week3_ts/src/component/Tournament.tsx

@@ -0,0 +1,75 @@
+import { HandsomeGuy } from "@/assets/images";
+import { useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+import styled from "styled-components";
+
+interface TournamentProps {
+    matchWinners: React.MutableRefObject<HandsomeGuy[]>;
+    fighterList: HandsomeGuy[];
+    setFighterList: React.Dispatch<React.SetStateAction<HandsomeGuy[]>>;
+}
+
+export default function Tournament(props: TournamentProps) {
+    const { matchWinners, fighterList, setFighterList } = props;
+
+    // 승자를 골랐을 때
+    const getSelectWinner = (pos: number) => {
+        matchWinners.current.push(fighterList[pos]);
+        setFighterList(fighterList.slice(2));
+    };
+
+    return (
+        <GameSection>
+            {fighterList.map((fighter, index) => {
+                if (index < 2) {
+                    return (
+                        <article onClick={() => getSelectWinner(index)}>
+                            <img src={fighter.url} />
+                            <div>{fighter.name}</div>
+                        </article>
+                    );
+                }
+            })}
+            <p>VS</p>
+        </GameSection>
+    );
+}
+
+export const GameSection = styled.section`
+    display: flex;
+    justify-content: center;
+    height: 80%;
+    article {
+        width: 100%;
+        height: 100%;
+        cursor: pointer;
+        position: relative;
+        display: flex;
+        justify-content: center;
+
+        img {
+            width: 100%;
+        }
+        div {
+            position: absolute;
+            top: 75%;
+            left: 50%;
+            font-size: 5rem;
+            color: white;
+            transform: translate(-50%, -50%);
+            text-shadow: -0.2rem 0 black, 0 0.2rem black, 0.2rem 0 black, 0 -0.2rem black;
+        }
+    }
+    p {
+        position: absolute;
+        top: 57%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+
+        font-size: 10rem;
+        font-weight: bold;
+        color: #ffffff;
+        text-shadow: -0.4rem 0 purple, 0 0.2rem purple, 0.2rem 0 purple, 0 -0.2rem purple;
+        font-style: italic;
+    }
+`;

week3_ts/src/pages/Complete.tsx

@@ -1,12 +1,35 @@
-import MainHeader from "@/component/common/MainHeader";
-import Tournament from "@/component/common/Tournament";
 import styled from "styled-components";
+import { useLocation, useNavigate } from "react-router-dom";
+import { HandsomeGuy } from "@/assets/images";
+
+interface CompleteLocation {
+    checkLists(round: string): void;
+    matchWinners: React.MutableRefObject<HandsomeGuy[]>;
+}
 
 export default function Complete() {
+    const navigation = useNavigate();
+    const location = useLocation();
+    const { checkLists, matchWinners } = location.state as CompleteLocation;
+
+    // 다시 게임을 시작하는 함수
+    const playAgain = () => {
+        matchWinners.current = [];
+        checkLists("16강");
+        navigation("/");
+    };
+
     return (
         <StyledRoot>
-            <MainHeader />
-            <Tournament />
+            <GameTitle>내가 가장 사랑하는 남성은 {matchWinners.current[0].name}</GameTitle>
+            <WinnerSection>
+                <p>👑</p>
+                <article>
+                    <img src={matchWinners.current[0].url} />
+                    <div>{matchWinners.current[0].name}</div>
+                </article>
+            </WinnerSection>
+            <GameResetButton onClick={playAgain}>다시하기</GameResetButton>
         </StyledRoot>
     );
 }
@@ -19,3 +42,55 @@ export const StyledRoot = styled.div`
     height: 100vh;
     position: relative;
 `;
+
+export const GameTitle = styled.header`
+    font-size: 4rem;
+    margin: 2rem 0;
+`;
+
+export const WinnerSection = styled.section`
+    display: flex;
+    justify-content: center;
+    position: relative;
+    p {
+        position: absolute;
+        z-index: 999;
+        font-size: 8rem;
+    }
+    article {
+        width: 35rem;
+        cursor: pointer;
+        position: relative;
+        display: flex;
+        justify-content: center;
+
+        img {
+            width: 100%;
+        }
+        div {
+            position: absolute;
+            top: 75%;
+            left: 50%;
+            font-size: 5rem;
+            color: white;
+            transform: translate(-50%, -50%);
+            text-shadow: -0.2rem 0 black, 0 0.2rem black, 0.2rem 0 black, 0 -0.2rem black;
+        }
+    }
+`;
+
+export const GameResetButton = styled.button`
+    width: 12rem;
+    font-size: 2rem;
+    margin-top: 1.5rem;
+    padding: 1rem;
+    cursor: pointer;
+    color: purple;
+    font-weight: bold;
+    border: 0.2rem solid purple;
+    border-radius: 20rem;
+
+    :hover {
+        background-color: gold;
+    }
+`;

week3_ts/src/pages/Main.tsx

@@ -1,12 +1,44 @@
-import MainHeader from "@/component/common/MainHeader";
-import Tournament from "@/component/common/Tournament";
+import { handsomeGuys, HandsomeGuy } from "@/assets/images";
+import MainHeader from "@/component/MainHeader";
+import Tournament from "@/component/Tournament";
+import { useEffect, useRef, useState } from "react";
+import { useNavigate } from "react-router-dom";
 import styled from "styled-components";
 
 export default function Main() {
+    // 배열 랜덤으로 재정렬
+    const randomGameInfo: HandsomeGuy[] = handsomeGuys.sort(() => Math.random() - 0.5);
+
+    const [round, setRound] = useState<string>("16강");
+    const matchWinners = useRef<HandsomeGuy[]>([]);
+    const [fighterList, setFighterList] = useState<HandsomeGuy[]>(randomGameInfo);
+    const navigation = useNavigate();
+
+    const checkLists = (round: string) => {
+        setRound(round);
+        setFighterList(matchWinners.current);
+        matchWinners.current = [];
+    };
+
+    // 화면이 리렌더링 될 때 마다 참가자들 배열과 승리자들 배열 확인
+    fighterList.length === 0 &&
+        useEffect(() => {
+            if (matchWinners.current.length >= 8) checkLists("8강");
+            else if (matchWinners.current.length >= 4) checkLists("4강");
+            else if (matchWinners.current.length >= 2) checkLists("결승");
+            else if (matchWinners.current.length === 1) {
+                navigation("/complete", { state: {checkLists(), matchWinners} });
+            }
+        });
+
     return (
         <StyledRoot>
-            <MainHeader />
-            <Tournament />
+            <MainHeader round={round} matchWinners={matchWinners} fighterList={fighterList} />
+            <Tournament
+                matchWinners={matchWinners}
+                fighterList={fighterList}
+                setFighterList={setFighterList}
+            />
         </StyledRoot>
     );
 }