[FE] 새로운 챕터/토픽 생성

[youzysu]

진행할 작업 설명

책 상세 페이지 - 새로운 챕터/토픽 생성

TO DO

• Store: chapterList, topicList Atom 생성 및 상태 관리
• View: 책 상세 페이지 UI

[youzysu]

챕터, 토픽 Store Data Structure 고민

1. Chapter 내부에서 배열로 관리

• 챕터 안에 토픽이 속하는 개념이기 때문에 type Chapter = Info & { topics: Info[] };으로 타입 정의

문제점

• 특정 챕터의 특정 토픽의 정보 데이터 업데이트 시 이중 배열 탐색 필요
• chapterIndex, topicIndex로 탐색해야 함 O(n2)

import { atom, useAtom, useAtomValue, useSetAtom } from "jotai";

export type Info = {
  title: string;
};

export type Chapter = Info & { topics: Info[] };

type ChaptersAtomActionMap = {
  UPDATE_CHAPTER: { chapterIndex: number; info: Info };
  DELETE_CHAPTER: { chapterIndex: number };
  ADD_TOPIC: { chapterIndex: number };
  DELETE_TOPIC: { chapterIndex: number; topicIndex: number };
  UPDATE_TOPIC: { chapterIndex: number; topicIndex: number; info: Info };
};

type ChaptersAtomAction =
  | { type: "ADD_CHAPTER" }
  | {
      [K in keyof ChaptersAtomActionMap]: {
        type: K;
        payload: ChaptersAtomActionMap[K];
      };
    }[keyof ChaptersAtomActionMap];

const chapterListAtom = atom<Chapter[]>([]);

const useChapterListAtom = atom(
  (get) => get(chapterListAtom),
  (_, set, action: ChaptersAtomAction) => {
    switch (action.type) {
      case "ADD_CHAPTER":
        set(chapterListAtom, (prev) => [
          ...prev,
          {
            title: "",
            topics: [],
          },
        ]);
        break;
      case "UPDATE_CHAPTER":
        set(chapterListAtom, (prev) =>
          prev.map((chapter, index) =>
            index === action.payload.chapterIndex
              ? { ...chapter, ...action.payload.info }
              : chapter
          )
        );
        break;
      case "DELETE_CHAPTER":
        set(chapterListAtom, (prev) =>
          prev.filter((_, index) => index !== action.payload.chapterIndex)
        );
        break;
      case "ADD_TOPIC":
        set(chapterListAtom, (prev) => {
          return prev.map((chapter, index) =>
            index === action.payload.chapterIndex
              ? { ...chapter, topics: [...chapter.topics, { title: "" }] }
              : chapter
          );
        });
        break;
      case "DELETE_TOPIC":
        set(chapterListAtom, (prev) =>
          prev.map((chapter, index) =>
            index === action.payload.chapterIndex
              ? {
                  ...chapter,
                  topics: chapter.topics.filter(
                    (_, index) => index !== action.payload.topicIndex
                  ),
                }
              : chapter
          )
        );
        break;
      // TODO: 성능 개선: 어떤 데이터 구조로 관리하는게 좋을지 고민해보기 (챕터와 토픽 아톰을 따로 만들까?)
      case "UPDATE_TOPIC":
        set(chapterListAtom, (prev) =>
          prev.map((chapter, index) =>
            index === action.payload.chapterIndex
              ? {
                  ...chapter,
                  topics: chapter.topics.map((topic, index) =>
                    index === action.payload.topicIndex
                      ? { ...topic, ...action.payload.info }
                      : topic
                  ),
                }
              : chapter
          )
        );
        break;
    }
  }
);

const useChapterListValue = () => useAtomValue(useChapterListAtom);
const useSetChapterList = () => useSetAtom(useChapterListAtom);
const useChapterList = () => useAtom(useChapterListAtom);

export { useChapterList, useChapterListValue, useSetChapterList };

개선 방향

• Topic Store를 Chapter와 분리
• Map 자료구조로 type TopicMap = Map<number, Info[]> [chapterIndex: number]: topicInfo 를 맵핑하여 관리하기
• 문제점: 특정 챕터 삭제 시 해당 챕터 이후로 Map 모두 수정해줘야 함 (어차피 배열도 내부적으로는 index 변경해줘야 하니까 성능 상으로는 유사할 것 같다.)
• 관련 소스코드: useTopicList, useChapterList

추가 개선점

• 챕터와 토픽 중복 로직을 어떻게 개선할까?
• 위의 방법이 최선일까?

[youzysu]

새로운 챕터 등록 UI 고민

1. 새로운 페이지로 라우팅 처리

• WHY? 새로운 책 추가 완료 후 바로 챕터 페이지로 이동하도록 플로우 처리하기 위함
• Panel 기본 tab index를 전체 챕터 목록 조회로

2. 모달: 책 추가 이후 유저가 바로 챕터를 추가하고 싶지 않은데 모달로 Blocking하면 불편할 듯 함 -> 그럼 챕터 추가 페이지로 라우팅하는 것도 마찬가지 아닌가? -> 그래도 blocking 느낌은 덜할듯
3. Filter Panel

• 기존 챕터 조회 Tab 목록에 챕터 추가 탭을 추가하는건 나머지는 목록 조회인데 한탭만 추가인 점이 어색해보임
• Tabs에 포함은 되는데 스타일을 커스텀하게 분리해서 적용하면?
• 책 추가와 동일한 Page UI 흐름으로 FAB로 추가하되, Panel UI 사용하면? MUI 에러 (Tab UI에는 반영하고 싶지 않음)
  
  ✔️ 4. BookChapters에 ViewerMode 상태로 조건부 렌더링하기

[youzysu]

책 상세 페이지 의존성 개선 필요

• navigate state로 페이지 간에 data를 넘기는 방식을 어떻게 개선해야 할까?
• 왜 state로 data를 넘겨주고 있는가? 책 챕터 조회 페이지에서 /main/chapters/:bookId Header에서 책 이름과 북클럽 정보를 보여주기 위해서, Header는 상위 Layout 컴포넌트에서 렌더링해주고 있어 Location을 사용하는 방법을 선택
• 개선 필요성: 복잡해지면 디버깅이 어려워질 것 같다.

[youzysu]

Library 페이지 트러블 슈팅 기록

• Grid2 Material UI 사용 시 Uncaught TypeError: styled_default is not a function
• 해결방법: Button import 방식 변경
  import { Button, Tooltip } from "@mui/material"; 대신 import Button from "@mui/material/Button";
• 참고: Popper.js:9 Uncaught TypeError: styled_default is not a function mui/material-ui#32727