GO-SOPT-WEB · borimong · May 4, 2023 · May 5, 2023 · May 5, 2023 · May 5, 2023
diff --git a/week3/cardMatchingGame/.gitignore b/week3/cardMatchingGame/.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/cardMatchingGame/index.html b/week3/cardMatchingGame/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="ko">
+ <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>카드 맞추기 게임</title>
+ </head>
+ <body>
+ <div id="root"></div>
+ <div id="modal-root"></div>
+ <script type="module" src="/src/main.jsx"></script>
+ </body>
+</html>
diff --git a/week3/cardMatchingGame/package.json b/week3/cardMatchingGame/package.json
@@ -0,0 +1,27 @@
+{
+ "name": "cardmatchinggame",
+ "private": true,
+ "version": "0.0.0",
+ "type": "module",
+ "scripts": {
+ "dev": "vite",
+ "build": "vite build",
+ "lint": "eslint src --ext js,jsx --report-unused-disable-directives --max-warnings 0",
+ "preview": "vite preview"
+ },
+ "dependencies": {
+ "react": "^18.2.0",
+ "react-dom": "^18.2.0",
+ "styled-components": "^5.3.10"
+ },
+ "devDependencies": {
+ "@types/react": "^18.0.28",
+ "@types/react-dom": "^18.0.11",
+ "@vitejs/plugin-react": "^4.0.0",
+ "eslint": "^8.38.0",
+ "eslint-plugin-react": "^7.32.2",
+ "eslint-plugin-react-hooks": "^4.6.0",
+ "eslint-plugin-react-refresh": "^0.3.4",
+ "vite": "^4.3.2"
+ }
+}
diff --git a/week3/cardMatchingGame/public/vite.svg b/week3/cardMatchingGame/public/vite.svg
diff --git a/week3/cardMatchingGame/src/App.jsx b/week3/cardMatchingGame/src/App.jsx
@@ -0,0 +1,61 @@
+import React, { useEffect } from "react";
+import styled, { ThemeProvider } from "styled-components";
+import GlobalStyle from "./styles/reset";
+import Cards from "./components/Cards";
+import theme from "./styles/theme";
+import Header from "./components/Header";
+import { useState } from "react";
+import Modal from "./components/Modal";
+
+export default function App() {
+ const [score, setScore] = useState(0);
+ const [level, setLevel] = useState("EASY");
+ const [resetClicked, setResetClicked] = useState(false);
+ const [showModal, setShowModal] = useState(false);
+
+ const levels = {
+ EASY: 5,
+ NORMAL: 7,
+ HARD: 9,
+ };
+ const changeLevel = (level) => {
+ setLevel(level);
+ };
+ const changeScore = (score) => {
+ setScore(score);
+ };
+ const changeResetClicked = () => {
+ setResetClicked(!resetClicked);
+ };
+
+ const handleClose = () => {
+ setShowModal(false);
+ };
+
+ useEffect(() => {
+ if(score === levels[level]){
+ setShowModal(true)
+ }
+ }, [score]);
+
+ return (
+ <ThemeProvider theme={theme}>
+ <GlobalStyle />
+ <Header
+ changeLevel={changeLevel}
+ levels={levels}
+ level={level}
+ score={score}
+ changeResetClicked={changeResetClicked}
+ />
+ <Cards
+ levels={levels}
+ level={level}
+ score={score}
+ changeScore={changeScore}
+ resetClicked={resetClicked}
+ />
+ <Modal isOpen={showModal} onClose={handleClose} />
+ </ThemeProvider>
+ );
+}
diff --git a/week3/cardMatchingGame/src/ModalProtal.jsx b/week3/cardMatchingGame/src/ModalProtal.jsx
@@ -0,0 +1,18 @@
+import React from "react";
+import ReactDOM from "react-dom";
+
+const ModalPortal = ({ children }) => {
+ const modalRoot = document.getElementById("modal-root");
+ const el = document.createElement("div");
+
+ React.useEffect(() => {
+ modalRoot.appendChild(el);
+ return () => {
+ modalRoot.removeChild(el);
+ };
+ }, [modalRoot, el]);
+
+ return ReactDOM.createPortal(children, el);
+};
+
+export default ModalPortal;
diff --git a/week3/cardMatchingGame/src/assets/backCardImg.jpg b/week3/cardMatchingGame/src/assets/backCardImg.jpg
diff --git a/week3/cardMatchingGame/src/assets/data.js b/week3/cardMatchingGame/src/assets/data.js
@@ -0,0 +1,74 @@
+export const data = [
+ {
+ id: 0,
+ cardImg: "https://tenor.com/ko/view/춘식-춘식이-chunsik-gif-24452854.gif",
+ },
+ {
+ id: 1,
+ cardImg: "https://tenor.com/ko/view/춘식-춘식이-chunsik-gif-24452854.gif",
+ },
+ {
+ id: 2,
+ cardImg: "https://tenor.com/ko/view/chunsik-춘식-춘식이-gif-24725088.gif",
+ },
+ {
+ id: 3,
+ cardImg: "https://tenor.com/ko/view/chunsik-춘식-춘식이-gif-24725088.gif",
+ },
+ {
+ id: 4,
+ cardImg: "https://tenor.com/ko/view/춘식-춘식이-chunsik-gif-24725094.gif",
+ },
+ {
+ id: 5,
+ cardImg: "https://tenor.com/ko/view/춘식-춘식이-chunsik-gif-24725094.gif",
+ },
+ {
+ id: 6,
+ cardImg: "https://tenor.com/ko/view/chunsik-춘식-춘식이-gif-24452956.gif",
+ },
+ {
+ id: 7,
+ cardImg: "https://tenor.com/ko/view/chunsik-춘식-춘식이-gif-24452956.gif",
+ },
+ {
+ id: 8,
+ cardImg: "https://tenor.com/ko/view/춘식-춘식이-chunsik-gif-24452902.gif",
+ },
+ {
+ id: 9,
+ cardImg: "https://tenor.com/ko/view/춘식-춘식이-chunsik-gif-24452902.gif",
+ },
+ {
+ id: 10,
+ cardImg: "https://tenor.com/ko/view/춘식이-춘식-chunsik-gif-24691909.gif",
+ },
+ {
+ id: 11,
+ cardImg: "https://tenor.com/ko/view/춘식이-춘식-chunsik-gif-24691909.gif",
+ },
+ {
+ id: 12,
+ cardImg: "https://tenor.com/ko/view/춘식이-춘식-chunsik-gif-24452916.gif",
+ },
+ {
+ id: 13,
+ cardImg: "https://tenor.com/ko/view/춘식이-춘식-chunsik-gif-24452916.gif",
+ },
+ {
+ id: 14,
+ cardImg: "https://tenor.com/ko/view/춘식-춘식이-chunsik-gif-24452897.gif",
+ },
+ {
+ id: 15,
+ cardImg: "https://tenor.com/ko/view/춘식-춘식이-chunsik-gif-24452897.gif",
+ },
+ {
+ id: 16,
+ cardImg: "https://tenor.com/ko/view/춘식-춘식이-chunsik-gif-24691897.gif",
+ },
+ {
+ id: 17,
+ cardImg: "https://tenor.com/ko/view/춘식-춘식이-chunsik-gif-24691897.gif",
+ },
+]
diff --git a/week3/cardMatchingGame/src/components/Cards.jsx b/week3/cardMatchingGame/src/components/Cards.jsx
@@ -0,0 +1,125 @@
+import React, { useEffect, useState, useMemo } from "react";
+import { data } from "../assets/data";
+import styled from "styled-components";
+import theme from "../styles/theme";
+import backCardImg from "../assets/backCardImg.jpg";
+
+export default function Cards(props) {
+ const { levels, level, score, changeScore, resetClicked } = props;
+ const [cards, setCards] = useState([]);
+ const [clickedCards, setClickedCards] = useState([]);
+ const [matchedCards, setMatchedCards] = useState([]);
+
+ //쌍을 유지하면서 순서 섞기
+ function shufflePairs(arr) {
+ const pairs = [];
+ for (let i = 0; i < arr.length; i += 2) {
+ pairs.push([arr[i], arr[i + 1]]);
+ }
+ for (let i = pairs.length - 1; i > 0; i--) {
+ const j = Math.floor(Math.random() * (i + 1));
+ [pairs[i], pairs[j]] = [pairs[j], pairs[i]];
+ }
+ const shuffled = pairs.flatMap((pair) => pair);
+ return shuffled;
+ }
+
+ //카드 클릭 시, clickedCards 배열에 카드 id 추가
+ const handleCardClick = (cardId) => {
+ //clickedCards 최대 길이 2로 제한
+ if (clickedCards.length < 2) {
+ setClickedCards((prev) => [...prev, cardId]);
+ }
+ };
+
+ //레벨에 따라 카드 랜덤하게 선택하고 랜덤하게 배열
+ useEffect(() => {
+ setCards(
+ shufflePairs(data)
+ .slice(0, levels[level] * 2)
+ .sort(() => Math.random() - 0.5)
+ );
+ }, [level]);
+
+ //클릭된 카드가 서로 같은 카드인지 체크하고, 같은 카드이면 matchedCards 배열에 저장
+ useEffect(() => {
+ //클릭된 카드가 2개 미만이거나 같은 카드를 연속 클릭 시 조기 리턴
+ if (clickedCards.length < 2) {
+ return;
+ }
+
+ const [card1, card2] = clickedCards;
+ if (card1 === card2) {
+ clickedCards.splice(1, 1);
+ return;
+ }
+
+ if (data[card1].cardImg === data[card2].cardImg) {
+ if (!matchedCards.includes(card1) && card1 !== card2) {
+ changeScore(score + 1);
+ }
+ setMatchedCards((prev) => [...prev, card1, card2]);
+ setTimeout(() => setClickedCards([]), 1000); 
+ } else {
+ setTimeout(() => setClickedCards([]), 1000);
+ }
+ }, [clickedCards]);
+
+ //게임 도중에 레벨을 바꾸면 진행 상황 초기화
+ useEffect(() => {
+ changeScore(0);
+ setClickedCards([]);
+ setMatchedCards([]);
+ }, [level, resetClicked]);
+
+ return (
+ <CardsContainer>
+ {cards.map((item) => (
+ <Card
+ key={item.id}
+ id={item.id}
+ cardImg={item.cardImg}
+ onClick={() => handleCardClick(item.id)}
+ matchedCards={matchedCards.includes(item.id) ? true : false}
+ clickedCards={clickedCards.includes(item.id) ? true : false}
+ />
+ ))}
+ </CardsContainer>
+ );
+}
+
+const CardsContainer = styled.div`
+ display: flex;
+ flex-wrap: wrap;
+ background-color: ${theme.colors.lightYellow};
+ & > div {
+ & > img {
+ width: 25rem;
+ height: 25rem;
+ }
+ }
+`;
+
+const Card = styled.div`
+ background-image: url(${(props) =>
+ props.matchedCards
+ ? props.cardImg
+ : props.clickedCards
+ ? props.cardImg
+ : backCardImg});
+ width: 20rem;
+ height: 20rem;
+ background-size: cover;
+ background-position: center;
+ cursor: pointer;
+ margin: 6rem;
+ transform-style: preserve-3d;
+ transition: transform 0.6s ease-in-out;
+ transform: ${(props) =>
+ props.matchedCards
+ ? "rotateY(360deg)"
+ : props.clickedCards
+ ? "rotateY(360deg)" // card1
+ : "rotateY(0deg)"}; // card2
+ backface-visibility: ${(props) => props.cardImg};
+`;