모듈 CSS에서 스타일드 컴포넌트로 변경

VAC 패턴 (View Asset Component)

• HTML과 거의 유사한 뷰(View) 컴포넌트와 비즈니스 로직(Business Logic)만 담고 있는 컴포넌트를 만드는 것으로 역할을 완전히 분리하는 것
• 모든 컴포넌트를 뷰 파일과 로직 파일로 분리한다는 것이 특징
• VAC 패턴 적용하고 난 다음 타스로 이사 가는게 더 편할 듯! 🤔

과업

• components/DesktopIcon/
• components/DiaryForm/
• components/DiaryList/
• components/DragContainer/ → 약간 애매
• components/Footer/
• components/Modal/ → 딱히 분리 안해도 될듯
• components/Navbar/
• pages/account/Login
• pages/account/Signup
• pages/etc → 비즈니스 로직이 없음
• pages/home

• 출처 : 카카오테크

타입스크립트로 마이그레이션

• ├── App.tsx
• ├── app.style.js
• ├── assets
• │ ├── audio
• │ │ └── Windows_XP_Recycle.wav
• │ ├── font
• │ │ ├── W95FA.otf
• │ │ ├── w95fa.woff
• │ │ └── w95fa.woff2
• │ └── message.json
• ├── components
• │ ├── DesktopIcon
• │ │ ├── DesktopIcon.tsx
• │ │ ├── DesktopIconView.tsx
• │ │ └── desktopIcon.style.ts
• │ ├── DiaryForm
• │ │ ├── DiaryForm.tsx
• │ │ ├── DiaryFormView.tsx
• │ │ └── diaryForm.style.ts
• │ ├── DiaryList
• │ │ ├── DiaryList.tsx
• │ │ ├── DiaryListView.tsx
• │ │ └── diaryList.style.ts
• │ ├── DragContainer
• │ │ └── DragCont.tsx
• │ ├── Footer
• │ │ ├── Footer.tsx
• │ │ ├── FooterView.tsx
• │ │ └── footer.style.ts
• │ ├── Modal
• │ │ ├── Modal.tsx
• │ │ └── modal.style.ts
• │ └── Navbar
• │ ├── Nav.tsx
• │ ├── NavView.tsx
• │ └── nav.style.ts
• ├── context
• │ └── AuthContext.js
• ├── firebase
• │ └── config.js
• ├── hooks
• │ ├── useAuthContext.ts
• │ ├── useCollection.ts
• │ ├── useFirestore.ts
• │ ├── useLogin.ts
• │ ├── useLogout.ts
• │ ├── useRandomMsg.ts
• │ └── useSignup.ts
• ├── img
• │ ├── Bin.png
• │ ├── Figma.png
• │ ├── Folder.png
• │ ├── Info.png
• │ ├── Internet.png
• │ ├── MyComputer.png
• │ ├── Network.png
• │ ├── Off
• │ │ ├── On=Off.png
• │ │ └── On=On.png
• │ ├── ShutDown.png
• │ ├── Wordpad.png
• │ └── github.png
• ├── index.js
• ├── manifest.json
• ├── pages
• │ ├── account
• │ │ ├── Login
• │ │ │ ├── Login.tsx
• │ │ │ └── LoginView.tsx
• │ │ ├── Signup
• │ │ │ ├── Signup.tsx
• │ │ │ └── SignupView.tsx
• │ │ └── shared.style.ts
• │ ├── etc
• │ │ ├── Loading.tsx
• │ │ ├── Off.tsx
• │ │ └── loading.style.ts
• │ └── home
• │ ├── Home.module.css
• │ ├── Home.tsx
• │ ├── HomeView.tsx
• │ └── IconArea
• │ ├── IconArea.tsx
• │ ├── IconAreaView.tsx
• │ └── iconArea.style.ts
• ├── redux
• │ ├── reducer.ts
• │ └── store.ts
• ├── routes
• │ └── Router.tsx
• └── types
• └── state.type.ts

React Portal로 모달창 구현하기

예시 이미지

• Context 생성
• 일기 작성 폼 토글