prgrms-fe-devcourse · SDWoo · Nov 10, 2022 · Nov 10, 2022 · Nov 11, 2022 · Nov 13, 2022
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,4 @@
+/node_modules
+/cypress/downloads
+/cypress/fixtures
+/src/api/apiEndPoint.js
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+  "liveServer.settings.port": 5501
+}
diff --git a/README.md b/README.md
@@ -1,11 +1,20 @@
-# 📌 4주차 프로젝트[Project1]
+# Dongtion
+<img width="1328" alt="image" src="https://user-images.githubusercontent.com/28768535/230762564-8372c564-2039-4758-a49b-44425cffead6.png">
 
-## 필수 프로젝트
+## VanllaJS로 Notion 구현해보기
+
+### 개발 과정
+1. 컴포넌트를 먼저 나누어 마크업 구조를 짜봤다.
+  <img width="625" alt="image" src="https://user-images.githubusercontent.com/28768535/230762105-6986ae2e-14bd-4c2a-8c42-6c547595eac0.png">
+  - Editor, SideBar, Modal 세개의 큰 컴포넌트가 나왔다.
+  - 먼저 마크업을 구현하고 세세한 마크업은 기능을 구현하면서 수정했다.
+
+2. 각 컴포넌트에 어떤 상태가 필요한지 구하고, 상태에 따른 렌더링을 구현했다.
+<img width="724" alt="image" src="https://user-images.githubusercontent.com/28768535/230762474-351b31f8-60f7-4e52-8053-fdc11e2716e8.png">
+
+3. 각 컴포넌트의 기능을 구현했다.
+<img width="625" alt="image" src="https://user-images.githubusercontent.com/28768535/230762443-f07a856a-03e1-4e4f-8eaa-b11b49e9247a.png">
+
+4. 자잘한 오류나 에러들을 고치며 리팩토링을 진행했다.
+<img width="625" alt="image" src="https://user-images.githubusercontent.com/28768535/230762430-a435f789-c205-4bf1-8362-fab1763c4fd0.png">
 
-- 프로젝트 기한
-  - 프로젝트 수행 기간 : 2022년 11월 8일(화) ~ 2022년 11월 16일(수)
-  - 멘티 코드 리뷰 기간 : 2022년 11월 17일(목) ~ 2022년 11월 20일(일)
-  - 멘토 코드 리뷰 기간 : 2022년 11월 17일(목) ~ 2022년 11월 22일(화)
-  - 코드 리뷰 반영 기간 : 2022년 11월 23일(수) ~ 2022년 11월 25일(금)
-- 내용
-  - **Day 17 [프로젝트] 노션 클로닝 요구사항** 확인 부탁드립니다.
diff --git a/_redirects b/_redirects
@@ -0,0 +1 @@
+/*    /index.html   200
diff --git a/cypress.config.js b/cypress.config.js
@@ -0,0 +1,10 @@
+const { defineConfig } = require('cypress')
+
+module.exports = defineConfig({
+  projectId: 'k19v3g',
+  e2e: {
+    setupNodeEvents(on, config) {
+      // implement node event listeners here
+    },
+  }
+})
diff --git a/cypress/e2e/spec.cy.js b/cypress/e2e/spec.cy.js
@@ -0,0 +1 @@
+describe('test', () => {});
diff --git a/cypress/support/commands.js b/cypress/support/commands.js
@@ -0,0 +1,25 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
diff --git a/cypress/support/e2e.js b/cypress/support/e2e.js
@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/e2e.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')
diff --git a/index.html b/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="/src/assets/css/style.css" />
+    <link
+      href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
+      rel="stylesheet"
+    />
+    <title>Notion Cloning</title>
+  </head>
+  <body>
+    <main id="app"></main>
+    <script src="/src/main.js" type="module"></script>
+  </body>
+</html>