타임라인 기능 구현

[ShinjungOh]

issue

• close 타임라인 기능 구현 #125

구현 사항

🚧 기능이 완성되지 않았지만, 대면 작업을 앞두고 현재 상황을 공유하고자 올리는 PR입니다 🚧

app/wiki/groups/uuid/page.tsx 경로에 그룹 페이지를 새로 만들었어요.
이 문서는 유저가 그룹을 등록하는 시점에 생성됩니다.
페이지에는 그룹 이름, 결성일(2025.05.05 형식), 내용(그룹 설명), 타임라인이 있어요.
그룹 문서는 기존의 위키 문서들과 동일하게 TOC도 들어가고, 같은 레이아웃이 적용돼요.

이미지

영상

CleanShot.2025-08-31.at.21.11.24.1.mp4

타임라인 라이브러리 도입

타임라인 UI를 구현하기 위해 react-chrono 라이브러리를 도입했어요.
리액트와 타입스크립트로 만들어졌고, 커스터마이징이 간단하고 작업을 빠르게 할 수 있기 때문에 이 라이브러리를 선택했습니다.

논의하고 싶은 부분(선택)

전반적인 기획 부분에서 같이 얘기를 나눠보고 싶어요!
우선 7기 회의에서 정해진 사항을 공유합니다. 각 기획에 대해서 어떻게 생각하시는지도 궁금합니다..!

• 문서 생성 시 디폴트로 소속을 추가하도록 추가하려고 합니다. 우테코에 들어온 이상 데일리조, 프로젝트 조 등 무조건 소속이 있을 것이라 판단했습니다.
  • 현재 소속/기수 항목이 있어서 텍스트를 어떻게 추가해야 할지 고민됩니다.

• 이벤트는 사용자가 따로 폼을 제출해서 등록하는 것으로 기획했습니다. (미구현)
  • 타임라인 UI에서 '이벤트 추가' 버튼을 클릭해서 날짜, 제목, 사진을 사용자에게 입력할 수 있도록 구상했어요.
• 소속은 소속 추가 버튼을 눌러 모달이 뜨고, 모달에서 기존 소속을 검색해서 선택합니다.
  • 또는 찾는 소속이 만들어져 있지 않다면, 문서를 추가하는 방식으로 생각해봤어요.

🫡 참고사항

그룹 페이지에 접근하려면 /wiki/groups/[uuid]로 들어가면 됩니다.

[jinhokim98]

고생하셨습니다~
PR 끊어가면서 구현하는 것 리뷰하는 입장에서 너무 좋은 것 같아요. 변경사항이 적으니 더 꼼꼼하게 볼 수 있는 것 같아요.

몇 가지 코멘트 적어뒀지만 대부분 개선 사항이라 우선 Approve 드릴게요!

논의하고 싶은 점에 대해서 제가 생각하는 답을 해볼게요.

1. 소속/기수 관련

지금 프로필에 하드코딩된 소속/기수의 의미는 FE/BE/AN, N기를 의미했는데 소속 필드가 생겼으니 저는 파트라고 정해봐도 좋을 것 같습니다.
더 좋은 이름이 있다면 그 방향으로ㅎㅎ

2. 이벤트 추가 관련

처음엔 이벤트 추가가 무슨 일을 하는거지?라고 생각할 수 있지 않을까 생각했는데, 영상에 나와있는 것처럼 타임라인 옆에 이벤트 추가 버튼을 두어 이 버튼을 누르면 아래 타임라인을 만들 수 있다는 유도를 잘 한 것 같아요.

3. 소속 추가 버튼

소속 추가 버튼은 어디에 위치할까요? 이건 내일 이야기 해보면 좋을 것 같아요.

고생했어요~ 리뷰 확인하시고 천천히 반영해주세요!

[jinhokim98]

일반 문서 페이지처럼 그룹 페이지도 서버 컴포넌트로 처리하면 좋을 것 같아요.

• 서버에서 미리 값을 만들어 제공해줄 수 있는 영역 (레이아웃, 서버 데이터) -> 서버 컴포넌트
• 사용자 동작이 포함된 영역 -> 클라이언트 컴포넌트

아래 구조처럼 레아아웃, 서버 데이터를 서버 컴포넌트에서 처리하고, 사용자 인터렉션이 들어가는 영역이나 useState, useEffect가 포함된 기능을 클라이언트 컴포넌트에서 처리하면 좋을 것 같아요.

<ServerComponent>
  <ClientComponent>
</ServerComponent>

다만 분리하시면서 서버에서 처리할 내용이 너무 없어진다면 클라이언트 컴포넌트로 두셔도 됩니다~

[jinhokim98]

5월 1일에 맛있는 회식을 했군요ㅋㅋㅋㅋㅋ

[jinhokim98]

Next App router에서는 loading.tsx 파일을 만들어 사용할 수 있어요.
http://nextjs.org/docs/app/api-reference/file-conventions/loading

로딩과 에러 상태를 선언적으로 처리하기 위해서 아래와 같이 ErrorBoundary와 Suspense를 사용하잖아요.

<ErrorBoundary>
  <Suspense fallback={<Loading>}>
    <Component />
  </Suspense>
</ErrorBoundary>

next.js는 같은 디렉터리 내에 두 파일만 만들면 알아서 처리해줍니다.

ErrorBoundary -> error.tsx
Suspense -> loading.tsx

단 ErrorBoundary는 클라이언트 컴포넌트에서만 사용할 수 있어요.

[jinhokim98]

나중에 이미지가 없다면 fallback image를 넣는 것도 고려해보면 좋을 것 같아요

[jinhokim98]

이 부분 css 파일을 만들어 import해도 좋을 것 같아요!