팀원 & 담당파트

컨셉

PhysiClick은 통증을 가지고 있는 사용자와 그 통증에 대해 전문적 지식을 가지고 있는 물리치료사 사용자 간의 전문적 정보를 교류합니다.
통증을 가지고 있는 사용자는 3D모델을 통해 통증 부위를 시각화하고 논문을 기반으로 한 정보 제공으로 보다 전문적인 질병에 대한 정보를 알 수 있습니다.
물리치료사 사용자는 본인이 치료 방법이나 질병에 대한 정보를 게시하며 치료사 간의 치료 방법을 쉽게 공유하고, 일반 사용자가 쉽게 정보를 얻어갈 수 있습니다.

기능

1. 회원가입 및 로그인: 로컬 회원가입/로그인 구현 (개선: 소셜로그인 도입)
- 회원가입시 중복 아이디 유무를 ajax를 통한 즉각적인 반응 확인 가능
2. 3D 모델 클릭 요소: Ble nder로 부위 제작, Three.js로 회전·확대·축소·클릭 색변화 구현
- 클릭 부위에 따라서 각각 다른 정보를 제공
3. 유튜브 API, 정보/운동 영상 제공
- 3D 모델을 클릭했을 때 해당 부위에 연관되는 질병을 검색어로 영상 정보 제공
4. 게시판 기능
- 물리치료사와 관리자가 등급으로 분리되어 쓸 수 있는 게시판 이용이 다름.
- 일반이용자들은 북마크 기능으로 mypage에서 북마크한 게시글을 확인
5. SSE 기반 알림
- 북마크 이벤트가 발생했을 때 게시글을 작성한 사람에게 알람이 가도록 구현

특장점

1. 실시간 반응형 서비스 경험
- 알림 기능을 통해 좋아요나 즐겨찾기 등 사용자의 행동이 즉시 반영
2.맞춤형 정보 접근성
- 사용자는 자신이 관심 있는 주제(게시판)나 부위(신체 파트)에 따라
관련 게시글을 쉽게 찾아볼 수 있음
3. 나만의 공간 , 마이페이지 제공
- 내가 쓴 글, 내가 누른 좋아요, 즐겨찾은 게시글이 한눈에 정리되어 활동관리
4. 사용자 간 상호작용 강화
- 좋아요(북마크) 기능으로 게시글에 공감 표현이 가능하며, 서로의 활동을 통해 커뮤니티의 활발한 상호작용을 유도
5. 직관적이고 일관된 화면 구성
- 각 기능별 화면이 일관된 디자인 패턴으로 구성되어 초보자도 쉽게 적응
6. 외부 콘텐츠
- 유튜브 api를 이용하여 3d 모델 클릭 부위에 따라 검색어를 기반으로 의료적인 영상 제공

사용기술 및 개발환경

[Front]
- 언어: HTML, CSS, JavaScript, TypeScript
- webGl, three.js
- jQuery
[Back ]
- Java17
- 프레임워크: Spring Framework + MyBatis
- 데이터베이스: MySql
- 서버: Apache Tomcat 9.0
- 웹소켓 통신: STOMP
[외부 API, 라이브러리, 툴]
- Kakao Maps API
- Toast UI Editor
- SSE (Server-Sent Events, 실시간 알림)
- GSAP (스크롤 애니메이션)
[개발 도구]
- IDE: STS, VSCode, IntelliJ
- 버전 관리: Git, GitHub
- DB툴: SQL Developer