GO-SOPT-WEB · urjimyu · Jun 9, 2023 · Jun 9, 2023 · Jun 9, 2023 · Jun 9, 2023
diff --git a/.DS_Store b/.DS_Store
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,6 @@
+
+todo/.DS_Store
+
+cardgame/src/.DS_Store
+
+.DS_Store
diff --git a/week3-ts/cardGameTS/.eslintrc.cjs b/week3-ts/cardGameTS/.eslintrc.cjs
@@ -0,0 +1,14 @@
+module.exports = {
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  parser: '@typescript-eslint/parser',
+  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': 'warn',
+  },
+}
diff --git a/week3-ts/cardGameTS/.gitignore b/week3-ts/cardGameTS/.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-ts/cardGameTS/index.html b/week3-ts/cardGameTS/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>토심아 어딨니</title>
+	</head>
+	<body>
+		<div id="root"></div>
+		<script type="module" src="/src/main.tsx"></script>
+	</body>
+</html>
diff --git a/week3-ts/cardGameTS/package.json b/week3-ts/cardGameTS/package.json
@@ -0,0 +1,31 @@
+{
+  "name": "cardgamets",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.12.1",
+    "recoil": "^0.7.7",
+    "styled-components": "^6.0.0-rc.3"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.37",
+    "@types/react-dom": "^18.0.11",
+    "@typescript-eslint/eslint-plugin": "^5.59.0",
+    "@typescript-eslint/parser": "^5.59.0",
+    "@vitejs/plugin-react": "^4.0.0",
+    "eslint": "^8.38.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.3.4",
+    "typescript": "^5.0.2",
+    "vite": "^4.3.9"
+  }
+}
diff --git a/week3-ts/cardGameTS/public/vite.svg b/week3-ts/cardGameTS/public/vite.svg
diff --git a/week3-ts/cardGameTS/src/App.tsx b/week3-ts/cardGameTS/src/App.tsx
@@ -0,0 +1,22 @@
+import React from "react";
+import { BrowserRouter, Routes, Route } from "react-router-dom";
+import GlobalStyle from "./styles/GlobalStyle";
+import { theme } from "./styles/theme";
+import { ThemeProvider } from "styled-components";
+
+import MainPage from "./pages/MainPage";
+
+function App() {
+	return (
+		<ThemeProvider theme={theme}>
+			<GlobalStyle />
+			<BrowserRouter>
+				<Routes>
+					<Route path="/" element={<MainPage />} />
+				</Routes>
+			</BrowserRouter>
+		</ThemeProvider>
+	);
+}
+
+export default App;
diff --git a/week3-ts/cardGameTS/src/assets/images/TOSIM.ts b/week3-ts/cardGameTS/src/assets/images/TOSIM.ts
@@ -0,0 +1,74 @@
+const TOSIM = [
+	{
+		id: 1,
+		alt: "사랑-토심",
+		src: "https://item.kakaocdn.net/do/3247f87329f1a29e692a5f3e39c2c82382f3bd8c9735553d03f6f982e10ebe70",
+		flipped: false,
+		correct: false,
+	},
+	{
+		id: 2,
+		alt: "조아합니다-토심",
+		src: "https://item.kakaocdn.net/do/3247f87329f1a29e692a5f3e39c2c8234022de826f725e10df604bf1b9725cfd",
+		flipped: false,
+		correct: false,
+	},
+	{
+		id: 3,
+		alt: "리듬-토심",
+		src: "https://item.kakaocdn.net/do/3247f87329f1a29e692a5f3e39c2c82341d1a2caccd0c566eab28b91e2e5d306",
+		flipped: false,
+		correct: false,
+	},
+	{
+		id: 4,
+		alt: "볼살-토심",
+		src: "https://item.kakaocdn.net/do/9c67797af35b26ee079c69b8d3c748648f324a0b9c48f77dbce3a43bd11ce785",
+		flipped: false,
+		correct: false,
+	},
+	{
+		id: 5,
+		alt: "하트-토심",
+		src: "https://item.kakaocdn.net/do/9c67797af35b26ee079c69b8d3c748649f17e489affba0627eb1eb39695f93dd",
+		flipped: false,
+		correct: false,
+	},
+	{
+		id: 6,
+		alt: "열창-토심",
+		src: "https://item.kakaocdn.net/do/9c67797af35b26ee079c69b8d3c748644022de826f725e10df604bf1b9725cfd",
+		flipped: false,
+		correct: false,
+	},
+	{
+		id: 7,
+		alt: "응원-토심",
+		src: "https://item.kakaocdn.net/do/9c67797af35b26ee079c69b8d3c74864a88f7b2cbb72be0bdfff91ad65b168ab",
+		flipped: false,
+		correct: false,
+	},
+	{
+		id: 8,
+		alt: "치킨-토심",
+		src: "https://item.kakaocdn.net/do/9c67797af35b26ee079c69b8d3c74864ac8e738cb631e72fdb9a96b36413984e",
+		flipped: false,
+		correct: false,
+	},
+	{
+		id: 9,
+		alt: "휴식-토심",
+		src: "https://item.kakaocdn.net/do/9c67797af35b26ee079c69b8d3c74864960f4ab09fe6e38bae8c63030c9b37f9",
+		flipped: false,
+		correct: false,
+	},
+	{
+		id: 10,
+		alt: "뽀뽀-토심",
+		src: "https://item.kakaocdn.net/do/9c67797af35b26ee079c69b8d3c74864effd194bae87d73dd00522794070855d",
+		flipped: false,
+		correct: false,
+	},
+];
+
+export default TOSIM;
diff --git a/week3-ts/cardGameTS/src/assets/images/index.tsx b/week3-ts/cardGameTS/src/assets/images/index.tsx
@@ -0,0 +1 @@
+export { default as tosim_background } from "./tosim_background.jpg";
diff --git a/week3-ts/cardGameTS/src/assets/images/tosim_background.jpg b/week3-ts/cardGameTS/src/assets/images/tosim_background.jpg
diff --git a/week3-ts/cardGameTS/src/assets/react.svg b/week3-ts/cardGameTS/src/assets/react.svg
diff --git a/week3-ts/cardGameTS/src/components/common/Button/index.tsx b/week3-ts/cardGameTS/src/components/common/Button/index.tsx
@@ -0,0 +1,17 @@
+import styled from "styled-components";
+import { theme } from "../../../styles/theme";
+
+const Button = styled.button`
+	width: 15%;
+	padding: 15px 0;
+
+	background-color: ${theme.colors.white_300};
+	color: ${theme.colors.pink_300};
+	font-family: "UhBeeJJIBBABBA";
+
+	border-radius: 20px;
+	box-shadow: ${({ theme }) => theme.shadow.type_1};
+	font-weight: 500;
+`;
+
+export default Button;
diff --git a/week3-ts/cardGameTS/src/components/common/Card/index.tsx b/week3-ts/cardGameTS/src/components/common/Card/index.tsx
@@ -0,0 +1,113 @@
+import Button from "../Button";
+import * as Styled from "./style";
+import { tosim_background } from "../../../assets/images";
+import TOSIM from "../../../assets/images/TOSIM";
+import { useEffect, useState } from "react";
+import { useRecoilState } from "recoil";
+import { LevelState, ScoreState } from "../../../recoil/atom";
+
+//버튼에 맞는 카드 개수 띄워주는 함수(개수 + 랜덤 지정)
+const EASY = 10;
+const NORMAL = 14;
+const HARD = 18;
+
+interface CardItemProps {
+	id: number;
+	alt: string;
+	src: string;
+	correct: boolean;
+	flipped: boolean;
+}
+
+//카드 랜덤으로 섞기
+const shuffleCards = (cardList: CardItemProps[]) => {
+	for (let i = cardList.length - 1; i > 0; i--) {
+		// eslint-disable-next-line prefer-const
+		let j = Math.floor(Math.random() * (i + 1));
+		[cardList[i], cardList[j]] = [cardList[j], cardList[i]];
+	}
+};
+
+//카드 두 개 눌렸을 때마다 정답여부 판단하는 useEffect 함수
+
+export const Card = () => {
+	const [level, setLevel] = useRecoilState(LevelState);
+	const [score, setScore] = useRecoilState(ScoreState);
+
+	const [cardList, setCardList] = useState<CardItemProps[]>(TOSIM);
+	const [flippedCards, setFlippedCards] = useState<number[]>([]);
+
+	const [isReset, setIsReset] = useState(false);
+
+	const toggleCardFlip = (card: CardItemProps) => {
+		if (flippedCards.length === 2) {
+			return;
+		}
+
+		// 	const updatedCard = { ...card, flipped: !card.flipped };
+		// 	if (!card.flipped && !card.correct) {
+		// 		return { ...card, flipped: true };
+		// 	}
+		// 	setCardList([])
+	};
+
+	//섞은 카드 중에서 레벨에 맞는 개수만큼 잘라주고 만들기
+	const createCards = (level: number) => {
+		let newCardList = TOSIM.slice(0, level / 2);
+		newCardList = [...newCardList, ...newCardList];
+		setCardList(newCardList);
+		shuffleCards(cardList);
+
+		return cardList.map((card, index) => (
+			<Styled.CardItem
+				key={index}
+				correct={card.correct ? 1 : 0}
+				flipped={card.flipped ? 1 : 0}
+			>
+				{card.flipped ? (
+					<Styled.CardImgFront
+						className="cardFront flipped"
+						src={card.src}
+						alt={card.alt}
+						onClick={() => toggleCardFlip(card)}
+					/>
+				) : (
+					<Styled.CardImgBack
+						className="cardBack"
+						src={tosim_background}
+						alt="토심카드-뒷면"
+						onClick={() => {
+							toggleCardFlip(card);
+						}}
+					/>
+				)}
+			</Styled.CardItem>
+		));
+	};
+
+	const onLevelClicked = (cardNums: number) => {
+		setLevel(cardNums);
+		setIsReset(true);
+		shuffleCards(TOSIM);
+	};
+
+	//리셋 처리해주는 useEffect(setIsReset 거짓으로 바꿔놔야 함)
+	useEffect(() => {
+		setLevel(level);
+	}, [level]);
+
+	useEffect(() => {
+		setIsReset(false);
+	}, [isReset]);
+
+	return (
+		<Styled.CardSection>
+			<Styled.Buttons>
+				<Button onClick={() => onLevelClicked(EASY)}>EASY</Button>
+				<Button onClick={() => onLevelClicked(NORMAL)}>NORMAL</Button>
+				<Button onClick={() => onLevelClicked(HARD)}>HARD</Button>
+			</Styled.Buttons>
+			<Styled.CardItemsSection>{createCards(level)}</Styled.CardItemsSection>
+		</Styled.CardSection>
+	);
+};
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { default as tosim_background } from "./tosim_background.jpg";