Skip to content

[FEAT] 단어장 (Word List) 기능 구현 (#62)#103

Merged
DDINGJOO merged 37 commits into
mainfrom
feature/57/62/vocab-wordlist
Jan 7, 2026
Merged

[FEAT] 단어장 (Word List) 기능 구현 (#62)#103
DDINGJOO merged 37 commits into
mainfrom
feature/57/62/vocab-wordlist

Conversation

@DDINGJOO

@DDINGJOO DDINGJOO commented Jan 7, 2026

Copy link
Copy Markdown
Contributor

Summary

  • WordListPage 컴포넌트 구현 (검색, 필터, 무한 스크롤)
  • WordListItem 단어 목록 아이템 컴포넌트
  • WordDetailModal 단어 상세 모달 (TTS, 북마크, 즐겨찾기, 난이도)
  • 검색 입력 디바운스 (300ms) 적용
  • 레벨/카테고리/상태/북마크 필터 기능
  • Intersection Observer 기반 무한 스크롤
  • /vocab/words 라우트 추가

Test plan

  • /vocab/words 접속 확인
  • 단어 검색 기능 테스트 (디바운스 동작 확인)
  • 레벨/카테고리/상태/북마크 필터 동작 확인
  • 스크롤 시 추가 데이터 로딩 확인
  • 단어 클릭 시 상세 모달 표시 확인
  • TTS 재생 기능 테스트
  • 북마크/즐겨찾기/난이도 설정 기능 테스트

Closes #62, #87, #88, #89, #90, #91, #92

- 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] 채팅방 카드 고정 크기 적용
- .env.example 추가 (환경변수 템플릿)
- VITE_CHAT_API_URL, VITE_TEMP_USER_ID 환경변수 설정
- chatApi axios 인스턴스 생성
- chatRoomService 구현 (create, getList, getDetail, join, leave)
- messageService 구현 (send, getList)
- voiceService 구현 (synthesize)

Closes #38, #39
- FreetalkPeoplePage: mock 데이터 제거, API 연동 (무한스크롤)
- CreateRoomModal: 채팅방 생성 모달 컴포넌트 추가
- ChatRoomPage: 카카오톡 스타일 채팅 UI 구현
- 메시지 조회/전송 API 연동
- TTS 재생 버튼 구현

Closes #40, #41, #42, #43, #44, #45
- 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 스펙 변경에 따른 필수 대응
…-scroll

[FIX] 채팅 모달 최소화 후 스크롤 위치 유지 (#55)
- Vocab axios 인스턴스 설정 (#64)
- 단어 관리 API 서비스 구현 (#65)
- 일일 학습 API 서비스 구현 (#66)
- 사용자 단어 상태 API 서비스 구현 (#67)
- 시험 API 서비스 구현 (#68)
- 통계 API 서비스 구현 (#69)
- TTS API 서비스 구현 (#70)
- 상수 정의 (레벨, 카테고리, 상태 등)
- VocabDashboard 페이지 컴포넌트 생성 (#71)
- 오늘의 학습 진행률 카드 구현 (#72)
- 퀵 액션 카드 (통계, 시험, 단어장) 구현 (#73)
- 주간 학습 캘린더 컴포넌트 구현 (#74)
- 약점 단어 리스트 컴포넌트 구현 (#75)
- /vocab 라우팅 및 사이드바/메인 대시보드 메뉴 추가
- 하위 메뉴: 단어 외우기, 시험 보기, 단어장
- DailyLearning 페이지 컴포넌트 생성 (#76)
- FlashCard 컴포넌트 구현 - flip 애니메이션 (#77)
- 학습 진행률 바 및 상태 관리 (#78)
- 정답/오답 버튼 및 API 연동 (#79)
- 북마크/난이도 태그 기능 구현 (#80)
- 학습 완료 화면 구현 (#81)
- /vocab/daily 라우팅 추가
- TestPage 컴포넌트 생성 - 시험 설정 화면 (#82)
- TestQuestion 컴포넌트 구현 - 4지선다 문제 (#83)
- 시험 진행 상태 관리 - 타이머, 현재 문제 (#84)
- 답안 제출 및 결과 처리 (#85)
- 시험 결과 화면 구현 (#86)
- /vocab/test 라우팅 추가
- WordListPage: 검색, 필터, 무한 스크롤 지원
- WordListItem: 단어 목록 아이템 컴포넌트
- WordDetailModal: 단어 상세 모달 (TTS, 북마크, 난이도 설정)
- 검색 입력 디바운스 (300ms)
- 레벨/카테고리/상태/북마크 필터
- Intersection Observer 기반 무한 스크롤
- /vocab/words 라우트 추가
@github-actions github-actions Bot added frontend Frontend code changes layer:store State management layer layer:api API/Services layer labels Jan 7, 2026
@DDINGJOO DDINGJOO merged commit c818a19 into main Jan 7, 2026
1 check passed
@github-actions github-actions Bot mentioned this pull request Jan 7, 2026
13 tasks
DDINGJOO added a commit that referenced this pull request Jan 7, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

frontend Frontend code changes layer:api API/Services layer layer:store State management layer

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Story] 단어장 기능 구현

1 participant