[FEAT] 백엔드 API 연동 및 학습 캘린더 구현#158
Closed
DDINGJOO wants to merge 55 commits into
Closed
Conversation
- Header: 로고, 네비게이션, 프로필 드롭다운, 알림, 다크모드 토글 - Sidebar: 학습 모드 메뉴, 접기/펼치기, 반응형 - Footer: 저작권, 링크 - MainLayout: Header + Sidebar + Content + Footer 통합 - ThemeContext: 다크모드 지원 - Dashboard: 학습 모드 카드 UI
…o-title [FEAT] 메인 레이아웃 구현
- 영어공부: OPIC 연습, 작문 연습 하위 메뉴 추가 - 프리토킹: 사람들과, AI와 하위 메뉴 추가 - 하위 메뉴 접기/펼치기 기능 (Collapse) - 펼침 상태 localStorage 저장 - Dashboard 학습 모드 카드 업데이트 (3개로 변경) - Dashboard 이모지 제거
- ChatRoomCard 컴포넌트 추가 - FreetalkPeoplePage 페이지 구현 - 레벨 필터링, 검색 기능 추가 - 더미 데이터로 UI 테스트
…freetalk-people-list [FEAT] 프리토킹(사람들과) 채팅방 리스트 페이지 구현
- 영어공부/프리토킹 -> 말하기연습/쓰기연습으로 최상단 카테고리 변경 - 말하기연습: 오픽연습, AI와 말해보기 - 쓰기연습: 사람들과 채팅하기, 작문연습 - localStorage 기본 펼침 상태 키 업데이트 - 관련 아이콘 변경 (Mic, Create) Closes #28
- 영어공부/프리토킹 -> 말하기연습/쓰기연습으로 변경 - 말하기연습: 오픽연습, AI와 말해보기 - 쓰기연습: 사람들과 채팅하기, 작문연습 - 카드 설명 문구 업데이트
- 클릭 방식에서 호버 방식으로 변경 - onMouseEnter/onMouseLeave 이벤트 적용
- flexbox에서 Grid 레이아웃으로 변경하여 호버 시 레이아웃 깨짐 방지 - 카드 width 고정으로 안정적인 반응형 지원
…ategory-restructure [FEAT] Sidebar 및 Dashboard 메뉴 카테고리 구조 변경
- height: 100%로 Grid 내 카드 높이 통일 - flexbox 레이아웃 적용으로 내부 콘텐츠 균일 배치
- Grid item에 display: flex, alignItems: stretch 적용 - Card에 width: 100% 추가
- height: 160px로 모든 카드 크기 통일 - 내용 길이에 관계없이 일정한 카드 크기 유지 Closes #31
- 참여자 아바타 그룹 제거 - 너비 300px, 높이 140px로 고정
- 높이 100px로 축소 - 생성일을 마지막 대화 옆으로 이동 - 생성일 날짜만 표시 (시간 제거)
- 입장 버튼 추가 (우측 상단, outlined 스타일) - 비밀방 자물쇠 아이콘 표시 - 간단한 소개 표시 추가 - 생성일자 하단에 표시 - 카드 높이 140px로 조정 - 더미 데이터에 description, createdAt, isPrivate 추가
- 입장 버튼 클릭 시 모달 팝업 - 일반방: 방 정보 확인 후 입장 - 비밀방: 비밀번호 입력 후 입장 - 참여중 필터 추가 (레벨 필터 옆) - 생성일 형식 변경 (연/월/일) - 더미 데이터에 isJoined 필드 추가
…ard-fixed-size [FIX] 채팅방 카드 고정 크기 적용
- ChatContext를 통한 전역 채팅 상태 관리 - 드래그 가능한 플로팅 채팅 모달 구현 - 최소화/최대화 기능 추가 - 모든 메시지 TTS 재생 기능 - 페이지 이동 시에도 채팅 유지 - Redux store 초기화 오류 수정 - 스크롤바 hover 시에만 표시
…chatroom-list-api [FEAT] 채팅방 API 연동 및 채팅 UI 구현
- 최소화 시 현재 위치 저장 후 우측 하단으로 자동 이동 - 최대화 시 저장된 위치로 복원 Closes #47
…-minimize [FIX] 채팅 모달 최소화 시 우측 하단 이동
- SettingsContext 추가 (localStorage 저장) - 설정 페이지에 음성 선택 UI 추가 (MALE/FEMALE) - voiceService에 voice 파라미터 추가 - ChatRoomModal에서 선택된 음성으로 TTS 재생 Closes #49
…ice-settings [FEAT] TTS 음성 선택 기능
- voiceService.synthesize: text -> messageId, roomId 파라미터 변경 - ChatRoomPage, ChatRoomModal handlePlayTTS 수정 - 백엔드 API 스펙 변경에 따른 필수 대응
…i-change [CR] TTS API 변경 대응 (#53)
* [FEAT] 학습 통계 페이지 구현 (#63) - StatsPage 메인 컴포넌트 - LearningCalendar 히트맵 (12주) - WeakWordsList 취약 단어 TOP 10 - DifficultyChart 난이도 분포 막대 그래프 - LevelProgressChart 레벨별 진행률 - 일/주/월별 통계 탭 - /vocab/stats 라우트 추가 * [FIX] API 응답 구조 수정 - interceptor 중복 .data 접근 제거 - vocabApi interceptor가 response.data 반환하므로 - 각 페이지에서 response?.data 대신 response 직접 접근으로 수정 - 영향: TestPage, DailyLearning, VocabDashboard, WordListPage, StatsPage * [FIX] 누락된 서비스 메서드 추가 - wordService.getWords 추가 - userWordService.getUserWords 추가 - userWordService.updateUserWord 추가 * [FEAT] API 변경사항 반영 (#44, #45) - Daily Study API: level 파라미터 추가 - 레벨 선택 UI 추가 (BEGINNER/INTERMEDIATE/ADVANCED) - 첫 호출 시 레벨 선택 화면 표시 - Test Start API: options 필드 대응 - TestQuestion에서 question.english 사용 - example 문장 표시 추가 * [DOCS] Add issue and branch management guide
* feat(grammar): 문법 교정 기능 구현 (#113, #114, #115, #116, #117, #118, #119) - Grammar API 서비스 모듈 생성 (grammarApi.js) - Grammar 서비스 레이어 생성 (grammarService.js) - grammarCheckService: 문법 검사 API - conversationService: 대화형 교정 API - sessionService: 세션 관리 API - GrammarErrorType 상수 정의 (grammarConstants.js) - 12종 오류 타입 (VERB_TENSE, ARTICLE 등) - 레벨별 색상 및 라벨 - i18n 번역 키 추가 (한국어/영어) - GrammarInput 컴포넌트 구현 - 레벨 선택 UI (초급/중급/고급) - 텍스트 입력 및 검사 버튼 - GrammarResult 컴포넌트 구현 - 점수 표시 및 등급 - 오류 하이라이팅 - 교정 피드백 표시 - WritingPage 컴포넌트 구현 - /writing 라우트 연결 * feat(grammar): 채팅형 인터페이스로 리디자인 - ChatMessage 컴포넌트 구현 - 사용자/AI 메시지 버블 구분 - 문법 점수 배지 표시 - 오류 상세 정보 접기/펼치기 - SessionSidebar 컴포넌트 구현 - 세션 목록 표시 - 세션 생성/선택/삭제 - 레벨별 색상 태그 - ChatInput 컴포넌트 구현 - 레벨 선택 드롭다운 - 텍스트 입력 및 전송 - WritingPage 채팅형 레이아웃 적용 - 좌측 사이드바 + 채팅 영역 - 반응형 (모바일 드로어) - conversation API 연동
* [FEAT] 배지 시스템 구현 (#121, #122, #123, #124, #125) - Badge API 서비스 모듈 구현 (badgeApi.js, badgeService.js) - Badge 상수 정의 (배지 타입, 카테고리, 색상) - BadgeCard 컴포넌트: 획득/미획득 스타일 (그레이스케일+블러) - BadgeGrid 컴포넌트: 반응형 그리드 레이아웃 - BadgeSection 컴포넌트: 리포트 페이지용 섹션 - 통계 페이지에 배지 섹션 통합 - i18n 다국어 지원 (한/영) Features: - 획득 배지: 컬러 표시 - 미획득 배지: 그레이스케일 + 블러 + 잠금 아이콘 - 마우스 호버: 배지 상세 정보 툴팁 - 진행률 표시 (progress/threshold) * [FIX] 배지 더미 이미지 URL 수정 - S3 URL을 Flaticon CDN 이미지로 교체 (실제 이미지 표시) - 각 배지 카테고리별 아이콘 적용 * [FEAT] 리포트 페이지 구현 및 배지 섹션 통합 - ReportsPage placeholder를 실제 구현으로 교체 - 학습 통계 요약 카드 (학습일, 단어, 테스트, 점수) - 연속 학습 기록 섹션 - BadgeSection 통합 - 상세 통계 페이지 링크 - 더미 데이터로 UI 확인 가능 * [FIX] 리포트 페이지에서 상세 통계 버튼 제거
- grammarStreamService.js: WebSocket 연결/메시지 관리 - 싱글톤 패턴으로 연결 관리 - Mock 스트리밍 모드 (테스트용) - 이벤트 핸들링 (start, token, complete, error) - useGrammarStream.js: React 상태 관리 훅 - 스트리밍 상태 관리 (isStreaming, streamingText) - 연결 상태 관리 (connect, disconnect) - 결과 상태 (grammarCheck, aiResponse, conversationTip) - index.js: 서비스 및 훅 export 추가
* feature : jira issue, PR 연동 workflow 작성 * refactor : pr, issue 연동 workflow 리펙토링
…tent styling - Applied updated formatting rules across `MainLayout`, `chatApi`, `vocabApi`, `axios`, and `App` components - Standardized spacing, indentation, and import organization
* feature : jira issue, PR 연동 workflow 작성 * refactor : pr, issue 연동 workflow 리펙토링 * feat : 수정/병합시 Jira 업데이트 workflow 코드 추가
* feature : jira issue, PR 연동 workflow 작성 * refactor : pr, issue 연동 workflow 리펙토링 * feat : 수정/병합시 Jira 업데이트 workflow 코드 추가 * refactor : Update Jira Issue 단계 환경변수 설정 리팩토링
* feature : jira issue, PR 연동 workflow 작성 * refactor : pr, issue 연동 workflow 리펙토링 * feat : 수정/병합시 Jira 업데이트 workflow 코드 추가 * refactor : Update Jira Issue 단계 환경변수 설정 리팩토링 * refactor : 본문에 ` 에러 처리 수정
* feat : cognito 설정 파일 구현 * refactor : Axios 인스턴스, 요청, 응답 interceptor 리팩토링 * feat : 로그인, 로그아웃 UI 및 기능 구현
* feature : jira issue, PR 연동 workflow 작성 * refactor : pr, issue 연동 workflow 리펙토링 * feat : 수정/병합시 Jira 업데이트 workflow 코드 추가 * refactor : Update Jira Issue 단계 환경변수 설정 리팩토링 * refactor : 본문에 ` 에러 처리 수정
- Implemented `chatWebSocketService` for WebSocket-based real-time chat and game commands - Added `useChatWebSocket` hook for managing WebSocket state and actions in components - Enhanced `ChatRoomPage`: integrated WebSocket for real-time messaging, added optimistic UI updates, and fallback for REST API - Updated `FreetalkPeoplePage` and chat lists to handle duplicate entries effectively - Extended `AuthContext` to store and clear tokens during login/logout - Improved error handling and realtime feedback in chat components
github-actions
Bot
added
frontend
|
Jira: MESP-100 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
VITE_USE_MOCK)Changes
학습 캘린더 (GitHub 잔디 스타일)
GET /stats/historyAPI 연동 (period,newWordsLearned필드)일일 학습 개선
환경변수 정리
USE_MOCK플래그를VITE_USE_MOCK환경변수로 통합 (5개 서비스 파일).env.development,.env.production,.env.example에 설정 추가Files Changed
src/domains/vocab/pages/StatsPage.jsx- 학습 캘린더 컴포넌트src/domains/vocab/pages/DailyLearning.jsx- 몰라요 재학습 로직src/domains/vocab/services/vocabService.js- USE_MOCK 환경변수화src/domains/badge/services/badgeService.js- USE_MOCK 환경변수화src/domains/chat/services/chatService.js- USE_MOCK 환경변수화src/domains/grammar/services/grammarService.js- USE_MOCK 환경변수화src/domains/grammar/services/grammarStreamService.js- USE_MOCK 환경변수화.env.*파일들 - VITE_USE_MOCK 추가Test plan
/vocab/stats)에서 캘린더 표시 확인VITE_USE_MOCK=true설정 시 Mock 데이터 동작 확인🤖 Generated with Claude Code