[Mission5/이채연] Project_Notion_VanillaJs 과제 #46

colorkite10 · 2023-07-06T14:57:26Z

📌 과제 설명

바닐라 JS를 이용하여 Notion 페이지를 클로닝하였습니다.
npx server -s를 입력하시면 실행 가능합니다.

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

✅ PR 포인트 & 궁금한 점

목적

history API를 이용하여 SPA를 구현하는 법, 그리고 컴포넌트끼리 데이터를 주고 받는 것에 익숙해지는 것
그동안 데브코스에서 배운 강의 내용들을 최대한 체화하는 것

912686c
: 강의에서 배운 대로 LinkButton을 활용하였었으나, 루트 문서를 생성하는 것과 하위 문서를 생성하는 역할을 통일하고 싶어서 건드렸다가 fix의 연속을 겪었습니다. 코드를 작성할 때 구조를 먼저 생각하는 것에 중요성을 다시금 깨닫게 된 계기가 되었읍니다... state를 관리해주는 것은 정말 어려운 것 같습니다. 😢😢😢😢

새로운 루트 문서 생성 시 기본 값으로 새로운 문서를 바로 생성하려고 했지만, 오류를 늦게 발견하는 바람에 이전에 하던 방식으로 급히 수정하였습니다.
컴포넌트 간 전달하는 데이터의 흐름을 읽기가 쉽지 않은데, 다들 어떤 식으로 파악하시는지 궁금합니다.
localStorage에 대해 학습한 뒤여서 하위 문서의 토글 여부를 localStorage에서 관리하도록 하였는데, 보통 토글에 관한 정보는 어떻게 다루나요?

수정할 사항

새로운 루트 문서 생성 시 기본값을 가진 새 문서로 생성
상위 문서 삭제 시 간헐적으로 하위 문서가 삭제되지 않는 문제 원인 찾고 해결
한글 입력 시 가장 마지막 글자가 날라가는 문제 =>찐노션도 한 글자 날아감
다른 사람 코드 참고하면서 추상화 해보기

추가할 기능

rich한 에디터 구현해보기
편집기 최하단에는 현재 편집 중인 Document의 하위 Document 링크를 렌더링하도록 추가해보기

소감

과제 하면서 재미도 있었지만 아쉬움이 많이 남습니다. 좀 이해가 간다 싶을 때에 마감기간이 되어 버려서...
부족한 코드이지만 이해하고 적용하고자 노력해봤습니다!

bomi8489

채연님 이번 과제 수행하시느라 너무 고생하셨습니다!😄😄

bomi8489 · 2023-07-10T07:17:00Z

src/components/DocumentList.js

