[ Feat/#468 ] 글 수정시 글조회 api 연결

[se0jinYoon]

✨ 해당 이슈 번호 ✨

closes #468

todo

• 글 수정시 글조회 api 연결
• 글수정 페이지 라우터 변경

📌 내가 알게 된 부분

• 기존에는 글 수정 시 글 데이터를 글 상세페이지에서 location.state로 받아왔었습니다.

• 그러다보니 location.state 가 새로고침이나 뒤로가기 등으로 접근하면 Null 값으로 받아와지는 이슈가 발생하여서, 기존에 localStorage등을 활용하면서 location.state를 잡아두는 방식으로 이슈 해결시도했습니다.

• 하지만 뒤로가기를 하면 location.state를 받아올 수가 없어서 . . 기존에 있던 글 수정시 글조회 api를 사용하였습니다.

• 글 수정시 글 조회 api는 해당 글 ID를 request로 전달하여야 하는데, 이걸 받아올 수 있는 방법이 글 상세페이지에서의 Location.state밖에 없더라구요.

• 그래서 기존 postPage (글 작성 페이지) 라우터에 옵셔널 쿼리를 추가해서 글 상세페이지에서 글 수정하기페이지에 접근할 경우, 라우터에 postId 를 쿼리로 추가할 수 있도록 해두었습니다.

// Router.tsx
{ path: 'post/:groupId/:viewType/:editPostId?', element: <PostPage /> },

• 수정하기에 들어올 경우 useParams로 postId 가져와서 글조회 api 받아오고 있습니다.

// 모임 ID, url에서 받아오기
const { groupId, viewType, editPostId } = useParams() as {
  groupId: string;
  viewType: string;
  editPostId: string;
};

• 새로고침, 뒤로가기 등의 이슈가 모두 해결되었어요

• 글 상세페이지에서 수정하기로 넘어올 경우

// postDetail.tsx
  // 수정 동작 버튼
  const handleEdit = () => {
    navigate(`/post/${groupId}/edit/${postId}`);
  };

• 그냥 글 작성 페이지로 넘어올 경우
  옵셔널 쿼리여서 해당 부분은 수정없습니다. 기존대로 navigate해주면 돼요

// groupfeed.tsx
<GroupFloatingBtnIcon onClick={() => navigate(`/post/${groupId}/post`)} />

📌 질문할 부분

📌스크린샷(선택)

• 새로고침, 뒤로가기 정상작동

2024-11-05.7.01.15.mov

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
mile-client	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 5, 2024 9:59am

[ljh0608]

LGTM