Feat/#409-K: 선택된 회의록 id URL에 반영

[se030]

🤠 개요

• Closes Feat: 선택된 회의록 정보 URL params로 관리 #409

• 선택 회의록 id를 URL에 추가하고, 전역 상태를 사용해 불필요한 EventEmitter 사용을 제거했어요.

💫 설명

• pathname 정규식이 수정됐어요. 정규식 이해를 돕기 위해 주석을 추가했습니다.

  // App.tsx
    const validPathPattern = /^\/workspace(\/\d+(\/.+)?)?$/; // /workspace(/숫자(/아무거나)) 와 처음부터 끝까지 일치하는 패턴
    if (user && !validPathPattern.test(pathname)) {
      navigate('/workspace');
    }
  
  // ...
          <Routes>
            <Route path="/" element={<LoginPage />} />
            <Route path="/oauth" element={<OAuthPage />} />
            <Route path="/workspace/*" element={<WorkspacePage />} />

• Workspace 컴포넌트에서 선택 회의록 id를 알 수 있고 URL에 따라서 동작합니다.

  // Workspace.tsx
  const params = useParams();
  const momId = params['*'];
  
  // ...
  
  useEffect(() => {
    if (!workspace) return;
    const { moms } = workspace;
  
    if (!momId && moms.length) {
      navigate(moms[0]._id); // 선택 회의록이 없는 경우 첫번째 회의록으로 navigate
    }
  }, [workspace, momId]);

• MomList 아이템들의 onSelect 핸들러는 선택 회의록 정보를 리셋하고 선택된 id로 navigate합니다.

  // MomList.tsx
    const onSelect = (id: string) => {
      setSelectedMom(null);
      navigate(id);
    };

• Workspace 쪽에서 URL 정보를 사용해 MOM_EVENT.SELECT를 emit하는 흐름이에요. 동일 이벤트에 의해 발생하는 동작 흐름이 비슷한 위치에 있어야 이해하기 쉬울 것 같아 관련 로직은 모두 Workspace 컴포넌트로 옮겼습니다.

  // 선택 회의록이 변경되면 클라이언트 상태를 변경하기 전에 회의록 소켓 서버에 알려줘야 함
  useEffect(() => {
    if (momId && momSocket) {
      const message: MomMessage.Select = { id: momId };
      momSocket.emit(MOM_EVENT.SELECT, message);
    }
  }, [momId, momSocket]);

🌜 고민거리

• 작업하면서 상태관리 라이브러리 사용이 결정돼서 Context 관련 리팩토링은 진행하지 않을게요.

  • Closes Refactor: Context 타입 가드 훅 리팩토링 #410

• 마이그레이션 작업에서 앱 전체적으로 상태에 대한 관심사가 제대로 분리되어 있는지, 비동기로 업데이트되는 상태들에 대해서 로딩이나 Skeleton이 제대로 적용되고 있는지 확인이 필요할 것 같아요.

  • 아래처럼 Skeleton 대신 빈 영역이 렌더링되고 있어 해결 방법을 고민하고 있어요. (상태 관련 리팩토링이 필요해요.)

    

📷 스크린샷 (Optional)

[dohun31]

진짜 상태들이 다 여기저기 흩어져있어서 애먹었네요
관심사 분리 시급해요,,,😂

[dohun31]

각 폴더들에 index.ts 만들어서 import문 정리하는 의견 제시합니다..

이유는 너무 import ... from ...이 많아서 import순서가 섞여있으면 뭔가 보기 힘들어요

import { Workspace, Mom, MomList } from "@src/components"
import { 
  SelectedMomContext, 
  WorkspaceContext,
 } from "@src/hooks/context"

[se030]

각 폴더들에 index.ts 만들어서 import문 정리하는 의견 제시합니다..

이유는 너무 import ... from ...이 많아서 import순서가 섞여있으면 뭔가 보기 힘들어요

import { Workspace, Mom, MomList } from "@src/components"
import { 
  SelectedMomContext, 
  WorkspaceContext,
 } from "@src/hooks/context"

배럴 파일로 만들면 원본 파일을 찾아갈 때 두 depth를 들어가야 하는데 어떤게 더 불편할까요?
이제보니 자동완성 경로도 src/components, comopnents/ 이런식으로 섞여있네요. 여러가지 대공사가 필요해요.

[dohun31]

각 폴더들에 index.ts 만들어서 import문 정리하는 의견 제시합니다..
이유는 너무 import ... from ...이 많아서 import순서가 섞여있으면 뭔가 보기 힘들어요

import { Workspace, Mom, MomList } from "@src/components"
import { 
  SelectedMomContext, 
  WorkspaceContext,
 } from "@src/hooks/context"

배럴 파일로 만들면 원본 파일을 찾아갈 때 두 depth를 들어가야 하는데 어떤게 더 불편할까요? 이제보니 자동완성 경로도 src/components, comopnents/ 이런식으로 섞여있네요. 여러가지 대공사가 필요해요.

뭐가됐든 먼저 하나로 통일 시켜야겠네요

[dohun31]

아 정규식도 상수로 빼서 관리하는건 어때요?

[se030]

아 정규식도 상수로 빼서 관리하는건 어때요?

정규식 특성 상 가독성이 떨어지긴 하는데, 어떻게 명확한 네이밍을 할지도 고민이고 지금 사용되는 정규식 패턴이 서로 달라서 상수화가 의미있을지 잘 모르겠어요. 의미를 쉽게 파악할 수 있게 주석을 한번 추가해볼게요!

정규식을 읽기 쉽게 쓸 수 있게 해주는 아래와 같은 라이브러리들도 있는데 두 라인을 위해서 도입하기에는 과한 느낌이에요. 언젠가 유용하게 쓸 수 있을지 모르니 남겨둘게요 😗

• https://github.com/VerbalExpressions/JSVerbalExpressions

• https://github.com/danielroe/magic-regexp

[se030]

PR Details 수정했어요 리뷰하실 때 참고해주세요 👍🏻

[dohun31]

너무 깔끔해졌어요
이제야 각자의 관심사를 찾아간 느낌이에요 ㅋㅋㅋㅋ
세영님 대단해요