GO-SOPT-WEB · Geun-Oh · Apr 25, 2023 · Apr 25, 2023 · Apr 25, 2023 · Apr 26, 2023
diff --git a/.DS_Store b/.DS_Store
diff --git a/.github/workflows/static.yml b/.github/workflows/static.yml
@@ -0,0 +1,54 @@
+# GitHub Pages에 정적 콘텐츠를 배포하기 위한 간단한 워크플로우
+name: Deploy static content to Pages
+
+on:
+  # 기본 브랜치에 대한 푸시 이벤트 발생 시 실행
+  push:
+    branches: ["week3/assign1"]
+
+  # Actions 탭에서 수동으로 워크플로우를 실행할 수 있도록 구성
+  workflow_dispatch:
+
+# GITHUB_TOKEN의 권한을 설정하여 GitHub Pages에 배포할 수 있도록 함
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# 동시에 하나의 배포만 허용하도록 구성
+concurrency:
+  group: "pages"
+  cancel-in-progress: true
+
+jobs:
+  # 단순히 배포만 수행하기에 하나의 잡으로만 구성
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    defaults:
+      run:
+        working-directory: "week3/Assignment1"
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Set up Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          cache: "npm"
+      - name: Install dependencies
+        run: npm install
+      - name: Build
+        run: npm run build
+      - name: Setup Pages
+        uses: actions/configure-pages@v3
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v1
+        with:
+          # dist 디렉터리 업로드
+          path: "./dist"
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v1
diff --git a/week3-ts/.eslintrc.cjs b/week3-ts/.eslintrc.cjs
@@ -0,0 +1,14 @@
+module.exports = {
+  env: { browser: true, es2020: true, node: 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/.gitignore b/week3-ts/.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/index.html b/week3-ts/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <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>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="modal"></div>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/week3-ts/package.json b/week3-ts/package.json
@@ -0,0 +1,31 @@
+{
+  "name": "week3-ts",
+  "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",
+    "recoil": "^0.7.7",
+    "styled-components": "^5.3.11"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.11",
+    "@types/styled-components": "^5.1.26",
+    "@typescript-eslint/eslint-plugin": "^5.57.1",
+    "@typescript-eslint/parser": "^5.57.1",
+    "@vitejs/plugin-react-swc": "^3.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.2"
+  }
+}
diff --git a/week3-ts/public/assets/IMG_0454.png b/week3-ts/public/assets/IMG_0454.png
diff --git a/week3-ts/public/assets/IMG_0455.png b/week3-ts/public/assets/IMG_0455.png
diff --git a/week3-ts/public/assets/IMG_0456.png b/week3-ts/public/assets/IMG_0456.png
diff --git a/week3-ts/public/assets/IMG_0457.png b/week3-ts/public/assets/IMG_0457.png
diff --git a/week3-ts/public/assets/IMG_0459.png b/week3-ts/public/assets/IMG_0459.png
diff --git a/week3-ts/public/assets/IMG_0460.png b/week3-ts/public/assets/IMG_0460.png
diff --git a/week3-ts/public/assets/IMG_0461.png b/week3-ts/public/assets/IMG_0461.png
diff --git a/week3-ts/public/assets/IMG_0463.png b/week3-ts/public/assets/IMG_0463.png
diff --git a/week3-ts/public/assets/IMG_0464.png b/week3-ts/public/assets/IMG_0464.png
diff --git a/week3-ts/public/vite.svg b/week3-ts/public/vite.svg
diff --git a/week3-ts/src/@types/index.d.ts b/week3-ts/src/@types/index.d.ts
@@ -0,0 +1 @@
+declare module "*.png";
diff --git a/week3-ts/src/App.tsx b/week3-ts/src/App.tsx
@@ -0,0 +1,18 @@
+import { ThemeProvider } from "styled-components";
+import theme from "./styles/theme";
+import GlobalStyle from "./styles/globalStyle";
+import { RecoilRoot } from "recoil";
+import MainPage from "./pages/MainPage";
+
+function App() {
+  return (
+    <ThemeProvider theme={theme}>
+      <GlobalStyle />
+      <RecoilRoot>
+        <MainPage />
+      </RecoilRoot>
+    </ThemeProvider>
+  );
+}
+
+export default App;
diff --git a/week3-ts/src/components/GameSection.tsx b/week3-ts/src/components/GameSection.tsx
@@ -0,0 +1,25 @@
+import styled from 'styled-components';
+
+import CardTemplate from './template/CardTemplate';
+import DifficultyButtonTemplate from './template/DifficultyButtonTemplate';
+
+const GameSection = () => {
+  return (
+    <StyledGameSection>
+      <DifficultyButtonTemplate />
+      <CardTemplate />
+    </StyledGameSection>
+  );
+};
+
+const StyledGameSection = styled.section`
+  width: 100vw;
+  height: auto;
+  min-height: calc(100vw - 200px);
+  background-color: ${({ theme }) => theme.Background};
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+
+export default GameSection;
diff --git a/week3-ts/src/components/Header.tsx b/week3-ts/src/components/Header.tsx
@@ -0,0 +1,52 @@
+import "../styles/bright.css";
+
+import { useEffect } from "react";
+import { useRef } from "react";
+import styled from "styled-components";
+
+import { useRecoilValue } from "recoil";
+import RootState from "../recoil/atom";
+
+const Header = () => {
+  const { correctCard, difficulty } = useRecoilValue(RootState);
+  const spanRef = useRef<HTMLSpanElement>(null);
+
+  useEffect(() => {
+    spanRef.current && spanRef.current.classList.add("bright");
+    setTimeout(() => {
+      spanRef.current && spanRef.current.classList.remove("bright");
+    }, 800);
+  }, [correctCard]);
+
+  return (
+    <StyledHeader>
+      <h1>⭐찌호를 맞춰주세요⭐</h1>
+      <span ref={spanRef}>
+        {correctCard.length} /{" "}
+        {difficulty === "Easy" ? 5 : difficulty === "Normal" ? 7 : 9}
+      </span>
+    </StyledHeader>
+  );
+};
+
+const StyledHeader = styled.header`
+  width: 100vw;
+  height: 200px;
+  background-color: #ebccb0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  h1 {
+    color: #815854;
+    font-size: 4rem;
+    margin-bottom: 1rem;
+  }
+  span {
+    color: #6b3a35;
+    font-size: 2rem;
+    font-weight: 700;
+  }
+`;
+
+export default Header;
diff --git a/week3-ts/src/components/SuccessModal.tsx b/week3-ts/src/components/SuccessModal.tsx
@@ -0,0 +1,19 @@
+import { useRecoilValue } from "recoil";
+import RootState from "../recoil/atom";
+import Modal from "./organism/Modal";
+import ModalRenderer from "./organism/ModalRenderer";
+
+const SuccessModal = () => {
+  const { successModalOpen } = useRecoilValue(RootState);
+  return (
+    <>
+      {successModalOpen && (
+        <ModalRenderer>
+          <Modal />
+        </ModalRenderer>
+      )}
+    </>
+  );
+};
+
+export default SuccessModal;
diff --git a/week3-ts/src/components/atom/ButtonView.tsx b/week3-ts/src/components/atom/ButtonView.tsx
@@ -0,0 +1,56 @@
+import styled from "styled-components";
+
+const StyledDifficulfyButton = styled.button`
+  ${({ theme }) => theme.CommonButtonStyle}
+  height: 60px;
+  padding: 10px 20px;
+  font-size: 1.5rem;
+  border: none;
+  border-radius: 5px;
+  color: #6b2019;
+  background-color: #d37e75;
+  transition-duration: 0.3s;
+`;
+
+const StyledResetButton = styled.button`
+  ${({ theme }) => theme.CommonButtonStyle}
+  top: 60px;
+  right: 40px;
+  height: 90px;
+  padding: 10px 20px;
+  font-size: 2rem;
+  color: #f1c4c0;
+  background-color: #6b2019;
+  position: fixed;
+`;
+
+const StyledSuccessModalButton = styled.button`
+  ${({ theme }) => theme.CommonButtonStyle}
+  width: 80px;
+  padding: 10px;
+  margin-top: 10px;
+  border-radius: 10px;
+  background-color: ${({ theme }) => theme.SubBackground};
+`;
+
+const buttonTypes = {
+  DIFFICULTY: StyledDifficulfyButton,
+  RESET: StyledResetButton,
+  SUCCESSMODAL: StyledSuccessModalButton,
+};
+
+interface ButtonViewProps {
+  type: "DIFFICULTY" | "RESET" | "SUCCESSMODAL";
+  innerText: string;
+  onClick: (e: React.MouseEvent<HTMLElement>) => void;
+}
+
+const ButtonView = ({ type, innerText, onClick }: ButtonViewProps) => {
+  const ButtonType = buttonTypes[type];
+  return (
+    <ButtonType type="button" onClick={onClick} value={innerText}>
+      {innerText}
+    </ButtonType>
+  );
+};
+export default ButtonView;
diff --git a/week3-ts/src/components/atom/CardView.tsx b/week3-ts/src/components/atom/CardView.tsx
@@ -0,0 +1,53 @@
+import styled from "styled-components";
+
+interface CardViewProps {
+  rotate: "rotateY(0deg)" | "rotateY(180deg)";
+  onClick: (e: React.MouseEvent<HTMLElement>) => void;
+  imgURL: string;
+}
+
+const CardView = ({ rotate, onClick, imgURL }: CardViewProps) => {
+  return (
+    <StyledCardArticle rotate={rotate} onClick={onClick}>
+      <div className="card_frontface">
+        <img src={imgURL} alt={`찌호이미지: ${imgURL}`} />
+      </div>
+      <div className="card_backface"></div>
+    </StyledCardArticle>
+  );
+};
+
+const StyledCardArticle = styled.article<{
+  rotate: "rotateY(0deg)" | "rotateY(180deg)";
+}>`
+  position: relative;
+  transform: ${({ rotate }) => rotate};
+  transition-duration: 1s;
+  transform-style: preserve-3d;
+  .card_frontface {
+    width: 180px;
+    height: 250px;
+    border-radius: 20px;
+    background-color: white;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    img {
+      width: 150px;
+      backface-visibility: hidden;
+    }
+  }
+  .card_backface {
+    top: 0;
+    left: 0;
+    width: 180px;
+    height: 250px;
+    border-radius: 20px;
+    background-color: #a11818;
+    position: absolute;
+    transform: rotateY(180deg);
+    backface-visibility: hidden;
+  }
+`;
+
+export default CardView;