[Mission4/김유리] - Project_Notion_VanillaJS #17

glassk · 2022-11-16T14:52:57Z

📌 과제 설명

VanillaJS로 노션(Notion)을 클로닝했습니다.

배포: https://yuri-notion.vercel.app

실행 방법

/src/utils에 key.js 파일을 생성하고 API_END_POINT 값을 설정합니다.
루트 디렉토리에서 터미널로 npm start 또는 npx serve -s를 실행합니다.

디렉토리 구조

👩‍💻 요구 사항과 구현 내용

화면 좌측에 루트 Documents를 불러오는 API를 통해 루트 Documents를 렌더링합니다.
- 루트 Document를 클릭하면 오른쪽 편집기 영역에 해당 Document를 렌더링합니다.
- 해당 루트 Document에 하위 Document가 있는 경우 해당 Document 아래에 트리 형태로 렌더링합니다.
- Document Tree에서 각 Document 우측의 + 버튼을 클릭하면, 클릭한 Document의 하위 Document로 새 Document를 생성하고 편집화면으로 넘깁니다.
- 열린 Document 목록의 documentId를 localStorage에 저장하여 새로고침해도 열린 상태를 유지합니다.
- 현재 접속 중인 Document를 하이라이트합니다.
- 루트 Documents나 Sidebar 하단의 버튼을 클릭하여 루트 Document를 추가합니다.
- Document 제목이 긴 경우 생략 처리(...)합니다.
Document Save API를 이용해 지속적으로 서버에 저장합니다.
- Document의 제목을 수정하면 Sidebar와 Document.title에 반영됩니다.
History API를 이용해 SPA 형태로 만듭니다.
- 루트 URL 접속 시 별도의 편집기를 선택하지 않습니다.
- /documents/{documentId} 로 접속 시 해당 Document를 불러와 편집기에 로딩합니다.
  - 존재하지 않는 documentId로 접속 시 첫 Document를 렌더링합니다.
편집기 최하단에는 현재 편집 중인 Document의 하위 Document를 렌더링합니다.
삭제(휴지통) 버튼을 클릭하면 Document를 삭제합니다.
- 현재 편집 중인 Document를 삭제하면 첫 Document를 렌더링하고 Document Tree를 변화합니다.
- 현재 편집 중이 아닌 Document를 삭제하면 Document Tree만 변화합니다.

루트 Document 추가 및 수정

하위 Document 추가 및 수정

Document 삭제

존재하지 않은 Document 접속

현재 편집 중인 Document의 하위 Document 렌더링

✅ PR 포인트 & 궁금한 점

UI에 신경쓰다보니 state나 이벤트 핸들러를 전달하는 방식에 대해 좀 더 깊이 고민하지 못한 것 같습니다. Sidebar와 DocumentEditPage 컴포넌트에서 포함하는 하위 컴포넌트들의 state를 동시에 제어하려다보니(e.g. Editor에서 Document의 제목을 수정하면 DocumentList에도 반영되게 하기) App에 이벤트 핸들러를 구현하게 됐습니다. 😢 여러 방법이 있을 것 같은데 적절한 방법을 생각해내기 어려웠습니다..!
코드가 중복되거나 흐름을 단번에 이해하기 어려운 부분이 있는데 어떻게 분리하고 파일 구조를 세팅하면 좋을지 궁금합니다.

* npm run dev로 실행

* Sidebar 내부에서 DocumentList 렌더링 * new 없이 생성한 경우에 대한 방어코드 작성 * util 함수(api, router, constants, helper) 추가

* storage util 함수 추가 * Page와 Editor 컴포넌트 분리

* localStorage에 document id 임시 저장

* reset.css 설정 * 문서 추가 버튼의 텍스트를 아이콘으로 대체 * Sidebar, DocumentList, Editor 컴포넌트에 적용

* request(url, options) -> fetchDocuments(documentId, options)

* contants -> constants 오타 수정

* DocumentList 항목 열기/닫기 토글 처리(localStorage에 저장) * 문서 제목 클릭 시 해당 문서 편집 화면 렌더링 * + 버튼 클릭 시 하위 문서 추가 * 삭제 버튼 클릭 시 해당 문서 삭제

* Sidebar에서 DocumentAddButton 컴포넌트 렌더링

* state 할당 방식 수정 * localStorage value 숫자형으로 통일

* mouseover, mouseout 이벤트에 문서 제목 요소 반영

* 하위 컴포넌트들끼리 전달하던 핸들러를 App에서 관리하도록 변경 * 핸들러: 추가(onAdd), 삭제(onDelete), 수정(onEdit) * 표현 변경: remove -> delete, editing -> edit

* 현재 편집 중인 문서의 하위 문서 링크 렌더링

* 존재하지 않는 페이지이면 alert, 첫 문서로 라우팅

