uwksa.ca 수정 가이드¶
uwksa.ca 프론트엔드 코드를 수정하고 검증하는 기본 절차입니다.
사전 준비¶
- Git
- Node.js
- npm
- 코드 에디터
1단계: 저장소 준비¶
git clone https://github.com/therealuwksatech/uwksa.ca.git
cd uwksa.ca
git pull origin main
npm install
2단계: 개발 서버 실행¶
npm run dev
이 저장소는 Vite 기본 설정을 사용하므로, 접속 주소는 터미널 출력값을 따릅니다. 보통 http://127.0.0.1:5173부터 시작하며, 포트가 이미 사용 중이면 다른 포트가 자동으로 선택됩니다.
3단계: 수정 대상 찾기¶
| 수정 대상 | 파일 위치 |
|---|---|
| 홈페이지 문구 / 임시 이벤트 카드 | src/pages/HomePage.tsx |
| 멤버십 / 제휴 식당 | src/pages/MembershipPage.tsx |
| 이벤트 로드맵 | src/pages/EventsPage.tsx |
| 갤러리 | src/pages/GalleryPage.tsx |
| 연락처 / 뉴스레터 UI | src/pages/ContactPage.tsx |
| 팀 정보 / 팀원 사진 매핑 | src/data/teamData.ts |
| 소셜 링크 / 이메일 | src/data/socialLinks.ts |
| 좌석 확인 정적 페이지 | public/seatcheck/ |
자세한 레시피는 자주 하는 작업을 참고하세요.
4단계: 수정 시 주의사항¶
한/영 문구는 같이 수정¶
대부분의 화면은 ko / en 객체를 함께 유지합니다. 한쪽만 바꾸면 언어 전환 시 내용이 어긋납니다.
테마와 반응형도 확인¶
수정 후에는 최소한 아래를 확인합니다.
- 한국어 / 영어
- 라이트 모드 / 다크 모드
- 모바일 폭 / 데스크톱 폭
hash 라우팅 구조를 유지¶
페이지 전환은 App.tsx의 window.location.hash 기반입니다. 새 페이지를 추가할 때도 같은 패턴을 따라야 합니다.
5단계: 로컬 검증¶
작업이 끝나면 최소한 아래 명령을 실행합니다.
npm run typecheck
npm run build
필요하면 개발 서버에서 실제 화면도 함께 확인합니다.
6단계: 변경 사항 저장¶
git status
git add <수정한 파일>
git commit -m "변경 설명"
git push origin <브랜치명>
브랜치 전략은 팀의 현재 Git 운영 방식에 맞춥니다.
자주 발생하는 문제¶
npm install 실패¶
Node.js 버전을 먼저 확인합니다.
node --version
개발 서버 주소를 모르겠음¶
포트를 문서에 하드코딩하지 말고, npm run dev 실행 후 출력된 URL을 사용합니다.
타입 오류가 남음¶
npm run typecheck
오류 위치를 기준으로 import 경로, 타입 정의, 한/영 데이터 구조를 다시 확인합니다.
빌드는 되는데 화면이 이상함¶
다음 순서로 확인하는 편이 빠릅니다.
HomePage.tsx/EventsPage.tsx같은 화면 파일의 로컬 상태 객체teamData.ts,socialLinks.ts같은 데이터 파일- 이미지 import 경로와 실제 파일명 대소문자