➕ [WV-45] feat : news detail page 생성

[hayoung78]

개요

news detail page 생성

PR Checklist

PR이 다음 요구 사항을 충족하는지 확인하세요.

• PR 제목 및 커밋 메시지 컨벤션 확인
• 직접 만든 함수가 있다면 이에 대한 설명 추가 (ex. JS DOCS)
• 변경 사항에 대한 테스트 완료 (버그 수정/기능에 대한 테스트)
• Label 확인
• Assignees 설정 확인
• Reviewers 설정 확인

PR details

news-detail page api 생성

export const getNewsDetail = async (
  artcSeq: string
): Promise<ArticleContentsResponse["data"]> => {
  const queryparam = artcSeq ? `newsdetail?artcSeq=${artcSeq}` : "";

  const url = `${BASE_URL}/article/${queryparam}`;
  const res = await fetch(url);

  if (!res.ok) {
    throw new Error("Failed to fetch news detail");
  }

  const response: ArticleContentsResponse = await res.json();
  return response.data;
};

news-detail 컴포넌트 및 페이지 생성

• 현재 뉴스페이지리스트 api함수가 안불러졌으므로.. 페이지에 예시데이터를 넣어 생성했습니다.

[뉴스 디테일 컴포넌트]

import { formatDate } from "date-fns";
import { CalendarDays, Eye } from "lucide-react";

export const NewsDetail = ({ data }: ArticleContentsProps) => {
  const formatContent = (htmlContent: string) => {
    const paragraphs = htmlContent
      .split(/<\/?p[^>]*>/)
      .filter((p) => p.trim().length > 0);

    const formattedParagraphs = paragraphs.map((p) => {
      if (p.includes("<img")) {
        return `<p style="text-align: center">${p}</p>`;
      }

      const textContent = p.replace(/<[^>]*>/g, "").trim();
      if (textContent) {
        // 마침표와 느낌표를 기준으로 문장 나누기
        const sentences = textContent
          .split(/[.!]/) // 정규식으로 .과 ! 모두를 구분자로 사용
          .filter((s) => s.trim().length > 0)
          .map((s) => {
            const originalEnding = textContent.charAt(
              textContent.indexOf(s) + s.length
            );
            // 원래 문장의 마지막 부호(. 또는 !)를 유지
            return `<p>${s.trim()}${originalEnding}</p>`;
          })
          .join("\n");
        return sentences;
      }
      return "";
    });

    return formattedParagraphs.join("\n");
  };

  return (
    <div className="max-w-4xl mx-auto p-4">
      <div className="flex justify-between items-center">
        <h1 className="text-2xl font-bold mb-6 bg-SYSTEM-main/30">
          {data.artcTitle}
        </h1>
        <div className="flex items-center gap-1 h-fit">
          <CalendarDays className="text-ELSE-7374 w-6 h-6" />
          <div className="text-ELSE-7374 ">
            {formatDate(data.regDttm, "yyyy.MM.dd")}
          </div>
        </div>
      </div>
      <div
        className="space-y-2"
        dangerouslySetInnerHTML={{
          __html: formatContent(data.artcContents),
        }}
      />
      <div className="flex gap-1 pt-1">
        <Eye className="text-ELSE-7374 w-6 h-6" />
        <div className="text-ELSE-7374"> 조회수 : {data.viewCnt}</div>
      </div>
    </div>
  );
};

위에 formatContent 함수는 데이터값이 아래 사진과 같이 뿌려져서 생긴 함수입니다.

아티클 컨텐츠가 저렇게 태그 형식으로 오더라고요 ,,ㅋ

[디테일 페이지]

import { getNewsDetail } from "@/api/news/apis";
import { NewsDetail } from "@/components/media/news-detail";

export default async function page() {
  const { article } = await getNewsDetail("190048"); //임시
  return <NewsDetail data={article} />;
}

[구현된 결과물]

When modifying code...

# Request Level
  - [ ] : "🔥 이대로 Merge 하면 안돼요~!"
  - [ ] : "🥹 고치면 분명 나아질 게 분명합니다.."
  - [ ] : "🤷 수정하면 좋지 않을까요?"

# Description

[hee2323]

확인했습니당

[Jinviz]

정규표현식.. 고생하셨습니다..

fetch URL만 수정해서 반영해주시면 될 것 같습니다.

const url = /api/article/${queryparam};