+    white-space: nowrap;
+    height: 100vh;
+    backgroundColor: #EDECE9;
+  `;


스타일을 css파일로 따로 빼지않고 js파일에 포함시킨 이유가 있나요?? 👀

제가 CSS를 아직 공부 중이기 때문에...입니다!!

bomi8489 · 2023-07-10T07:22:38Z

src/components/DocumentList.js

+        id: id,
+        displayed: "none",
+      });
+    }


하위 document를 펼치는 토글 여부를 로컬 스토리지에 저장하는 방식으로 새로고침했을때 사이드바가 초기화되지 않게금 하셨네요!! 👍👍 저도 이렇게 구현하고 싶었는데 모든 document를 로컬스토리지에 저장하는 방식인데 document가 많아진다면 로컬스토리지에 부담이 가지 않을까 생각을 해서 적용하지 않았는데 어떻게 생각하시나요?

저도 토글버튼 누를 때마다 로컬 스토리지에 무섭게 쌓이는 데이터들 보고 식겁했지만, 이 프로젝트가 볼륨이 크지 않아서 이정도는 감당해야지! 하는 배포로 진행했습니다.

jgjgill

채연님! 이번 노션 과제 정말 수고 많으셨습니다..! ☺️
저도 과제가 재밌기도 하면서 아쉬움과 많은 자극을 받고 있습니다!
채연님의 코드를 보면서도 채연님의 생각과 많은 고민을 볼 수 있어서 좋았습니다!
리뷰 이후에도 수정하면서 완전히 채연님 것으로 만들었으면 합니다. 남은 과제에서도 같이 화이팅해요! 🙇‍♂️

jgjgill · 2023-07-10T13:38:35Z

src/components/DocumentEditPage.js

+        content: "",
+      });
+
+      if (tempDocument.title !== "" || tempDocument.content !== "") {


Suggested change

if (tempDocument.title !== "" || tempDocument.content !== "") {

if (!(tempDocument.title === "" && tempDocument.content === "")) {

똑같이 동작하는 코드인 것 같아서 제안드려봅니다..! 🤔

@jgjgill 제 생각에는 OR 연산자가 더 나은 것 같습니다!! AND 연산자는 2개 다 비교해야하지만 OR 연산자 같은 경우 한 가지의 경우만 만족하면 되기 때문입니다 😀

소소한 TMI

형변환을 통한 검증도 가능할 것 같아요!

Suggested change

if (tempDocument.title !== "" || tempDocument.content !== "") {

if (!tempDocument.title || !tempDocument.content) {

jgjgill · 2023-07-10T13:51:33Z

src/components/DocumentList.js

+  $documentList.addEventListener("click", (e) => {
+    const $li = e.target.closest("li");
+
+    if (!$li) return;


👍👍👍

jgjgill · 2023-07-10T13:55:30Z

src/components/DocumentEditPage.js

+        if (confirm("임시저장된 값을 불러올까요?")) {
+          this.setState({
+            ...this.state,
+            doc: tempDocument,
+          });
+          return;
+        }


임시 저장 기능을 구현해서 사용자에게 좋은 것 같아요!! 😆

저도 임시 저장 기능을 구현한 것은 매우 좋다고 생각돼요!!! 👍

다만 위에 적은 것 처럼 fetchDocument 라는 함수에서 기대할 수 있는 행동인지는 살짝 의문이 있어요.

1eecan

안녕하세요 채연님! 과제 잘 봤습니다!!ㅎㅎ
오류도 수정하시면서 뭔가 최대한 많은 기능들을 구현하시려는 노력이 돋보인 코드였습니다!
저도 컴포넌트형 사고를 하고 싶어서 채연님과 같은 고민을 했었는데요!
괜히 상태관리 라이브러리들이 나온게 아니구나~ 라고 저는 일단 생각하고 있습니다😅
리팩토링된 코드가 정말 기대가 된다~ 라고 생각하면서 코드를 읽어보았습니다! 기대할게요!! 수고하셨습니다!!

1eecan · 2023-07-10T13:52:31Z

src/utils/storage.js

+  } catch {
+    console.log("페이지가 어디로 갔나봐요. 새로고침을 눌러주세요!");
+  }


멘토님이 말씀하셨던 사용자 입장을 생각한 에러메세지!! 멋져요😆

P5;

우선 사용자 입장을 생각한 에러 처리 너무 멋지네요~~~! 👍
다만 소소한 우려로 사용자를 위한 에러 문구를 여기서 띄우는 것이 맞을까? 하는 생각이 들었어요.
(추가로 setItem과 페이지가 어디로 갔나봐요 에러는 어떤 상관관계가 있는지 궁금해 졌어요.)

만약 문구를 상황에 따라 다르게 하고 싶다면? console.log가 아닌 다른 방식으로 안내를 하고 싶다면? 등과 같은 상황을 맞이하면 난처 할 것 같거든요.

지금 상황에서는 사용하는 쪽에서 핸들링 할 수 있게 하는 게 좋지 않을까 싶은데 채연님은 어떠신가요?
(이런 경우 사용하는 곳에서 try catch를 하거나 콜백 패턴 등을 사용하기도 해요.)

1eecan · 2023-07-10T13:59:17Z

src/components/DocumentPage.js

+        removeItem(selectedDocId);
+        removeItem(`temp-document-${selectedDocId}`);


temp-document-selectedDocId와 selectedDocId 두개를 지워주는군요! 두개의 키가 하는 역할이 다른건가요?!🤔

1eecan · 2023-07-10T14:06:08Z

src/components/App.js

+  const documentEditPage = new DocumentEditPage({
+    $target,
+    initialState: {
+      docId: "new",


이 new라는 부분 때문에 그런건지 모르겠는데, add a document 버튼을 누르면 id가 string 타입으로 들어가고 하위 문서 생성을 하면 id가 number 타입으로 들어가는 것 같은데요! 한 번 확인해보시면 좋을 것 같습니다!

P3;

docId의 ID가 주로 가지는 의미를 생각해보면 "중복되지 않는 유니크한 값" 이라고 생각돼요.
그랬을 때 new라는 값은 이후에 변경될 지언정 적절한지는 살짝 의문이 들었어요.

만약 id 값을 만드는게 막연하다면 uuid 같은 값을 만들어서 부여해보면 어떨까요?

nayeon-hub

채연님 PR을 보니 과제를 해결하려고 정말 많은 고민을 하셨던 것 같습니다🥹 과제하시느라 수고 많으셨습니다!
저는 데이터 흐름을 파악할 때 컴포넌트들의 state들과 어디서 바뀌는지를 적어봅니다.. 그러면 각 state에 어떤 프로퍼티가 있는지도 덜 헷갈리고, 데이터의 흐름도 조금은 파악하기 쉬워지는 것 같습니다
PR에 적힌 수정할 사항들의 문제 원인은 무엇이었을지 궁금합니다 나중에 해결하시면 알려주세요🔔 코드 구경하러 오겠습니다!

nayeon-hub · 2023-07-10T17:14:19Z

src/components/DocumentList.js

+    if (name === "displayChild") {
+      const $ul = $li.childNodes[7];
+
+      if (!$ul) {
+        setItem(id, {
+          id: id,
+          displayed: "none",
+        });
+        push(`/documents/${id}`);
+        return;
+      }
+
+      if ($ul.style.display === "") {
+        $ul.style.display = "none";
+        setItem(id, {
+          id: id,
+          displayed: "none",
+        });
+      } else {
+        $ul.style.display = "";
+        setItem(id, {
+          id: id,
+          displayed: "",
+        });
+      }
+      push(`/documents/${id}`);
+    } else if (name === "title") {
+      push(`/documents/${id}`);
+    } else if (name === "add") {
+      onCreateDocument(id);
+      fetchDocument();
+    } else if (name === "delete") {
+      onDeleteDocument(id);
+    }


p5; if-else문으로도 충분하지만 switch문으로 바꾸면 name에 대한 다양한 상황을 좀 더 한눈에 볼 수 있을 것 같습니다 사소한 의견입니다!

nayeon-hub · 2023-07-10T17:19:26Z

src/components/DocumentList.js

+                  ${this.displayDocumentList(doc.documents)}
+                  </ul>`


