구현기능 |
1. 인증/회원 관리
로그인/회원가입
Spring Security + JWT 기반 인증/인가 로직
AccessToken / RefreshToken 구조 및 자동 재발급
Zustand 상태관리
전역 사용자 상태 관리 및 새로고침 후 유지
마이페이지
회원 정보 조회 및 수정 (아이디, 이메일, 닉네임, 비밀번호)
회원 탈퇴
나의 문의 내역, 나의 북마크 조회
2. 영화 관련 기능
영화 메인 페이지
대표 영화, 상영중 영화 리스트 API 연동
지역구별 상영관 API 호출 (네이버/구글맵)
영화 상세 페이지
영화 상세 정보 조회 (포스터, 개봉일, 줄거리 등)
리뷰 작성 / 수정 / 삭제
작성자 / 작성일 표시
북마크 기능 적용
3. 리뷰 & 에디터 기능
에디터 페이지
Toast UI Editor를 활용한 게시글 작성/수정/삭제
이미지 업로드 (AWS S3 연동)
해시태그 기능 (구현 중)
데이터 추천 코스
에디터 추천 코스 페이지: 게시글 조회, 검색, 더보기, 상세보기
상세 페이지: 장소 정보 및 리뷰 확인 가능
작성 페이지: 제목/내용 작성, 이미지 업로드, 저장
4. 공지/문의 기능
관리자 페이지
공지사항 등록/수정/삭제
회원 정보 관리(조회/수정/삭제)
장소 등록/수정
1:1 문의
사용자 문의 등록 및 확인
관리자 답변 처리
5. 장소 정보 페이지 (식당/카페/문화행사)
문화 행사 페이지
지역(구)별 대표 문화/행사 사진 제공
행사 일정 및 상세 정보 조회
날씨/미세먼지 정보 연동
행사 검색 (포스터, 기관, 제목, 날짜, 찜 기능)
식당 목록/상세 페이지
지역별 대표 맛집 목록 조회
상세 정보 표시 (식당명, 주소, 사진, 전화번호, 운영시간, 지도, 댓글 등)
북마크 기능
카페 목록/상세 페이지
지역별 대표 카페 목록 조회
상세 정보 표시 (카페명, 주소, 사진, 전화번호, 운영시간, 지도, 댓글 등)
북마크 기능
6. 기타 기능
AWS S3 이미지 업로드: 리뷰/에디터 이미지 저장
Bookmark 기능: 영화, 식당, 카페, 문화 행사 장소 저장 가능
날씨 API 연동: 서울시 구별 날씨 및 미세먼지 정보 제공
CORS 및 API 보안 정책: 개발 환경(3000, 5173, 9999) 안전 접근 설정 |
설계의 주안점 |
보안 강화
JWT 기반 인증 및 인가 시스템 적용 (AccessToken + RefreshToken 구조).
Access Token 만료 시 Refresh Token을 통한 자동 재발급 처리.
사용자 데이터 보호를 위해 토큰은 HttpOnly Cookie + localStorage 혼합 전략 활용.
비밀번호 암호화(BCrypt) 및 이메일 인증 기반 추가 보안 절차 적용.
세션 관리
Spring Security의 SessionCreationPolicy.STATELESS 설정을 통한 완전 무상태(stateless) 서버 구조.
로그인 시 토큰 기반 인증으로 서버 부담 최소화.
API 보안 정책
HttpMethod와 경로 기반으로 권한 차등 부여.
영화 리뷰 등록(POST)은 인증된 사용자만 허용, 공지사항/에디터 기능은 특정 역할(admin, editor)만 접근 가능.
CORS 정책 세분화 → localhost:3000, 5173, 9999 등 개발 환경에서 안전하게 접근 가능하도록 설정.
프론트엔드 상태 관리
Zustand를 활용하여 인증 상태(user, accessToken, refreshToken)를 전역에서 관리.
persist 미들웨어로 새로고침 시에도 로그인 상태 유지.
인터셉터를 통한 자동 토큰 갱신 및 에러 처리(401 발생 시 Refresh 요청 → 실패 시 강제 로그아웃).
확장성과 유지보수성
React 컴포넌트 구조화(MoviePage, MovieSection, CinemaSection)로 UI 모듈화.
인터셉터, Store, Spring Security Config 등 인증 관련 로직을 모듈 단위로 분리.
지역별 영화관 데이터 조회 기능, 영화 정보 슬라이드 배너 등 기능 확장성을 고려한 설계.
UI/UX 디자인
직관적인 Hero 배너(백드롭 이미지 + 마우스 오버 시 영화 제목 표시).
지역구 선택 버튼 UI 개선 → 가독성과 접근성이 높은 버튼 스타일 적용.
에러 발생 시 사용자 친화적인 안내 메시지 출력. |