docs: README Update

README.md

@@ -125,22 +125,73 @@
 
 ## 💎 프로젝트 수행 결과
 
-- [풀스택](https://github.com/KTB-19/movie_chatbot/blob/main/docs/%EA%B2%B0%EA%B3%BC_%ED%92%80%EC%8A%A4%ED%83%9D.md)
-- [클라우드](https://github.com/KTB-19/movie_chatbot/blob/main/docs/%EA%B2%B0%EA%B3%BC_%ED%81%B4%EB%9D%BC%EC%9A%B0%EB%93%9C.md)
-- [인공지능](https://github.com/KTB-19/movie_chatbot/blob/main/docs/%EA%B2%B0%EA%B3%BC_%EC%9D%B8%EA%B3%B5%EC%A7%80%EB%8A%A5.md)
+- 프론트엔드 [자세히]()
+  - React를 사용한 사용자 인터페이스 구축
+  - 상태 관리 및 전역 상태 관리
+  - 백엔드 API와의 통신
+- 백엔드 [자세히]()
+    - RESTful API 설계에 대한 이해 및 적용
+    - BDDMockito, JUnit5를 사용한 단위 테스트 작성
+    - ExceptionHandler을 통한 공통 예외 처리
+    - Validation 과정을 통해 데이터 유효성 검증
+    - Swagger를 사용한 API 명세서 작성
+    - AI 워드 임베딩 과정 스케줄링
+- 크롤링 [자세히]()
+  - Kobis에서 제공하는 지역별 및 날짜별 상영 스케줄 정보를 크롤링
+  - DB 설계 및 데이터 저장
+  - 크롤링 속도 개선을 위해 멀티프로세싱 적용
+- 클라우드 [자세히]((https://github.com/KTB-19/movie_chatbot/blob/main/docs/%EA%B2%B0%EA%B3%BC_%ED%81%B4%EB%9D%BC%EC%9A%B0%EB%93%9C.md))
+  - Terraform을 활용한 인프라 구성
+  - Ansible을 활용하여 Docker, Docker-compose, Node_exporter를 세팅
+  - Github Actions를 이용한 CI/CD
+  - Prometheus, Grafana를 통해 모니터링
+  - 컨테이너 배포 후 연결 및 배포환경 api 연결
+- 인공지능 [자세히](https://github.com/KTB-19/movie_chatbot/blob/main/docs/%EA%B2%B0%EA%B3%BC_%EC%9D%B8%EA%B3%B5%EC%A7%80%EB%8A%A5.md)
+  - RAG 활용한 영화관 추천 전문 고객지원 챗봇 커스텀
+  - ChatGPT API 프롬프트 엔지니어링을 통해 응답 생성
 
 <br>
 
 ## ⚠️ 트러블 슈팅
 
-- [풀스택](https://github.com/KTB-19/movie_chatbot/blob/main/docs/%ED%8A%B8%EB%9F%AC%EB%B8%94%EC%8A%88%ED%8C%85_%ED%92%80%EC%8A%A4%ED%83%9D.md)
-- [클라우드](https://github.com/KTB-19/movie_chatbot/blob/main/docs/%ED%8A%B8%EB%9F%AC%EB%B8%94%EC%8A%88%ED%8C%85_%ED%81%B4%EB%9D%BC%EC%9A%B0%EB%93%9C.md)
-- [인공지능](https://github.com/KTB-19/movie_chatbot/blob/main/docs/%ED%8A%B8%EB%9F%AC%EB%B8%94%EC%8A%88%ED%8C%85_%EC%9D%B8%EA%B3%B5%EC%A7%80%EB%8A%A5.md)
+- 프론트엔드 [자세히]()
+  - useRef를 사용한 상태 반영
+- 백엔드 [자세히]()
+  - AI 코드 구동을 위한 효율적인 아키텍처
+  - stream을 활용한 복잡한 로직 단순화
+- 크롤링 [자세히]()
+  - 멀티 프로세싱을 사용한 크롤링 시간 단축
+- 클라우드 [자세히](https://github.com/KTB-19/movie_chatbot/blob/main/docs/%ED%8A%B8%EB%9F%AC%EB%B8%94%EC%8A%88%ED%8C%85_%ED%81%B4%EB%9D%BC%EC%9A%B0%EB%93%9C.md)
+  - Mysql 도커 이미지로 EC2에서 Endtrypoint 에러
+  - Python Crawling 이미지 생성 중 chrome browser 설치 문제
+  - 크롤링 인스턴스의 적절한 type 설정
+  - 크롤링 이외의 시간에 사용되지 않는 인스턴스
+  - 인스턴스와 서브넷 등의 네트워크 관계에 대한 공부의 필요성
+  - CI/CD는 모든 상황에서 필요한 것인가?
+  - Docker container 배포시 각 컨테이너의 연결 방법에 대한 고민
+- 인공지능 [자세히](https://github.com/KTB-19/movie_chatbot/blob/main/docs/%ED%8A%B8%EB%9F%AC%EB%B8%94%EC%8A%88%ED%8C%85_%EC%9D%B8%EA%B3%B5%EC%A7%80%EB%8A%A5.md)
+  - chatgpt api를 활용한 최적의 응답 생성 방법
+  - 가공을 위한 정형화된 아웃풋
+  - chatgpt api를 활용한 엔티티 추출 방식
 
 <br>
 
 ## 🥳 회고
 
-- [회고](https://github.com/KTB-19/movie_chatbot/blob/main/docs/%ED%9A%8C%EA%B3%A0.md)
+- 종합 회고
+  - 성과
+    - 👍 초기 계획한 최소 기능 구현 완료
+    - 👎 처음부터 기획 기능을 명확히 설계했다면, 시간 절약했을 듯
+    - 👎 실 서비스 사용 테스트를 통해 예외 처리 개선 필요
+  - 배움
+    - 👍 서로 다른 직무 간 협업 방식을 익힘
+    - 👍 실무에 필요한 기술 습득
+  - 협업
+    - 👍 매일 스크럼을 통해 진행상황과 문제점 공유
+    - 👍 애자일 방식 도입을 통해 즉각적으로 논의 및 수정
+    - 👎 일정 딜레이와 스프린트 진행 방식 변경이 아쉬움
+    - 👎 태스크 관리 및 문서화 할 수 있는 환경 필요
+- [개인별 회고](https://github.com/KTB-19/movie_chatbot/blob/main/docs/%ED%9A%8C%EA%B3%A0.md)
+
 
 <br>

docs/결과_백엔드.md

@@ -0,0 +1,22 @@
+# 백엔드
+> 김요한 담당
+
+- RESTful API 설계에 대한 이해 및 적용
+- BDDMockito, JUnit5를 사용한 단위 테스트 작성
+
+<img src="./img/test.png" width=500>
+
+- ExceptionHandler을 통한 공통 예외 처리
+  - 전역에서 발생하는 예외를 한 곳에서 처리함으로써, 예외 처리 로직을 모듈화하고 유지보수성 높임
+  - 로깅을 통해, 모니터링과 디버깅이 수월
+
+<img src="./img/exception.png" width=800>
+
+- Validation 과정을 통해 데이터 유효성 검증
+    - Pattern, Size 지정을 통해 요청 형식 제한
+    - 데이터 무결성 보장 및 보안 강화
+
+<img src="./img/validate.png" width=700>
+
+- Swagger를 사용한 API 명세서 작성
+- AI 워드 임베딩 과정 스케줄링

docs/결과_인공지능.md

@@ -1,31 +1,33 @@
-## 1. RAG 기술 활용
+# 인공지능
+> 정예은, 김현중 담당
+
+## RAG 기술 활용
 
 ⇒ 영화관 추천 전문 고객지원 챗봇으로 커스텀
 
 - LLM ChatGPT api를 활용한 응답 생성
     - 사용자 질문에서 NER을 이용하여 Entity 추출
         - 9월 11일에 3시 강남에서 에일리언 보고싶어.
         - {date}: 2024-09-11 {time}: 15:00 {region}: 강남{movieName}:에일리언
-    - koBERT,kiwi를 이용한 RAG구축 후
+    - koBERT, kiwi를 이용한 RAG구축 후
     - FAISS를 이용한 Semantic Search, 및 Levenshtein distance 기반 검색 기능 개발
         - {movieName}:에일리언 -> 에일리언:로물루스
     - LLM 응답 정형화
-- LLM ChatGPT api를 활용한 응답 생성
-
-ex) 오늘 판교에서 에이리언 보고 싶어
+      - LLM ChatGPT api를 활용한 응답 생성   
+      ex) 오늘 판교에서 에이리언 보고 싶어
 
-## 2. ChatGPT API를 활용한 응답 생성
+## ChatGPT API를 활용한 응답 생성
 
 1. 사용자의 질문에서 추출한 정보가 올바른지 사용자에게 다시 확인하는 기능
-- ex) ‘2024-09-09 18:00에 성남시 분당구에서 에이리언:로물루스를 보고 싶은 게 맞으신가요?
-- {date} {time}에 {region}에서 {movieName}을 보고 싶은 게 맞으신가요?
+   - ex) ‘2024-09-09 18:00에 성남시 분당구에서 에이리언:로물루스를 보고 싶은 게 맞으신가요?
+   - {date} {time}에 {region}에서 {movieName}을 보고 싶은 게 맞으신가요?
 
-1. 사용자의 다양한 질문 형식을 자동으로 인식, 일관된 형식으로 변환해 답변하는 기능
-- 시간/날짜 형식 전처리(YYYY-MM-DD, HH:MM)
-- 지역명 데이터 추가해 영화관 조회를 용이하게 함 ex) ‘판교’ → ‘경기도 성남시 분당구’
+2. 사용자의 다양한 질문 형식을 자동으로 인식, 일관된 형식으로 변환해 답변하는 기능
+   - 시간/날짜 형식 전처리(YYYY-MM-DD, HH:MM)
+   - 지역명 데이터 추가해 영화관 조회를 용이하게 함 ex) ‘판교’ → ‘경기도 성남시 분당구’
 
-1. 사용자가 선택한 날짜, 장소, 영화명을 기반으로 최적의 영화관, 영화스케줄을 추천해주는 답변 생성
-- 사용자 맞춤 영화관 추천
-    - 사용자가 입력한 위치 근처에서 교통 접근성이 좋은 영화관, 사용자가 보고 싶은 영화를 많이 상영하는 영화관을 추천
-- 영화관 주소 데이터를 추가: 영화관 근처 교통정보 제공
-    - 추천된 영화관 근처 지하철역에서 이동경로(몇 번 출구에서 도보로 몇 분), 지하철역이 없을 경우 버스 정류장 정보 제공
+3. 사용자가 선택한 날짜, 장소, 영화명을 기반으로 최적의 영화관, 영화스케줄을 추천해주는 답변 생성
+   - 사용자 맞춤 영화관 추천
+       - 사용자가 입력한 위치 근처에서 교통 접근성이 좋은 영화관, 사용자가 보고 싶은 영화를 많이 상영하는 영화관을 추천
+   - 영화관 주소 데이터를 추가: 영화관 근처 교통정보 제공
+       - 추천된 영화관 근처 지하철역에서 이동경로(몇 번 출구에서 도보로 몇 분), 지하철역이 없을 경우 버스 정류장 정보 제공

docs/결과_크롤링.md

@@ -0,0 +1,14 @@
+# 크롤링
+> 이미르 담당
+
+- **Kobis에서 제공하는 지역별 및 날짜별 상영 스케줄 정보를 크롤링**
+    - 7일치의 정보를 크롤링 + 새롭게 올라온 날짜의 상영 스케줄 크롤링
+    - 선택된 조건에 맞는 영화 상영 스케줄 정보 수집
+        - 광역 선택 -> 기초 선택 -> 영화관 선택 -> 날짜 선택 순서로 크롤링 절차를 진행하여 사용자가 3~4회의 버튼 클릭으로 영화 상영 스케줄 정보를 수집하도록 구현
+- **DB 설계 및 데이터 저장**
+    - 크롤링한 상영 스케줄 데이터를 효율적으로 조회할 수 있도록 DB 테이블 설계
+    - 상영 정보 조회 속도와 데이터 정합성을 고려하여 영화관, 영화 테이블의 정보를 기준으로 상영정보를 조회하도록 함
+  ![erd.png](./img/erd.png)
+- **크롤링 속도 개선을 위해 멀티프로세싱 적용**
+  - 여러 영화관의 상영 정보를 동시에 수집하여 시간 최적화
+  - 시간 최적화

docs/결과_클라우드.md

@@ -1,4 +1,7 @@
-# 프로젝트 아키텍처
+# 클라우드
+> 김도경, 김민우 담당
+
+## 프로젝트 아키텍처
 
 ![Movie-chatbot-architecture.png](./img/Movie-chatbot-architecture.png)
 

docs/결과_프론트엔드.md

@@ -0,0 +1,35 @@
+# 프론트엔드
+> 이미르 담당
+
+- React를 사용한 사용자 인터페이스 구축
+    - React 라이브러리를 사용한 컴포넌트 기반 UI 설계 및 구축
+    - UI 모듈화를 통해 각 컴포넌트의 독립적 개발 및 유지보수 가능성 향상과 코드 재사용성 극대화
+
+    <img src="./img/4.png" width=150>
+
+- **상태 관리 및 전역 상태 관리**
+  - useState를 활용한 동적 데이터(사용자 입력 값, 서버로부터 받은 데이터 등) 관리
+  - useEffect를 통한 컴포넌트 생명주기 기반 데이터 페칭 및 DOM 업데이트 처리
+  - useRef를 사용하여 최신 상태 유지와 즉시 참조 가능성 확보
+  - 상태 변경에 따른 자동 렌더링 및 코드 간결화로 유지보수성 향상
+  - Context API를 통한 전역 상태 관리 도입
+      - 중복된 상태 전달 없이 필요한 데이터에 직접 접근할 수 있도록 개선하여 코드 가독성 향상
+
+<img src="./img/3.png" width=600>
+
+  - **백엔드 API와의 통신**
+      - 사용자 입력 기반 영화 정보(영화 이름, 지역, 날짜 등)를 처리하는 비동기 통신 구현
+      - fetch API를 사용하여 백엔드 서버와 통신하며, 실시간 상영 스케줄 정보 및 응답값 반환
+      - 네트워크 지연 없는 사용자 경험 최적화
+
+<img src="./img/2.png" width=500>
+<img src="./img/1.png" width=400>
+
+  - 핵심 기능
+    - 실시간 영화 상영 정보 제공: 사용자의 질문에 대한 응답 제공 및 사용자가 입력한 영화, 지역, 날짜 정보를 바탕으로 상영 시간 정보를 실시간으로 제공
+    - 상태 기반 UI 업데이트: 사용자 입력 및 백엔드 응답에 따른 UI 실시간 변경 처리. 지역 선택 시 입력값과 응답값에 따른 동적 업데이트.
+    - 유연한 필터링 및 데이터 처리: 영화, 지역, 날짜 등의 선택에 따른 유동적인 데이터 필터링 및 항목 변경 시 즉각 처리.
+
+  - lighthouse 지표
+
+<img src="./img/lighthouse.png" width=400>

docs/트러블슈팅_백엔드.md

@@ -0,0 +1,53 @@
+# 백엔드
+> 김요한 담당
+
+## 인공지능 Python 코드를 구동하기 위한, 효율적인 아키텍처를 어떻게 설계할까?
+
+### 문제1
+
+- 인공지능 팀에서 Python 코드를 작성하기 때문에, 이를 구동시키기 위한 방법이 고민되는 상황
+- 선택지
+    - Spring 애플리케이션에서 Jython을 사용해 구동
+    - Python 코드를 구동시키기 위한 서버를 따로 분리
+
+### 해결
+
+- Spring 애플리케이션에서 Jython을 사용해 구동하기로 결정
+- 서버를 분리할 시, 서버 간 통신과정 추가로 인해 지연 시간 증가 및 유지보수 비용 증가가 예상되었기 때문
+
+### 문제2
+
+- Jython이 Python 2.7까지 지원해서, 최신 라이브러리와의 호환성 문제
+- 외부 패키지를 설치하기 어려운 문제
+
+### 해결
+
+- 서버를 두 개로 분리해, FastAPI에서 구동해서 해결
+- 효과
+    - 책임 분산 및 확장성 개선
+        - AI 코드 실행에 대한 책임을 FastAPI가 맡음으로써, Spring 애플리케이션은 비즈니스 로직에 집중 가능하고, 이로 인해 확장성 및 유지보수성이 상승함
+    - 장애 격리로 안정성 강화
+        - AI 코드 실행이 리소스를 많이 소모하기 때문에, 이로 인한 장애 발생 시 Spring 애플리케이션에 문제 전염되는 것을 차단
+    - 성능 및 처리 효율성 증가
+        - FastAPI는 비동기 처리를 잘 지원해서, AI 작업을 보다 빠르고 효율적으로 처리 가능
+
+---
+
+## 여러 객체에 흩어져있는 정보를 어떻게 한 번에 묶을 수 있을까?
+
+### 문제
+
+- 영화 상영 정보, 영화관 객체를 사용해 영화관 별 상영정보를 얻어야 하는 상황
+
+### 해결
+
+- stream의 groupingBy, mapping을 사용해 해결
+
+```java
+Map<String, List<Time>> timesPerTheaterNameMap = dto.stream()
+                .collect(
+	                groupingBy(
+		                d -> d.getTheater().getName(), 
+		                mapping(d -> d.getMovieInfo().getTime(), toList())
+	                )
+                );

docs/트러블슈팅_인공지능.md

@@ -1,3 +1,6 @@
+# 인공지능
+> 정예은, 김현중 담당
+
 ## chatgpt api를 활용한 최적의 응답 생성 방법
 
 문제: 서비스 품질을 유지하려면 정해진 형식에 맞게 출력되어야 하는데 llm특성 상 매번 조금씩 다른 답변이 생성됨

docs/트러블슈팅_크롤링.md

@@ -0,0 +1,26 @@
+# 크롤링
+> 이미르 담당
+
+## 영화 상영 스케줄 크롤링 시간을 어떻게 단축할 수 있을까?
+
+### 문제1
+
+- 영화 상영 정보에 대한 하루치 데이터를 크롤링 하는데 120분이 걸리는 상황
+
+### 해결1
+
+- 멀티 프로세싱을 사용해 40분으로 단축 (3배)
+
+### 문제 2
+
+- 일주일치 데이터를 크롤링 하는데, 40 x 7 = 280분이 걸리는 상황
+- 추가 시간 단축을 위해 멀티스레딩 시도 했으나 context switching 문제 발생
+
+### 해결 2
+
+- 멀티프로세싱만 사용하기로 결정
+- 프로세스 최적화
+    - 최대 가용한 cpu 수에 맞게 프로세스 수 설정
+    - 크롤링 대상의 크기에 따라 프로세스 별 사이즈 설정
+- 새롭게 업데이트되는 하루치 데이터만 크롤링하기로 결정
+- ⇒ 25분으로 단축 (11배)