From 169738a176e923f9101004c39ad1831cf2459ee1 Mon Sep 17 00:00:00 2001 From: say-young516 Date: Tue, 21 Jun 2022 20:31:47 +0900 Subject: [PATCH 1/2] =?UTF-8?q?chore:=20:gear:=20=ED=83=80=EC=9E=85?= =?UTF-8?q?=EC=8A=A4=ED=81=AC=EB=A6=BD=ED=8A=B8=201=EC=B0=A8=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD=20=EC=99=84=EB=A3=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- dist/App.js | 16 +++ dist/App.js.map | 1 + dist/components/GameImg.js | 40 ++++++ dist/components/GameImg.js.map | 1 + dist/components/GlobalStyle.js | 29 ++++ dist/components/GlobalStyle.js.map | 1 + dist/pages/Game.js | 124 ++++++++++++++++++ dist/pages/Game.js.map | 1 + dist/pages/Result.js | 63 +++++++++ dist/pages/Result.js.map | 1 + package.json | 5 + src/App.test.js | 8 -- src/{App.js => App.tsx} | 4 +- src/components/{GameImg.jsx => GameImg.tsx} | 14 +- .../{GlobalStyle.jsx => GlobalStyle.tsx} | 0 src/custom.d.ts | 4 + src/index.js | 3 +- src/pages/{Game.jsx => Game.tsx} | 34 ++--- src/pages/Main.jsx | 13 -- src/pages/{Result.jsx => Result.tsx} | 22 +++- src/reportWebVitals.js | 13 -- src/setupTests.js | 5 - tsconfig.json | 108 +++++++++++++++ yarn.lock | 53 +++++++- 24 files changed, 495 insertions(+), 68 deletions(-) create mode 100644 dist/App.js create mode 100644 dist/App.js.map create mode 100644 dist/components/GameImg.js create mode 100644 dist/components/GameImg.js.map create mode 100644 dist/components/GlobalStyle.js create mode 100644 dist/components/GlobalStyle.js.map create mode 100644 dist/pages/Game.js create mode 100644 dist/pages/Game.js.map create mode 100644 dist/pages/Result.js create mode 100644 dist/pages/Result.js.map delete mode 100644 src/App.test.js rename src/{App.js => App.tsx} (84%) rename src/components/{GameImg.jsx => GameImg.tsx} (72%) rename src/components/{GlobalStyle.jsx => GlobalStyle.tsx} (100%) create mode 100644 src/custom.d.ts rename src/pages/{Game.jsx => Game.tsx} (76%) delete mode 100644 src/pages/Main.jsx rename src/pages/{Result.jsx => Result.tsx} (74%) delete mode 100644 src/reportWebVitals.js delete mode 100644 src/setupTests.js create mode 100644 tsconfig.json diff --git a/dist/App.js b/dist/App.js new file mode 100644 index 0000000..a655eab --- /dev/null +++ b/dist/App.js @@ -0,0 +1,16 @@ +"use strict"; +var __importDefault = (this && this.__importDefault) || function (mod) { + return (mod && mod.__esModule) ? mod : { "default": mod }; +}; +Object.defineProperty(exports, "__esModule", { value: true }); +require("./App.css"); +const Game_1 = __importDefault(require("./pages/Game")); +const GlobalStyle_1 = __importDefault(require("./components/GlobalStyle")); +const react_1 = __importDefault(require("react")); +function App() { + return (react_1.default.createElement(react_1.default.Fragment, null, + react_1.default.createElement(GlobalStyle_1.default, null), + react_1.default.createElement(Game_1.default, null))); +} +exports.default = App; +//# sourceMappingURL=App.js.map \ No newline at end of file diff --git a/dist/App.js.map b/dist/App.js.map new file mode 100644 index 0000000..31210c7 --- /dev/null +++ b/dist/App.js.map @@ -0,0 +1 @@ +{"version":3,"file":"App.js","sourceRoot":"","sources":["../src/App.tsx"],"names":[],"mappings":";;;;;AAAA,qBAAmB;AACnB,wDAAgC;AAEhC,2EAAmD;AACnD,kDAA0B;AAC1B,SAAS,GAAG;IAEV,OAAO,CACP;QACA,8BAAC,qBAAW,OAAE;QACd,8BAAC,cAAI,OAAE,CAEJ,CAAC,CAAC;AACP,CAAC;AAED,kBAAe,GAAG,CAAC"} \ No newline at end of file diff --git a/dist/components/GameImg.js b/dist/components/GameImg.js new file mode 100644 index 0000000..3c2794b --- /dev/null +++ b/dist/components/GameImg.js @@ -0,0 +1,40 @@ +"use strict"; +var __importDefault = (this && this.__importDefault) || function (mod) { + return (mod && mod.__esModule) ? mod : { "default": mod }; +}; +Object.defineProperty(exports, "__esModule", { value: true }); +const react_1 = __importDefault(require("react")); +const styled_components_1 = __importDefault(require("styled-components")); +const ImgContainer = styled_components_1.default.div ` + display:flex; + width:100%; + flex-direction:column; + text-align:center; +`; +const StyledImg = styled_components_1.default.img ` + width: 100%; + height:80%; + object-fit: cover; + &:hover { + transform: scale(1.1); // 이미지 1.1배 확대 + cursor: pointer; + transition: 0.5s; //부드럽게 확대 + } +`; +const Desc = styled_components_1.default.h1 ` + position: relative; + top: -50%; + font-size:40px; + word-breka:keep-all; + color: white; + text-shadow: 3px 3px 3px black; //글자 잘 안 보여서 shadow 설정 +`; +//게임에 사용되는 이미지 컴포넌트 +function GameImg({ src, title, onClick }) { + //src: 이미지 , name: 사진에 대한 이름, onCLick: 온클릭 함수 + return (react_1.default.createElement(ImgContainer, { onClick: onClick }, + react_1.default.createElement(StyledImg, { src: src, title: title }), + react_1.default.createElement(Desc, null, title))); +} +exports.default = GameImg; +//# sourceMappingURL=GameImg.js.map \ No newline at end of file diff --git a/dist/components/GameImg.js.map b/dist/components/GameImg.js.map new file mode 100644 index 0000000..0debd5b --- /dev/null +++ b/dist/components/GameImg.js.map @@ -0,0 +1 @@ +{"version":3,"file":"GameImg.js","sourceRoot":"","sources":["../../src/components/GameImg.tsx"],"names":[],"mappings":";;;;;AAAA,kDAA0B;AAE1B,0EAAuC;AAEvC,MAAM,YAAY,GAAG,2BAAM,CAAC,GAAG,CAAA;;;;;CAK9B,CAAC;AACF,MAAM,SAAS,GAAG,2BAAM,CAAC,GAAG,CAAA;;;;;;;;;CAS3B,CAAC;AACF,MAAM,IAAI,GAAG,2BAAM,CAAC,EAAE,CAAA;;;;;;;CAOrB,CAAC;AAMF,mBAAmB;AACnB,SAAS,OAAO,CAAC,EAAE,GAAG,EAAE,KAAK,EAAE,OAAO,EAAM;IAC1C,6CAA6C;IAE7C,OAAO,CACL,8BAAC,YAAY,IAAC,OAAO,EAAE,OAAO;QAC5B,8BAAC,SAAS,IAAC,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,GAAI;QACrC,8BAAC,IAAI,QAAE,KAAK,CAAQ,CACP,CAChB,CAAC;AACJ,CAAC;AACD,kBAAe,OAAO,CAAC"} \ No newline at end of file diff --git a/dist/components/GlobalStyle.js b/dist/components/GlobalStyle.js new file mode 100644 index 0000000..8156cdd --- /dev/null +++ b/dist/components/GlobalStyle.js @@ -0,0 +1,29 @@ +"use strict"; +var __importDefault = (this && this.__importDefault) || function (mod) { + return (mod && mod.__esModule) ? mod : { "default": mod }; +}; +Object.defineProperty(exports, "__esModule", { value: true }); +const styled_components_1 = require("styled-components"); +const styled_reset_1 = __importDefault(require("styled-reset")); +//글로벌 스타일 +const GlobalStyle = (0, styled_components_1.createGlobalStyle) ` +${styled_reset_1.default} + #root, body, html { + padding: 0; + margin: 0; + font-family:"Noto Serif KR", serif;, 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif; + overflow:hidden; + + } + + * { + box-sizing: border-box; + } + + button:hover { + cursor: pointer; + } + +`; +exports.default = GlobalStyle; +//# sourceMappingURL=GlobalStyle.js.map \ No newline at end of file diff --git a/dist/components/GlobalStyle.js.map b/dist/components/GlobalStyle.js.map new file mode 100644 index 0000000..d17f012 --- /dev/null +++ b/dist/components/GlobalStyle.js.map @@ -0,0 +1 @@ +{"version":3,"file":"GlobalStyle.js","sourceRoot":"","sources":["../../src/components/GlobalStyle.tsx"],"names":[],"mappings":";;;;;AAAA,yDAAsD;AACtD,gEAAiC;AACjC,SAAS;AACT,MAAM,WAAW,GAAG,IAAA,qCAAiB,EAAA;EACnC,sBAAK;;;;;;;;;;;;;;;;;CAiBN,CAAC;AAEF,kBAAe,WAAW,CAAC"} \ No newline at end of file diff --git a/dist/pages/Game.js b/dist/pages/Game.js new file mode 100644 index 0000000..01d463c --- /dev/null +++ b/dist/pages/Game.js @@ -0,0 +1,124 @@ +"use strict"; +var __importDefault = (this && this.__importDefault) || function (mod) { + return (mod && mod.__esModule) ? mod : { "default": mod }; +}; +Object.defineProperty(exports, "__esModule", { value: true }); +const react_1 = __importDefault(require("react")); +const react_2 = require("react"); +const styled_components_1 = __importDefault(require("styled-components")); +const _______png_1 = __importDefault(require("../img/\uBBFC\uD2B8\uCD08\uCF5C\uB9BF\uCE69.png")); +const __________png_1 = __importDefault(require("../img/\uBCA0\uB9AC\uBCA0\uB9AC\uC2A4\uD2B8\uB85C\uBCA0\uB9AC.png")); +const _______png_2 = __importDefault(require("../img/\uC5C4\uB9C8\uB294\uC678\uACC4\uC778.png")); +const ______png_1 = __importDefault(require("../img/\uCD08\uCF54\uB098\uBB34\uC232.png")); +const GameImg_1 = __importDefault(require("../components/GameImg")); +const Result_1 = __importDefault(require("./Result")); +const Main = styled_components_1.default.div ` + display: flex; + flex-direction: column; +`; +const GameHeader = styled_components_1.default.header ` + background-color: black; + color: white; + display: flex; + text-align: center; + font: 2rem "Noto Serif KR", serif; + padding: 1rem; + flex-direction: column; + gap: 1rem; + font-weight: bold; +`; +const GameContent = styled_components_1.default.main ` + display: flex; + text-align: center; + width: 100vw; + height: 100vh; +`; +const Versus = styled_components_1.default.h1 ` + position: absolute; + top: 45vh; + right: 45vw; + color: white; + font-size: 80px; + font-weight: 500; + text-shadow: 3px 3px 3px #ffa500; //글자 잘 안 보여서 shadow 설정 +`; +const selectArr = [ + { + img: _______png_1.default, + name: "민트 초콜릿 칩", + }, + { + img: __________png_1.default, + name: "베리베리 스트로베리", + }, + { + img: _______png_2.default, + name: "엄마는 외계인", + }, + { + img: ______png_1.default, + name: "초코나무 숲", + }, +]; +//메인 게임 페이지 +function Game() { + const [fighterList, setFighterList] = (0, react_2.useState)([]); //처음에 세팅되는 모든 참가자 배열 + const [winners, setWinners] = (0, react_2.useState)([]); //해당 라운드 승리자 저장 배열 + const round = (0, react_2.useRef)(1); //지금 진행한 경기 횟수 + const [gameEnd, setGameEnd] = (0, react_2.useState)(false); //게임이 끝났는지 여부 + const remain = (0, react_2.useRef)(0); //남아있는 경기 횟수 + const [realWinner, setRealWinner] = (0, react_2.useState)({ img: "", name: "" }); //최종 승리자 + function shuffle(array) { + //매 게임마다 대결 순서 무작위로 섞기 + array.sort(() => Math.random() - 0.5); + } + function imgOnClick(fighter) { + //게임에서 이미지 클릭될 때 실행되는 함수 + setWinners([...winners, fighter]); + round.current += 1; //진행한 횟수 늘려주기 + fighterList.length >= 2 && setFighterList(fighterList.slice(2)); + } + (0, react_2.useEffect)(() => { + shuffle(selectArr); + setFighterList(selectArr); //대결자 초기화 + round.current = 1; + remain.current = selectArr.length / 2; + }, []); + (0, react_2.useEffect)(() => { + if (fighterList.length === 0) { + //참가자 전부 비었을 때 + if (winners.length !== 0 && winners.length % 2 === 0) { + //winner 배열에 진행해야 하는 경기가 남았다면 + setFighterList([...fighterList, ...winners]); + setWinners([]); + remain.current = winners.length / 2; + round.current = 1; + } + else if (winners.length === 1) { + //길이가 1인 것은 최종 승리자만 남았다는 뜻 + setGameEnd(true); + setRealWinner(winners[winners.length - 1]); + } + } + }, [fighterList, winners]); + return !gameEnd ? ( //게임이 끝났을 때는 Result 페이지 보여주도록 + react_1.default.createElement(Main, null, + react_1.default.createElement(GameHeader, null, + react_1.default.createElement("h1", null, "\uD83C\uDF66\uBCA0\uB77C\uAC1C\uCDE8\uD83C\uDF66 \uC6D4\uB4DC\uCEF5 \uC900\uACB0\uC2B9"), + react_1.default.createElement("h1", null, + round.current, + "/", + remain.current)), + react_1.default.createElement(GameContent, null, + fighterList && + fighterList.map((fighter, idx) => { + if (idx < 2) { + return (react_1.default.createElement(GameImg_1.default, { src: fighter.img, title: fighter.name, key: idx, onClick: () => { + imgOnClick(fighter); + } })); + } + }), + react_1.default.createElement(Versus, null, "VS")))) : (react_1.default.createElement(Result_1.default, { winner: realWinner })); +} +exports.default = Game; +//# sourceMappingURL=Game.js.map \ No newline at end of file diff --git a/dist/pages/Game.js.map b/dist/pages/Game.js.map new file mode 100644 index 0000000..bfd0157 --- /dev/null +++ b/dist/pages/Game.js.map @@ -0,0 +1 @@ +{"version":3,"file":"Game.js","sourceRoot":"","sources":["../../src/pages/Game.tsx"],"names":[],"mappings":"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"} \ No newline at end of file diff --git a/dist/pages/Result.js b/dist/pages/Result.js new file mode 100644 index 0000000..12e31a0 --- /dev/null +++ b/dist/pages/Result.js @@ -0,0 +1,63 @@ +"use strict"; +var __importDefault = (this && this.__importDefault) || function (mod) { + return (mod && mod.__esModule) ? mod : { "default": mod }; +}; +Object.defineProperty(exports, "__esModule", { value: true }); +const react_1 = __importDefault(require("react")); +const styled_components_1 = __importDefault(require("styled-components")); +const ___png_1 = __importDefault(require("../img/\uC655\uAD00.png")); +const ResultContainer = styled_components_1.default.div ` + width: 100vw; + height: 100vh; + display: flex; + flex-direction: column; + align-items: center; + color: white; + background-color: #2a2a2a; + padding-top: 1rem; + gap: 30px; +`; +const CrownImg = styled_components_1.default.img ` + width: 130px; + position: absolute; + top: 25%; +`; +const WinnerImg = styled_components_1.default.img ` + width: 100vw; + height: 350px; + object-fit: cover; +`; +const StyledButton = styled_components_1.default.button ` + width: 100px; + height: 50px; + color: white; + font-size: 12px; + border: none; + border-radius: 8px; + background: ${(props) => props.color || "black"}; //props에 따라 버튼 색깔 다르게 +`; +const ButtonContainer = styled_components_1.default.div ` + display: flex; + flex-direction:row; + gap:1rem; +`; +const Winner = styled_components_1.default.p ` +font-size: 1.5rem; +`; +const WinnerName = styled_components_1.default.h1 ` +font-size: 3rem; +font-weight: bold; +`; +//게임 시작 후 결과화면 +function Result({ winner }) { + return (react_1.default.createElement(ResultContainer, null, + react_1.default.createElement(Winner, null, "\uC6B0\uC2B9\uC790!"), + react_1.default.createElement(WinnerName, null, winner.name), + react_1.default.createElement(WinnerImg, { src: winner.img, alt: "\uC6B0\uC2B9\uC790" }), + react_1.default.createElement(CrownImg, { src: ___png_1.default, alt: "\uC655\uAD00" }), + react_1.default.createElement(ButtonContainer, null, + react_1.default.createElement(StyledButton, { color: "#FFA500", onClick: () => { window.location.reload(); } }, "\uB2E4\uC2DC\uD558\uAE30"), + react_1.default.createElement(StyledButton, { color: "#8A2BE2" }, "\uACF5\uC720\uD558\uAE30")))); +} +exports.default = Result; +//# sourceMappingURL=Result.js.map \ No newline at end of file diff --git a/dist/pages/Result.js.map b/dist/pages/Result.js.map new file mode 100644 index 0000000..d6a2bcf --- /dev/null +++ b/dist/pages/Result.js.map @@ -0,0 +1 @@ +{"version":3,"file":"Result.js","sourceRoot":"","sources":["../../src/pages/Result.tsx"],"names":[],"mappings":";;;;;AAAA,kDAA0B;AAC1B,0EAAuC;AACvC,qEAA+B;AAE/B,MAAM,eAAe,GAAG,2BAAM,CAAC,GAAG,CAAA;;;;;;;;;;CAUjC,CAAC;AACF,MAAM,QAAQ,GAAG,2BAAM,CAAC,GAAG,CAAA;;;;CAI1B,CAAC;AACF,MAAM,SAAS,GAAG,2BAAM,CAAC,GAAG,CAAA;;;;CAI3B,CAAC;AACF,MAAM,YAAY,GAAG,2BAAM,CAAC,MAAM,CAAqB;;;;;;;gBAOvC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,IAAI,OAAO;CAChD,CAAC;AACF,MAAM,eAAe,GAAG,2BAAM,CAAC,GAAG,CAAA;;;;CAIjC,CAAC;AACF,MAAM,MAAM,GAAC,2BAAM,CAAC,CAAC,CAAA;;CAEpB,CAAC;AACF,MAAM,UAAU,GAAC,2BAAM,CAAC,EAAE,CAAA;;;CAGzB,CAAC;AAIF,cAAc;AACd,SAAS,MAAM,CAAE,EAAE,MAAM,EAAgB;IACvC,OAAO,CACL,8BAAC,eAAe;QACd,8BAAC,MAAM,8BAAc;QACrB,8BAAC,UAAU,QAAE,MAAM,CAAC,IAAI,CAAc;QACtC,8BAAC,SAAS,IAAC,GAAG,EAAE,MAAM,CAAC,GAAG,EAAE,GAAG,EAAC,oBAAK,GAAG;QACxC,8BAAC,QAAQ,IAAC,GAAG,EAAE,gBAAE,EAAE,GAAG,EAAC,cAAI,GAAG;QAC9B,8BAAC,eAAe;YACd,8BAAC,YAAY,IAAC,KAAK,EAAC,SAAS,EAAC,OAAO,EAAE,GAAE,EAAE,GAAE,MAAM,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAC,CAAA,CAAC,+BAAqB;YAC5F,8BAAC,YAAY,IAAC,KAAK,EAAC,SAAS,+BAAoB,CACjC,CACF,CACnB,CAAC;AACJ,CAAC;AACD,kBAAe,MAAM,CAAC"} \ No newline at end of file diff --git a/package.json b/package.json index c4ba6a6..cddb436 100644 --- a/package.json +++ b/package.json @@ -6,8 +6,10 @@ "@testing-library/jest-dom": "^5.14.1", "@testing-library/react": "^13.0.0", "@testing-library/user-event": "^13.2.1", + "@types/styled-components": "^5.1.25", "react": "^18.1.0", "react-dom": "^18.1.0", + "react-router-dom": "^6.3.0", "react-scripts": "5.0.1", "styled-components": "^5.3.5", "styled-reset": "^4.3.4", @@ -36,5 +38,8 @@ "last 1 firefox version", "last 1 safari version" ] + }, + "devDependencies": { + "typescript": "^4.7.4" } } diff --git a/src/App.test.js b/src/App.test.js deleted file mode 100644 index 1f03afe..0000000 --- a/src/App.test.js +++ /dev/null @@ -1,8 +0,0 @@ -import { render, screen } from '@testing-library/react'; -import App from './App'; - -test('renders learn react link', () => { - render(); - const linkElement = screen.getByText(/learn react/i); - expect(linkElement).toBeInTheDocument(); -}); diff --git a/src/App.js b/src/App.tsx similarity index 84% rename from src/App.js rename to src/App.tsx index 54b607b..604cac2 100644 --- a/src/App.js +++ b/src/App.tsx @@ -2,9 +2,11 @@ import "./App.css"; import Game from './pages/Game'; import Result from './pages/Result'; import GlobalStyle from './components/GlobalStyle'; +import React from 'react'; function App() { - return (<> + return ( + <> {/* */} diff --git a/src/components/GameImg.jsx b/src/components/GameImg.tsx similarity index 72% rename from src/components/GameImg.jsx rename to src/components/GameImg.tsx index 879019b..3ffc1f7 100644 --- a/src/components/GameImg.jsx +++ b/src/components/GameImg.tsx @@ -1,4 +1,5 @@ -import { React, useState, useEffect, useRef } from "react"; +import React from "react"; +import { useState, useEffect, useRef } from "react"; import styled from "styled-components"; const ImgContainer = styled.div` @@ -25,14 +26,19 @@ const Desc = styled.h1` color: white; text-shadow: 3px 3px 3px black; //글자 잘 안 보여서 shadow 설정 `; +interface Img{ + src:string; + title:string; + onClick:React.MouseEventHandler; +} //게임에 사용되는 이미지 컴포넌트 -function GameImg({ src, name, onClick }) { +function GameImg({ src, title, onClick }:Img) { //src: 이미지 , name: 사진에 대한 이름, onCLick: 온클릭 함수 return ( - - {name} + + {title} ); } diff --git a/src/components/GlobalStyle.jsx b/src/components/GlobalStyle.tsx similarity index 100% rename from src/components/GlobalStyle.jsx rename to src/components/GlobalStyle.tsx diff --git a/src/custom.d.ts b/src/custom.d.ts new file mode 100644 index 0000000..6e4f3bc --- /dev/null +++ b/src/custom.d.ts @@ -0,0 +1,4 @@ +declare module "*.jpg"; +declare module "*.png"; +declare module "*.jpge"; +declare module "*.gif"; \ No newline at end of file diff --git a/src/index.js b/src/index.js index d563c0f..347dcca 100644 --- a/src/index.js +++ b/src/index.js @@ -2,7 +2,6 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; -import reportWebVitals from './reportWebVitals'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( @@ -14,4 +13,4 @@ root.render( // If you want to start measuring performance in your app, pass a function // to log results (for example: reportWebVitals(console.log)) // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals -reportWebVitals(); + diff --git a/src/pages/Game.jsx b/src/pages/Game.tsx similarity index 76% rename from src/pages/Game.jsx rename to src/pages/Game.tsx index 3e084d0..c3f2aac 100644 --- a/src/pages/Game.jsx +++ b/src/pages/Game.tsx @@ -1,11 +1,12 @@ -import { React, useState, useEffect, useRef } from "react"; +import React from "react"; +import { useState, useEffect, useRef } from "react"; import styled from "styled-components"; import 민초 from "../img/민트초콜릿칩.png"; import 베리 from "../img/베리베리스트로베리.png"; import 외계인 from "../img/엄마는외계인.png"; import 초코남숲 from "../img/초코나무숲.png"; import GameImg from "../components/GameImg"; -import Result from "../pages/Result"; +import Result from "./Result"; const Main = styled.div` display: flex; flex-direction: column; @@ -36,8 +37,11 @@ const Versus = styled.h1` font-weight: 500; text-shadow: 3px 3px 3px #ffa500; //글자 잘 안 보여서 shadow 설정 `; - -const selectArr = [ +export interface Icecream{ + img:string; + name:string; +} +const selectArr:Icecream[] = [ { img: 민초, name: "민트 초콜릿 칩", @@ -58,17 +62,17 @@ const selectArr = [ //메인 게임 페이지 function Game() { - const [fighterList, setFighterList] = useState([]); //처음에 세팅되는 모든 참가자 배열 - const [winners, setWinners] = useState([]); //해당 라운드 승리자 저장 배열 - const round = useRef(1); //지금 진행한 경기 횟수 - const [gameEnd, setGameEnd] = useState(false); //게임이 끝났는지 여부 - const remain = useRef(0); //남아있는 경기 횟수 - const [realWinner, setRealWinner] = useState(""); //최종 승리자 - function shuffle(array) { + const [fighterList, setFighterList] = useState([]); //처음에 세팅되는 모든 참가자 배열 + const [winners, setWinners] = useState([]); //해당 라운드 승리자 저장 배열 + const round = useRef(1); //지금 진행한 경기 횟수 + const [gameEnd, setGameEnd] = useState(false); //게임이 끝났는지 여부 + const remain = useRef(0); //남아있는 경기 횟수 + const [realWinner, setRealWinner] = useState({img:"",name:""}); //최종 승리자 + function shuffle(array:Icecream[]) { //매 게임마다 대결 순서 무작위로 섞기 array.sort(() => Math.random() - 0.5); } - function imgOnClick(fighter) { + function imgOnClick(fighter:Icecream) { //게임에서 이미지 클릭될 때 실행되는 함수 setWinners([...winners, fighter]); round.current += 1; //진행한 횟수 늘려주기 @@ -96,7 +100,7 @@ function Game() { setRealWinner(winners[winners.length - 1]); } } - }, [fighterList]); + }, [fighterList, winners]); return !gameEnd ? ( //게임이 끝났을 때는 Result 페이지 보여주도록
@@ -108,12 +112,12 @@ function Game() { {fighterList && - fighterList.map((fighter, idx) => { + fighterList.map((fighter : Icecream, idx:number) => { if (idx < 2) { return ( { imgOnClick(fighter); diff --git a/src/pages/Main.jsx b/src/pages/Main.jsx deleted file mode 100644 index 1c513d9..0000000 --- a/src/pages/Main.jsx +++ /dev/null @@ -1,13 +0,0 @@ -import { React, useState, useEffect, useRef } from "react"; - - -//게임 시작 전 화면 -> 아직 구현 X -function Main() { - - return ( - <> - - - ); -} -export default Main; diff --git a/src/pages/Result.jsx b/src/pages/Result.tsx similarity index 74% rename from src/pages/Result.jsx rename to src/pages/Result.tsx index 6e714b7..28f22c4 100644 --- a/src/pages/Result.jsx +++ b/src/pages/Result.tsx @@ -1,7 +1,7 @@ -import { React, useState, useEffect, useRef } from "react"; +import React from "react"; import styled from "styled-components"; -import winner from "../img/민트초콜릿칩.png"; import 왕관 from "../img/왕관.png"; +import { Icecream } from './Game'; const ResultContainer = styled.div` width: 100vw; height: 100vh; @@ -23,7 +23,7 @@ const WinnerImg = styled.img` height: 350px; object-fit: cover; `; -const StyledButton = styled.button` +const StyledButton = styled.button< { color : string} >` width: 100px; height: 50px; color: white; @@ -37,12 +37,22 @@ const ButtonContainer = styled.div` flex-direction:row; gap:1rem; `; +const Winner=styled.p` +font-size: 1.5rem; +`; +const WinnerName=styled.h1` +font-size: 3rem; +font-weight: bold; +`; +interface IcecreamProps{ + winner:Icecream; +} //게임 시작 후 결과화면 -function Result({ winner }) { +function Result( { winner} :IcecreamProps) { return ( -

우승자!

-

{winner.name}

+ 우승자! + {winner.name} diff --git a/src/reportWebVitals.js b/src/reportWebVitals.js deleted file mode 100644 index 5253d3a..0000000 --- a/src/reportWebVitals.js +++ /dev/null @@ -1,13 +0,0 @@ -const reportWebVitals = onPerfEntry => { - if (onPerfEntry && onPerfEntry instanceof Function) { - import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { - getCLS(onPerfEntry); - getFID(onPerfEntry); - getFCP(onPerfEntry); - getLCP(onPerfEntry); - getTTFB(onPerfEntry); - }); - } -}; - -export default reportWebVitals; diff --git a/src/setupTests.js b/src/setupTests.js deleted file mode 100644 index 8f2609b..0000000 --- a/src/setupTests.js +++ /dev/null @@ -1,5 +0,0 @@ -// jest-dom adds custom jest matchers for asserting on DOM nodes. -// allows you to do things like: -// expect(element).toHaveTextContent(/react/i) -// learn more: https://github.com/testing-library/jest-dom -import '@testing-library/jest-dom'; diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..7816bcf --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,108 @@ +{ + "compilerOptions": { + "jsx": "react", + /* Visit https://aka.ms/tsconfig to read more about this file */ + + /* Projects */ + // "incremental": true, /* Save .tsbuildinfo files to allow for incremental compilation of projects. */ + // "composite": true, /* Enable constraints that allow a TypeScript project to be used with project references. */ + // "tsBuildInfoFile": "./.tsbuildinfo", /* Specify the path to .tsbuildinfo incremental compilation file. */ + // "disableSourceOfProjectReferenceRedirect": true, /* Disable preferring source files instead of declaration files when referencing composite projects. */ + // "disableSolutionSearching": true, /* Opt a project out of multi-project reference checking when editing. */ + // "disableReferencedProjectLoad": true, /* Reduce the number of projects loaded automatically by TypeScript. */ + + /* Language and Environment */ + "target": "es2016", /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */ + // "lib": [], /* Specify a set of bundled library declaration files that describe the target runtime environment. */ + // "jsx": "preserve", /* Specify what JSX code is generated. */ + // "experimentalDecorators": true, /* Enable experimental support for TC39 stage 2 draft decorators. */ + // "emitDecoratorMetadata": true, /* Emit design-type metadata for decorated declarations in source files. */ + // "jsxFactory": "", /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h'. */ + // "jsxFragmentFactory": "", /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */ + // "jsxImportSource": "", /* Specify module specifier used to import the JSX factory functions when using 'jsx: react-jsx*'. */ + // "reactNamespace": "", /* Specify the object invoked for 'createElement'. This only applies when targeting 'react' JSX emit. */ + // "noLib": true, /* Disable including any library files, including the default lib.d.ts. */ + // "useDefineForClassFields": true, /* Emit ECMAScript-standard-compliant class fields. */ + // "moduleDetection": "auto", /* Control what method is used to detect module-format JS files. */ + + /* Modules */ + "module": "commonjs", /* Specify what module code is generated. */ + // "rootDir": "./", /* Specify the root folder within your source files. */ + // "moduleResolution": "node", /* Specify how TypeScript looks up a file from a given module specifier. */ + // "baseUrl": "./", /* Specify the base directory to resolve non-relative module names. */ + // "paths": {}, /* Specify a set of entries that re-map imports to additional lookup locations. */ + // "rootDirs": [], /* Allow multiple folders to be treated as one when resolving modules. */ + // "typeRoots": [], /* Specify multiple folders that act like './node_modules/@types'. */ + // "types": [], /* Specify type package names to be included without being referenced in a source file. */ + // "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */ + // "moduleSuffixes": [], /* List of file name suffixes to search when resolving a module. */ + // "resolveJsonModule": true, /* Enable importing .json files. */ + // "noResolve": true, /* Disallow 'import's, 'require's or ''s from expanding the number of files TypeScript should add to a project. */ + + /* JavaScript Support */ + // "allowJs": true, /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */ + // "checkJs": true, /* Enable error reporting in type-checked JavaScript files. */ + // "maxNodeModuleJsDepth": 1, /* Specify the maximum folder depth used for checking JavaScript files from 'node_modules'. Only applicable with 'allowJs'. */ + + /* Emit */ + // "declaration": true, /* Generate .d.ts files from TypeScript and JavaScript files in your project. */ + // "declarationMap": true, /* Create sourcemaps for d.ts files. */ + // "emitDeclarationOnly": true, /* Only output d.ts files and not JavaScript files. */ + // "sourceMap": true, /* Create source map files for emitted JavaScript files. */ + // "outFile": "./", /* Specify a file that bundles all outputs into one JavaScript file. If 'declaration' is true, also designates a file that bundles all .d.ts output. */ + // "outDir": "./", /* Specify an output folder for all emitted files. */ + // "removeComments": true, /* Disable emitting comments. */ + // "noEmit": true, /* Disable emitting files from a compilation. */ + // "importHelpers": true, /* Allow importing helper functions from tslib once per project, instead of including them per-file. */ + // "importsNotUsedAsValues": "remove", /* Specify emit/checking behavior for imports that are only used for types. */ + // "downlevelIteration": true, /* Emit more compliant, but verbose and less performant JavaScript for iteration. */ + // "sourceRoot": "", /* Specify the root path for debuggers to find the reference source code. */ + // "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */ + // "inlineSourceMap": true, /* Include sourcemap files inside the emitted JavaScript. */ + // "inlineSources": true, /* Include source code in the sourcemaps inside the emitted JavaScript. */ + // "emitBOM": true, /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */ + // "newLine": "crlf", /* Set the newline character for emitting files. */ + // "stripInternal": true, /* Disable emitting declarations that have '@internal' in their JSDoc comments. */ + // "noEmitHelpers": true, /* Disable generating custom helper functions like '__extends' in compiled output. */ + // "noEmitOnError": true, /* Disable emitting files if any type checking errors are reported. */ + // "preserveConstEnums": true, /* Disable erasing 'const enum' declarations in generated code. */ + // "declarationDir": "./", /* Specify the output directory for generated declaration files. */ + // "preserveValueImports": true, /* Preserve unused imported values in the JavaScript output that would otherwise be removed. */ + + /* Interop Constraints */ + // "isolatedModules": true, /* Ensure that each file can be safely transpiled without relying on other imports. */ + // "allowSyntheticDefaultImports": true, /* Allow 'import x from y' when a module doesn't have a default export. */ + "esModuleInterop": true, /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */ + // "preserveSymlinks": true, /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */ + "forceConsistentCasingInFileNames": true, /* Ensure that casing is correct in imports. */ + + /* Type Checking */ + "strict": true, /* Enable all strict type-checking options. */ + "outDir":"dist", + "sourceMap":true, + // "noImplicitAny": true, /* Enable error reporting for expressions and declarations with an implied 'any' type. */ + // "strictNullChecks": true, /* When type checking, take into account 'null' and 'undefined'. */ + // "strictFunctionTypes": true, /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */ + // "strictBindCallApply": true, /* Check that the arguments for 'bind', 'call', and 'apply' methods match the original function. */ + // "strictPropertyInitialization": true, /* Check for class properties that are declared but not set in the constructor. */ + // "noImplicitThis": true, /* Enable error reporting when 'this' is given the type 'any'. */ + // "useUnknownInCatchVariables": true, /* Default catch clause variables as 'unknown' instead of 'any'. */ + // "alwaysStrict": true, /* Ensure 'use strict' is always emitted. */ + // "noUnusedLocals": true, /* Enable error reporting when local variables aren't read. */ + // "noUnusedParameters": true, /* Raise an error when a function parameter isn't read. */ + // "exactOptionalPropertyTypes": true, /* Interpret optional property types as written, rather than adding 'undefined'. */ + // "noImplicitReturns": true, /* Enable error reporting for codepaths that do not explicitly return in a function. */ + // "noFallthroughCasesInSwitch": true, /* Enable error reporting for fallthrough cases in switch statements. */ + // "noUncheckedIndexedAccess": true, /* Add 'undefined' to a type when accessed using an index. */ + // "noImplicitOverride": true, /* Ensure overriding members in derived classes are marked with an override modifier. */ + // "noPropertyAccessFromIndexSignature": true, /* Enforces using indexed accessors for keys declared using an indexed type. */ + // "allowUnusedLabels": true, /* Disable error reporting for unused labels. */ + // "allowUnreachableCode": true, /* Disable error reporting for unreachable code. */ + + /* Completeness */ + // "skipDefaultLibCheck": true, /* Skip type checking .d.ts files that are included with TypeScript. */ + "skipLibCheck": true + + /* Skip type checking all .d.ts files. */ + } +} diff --git a/yarn.lock b/yarn.lock index b23e695..fcf3681 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1025,6 +1025,13 @@ dependencies: regenerator-runtime "^0.13.4" +"@babel/runtime@^7.7.6": + version "7.18.3" + resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.18.3.tgz#c7b654b57f6f63cf7f8b418ac9ca04408c4579f4" + integrity sha512-38Y8f7YUhce/K7RMwTp7m0uCumpv9hZkitCbBClqQIow1qSbCvGkcegKOXpEWCQLfWmevgRiWokZ1GkpfhbZug== + dependencies: + regenerator-runtime "^0.13.4" + "@babel/template@^7.16.7", "@babel/template@^7.3.3": version "7.16.7" resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.16.7.tgz#8d126c8701fde4d66b264b3eba3d96f07666d155" @@ -1833,6 +1840,14 @@ dependencies: "@types/node" "*" +"@types/hoist-non-react-statics@*": + version "3.3.1" + resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f" + integrity sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA== + dependencies: + "@types/react" "*" + hoist-non-react-statics "^3.3.0" + "@types/html-minifier-terser@^6.0.0": version "6.1.0" resolved "https://registry.yarnpkg.com/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz#4fc33a00c1d0c16987b1a20cf92d20614c55ac35" @@ -1982,6 +1997,15 @@ resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-2.0.1.tgz#20f18294f797f2209b5f65c8e3b5c8e8261d127c" integrity sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw== +"@types/styled-components@^5.1.25": + version "5.1.25" + resolved "https://registry.yarnpkg.com/@types/styled-components/-/styled-components-5.1.25.tgz#0177c4ab5fa7c6ed0565d36f597393dae3f380ad" + integrity sha512-fgwl+0Pa8pdkwXRoVPP9JbqF0Ivo9llnmsm+7TCI330kbPIFd9qv1Lrhr37shf4tnxCOSu+/IgqM7uJXLWZZNQ== + dependencies: + "@types/hoist-non-react-statics" "*" + "@types/react" "*" + csstype "^3.0.2" + "@types/testing-library__jest-dom@^5.9.1": version "5.14.3" resolved "https://registry.yarnpkg.com/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.14.3.tgz#ee6c7ffe9f8595882ee7bda8af33ae7b8789ef17" @@ -4601,7 +4625,14 @@ he@^1.2.0: resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f" integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw== -hoist-non-react-statics@^3.0.0: +history@^5.2.0: + version "5.3.0" + resolved "https://registry.yarnpkg.com/history/-/history-5.3.0.tgz#1548abaa245ba47992f063a0783db91ef201c73b" + integrity sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ== + dependencies: + "@babel/runtime" "^7.7.6" + +hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.3.0: version "3.3.2" resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45" integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw== @@ -7181,6 +7212,21 @@ react-refresh@^0.11.0: resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.11.0.tgz#77198b944733f0f1f1a90e791de4541f9f074046" integrity sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A== +react-router-dom@^6.3.0: + version "6.3.0" + resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.3.0.tgz#a0216da813454e521905b5fa55e0e5176123f43d" + integrity sha512-uaJj7LKytRxZNQV8+RbzJWnJ8K2nPsOOEuX7aQstlMZKQT0164C+X2w6bnkqU3sjtLvpd5ojrezAyfZ1+0sStw== + dependencies: + history "^5.2.0" + react-router "6.3.0" + +react-router@6.3.0: + version "6.3.0" + resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.3.0.tgz#3970cc64b4cb4eae0c1ea5203a80334fdd175557" + integrity sha512-7Wh1DzVQ+tlFjkeo+ujvjSqSJmkt1+8JO+T5xklPlgrh70y7ogx75ODRW0ThWhY7S+6yEDks8TYrtQe/aoboBQ== + dependencies: + history "^5.2.0" + react-scripts@5.0.1: version "5.0.1" resolved "https://registry.yarnpkg.com/react-scripts/-/react-scripts-5.0.1.tgz#6285dbd65a8ba6e49ca8d651ce30645a6d980003" @@ -8297,6 +8343,11 @@ typedarray-to-buffer@^3.1.5: dependencies: is-typedarray "^1.0.0" +typescript@^4.7.4: + version "4.7.4" + resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.7.4.tgz#1a88596d1cf47d59507a1bcdfb5b9dfe4d488235" + integrity sha512-C0WQT0gezHuw6AdY1M2jxUO83Rjf0HP7Sk1DtXj6j1EwkQNZrHAg2XPWlq62oqEhYvONq5pkC2Y9oPljWToLmQ== + unbox-primitive@^1.0.1: version "1.0.2" resolved "https://registry.yarnpkg.com/unbox-primitive/-/unbox-primitive-1.0.2.tgz#29032021057d5e6cdbd08c5129c226dff8ed6f9e" From 662b47a17b32f497607cfb9138acea8fdd0c9084 Mon Sep 17 00:00:00 2001 From: say-young516 Date: Fri, 24 Jun 2022 22:27:20 +0900 Subject: [PATCH 2/2] =?UTF-8?q?chore:=20:gear:=201=EC=B0=A8=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- dist/App.js | 2 +- dist/App.js.map | 2 +- dist/components/GameImg.js.map | 2 +- dist/components/GlobalStyle.js.map | 1 - dist/pages/Game.js.map | 2 +- dist/pages/Result.js | 5 +++-- dist/pages/Result.js.map | 2 +- dist/{components => style}/GlobalStyle.js | 0 dist/style/GlobalStyle.js.map | 1 + dist/types/type.js | 3 +++ dist/types/type.js.map | 1 + src/App.tsx | 3 +-- src/components/GameImg.tsx | 10 +++------- src/pages/Game.tsx | 6 ++---- src/pages/Result.tsx | 7 ++++--- src/{components => style}/GlobalStyle.tsx | 0 src/types/type.ts | 10 ++++++++++ 17 files changed, 33 insertions(+), 24 deletions(-) delete mode 100644 dist/components/GlobalStyle.js.map rename dist/{components => style}/GlobalStyle.js (100%) create mode 100644 dist/style/GlobalStyle.js.map create mode 100644 dist/types/type.js create mode 100644 dist/types/type.js.map rename src/{components => style}/GlobalStyle.tsx (100%) create mode 100644 src/types/type.ts diff --git a/dist/App.js b/dist/App.js index a655eab..cc75472 100644 --- a/dist/App.js +++ b/dist/App.js @@ -5,7 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) { Object.defineProperty(exports, "__esModule", { value: true }); require("./App.css"); const Game_1 = __importDefault(require("./pages/Game")); -const GlobalStyle_1 = __importDefault(require("./components/GlobalStyle")); +const GlobalStyle_1 = __importDefault(require("./style/GlobalStyle")); const react_1 = __importDefault(require("react")); function App() { return (react_1.default.createElement(react_1.default.Fragment, null, diff --git a/dist/App.js.map b/dist/App.js.map index 31210c7..9f55a6f 100644 --- a/dist/App.js.map +++ b/dist/App.js.map @@ -1 +1 @@ -{"version":3,"file":"App.js","sourceRoot":"","sources":["../src/App.tsx"],"names":[],"mappings":";;;;;AAAA,qBAAmB;AACnB,wDAAgC;AAEhC,2EAAmD;AACnD,kDAA0B;AAC1B,SAAS,GAAG;IAEV,OAAO,CACP;QACA,8BAAC,qBAAW,OAAE;QACd,8BAAC,cAAI,OAAE,CAEJ,CAAC,CAAC;AACP,CAAC;AAED,kBAAe,GAAG,CAAC"} \ No newline at end of file +{"version":3,"file":"App.js","sourceRoot":"","sources":["../src/App.tsx"],"names":[],"mappings":";;;;;AAAA,qBAAmB;AACnB,wDAAgC;AAChC,sEAA8C;AAC9C,kDAA0B;AAC1B,SAAS,GAAG;IAEV,OAAO,CACP;QACA,8BAAC,qBAAW,OAAE;QACd,8BAAC,cAAI,OAAE,CAEJ,CAAC,CAAC;AACP,CAAC;AAED,kBAAe,GAAG,CAAC"} \ No newline at end of file diff --git a/dist/components/GameImg.js.map b/dist/components/GameImg.js.map index 0debd5b..cc67ee3 100644 --- a/dist/components/GameImg.js.map +++ b/dist/components/GameImg.js.map @@ -1 +1 @@ -{"version":3,"file":"GameImg.js","sourceRoot":"","sources":["../../src/components/GameImg.tsx"],"names":[],"mappings":";;;;;AAAA,kDAA0B;AAE1B,0EAAuC;AAEvC,MAAM,YAAY,GAAG,2BAAM,CAAC,GAAG,CAAA;;;;;CAK9B,CAAC;AACF,MAAM,SAAS,GAAG,2BAAM,CAAC,GAAG,CAAA;;;;;;;;;CAS3B,CAAC;AACF,MAAM,IAAI,GAAG,2BAAM,CAAC,EAAE,CAAA;;;;;;;CAOrB,CAAC;AAMF,mBAAmB;AACnB,SAAS,OAAO,CAAC,EAAE,GAAG,EAAE,KAAK,EAAE,OAAO,EAAM;IAC1C,6CAA6C;IAE7C,OAAO,CACL,8BAAC,YAAY,IAAC,OAAO,EAAE,OAAO;QAC5B,8BAAC,SAAS,IAAC,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,GAAI;QACrC,8BAAC,IAAI,QAAE,KAAK,CAAQ,CACP,CAChB,CAAC;AACJ,CAAC;AACD,kBAAe,OAAO,CAAC"} \ No newline at end of file +{"version":3,"file":"GameImg.js","sourceRoot":"","sources":["../../src/components/GameImg.tsx"],"names":[],"mappings":";;;;;AAAA,kDAA0B;AAE1B,0EAAuC;AAEvC,MAAM,YAAY,GAAG,2BAAM,CAAC,GAAG,CAAA;;;;;CAK9B,CAAC;AACF,MAAM,SAAS,GAAG,2BAAM,CAAC,GAAG,CAAA;;;;;;;;;CAS3B,CAAC;AACF,MAAM,IAAI,GAAG,2BAAM,CAAC,EAAE,CAAA;;;;;;;CAOrB,CAAC;AAEF,mBAAmB;AACnB,SAAS,OAAO,CAAC,EAAE,GAAG,EAAE,KAAK,EAAE,OAAO,EAAc;IAClD,6CAA6C;IAE7C,OAAO,CACL,8BAAC,YAAY,IAAC,OAAO,EAAE,OAAO;QAC5B,8BAAC,SAAS,IAAC,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,GAAI;QACrC,8BAAC,IAAI,QAAE,KAAK,CAAQ,CACP,CAChB,CAAC;AACJ,CAAC;AACD,kBAAe,OAAO,CAAC"} \ No newline at end of file diff --git a/dist/components/GlobalStyle.js.map b/dist/components/GlobalStyle.js.map deleted file mode 100644 index d17f012..0000000 --- a/dist/components/GlobalStyle.js.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"GlobalStyle.js","sourceRoot":"","sources":["../../src/components/GlobalStyle.tsx"],"names":[],"mappings":";;;;;AAAA,yDAAsD;AACtD,gEAAiC;AACjC,SAAS;AACT,MAAM,WAAW,GAAG,IAAA,qCAAiB,EAAA;EACnC,sBAAK;;;;;;;;;;;;;;;;;CAiBN,CAAC;AAEF,kBAAe,WAAW,CAAC"} \ No newline at end of file diff --git a/dist/pages/Game.js.map b/dist/pages/Game.js.map index bfd0157..93864ec 100644 --- a/dist/pages/Game.js.map +++ b/dist/pages/Game.js.map @@ -1 +1 @@ -{"version":3,"file":"Game.js","sourceRoot":"","sources":["../../src/pages/Game.tsx"],"names":[],"mappings":"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"} \ No newline at end of file +{"version":3,"file":"Game.js","sourceRoot":"","sources":["../../src/pages/Game.tsx"],"names":[],"mappings":"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"} \ No newline at end of file diff --git a/dist/pages/Result.js b/dist/pages/Result.js index 12e31a0..8f7a998 100644 --- a/dist/pages/Result.js +++ b/dist/pages/Result.js @@ -50,10 +50,11 @@ font-weight: bold; `; //게임 시작 후 결과화면 function Result({ winner }) { + const { name, img } = winner; return (react_1.default.createElement(ResultContainer, null, react_1.default.createElement(Winner, null, "\uC6B0\uC2B9\uC790!"), - react_1.default.createElement(WinnerName, null, winner.name), - react_1.default.createElement(WinnerImg, { src: winner.img, alt: "\uC6B0\uC2B9\uC790" }), + react_1.default.createElement(WinnerName, null, name), + react_1.default.createElement(WinnerImg, { src: img, alt: "\uC6B0\uC2B9\uC790" }), react_1.default.createElement(CrownImg, { src: ___png_1.default, alt: "\uC655\uAD00" }), react_1.default.createElement(ButtonContainer, null, react_1.default.createElement(StyledButton, { color: "#FFA500", onClick: () => { window.location.reload(); } }, "\uB2E4\uC2DC\uD558\uAE30"), diff --git a/dist/pages/Result.js.map b/dist/pages/Result.js.map index d6a2bcf..f1d78e3 100644 --- a/dist/pages/Result.js.map +++ b/dist/pages/Result.js.map @@ -1 +1 @@ -{"version":3,"file":"Result.js","sourceRoot":"","sources":["../../src/pages/Result.tsx"],"names":[],"mappings":";;;;;AAAA,kDAA0B;AAC1B,0EAAuC;AACvC,qEAA+B;AAE/B,MAAM,eAAe,GAAG,2BAAM,CAAC,GAAG,CAAA;;;;;;;;;;CAUjC,CAAC;AACF,MAAM,QAAQ,GAAG,2BAAM,CAAC,GAAG,CAAA;;;;CAI1B,CAAC;AACF,MAAM,SAAS,GAAG,2BAAM,CAAC,GAAG,CAAA;;;;CAI3B,CAAC;AACF,MAAM,YAAY,GAAG,2BAAM,CAAC,MAAM,CAAqB;;;;;;;gBAOvC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,IAAI,OAAO;CAChD,CAAC;AACF,MAAM,eAAe,GAAG,2BAAM,CAAC,GAAG,CAAA;;;;CAIjC,CAAC;AACF,MAAM,MAAM,GAAC,2BAAM,CAAC,CAAC,CAAA;;CAEpB,CAAC;AACF,MAAM,UAAU,GAAC,2BAAM,CAAC,EAAE,CAAA;;;CAGzB,CAAC;AAIF,cAAc;AACd,SAAS,MAAM,CAAE,EAAE,MAAM,EAAgB;IACvC,OAAO,CACL,8BAAC,eAAe;QACd,8BAAC,MAAM,8BAAc;QACrB,8BAAC,UAAU,QAAE,MAAM,CAAC,IAAI,CAAc;QACtC,8BAAC,SAAS,IAAC,GAAG,EAAE,MAAM,CAAC,GAAG,EAAE,GAAG,EAAC,oBAAK,GAAG;QACxC,8BAAC,QAAQ,IAAC,GAAG,EAAE,gBAAE,EAAE,GAAG,EAAC,cAAI,GAAG;QAC9B,8BAAC,eAAe;YACd,8BAAC,YAAY,IAAC,KAAK,EAAC,SAAS,EAAC,OAAO,EAAE,GAAE,EAAE,GAAE,MAAM,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAC,CAAA,CAAC,+BAAqB;YAC5F,8BAAC,YAAY,IAAC,KAAK,EAAC,SAAS,+BAAoB,CACjC,CACF,CACnB,CAAC;AACJ,CAAC;AACD,kBAAe,MAAM,CAAC"} \ No newline at end of file +{"version":3,"file":"Result.js","sourceRoot":"","sources":["../../src/pages/Result.tsx"],"names":[],"mappings":";;;;;AAAA,kDAA0B;AAC1B,0EAAuC;AACvC,qEAA+B;AAE/B,MAAM,eAAe,GAAG,2BAAM,CAAC,GAAG,CAAA;;;;;;;;;;CAUjC,CAAC;AACF,MAAM,QAAQ,GAAG,2BAAM,CAAC,GAAG,CAAA;;;;CAI1B,CAAC;AACF,MAAM,SAAS,GAAG,2BAAM,CAAC,GAAG,CAAA;;;;CAI3B,CAAC;AACF,MAAM,YAAY,GAAG,2BAAM,CAAC,MAAM,CAAqB;;;;;;;gBAOvC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,IAAI,OAAO;CAChD,CAAC;AACF,MAAM,eAAe,GAAG,2BAAM,CAAC,GAAG,CAAA;;;;CAIjC,CAAC;AACF,MAAM,MAAM,GAAC,2BAAM,CAAC,CAAC,CAAA;;CAEpB,CAAC;AACF,MAAM,UAAU,GAAC,2BAAM,CAAC,EAAE,CAAA;;;CAGzB,CAAC;AAIF,cAAc;AACd,SAAS,MAAM,CAAE,EAAE,MAAM,EAAgB;IACvC,MAAM,EAAC,IAAI,EAAE,GAAG,EAAC,GAAC,MAAM,CAAC;IACzB,OAAO,CACL,8BAAC,eAAe;QACd,8BAAC,MAAM,8BAAc;QACrB,8BAAC,UAAU,QAAE,IAAI,CAAc;QAC/B,8BAAC,SAAS,IAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAC,oBAAK,GAAG;QACjC,8BAAC,QAAQ,IAAC,GAAG,EAAE,gBAAE,EAAE,GAAG,EAAC,cAAI,GAAG;QAC9B,8BAAC,eAAe;YACd,8BAAC,YAAY,IAAC,KAAK,EAAC,SAAS,EAAC,OAAO,EAAE,GAAE,EAAE,GAAE,MAAM,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAC,CAAA,CAAC,+BAAqB;YAC5F,8BAAC,YAAY,IAAC,KAAK,EAAC,SAAS,+BAAoB,CACjC,CACF,CACnB,CAAC;AACJ,CAAC;AACD,kBAAe,MAAM,CAAC"} \ No newline at end of file diff --git a/dist/components/GlobalStyle.js b/dist/style/GlobalStyle.js similarity index 100% rename from dist/components/GlobalStyle.js rename to dist/style/GlobalStyle.js diff --git a/dist/style/GlobalStyle.js.map b/dist/style/GlobalStyle.js.map new file mode 100644 index 0000000..f5afa39 --- /dev/null +++ b/dist/style/GlobalStyle.js.map @@ -0,0 +1 @@ +{"version":3,"file":"GlobalStyle.js","sourceRoot":"","sources":["../../src/style/GlobalStyle.tsx"],"names":[],"mappings":";;;;;AAAA,yDAAsD;AACtD,gEAAiC;AACjC,SAAS;AACT,MAAM,WAAW,GAAG,IAAA,qCAAiB,EAAA;EACnC,sBAAK;;;;;;;;;;;;;;;;;CAiBN,CAAC;AAEF,kBAAe,WAAW,CAAC"} \ No newline at end of file diff --git a/dist/types/type.js b/dist/types/type.js new file mode 100644 index 0000000..cd671e5 --- /dev/null +++ b/dist/types/type.js @@ -0,0 +1,3 @@ +"use strict"; +Object.defineProperty(exports, "__esModule", { value: true }); +//# sourceMappingURL=type.js.map \ No newline at end of file diff --git a/dist/types/type.js.map b/dist/types/type.js.map new file mode 100644 index 0000000..4f8f898 --- /dev/null +++ b/dist/types/type.js.map @@ -0,0 +1 @@ +{"version":3,"file":"type.js","sourceRoot":"","sources":["../../src/types/type.ts"],"names":[],"mappings":""} \ No newline at end of file diff --git a/src/App.tsx b/src/App.tsx index 604cac2..8efa617 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,7 +1,6 @@ import "./App.css"; import Game from './pages/Game'; -import Result from './pages/Result'; -import GlobalStyle from './components/GlobalStyle'; +import GlobalStyle from './style/GlobalStyle'; import React from 'react'; function App() { diff --git a/src/components/GameImg.tsx b/src/components/GameImg.tsx index 3ffc1f7..9b5762b 100644 --- a/src/components/GameImg.tsx +++ b/src/components/GameImg.tsx @@ -1,5 +1,5 @@ import React from "react"; -import { useState, useEffect, useRef } from "react"; +import { ImgProperty } from '../types/type'; import styled from "styled-components"; const ImgContainer = styled.div` @@ -26,13 +26,9 @@ const Desc = styled.h1` color: white; text-shadow: 3px 3px 3px black; //글자 잘 안 보여서 shadow 설정 `; -interface Img{ - src:string; - title:string; - onClick:React.MouseEventHandler; -} + //게임에 사용되는 이미지 컴포넌트 -function GameImg({ src, title, onClick }:Img) { +function GameImg({ src, title, onClick }:ImgProperty) { //src: 이미지 , name: 사진에 대한 이름, onCLick: 온클릭 함수 return ( diff --git a/src/pages/Game.tsx b/src/pages/Game.tsx index c3f2aac..aae20b6 100644 --- a/src/pages/Game.tsx +++ b/src/pages/Game.tsx @@ -7,6 +7,7 @@ import 외계인 from "../img/엄마는외계인.png"; import 초코남숲 from "../img/초코나무숲.png"; import GameImg from "../components/GameImg"; import Result from "./Result"; +import { Icecream } from '../types/type'; const Main = styled.div` display: flex; flex-direction: column; @@ -37,10 +38,7 @@ const Versus = styled.h1` font-weight: 500; text-shadow: 3px 3px 3px #ffa500; //글자 잘 안 보여서 shadow 설정 `; -export interface Icecream{ - img:string; - name:string; -} + const selectArr:Icecream[] = [ { img: 민초, diff --git a/src/pages/Result.tsx b/src/pages/Result.tsx index 28f22c4..1920c49 100644 --- a/src/pages/Result.tsx +++ b/src/pages/Result.tsx @@ -1,7 +1,7 @@ import React from "react"; import styled from "styled-components"; import 왕관 from "../img/왕관.png"; -import { Icecream } from './Game'; +import { Icecream } from '../types/type'; const ResultContainer = styled.div` width: 100vw; height: 100vh; @@ -49,11 +49,12 @@ interface IcecreamProps{ } //게임 시작 후 결과화면 function Result( { winner} :IcecreamProps) { + const {name, img}=winner; return ( 우승자! - {winner.name} - + {name} + { window.location.reload();}}>다시하기 diff --git a/src/components/GlobalStyle.tsx b/src/style/GlobalStyle.tsx similarity index 100% rename from src/components/GlobalStyle.tsx rename to src/style/GlobalStyle.tsx diff --git a/src/types/type.ts b/src/types/type.ts new file mode 100644 index 0000000..e3b73dd --- /dev/null +++ b/src/types/type.ts @@ -0,0 +1,10 @@ +export interface ImgProperty{ + src:string; + title:string; + onClick:React.MouseEventHandler; + } + + export interface Icecream{ + img:string; + name:string; + } \ No newline at end of file