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

[SujinKim1127]

Issue

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

Description

(pr close 한 상태로 rebase를 하면 다시 오픈을 할 수가 없군요... 처음 알았슴당..)

• 아무래도 상세정보 얻어올때 현재 페이지 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);
      });
    }
  }, []);

Check List

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

Screenshot

[vercel]

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

Name	Status	Preview	Comments	Updated (UTC)
daitssu-client	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Dec 20, 2023 0:18am

[halfmoon-mind]

빌드 안되는데 한번 확인해주세요 @SujinKim1127
yarn build 실행하면 안되는거 보일거에요

[jwo0o0]

if문으로 나누는건.. switch case문도 있겠지만 찾아보니까 작은 범위 안에서는 if-else가 속도면에서 더 빠르다네요!
그리고 [id] 동적 페이지에서는const pathId = router.query.id 로도 가져올 수 있슴다