From 5e54064cd9c2e600d63453c477a2f740dd3da3e2 Mon Sep 17 00:00:00 2001 From: parkhyeonji Date: Wed, 7 Jun 2023 11:25:37 +0900 Subject: [PATCH 01/13] =?UTF-8?q?chore=20:=20recoil=20=EC=84=A4=EC=B9=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- week3/Zzangu/package.json | 2 ++ week3/Zzangu/yarn.lock | 19 +++++++++++++++++++ 2 files changed, 21 insertions(+) diff --git a/week3/Zzangu/package.json b/week3/Zzangu/package.json index d849273..0b888a0 100644 --- 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/yarn.lock b/week3/Zzangu/yarn.lock index dfdd371..3ec8580 100644 --- a/week3/Zzangu/yarn.lock +++ b/week3/Zzangu/yarn.lock @@ -492,6 +492,13 @@ "@types/scheduler" "*" csstype "^3.0.2" +"@types/recoil@^0.0.9": + version "0.0.9" + resolved "https://registry.yarnpkg.com/@types/recoil/-/recoil-0.0.9.tgz#a5efceda791ee2720418e232445bb34f4f2e4be9" + integrity sha512-dXKcvdzQbkFCcULgxhtc/3shoCNqsspRUY1KwIUYcAzgS0qY7+IxlcjRjq+9PizFnzKrHESllkbezqCMstPmQA== + dependencies: + recoil "*" + "@types/scheduler@*": version "0.16.3" resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.3.tgz#cef09e3ec9af1d63d2a6cc5b383a737e24e6dcf5" @@ -1121,6 +1128,11 @@ grapheme-splitter@^1.0.4: resolved "https://registry.yarnpkg.com/grapheme-splitter/-/grapheme-splitter-1.0.4.tgz#9cf3a665c6247479896834af35cf1dbb4400767e" integrity sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ== +hamt_plus@1.0.2: + version "1.0.2" + resolved "https://registry.yarnpkg.com/hamt_plus/-/hamt_plus-1.0.2.tgz#e21c252968c7e33b20f6a1b094cd85787a265601" + integrity sha512-t2JXKaehnMb9paaYA7J0BX8QQAY8lwfQ9Gjf4pg/mk4krt+cmwmU652HOoWonf+7+EQV97ARPMhhVgU1ra2GhA== + has-flag@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd" @@ -1448,6 +1460,13 @@ react@^18.2.0: dependencies: loose-envify "^1.1.0" +recoil@*, recoil@^0.7.7: + version "0.7.7" + resolved "https://registry.yarnpkg.com/recoil/-/recoil-0.7.7.tgz#c5f2c843224384c9c09e4a62c060fb4c1454dc8e" + integrity sha512-8Og5KPQW9LwC577Vc7Ug2P0vQshkv1y3zG3tSSkWMqkWSwHmE+by06L8JtnGocjW6gcCvfwB3YtrJG6/tWivNQ== + dependencies: + hamt_plus "1.0.2" + resolve-from@^4.0.0: version "4.0.0" resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6" From 340667804e7ebc29e5fd4f8e7e62125cf8366fba Mon Sep 17 00:00:00 2001 From: parkhyeonji Date: Wed, 7 Jun 2023 11:27:19 +0900 Subject: [PATCH 02/13] =?UTF-8?q?chore=20:=20atom.ts=20=EC=83=9D=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- week3/Zzangu/src/recoil/atom.ts | 1 + 1 file changed, 1 insertion(+) create mode 100644 week3/Zzangu/src/recoil/atom.ts diff --git a/week3/Zzangu/src/recoil/atom.ts b/week3/Zzangu/src/recoil/atom.ts new file mode 100644 index 0000000..45e0802 --- /dev/null +++ b/week3/Zzangu/src/recoil/atom.ts @@ -0,0 +1 @@ +import { atom } from 'recoil'; From 9f7018edc6c655c61b142a3d07843f736aaabb55 Mon Sep 17 00:00:00 2001 From: parkhyeonji Date: Wed, 7 Jun 2023 11:29:37 +0900 Subject: [PATCH 03/13] =?UTF-8?q?chore=20:=20RecoilRoot=EB=A1=9C=20?= =?UTF-8?q?=EA=B0=90=EC=8B=B8=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- week3/Zzangu/src/App.tsx | 3 ++- week3/Zzangu/src/main.tsx | 6 +++++- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/week3/Zzangu/src/App.tsx b/week3/Zzangu/src/App.tsx index 604ec78..daa7ea4 100644 --- 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/main.tsx b/week3/Zzangu/src/main.tsx index 16f0797..92d0c99 100644 --- 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( - + + + , ); From ad19c710898fc18fff015f8d60864527842169f7 Mon Sep 17 00:00:00 2001 From: parkhyeonji Date: Wed, 7 Jun 2023 11:33:19 +0900 Subject: [PATCH 04/13] =?UTF-8?q?chore=20:=20mode=20=EC=83=81=EC=88=98=20?= =?UTF-8?q?=ED=8C=8C=EC=9D=BC=EB=A1=9C=20=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- week3/Zzangu/src/datas/mode.ts | 3 +++ week3/Zzangu/src/pages/Game.tsx | 10 +++------- 2 files changed, 6 insertions(+), 7 deletions(-) create mode 100644 week3/Zzangu/src/datas/mode.ts diff --git a/week3/Zzangu/src/datas/mode.ts b/week3/Zzangu/src/datas/mode.ts new file mode 100644 index 0000000..eab060f --- /dev/null +++ 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/pages/Game.tsx b/week3/Zzangu/src/pages/Game.tsx index e3e3d88..4fb0546 100644 --- a/week3/Zzangu/src/pages/Game.tsx +++ b/week3/Zzangu/src/pages/Game.tsx @@ -1,11 +1,11 @@ import React, { useEffect, useState } from 'react'; import styled from 'styled-components'; -import Header from '../components/Header'; import Card from '../components/Card'; -import ZZANGU_LIST from '../datas/zzanguList'; -import { Zzangu } from '../datas/zzanguList'; +import Header from '../components/Header'; import Modal from '../components/Modal'; +import { EASY_MODE, HARD_MODE, NORMAL_MODE } from '../datas/mode'; +import ZZANGU_LIST, { Zzangu } from '../datas/zzanguList'; interface CardData extends Zzangu { answer: number; @@ -13,10 +13,6 @@ interface CardData extends Zzangu { matched: boolean; } -const EASY_MODE = 5; -const NORMAL_MODE = 7; -const HARD_MODE = 9; - // 출제할 카드 섞기 const shuffleCards = (cards: Zzangu[]): Zzangu[] => { const duplicatedCards = [...cards, ...cards]; From 62a11c435ad1ccca1ee43db95527c341d14f13ac Mon Sep 17 00:00:00 2001 From: parkhyeonji Date: Wed, 7 Jun 2023 11:34:51 +0900 Subject: [PATCH 05/13] =?UTF-8?q?chore=20:=20mode,=20score=20Atom=20?= =?UTF-8?q?=EC=83=9D=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- week3/Zzangu/src/recoil/atom.ts | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/week3/Zzangu/src/recoil/atom.ts b/week3/Zzangu/src/recoil/atom.ts index 45e0802..8f6a982 100644 --- a/week3/Zzangu/src/recoil/atom.ts +++ b/week3/Zzangu/src/recoil/atom.ts @@ -1 +1,13 @@ import { atom } from 'recoil'; + +import { EASY_MODE } from '../datas/mode'; + +export const ModeState = atom({ + key: 'Mode', + default: EASY_MODE, +}); + +export const ScoreState = atom({ + key: 'Score', + default: 0, +}); From 0e462cc7ff81c5f72ecb9ac75f1616e7f1c766d6 Mon Sep 17 00:00:00 2001 From: parkhyeonji Date: Wed, 7 Jun 2023 11:36:26 +0900 Subject: [PATCH 06/13] =?UTF-8?q?feat=20:=20=EA=B2=8C=EC=9E=84=20=ED=99=94?= =?UTF-8?q?=EB=A9=B4=EC=97=90=EC=84=9C=20mode,=20score=20=EB=A6=AC?= =?UTF-8?q?=EC=BD=94=EC=9D=BC=EB=A1=9C=20=EA=B4=80=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- week3/Zzangu/src/pages/Game.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/week3/Zzangu/src/pages/Game.tsx b/week3/Zzangu/src/pages/Game.tsx index 4fb0546..18d82f4 100644 --- a/week3/Zzangu/src/pages/Game.tsx +++ b/week3/Zzangu/src/pages/Game.tsx @@ -1,4 +1,5 @@ import React, { useEffect, useState } from 'react'; +import { useRecoilState } from 'recoil'; import styled from 'styled-components'; import Card from '../components/Card'; @@ -6,6 +7,7 @@ import Header from '../components/Header'; import Modal from '../components/Modal'; import { EASY_MODE, HARD_MODE, NORMAL_MODE } from '../datas/mode'; import ZZANGU_LIST, { Zzangu } from '../datas/zzanguList'; +import { ModeState, ScoreState } from '../recoil/atom'; interface CardData extends Zzangu { answer: number; @@ -34,8 +36,8 @@ const createCards = (cards: Zzangu[], mode: number): CardData[] => { }; const Game = () => { - const [mode, setMode] = useState(EASY_MODE); - const [score, setScore] = useState(0); + const [mode, setMode] = useRecoilState(ModeState); + const [score, setScore] = useRecoilState(ScoreState); const [isOver, setIsOver] = useState(false); const [isModalOpen, setIsModalOpen] = useState(false); From 4f32932a325934335e86d0165f1a2779046dec87 Mon Sep 17 00:00:00 2001 From: parkhyeonji Date: Wed, 7 Jun 2023 11:40:05 +0900 Subject: [PATCH 07/13] =?UTF-8?q?feat=20:=20Header=EC=97=90=EC=84=9C=20mod?= =?UTF-8?q?e,=20score=20Recoil=20Value=20=EC=82=AC=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- week3/Zzangu/src/components/Header.tsx | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/week3/Zzangu/src/components/Header.tsx b/week3/Zzangu/src/components/Header.tsx index 2438296..27c449b 100644 --- a/week3/Zzangu/src/components/Header.tsx +++ b/week3/Zzangu/src/components/Header.tsx @@ -1,12 +1,13 @@ 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 (

