🚀 서비스 설명

🎓 학생과 학생회를 연결하는 능동적인 소통 플랫폼 on:u

학교 생활에서 겪는 문제들을 생생하게 공유하고,
자신의 의견을 적극적으로 표현할 수 있도록 돕는 능동적인 소통 플랫폼입니다! 🚀

🏫 학생들의 목소리가 더 멀리, 더 정확하게

학생들은 학업, 시설, 규정 등 학교 생활에서 겪는 다양한 이슈를 직접 이야기하고,
학생회는 이를 빠르게 파악해 보다 효과적인 대응을 할 수 있어요.
더 이상 익명 게시판에만 의존하지 않고, 실제 해결을 위한 소통의 장이 됩니다.

🗣 단순한 문의가 아니라, 학생들의 의견을 반영하는 공간

학생들은 단순히 질문을 남기는 것이 아니라, 학교 생활을 개선하기 위한 의견을 제시할 수 있어요.
학생회는 이 의견을 기반으로 학교와의 협력을 강화하고, 더 나은 방향으로 정책을 만들어 갈 수 있습니다.

🔄 쌍방향 커뮤니케이션으로 더 효과적인 문제 해결

학생들의 의견이 단순히 전달되고 끝나는 것이 아니라, 학생회와의 지속적인 소통을 통해 해결 방안을 모색할 수 있습니다.
일방적인 공지나 답변이 아니라, 실시간 피드백을 주고받으며 함께 해결하는 과정이 이루어집니다.

on:u를 통해 학생들은 더 적극적으로 자신의 목소리를 낼 수 있고,
학생회는 보다 명확하게 학생들의 의견을 반영할 수 있는 환경을 만들 수 있습니다. 🏫🚸

---

🔗 배포 링크

학생 페이지 배포 링크: on:u for student
학생회 페이지 배포 링크: on:u for student council

👥 팀원 소개

이지훈	황유란	오주은	전경석
FE	FE	BE	BE
CI/CD, 인증/인가 기능구현 말해요 기능 구현 캐싱 및 웹소켓 관리	답해요 기능 구현 채팅 무한 스크롤 구현 공통 컴포넌트 문서화	답해요 API 구현 인증,인가 기능 구현 CI 파이프라인 구축	답해요 API 구현 금칙어 시스템 구현 CD 파이프라인 구축

🎯 팀 목표

• 모든 기능 완성하기
• 기술을 이해하고 사용하기
• 기술적 도전과 성장
• 팀원들의 의견 존중하기

🛠 기능 소개

기능	설명
🎙️말해요 (1:1 채팅)	학생이 학생회와 1:1로 의견을 나눌 수 있는 실시간 채팅 기능
🎤답해요 (그룹 채팅)	특정 주제에 대해 학생과 학생회가 효율적으로 소통할 수 있는 그룹 채팅 기능
📊관리자 대시보드	학생회의 의견 관리 및 통계 제공

🛠 기술 스택

구분	기술 스택
Frontend
Backend
데이터베이스
Front CI/CD
Back CI/CD

---

⛓️ 프론트엔드 아키텍처

Directory Structure

frontend/
├── public/
├── src/
│ ├── assets/
│ │ ├── icons/
│ │ └── imgs/
│ ├── components/ # 공통 컴포넌트
│ ├── config/ # 환경 설정 (API URL)
│ ├── domains/ # 학생 / 학생회 도메인 구현 폴더
│ │ ├── student/ 학생 도메인
│ │ └── admin/ 학생회 도메인
│ ├── hooks/ # 전역 커스텀 훅
│ ├── routes/ # 라우팅 관련
│ ├── store/ # 전역 상태 관리
│ ├── stories/ # 스토리북 관련
│ ├── styles/ # 전역 스타일 관련
│ ├── types/ # 타입 정의
│ ├── utils/ # 유틸리티 함수
│ ├── index.css
│ ├── main.tsx # 진입점

📦 프론트엔드 CI/CD

📌 주요 단계:

• dev 브랜치에 push 발생 시 Netlify가 자동으로 빌드 및 배포 진행
• pre-commit 단계에서 ESLint, Prettier, Husky를 활용하여 코드 스타일 및 품질 유지

---

⛓️ 백엔드 아키텍처

백엔드 아키텍처를 설명한 위키 주소입니다.

📦 백엔드 CI/CD

GitHub Actions + Docker + Nginx로 자동 배포

📌 자동 테스트 수행

1. be 및 dev 브랜치에 Pull Request(PR) 생성 시, 모든 테스트 수행
2. 단위 테스트(Unit Test), 통합 테스트(Integration Test) 실행

📌 배포 과정

1. dev 브랜치에 push → GitHub Actions가 Docker 이미지를 빌드
2. AWS EC2로 배포

---

🛠 백엔드 Proxy Structure

📌 구조 설명

• Nginx가 리버스 프록시 역할 수행
• Let's Encrypt를 사용하여 HTTPS 인증 적용
• Spring Boot 서비스와 연결되어 API 요청을 처리

📝 API 명세서

API 명세서 swagger 링크입니다.

🗄️ Database

데이터베이스 구조를 설명하는 위키 링크입니다.

---

✏️ 주요 개발일지

위키에서 모든 개발 일지를 확인할 수 있습니다.

분야	링크	분야	링크
FE_이지훈	전역적 소켓 관리	BE_오주은	중복 웹소켓 세션 처리 전략 및 구현 결정
FE_이지훈	쿼리 캐싱을 통한 서버 상태관리	BE_오주은	답해요 성능 테스트
FE_황유란	공통 컴포넌트 구현 및 문서화	BE_전경석	Redis Sync vs Async 비교
FE_황유란	채팅 무한스크롤	BE_전경석	금칙어 필터링

📑 기획/디자인 파일

화면 디자인, 기획 디스크립션.pdf