[AI 감성 일기장] Diary 페이지 일기 상세보기 기능 구현

Diary 페이지에서 특정 일기를 불러와 상세 내용을 보여주는 기능을 구현했다.
URL 파라미터로 전달된 일기 ID를 통해 데이터를 조회하고, 존재하지 않는 일기에 대한 예외 처리도 추가했다.

일기 데이터 불러오기

useDiary 커스텀 훅

특정 ID의 일기를 찾아 반환하는 커스텀 훅을 구현했다.

const data = useContext(DiaryStateContext);

DiaryStateContext를 통해 전역에서 관리되는 일기 데이터에 접근한다.

 

특정 일기 찾기 및 예외 처리

const [curDiaryItem, setCurDiaryItem] = useState<DiaryType>();

useEffect(() => {
  const currentDiaryItem = data.find((item) => item.id === id);

  // 예외 처리
  if (!currentDiaryItem) {
    toast.error("존재하지 않는 일기입니다 🫢");
    nav("/", { replace: true });
  }

  // 찾은 일기 데이터를 로컬 상태에 저장
  setCurDiaryItem(currentDiaryItem);
}, [id, data, nav]);

return curDiaryItem;

• 전달받은 id를 사용해 일기 데이터 검색
• useEffect로 컴포넌트 렌더링 시 일기 데이터 조회
• 해당 ID의 일기가 없으면 토스트 알림 후 홈으로 리다이렉트
• 찾은 일기는 curDiaryItem 상태에 저장하여 반환

 

일기 상세보기

Diray 컴포넌트

URL 파라미터에서 일기 ID를 추출하고, useDiary 훅으로 해당 일기를 가져온다.

const params = useParams();
const id = Number(params.id);

const curDiaryItem = useDiary(id);
const { createdDate, emotion, content } = curDiaryItem;

 

Viewer 연동

가져온 일기 데이터를 Viewer 컴포넌트에 전달하여 화면에 렌더링한다.

<Viewer emotion={emotion} content={content} />

 

Viewer 컴포넌트

전달받은 감정과 내용을 화면에 표시한다.

export default function Viewer({ emotion, content }: ViewerProps) {
  return (
    <>
      {/* 감정 */}
      <div>{emotionInfo[emotion].name}</div>
      {/* 일기 내용 */}
      <div>{content}</div>
    </>
  );
}