Update README

Author: junekimdev

README.md

@@ -78,13 +78,13 @@ API_URL=http://api.domain.com
 - Website server-side rendering framework: NextJS
 - Package management: Webpack (included in NextJS)
 - Transpiler: Speedy Web Compiler (included in NextJS)
-- State management (client): React State
+- State management (client): Recoil
 - State management (server): React-query v4
 - HTTP interface: fetch API (part of WHATWG Web Standard)
 - JavaScript Testing Framework: Jest
 - React Testing Library: @testing-library/react
 - Browser style normalization script: Normalize
-- Stylesheet preprocessor: SASS/SCSS
+- Stylesheet preprocessor: SCSS
 - Stylesheet postprocessor: Postcss (included in NextJS)
 - Postcss plugin: Autoprefixer (included in NextJS)
 - Version control: Git
@@ -104,11 +104,11 @@ Root
     └── eachComponent  
         ├── index.ts  
         ├── eachComponent.module.scss  
-        ├── eachComponentAdapter.tsx  
         ├── eachComponentInteractor.tsx  
+        ├── eachComponentStates.ts  
         ├── eachComponentPresenter.tsx  
         ├── eachComponentViewName.tsx  
-        └── eachComponentType.tsx  
+        └── eachComponentType.ts  
 ├── controllers  
     ├── index.ts  
     ├── apiURLs.ts  
@@ -119,6 +119,8 @@ Root
 ├── pages  
     ├── _app.tsx  
     ├── _document.tsx  
+    ├── _error.tsx  
+    ├── 404.tsx  
     ├── index.ts  
     └── global.scss  
 ├── public  

fetching-dataflow.md renamed to data-fetching-flow.md

@@ -1,4 +1,4 @@
-# Fetching Dataflow
+# Data-Fetching Flow
 
 - `State Layer` **stores & manages** data
 - `Event Layer` **writes** data
@@ -8,28 +8,26 @@
 sequenceDiagram
   participant B as Backend
 
-  box rgb(50,50,255) State/Event Layer
+  box rgb(50,50,255) State Layer
   participant Q as React-Query
-  participant I as Interactor
   end
 
   box rgb(50,50,255) Display Layer
   participant P as Presenter
   participant V as View
   end
 
-  Note over I: Loading
-  I->>Q: useQuery()
+  Note over P: Loading
+  P->>Q: useQuery()
   Q->>+B: fetch()
   B->>-Q: {Data}
-  Q->>I: Data
-  Note over I: Store
-  I->>P: useContext()
-  I->>V: useContext()
+  Note over Q: Store
+  Q->>P: QueryResult
+  P->>V: props
 ```
 
-> In this diagram, state layer and event layer are combined
->
-> `Interactor` manages both UI-states and events
+> `Interactor` manages events
 >
 > `React-Query` manages Network-states
+>
+> `States` manages UI-states