Q&A 페이지 뷰 작성

[suyons]

문제 배경

1. 시간 부족으로 Q&A 메뉴 구현 시 게시판 CRUD 기능 구현이 불가하다 판단하여 정적 컨텐츠를 표시하는 방향으로 전략을 변경.
2. App Router 동적 라우팅에 대한 이해도가 부족하여 Path variable을 활용한 컨텐츠 매핑이 어려울 것으로 판단.

해결 방안

shadcn/ui에서 제공하는 예시 중 Mail에서 불필요 Panel을 삭제하는 방식으로 수정하여 활용하기로 제안함.

GitHub source https://github.com/shadcn-ui/ui/tree/main/apps/www/app/(app)/examples/mail

작업 시 해당 코드를 가져오는 과정에서 import 구문을 수정하는 방법을 몰라 작업 시작에 어려움을 겪음. 따라서, 틀 준비는 @suyons 가 진행하고, 텍스트 작성은 @taeyounh 가 진행할 예정.

문제 1: Warning

Detected multiple Jotai instances. It may cause unexpected behavior with the default store.

오류 분석

1. useBoard() 훅을 부모 컴포넌트와 자식 컴포넌트 둘에서 같이 사용중인 것이 문제의 원인이라 판단
2. 부모 컴포넌트에서 자식 컴포넌트 props로 전달하려 했으나, 아직 동작 원리에 대한 이해가 부족하여 리팩토링을 바로 진행하지 못함.

board.tsx

export function Board({ articles, defaultLayout = [265, 440, 655] }: BoardProps) {
  const [board] = useBoard()

article-list.tsx

export function ArticleList({ items }: ArticleListProps) {
  const [board, setBoard] = useBoard()

문제 2: 세로 길이와 스크롤

아래 사진과 같이 부모 요소의 세로 길이에 맞추어 길이가 정해지지

오류 분석

CSS 클래스 중 부모 요소의 100%를 받아 오는 h-full 속성이 해당 요소에 포함되지 않아 발생한 문제로 판단.

1차 해결 시도

1. 예상 요소의 클래스에 h-full을 시도했으나 해결되지 않음
2. Tabs 컴포넌트에는 className 속성이 없어 추가할 수 없음.

<Tabs defaultValue="all">
  <TabsContent value="all" className="m-0 h-full">
    <ArticleList items={articles} />
  </TabsContent>
</Tabs>

[suyons]

Close #78