Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Mission4/정충일] - Project_Notion_VanillaJS #37

Open
wants to merge 8 commits into
base: 3/#4_tooooo1
Choose a base branch
from

Conversation

tooooo1
Copy link

@tooooo1 tooooo1 commented Nov 20, 2022

📌 과제 설명

바닐라 JS만을 이용해 노션을 클로닝합니다.
기본적인 레이아웃은 노션과 같으며, 스타일링, 컬러값 등은 원하는대로 커스텀합니다.

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

기본 요구사항

바닐라 JS만을 이용해 노션을 클로닝합니다.
기본적인 레이아웃은 노션과 같으며, 스타일링, 컬러값 등은 원하는대로 커스텀합니다.

  • 글 단위를 Document라고 합니다. Document는 Document 여러개를 포함할 수 있습니다.
  • 화면 좌측에 Root Documents를 불러오는 API를 통해 루트 Documents를 렌더링합니다.
  • Root Document를 클릭하면 오른쪽 편집기 영역에 해당 Document의 Content를 렌더링합니다.
  • 해당 Root Document에 하위 Document가 있는 경우, 해당 Document 아래에 트리 형태로 렌더링 합니다.
  • Document Tree에서 각 Document 우측에는 + 버튼이 있습니다. 해당 버튼을 클릭하면, 클릭한 Document의 하위 Document로 새 Document를 생성하고 편집화면으로 넘깁니다.
  • 편집기에는 기본적으로 저장 버튼이 없습니다. Document Save API를 이용해 지속적으로 서버에 저장되도록 합니다.
  • History API를 이용해 SPA 형태로 만듭니다.
  • 루트 URL 접속 시엔 별다른 편집기 선택이 안 된 상태입니다.
  • /documents/{documentId} 로 접속시, 해당 Document 의 content를 불러와 편집기에 로딩합니다.

보너스 요구사항

  • 기본적으로 편집기는 textarea 기반으로 단순한 텍스트 편집기로 시작하되, 여력이 되면 div와 contentEditable을 조합해서 좀 더 Rich한 에디터를 만들어봅니다.
  • 편집기 최하단에는 현재 편집 중인 Document의 하위 Document 링크를 렌더링하도록 추가합니다.
  • 편집기 내에서 다른 Document name을 적은 경우, 자동으로 해당 Document의 편집 페이지로 이동하는 링크를 거는 기능을 추가합니다.

그외 개선하거나 구현했으면 좋겠다는 부분이 있으면 적극적으로 구현해봅니다!

✅ 피드백 반영사항

✅ PR 포인트 & 궁금한 점

Copy link

@beni1026 beni1026 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

안녕하세요 충일님 ~~ 마지막 코드 리뷰 하러 왔습니다. !!
과제 하시느라 수고 많으셨어요 😎
앞으로도 화이팅 입니다

Comment on lines +38 to +47
switch (className) {
case 'post-delete':
onDelete(id);
return;
case 'post-create':
onCreate(id);
return;
default:
break;
}

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Switch 문으로 처리하니까 깔끔하고 좋네요 !

Comment on lines +21 to +30
onDelete: async (postId) => {
await deletePost(postId);
this.setState();
history.replaceState(null, null, '/');
const $page = document.querySelector('.post-edit-page');
if ($page) {
$page.remove();
}
},
});

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

삭제하기 전에 삭제 확인 창이 뜬다면 더 좋을 것 같아요~~

@@ -0,0 +1,55 @@
const API_END_POINT = 'https://kdt.roto.codes';

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

API 주소가 노출되지 않도록 .gitignore 파일에 추가하는 게 좋을 것 같아요 ~~

Comment on lines +87 to +93
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

잘 몰라서 그런데 보통 대부분의 태그에 대해 위와 같은 css처리를 하나요 ??

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@beni1026 css reset이라고 불리워지는데 예전엔 브라우저들마다 스펙이 들쭉날쭉해서 사용했고요, 지금은 써야 한다는 의견도 있고 아니라고 생각하는 의견도 있어요.

await fetchDocuments(`/documents/${postId}`, {
method: 'DELETE',
});
};
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

fetch 함수들에서 전체적으로 모두 await을 사용하고 있는데, await은 사용부에서 하는 걸 가정하고 그냥 return fetchDocuments... 만 해주는게 어떨까 싶습니다.

Comment on lines +87 to +93
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@beni1026 css reset이라고 불리워지는데 예전엔 브라우저들마다 스펙이 들쭉날쭉해서 사용했고요, 지금은 써야 한다는 의견도 있고 아니라고 생각하는 의견도 있어요.

@sairion
Copy link

sairion commented Nov 23, 2022

전체적으로 잘 구현해주신 것 같은데 완성해보시지요!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants