[3주차 기본/심화/공유 과제] 숫자야구/깃허브 : 06/06 구현 추가수정

week3/week3-HW/src/components/baseball/BaseballMain.jsx

@@ -40,6 +40,7 @@ const BaseballMain = () => {
   });
   const [strikeBallMessage, setStrikeBallMessage] = useState("");
   const [restartGame, setRestartGame] = useState(false);
+  const [attempts, setAttempts] = useState(0); // 심화 조건!! : 시도 횟수 확인하는경
 
   const generateRandomNumber = () => {
     const randomNumbers = [];
@@ -54,6 +55,7 @@ const BaseballMain = () => {
     if (restartGame) {
       setGameResult([]);
       setStrikeBallMessage("");
+      setAttempts(0);
     }
     const generatedNumber = generateRandomNumber();
     setRandomNumber(generatedNumber);
@@ -100,6 +102,7 @@ const BaseballMain = () => {
 
         const resultMessage = `${strike}S ${ball}B`;
         setGameResult((prevResults) => [...prevResults, resultMessage]);
+        setAttempts((prevAttempts) => prevAttempts + 1);
 
         if (strike === 3) {
           setGameResult((prevResults) => [...prevResults, "정답입니다!"]);
@@ -111,6 +114,14 @@ const BaseballMain = () => {
           setStrikeBallMessage(`${strike} 스트라이크 ${ball} 볼`);
         }
 
+        // 시도 횟수가 10번 이상인 경우임!
+        if (attempts >= 9) {
+          setStrikeBallMessage("게임 패배! 5초 후 게임을 초기화합니다.");
+          setTimeout(() => {
+            setRestartGame(true);
+          }, 5000);
+        }
+
         setNumInput("");
       } else {
         setStrikeBallMessage("3자리 숫자를 정확히 입력해주세요.");

week3/week3-HW/src/components/github/GithubMain.jsx

@@ -59,6 +59,23 @@ const gitBoxCloseStyle = css`
   line-height: 1px;
   cursor: pointer;
 `;
+const spinnerStyle = css`
+  border: 4px solid #f3f3f3;
+  border-top: 4px solid #3498db;
+  border-radius: 50%;
+  width: 50px;
+  height: 50px;
+  animation: spin 2s linear infinite;
+
+  @keyframes spin {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+`;
 
 const GithubMain = () => {
   const [userInfo, setUserInfo] = useState({ status: "idle", data: null });
@@ -138,6 +155,11 @@ const GithubMain = () => {
           onDeleteClick={handleDeleteSearch}
         />
       )}
+      {/* 심화조건 추가했슴다! : 상태 분기 */}
+      {userInfo.status === "pending" && <div css={spinnerStyle}></div>}
+      {userInfo.status === "rejected" && !userInfo.data && (
+        <p>해당 아이디를 찾을 수 없습니다!</p>
+      )}
 
       {userInfo.status === "resolved" && showGitBox && (
         <div css={gitBoxStyle}>