* SidebarHeader 컴포넌트 구현(워크스페이스 이름) * DocumentList 스크롤바 추가

* 선택된 문서의 제목 굵게, 배경색 어둡게 처리

* opened_item => opened_items

* title 프로퍼티 설정

* title이 문자열인지 검사 * UNTITLED 또는 title 리턴

* Sidebar에서 렌더링한 DocumentAddButton을 DocumentList에서 렌더링하도록 변경

* DocumentEditPage와 Sidebar로 나누기

* dev -> start

minjongbaek

안녕하세요 유리님, 과제 수행하느라 고생하셨습니다~ 👏
코드에 일관성이 있고, 인덴트 수를 줄이려고 고민을 하신 것 같아요! 덕분에 리뷰가 수월했던 것 같습니다 👍
고민 중이신 UX 관련 이슈를 해결 할 수 있는 방법을 코멘트에 작성해두었습니다!

+) 스타일링 깔끔하게 잘하신 것 같아요!

src/styles/style.css

src/components/App.js

src/components/Sidebar/DocumentList.js

minjongbaek · 2022-11-19T02:54:42Z

src/components/Sidebar/Sidebar.js

+    onAdd,
+  });
+
+  this.render = async () => {


p4;
다른 컴포넌트들 처럼 현재 상태를 기반으로 렌더링하게끔 수정하는 것도 좋을 것 같아요!

src/components/Sidebar/DocumentAddButton.js

src/components/DocumentEditPage/DocumentEditPage.js

src/components/App.js

Park-min-hyoung

유리님 과제 하시느라 수고하셨습니다~ 정말 하나하나 세심하게 코드 작성하신 것 보고 놀랐네요..
많이 배워갑니다!!! 👍

src/components/App.js

src/utils/constants.js

src/components/DocumentEditPage/DocumentHeader.js

* install parcel

* filter로 삭제되는 id의 문서 제외

* 현재 문서와 삭제되는 문서의 id를 인자로 함께 전달

* setItem, getItem, removeItem -> setStorageItem, getStorageItem, removeStorageItem

* /documents/:id 생성하는 메서드 helper에 추가

* button의 padding 조정

glassk added 25 commits November 10, 2022 14:19

chore: 폴더 구조 세팅, npm 스크립트 추가

cb14e8e

* npm run dev로 실행

feat: Sidebar, DocumentList 컴포넌트 구현

cc2d8f2

* Sidebar 내부에서 DocumentList 렌더링 * new 없이 생성한 경우에 대한 방어코드 작성 * util 함수(api, router, constants, helper) 추가

feat: DocumentEditPage, Editor 컴포넌트 구현

2b4cbc9

* storage util 함수 추가 * Page와 Editor 컴포넌트 분리

feat: title이 없는 document Untitled로 표기

b6a5123

feat: Document 생성 request body 형식 변경

ac3673c

* localStorage에 document id 임시 저장

design: 컴포넌트 기본 스타일링

3828078

* reset.css 설정 * 문서 추가 버튼의 텍스트를 아이콘으로 대체 * Sidebar, DocumentList, Editor 컴포넌트에 적용

refactor: Documents fetch 호출 형식 변경

0b18965

* request(url, options) -> fetchDocuments(documentId, options)

feat: 글 제목과 document.title 동기화

a234e3f

rename: constants.js

ce9007d

* contants -> constants 오타 수정

feat: DocumentList 조회, 삭제, 추가 기능 구현

e762025

* DocumentList 항목 열기/닫기 토글 처리(localStorage에 저장) * 문서 제목 클릭 시 해당 문서 편집 화면 렌더링 * + 버튼 클릭 시 하위 문서 추가 * 삭제 버튼 클릭 시 해당 문서 삭제

feat: 루트 문서 추가 버튼 구현

0a89db0

* Sidebar에서 DocumentAddButton 컴포넌트 렌더링

feat: DocumentHeader 컴포넌트 구현

3f76150

* state 할당 방식 수정 * localStorage value 숫자형으로 통일

feat: DocumentList 문서 제목 ellipsis 처리

cade10b

* mouseover, mouseout 이벤트에 문서 제목 요소 반영

refactor: App 컴포넌트로 핸들러 분리

91bd0a6

* 하위 컴포넌트들끼리 전달하던 핸들러를 App에서 관리하도록 변경 * 핸들러: 추가(onAdd), 삭제(onDelete), 수정(onEdit) * 표현 변경: remove -> delete, editing -> edit

fix: 하위 문서 수정 시 전달되는 setState 인자 수정

f1ea665

fix: 스토리지에 동일한 id가 중복 저장되는 에러 해결

b8e6874

feat: DocumentFooter 컴포넌트 구현

e096a39

* 현재 편집 중인 문서의 하위 문서 링크 렌더링

feat: 404 Error, 뒤로가기 처리

454af02

* 존재하지 않는 페이지이면 alert, 첫 문서로 라우팅

feat: Sidebar Header와 스크롤바 추가

837e14e

* SidebarHeader 컴포넌트 구현(워크스페이스 이름) * DocumentList 스크롤바 추가

feat: 문서 목록에서 선택된 문서 하이라이트 처리

43b4583

* 선택된 문서의 제목 굵게, 배경색 어둡게 처리

feat: storage id 변경

5abc075

* opened_item => opened_items

fix: 현재 페이지의 하위 페이지 삭제 시 DocumentFooter 업데이트

8a16df8

feat: 아이콘 툴팁

be54a9b

* title 프로퍼티 설정

refactor: generateTitle 함수 분리

c5506e9

* title이 문자열인지 검사 * UNTITLED 또는 title 리턴

feat: 페이지 추가 버튼 DocumentList에서 렌더링하도록 수정

0739c20

* Sidebar에서 렌더링한 DocumentAddButton을 DocumentList에서 렌더링하도록 변경

glassk added 과제 리뷰 요청 🔥 매운맛 나영팀 labels Nov 16, 2022

glassk requested a review from feel5ny November 16, 2022 14:52

glassk self-assigned this Nov 16, 2022

glassk added the 피드백 요청 label Nov 16, 2022

glassk added 4 commits November 17, 2022 05:45

rename: components 구조 변경

9bf41b3

* DocumentEditPage와 Sidebar로 나누기

chore: npm 스크립트 명령어 수정

17d8cd2

* dev -> start

design: Sidebar 스타일 수정

d62ae8e

docs: README.md 수정

05c414a

minjongbaek reviewed Nov 19, 2022

View reviewed changes

Park-min-hyoung reviewed Nov 21, 2022

View reviewed changes

src/components/App.js Outdated Show resolved Hide resolved

src/components/App.js Outdated Show resolved Hide resolved

src/utils/constants.js Outdated Show resolved Hide resolved

src/components/DocumentEditPage/DocumentHeader.js Outdated Show resolved Hide resolved

chore: deploy

320b486

* install parcel

glassk closed this Nov 24, 2022

glassk deleted the 3/#4_kimyuri_working branch November 24, 2022 04:05

glassk restored the 3/#4_kimyuri_working branch November 24, 2022 04:43

glassk reopened this Nov 24, 2022

glassk added 11 commits November 24, 2022 17:53

fix: api endpoint

94b90f3

chore: deploy 방식 변경

f3e9c9d

refactor: 열린 토글 목록 관리 코드 개선

27e4bf5

* filter로 삭제되는 id의 문서 제외

refactor: 문서 삭제 핸들러 인자 변경

56c2448

* 현재 문서와 삭제되는 문서의 id를 인자로 함께 전달

fix: 문서 편집 중에도 focusout되는 에러 해결

eb5b0a4

refactor: �storage 메서드명 변경

4480d22

* setItem, getItem, removeItem -> setStorageItem, getStorageItem, removeStorageItem

refactor: 문자열 변수로 변경

6631da8

refactor: route url 생성 메서드 분리

81a9ddd

* /documents/:id 생성하는 메서드 helper에 추가

fix: 사이드바에 커서 올렸을 때 움직이는 현상 해결

7c67f9a

* button의 padding 조정

docs: README.md 수정

aa363d3

docs: README.md 수정

3ee56a5

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Mission4/김유리] - Project_Notion_VanillaJS #17

