Refactor/#120 클라이언트 crdt 라이브러리 적용 #128

Ludovico7 · 2024-11-16T10:31:06Z

📝 변경 사항

클라이언트 CRDT 라이브러리 적용 #120

🔍 변경 사항 설명

연결리스트 구조에서 CRDT 구조로 변경
키입력 핸들러 수정
- 탭 핸들러 추가: indent 증가
- 화살표 핸들러 수정: 왼쪽 오른쪽 클릭으로 블록간 이동 가능 및 실시간 캐럿 위치 저장
블록 렌더링 방식 변경
- 아이콘 컴포넌트 구현
- indent에 따라 블록에 패딩 설정

🙏 질문 사항

현재 문제가 되는 부분은 다음과 같습니다
- 블록에 텍스트가 있고, 첫번째 캐럿에서 백스페이스를 눌러 이전 블록과 텍스트를 합칠 때, 마지막 글자가 사라지는 버그
- 왼쪽, 오른쪽 화살표 클릭으로 블록을 이동할 때, 캐럿의 위치가 0이 아닌 1이 되는 버그
  해당 버그를 수정해보려고 했는데 아직 해결이 되지 않았습니다... 이외에도 테스트 해보시고 버그나는 부분 있으면 피드백 주시면 수정하겠습니다!

📷 스크린샷 (선택)

2024-11-16.7.29.03.mov

✅ 작성자 체크리스트

Self-review: 코드가 스스로 검토됨
Unit tests 추가 또는 수정
로컬에서 모든 기능이 정상 작동함
린터 및 포맷터로 코드 정리됨
의존성 업데이트 확인
문서 업데이트 또는 주석 추가 (필요 시)

hyonun321 · 2024-11-16T14:13:14Z

client/src/hooks/useMarkdownGrammer.ts

