AT-SOPT-WEB · yeonilil · May 1, 2025 · May 2, 2025 · May 2, 2025 · May 2, 2025
diff --git a/week3-homework/week3/.gitignore b/week3-homework/week3/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/week3-homework/week3/README.md b/week3-homework/week3/README.md
@@ -0,0 +1,12 @@
+# React + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.
diff --git a/week3-homework/week3/eslint.config.js b/week3-homework/week3/eslint.config.js
@@ -0,0 +1,33 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+
+export default [
+  { ignores: ['dist'] },
+  {
+    files: ['**/*.{js,jsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+        ecmaFeatures: { jsx: true },
+        sourceType: 'module',
+      },
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...js.configs.recommended.rules,
+      ...reactHooks.configs.recommended.rules,
+      'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+]
diff --git a/week3-homework/week3/index.html b/week3-homework/week3/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
diff --git a/week3-homework/week3/package.json b/week3-homework/week3/package.json
@@ -0,0 +1,28 @@
+{
+  "name": "week3",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.14.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.22.0",
+    "@types/react": "^19.0.10",
+    "@types/react-dom": "^19.0.4",
+    "@vitejs/plugin-react": "^4.3.4",
+    "eslint": "^9.22.0",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.19",
+    "globals": "^16.0.0",
+    "vite": "^6.3.1"
+  }
+}
diff --git a/week3-homework/week3/public/vite.svg b/week3-homework/week3/public/vite.svg
diff --git a/week3-homework/week3/src/App.jsx b/week3-homework/week3/src/App.jsx
@@ -0,0 +1,41 @@
+/** @jsxImportSource @emotion/react */
+import { useState } from "react";
+import { css } from "@emotion/react";
+import Header from "./components/common/Header";
+import GithubSearchContainer from "./components/github/GithubSearchContainer";
+import BaseballContainer from "./components/baseball/BaseballContainer";
+
+const rootWrapper = css`
+  width: 100vw;
+`;
+const contentWrapper = css`
+  max-width: 600px;
+  margin: 40px auto 0;
+  padding: 24px;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  font-family: "Noto Sans KR", sans-serif;
+`;
+
+function App() {
+  const [activeTab, setActiveTab] = useState("github");
+
+  return (
+    <div css={rootWrapper}>
+      <Header activeTab={activeTab} onTabChange={setActiveTab} />
+      <main css={contentWrapper}>
+        {activeTab === "github" ? (
+          <GithubSearchContainer />
+        ) : (
+          <BaseballContainer />
+        )}
+      </main>
+    </div>
+  );
+}
+
+export default App;
diff --git a/week3-homework/week3/src/assets/ic-close.svg b/week3-homework/week3/src/assets/ic-close.svg
diff --git a/week3-homework/week3/src/components/baseball/BaseballContainer.jsx b/week3-homework/week3/src/components/baseball/BaseballContainer.jsx
@@ -0,0 +1,113 @@
+/** @jsxImportSource @emotion/react */
+import React, { useState, useEffect } from "react";
+import { css } from "@emotion/react";
+import Input from "./Input";
+import Message from "./Message";
+import HistoryList from "./HistoryList";
+
+function generateRandomNumber() {
+  const digits = [];
+  while (digits.length < 3) {
+    const num = Math.floor(Math.random() * 10);
+    if (!digits.includes(num)) digits.push(num);
+  }
+  return digits;
+}
+
+// 스타일 정의
+const containerStyle = css`
+  max-width: 480px;
+  margin: 40px auto;
+  padding: 24px;
+  border-radius: 12px;
+`;
+
+const titleStyle = css`
+  text-align: center;
+  font-size: 1.5rem;
+  margin-bottom: 16px;
+`;
+
+const attemptStyle = css`
+  text-align: center;
+  font-size: 1rem;
+  margin-bottom: 20px;
+  color: #495057;
+`;
+
+function BaseballContainer() {
+  const [answer, setAnswer] = useState([]);
+  const [input, setInput] = useState("");
+  const [message, setMessage] = useState("");
+  const [history, setHistory] = useState([]);
+  const [attempt, setAttempt] = useState(0);
+  const [isGameOver, setIsGameOver] = useState(false);
+
+  useEffect(() => {
+    setAnswer(generateRandomNumber());
+  }, []);
+
+  const resetGame = () => {
+    setAnswer(generateRandomNumber());
+    setInput("");
+    setMessage("");
+    setHistory([]);
+    setAttempt(0);
+    setIsGameOver(false);
+  };
+
+  const handleSubmit = () => {
+    if (isGameOver) return;
+
+    if (input.length !== 3 || new Set(input).size !== 3) {
+      setMessage("⚠️ 3자리 중복되지 않는 숫자를 입력하세요.");
+      return;
+    }
+
+    const inputDigits = input.split("").map(Number);
+    let strike = 0;
+    let ball = 0;
+
+    inputDigits.forEach((num, idx) => {
+      if (num === answer[idx]) strike++;
+      else if (answer.includes(num)) ball++;
+    });
+
+    let result = "";
+    if (strike === 3) {
+      result = "🎉 3S - 승리!";
+      setMessage(result);
+      setHistory([{ input, result }, ...history]);
+      setIsGameOver(true);
+      setTimeout(resetGame, 2000);
+      return;
+    }
+
+    if (attempt + 1 >= 10) {
+      result = "❌ 10회 실패 - 게임 패배!";
+      setIsGameOver(true);
+      setTimeout(resetGame, 5000);
+    } else if (strike === 0 && ball === 0) {
+      result = "OUT";
+    } else {
+      result = `${ball}B${strike}S`;
+    }
+
+    setHistory([{ input, result }, ...history]);
+    setMessage(result);
+    setAttempt((prev) => prev + 1);
+    setInput("");
+  };
+
+  return (
+    <div css={containerStyle}>
+      <h2 css={titleStyle}>⚾ 숫자 야구 게임</h2>
+      <p css={attemptStyle}>시도 횟수: {attempt} / 10</p>
+      <Input input={input} setInput={setInput} onSubmit={handleSubmit} />
+      <Message text={message} />
+      <HistoryList history={history} />
+    </div>
+  );
+}
+
+export default BaseballContainer;
diff --git a/week3-homework/week3/src/components/baseball/HistoryList.jsx b/week3-homework/week3/src/components/baseball/HistoryList.jsx
@@ -0,0 +1,15 @@
+import React from "react";
+
+function HistoryList({ history }) {
+  return (
+    <ul>
+      {history.map((item, index) => (
+        <li key={index}>
+          입력: {item.input} → 결과: {item.result}
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+export default HistoryList;
diff --git a/week3-homework/week3/src/components/baseball/Input.jsx b/week3-homework/week3/src/components/baseball/Input.jsx
@@ -0,0 +1,47 @@
+/** @jsxImportSource @emotion/react */
+import { useState } from "react";
+import {
+  buttonStyle,
+  inputStyle,
+  inputWrapperStyle,
+} from "../../styles/inputStyles";
+
+function Input({ input, setInput, onSubmit }) {
+  const [warning, setWarning] = useState("");
+
+  const handleChange = (e) => {
+    const value = e.target.value;
+    setInput(value);
+
+    if (value.length > 3) {
+      setWarning("⚠️ 3자리까지만 입력 가능합니다.");
+    } else {
+      setWarning("");
+    }
+  };
+
+  const handleKeyPress = (e) => {
+    if (e.key === "Enter") onSubmit();
+  };
+
+  return (
+    <div>
+      <div css={inputWrapperStyle}>
+        <input
+          type="text"
+          value={input}
+          css={inputStyle}
+          onChange={handleChange}
+          onKeyPress={handleKeyPress}
+          placeholder="3자리 숫자 입력"
+        />
+        <button css={buttonStyle} onClick={onSubmit}>
+          확인
+        </button>
+      </div>
+      {warning && <p style={{ color: "red" }}>{warning}</p>}
+    </div>
+  );
+}
+
+export default Input;
diff --git a/week3-homework/week3/src/components/baseball/Message.jsx b/week3-homework/week3/src/components/baseball/Message.jsx
@@ -0,0 +1,7 @@
+import React from "react";
+
+function Message({ text }) {
+  return <p>{text}</p>;
+}
+
+export default Message;