📘 StudyHub 프론트엔드 개발 요약 (2025.05 기준)

✅ 개발 완료 항목

항목	설명
회원가입	개인/사업자 회원가입 UI 및 로직 구현 완료
로그인	세션 기반 로그인 구현 (localStorage 미사용)
하단바	세션 기반 사용자 유형 판단으로 동적 하단바 구성 (userType에 따라 분기)

---

클론 받을 때 패키지 설정

파일 안으로 이동 후,

• npm install
• npm install react-router-dom
• npm install react-calendar
• npm install axios
• npm i @portone/browser-sdk

한 후 npm start

---

결제 관련 추가 설정

• StudyHub_front/.env -> 안에 API 관련 키 설정 (보안 파일)
• .gitignore -> .env : 보안 파일 깃에 올라가지 않게 주의
• publc/index.html -> 포트원 SDK 추가
• SDK 패키지 추가 : npm i @portone/browser-sdk

-> 모든 설정 후 다시 npm start

---

🧭 메인화면(HomePage) 주요 기능

📊 거리순 정렬 + 무한 스크롤

• 사용자 현위치 기준으로 스터디카페를 거리순 정렬
• 초기 6개만 표시 → 스크롤 하단 도달 시 자동으로 4개씩 추가
• 리스트 스크롤 감지는 ref 기반 scroll 이벤트로 처리

🔍 검색 기능

• 카페 이름 또는 주소 포함 텍스트로 검색 가능 (대소문자 구분 없음)
• Enter 키로도 검색 가능
• 검색 결과는 리스트 상단 정렬
• 검색된 마커는 노란색 + 바운스 애니메이션

📍 마커 기능

• 현위치 마커는 파란색 (blue-dot.png)
• 마커 클릭 시 해당 카페가 리스트 상단으로 자동 정렬됨

📌 위치 아이콘

• 클릭 시 현재 위치로 지도 다시 이동됨 (navigator.geolocation 활용)

⚠️ 사업자 제한

• 사업자 로그인 상태에서 스터디카페 리스트 클릭 시 alert() 표시 (예약 차단)

---

🖥 UI 개선 사항

항목	내용
포인트 충전 흐름	결제 도중 충전 시, 완료 후 “결제 페이지로 이동” 버튼 제공
마이페이지 개선	개인 마이페이지 하단의 '예약하기' 버튼은 기능 제거 고려

---

⚠️ 수정 필요

• 포인트 충전 페이지의 back-icon 클래스가 다른 페이지의 스타일(radio)과 충돌 발생
  • 공통 클래스명 충돌로 CSS 깨짐 예상

---