[ 3주차 기본/심화/공유 과제 ] 재미있는 카드게임

week3_cardgame/cardgame/.eslintrc.cjs

@@ -0,0 +1,25 @@
+module.exports = {
+    plugins: ['react', 'prettier'],
+    extends: [
+        'react-app',
+        'plugin:prettier/recommended',
+        'airbnb',
+        'plugin:import/errors',
+        'plugin:import/warnings',
+        'plugin:prettier/recommended',
+    ],
+    rules: {
+        'linebreak-style': 0,
+        'prettier/prettier': 0,
+        'import/extensions': 0,
+        'import/no-unresolved': 0,
+        'import/no-extraneous-dependencies': 0, // 테스트 또는 개발환경을 구성하는 파일에서는 devDependency 사용을 허용
+        'import/prefer-default-export': 0,
+        'react/prop-types': 0,
+        'react/jsx-filename-extension': [2, { extensions: ['.js', '.jsx', '.ts', '.tsx'] }],
+        'jsx-a11y/no-noninteractive-element-interactions': 0,
+        'eol-last': ['error', 'always'], // line의 가장 마지막 줄에는 개행 넣기
+        'simple-import-sort/imports': 'error', // import 정렬
+        'no-multi-spaces': 'error',
+    },
+};

week3_cardgame/cardgame/.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?

week3_cardgame/cardgame/.prettierrc

@@ -0,0 +1,9 @@
+{
+    "semi": true,
+    "tabWidth": 4,
+    "printWidth": 120,
+    "trailingComma": "all",
+    "bracketSameLine": true,
+    "singleQuote": true,
+    "endOfLine": "auto"
+}

week3_cardgame/cardgame/.stylelintrc

@@ -0,0 +1,96 @@
+{
+  "extends": ["stylelint-config-standard", "stylelint-config-styled-components"],
+  "plugins": ["stylelint-order"],
+  "customSyntax": "postcss-styled-syntax",
+  "overrides": [
+    {
+      "customSyntax": "@stylelint/postcss-css-in-js",
+      "files": ["**/*.ts"]
+    }
+  ],
+  "rules": {
+    "declaration-empty-line-before": [
+      "always",
+      {
+        "ignore": ["first-nested", "after-comment", "after-declaration", "inside-single-line-block"]
+      }
+    ],
+    "order/order": ["custom-properties", "declarations"],
+
+    "order/properties-order": [
+      {
+        "groupName": "Layout",
+        "emptyLineBefore": "always",
+        "noEmptyLineBetween": true,
+        "properties": [
+          "display",
+          "justify-content",
+          "align-items",
+          "flex-direction",
+          "flex-wrap",
+          "flex-flow",
+          "position",
+          "top",
+          "right",
+          "bottom",
+          "left",
+          "float",
+          "clear",
+          "visibility",
+          "overflow",
+          "z-index"
+        ]
+      },
+      {
+        "groupName": "Box",
+        "emptyLineBefore": "always",
+        "noEmptyLineBetween": true,
+        "properties": [
+          "width",
+          "height",
+          "margin",
+          "padding",
+          "padding-top",
+          "padding-right",
+          "padding-bottom",
+          "padding-left",
+          "margin-top",
+          "margin-right",
+          "margin-bottom",
+          "margin-left"
+        ]
+      },
+      {
+        "groupName": "Background",
+        "emptyLineBefore": "always",
+        "noEmptyLineBetween": true,
+        "properties": [
+          "border",
+          "background",
+          "background-color",
+          "color",
+          "font-style",
+          "font-weight",
+          "font-size",
+          "line-height",
+          "letter-spacing",
+          "text-align",
+          "text-indent",
+          "vertical-align"
+        ]
+      },
+      {
+        "groupName": "Text",
+        "emptyLineBefore": "always",
+        "noEmptyLineBetween": true,
+        "properties": ["text-decoration", "text-align", "vertical-align"]
+      },
+      {
+        "groupName": "ETC",
+        "emptyLineBefore": "always",
+        "noEmptyLineBetween": true,
+        "properties": ["white-space"]
+      }
+    ]
+  }
+}

week3_cardgame/cardgame/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="ko">
+    <head>
+        <meta charset="UTF-8" />
+        <link rel="icon" type="image/png" href="/logo.png" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Sugar Rush Player Match🍭</title>
+    </head>
+    <body>
+        <div id="root"></div>
+        <script type="module" src="/src/main.jsx"></script>
+    </body>
+</html>

week3_cardgame/cardgame/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "cardgame",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@emotion/is-prop-valid": "^1.2.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.23.0",
+    "styled-components": "^6.1.8"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.66",
+    "@types/react-dom": "^18.2.22",
+    "@vitejs/plugin-react-swc": "^3.5.0",
+    "eslint": "^8.57.0",
+    "eslint-plugin-react": "^7.34.1",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.6",
+    "vite": "^5.2.0"
+  }
+}

week3_cardgame/cardgame/src/App.jsx

@@ -0,0 +1,15 @@
+import Router from './Router';
+import { ThemeProvider } from 'styled-components';
+import { theme } from './style/theme';
+import { GlobalStyle } from './style/globalStyle';
+
+export default function App() {
+    return (
+        <>
+            <ThemeProvider theme={theme}>
+                <GlobalStyle />
+                <Router />
+            </ThemeProvider>
+        </>
+    );
+}