+            } else {
+              // tab: 들여쓰기 증가
+              console.log("tab");
+              const maxIndent = 3;


maxIndent는 따로 constants에서 관리하는게 좋겠군요 !

최대 인덴트를 정하는게 좋을까요? 정하면 조금 편해질 거 같긴 한데 어떻게 생각하시나요?

정하는거 찬성입니당!! 지금처럼 3개가 좋아보입니당!

hyonun321 · 2024-11-16T14:13:40Z

client/src/hooks/useMarkdownGrammer.ts

+              }
+            } else {
+              // tab: 들여쓰기 증가
+              console.log("tab");


console.log가 있습니닷!

앗 수정하겠습니다!

hyonun321 · 2024-11-16T14:20:21Z

client/src/components/block/Block.tsx

+/* eslint-disable jsx-a11y/no-static-element-interactions */
+import { BlockCRDT } from "@noctaCrdt/Crdt";
+import { Block as CRDTBlock, Char as CRDTChar } from "@noctaCrdt/Node";
+import { BlockId } from "@noctaCrdt/NodeId";


수고하셨습니다!

Block은 컴포넌트 이름으로 활용하고 계셔서 여기서 CRDTBlock으로 바꿔서 사용하셨군요!

DB스키마 상에서는
BlockCRDT -> Block 안에 텍스트를 출력할때 관리하는 CRDT고

EditorCRDT -> 텍스트 Block 단위를 링크드리스트로 관리하는 CRDT로 알고있습니다.

올바르게 잘 적용하신 것 같습니다.

CRDTBlock과 BlockCRDT.. 이 네이밍은 어떻게 해야 명시성이 있을지 고민을 해봐야겠네요.🤔

hyonun321 · 2024-11-16T14:20:44Z

client/src/components/block/Block.tsx

-    const handleClick = (e: React.MouseEvent) => {
-      e.preventDefault();
-      onClick(node.id);
-    };


상당히 block관련 props가 줄어들었네요 😂

hyonun321 · 2024-11-16T14:28:45Z

한글입력시 와 를 입력하면 ㅇ오와 로 입력되는 문제가 있네요. 이부분은 서윤님의 composing 처리방법을 적용하면 해결되지 않을까 하네요 !

Ludovico7 · 2024-11-16T15:20:00Z

변경하면서 한글 입력부분은 서윤님 코드를 반영하려고 아직 작성하지 않았습니다. 이후에 추가 버그 수정하면서 서윤님이 작성해주신 한글 처리부분 작성하겠습니다!

pipisebastian

아직 덜 봤습니다...! 오늘(일요일)까지 보겠습니닷!! 2번째 버그도 같이 살펴보겠습니당!

그리고, 사소한 부분 (컨벤션 집착..)에 코멘트를 많이 달았습니다,, 연규님이 생각하시기에 아니라고 생각되시는 부분은 편하게 말씀해주세요!!
그리고,, 코드 보면서 감탄했습니다,,, 정말,, 고생하셨습니다,,,, 👍👍👍 최곱니다,,, 🙇‍♂️

앗 그런데 git flow 방식이, Feature, Release, Hotfix 이렇게 나뉘어집니다!
그래서 지금 붙혀진 Refactor가 아니라 Feature가 맞을거에요! 다음에는 Feature로 해주시면 좋을 것 같습니당! 앞에 붙히는거는 git flow init으로 초기설정 가능합니다!

참고로 source tree로,, 딸깍 한번에 다 가능합니다 ㅎㅁㅎ

pipisebastian · 2024-11-16T16:31:14Z

client/src/features/editor/Editor.tsx

+  const [editorState, setEditorState] = useState<EditorStateProps>({
+    clock: editorCRDT.current.clock,
+    linkedList: editorCRDT.current.LinkedList,
+    currentBlock: null as BlockId | null,


요 부분은 그냥 null로 해도 될 것 같은데, as를 붙히신 이유가 있을까요??

props에서 타입이 blockId | null이라 맞춘 것 같은데 빼도 상관 없을 것 같습니다!

pipisebastian · 2024-11-16T16:37:30Z

client/src/hooks/useMarkdownGrammer.ts

+export const useMarkdownGrammer = (props: {
+  editorCRDT: EditorCRDT;
+  editorState: EditorStateProps;
+  setEditorState: React.Dispatch<
+    React.SetStateAction<{
+      clock: number;
+      linkedList: BlockLinkedList;
+      currentBlock: BlockId | null;
+    }>
+  >;
+}) => {
+  const { editorCRDT, editorState, setEditorState } = props;


요 부분은 따로 Interface로 분리하고, 처음부터 구조분해할당으로 가져오면 더 좋을 것 같아요!

Suggested change

export const useMarkdownGrammer = (props: {

editorCRDT: EditorCRDT;

editorState: EditorStateProps;

setEditorState: React.Dispatch<

React.SetStateAction<{

clock: number;

linkedList: BlockLinkedList;

currentBlock: BlockId | null;

}>

>;

}) => {

const { editorCRDT, editorState, setEditorState } = props;

interface useMarkdownGrammerProps {

editorCRDT: EditorCRDT;

editorState: EditorStateProps;

setEditorState: React.Dispatch<

React.SetStateAction<{

clock: number;

linkedList: BlockLinkedList;

currentBlock: BlockId | null;

}>

>;

}

export const useMarkdownGrammer = ({

editorCRDT,

editorState,

setEditorState,

}: useMarkdownGrammerProps) => {

좋은 것 같습니다 반영하겠습니다!

pipisebastian · 2024-11-16T16:58:12Z

client/src/features/editor/Editor.tsx

-
-  const handleCompositionStart = useCallback(() => {
-    setIsComposing(true);
+  useEffect(() => {


useEffect은 제일 하단에 위치시키기로 했었습니당!

확인했습니다!

pipisebastian · 2024-11-16T19:41:45Z

client/src/hooks/useMarkdownGrammer.ts

+              } else {
+                const prevBlock =
+                  currentIndex > 0 ? editorCRDT.LinkedList.findByIndex(currentIndex - 1) : null;
+                if (prevBlock) {
+                  currentContent.split("").forEach((char) => {
+                    prevBlock.crdt.localInsert(prevBlock.crdt.read().length, char);
+                  });
+                  prevBlock.crdt.currentCaret = prevBlock.crdt.read().length;
+                  editorCRDT.localDelete(currentIndex);
+                  updateEditorState(prevBlock.id);
+                }


1번째 버그 (1)

블록에 텍스트가 있고, 첫번째 캐럿에서 백스페이스를 눌러 이전 블록과 텍스트를 합칠 때, 마지막 글자가 사라지는 버그

ex) 123 + 45 => 1234

해당 부분을 먼저 이렇게 바꿔야할 것 같습니다!

Suggested change

} else {

const prevBlock =

currentIndex > 0 ? editorCRDT.LinkedList.findByIndex(currentIndex - 1) : null;

if (prevBlock) {

currentContent.split("").forEach((char) => {

prevBlock.crdt.localInsert(prevBlock.crdt.read().length, char);

});

prevBlock.crdt.currentCaret = prevBlock.crdt.read().length;

editorCRDT.localDelete(currentIndex);

updateEditorState(prevBlock.id);

}

} else {

const prevBlock =

currentIndex > 0 ? editorCRDT.LinkedList.findByIndex(currentIndex - 1) : null;

if (prevBlock) {

const prevBlockEndCaret = prevBlock.crdt.read().length; // ✅ 여기서 먼저 마지막 위치 계산 (prevBlockEndCaret)

currentContent.split("").forEach((char) => {

prevBlock.crdt.localInsert(prevBlock.crdt.read().length, char);

});

prevBlock.crdt.currentCaret = prevBlockEndCaret; // 🚨 여기서 prevBlock.crdt.read().length 로 계산해버리면, 이미 crdt로 insert 다 된 상태에서 마지막 caret위치를 가져오게 됩니다.

editorCRDT.localDelete(currentIndex);

updateEditorState(prevBlock.id); // 🚨 또한 여기서 state 값을 바꾸면서, Editor.tsx -> handleBlockInput -> useEffect에서 텍스트 삭제 로직이 돕니다. -> 그래서 삭제로직에서 마지막 caret 위치를 아예 삭제해버립니다. (2번째 버그 설명에서 더 자세하게 설명하겠습니다!)

e.preventDefault(); // ✅ 그래서 이거를 추가했습니다! 그러면 텍스트 삭제 로직이 돌지 않습니다. 만약 해당 코드를 추가하지 않으면 이젠 1번째 블록의 마지막 글자가 사라집니다 ex) 123 + 45 => 1245

}

}

2024-11-17.4.53.54.mov

감사합니다!!! 반영하겠습니다!

pipisebastian · 2024-11-16T19:46:48Z

client/src/features/editor/Editor.tsx

+          block.crdt.localDelete(caretPosition);
+          block.crdt.currentCaret = caretPosition;


1번째 버그 (2)

이 코드가 범인이었습니다.. 여기에 console.log("너가 범인이다!") 하면 출력이 됩니다..

이유는 아까 useMarkdwonGrammer.tsx -> updateEditorState(prevBlock.id); 에서 state값을 바꾸면서, 해당 코드가 돌게 됩니다. 여기서 텍스트 삭제 로직이 돌고, caret 위치에 따라 삭제됩니다.

pipisebastian · 2024-11-16T20:08:08Z

변경하면서 한글 입력부분은 서윤님 코드를 반영하려고 아직 작성하지 않았습니다. 이후에 추가 버그 수정하면서 서윤님이 작성해주신 한글 처리부분 작성하겠습니다!

코드가,, 한줄 밖에 없을 겁니다.. 핫핫..

pipisebastian · 2024-11-16T20:10:47Z

client/src/components/block/Block.style.ts

+  width: "full",
+  minHeight: "spacing.lg",
+  margin: "spacing.sm 0",
+  padding: "spacing.sm",


요거 그냥 "sm"으로 해도 동작됩니다!

앗 제가 말씀드리는걸 깜빡했는데 panda css 확장프로그램이 있습니다,,

이런식으로 정의해놓은 토큰값을 띄워줍니다!

pipisebastian · 2024-11-16T20:14:00Z

client/src/components/block/Block.style.ts

+  alignItems: "center",
+  position: "relative",
+  width: "full",
+  minHeight: "spacing.lg",


spacing 이 간격 관련해서만 sm, md, lg 픽셀값을 정한거라, "spacing.lg"가 아니라 "lg"로 불러올 수 있도록 해놨습니다!

그런데 minHeight은 간격 관련된게 아니라, "lg"로 하면 적용이 안될겁니다.. 연규님이 하신 방식이 적용이 되는 이유는, 아예 토큰 값 자체를 불러와서 적용이 되는 겁니당! 그래서 이건 간격 관련이 아니라 아예 "16px"등으로 값을 쓰는게 더 좋아보여요!

pipisebastian · 2024-11-16T20:15:30Z

client/src/components/block/Block.tsx

+import { BlockCRDT } from "@noctaCrdt/Crdt";
+import { Block as CRDTBlock } from "@noctaCrdt/Node";
+import { BlockId } from "@noctaCrdt/NodeId";
+import React, { memo, useEffect, useRef } from "react";


React 18버전 이후부터는 따로 React를 import 안해줘도 될거에요!

pipisebastian · 2024-11-16T20:25:24Z

client/src/components/block/Block.style.ts

+
+export const blockContainerStyle = cva({
+  base: {
+    ...baseBlockStyle,


요렇게 뺀 것도 깔끔해보이는데요! 그렇지만 이렇게 하면 panda css eslint가 오류를 잡지 못합니다ㅜㅜ
규칙에 따라 자동으로 고칠 수도 있어서, 조금 더 일관성있는 코드로 작성할 수 있습니다!

pipisebastian · 2024-11-16T20:25:42Z

client/src/components/block/Block.style.ts

  textStyle: "display-medium16",
+  flex: "1 1 auto", // 변경: flex-grow: 1, flex-shrink: 1, flex-basis: auto
+  minWidth: "0", // 추가: flex item의 최소 너비를 0으로 설정
  outline: "none",
  borderRadius: "radii.xs",


요것도 그냥 "xs"로 사용할 수 있습니다!

pipisebastian · 2024-11-16T20:42:25Z

client/src/components/block/IconBlock.tsx

+import React from "react";
+
+interface IconBlocknProps {
+  type: string;
+  index?: number; // ol일 때 순서를 위한 prop
+}
+
+export const IconBlock: React.FC<IconBlocknProps> = ({ type, index }) => {
+  let content;
+
+  if (type === "ul") {
+    content = (
+      <div style={{ marginRight: "8px" }}>
+        <span>•</span>
+      </div>
+    );
+  } else if (type === "ol") {
+    content = (
+      <div style={{ marginRight: "8px" }}>
+        <span>{index}.</span>
+      </div>
+    );
+  } else if (type === "checkbox") {
+    content = (
+      <div style={{ marginRight: "8px" }}>
+        <input type="checkbox" />
+      </div>
+    );
+  } else {
+    content = null;
+  }
+
+  return content;
+};


React.FC 타입이 안정성에 있어서 지양하는게 좋다고 하더라구요..! (자세한건 조사를 못했습니다..)
그리고 type의 경우에도 nocta의 ElementType 을 재사용하면 좋을 것 같은데, 어떻게 생각하시나요??

Suggested change

import React from "react";

interface IconBlocknProps {

type: string;

index?: number; // ol일 때 순서를 위한 prop

}

export const IconBlock: React.FC<IconBlocknProps> = ({ type, index }) => {

let content;

if (type === "ul") {

content = (

<div style={{ marginRight: "8px" }}>

<span>•</span>

</div>

);

} else if (type === "ol") {

content = (

<div style={{ marginRight: "8px" }}>

<span>{index}.</span>

</div>

);

} else if (type === "checkbox") {

content = (

<div style={{ marginRight: "8px" }}>

<input type="checkbox" />

</div>

);

} else {

content = null;

}

return content;

};

import { ElementType } from "@noctaCrdt/Interfaces";

interface IconBlockProps {

type: ElementType;

index?: number;

}

export const IconBlock = ({ type, index = 1 }: IconBlockProps) => {

const getIcon = () => {

switch (type) {

case "ul":

return "•";

case "ol":

return `${index}.`;

case "checkbox":

return <input type="checkbox" />;

default:

return null;

}

};

const icon = getIcon();

if (!icon) return null;

return (

<div style={{ marginRight: "8px" }}>

<span>{icon}</span>

</div>

);

};

그리고 해당 코드처럼 중복되는 코드를 조금 더 줄일 수 있을 것 같아요!

pipisebastian · 2024-11-16T20:59:18Z

client/src/components/block/Block.style.ts

 const baseBlockStyle = {
+  display: "flex",


혹시 block파일은 feature/editor/component 부분에 넣는거 어떻게 생각하시나요??
이건 editor 피처에서만 관리되는 것 같아서요! 여기 src/components 쪽은 버튼, 모달, 레이아웃같은 공통된 부분만 넣는걸로 생각했습니다!

pipisebastian · 2024-11-16T21:01:05Z

client/src/hooks/useMarkdownGrammer.ts

@@ -0,0 +1,254 @@
+import { EditorCRDT, BlockCRDT } from "@noctaCrdt/Crdt";


여기 hook도 feature/editor/hook부분에 따로 빼는 거 어떨까요?? src/hooks은 정말 여러곳에서 쓰이는 hook을 모아둔다고 생각했습니다! (아직까지 그럴만한 hook은 나오지 않았지만요...)

pipisebastian · 2024-11-16T21:03:22Z

client/src/utils/markdownPatterns.ts

@@ -4,38 +4,47 @@ const MARKDOWN_PATTERNS: Record<string, MarkdownPattern> = {
  h1: {
    regex: /^#$/,
    length: 1,
-    createElement: () => ({ type: "h1" }),


여기 hooke도 feature/editor 쪽에 넣는건 어떨까요??

pipisebastian · 2024-11-16T21:18:30Z

client/src/hooks/useMarkdownGrammer.ts

+    (e: React.KeyboardEvent<HTMLDivElement>) => {
+      const createNewBlock = (index: number): Block => {
+        const { node: newBlock } = editorCRDT.localInsert(index, "");
+        // TODO: 블록 타입이 초기화가 안됨???


혹시 이건 무슨 버그인지 설명해주실 수 있을까요?? 궁금합니다!

pipisebastian · 2024-11-16T21:22:36Z

client/src/utils/markdownPatterns.ts

  },
  h3: {
    regex: /^###$/,
    length: 3,
-    createElement: () => ({ type: "h3" }),
+    createElement: () => ({ type: "h3", length: 3 }),


##, ###이 제대로 동작을 안하더라구요! 코드 순서를 ### -> ## -> # 으로 하면 기대한대로 동작이 되더라구요!

const MARKDOWN_PATTERNS: Record<string, MarkdownPattern> = { h3: { regex: /^###$/, length: 3, createElement: () => ({ type: "h3", length: 3 }), }, h2: { regex: /^##$/, length: 2, createElement: () => ({ type: "h2", length: 2 }), }, h1: { regex: /^#$/, length: 1, createElement: () => ({ type: "h1", length: 1 }), },

Ludovico7 · 2024-11-17T02:38:56Z

서윤님 피드백 정말 감사합니다! 컨벤션 뿐만이 아니라 버그 수정도 해주셔서 일부 문제되는 부분들 해결할 수 있었습니다! 피드백 주신 부분 수정하고 push 하겠습니다!

hyonun321 · 2024-11-17T04:43:46Z

연규님 화이팅입니다 !

pipisebastian

고생하셨습니다... 저 캐럿 위치 에러는 이유를 모르겠네요ㅜㅜ 디버깅 시간이 많이 걸릴 것 같아서 어프로브하겠습니닷...

pipisebastian · 2024-11-17T16:09:17Z

client/src/features/editor/components/block/Block.tsx

+      if (blockRef.current && isActive) {
+        const selection = window.getSelection();
+        if (!selection) return;
+
+        const range = document.createRange();
+        const content =
+          blockRef.current.firstChild || blockRef.current.appendChild(document.createTextNode(""));
+        const position = Math.min(textCRDT.current.currentCaret, content.textContent?.length || 0);
+        range.setStart(content, position);
+        range.collapse(true);
+        selection.removeAllRanges();
+        selection.addRange(range);
+      }


연규님 연규님!!! 2번째 버그 해결했습니다... 아무리 디버깅해봐도 current Caret은 제대로 들어가는데, 화면상에서만 캐럿위치가 반영이 안되더라구요. 그래서 그냥 requestAnimationFrame로 프레임 맞춰줬더니 해결했습니다 🥺🥺🥺

Suggested change

if (blockRef.current && isActive) {

const selection = window.getSelection();

if (!selection) return;

const range = document.createRange();

const content =

blockRef.current.firstChild || blockRef.current.appendChild(document.createTextNode(""));

const position = Math.min(textCRDT.current.currentCaret, content.textContent?.length || 0);

range.setStart(content, position);

range.collapse(true);

selection.removeAllRanges();

selection.addRange(range);

}

const setFocusAndCursor = () => {

if (blockRef.current && isActive) {

const selection = window.getSelection();

if (!selection) return;

const range = document.createRange();

const content =

blockRef.current.firstChild ||

blockRef.current.appendChild(document.createTextNode(""));

const position = Math.min(

textCRDT.current.currentCaret,

content.textContent?.length || 0,

);

range.setStart(content, position);

range.collapse(true);

selection.removeAllRanges();

selection.addRange(range);

}

};

requestAnimationFrame(() => { // ✅ 추가

setFocusAndCursor();

});

2024-11-18.1.06.48.mov

minjungw00

서윤님이 피드백을 어마어마하게 남겨주셨군요..ㄷㄷ 수고많으셨습니다!

Ludovico7 added 12 commits November 16, 2024 18:06

feat: 블록별 아이콘 컴포넌트 구현

5452a58

refactor: 블록 컴포넌트 CRDT 데이터 구조로 수정

c45136a

refactor: 기존 타입 삭제 후 CRDT 라이브러리 타입 사용

eed414c

fix: 텍스트 있을 때 타입 변경안되는 버그 수정

448428e

refactor: 키입력 핸들러 CRDT 구조에 맞게 수정

528e3a0

refactor: 에디터 컴포넌트 CRDT 구조에 맞게 수정

542ad25

fix: 체크박스 정규표현식 수정

2b04b2d

feat: 체크박스 아이콘 생성

afa0453

style: 체크박스 스타일 수정

cd02065

style: lint 설정

d1c9cb7

refactor: 불필요한 파일 삭제

814aad0

fix: 불필요한 파라미터 삭제

76f4d1f

hyonun321 reviewed Nov 16, 2024

View reviewed changes

Ludovico7 requested review from minjungw00, pipisebastian and hyonun321 November 16, 2024 14:14

Ludovico7 self-assigned this Nov 16, 2024

Ludovico7 added Bug 기능 또는 UI에서 발생한 오류나 예상치 못한 동작을 해결 FE 프론트엔드 작업 Feat 새로운 기능 추가나 기존 기능 확장 작업 P1 긴급/즉시 반영 labels Nov 16, 2024

Ludovico7 added this to the 마크다운 문법을 지원한다. milestone Nov 16, 2024

hyonun321 reviewed Nov 16, 2024

View reviewed changes

pipisebastian reviewed Nov 16, 2024

View reviewed changes

Ludovico7 added 7 commits November 17, 2024 11:39

refactor: 불필요한 파일 삭제

9457572

refactor: 블록 컴포넌트 feature/editor/components 디렉토리로 이동

609176e

refactor: 서윤님 피드백 반영

ea01775

fix: h2, h3 제대로 인식 못하는 버그 수정

fd228a7

refactor: 키입력 커스텀 훅 feature/editor/hooks 디렉토리로 이동

4130379

refactor: markdownPatterns 파일 feature/editor/utils 디렉토리로 이동

4d3cab0

refactor: lint 적용

544c0c7

pipisebastian approved these changes Nov 17, 2024

View reviewed changes

pipisebastian reviewed Nov 17, 2024

View reviewed changes

minjungw00 approved these changes Nov 18, 2024

View reviewed changes

github-actions bot merged commit a3131b7 into dev Nov 18, 2024
6 checks passed

		block.crdt.localDelete(caretPosition);
		block.crdt.currentCaret = caretPosition;

		@@ -0,0 +1,254 @@
		import { EditorCRDT, BlockCRDT } from "@noctaCrdt/Crdt";

Refactor/#120 클라이언트 crdt 라이브러리 적용 #128

Refactor/#120 클라이언트 crdt 라이브러리 적용 #128

Conversation

Ludovico7 commented Nov 16, 2024

📝 변경 사항

🔍 변경 사항 설명

🙏 질문 사항

📷 스크린샷 (선택)

✅ 작성자 체크리스트

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

hyonun321 commented Nov 16, 2024

Ludovico7 commented Nov 16, 2024

pipisebastian left a comment • 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

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

1번째 버그 (1)

Choose a reason for hiding this comment

pipisebastian Nov 16, 2024 • edited Loading

Choose a reason for hiding this comment

1번째 버그 (2)

pipisebastian commented Nov 16, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

pipisebastian Nov 16, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

pipisebastian Nov 16, 2024 • 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

Choose a reason for hiding this comment

Ludovico7 commented Nov 17, 2024

hyonun321 commented Nov 17, 2024

pipisebastian left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

minjungw00 left a comment

Choose a reason for hiding this comment

pipisebastian left a comment •

edited

Loading

pipisebastian Nov 16, 2024 •

edited

Loading

pipisebastian Nov 16, 2024 •

edited

Loading

pipisebastian Nov 16, 2024 •

edited

Loading