Next.js + TypeScript

Next.js와 TypeScript를 이용해 Viton(가상 피팅 시뮬레이션)이 가능한 웹 사이트를 만들었다.
서비스 화면에 옷사진과 사람사진만 넣으면 가상피팅이 가능하도록 만들었다. 가상 피팅 결과 사진은 다운로드 해 사용자가 저장할 수 있도록 했다.

chatgpt를 활용해 코드를 작성하였다.

초기 설정

npx create-next-app@latest

npm install --location=global

npm install yarn

yarn add next

yarn dev

Fastapi 연동

axios를 활용해 post방식으로 frontend와 backend를 연동하였다. 가상피팅에는 옷 전처리과, 사람 전처리, 결과 3가지 부분이 필요하기 때문에 page를 3개 만들고, 각각 다른 api에 연동시켰다.
fastapi에서 전처리를 하는 동안 웹 화면에는 로딩 gif가 보이도록 했다.

결과

S3 using Cloudfront 배포

s3 배포
yarn build 후 나온 정적 파일을 S3에 올려 배포하였다.

결과