짱구는 못말려!

From 5dbbb46be11575accf095dc9073fdbbba8d706dd Mon Sep 17 00:00:00 2001 From: parkhyeonji Date: Wed, 7 Jun 2023 12:18:23 +0900 Subject: [PATCH 08/13] =?UTF-8?q?refactor=20:=20=EB=B2=84=ED=8A=BC=20?= =?UTF-8?q?=EA=B3=B5=ED=86=B5=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8?= =?UTF-8?q?=EB=A1=9C=20=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- week3/Zzangu/src/components/Button.tsx | 136 ++++++++++++++++++++++++ week3/Zzangu/src/pages/Game.tsx | 140 ++----------------------- 2 files changed, 143 insertions(+), 133 deletions(-) create mode 100644 week3/Zzangu/src/components/Button.tsx diff --git a/week3/Zzangu/src/components/Button.tsx b/week3/Zzangu/src/components/Button.tsx new file mode 100644 index 0000000..913b8fc --- /dev/null +++ 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) => ( + + {children} + +); + +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: 0; + 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/pages/Game.tsx b/week3/Zzangu/src/pages/Game.tsx index 18d82f4..c9b2bb8 100644 --- a/week3/Zzangu/src/pages/Game.tsx +++ b/week3/Zzangu/src/pages/Game.tsx @@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react'; import { useRecoilState } from 'recoil'; import styled from 'styled-components'; +import { Button } from '../components/Button'; import Card from '../components/Card'; import Header from '../components/Header'; import Modal from '../components/Modal'; @@ -132,20 +133,14 @@ const Game = () => { return ( -
+
- - - - + + + + {displayCards()} {isModalOpen && ( @@ -176,127 +171,6 @@ const StMode = styled.nav` gap: 2rem; height: 7rem; - - & > .modeBtn { - 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); - } - } - } - - & > .resetBtn { - 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: 0; - 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%; - } - } `; const StCards = styled.section` From 9d3c7ecae17a73f5af43cc4c93638d9b20fa8989 Mon Sep 17 00:00:00 2001 From: parkhyeonji Date: Wed, 7 Jun 2023 12:23:24 +0900 Subject: [PATCH 09/13] =?UTF-8?q?style=20:=20=EB=B2=84=ED=8A=BC=20?= =?UTF-8?q?=EC=8A=A4=ED=83=80=EC=9D=BC=EB=A7=81=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- week3/Zzangu/src/components/Button.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/week3/Zzangu/src/components/Button.tsx b/week3/Zzangu/src/components/Button.tsx index 913b8fc..505b69e 100644 --- a/week3/Zzangu/src/components/Button.tsx +++ b/week3/Zzangu/src/components/Button.tsx @@ -90,7 +90,7 @@ const StButton = styled.button<{ isReset?: boolean }>` content: ''; display: block; position: absolute; - top: 0; + top: -11%; left: -10%; z-index: -12; opacity: 1; From 79b52610ae659cd7822e58b066803ab9ac1976b9 Mon Sep 17 00:00:00 2001 From: parkhyeonji Date: Wed, 7 Jun 2023 12:36:08 +0900 Subject: [PATCH 10/13] =?UTF-8?q?chore=20:=20=EC=82=AC=EC=9A=A9=ED=95=98?= =?UTF-8?q?=EC=A7=80=20=EC=95=8A=EB=8A=94=20=EB=AA=A8=EB=93=88=20=EC=84=A0?= =?UTF-8?q?=EC=96=B8=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- week3/Zzangu/src/components/Card.tsx | 1 - week3/Zzangu/src/components/Header.tsx | 1 - week3/Zzangu/src/components/Modal.tsx | 1 - week3/Zzangu/src/pages/Game.tsx | 2 +- 4 files changed, 1 insertion(+), 4 deletions(-) diff --git a/week3/Zzangu/src/components/Card.tsx b/week3/Zzangu/src/components/Card.tsx index 75052d1..65fcce2 100644 --- 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 index 27c449b..8b1eee6 100644 --- a/week3/Zzangu/src/components/Header.tsx +++ b/week3/Zzangu/src/components/Header.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import { useRecoilValue } from 'recoil'; import styled from 'styled-components'; diff --git a/week3/Zzangu/src/components/Modal.tsx b/week3/Zzangu/src/components/Modal.tsx index 0a4ee99..c85a0e7 100644 --- 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/pages/Game.tsx b/week3/Zzangu/src/pages/Game.tsx index c9b2bb8..db064e3 100644 --- a/week3/Zzangu/src/pages/Game.tsx +++ b/week3/Zzangu/src/pages/Game.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from 'react'; +import { useEffect, useState } from 'react'; import { useRecoilState } from 'recoil'; import styled from 'styled-components'; From 48b4123af2d3b765082bfeb293466d9fae83c28a Mon Sep 17 00:00:00 2001 From: parkhyeonji Date: Wed, 7 Jun 2023 12:45:31 +0900 Subject: [PATCH 11/13] =?UTF-8?q?chore=20:=20crossorigin=EC=84=A4=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- week3/Zzangu/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/week3/Zzangu/index.html b/week3/Zzangu/index.html index ce73b00..819e4a7 100644 --- a/week3/Zzangu/index.html +++ b/week3/Zzangu/index.html @@ -10,7 +10,7 @@
- + \ No newline at end of file From 0cceba1e9a58466b457b2e9a45089834aa75d21c Mon Sep 17 00:00:00 2001 From: parkhyeonji Date: Wed, 7 Jun 2023 12:48:35 +0900 Subject: [PATCH 12/13] =?UTF-8?q?fix=20:=20main.tsx=20=EA=B2=BD=EB=A1=9C?= =?UTF-8?q?=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- week3/Zzangu/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/week3/Zzangu/index.html b/week3/Zzangu/index.html index 819e4a7..94fd030 100644 --- a/week3/Zzangu/index.html +++ b/week3/Zzangu/index.html @@ -10,7 +10,7 @@
- + \ No newline at end of file From bf74ac5f50de86c90b2dd9d024d56530030e41ef Mon Sep 17 00:00:00 2001 From: parkhyeonji Date: Wed, 7 Jun 2023 14:01:21 +0900 Subject: [PATCH 13/13] =?UTF-8?q?chore=20:=20vercel.json=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- week3/Zzangu/vite.config.ts | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/week3/Zzangu/vite.config.ts b/week3/Zzangu/vite.config.ts index 5a33944..19b5941 100644 --- a/week3/Zzangu/vite.config.ts +++ b/week3/Zzangu/vite.config.ts @@ -1,7 +1,14 @@ -import { defineConfig } from 'vite' -import react from '@vitejs/plugin-react' +import { defineConfig } from 'vite'; + +import react from '@vitejs/plugin-react'; // https://vitejs.dev/config/ export default defineConfig({ plugins: [react()], -}) + resolve: { + alias: { + // If you have a tsconfig.json file, you can add its path here + '@': path.resolve(__dirname, 'src'), + }, + }, +});