Skip to content

oio337a/42check-in

Repository files navigation

42Check-in

42 서울 내 분산된 신청 절차를 통합한 All-in-One 예약/신청 플랫폼


🚀 TL;DR

  • 회의실 예약 프로세스 5단계 → 2단계로 단축
  • 타임라인 기반 인터랙션 설계
  • 32bit 비트마스킹 구조로 시간 슬롯 관리
  • JWT 기반 인증 구조 설계
  • 관리자 승인/대기 상태 자동화 로직 구현

🧩 Overview

42Check-in은 회의실 예약, 외부인 초대, 수요지식회 신청, 기자재 대여를 하나의 웹 서비스에서 처리할 수 있도록 만든 통합 플랫폼입니다.

사용자는 42서울의 각종 신청을 진행할 수 있으며, 운영진은 별도의 관리자 페이지에서 신청 현황을 확인하고 승인/관리할 수 있습니다.

불편함에서 시작했습니다!

  • 회의실 예약 과정이 다단계 구조로 구성되어 사용자 피로도 발생
  • 전체 회의실 현황을 한눈에 파악하기 어려움
  • 신청/대기 상태 관리가 직관적이지 않음
  • 여러 신청 기능이 분산되어 있음

✨ Key Features

1. 회의실 예약

  • 날짜별 예약 현황 조회
  • 타임라인 기반 시간 선택 UI
  • 실시간 예약 가능 여부 확인
  • 입구 디스플레이 연동 (체크인 / 체크아웃 기능)

2. 외부인 초대 사전 승인 신청

3. 수요지식회 신청

  • 신청 / 대기 상태 자동 관리
  • 취소 시 대기자 자동 승격 로직 구현

4. 기자재 대여

  • 신규 대여
  • 반납 기한 내 연장 신청
  • 운영진 승인 기반 프로세스

5. 운영진(Admin) 기능

  • 카테고리별 신청 현황 조회
  • 필터링 및 일괄 승인
  • 데이터 엑셀 내보내기

🏗 Architecture

  • 42 OAuth 기반 로그인
  • JWT 기반 인증/인가
  • Spring Boot REST API
  • AWS EC2 배포
  • MySQL (RDS)
  • GitHub Actions 기반 CI/CD
  • NGINX Reverse Proxy
image

🛠 Tech Stack

Frontend

  • Next.js
  • TypeScript
  • Tailwind CSS
  • Axios
  • Vercel
  • GitHub Actions

Backend

  • Java 17
  • Spring Boot
  • JPA
  • MySQL
  • JWT
  • AWS (EC2, RDS, S3)
  • NGINX
  • CodeDeploy

App

  • Java
  • Android Studio

🧠 Technical Depth

📌 1. 비트마스킹 기반 예약 구조

회의실 예약 정보를 32bit 정수로 관리:

  • 2bit : 상위 클러스터 정보
  • 6bit : 회의실 정보
  • 24bit : 08:00 ~ 20:00 (30분 단위 시간 슬롯)

✔ 예약 가능 여부 확인 방식

1. 특정 시간대 선택
2. 해당 시간대 bit shift
3. AND 연산으로 사용 가능 여부 판별
4. 예약 확정 시 OR 연산으로 상태 업데이트

➡ 시간대 중복 체크를 O(1) 연산으로 처리
➡ 별도 row 분리 없이 효율적인 시간 관리


📌 2. 수요지식회 상태 자동화 로직

  • 최초 신청자 → “신청 중”
  • 이후 신청자 → “대기 중”
  • 신청 취소 시 → 대기자 자동 승격

➡ 상태 전이 로직을 서버 단에서 관리
➡ 프론트엔드는 상태 값에 따라 UI만 반응하도록 설계


📌 3. 인증/인가 구조

  • 42 OAuth 로그인
  • JWT 기반 인증 처리
  • 사용자 / 운영진 권한 분리
  • 관리자 페이지 접근 제한 로직 구현

🖥 My Role

  • UX 구조 설계
  • 타임라인 기반 예약 인터랙션 설계
  • 사용자 흐름 재정의
  • 상태 기반 UI 렌더링 구조 설계
  • 가시성 중심 레이아웃 구성

단순 화면 구현이 아니라 사용자 행동을 설계하는 역할에 집중했습니다.

📈 Result

  • 회의실 예약 클릭수 60% 감소
  • 한 화면 내 전체 회의실 현황 파악 가능
  • 비트 연산 기반 빠른 예약 판별 구조 구현
  • 관리자 승인 프로세스 체계화

🎯 What This Project Shows

  • 단순 UI 구현이 아닌 UX 재설계 경험
  • 문제를 구조적으로 분석하고 개선한 경험
  • 프론트엔드와 백엔드 구조를 함께 이해하는 개발 역량
  • 사용자 경험과 시스템 효율성을 동시에 고려한 설계

자세한 내용이 궁금하시다면. 아래를 참고해 주세요.
개발완료보고서

About

42서울 신청/예약 All-in-one 플랫폼

Resources

Stars

Watchers

Forks

Contributors

Languages