[Feat] 라우팅 설정 수정 및 반응형 적용 리팩토링

[KyeongJooni]

✨ 주요 변경사항

• 로그인/회원가입 페이지 구현 및 폴더 구조 개선
• 메인 페이지 UI 및 MainLayout 추가
• 라우트 구조 개편 및 routes 상수 파일 추가
• 공통 Logo 컴포넌트 생성
• UI 컴포넌트 리팩토링 (Tailwind 클래스 분리, Modal, Header 반응형 등)
• View Transitions 페이지 전환 애니메이션 추가
• 테스트 및 Storybook 스토리 추가

---

📝 작업 상세 내용

1. 페이지 구현

• 로그인 페이지: 카카오 로그인 버튼, 배경 이미지
• 회원가입 페이지: SignupHeader, SignupForm 컴포넌트 분리
• 메인 페이지: MainPage 컴포넌트 및 MainLayout 추가

2. 라우팅 구조

• routes.ts 상수 파일 추가 (ROUTES.LOGIN, ROUTES.SIGNUP 등)
• 라우트 파일 구조 개편 (auth.login.tsx → login.tsx)
• pages/auth/ → pages/login/, pages/signup/으로 분리

3. 공통 컴포넌트

• Logo 컴포넌트: 클릭 시 메인 이동, 키보드 접근성 지원
• Header: 반응형 모바일 메뉴, 외부 클릭/ESC 닫기

4. UI 리팩토링

• Tailwind compound 클래스 개별 분리 (BannerCard, Card, Checkbox 등)
• Modal: overlay 클릭 처리 mousedown+useRef 방식으로 변경
• TextField, DateField 개선
• clsx → cn 유틸로 수정

5. 아이콘/에셋

• alertdot, hamburger, kakao 아이콘 추가
• 로고 수정 및 불필요한 에셋 삭제

6. schemas.ts 리팩토링

• z → zod 별칭 적용
• requiredString, lengthString 헬퍼 함수 추가

7. View Transitions

• CSS 페이드 애니메이션 (0.15s)
• navigate 호출 시 { viewTransition: true } 옵션 적용

8. 테스트 & 문서

• FavoriteButton 테스트 및 스토리 추가
• Card, Checkbox, Profile, RadioButton, TextField 스토리 보완

---

✅ 체크리스트

• PR 본문에 Close #번호 추가
• 불필요한 주석, 디버깅 코드 제거
• 기능 테스트 및 정상 동작 확인
• 커밋컨벤션 / 코드컨벤션 준수

---

📸 스크린샷 (선택)

메인페이지(데스크탑)

메인페이지(모바일)

메인페이지(햄버거버튼)

로그인페이지(모바일)

회원가입(모바일)

---

🔍 기타 참고사항

• View Transitions API는 Chrome 111+, Edge 111+에서 지원
• 미지원 브라우저에서는 애니메이션 없이 정상 동작
• .editorconfig 추가로 에디터 설정 통일

---

🔗 관련 이슈

• Close [Feat] #45 - ssr 라우팅 설정 #45

[github-actions]

PR 검증 결과

✅ TypeScript: 통과
✅ ESLint: 통과
❌ Prettier: 포맷 필요
❌ Test: 실패
❌ Build: 실패

[github-actions]

PR 검증 결과

✅ TypeScript: 통과
✅ ESLint: 통과
✅ Prettier: 통과
❌ Test: 실패
❌ Build: 실패

[github-actions]

PR 검증 결과

✅ TypeScript: 통과
✅ ESLint: 통과
✅ Prettier: 통과
❌ Test: 실패
❌ Build: 실패

[github-actions]

PR 검증 결과

✅ TypeScript: 통과
✅ ESLint: 통과
✅ Prettier: 통과
✅ Test: 통과
✅ Build: 성공
Build Size: 7MB

[jwj0620gcu]

라우팅 구조랑 UI 리팩토링까지 한 번에 정리하느라 수고하셨습니다!
오래 걸리셨을텐데 감사합니다!

[YeBeenChoi]

리팩토링 깔끔하게 잘 된 것 같습니다 ㅎㅎ 정말 정말 고생 많으셨습니다! 👍👍