1. 로컬 파일 준비

v0 템플릿 중 하나를 골라 새로 생성한 next.js 폴더 안에 덮어씌웠다. 템플릿에서 요구하는 의존성을 설치해야하는 번거로움이 존재한다. 이 템플릿의 경우 shadcn이 이미 설치되어있는 상태였어서 shadcn mcp 실행에도 어려움이 있었다. 버전이 맞지 않아서 실행이 잘 안됐다.

1. github mcp 세팅

vscode 내부 settings.json에 깃허브에서 제공하는 url을 이용해 mcp 서버 설치를 진행했다.

1. mcp 호출 및 깃허브 레포지토리 생성

@github로 mcp를 호출하고 내 깃허브 계정에 커밋할 수 있도록 세팅해달라고 요청했다. 왼쪽 이미지는 요청사항대로 커밋할 수 있도록 레포지토리 정보를 설정해준 이미지이고, 오른쪽 이미지는 정보 설정 완료 후 레포지토리를 생성해 커밋하는 To-do 리스트를 만들어 진행하는 장면이다. 에이전트 실행은 모두 자동으로 진행됐다.

1. 깃허브 내 레포지토리 생성 및 외부 배포

요청한대로 깃허브 내부에 성공적으로 레포지토리 생성이 완료되었다. 이 파일로는 별개 수정 및 커밋이 가능한 상태가 되었다.

next.js 프레임워크를 제공하는 vercel에서 배포가 가능하다길래 배포까지 진행해보았다.

깃허브 계정을 연결해 레포지토리 업데이트 후, 외부 배포까지 완료되었다.

URL은 아래와 같다.

https://gallery-test-two.vercel.app/