[1차] 새 프로젝트에서 포트폴리오 뼈대 만들기

작업 전 상태

새 Next.js 프로젝트에는 기본 예제 화면만 있었고 포트폴리오 페이지나 실제 콘텐츠 관리 방식이 없었습니다.

요청한 내용

만든 결과와 학습 과정을 함께 쌓을 수 있는 BUILD & LEARN 사이트의 최소 기능을 먼저 구성했습니다. 처음부터 DB와 관리자 화면까지 만들지 않고 파일로 콘텐츠를 관리하기로 했습니다.

변경한 내용

추가

• Home, Projects, Log, About, Contact와 상세 페이지
• Header, Footer, 카드, 뱃지 같은 공통 컴포넌트
• 프로젝트와 로그의 TypeScript 타입
• MDX 파일을 읽고 공개 콘텐츠만 보여주는 데이터 함수
• 카테고리와 검색어를 URL에 남기는 필터

수정

• Next.js 기본 화면을 흑백 편집 디자인과 주황색 포인트 컬러로 교체

삭제

• create-next-app의 기본 예제 화면과 불필요한 기본 링크

왜 이렇게 변경했나

처음부터 운영 기능을 모두 만들면 사이트의 핵심인 콘텐츠 작성보다 주변 기능이 더 커집니다. 실제 필요가 생길 때 DB를 도입할 수 있도록 첫 단계는 MDX 파일 방식으로 단순하게 유지했습니다.

초보자가 알아둘 점

MDX 파일은 글 내용과 제목·날짜·카테고리 같은 정보를 한 파일에 함께 저장합니다. 작은 사이트에서는 파일 하나를 추가하는 것만으로 새 글을 만들 수 있습니다.

확인한 내용

자동 검사

• npm run lint
• npm run type-check
• npm run build

직접 확인

• 공개 콘텐츠가 목록과 상세 페이지에 표시되는지 확인
• 주요 페이지 이동 확인

관련 파일

• src/app/
• src/components/
• src/content/
• src/lib/mdx.ts
• src/lib/projects.ts
• src/lib/logs.ts

남아 있는 점

실제 콘텐츠와 연락 수단은 준비되지 않아 placeholder 상태로 남겼습니다.

다음에 할 일

필터 조합, 이미지, Contact, About 등 MVP에서 빠진 부분을 교차 점검합니다.