Mini Project #1 (Python & React)

본 프로젝트는 FastAPI (Python)와 React를 기반으로 구축된 영화 정보 관리 웹 애플리케이션입니다.
저는 주로 JWT 기반 사용자 인증 시스템, 회원가입 및 탈퇴 로직, 관리자 전용 복구 기능을 직접 구현하였습니다. 실제 서비스에 준하는 사용자 흐름과 보안 처리를 고려하여, 로그인 상태 및 사용자 권한에 따라 기능이 동적으로 제어되도록 설계했으며, 탈퇴 및 복구 같은 시나리오는 논리 삭제 방식을 적용하여 사용자 관리의 확장성과 유지보수 편의성을 확보하였습니다. 프론트엔드에서는 React Router와 세션 기반 상태관리를 활용해 UI의 일관성을 유지했고, 백엔드에서는 SQLModel ORM과 JWT 인증 로직을 연동하여 전체 인증 흐름을 안정적으로 구성하였습니다.

 프로젝트 자료

프로젝트 구조

📦 backend
┣ 📂models
┃ ┗ users.py
┣ 📂routes
┃ ┣ users.py        ← 로그인 / 회원가입 / 탈퇴 API
┃ ┗ admin.py        ← 관리자 권한 사용자 복구 API
┣ 📂auth
┃ ┣ jwt_handler.py   ← JWT 생성 / 검증
┃ ┣ hash_password.py ← 비밀번호 해싱
┃ ┗ authenticate.py  ← 토큰 인증 종속성
┣ 📂database
┃ ┗ connection.py
┗ main.py

📦 frontend
┣ 📂user
┃ ┣ Login.jsx, Signup.jsx
┣ 📂movie
┃ ┣ List.jsx, Regist.jsx, Detail.jsx, Edit.jsx
┣ 📂admin
┃ ┗ AdminPage.jsx
┣ App.jsx
┗ MainPage.jsx

주요 기능 및 구현 포인트

  • JWT 기반 로그인/회원가입 – access_token 발급 후 세션 스토리지에 저장, 사용자 역할에 따라 관리자 여부 판단
  • 비밀번호 유효성 검사 – 정규식을 통한 실시간 클라이언트 검증 + 서버 재검증 이중 처리 (Signup.jsx, users.py)
  • 회원 탈퇴 – DELETE /users/me 호출 시 is_active = False 처리하여 논리적 삭제 구현
  • 탈퇴 계정 로그인 차단 – 로그인 시 탈퇴 여부 체크 → 경고 메시지 출력 및 차단
  • 관리자 복구 기능 – AdminPage.jsx에서 PUT /admin/{user_id} 호출로 탈퇴 계정 복구
  • 관리자 페이지 – useEffect를 통해 탈퇴 계정 목록 로드, 복구 후 테이블 실시간 업데이트
  • 로그인 상태 및 관리자 여부 – App.jsx에서 전역 상태관리 (세션 기반)

주요 화면

  • MainPage.jsx – 영화 소개, CTA 버튼, 카드 UI 구성
  • Signup.jsx – 실시간 유효성 검사, 정규식 조건 충족 여부 안내
  • Login.jsx – 상태 관리 후 메인 이동, 관리자 세션 저장
  • AdminPage.jsx – 탈퇴 회원 복구 인터페이스

개발 환경 및 기술 스택

  • 백엔드: Python 3.11, FastAPI, SQLModel, bcrypt, JWT (토큰 기반 인증)
  • 프론트엔드: React (Vite 기반), React Router, Axios
  • 데이터베이스: MySQL 8.0, ORM 기반 CRUD 구현
  • 개발 툴: Visual Studio Code (VS Code)
  • 가상환경: Python venv 사용 (의존성 분리 및 관리)
  • 패키지 관리: pip, requirements.txt 사용
  • API 테스트: Swagger UI (FastAPI 자동 문서화)
  • 버전 관리: GitHub - 개인 레포지토리에서 협업 및 버전 관리
  • 배포 환경: 로컬 개발 환경 (localhost 기반 테스트)

 

기능별 구현 과정 및 설명

메인 페이지

※ 첫 진입 시 애니메이션 효과와 함께 핵심 서비스 소개를 보여주는 화면입니다. 영화 보러 가기 버튼을 통해 '/list' 페이지로 이동할되며, 로그인되지 않은 경우 로그인 페이지로 리다이렉트됩니다. 왼쪽은 비로그인 상태, 오른쪽은 로그인 후 상태입니다.

로그인

※ JWT 기반 인증 구현. 로그인 성공 시 access_token이 발급되고, 세션 스토리지에 사용자 이름과 관리자 여부를 저장합니다.  
이후 인증이 필요한 요청에는 해당 토큰이 Authorization 헤더에 포함됩니다. 

  • useState로 이메일/비밀번호 상태 관리
  • axios로 POST /users/signin 요청
  • 로그인 성공 시 access_token, is_admin, username을 sessionStorage에 저장
  • 로그인 실패 케이스별 alert 메시지 출력 및 포커싱 처리

회원가입

※ 비밀번호 유효성 검사를 포함한 회원가입 기능. 입력 즉시 정규식을 통한 실시간 검증을 수행하고, 조건을 만족해야 가입이 가능합니다.

  • 비밀번호 입력 시마다 validatePassword() 함수로 정규식 검증
  • 조건 만족 여부에 따라 안내 메시지 색상 및 내용 변경
  • POST /users/signup 요청 전 클라이언트 유효성 검사 수행
  • 중복된 이메일, 탈퇴한 계정, 잘못된 비밀번호 형식 등 서버 응답에 따른 예외 처리 구현

로그아웃

※ 사용자는 상단 메뉴에서 로그아웃 아이콘을 클릭하여 세션을 종료할 수 있습니다. 로그아웃 시 저장된 JWT 토큰과 사용자 정보가 제거되며, 자동으로 로그인 페이지로 이동됩니다.

  • sessionStorage에서 access_token 및 is_admin 값 제거
  • setIsLogin(false), setIsAdmin(false)호출로 전역 상태 초기화
  • React Router의 navigate("/login")를 통해 로그인 페이지로 리다이렉트
  • 재접속 시 자동 로그인 방지를 위한 클라이언트 세션 클리어 처리

회원 탈퇴 및 차단 처리

※ 사용자는 상단 메뉴에서 회원탈퇴 버튼을 통해 본인 계정을 탈퇴할 수 있습니다. 탈퇴는 물리 삭제가 아닌 논리 삭제 방식이며, 이후 해당 계정으로 로그인 시 차단 메시지를 출력합니다.

 

탈퇴 회원 복구

※ 관리자는 탈퇴한 사용자 목록을 확인하고, 필요 시 계정을 복구할 수 있습니다. 복구 요청은 <code>PUT /admin/{user_id}</code>로 전송되며, 해당 사용자의 is_active값을 True로 변경함으로써 계정 활성화가 완료됩니다.

  • 페이지 진입 시 useEffect로 JWT 인증 및 탈퇴 회원 목록 요청
  • 목록은 테이블 형태로 출력되며, 각 행에 "복구하기" 버튼 제공
  • 복구 시 confirm 확인 후 PUT 요청 전
  • 복구 성공 시 UI에서 해당 사용자를 목록에서 제거

 

'Project' 카테고리의 다른 글

Mini Project #3 (ECS Fargate, GitHub Actions)  (1) 2025.06.30
Mini Project #2 (S3+EC2+RDS)  (0) 2025.06.14

티스토리툴바