[Mission4/김유리] - Project_Notion_VanillaJS #17

glassk commented Nov 16, 2022 •

edited

Loading

minjongbaek left a comment •

edited

Loading

minjongbaek Nov 19, 2022

Park-min-hyoung left a comment •

edited

Loading

[Mission4/김유리] - Project_Notion_VanillaJS #17

Are you sure you want to change the base?

[Mission4/김유리] - Project_Notion_VanillaJS #17

Conversation

glassk commented Nov 16, 2022 • edited Loading

📌 과제 설명

배포: https://yuri-notion.vercel.app

실행 방법

디렉토리 구조

👩‍💻 요구 사항과 구현 내용

루트 Document 추가 및 수정

하위 Document 추가 및 수정

Document 삭제

존재하지 않은 Document 접속

현재 편집 중인 Document의 하위 Document 렌더링

✅ PR 포인트 & 궁금한 점

minjongbaek left a comment • edited Loading

Choose a reason for hiding this comment

minjongbaek Nov 19, 2022

Choose a reason for hiding this comment

Park-min-hyoung left a comment • edited Loading

Choose a reason for hiding this comment

glassk commented Nov 16, 2022 •

edited

Loading

minjongbaek left a comment •

edited

Loading

Park-min-hyoung left a comment •

edited

Loading