KH 프로젝트

KH정보교육원에서 진행하고 발표된 프로젝트를 과정별로 보실 수 있습니다.

(디지털컨버전스) React & Spring 활용 자바(Java) 개발자 양성과정 (3)

프로젝트 발표날짜 : 2025. 09. 11

KH IEI PROJECT
 

(디지털컨버전스) React & Spring 활용 자바(Java) 개발자 양성과정 (3)

남상규 강사 / 이호정 취업담임
2025. 09. 11 (B)

1 팀
파이널 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 개선 → 가독성과 접근성이 높은 버튼 스타일 적용.

에러 발생 시 사용자 친화적인 안내 메시지 출력.
2 팀
Vitalog
팀장/팀원 이**(팀장), 안**, 김**, 신**, 석**, 이**, 이**
개요 AI 기반 맞춤 운동·식단 추천과 투두리스트/건강일지 작성 기능을 제공하며, 다이어트 및 체중 관리에 관심 있는 사용자들이 정보를 공유하고 소통할 수 있는 커뮤니티 서비스
구현기능 - AI 기반 다이어트 간단 플랜, 식품 / 운동의 상세 정보 제공, 건강 일지 코멘트 기능
- TodoList, 건강 일지 CRUD 기능
- 식품 / 레시피 / 운동 목록 조회 / 검색 / (정렬)
- 외부 API 연동(식품, 레시피, 운동, 날씨, AI)
- 관리자(회원 관리, 게시판 관리)
- 로그인/회원가입 기능
설계의 주안점 - 모듈화: 각 기능을 독립적인 모듈로 개발
- 보안: 인증 및 권한 관리 (JWT 등 사용)
- UI/UX 디자인: 직관적이고 접근성이 높은 디자인
- 확장성: 기능 추가 용이하도록 설계
- 유지보수성: 코드 구조가 명확하고 수정이나 기능 추가가 용이하도록 설계
다음글다음글이 없습니다.
KH정보교육원
  • 고용노동부 선정
  • 5년 인증 우수훈련기관 선정
  • 대한민국 브랜드 어워즈 대상
  • IT교육부문 4년 연속 대상 수상
  • 고용노동부
  • 장관 표창

빠른 상담

KH임직원은 수강생 한 분 한 분의 성공적인 취업을 위해 최선을 다하겠습니다.

No.1 국내 최대의 취업 실적을 보유한 KH정보교육원에 오신 것을 환영 합니다.
KH의 전 과정은 NCS(국가교육표준화)기준을 준수하며 100% 무료, 전액 국비지원을 받으실 수 있습니다.

교육희망 과정

희망과정 선택


세부 교육과정

전화 아이콘
  • 전국대표문의전화(연중무휴)

교육희망 지점지점은 필수로 선택해주세요

신청자 정보

- -

기입 내용이 사실과 다를 시 상담 서비스가 원활하지 않을 수 있습니다.

대표문의
(연중무휴)

개강일정

개강일정

국비대상자 간편조회

국비대상자
간편조회

온라인 상담

온라인 상담

오시는길

오시는길

카톡 상담

카톡 상담

KH정보교육원
전국대표 문의전화
(연중무휴)

주말·공휴일에도 상담 및 접수 가능합니다.

  • 2023 당산지원

    5년 인증 우수
    훈련기관 선정

  • 2022 강남지원

    5년 인증 우수
    훈련기관 선정

  • 2022 종로지원

    5년 인증 우수
    훈련기관 선정

  • 2020 강남지원

    훈련 이수자 평가
    A등급 획득

  • 2020 종로지원

    훈련 이수자 평가
    A등급 획득

  • 2019 당산지원

    훈련 이수자 평가
    A등급 획득

  • 2019 IT교육부문

    브랜드 대상
    4년 연속 수상

  • 2018 당산지원

    4차 산업 선도
    훈련기관 선정

KH정보교육원 | 사업자등록번호 : 487-86-00763 | 사업자등록번호 : 851-87-00622 | 서울 강남 제2014-01호 | 대표자 : 양진선 | 책임자 : 양진선 |  개인정보관리책임자 : 양진선

강남점 1관 : 서울특별시 강남구 테헤란로14길 6 남도빌딩 2F, 3F, 4F, 5F, 6F
강남점 2관 : 서울특별시 강남구 테헤란로10길 9 그랑프리 빌딩 4F, 5F, 7F
강남점 3관 : 서울특별시 강남구 테헤란로 130 호산빌딩 5F, 6F
종로점 : 서울특별시 중구 남대문로 120 그레이츠 청계(구 대일빌딩) 2F, 3F
당산점 : 서울특별시 영등포구 선유동2로 57 이레빌딩(구관) 19F, 20F
논현점 : 서울특별시 강남구 논현로 132길 9 마루빌딩 1F, 2F, 3F
부산점 : 부산 부산진구 중앙대로 627 삼비빌딩 2F, 12F