Wallel

프로젝트 개요

• Next.js 14와 TypeScript를 기반으로 한 정적 웹사이트입니다. React Query로 상태를 관리하며 SCSS 모듈을 활용해 스타일을 구성했습니다.
• Vercel Analytics와 Speed Insights를 도입해 성능 지표를 수집합니다.
• Node.js 20 버전을 .nvmrc로 지정해 개발 환경을 통일했습니다.

주요 기술 스택

• package.json에서 Next.js, React, Sass, React Query, Swiper 등을 사용합니다. ESLint와 Stylelint로 코드 품질을 관리하고, Vercel CLI를 포함해 배포에 활용합니다.
• next.config.js에서는 SCSS 경로와 이미지·SVG 에셋을 위한 alias를 설정하고 있습니다.

SEO 및 메타데이터 관리

• _document.tsx에 기본 메타 태그와 Google Analytics 스크립트, Naver 검색 등록을 넣어 SSR 시점에서 메타 태그가 완전히 삽입되도록 구성했습니다.
• 각 페이지별로 PageMeta 컴포넌트를 사용해 SEO 정보를 관리하며, 타이틀·설명·OG 태그 등을 src/config.ts의 PAGE_META에 정의했습니다.

주요 기능

• 소그룹 레슨 시간표는 외부 API에서 데이터를 받아 모달로 표시합니다. 개발·운영 환경에 따라 다른 URL을 호출합니다.
• 미들웨어에서 ?/ 형식의 쿼리를 감지해 새로운 경로로 리다이렉트합니다.
  GitHub Pages에서 배포하던 레거시 URL을 대응하기 위해 추가했습니다.
• PWA 지원을 위해 public/manifest.json을 제공하며 앱 아이콘 정보를 포함합니다.

디렉터리 구조

• pages/ – 페이지별 컴포넌트와 라우팅을 담당합니다.
• src/components/ – 버튼, 모달, 슬라이더 등 공통 UI 요소가 위치합니다.
• src/assets/ – 이미지와 SCSS 파일을 관리합니다.

배포 방식

빌드 전에는 ESLint와 Stylelint 검사를 실행하도록 prebuild 스크립트를 구성했습니다

main 브랜치에 변경이 생기면 Vercel에서 자동으로 빌드와 배포가 이루어집니다.