## 1. 프로젝트 개요
사내 시스템 접근성과 일상 업무 편의성 향상을 위해
**북마크, 투두리스트, 회의실 예약, 깃랩/레드마인/챗GPT/날씨 API 연동 기능**을 하나로 통합한
**Chrome 확장 프로그램**을 개발했습니다.
사용자 경험을 고려한 직관적인 인터페이스와, 빠른 비동기 처리 기반의 실시간 데이터 제공을 목표로 삼았습니다.
## 2. 기술 스택
- **Frontend**
- React + Vite (Grid Layout, Big Calendar)
- JavaScript (SSE 스트리밍 처리), axios
- Keycloak (SSO 인증 연동) **여기서 토큰발급, 갱신**
- **Backend**
- Spring Cloud 기반 API 서버
- JPA (기본 데이터 관리)
- JWT **토큰 인증만** 수행
- Spring WebFlux + WebClient (비동기 통신)
**외부 통신 모듈(External Service)만 (DispatcherHandler): [Spring WebFlux (비동기, Reactive)]**
**그 외 모듈(Workspace Service 등)은 (DispatcherServlet): [Spring MVC (동기, Servlet)]**
- **비동기/Reactive 기술**
- **Mono (단일 API 응답)**
공공데이터 포털(날씨 API)
깃랩 MR 데이터 요청
레드마인 Issue 데이터 요청
- **Flux (SSE 스트리밍 응답)**
OpenAI GPT-4o API
## 3. 주요 기능
- Grid 형식의 드래그 앤 드랍으로 커스텀하게 위젯 크기, 위치 설정
- 자주 방문하는 사이트 (Chrome의 topSites API에서 자주 방문한 사이트 가져오기)
- 북마크 바로가기 관리 (개인화된 URL 저장 및 빠른 이동, faviconURL 로고 사용)
- 투두리스트 기능 (할 일 관리 및 완료 체크, 드래그 앤 드랍으로 우선순위 지정)
- 회의실 예약 시스템 (실시간 예약 현황 조회 및 등록, 반복설정도 가능)
- 사내 시스템 연동 (GitLab, Redmine, Hi,Works 데이터 불러오기)
- 챗봇 (GPT) 연동 (질의응답)
- 공공데이터 기반 실시간 날씨 정보 제공
---
* ##### 리액트 + 스프링 + 키클록 구조도
* ##### PKCE를 통해 토큰 발급 과정
---
* #### 실제 화면:
---
* ##### ChatGPT 컴포넌트 (SSE 프로토콜)
---
* ##### Spring Cloud 모듈 종류 (Kiali – 트래픽 모니터링)
