0914 Full-Stack: 스터디룸 기능 개발 (BE & FE)
✅ 1. 백엔드(BE): 스터디룸 도메인 설계 및 API 구축
- 사용자들이 스터디룸을 생성하고 참여하는 핵심 비즈니스 로직과 데이터 모델을 설계하고, 이를 제어하는 RESTful API를 구축했습니다.
➕ 데이터 모델링 및 관계
StudyRoom 엔티티: 스터디룸의 핵심 정보(제목, 설명 등)를 관리하며, 생성자인 User와 호스트(Host) 관계를 맺습니다.RoomParticipant 엔티티: StudyRoom과 User 사이의 다대다(M:N) 관계를 해소하는 중간 테이블 역할을 합니다. 이 엔티티는 단순한 연결을 넘어, 참여자의 역할(ParticipantRole)과 상태(ParticipantStatus) 같은 추가적인 메타데이터를 관리하여 풍부한 비즈니스 로직을 가능하게 합니다.- Enum 활용: 역할(HOST, GUEST)과 상태(ACTIVE, INACTIVE)를 열거형(Enum)으로 관리하여 데이터의 일관성과 가독성을 확보했습니다.
➕ API 구현 및 최적화
- 인증 기반 API: 스터디룸 생성, 참여 등 모든 주요 기능은 JWT 인증을 기반으로 동작합니다. 컨트롤러는 인증 컨텍스트에서 현재 로그인된 사용자 정보를 가져와 비즈니스 로직에 활용합니다.
- QueryDSL을 이용한 동적 검색:
StudyRoomRepositoryCustom을 구현하여, QueryDSL을 통해 키워드 검색과 같은 복잡한 동적 쿼리를 타입-세이프하게 작성했습니다. 특히, 스터디룸 목록 조회 시 참여자 수를 함께 조회하는 로직을 포함하여 N+1 문제를 방지하고 성능을 최적화했습니다.
✅ 2. 프론트엔드(FE): 스터디룸 UI 및 전역 상태 관리
- 백엔드 API와 연동하여 사용자가 스터디룸과 상호작용할 수 있는 UI를 구축하고, 복잡한 상태를 효율적으로 관리했습니다.
➕ 컴포넌트 기반 UI 설계
- 컴포넌트 분리: 스터디룸 기능을
StudyRoomList, RoomCard, CreateRoomModal, RoomDetail 등 재사용 가능한 컴포넌트로 분리하여 설계함으로써, 코드의 모듈성과 유지보수성을 높였습니다.
- 사용자 경험(UX) 개선:
- 스켈레톤 UI: 데이터 로딩 중에는 실제 UI의 윤곽선을 보여주어 사용자가 느끼는 대기 시간을 줄였습니다.
- 페이지네이션: '더보기' 버튼 등을 통해 필요할 때마다 추가 데이터를 로드하여 초기 로딩 성능을 향상시켰습니다.
➕ Zustand를 이용한 전역 상태 관리
- 스터디룸 목록, 모달 상태 등 여러 컴포넌트에서 공유해야 하는 상태를 Zustand 기반의 전역 스토어(
roomStore)를 통해 관리했습니다.
- 스터디룸 생성과 같은 작업이 성공했을 때, 페이지를 새로고침하는 대신 스토어의 상태를 직접 업데이트하여 UI에 즉시 변경 사항을 반영함으로써, 빠르고 부드러운 사용자 경험을 제공했습니다.
✅ 3. 프론트엔드(FE): 공통 기능 모듈화 (토스트 알림)
- API 요청의 성공, 실패 등 사용자에게 피드백을 제공해야 하는 공통 기능을 토스트 알림(Toast Notification) 시스템으로 모듈화했습니다.
- Context API 활용: 토스트 메시지를 띄우는 함수(
showToast)를 전역적으로 사용할 수 있도록 ToastProvider와 toastContext를 생성했습니다.
- 중앙 관리: 앱의 최상단에
ToastProvider를 배치하여, 어떤 컴포넌트에서든 useContext를 통해 showToast 함수를 호출하여 일관된 피드백을 제공할 수 있게 했습니다.
📌 요약
- 백엔드는
StudyRoom과 RoomParticipant 엔티티를 중심으로 데이터 모델을 설계하고, QueryDSL을 활용하여 최적화된 동적 검색 API를 구축했습니다.
- 프론트엔드는 재사용 가능한 컴포넌트로 UI를 구조화하고, Zustand를 이용한 전역 상태 관리를 통해 컴포넌트 간 데이터 흐름을 효율적으로 처리했습니다.
- 사용자 경험을 향상시키기 위해 스켈레톤 UI, 페이지네이션, 그리고 Context API 기반의 전역 토스트 알림과 같은 공통 모듈을 구현하여 애플리케이션의 완성도를 높였습니다.