어떻게 트리 구조를 구현하셨을까 궁금했는데 재귀함수를 사용하셨군요! 제게는 아직 재귀를 사용한 구현은 어렵네요..!

sukvvon

채연님!! 과제 하느라 고생하셨습니다. 새벽에 과제를 함께 하면서 서로 sidebar 하위 document를 어떻게 구현할지 고민했던 기억이 나네요!! 앞으로도 함께 잘 해쳐나가면 좋겠습니다! 감사합니다! 👏🙋🏻‍♂️😁

sukvvon · 2023-07-10T09:34:35Z

src/components/LinkButton.js

+  $target.appendChild($linkButton);
+  this.render = () => {
+    $linkButton.textContent = this.state.text;
+  };
+  this.render();


개행이 되었으면 좋을 것 같다는 생각이 듭니다!! 🤔

src/components/DocumentPage.js

sukvvon · 2023-07-10T17:11:18Z

src/components/App.js

+
+  this.setState = (nextState) => {
+    this.state = nextState;
+    documentPage.setState(nextState);


Suggested change

documentPage.setState(nextState);

documentPage.setState(this.state);

this.state가 nextState 값이기 때문에 setState(this.state)가 적절할 것 같습니다!! 😁

sukvvon · 2023-07-10T17:19:33Z

src/components/DocumentPage.js

+        const [, , currentPageId] = pathname.split("/");
+
+        if (selectedChildIds.includes(Number(currentPageId))) {
+          for (const childId of selectedChildIds) {


childId보다는 selectedChildId로 수정하는 것이 더 연관성이 있어보입니다!! 🤔

sukvvon · 2023-07-10T17:30:10Z

src/components/DocumentPage.js

+          for (const childId of selectedChildIds) {
+            await deleteDoc(childId);
+          }
+          history.replaceState(null, null, "/");


replaceState를 활용해서 없어질 예정인 문서 주소를 root 주소로 바꿔주는 모습이 디테일하신 것 같습니다!! 👍👍

sukvvon · 2023-07-10T17:35:07Z

src/components/DocumentPage.js

+            await deleteDoc(childId);
+          }
+          history.replaceState(null, null, "/");
+          push("/");


삭제될 예정인 주소를 root 주소로 바꿔준 후 root 주소를 history API에 추가하시는 이유가 궁금합니다!! 🤔

sukvvon · 2023-07-10T19:32:17Z

src/components/App.js

+    const docs = await request("/documents", {
+      method: "GET",
+    });


fetch 전역 함수에서 GET 메서드의 경우 생략이 가능한걸로 알고있는데 혹시 명확성을 위해 이렇게 하신건가요? 궁금합니다!! 🤔

생략 가능한 줄 몰랐는데 덕분에 하나 더 알고 갑니다!

sukvvon · 2023-07-10T19:37:23Z

src/components/DocumentEditPage.js

+        content: "",
+      });
+
+      if (tempDocument.title !== "" || tempDocument.content !== "") {


@jgjgill 제 생각에는 OR 연산자가 더 나은 것 같습니다!! AND 연산자는 2개 다 비교해야하지만 OR 연산자 같은 경우 한 가지의 경우만 만족하면 되기 때문입니다 😀

eastroots92

채연님 고생 많으셨어요!!!

코드를 보면서 추가로 고민해보시면 좋을 포인트를 짚어본다면

함수의 목적을 명확하게하고 하나의 역할만 하게 한다. 목적이 드러나는 네이밍을 한다.
책임과 역할을 명확하게 구분한다. (ex. 사용하는 곳에서 책임 져야할까? 아니면 내부에서 책임을 져야할까?)

와 같은 부분이었어요.

코드에 코멘트로 남겨두기도 했는데 혹시 궁금한 것들이 있다면 티타임때 물어봐주세요~~!
고생하셨습니다~~

eastroots92 · 2023-07-13T01:55:46Z

src/api/api.js

+    if (res.ok) {
+      return await res.json();
+    }
+
+    throw new Error("API 연결에 오류가 발생했습니다.");
+  } catch (e) {


P3;

res.ok가 아닌 경우에는 어떻게 핸들링 하나요?
4xx번대 에러와 5xx번대 에러의 경우 각기 다르게 핸들링 해야할 것 같은데 여기서는 throw new Error("API 처리 중 이상 발생"); 로 퉁쳐지는 것 같아서요!

ask; 퀴즈

request 함수 관점에서
서버에서 정상적으로 응답이 온 경우!
특히 유저가 실수 해서 난 Error인 4xx번대 에러인 경우 이를 코드상 에러라고 보는 것이 맞을까요?
아니면 정상적으로 동작하는 것으로 보는게 좋을까요?
만약 정상이라고 본다면 어떻게 처리하는 것이 좋을까요?

eastroots92 · 2023-07-13T01:58:10Z

src/api/api.js

+      ...options,
+      headers: {
+        "Content-Type": "application/json",
+        "x-username": "colorkite10",
+      },


P1;

이렇게 하게 된다면 headers를 변경하고 싶어도 변경하지 못할 것 같아요.
아래와 같이 headers 또한 수정 가능하게 해두면 어떨까요?

Suggested change

...options,

headers: {

"Content-Type": "application/json",

"x-username": "colorkite10",

},

...options,

headers: {

"Content-Type": "application/json",

"x-username": "colorkite10",

...options?.headers

},

eastroots92 · 2023-07-13T02:03:44Z

src/components/App.js

+  const documentEditPage = new DocumentEditPage({
+    $target,
+    initialState: {
+      docId: "new",


P3;

docId의 ID가 주로 가지는 의미를 생각해보면 "중복되지 않는 유니크한 값" 이라고 생각돼요.
그랬을 때 new라는 값은 이후에 변경될 지언정 적절한지는 살짝 의문이 들었어요.

만약 id 값을 만드는게 막연하다면 uuid 같은 값을 만들어서 부여해보면 어떨까요?

eastroots92 · 2023-07-13T02:07:03Z

src/components/App.js

+    } else if (pathname.indexOf("/documents/") === 0) {
+      const [, , docId] = pathname.split("/");
+
+      documentEditPage.setState({ docId });
+
+      this.setState({
+        ...this.state,
+        docId,
+      });
+    }
+  };


p2;

route의 역할을 생각해보면
"url 값에 따라 적절한 화면을 띄워준다." 가 주된 역할일 것 같아요.
그렇다보니 특정 페이지의 state를 바꾼다는 것이 살짝 어색하게 느껴져요.

만약 edit 뿐 아니라 또 다른 페이지들이 생겨난다면..? 이 안에서 if문과 state가 쌓이게 될 것 같은데 그랬을 때 가독성이 나빠질 것 같아요.

여기서는 documentEditPage를 띄우는 것 까지만 하고.
documentEditPage 내에서 init하는 과정에서 docId를 가져와 init 하는 것이 더 명확한 구분이라고 생각되는데 채연님은 어떠신가요?

eastroots92 · 2023-07-13T02:11:36Z

src/components/App.js

+    }
+  };
+
+  const fetchDocuments = async () => {


P5;

fetch라는 의미를 생각해보면 "무언가를 가져온다" 라는 의미를 가지고 있다고 생각해요. 개발적으론 API 등에서 요청해서 가져온다 라는 의미를 가지고 있죠.

그렇다보니 fetch 함수를 호출한다고 했을 때 response 값이 return 될 것이라 기대가 되는데 여기서는 setState 도 하다보니 기대와 정말 같은 행동일까? 하는 생각이 들었어요.

사용하는 곳에서 await fetchDocuments(); 대신 const response = await fetchDocuments() 와 같이 사용하거나 initDocument() 와 같이 행동이 유추 가능한 네이밍을 해보는 것은 어떨까요?

eastroots92 · 2023-07-13T02:25:01Z

src/components/DocumentEditPage.js

+        content: "",
+      });
+
+      if (tempDocument.title !== "" || tempDocument.content !== "") {


소소한 TMI

형변환을 통한 검증도 가능할 것 같아요!

Suggested change

if (tempDocument.title !== "" || tempDocument.content !== "") {

if (!tempDocument.title || !tempDocument.content) {

eastroots92 · 2023-07-13T02:26:53Z

src/components/DocumentEditPage.js

+        if (confirm("임시저장된 값을 불러올까요?")) {
+          this.setState({
+            ...this.state,
+            doc: tempDocument,
+          });
+          return;
+        }


저도 임시 저장 기능을 구현한 것은 매우 좋다고 생각돼요!!! 👍

다만 위에 적은 것 처럼 fetchDocument 라는 함수에서 기대할 수 있는 행동인지는 살짝 의문이 있어요.

eastroots92 · 2023-07-13T02:29:12Z

src/components/DocumentList.js

+    if (name === "displayChild") {
+      const $ul = $li.childNodes[7];
+
+      if (!$ul) {


ask;

childNodes array 7번쨰에 ul이 있다는 것을 항상 보장할 수 있을까요?
7번쨰에 ul이 있다는 것을 알아채기 쉽지 않고, 추후 서비스를 만들다 보면 에러가 날 가능성이 꽤 높아보여서요.

eastroots92 · 2023-07-13T02:30:54Z

src/components/DocumentPage.js

+    initialState: {
+      text: "add a document",
+      link: "/documents/new",
+    },


오호 버튼에 상태를 넘기는 것이 흥미롭네요~!

eastroots92 · 2023-07-13T02:34:39Z

src/utils/storage.js

+  } catch {
+    console.log("페이지가 어디로 갔나봐요. 새로고침을 눌러주세요!");
+  }


P5;

우선 사용자 입장을 생각한 에러 처리 너무 멋지네요~~~! 👍
다만 소소한 우려로 사용자를 위한 에러 문구를 여기서 띄우는 것이 맞을까? 하는 생각이 들었어요.
(추가로 setItem과 페이지가 어디로 갔나봐요 에러는 어떤 상관관계가 있는지 궁금해 졌어요.)

만약 문구를 상황에 따라 다르게 하고 싶다면? console.log가 아닌 다른 방식으로 안내를 하고 싶다면? 등과 같은 상황을 맞이하면 난처 할 것 같거든요.

지금 상황에서는 사용하는 쪽에서 핸들링 할 수 있게 하는 게 좋지 않을까 싶은데 채연님은 어떠신가요?
(이런 경우 사용하는 곳에서 try catch를 하거나 콜백 패턴 등을 사용하기도 해요.)

Co-authored-by: Choi Won Suk <[email protected]>

colorkite10 added 24 commits July 4, 2023 21:57

Chore: 초기 설정

194e851

Feat: api 연결 후 사이드바에 documents들 표시하기

4255ac7

Feat: +버튼 누를 시 새로운 document 생성

d709e0e

Feat: Edit page 생성

2bc808d

선택한 document의 content 불러오기 기능 시도 중

2f75227

Feat: 제목 없고 내용 없는 문서 편집 시 기본 placeholder 문구 설정

1c54656

Feat: localStorage 세팅 후 document 클릭 시 edit page에 title과 content 띄움

ba96536

Fix: 새로운 document 생성 시 content가 null이어서 나는 오류 해결

b2d4e9d

Feat: 새로운 root문서 추가 기능 구현

4be8e7f

Feat: 새로운 root 문서 클릭 버튼 DocumentList에 붙이고 LinkButton 컴포넌트 삭제

912686c

Fix: 보고 있지 않은 문서 삭제 시에도 기본 화면으로 돌아가는 문제 해결

1f23e72

Feat: documentList 토글 기능 구현

c9c8484

Fix: add a document 버튼 누를 시 리스트에 즉시 반영되지 않는 문제 해결

1223509

Feat: 상위 document 삭제 시 하위 document도 삭제와 경로 설정

d25017c

Fix: 하위 문서가 displyed일 때 상위 문서의 이름 클릭 시 토글 닫히는 문제 해결

58316f9

Docs: 주석 제거 및 필요 없는 로직 삭제

2adfa7b

Rename: 파일 구조 변경

b3776ca

Design: css 스타일 적용

9b40e5c

Fix: root document 생성 버튼 아래를 눌러도 새 문서가 생기는 문제 해결

495a583

Fix: root 문서 생성 후 아무런 텍스트 입력하지 않고 다시 root 문서 생성 시 해당 화면에 머무르는 문제 해결

5f3c043

Fix: 문서 리스트 클릭 시 해당 글 제목과 내용이 안 불러오지던 문제 해결

98a5d09

Docs: console.log 삭제

95c463a

Try: 무언갈 시도했으나 되지 않은 마지막 지점

76afe40

Fix: 못 고치던 오류 타협

46ff36b

colorkite10 added 동근팀 🔥 매운맛 피드백 요청 과제 리뷰 요청 labels Jul 6, 2023

colorkite10 requested a review from eastroots92 July 6, 2023 14:57

colorkite10 self-assigned this Jul 6, 2023

bomi8489 reviewed Jul 10, 2023

View reviewed changes

jgjgill reviewed Jul 10, 2023

View reviewed changes

1eecan reviewed Jul 10, 2023

View reviewed changes

nayeon-hub reviewed Jul 10, 2023

View reviewed changes

sukvvon reviewed Jul 10, 2023

View reviewed changes

eastroots92 reviewed Jul 13, 2023

View reviewed changes

colorkite10 and others added 2 commits July 19, 2023 00:14

Refactor: 불필요한 공백 제거

58df77b

Co-authored-by: Choi Won Suk <[email protected]>

Refactor: 불필요한 async 키워드 제거

fcdca72

Co-authored-by: Choi Won Suk <[email protected]>

	if (tempDocument.title !== "" \|\| tempDocument.content !== "") {
	if (!(tempDocument.title === "" && tempDocument.content === "")) {

	if (tempDocument.title !== "" \|\| tempDocument.content !== "") {
	if (!tempDocument.title \|\| !tempDocument.content) {

		removeItem(selectedDocId);
		removeItem(`temp-document-${selectedDocId}`);

	documentPage.setState(nextState);
	documentPage.setState(this.state);

[Mission5/이채연] Project_Notion_VanillaJs 과제 #46

Are you sure you want to change the base?

[Mission5/이채연] Project_Notion_VanillaJs 과제 #46

Conversation

colorkite10 commented Jul 6, 2023 • edited Loading

📌 과제 설명

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

✅ PR 포인트 & 궁금한 점

목적

수정할 사항

추가할 기능

소감

bomi8489 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jgjgill left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sukvvon Jul 10, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

1eecan left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

nayeon-hub left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

nayeon-hub Jul 10, 2023 • edited Loading

Choose a reason for hiding this comment

sukvvon left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sukvvon Jul 10, 2023 • edited Loading

Choose a reason for hiding this comment

sukvvon Jul 10, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sukvvon Jul 10, 2023 • edited Loading

Choose a reason for hiding this comment

eastroots92 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

colorkite10 commented Jul 6, 2023 •

edited

Loading

sukvvon Jul 10, 2023 •

edited

Loading

nayeon-hub left a comment •

edited

Loading

nayeon-hub Jul 10, 2023 •

edited

Loading

sukvvon Jul 10, 2023 •

edited

Loading

sukvvon Jul 10, 2023 •

edited

Loading

sukvvon Jul 10, 2023 •

edited

Loading