깃허브에서 README 가져오기

[ 깃허브에서 README 가져오기 ]

1. projects.ts에 정적 데이터로 프로젝트 정보 저장 (제목, 깃주소 등)

2. 프로젝트의 깃주소에서 /이름/프로젝트이름 만 따오기

3. 깃허브 README 가져오는 URL 생성

const gitResponse = await fetch(githubAPI, { next: { revalidate: 3600 } });

if(!gitResponse.ok) {
    return <div>README.md를 불러오는 데에 실패했습니다.</div>
}

const README = await gitResponse.text();

4. 줄바꿈도 없이 막 나와서 마크다운 렌더러 설치

• npm install react-markdown
• npm install -D @tailwindcss/typography

5. tailwind.config.ts 수정

• Tailwind가 마크다운 클래스를 쓸 수 있도록 plugin에 추가

import type { Config } from "tailwindcss";

const config: Config = {
  plugins: [
    require('@tailwindcss/typography'), // 👈 이 줄을 추가하세요
  ],
};

export default config;

6. 코드에 적용하기

• import ReactMarkdown from 'react-markdown';

<div className="prose dark:prose-invert max-w-none">
    <ReactMarkdown>{README}</ReactMarkdown>
</div>