서울, 우리만의 데이트 스케치북
(디지털컨버전스) React & Spring 활용 자바(Java) 개발자 양성과정 (3)
파이널 1조
한지훈(팀장) ,
김지원 ,
장윤원 ,
권대한 ,
김채은 ,
이소연
| 개요 | 매일 똑같은 데이트에 지쳐 새로운 곳을 찾는 연인들에게 ‘서울, 우리만의 데이트 스케치북’은 단순한 정보 제공을 넘어, 둘만의 이야기를 담아내는 특별한 공간을 제공합니다. 실제 후기와 다양한 카테고리를 유지하면서, 사용자 개개인의 취향과 상황에 맞는 맞춤형 데이트를 제안하여 서울에서의 모든 순간이 특별한 추억이 되도록 돕는 것이 이 홈페이지의 핵심 목표입니다. |
|---|---|
| 구현기능 | 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 개선 → 가독성과 접근성이 높은 버튼 스타일 적용. 에러 발생 시 사용자 친화적인 안내 메시지 출력. |
| 사용기술 및 개발환경 |
Java, React, Spring Boot, Spring Security, MyBatis, react-router-dom ,Redux, Zustand, Swiper, lucide-react, Toast UI Editor, Oracle DB AWS S3, Google GenAI, JJWT, Axios, Gradle, npm, DevTools, dotenv |
다음글 | Vitalog
