Teametry

Teametry는 참여자의 설문 결과를 기반으로 팀을 구성하고, 방 생성부터 설문 제출, 팀 편성 및 결과 관리까지 지원하는 React + Django REST Framework 기반 Full-stack Web Application입니다.

Screenshots

Home	방 생성

설문	팀 편성 결과

스크린샷의 참가자 정보는 포트폴리오 촬영을 위해 만든 합성 데이터입니다.

주요 기능

• 개발/일반 팀 유형과 분할 방식에 따른 방 생성
• 방 코드를 이용한 참가 및 참가자 정보 등록
• Big Five와 MBTI 기반 설문 응답 수집
• 설문 제출 현황 조회
• 역할·리더 선호·성향을 반영한 규칙 기반 팀 편성
• 팀 결과 조회, 구성원 이동, 리더 변경 및 최종 확정

Tech Stack

구분	기술
Frontend	React 18, React Router 6, Chart.js, Create React App
Backend	Python, Django 5, Django REST Framework
API / Security	django-cors-headers, Django password hasher
Database	SQLite (Local Development)
Testing	Django Test, React Testing Library

Architecture

React Frontend
      ↓ JSON / REST API
Django REST Framework
      ↓
Django Models / SQLite
      ↓
Rule-based Team Assignment Logic

React가 사용자 UI를 담당하고 Django는 REST API를 제공합니다. 팀 편성은 머신러닝이 아니라 참가자의 역할 선호, 리더 선호, 성향 점수와 MBTI 기질을 사용하는 규칙 기반 알고리즘입니다.

서비스 흐름

방 생성
  ├─ 생성자: 방 코드와 관리자 비밀번호 확인
  └─ 참가자: 공유받은 방 코드로 참가
                  ↓
            참가자 정보 등록
                  ↓
               설문 제출
                  ↓
          생성자: 설문 현황 확인
                  ↓
            규칙 기반 팀 편성
                  ↓
         결과 조회·수동 조정·확정

Project Structure

teametry/
├── frontend/
│   ├── public/
│   ├── src/
│   │   ├── assets/
│   │   ├── App.js
│   │   ├── api.js
│   │   ├── CreateTeam.js
│   │   ├── JoinPage.js
│   │   ├── SurveyPage.js
│   │   ├── SurveyStatusPage.js
│   │   ├── TeamResultPage.js
│   │   ├── Result2Page.js
│   │   ├── PasswordModal.js
│   │   └── *.test.js
│   ├── .env.example
│   ├── package.json
│   └── package-lock.json
├── backend/
│   ├── config/
│   ├── teamapp/
│   │   ├── migrations/
│   │   ├── models.py
│   │   ├── views.py
│   │   ├── urls.py
│   │   └── tests.py
│   ├── .env.example
│   ├── manage.py
│   └── requirements.txt
├── docs/
│   └── images/
├── experiments/
│   └── teametry_test.ipynb
├── .gitignore
└── README.md

experiments/teametry_test.ipynb는 제품 실행에 필요하지 않은 팀 편성 규칙 실험 Notebook입니다.

API Endpoints

모든 서비스 API는 /api/ prefix를 사용합니다. 관리자 비밀번호가 필요한 요청은 URL query가 아니라 POST body로 전달합니다.

기능	Method	Endpoint	Backend View
연결 확인	GET	/test/	test_connection
방 생성	POST	/api/create_team/	TeamCreateView
방 코드 확인	POST	/api/join_room/	RoomJoinView
참가자 등록	POST	/api/join_participant/	ParticipantJoinView
설문 제출	POST	/api/submit_survey/	SurveySubmitView
설문 현황	POST	/api/survey_status/	SurveyStatusView
팀 편성	POST	/api/team_assign/	TeamAssignView
팀 결과	POST	/api/team_result/	TeamResultView
팀 구성 변경/확정	POST	/api/change_team_assignment/	TeamChangeView
팀 목록	POST	/api/team-list/	TeamListView
생성 방 정보	POST	/api/rooms/<room_code>/info/	RoomInfoView
팀 상세	POST	/api/team_detail/<room_code>/<team_number>/	TeamDetailView
참가자 요약	POST	/api/participant_summary/<participant_id>/	ParticipantSummaryView

