GO-SOPT-WEB · iamphj3 · Jun 7, 2023 · Jun 7, 2023 · Jun 7, 2023 · Jun 7, 2023
diff --git a/week3/Zzangu/index.html b/week3/Zzangu/index.html
@@ -10,7 +10,7 @@
 <body>
   <div id="root"></div>
   <div id="modal"></div>
-  <script type="module" src="/src/main.tsx"></script>
+  <script type="module" src="/src/main.tsx" crossorigin></script>
 </body>
 
 </html>
diff --git a/week3/Zzangu/package.json b/week3/Zzangu/package.json
@@ -10,9 +10,11 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@types/recoil": "^0.0.9",
     "@types/styled-components": "^5.1.26",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "recoil": "^0.7.7",
     "styled-components": "^5.3.10",
     "styled-reset": "^4.4.6"
   },

diff --git a/week3/Zzangu/src/App.tsx b/week3/Zzangu/src/App.tsx
@@ -1,7 +1,8 @@
 import { ThemeProvider } from 'styled-components';
+
+import Game from './pages/Game';
 import GlobalStyle from './styles/GlobalStyle';
 import theme from './styles/theme';
-import Game from './pages/Game';
 
 function App() {
   return (

diff --git a/week3/Zzangu/src/components/Button.tsx b/week3/Zzangu/src/components/Button.tsx
@@ -0,0 +1,136 @@
+import styled, { css } from 'styled-components';
+
+interface ButtonProps {
+  onClick: () => void;
+  children: string;
+  isReset?: boolean;
+}
+
+export const Button = ({ onClick, children, isReset }: ButtonProps) => (
+  <StButton type='button' onClick={onClick} isReset={isReset}>
+    {children}
+  </StButton>
+);
+
+const StButton = styled.button<{ isReset?: boolean }>`
+  padding: 1rem 2rem;
+  ${({ theme }) => theme.fonts.ZZangu_Button2};
+
+  color: ${({ theme }) => theme.colors.Zzangu_PinkBorder};
+  background: ${({ theme }) => theme.colors.Zzangu_LightPink};
+  border: 0.2rem solid ${({ theme }) => theme.colors.Zzangu_PinkBorder};
+  border-radius: 1.5rem;
+  transform-style: preserve-3d;
+  transition: transform 150ms cubic-bezier(0, 0, 0.58, 1);
+
+  &::before {
+    content: '';
+
+    position: absolute;
+    top: 0;
+    left: 0;
+
+    width: 100%;
+    height: 100%;
+
+    background: ${({ theme }) => theme.colors.Zzangu_DarkPink};
+    border-radius: inherit;
+    box-shadow: 0 0 0 0.2rem ${({ theme }) => theme.colors.Zzangu_PinkBorder};
+
+    transform: translate3d(0, 0.75rem, -1rem);
+    transition: transform 150ms cubic-bezier(0, 0, 0.58, 1),
+      box-shadow 150ms cubic-bezier(0, 0, 0.58, 1);
+  }
+
+  &:hover {
+    background: ${({ theme }) => theme.colors.Zzangu_Pink};
+    transform: translate(0, 0.25em);
+
+    &::before {
+      box-shadow: 0 0 0 0.2rem ${({ theme }) => theme.colors.Zzangu_PinkBorder},
+        0 0.5rem 0 0 ${({ theme }) => theme.colors.Zzangu_PinkShadow};
+      transform: translate3d(0, 0.5rem, -1rem);
+    }
+  }
+
+  &:active {
+    background: ${({ theme }) => theme.colors.Zzangu_Pink};
+    transform: translate(0rem, 0.75rem);
+
+    &::before {
+      box-shadow: 0 0 0 0.2rem ${({ theme }) => theme.colors.Zzangu_PinkBorder},
+        0 0 ${({ theme }) => theme.colors.Zzangu_PinkShadow};
+      transform: translate3d(0, 0, -1em);
+    }
+  }
+
+  ${({ isReset }) =>
+    isReset &&
+    css`
+      position: absolute;
+      right: 11%;
+      overflow: hidden;
+      z-index: 10;
+
+      padding: 1rem 4rem;
+
+      color: ${({ theme }) => theme.colors.Zzangu_YellowBorder};
+      background: ${({ theme }) => theme.colors.Zzangu_Yellow};
+      ${({ theme }) => theme.fonts.ZZangu_Button1};
+      border: 0.3rem solid ${({ theme }) => theme.colors.Zzangu_YellowBorder};
+      border-radius: 5rem;
+
+      transition: all 0.3s ease-in-out;
+
+      &:hover {
+        border: 0.1rem solid ${({ theme }) => theme.colors.Zzangu_YellowBorder};
+        color: ${({ theme }) => theme.colors.Zzangu_White};
+      }
+      &::before {
+        content: '';
+        display: block;
+        position: absolute;
+        top: -11%;
+        left: -10%;
+        z-index: -12;
+        opacity: 1;
+
+        width: 0%;
+        height: 100%;
+
+        background: ${({ theme }) => theme.colors.Zzangu_YellowBorder};
+
+        transform: skewX(-20deg);
+        transition: all 0.7s cubic-bezier(0.77, 0, 0.175, 1);
+        box-shadow: 0.2rem 0rem 1.4rem rgba(0, 0, 0, 0.6);
+      }
+      &::after {
+        content: '';
+        display: block;
+        position: absolute;
+        top: 0;
+        left: -10%;
+        z-index: -15;
+        opacity: 0;
+
+        width: 0%;
+        height: 100%;
+
+        background: ${({ theme }) => theme.colors.Zzangu_White};
+
+        transform: skewX(-20deg);
+        transition: all 0.4s cubic-bezier(0.2, 0.95, 0.57, 0.99);
+        box-shadow: 0.2rem, 0rem 1.4rem rgba(0, 0, 0, 0.6);
+      }
+      &:hover::before {
+        opacity: 1;
+
+        width: 116%;
+      }
+      &:hover::after {
+        opacity: 1;
+
+        width: 120%;
+      }
+    `}
+`;
diff --git a/week3/Zzangu/src/components/Card.tsx b/week3/Zzangu/src/components/Card.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import styled, { css } from 'styled-components';
 
 import { ImgZzanguBack } from '../assets/images';

diff --git a/week3/Zzangu/src/components/Header.tsx b/week3/Zzangu/src/components/Header.tsx
@@ -1,12 +1,12 @@
-import React from 'react';
+import { useRecoilValue } from 'recoil';
 import styled from 'styled-components';
 
-interface HeaderProps {
-  mode: number;
-  score: number;
-}
+import { ModeState, ScoreState } from '../recoil/atom';
+
+const Header = () => {
+  const mode = useRecoilValue(ModeState);
+  const score = useRecoilValue(ScoreState);
 
-const Header = ({ mode, score }: HeaderProps) => {
   return (
     <StHeader>
       <h1>짱구는 못말려!</h1>

diff --git a/week3/Zzangu/src/components/Modal.tsx b/week3/Zzangu/src/components/Modal.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { createPortal } from 'react-dom';
 import styled from 'styled-components';
 

diff --git a/week3/Zzangu/src/datas/mode.ts b/week3/Zzangu/src/datas/mode.ts
@@ -0,0 +1,3 @@
+export const EASY_MODE = 5;
+export const NORMAL_MODE = 7;
+export const HARD_MODE = 9;
diff --git a/week3/Zzangu/src/main.tsx b/week3/Zzangu/src/main.tsx
@@ -1,9 +1,13 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
+import { RecoilRoot } from 'recoil';
+
 import App from './App.tsx';
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>
-    <App />
+    <RecoilRoot>
+      <App />
+    </RecoilRoot>
   </React.StrictMode>,
 );