GO-SOPT-WEB · Arooming · Apr 26, 2023 · Apr 26, 2023 · Apr 26, 2023 · Apr 26, 2023
diff --git a/week3/.eslintrc.cjs b/week3/.eslintrc.cjs
@@ -0,0 +1,15 @@
+module.exports = {
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:react/recommended',
+    'plugin:react/jsx-runtime',
+    'plugin:react-hooks/recommended',
+  ],
+  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
+  settings: { react: { version: '18.2' } },
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': 'warn',
+  },
+}
diff --git a/week3/.gitignore b/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/index.html b/week3/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link
+      rel="icon"
+      type="image/svg+xml"
+      href="https://item.kakaocdn.net/do/cc744df91dd6ecf377d4584e79dd0e31b3a18fdf58bc66ec3f4b6084b7d0b570"
+    />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>쵸키푸키를 찾아랏🐾</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <div id="modal"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
diff --git a/week3/package.json b/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 src --ext js,jsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "prop-types": "^15.8.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "style-components": "^0.1.0"
+  },
+  "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/public/vite.svg b/week3/public/vite.svg
diff --git a/week3/src/App.jsx b/week3/src/App.jsx
@@ -0,0 +1,17 @@
+import { ThemeProvider } from "styled-components";
+import theme from "./styles/theme";
+import { GlobalStyle } from "./styles/GlobalStyle";
+import Header from "./components/Header";
+import Button from "./components/Button";
+
+function App() {
+  return (
+    <ThemeProvider theme={theme}>
+      <GlobalStyle />
+      <Header />
+      <Button />
+    </ThemeProvider>
+  );
+}
+
+export default App;
diff --git a/week3/src/assets/cover.png b/week3/src/assets/cover.png
diff --git a/week3/src/assets/img_1.gif b/week3/src/assets/img_1.gif
diff --git a/week3/src/assets/img_2.gif b/week3/src/assets/img_2.gif
diff --git a/week3/src/assets/img_3.gif b/week3/src/assets/img_3.gif
diff --git a/week3/src/assets/img_4.gif b/week3/src/assets/img_4.gif
diff --git a/week3/src/assets/img_5.gif b/week3/src/assets/img_5.gif
diff --git a/week3/src/assets/img_6.gif b/week3/src/assets/img_6.gif
diff --git a/week3/src/assets/img_7.gif b/week3/src/assets/img_7.gif
diff --git a/week3/src/assets/img_8.gif b/week3/src/assets/img_8.gif
diff --git a/week3/src/assets/img_9.gif b/week3/src/assets/img_9.gif
diff --git a/week3/src/components/Button.jsx b/week3/src/components/Button.jsx
@@ -0,0 +1,121 @@
+import { useEffect, useState } from "react";
+import styled from "styled-components";
+import {
+  easyCardList,
+  normalCardList,
+  hardCardList,
+} from "../constants/cardImgList";
+import CommonPage from "./CommonPage";
+
+const Button = () => {
+  const levelData = ["EASY", "NORMAL", "HARD"];
+  // 기본 난이도 'EASY'로 설정
+  const [level, setLevel] = useState(0);
+  const [cardList, setCardList] = useState(easyCardList);
+  const [shuffle, setShuffle] = useState(0);
+
+  useEffect(() => {
+    switch (level) {
+      case 0:
+        setCardList(easyCardList);
+        break;
+
+      case 1:
+        setCardList(normalCardList);
+        break;
+
+      case 2:
+        setCardList(hardCardList);
+        break;
+
+      default:
+        break;
+    }
+  }, [level, shuffle]);
+
+  return (
+    <>
+      <ResetButton
+        type="button"
+        onClick={() => {
+          setShuffle((prev) => prev + 1);
+        }}
+      >
+        RESET
+      </ResetButton>
+
+      <LevelBtnContainer>
+        {levelData.map((data, idx) => {
+          return (
+            <LevelButton
+              key={idx}
+              type="button"
+              isClick={idx === level}
+              onClick={() => {
+                setLevel(idx);
+              }}
+            >
+              {data}
+            </LevelButton>
+          );
+        })}
+      </LevelBtnContainer>
+
+      {<CommonPage cardList={cardList} />}
+    </>
+  );
+};
+
+export default Button;
+
+const ResetButton = styled.button`
+  display: flex;
+  justify-content: center;
+  position: absolute;
+  z-index: 1;
+  top: 2rem;
+  right: 0;
+  width: 7rem;
+  margin: 1rem;
+  padding: 1.5rem 1rem;
+  border: 0;
+  border-radius: 1rem;
+  box-shadow: 0.3rem 0.3rem 0.3rem ${({ theme }) => theme.colors.lightGreen};
+  background-color: ${({ theme }) => theme.colors.darkGreen};
+  color: ${({ theme }) => theme.colors.white};
+
+  &:hover {
+    background-color: ${({ theme }) => theme.colors.white};
+    color: ${({ theme }) => theme.colors.darkGreen};
+  }
+
+  font-family: ${({ theme }) => theme.font.buttonFont};
+  font-size: 1.5rem;
+`;
+
+const LevelBtnContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  top: 13rem;
+  left: 0;
+  right: 0;
+`;
+
+const LevelButton = styled.button`
+  margin: 0 1rem;
+  padding: 1rem 1.5rem;
+  box-shadow: 0.3rem 0.3rem 0.3rem ${({ theme }) => theme.colors.purple};
+  border: 0;
+  border-radius: 1rem;
+
+  background-color: ${({ theme, isClick }) =>
+    isClick ? theme.colors.purple : theme.colors.lightPink};
+
+  color: ${({ theme, isClick }) =>
+    isClick ? theme.colors.lightPink : theme.colors.purple};
+
+  font-family: ${({ theme }) => theme.font.buttonFont};
+  font-size: 1.3rem;
+`;
diff --git a/week3/src/components/CommonPage.jsx b/week3/src/components/CommonPage.jsx
@@ -0,0 +1,105 @@
+import styled from "styled-components";
+import { useEffect, useState, useMemo } from "react";
+import SingleCard from "./SingleCard";
+import Header from "./Header";
+import Modal from "./Modal";
+import ModalPortal from "./ModalPortal";
+
+const CommonPage = (cardList) => {
+  const [choiceOne, setChoiceOne] = useState(null);
+  const [choiceTwo, setChoiceTwo] = useState(null);
-  const [choiceOne, setChoiceOne] = useState(null);
-  const [choiceTwo, setChoiceTwo] = useState(null);
+  const [choices, setChoices] = useState([]);
-  const [choiceOne, setChoiceOne] = useState(null);
-  const [choiceTwo, setChoiceTwo] = useState(null);
+  const [choices, setChoices] = useState([]);
+  const [counter, setCounter] = useState(0);
+  const [modalOn, setModalOn] = useState(false);
+  const [disabled, setDisabled] = useState(false);
+
+  const flippedCard = document.getElementsByClassName("flipped");
+
+  // useMemo() 활용하여 cardList가 변경되지 않을 경우, 이전 값을 재사용하도록 구현
+  const copiedCardList = useMemo(() => {
+    setCounter(0);
+    // JSON.parse(JSON.stringify(obj)): 깊은 복사
+    const copied = JSON.parse(
+      JSON.stringify(
+        // Object.keys(): 객체를 문자열 배열로 변환
+        Object.keys(cardList)
+          .map((item) => cardList[item])
+          // flat(): 하나의 배열로 만들고자 사용
+          .flat()
+      )
+    );
+    // 카드 선택을 하다가 중간에 reset 버튼이나 레벨 선택을 다시 하면 이전에 저장되어 있던 카드 선택 정보 모두 삭제
+    copied.map((it) => (it.matched = false));
+
+    return copied.sort(() => Math.random() - 0.5);
+  }, [cardList]);
+
+  // 값이 null이 아니면 이미 해당 값은 선택되어 있다는 것
+  const handleChoice = (card) => {
+    choiceOne ? setChoiceTwo(card) : setChoiceOne(card);
+  };
+
+  useEffect(() => {
+    if (choiceOne && choiceTwo) {
+      // 두 개의 카드가 같은지 확인하는 동안 다른 카드 선택 불가
+      setDisabled(true);
+
+      if (choiceOne.name === choiceTwo.name) {
+        setChoiceOne((choiceOne.matched = true));
+        setChoiceTwo((choiceTwo.matched = true));
+        setCounter((prev) => prev + 1);
+        resetTurn();
+
+        flippedCard.length === copiedCardList.length
+          ? setModalOn(true)
+          : setModalOn(false);
-        flippedCard.length === copiedCardList.length
-          ? setModalOn(true)
-          : setModalOn(false);
+    setModalOn(flippedCard.length === copiedCardList.length);
-        flippedCard.length === copiedCardList.length
-          ? setModalOn(true)
-          : setModalOn(false);
+    setModalOn(flippedCard.length === copiedCardList.length);
+      } else {
+        setTimeout(() => resetTurn(), 1000);
+      }
+    }
+  }, [choiceOne, choiceTwo, flippedCard, copiedCardList]);
+
+  // 두 개의 카드가 선택된 후, 각 카드 정보 초기화
+  const resetTurn = () => {
+    setChoiceOne(null);
+    setChoiceTwo(null);
+
+    // 검사가 끝나면 다른 카드 선택 가능
+    setDisabled(false);
+  };
+
+  return (
+    <>
+      <Header counter={counter} length={copiedCardList.length / 2} />
+      <CardContainer>
+        {copiedCardList.map((data, idx) => {
+          return (
+            <SingleCard
+              key={idx}
+              data={data}
+              handleChoice={handleChoice}
+              flipped={data === choiceOne || data === choiceTwo || data.matched}
+              disabled={disabled}
+            />
+          );
+        })}
+      </CardContainer>
+
+      {modalOn && (
+        <ModalPortal>
+          <Modal onClose={() => setModalOn(false)} />
+        </ModalPortal>
+      )}
+    </>
+  );
+};
+
+export default CommonPage;
+
+const CardContainer = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+
+  margin: 20rem 7rem 0rem;
+`;