[#129] 공지사항, 펀시스템, 커뮤니티 상세정보 및 댓글 API 연결

[SujinKim1127]

Issue

• Resolves [feat] 공지사항/펀시스템 상세정보 API 연결 #129

Description

• 아무래도 상세정보 얻어올때 현재 페이지 url로 판단을 해야할 것 같아서
• pages/funsystem/[id].tsx 파일을 추가했습니다
• NoticeInfo.tsx 코드에서 현재 url에 맞게 notice | funsystem | community 정보를 가지고 오도록 useEffect 안에서 if문을 설정해서 만들어뒀는데 이렇게 하는게 맞는지 잘 모르겠습니다 ㅠㅠ
  이렇게 하는 방법보다 더 좋은 방법이 있을까유...?

  // 현재 주소 값
  const router = useRouter();
  const path = router.asPath;
  const numericPart = path.match(/\d+/);
  const pathId = numericPart ? numericPart[0] : 1;

  function extractCategoryFromUrl(url: string): string | null {
    const regex = /\/(funsystem|notice|community)\/(\d+)/;
    const match = url.match(regex);

    if (match && match[1]) {
      return match[1];
    } else {
      return null;
    }
  }

  useEffect(() => {
    // 공지사항 API 연결
    if (extractCategoryFromUrl(path) === 'notice') {
      const getNoticeInfo = getNoticeInfoAPI(Number(pathId));
      getNoticeInfo.then((res) => {
        setData(res.data);
        console.log(res.data);
      });

      const getcomments = getNoticeInfoCommentAPI(Number(pathId));
      getcomments.then((res) => {
        setComments(res.data);
      });
    }

    // 펀시스템 API 연결
    if (extractCategoryFromUrl(path) === 'funsystem') {
      const getFunsystemInfo = getFunsystemInfoAPI(Number(pathId));
      getFunsystemInfo.then((res) => {
        setData(res.data);
      });

      const getFunsystemComments = getFunsystemInfoCommentAPI(Number(pathId));
      getFunsystemComments.then((res) => {
        setComments(res.data);
      });
    }

    // 커뮤니티 API 연결
    if (extractCategoryFromUrl(path) === 'community') {
      const getCommunityInfo = getCommunityInfoAPI(Number(pathId));
      getCommunityInfo.then((res) => {
        setData(res.data);
      });

      const getCommunityComments = getCommunityInfoCommentAPI(Number(pathId));
      getCommunityComments.then((res) => {
        setComments(res.data);
      });
    }
  }, []);

• 그리고 흰색 뒷배경 적용을 제가 안했는데 이거 background: white 처리해도 되는거 맞나요??

Check List

• PR 제목을 커밋 규칙에 맞게 작성
• PR에 해당되는 Issue를 연결 완료
• 적절한 라벨 설정
• 작업한 사람 모두를 Assign
• 작업한 팀에게 Code Review 요청 (Reviewer 등록)
• main 브랜치의 최신 상태를 반영하고 있는지 확인

Screenshot

[JooHui-void]

저는 제일 바깥 컴포넌트에 background : white 로 설정했어요..!

[JooHui-void]

아직 url복사 부분을 연결하지 않으신 것 같은데 url이 펀시스템에만 존재하는 데이터값이라서 첨부파일 만드신것처럼 없을 때 처리만 잘 해주시면 될 것 같아요..!
복잡한 부분인데 고생하셨습니다!

[SujinKim1127]

아 넵 확인했습니다! 이부분 반영해서 고쳐두고 다시 PR 열어두겠습니다!