방 생성 응답은 생성자에게 원문 비밀번호를 한 번 반환하지만 데이터베이스에는 Django password hasher 결과만 저장합니다.

Local Setup

Backend

새 가상환경과 새 SQLite 데이터베이스를 사용합니다.

cd backend
python3 -m venv .venv
source .venv/bin/activate
pip install -r requirements.txt

export DJANGO_SECRET_KEY="로컬에서 생성한 충분히 긴 임의값"
export DJANGO_DEBUG=True
export DJANGO_ALLOWED_HOSTS="localhost,127.0.0.1,[::1]"
export CORS_ALLOWED_ORIGINS="http://localhost:3000,http://127.0.0.1:3000"
export FRONTEND_BASE_URL="http://localhost:3000"

python manage.py migrate
python manage.py check
python manage.py runserver

Django는 .env 파일을 자동으로 읽는 패키지를 사용하지 않습니다. backend/.env.example을 참고해 셸 또는 실행 환경에 값을 설정해야 합니다. 기본 주소는 http://127.0.0.1:8000입니다.

Frontend

cd frontend
cp .env.example .env
npm ci
npm start

REACT_APP_API_BASE_URL=http://localhost:8000

기본 주소는 http://localhost:3000입니다.

Test & Build

Backend

cd backend
python manage.py check
python manage.py makemigrations --check --dry-run
python manage.py migrate
python manage.py test

현재 13개 테스트가 다음을 검증합니다.

• 방 생성과 비밀번호 해시 저장
• 방 참가 및 잘못된 관리자 비밀번호 거부
• 설문 제출과 팀 결과 조회
• 다인원 팀 편성의 참가자 중복·누락 방지
• 팀 크기가 정확히 나뉘는 경우와 나머지가 생기는 경우
• 관리자의 팀 이동, 최종 확정 및 확정 후 변경 거부
• POST body 기반 팀 목록과 방 정보 조회

Frontend

cd frontend
CI=true npm test -- --watchAll=false
npm run build

현재 2개 테스트가 Home 렌더링과 관리자 비밀번호가 URL에 포함되지 않는 이동 흐름을 검증합니다.

Integration Smoke Test

로컬 React/Django 서버와 합성 데이터로 다음 흐름을 확인했습니다.

방 생성 → 방 참가 → 참가자 등록 → 설문 제출
       → 설문 현황 → 팀 편성 → 팀 결과

정상 요청은 200/201, 잘못된 관리자 비밀번호 요청은 403을 반환했습니다.

Security Notes

• Django SECRET_KEY, DEBUG, ALLOWED_HOSTS, CORS Origin을 환경변수로 관리합니다.
• SQLite DB와 .env 파일은 Git에서 제외합니다.
• 방 비밀번호는 Django password hasher로 저장합니다.
• 비밀번호를 URL query string이나 localStorage에 저장하지 않습니다.
• 관리자 API는 비밀번호를 POST body로 전달합니다.
• 실제 참가자 개인정보를 테스트 fixture나 저장소에 포함하지 않습니다.

이는 기본 위험을 줄이기 위한 현재 구현 범위입니다. 사용자 인증, rate limit, HTTPS, 개인정보 보존·삭제 정책을 대체하지 않습니다.

Known Limitations & Roadmap

• CRA / react-scripts 5 기반 Frontend Toolchain의 장기적 교체를 검토합니다.
• npm audit에 남은 CRA 개발 의존성 및 React Router 항목은 테스트 도구 전환과 함께 점검합니다.
• 컴포넌트별 API 에러 처리와 로딩 UI를 점진적으로 공통화할 필요가 있습니다.
• 배포 전 사용자 인증·권한, 요청 제한, HTTPS, 로그 마스킹과 데이터 삭제 정책이 필요합니다.
• 팀 편성 규칙의 더 큰 인원 수와 다양한 분할 조건에 대한 경계값 테스트를 확장할 수 있습니다.

Author

김상우