05. 실전 프로젝트: Full Stack 서비스 완성

"Backend(FastAPI)와 Frontend(React)가 만나, 완전한 서비스를 이룹니다." 이번 장에서는 4부 내용을 바탕으로 두 가지 실전 프로젝트를 수행합니다.

Project 1. [이사] 팀원 정보 DB로 옮기기 (Migration)

목표: 4부 4챕터(나만의 API 만들기)에서 만든 members_db (딕셔너리)를 MySQL로 옮기고, 기존 '패션 추천 페이지'가 고장 나지 않도록 백엔드만 교체합니다.

목표: 관리자가 판을 깔아주고(Create), 학생이 참여하는(Enroll) 전체 사이클을 완성합니다.

courses: id(PK), title, instructor, max_students
students: id(PK), name, email
enrollments: id(PK), student_id(FK), course_id(FK)
- Tip: 한 학생이 동일 강의를 중복 신청할 수 없도록 로직을 고민해 보세요.

관리자용 API:
- 강의 개설: POST /courses
- 학생 등록: POST /students
학생용 API:
- 강의 목록 조회: GET /courses
- 수강 신청: POST /enroll (Body로 student_id와 course_id를 받음)

화면은 크게 진입 화면, 관리자 화면, 학생 화면 3가지로 구성합니다.

기능: 사용자의 역할을 선택합니다.
UI: 두 개의 큰 버튼 배치
- [관리자 모드] 버튼 → /admin 페이지로 이동
- [학생 모드] 버튼 → /student 페이지로 이동

기능 1. 강의 개설: 강의명(title)과 수강 정원(max_students)을 입력받아 POST /courses를 호출합니다.
기능 2. 학생 등록: 학생 이름(name)과 이메일(email)을 입력받아 POST /students를 호출합니다.
UI Tip: 입력 폼(Input)과 제출 버튼(Button)을 그룹으로 묶어 배치하세요.

가장 중요한 페이지입니다. "누가(Who)" 신청하는지 알아야 하기 때문입니다.

기능 1. 신분 선택 (Login Simulation):
- 수강 신청을 하려면 내가 누구인지 알아야 합니다.
- 화면 상단에 Select Box를 만들고, 등록된 학생 목록(GET /students)을 불러와 선택하게 하세요.
- 선택된 학생의 id를 useState에 저장해둡니다.
기능 2. 강의 목록 보기:
- useEffect를 사용해 페이지 로드 시 강의 목록(GET /courses)을 가져와 카드 형태로 보여줍니다.
기능 3. 수강 신청 하기:
- 각 강의 카드의 [신청] 버튼을 누르면 POST /enroll을 호출합니다.
- 중요: 이때 Body 데이터로 "저장해둔 내 student_id"와 "선택한 강의의 course_id"를 함께 보냅니다.
- 신청 성공 시 alert("신청 완료!"), 실패 시(중복 등) 에러 메시지를 띄웁니다.

⚠️ 실습 전 꼭 확인하세요! (Student Checklist)

Primary Key (PK): 모든 테이블 생성 시 AI(Auto Increment)를 꼭 체크하세요.
Foreign Key (FK): enrollments 테이블의 student_id는 반드시 students 테이블의 id와 연결되어야 합니다.

중복 신청 방지: POST /enroll 요청이 왔을 때, DB에 이미 같은 (student_id, course_id) 쌍이 있는지 먼저 확인(query(...).first())하고, 있다면 400 에러를 반환하세요.

데이터 로딩: Select Box에 학생 목록이 채워지기 전에는 수강 신청을 할 수 없도록 막거나, "로딩 중..." 표시를 해주세요.
ID 체크: 학생을 선택하지 않고(state가 비어있음) 신청 버튼을 누르면 "학생을 먼저 선택해주세요"라고 경고창을 띄워주세요.

"이제 관리자가 강의를 만들고, 학생 리스트에 있는 내가 그 강의를 신청하는 흐름이 이어집니다. 이 연결고리를 완성하는 것이 이번 프로젝트의 핵심입니다!"