week3_cardgame/cardgame/src/Router.jsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
+import GamePage from './pages/GamePage';
+import styled from 'styled-components';
+
+export default function Router() {
+    return (
+        <>
+            <BrowserRouter>
+                <GlobalWrapper>
+                    <Routes>
+                        <Route path="/" element={<GamePage />} />
+                    </Routes>
+                </GlobalWrapper>
+            </BrowserRouter>
+        </>
+    );
+}
+
+const GlobalWrapper = styled.main`
+    margin: 0 auto;
+`;

week3_cardgame/cardgame/src/components/card/Card.jsx

@@ -0,0 +1,11 @@
+import React, { useState } from 'react';
+import * as C from './CardStyle';
+
+export default function Card(props) {
+    return (
+        <C.CardWrapper $isOpen={props.open}>
+            <C.FrontCard $img={props.img}></C.FrontCard>
+            <C.BackCard></C.BackCard>
+        </C.CardWrapper>
+    );
+}

week3_cardgame/cardgame/src/components/card/CardData.jsx

@@ -0,0 +1,22 @@
+import card1 from './../../assets/images/adora.png';
+import card2 from './../../assets/images/candlehead.png';
+import card3 from './../../assets/images/citrusella.png';
+import card4 from './../../assets/images/crumbelina.png';
+import card5 from './../../assets/images/vanellope.png';
+import card6 from './../../assets/images/jubileena.png';
+import card7 from './../../assets/images/rancis.png';
+import card8 from './../../assets/images/snowanna.png';
+import card9 from './../../assets/images/taffyta.png';
+
+const CARDLIST = [
+    { id: 1, img: card1 },
+    { id: 2, img: card2 },
+    { id: 3, img: card3 },
+    { id: 4, img: card4 },
+    { id: 5, img: card5 },
+    { id: 6, img: card6 },
+    { id: 7, img: card7 },
+    { id: 8, img: card8 },
+    { id: 9, img: card9 },
+];
+export default CARDLIST;

week3_cardgame/cardgame/src/components/card/CardHandler.jsx

@@ -0,0 +1,94 @@
+import React, { useEffect, useState } from 'react';
+import Card from './Card';
+import CARDLIST from './CardData';
+import styled from 'styled-components';
+
+export default function CardHandler({ level, updateScore, shuffle }) {
+    const [cards, setCards] = useState([]);
+    const [selectedCard, setSelectedCard] = useState(null); // 전에 선택한 카드
+    const [matchCards, setMatchCards] = useState([]); // 매칭된 카드들
+    const [openCards, setOpenCards] = useState([]); // 오픈된 카드들 (선택한 카드 + 매칭된 카드들)
+
+    // 랜덤 카드 뽑기
+    const getRandomElement = (arr) => {
+        console.log('getRandomElement');
+        let result = new Set();
+        while (result.size < level) {
+            const randomElement = arr[Math.floor(Math.random() * arr.length)];
+            result.add(randomElement);
+        }
+        return Array.from(result);
+    };
+
+    // 카드 쌍 만들기
+    const initialCards = () => {
+        const selectedCards = getRandomElement(CARDLIST);
+        const cardPairs = selectedCards.reduce(
+            (acc, card) => [
+                ...acc,
+                { ...card, id: card.id + 1000 }, // ID 충돌 방지
+                { ...card, id: card.id + 2000 }, // ID 충돌 방지
+            ],
+            [],
+        );
+        return cardPairs.sort(() => 0.5 - Math.random());
+    };
+
+    useEffect(() => {
+        setCards(initialCards());
+        setSelectedCard(null);
+        setMatchCards([]);
+        setOpenCards([]);
+    }, [level, shuffle]);
+
+    function chooseCard(e, id) {
+        e.stopPropagation();
+        // 매칭된 카드와 자기 자신은 선택 불가
+        if (!matchCards.includes(id) && id !== selectedCard) {
+            setOpenCards((prev) => [...prev, id]); // 카드 오픈
+            if (selectedCard == null) {
+                // 선택한 카드가 없을 때
+                setSelectedCard(id); // 선택한 카드에 추가
+            } else if (selectedCard % 1000 !== id % 1000) {
+                // 카드가 매칭되지 않을 때
+                setTimeout(() => {
+                    // 1초 지연
+                    setOpenCards(matchCards); // 선택 카드 다시 닫기
+                    setSelectedCard(null); // 선택한 카드 비우기
+                }, 500);
+            } else {
+                //카드가 매칭되었을 때
+                setMatchCards((prev) => {
+                    const newMatchCards = [...prev, id, selectedCard];
+                    setOpenCards(newMatchCards); // 매칭 반영 후 오픈 고정
+                    return newMatchCards;
+                });
+                setSelectedCard(null); //선택한 카드 비우기
+                updateScore((currentScore) => currentScore + 1);
+            }
+        }
+    }
+
+    return (
+        <CardContainer>
+            {cards.map((card, index) => (
+                <CardWrapper key={index} onClick={(e) => chooseCard(e, card.id)}>
+                    <Card img={card.img} open={openCards.includes(card.id)} />
+                </CardWrapper>
+            ))}
+        </CardContainer>
+    );
+}
+
+const CardContainer = styled.section`
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+`;
+
+const CardWrapper = styled.span`
+    display: inline-block;
+    margin: 1rem;
+    cursor: pointer;
+`;