배포 테스트 (#122)

* style : 전역 디자인 시스템 세팅 * style : 전역 디자인 시스템 세팅 * chore : 이슈 템플릿 수정 * refactor: build-test.yml 파일 수정 (#14) - node_modules 캐싱 기능 추가 - main, dev 브랜치 push, PR 시 빌드 테스트 돌아가도록 수정 Co-authored-by: wukddang <[email protected]> * feature: deploy.yml 파일 추가 (#15) * feature: deploy.yml 파일 추가 - main 브랜치에 push할 때 S3로 파일 업로드 * fix: pre-push 코드 수정 * fix: deploy.yml 파일 수정 - build폴더가 아닌 dist 폴더로 수정 --------- Co-authored-by: wukddang <[email protected]> * [Style] 모바일 레이아웃 작업 (#19) * style : 모바일 레이아웃 작업 * chore : 이슈, pr 템플릿 docs 수정 * style: HeroImage, AlertText 공통 컴포넌트 제작 (#24) * style: HeroImage 추가 * style: AlertText * style: Input 공통 컴포넌트 (#26) * style: HeroImage 추가 * style: AlertText * style: Input * feature: Button 공통 컴포넌트 제작 (#20) * feature: 네이버, 카카오 아이콘 컴포넌트 추가 * feature: NormalButton 컴포넌트 추가 * feature: palette, typo 스타일 수정 * feature: Divider, Text 공통 컴포넌트 추가 * feature: IconButtons 추가 - 관심사, 네이버, 카카오, 특정 주제, 랜덤 매칭 버튼 * feature: Button 컴포넌트 사용법 + timeStamp 유틸 함수 추가 * feature: RandomMatchingJoin 버튼 추가 --------- Co-authored-by: wukddang <[email protected]> * style : flexbox 컴포넌트 제작 (#32) * style : spacing 컴포넌트 생성 (#33) * [Feature] mock service worker settings (#29) * deploy: 초기 배포 (#23) * style : 전역 디자인 시스템 세팅 * style : 전역 디자인 시스템 세팅 * chore : 이슈 템플릿 수정 * refactor: build-test.yml 파일 수정 (#14) - node_modules 캐싱 기능 추가 - main, dev 브랜치 push, PR 시 빌드 테스트 돌아가도록 수정 Co-authored-by: wukddang <[email protected]> * feature: deploy.yml 파일 추가 (#15) * feature: deploy.yml 파일 추가 - main 브랜치에 push할 때 S3로 파일 업로드 * fix: pre-push 코드 수정 * fix: deploy.yml 파일 수정 - build폴더가 아닌 dist 폴더로 수정 --------- Co-authored-by: wukddang <[email protected]> * [Style] 모바일 레이아웃 작업 (#19) * style : 모바일 레이아웃 작업 * chore : 이슈, pr 템플릿 docs 수정 --------- Co-authored-by: judahhh <[email protected]> Co-authored-by: wukddang <[email protected]> * chore : mock service worker 설치 및 세팅 * chore : mock service worder setting --------- Co-authored-by: Changuk Woo <[email protected]> Co-authored-by: wukddang <[email protected]> * style: BottomSheet 컴포넌트 제작 (#34) * feature: Timer 컴포넌트 추가 + d3.js 라이브러리 설치 * feature: BottomSheet 컴포넌트 추가 * feature: RandomMatchingJoinButton props 수정 * feature: framer-motion 설치 + 애니메이션 효과 추가 * refactor: BottomSheet 폴더 변경 * refactor: isDarkMode 필수 타입으로 수정 * refactor: AlertText, HeroImage 폴더 구조 변경 * refactor: BottomSheet 컴포넌트 분리 * feature: Avatar 컴포넌트 제작 * refactor: RandomMatchingSheet 컴포넌트 이벤트 props 추가 * fix: package-lock.json 파일 오류 수정 --------- Co-authored-by: wukddang <[email protected]> * [Style/] navigation bar 컴포넌트 제작 (#37) * style : 네비게이션 바 디자인 * style : 네비게이션 바 디자인 및 라우팅 처리 * fix : 프로필 이미지를 Avatar 컴포넌트를 이용하도록 수정 * chore : 타입 에러 해결 * chore : 홈 페이지에 네비게이션 바 예시 제거 * style: CountNumber 공통 컴포넌트 제작 (#38) * style: CountNumber * feat: Input Wrapper 추가. * chore : CountNumber 폴더 구조 변경 * style: InputTimer 공통 컴포넌트 제작 (#41) * style: CountNumber * feat: Input Wrapper 추가. * style: InputTimer 제작 * style : 로딩 컴포넌트 제작 (#47) * style: WhiteSelectorButton, DarkSelectorButton 공통 컴포넌트 (#46) * style: whiteselectorButton * refactor: 불필요 주석 삭제 * style: darkselectorbutton * Update src/components/common/DarkSelectorButton/index.tsx * Update src/components/common/WhiteSelectorButton/index.tsx * fix: font-weight 오타 수정 --------- Co-authored-by: Changuk Woo <[email protected]> Co-authored-by: wukddang <[email protected]> * style: ListRow 컴포넌트 제작 (#43) * refactor: Style prefix 붙이도록 수정 * refactor: Divider 컴포넌트 수정 + 웹 폰트 수정 - Divider 컴포넌트가 확장성 있도록 수정 - 웹 폰트 오타 수정 * feature: AdminListRow 컴포넌트 추가 - 관리자 페이지에 사용되는 ListRow 컴포넌트 * feature: ProfileListRow 컴포넌트 추가 - 프로필 페이지에 사용되는 ListRow --------- Co-authored-by: wukddang <[email protected]> * style: �useToast 커스텀 훅 제작 (#48) * feature: useToast 커스텀 훅 추가 * refactor: RandomMatchingJoinButton으로 이름 변경 * feature: Layout 컴포넌트에 ToastContainer 설정 * refactor: NormalButton 컴포넌트 수정 - isDarkMode props 받도록 수정 * fix: RandomMatchingJoin.tsx 파일 오류 수정 * fix: 파일명 오류 수정 --------- Co-authored-by: wukddang <[email protected]> * [Style] Modal 컴포넌트 제작 (#52) * chore : zustand 설치 및 store 폴더 생성 * feat : 모달창 전역 상태 추가 * style : 모달창 컴포넌트 제작 * fix: package.json 쉼표 오류 * �fix: package-lock.json 쉼표 오류 * fix : 모달창 type 받아 분기 처리 * fix : type 에러 수정 * chore : 주석 제거 * fix: isDarkMode 옵셔널로 수정 --------- Co-authored-by: Changuk Woo <[email protected]> Co-authored-by: wukddang <[email protected]> * style: selector button 공통 컴포넌트 (#55) * refactor: white,dark selectorbutton erase * style: selectorbutton * style: selectorbutton re * style: Appbar, Card, GradationBackground, PageContainer 컴포넌트 추가 + Home 페이지 레이아웃 추가 (#57) * refactor: CountNumber, Input 위치 변경 * refactor: Avatar 컴포넌트 props 타입 수정 + tsdoc 추가 * feature: Tip 컴포넌트 추가 * feature: AppHeader 컴포넌트 추가 * refactor: IconButtonType 수정 + 클릭 효과 속성 추가 * feature: Profile 페이지 라우팅 추가 * refactor: AppHeader 높이값 받도록 수정 * style: typo, palette, Layout, global 파일 수정 * refactor: RandomMatchingSheet 동적으로 변하도록 수정 * refactor: NormalButton 폴더 변경 + 클릭 시 배경 변경 타입 추가 * refactor: tsdoc 추가 * feature: GradationBackground 컴포넌트 추가 * refactor: NavigationBar 라우팅 + position: sticky로 수정 * feature: PageContainer 컴포넌트 추가 * feature: AvatarGroup 컴포넌트 추가 * feature: Card 컴포넌트 추가 * feature: Home 페이지 레이아웃 추가 * refactor: tsdoc 추가 * fix: merge conflict 해결용 파일 추가 * fix: NormalButton 파일 에러 수정 --------- Co-authored-by: wukddang <[email protected]> * style: PageHeader 컴포넌트 제작 (#59) * feature: ExitIcon 컴포넌트 추가 * feature: BackChevron 컴포넌트 추가 * feature: PageHeader 컴포넌트 추가 * refactor: 사용하지 않는 코드 제거 * refactor: tsdoc 추가 * refactor: tsdoc 추가 + exitClick으로 props명 변경 * refactor: PageHeader border-bottom 수정 --------- Co-authored-by: wukddang <[email protected]> * [Style] chatting bubble 컴포넌트 제작 및 소켓 라이브러리 설치 (#65) * style : chatting bubble 컴포넌트 publishing * chore : 소켓 라이브러리 stomp 설치 및 세팅 * style: BusinessCardContainer 공통 컴포넌트 (재PR) (#62) * feat: businesscardcontainer * style: Text 컴포넌트 textColor 속성 추가 * test: API Test 코드 (#76) * feat: businesscardcontainer * style: Text 컴포넌트 textColor 속성 추가 * style: alerttext, countnumber 수정 * style: selectorbutton 수정 * style: customselectorbutton * refactor: 필수 prop 설정 * style: selectorbuttoncontainer * refactor: 함수컴포넌트 구조 변경 * refactor: react 삭제 * test: APITest 코드 * test: retest (#78) * fix: vite 설정 (cors) (#80) * test: retest * fix: vite 설정 (cors) * fix: cors 재설정 (#82) * test: retest * fix: vite 설정 (cors) * fix: cors2 * fix: vite 설정 변경 (#84) Co-authored-by: wukddang <[email protected]> * fix: axios 파일 수정 (#86) Co-authored-by: wukddang <[email protected]> * fix: REST API 주소 코드 수정 (#92) Co-authored-by: wukddang <[email protected]> * refactor: AlertText, CountNumber 공통 컴포넌트 수정 (#68) * feat: businesscardcontainer * style: Text 컴포넌트 textColor 속성 추가 * style: alerttext, countnumber 수정 * refactor: pr 수정사항 반영 * refactor: styled emotion 코드 통일성 적용 * feature: HomePage 다크모드 기능 추가 + Card 컴포넌트 분리 + timerWorker 추가 (#94) * style: DARK_GRADIENT 색 추가 * feature: 다크모드/화이트모드 설정을 위한 ThemeStore 추가 * feature: ParticularTopicButton에 이동하는 props 추가 * feature: AppHeader 컴포넌트 다크모드 설정 기능 추가 * feature: PageContainer 컴포넌트 다크모드 props 추가 * refactor: Card 컴포넌트 코드 분리 * refactor: Tip 컴포넌트 주석 제거 + import문 수정 * feature: timerWorker 추가 + TimerStore 추가 - 백그라운드에서 동작하는 웹 워커로 타이머 동작 - 새로고침을 해도 계속 동작하지만 어플리케이션을 종료하면 동작 종료 - 현재 동기적으로 코드가 작동하고 있어서, indexedDB를 사용해서 비동기 동작을 지원하도록 수정할 계획 * feature: 다크모드 추가 - GradationBackground, NavigationBar, Home 페이지 * refactor: 사용하지 않는 코드 제거 * refactor: Card 컴포넌트 수정 -undefined값을 가지는 time props 수정 - navigationType 에러 수정 * refactor: AppHeader 컴포넌트 수정 - cursor: pointer 스타일 추가 * refactor: Styled prefix 사용하도록 PR 관련 코드 수정 --------- Co-authored-by: wukddang <[email protected]> * style: LoginPage 레이아웃 작성 (#96) * feat: businesscardcontainer * style: Text 컴포넌트 textColor 속성 추가 * style: alerttext, countnumber 수정 * style: selectorbutton 수정 * style: customselectorbutton * refactor: 필수 prop 설정 * style: selectorbuttoncontainer * refactor: 함수컴포넌트 구조 변경 * refactor: react 삭제 * style: LoginPage 레이아웃 작성 * refactor: 이미지 경로 변경 * refactor: pr 수정사항 반영 * refactor: LoginImage 경로 변경 * style: naver, kakao Button 텍스트 위치 수정 * refactor: frament 제거 * style: 배경색 skyblue 적용. 불필요 fragment 제거. * feature: NotFoundPage 제작 (#102) * refactor: font-family를 동적으로 변경하도록 수정 - 600 미만이면 'Pretendard-Regular' - 600 이상이면 'Pretendard' * feature: NotFound 페이지 제작 - NotFoundIcon 추가 * fix: GradationBackground 에 isDarkMode props 추가 --------- Co-authored-by: wukddang <[email protected]> * refactor: SelectorButton 공통 컴포넌트 수정 (#70) * feat: businesscardcontainer * style: Text 컴포넌트 textColor 속성 추가 * style: alerttext, countnumber 수정 * style: selectorbutton 수정 * refactor: pr 수정사항 반영 * refactor: prop 명 변경 * refactor: 변수명 수정 * refactor: pr 재수정 * style: CustomSelectorButton 공통 컴포넌트 (#71) * feat: businesscardcontainer * style: Text 컴포넌트 textColor 속성 추가 * style: alerttext, countnumber 수정 * style: selectorbutton 수정 * style: customselectorbutton * refactor: 필수 prop 설정 * refactor: pr 수정사항 반영 * refactor: 속성명 수정 * style: SelectorButtonContainer 공통 컴포넌트 (#72) * feat: businesscardcontainer * style: Text 컴포넌트 textColor 속성 추가 * style: alerttext, countnumber 수정 * style: selectorbutton 수정 * style: customselectorbutton * refactor: 필수 prop 설정 * style: selectorbuttoncontainer * refactor: 함수컴포넌트 구조 변경 * refactor: react 삭제 * refactor: pr 수정사항 반영 * refactor: Input 컴포넌트 ref, onchange 추가 (#90) * refactor: Input 컴포넌트 ref, onchange 추가 * refactor: pr 수정사항 반영 * feature: 로그인 페이지 OAuth 연결 + 반응형 레이아웃 구성 (#107) * feature: LoginPendingPage 컴포넌트 추가 - App.tsx에 라우팅 추가 * refactor: 네이버, 카카오 버튼 props 수정 - moveToOAuthProvider props 받도록 수정 * refactor: HeroImage 크기 수정 * feature: LoginPending 페이지 추가 - zustand-persist로 현재 OAuth provider를 저장하도록 설정 - Status Code가 400이면 회원가입 페이지로 가도록 라우팅 * fix: 회원가입 리다이렉트 상태코드 404로 변경 * refactor: 로그인 페이지 반응형 구현 - Spacing 컴포넌트 css props 받도록 리팩토링 - max-width: 280px인 갤럭시 폴드를 중심으로 리팩토링 * refactor: 로그인 페이지 폰트 크기 반응형으로 수정 * feature: 로그인 리다이렉팅 시 authCode를 state에 담도록 수정 --------- Co-authored-by: wukddang <[email protected]> * hotfix: VITE_BASE_URL 환경변수 설정 (#113) * fix: VITE_BASE_URL 환경변수 설정 * fix: 띄어쓰기 오류 수정 --------- Co-authored-by: wukddang <[email protected]> * fix: OAuth 로그인 오류 처리 * [Feature] 사용자의 닉네임, 관심사 정보 등록 페이지 구현 (#119) * style : RegisterInput 공통 컴포넌트 제작 * feat : 유저 정보 등록 페이지 기능 구현 * fix : Oauth 로그인 후 authCode와 token을 받아와 넘겨주도록 수정 * chore : 사용되지 않는 import 문 삭제 * chore : msw 버전에 따른 import 수정 * chore : 사용되지 않은 변수 에러 해결 * chore : 주석 제거 * chore : 닉네임 중복 요청 react-query로 수정 * chore : 사용되지 않은 import 문 제거 * feature: ChatList 페이지 레이아웃 제작 + 반응형 디자인 (#97) * refactor: Home 레이아웃 수정 - PageContainer 스타일을 동적으로 받도록 수정 * refactor: PageContainer 컴포넌트 수정 - style props 받을 수 있도록 수정 - 다크모드 받을 수 있도록 수정 * refactor: 반응형 디자인 - AppHeader: max-width: 280px일 때 텍스트 폰트 줄이도록 수정 - Avatar: max-width: 280px일 때 아바타 크기 줄이도록 수정 * refactor: PageHeader 컴포넌트 수정 - max-width: 414px로 가지도록 수정 - cursor: pointer 가지도록 수정 * refactor: AvatarGroup 수정 - style props 받도록 수정 - AvatarGroup이 높이를 가지도록 수정 * refactor: Card 컴포넌트 수정 - PageContainer 수정에 따른 리팩토링 * feature: ChatList 페이지 구현 - chatRoomList 더미데이터 추가 - ChatRoomBubbles: chatRoomList를 받아서 ChatRoomBubble 렌더링 - ChatRoomBubble: 채팅방 생성 시점 기준 1일 이후를 D-Day로 설정한 타이머 추가 - max-width: 280px일 때 column이 하나로만 나오도록 반응형 디자인 * refactor: ChatRoomBubble 빌드 오류 수정 * fix: merge conflict 해결 * refactor: Card 컴포넌트의 Styled 태그 코드들 하단으로 이동 * hotfix: VITE_BASE_URL 환경변수 설정 (#113) * fix: VITE_BASE_URL 환경변수 설정 * fix: 띄어쓰기 오류 수정 --------- Co-authored-by: wukddang <[email protected]> * feature: 이전대화방 MSW 설정 + framer-motion 효과 추가 - /api/v1/histories로 이전 대화방 목록 요청하도록 세팅 (+useQuery) - 로컬에서도 MSW 동작할 수 있도록 설정 --------- Co-authored-by: wukddang <[email protected]> * [Fix] 관심사 버튼 해제 시 전역 store에 반영되지 않는 문제 해결 (#121) * fix : axios 요청이 가지 않는 에러 해결 * chore : 주석 제거 * fix : 관심사 버튼 해제 시 전역 store에 반영되지 않는 문제 해결 * feature: 관리자 페이지 '승인 대기 목록', '사용자 신고 내역' 레이아웃작업, 컴포넌트 제작 (mergeX, draft 미적용) (#105) * style: AdminAppHeader 컴포넌트 추가 * style: AdminNavigationBar 컴포넌트 생성 * style: AdminNavigationBar 색 변경 * feat: AdminTabs 컴포넌트 추가 * refactor: 컴포넌트 변수명 변경 * refactor: 컴포넌트 변수명 변경 * feat: AdminApprovalList 컴포넌트 추가 * feat: outerwrapper 제거 * feat: AdminReportListRow 컴포넌트 예시 추가 * feat: AdminReportList 컴포넌트 예시 추가 * feat: AdminTabs 컴포넌트로 다른 컴포넌트들 연결 및 디자인 수정, 변수명 수정 * refactor: admin 컴포넌트 이전 * refactor: eslint 에러 수정 * refactor: import 경로 변경 --------- Co-authored-by: Changuk Woo <[email protected]> * feature: 관리자 페이지 레이아웃, 기능 구현 (mergeX, draft) (#116) * style: AdminAppHeader 컴포넌트 추가 * style: AdminNavigationBar 컴포넌트 생성 * style: AdminNavigationBar 색 변경 * feat: AdminTabs 컴포넌트 추가 * refactor: 컴포넌트 변수명 변경 * refactor: 컴포넌트 변수명 변경 * feat: AdminApprovalList 컴포넌트 추가 * feat: outerwrapper 제거 * feat: AdminReportListRow 컴포넌트 예시 추가 * feat: AdminReportList 컴포넌트 예시 추가 * feat: AdminTabs 컴포넌트로 다른 컴포넌트들 연결 및 디자인 수정, 변수명 수정 * refactor: admin 컴포넌트 이전 * refactor: eslint 에러 수정 * refactor: import 경로 변경 * feat: AdminApprovalInfo 컴포넌트 1 * style: 예시 이미지 추가 * feat: AdminApprovalInfo 컴포넌트 추가 1 * feat: input text fontweight 속성 추가 * style: Input 속성 추가 * style: AdminApprovalInfo 컴포넌트 디자인 2 * style: AdminReportInfo 컴포넌트 1 * refactor: props명 수정 * style: AdminReportInfo 컴포넌트 1 * style: AdminReportInfoListRow 컴포넌트 * feat: useModal 컴포넌트 적용, 기타 스타일 수정 * feat: AdminReportInfo 컴포넌트 userModal 적용 * refactor: 불필요 컴포넌트 삭제 * refactor: 이름 수정 * feat: AdminReportListRow 속성 추가 * feat: 관리자페이지 신고자 목록 클릭 시, 정보 출력 * feat: AdminReportList 특정 목록 클릭 시, 해당 AdminReportInfo 출력 * feat: AdminReportList mockdata 추가, 함수 연결 * refactor: 이름 예시 변경 * refactor: 변수명 수정 (adminapprovalinfo와 구분) * feat: AdminTabs 승인 탭 추가 * refactor: 변수명 수정(구별필요) * feat: 승인 페이지 이름 적용, 불필요 컴포넌트 제거 * refactor: mock data 적용. 변수명 수정. * feat: 승인페이지 mock data 적용. 목록 클릭 함수 추가. interface 추가. * feat: adminapprovallistrow onclick 함수 속성 추가 * style: ListRow의 ListContainer 가운데 정렬 * style: 중복 HomeNavigationBar 제거 * feat: AdminInfo 컴포넌트 AdminPageHeader컴포넌트 적용 * feat: AdminPageHeader 컴포넌트 추가 * style: Admin 컴포넌트 스타일 수정(폰트,cursor,가운데정렬등) * style: Input component padding 속성추가 * feat: adminlogin 컴포넌트 추가 * feat: adminapprovalinfo input 텍스트로 변경 (+스타일 적용) * style: 관리자 페이지 스타일 피그마 세부 적용 * chore : 개발 단계에서 토큰을 볼 수 있도록 수정 * chore : 잘못 import 된 import 문 제거 * chore : lint 에러 수정 --------- Co-authored-by: Changuk Woo <[email protected]> Co-authored-by: wukddang <[email protected]> Co-authored-by: from1to2 <[email protected]>
coffee-meet · Nov 14, 2023 · 1fe794b · 1fe794b
1 parent 63632b8
commit 1fe794b
Show file tree

Hide file tree

Showing 37 changed files with 1,901 additions and 223 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -51,7 +51,7 @@
     "eslint-plugin-simple-import-sort": "^10.0.0",
     "husky": "^8.0.0",
     "lint-staged": "^15.0.1",
-    "msw": "^2.0.0",
+    "msw": "^2.0.5",
     "prettier": "^3.0.3",
     "typescript": "^5.0.2",
     "vite": "^4.4.5",

diff --git a/src/apis/axios.ts b/src/apis/axios.ts
@@ -1,15 +1,21 @@
 import axios from 'axios'
 
+// import useAuthStore from '@/store/AuthStore'
+
 export const axiosAPI = axios.create({
-  baseURL: import.meta.env.VITE_BASE_URL,
+  baseURL:
+    process.env.NODE_ENV === 'development'
+      ? 'http://localhost:5173'
+      : import.meta.env.VITE_BASE_URL,
 })
 
 // Add a request interceptor
 axiosAPI.interceptors.request.use(
   function (config) {
     // 요청 바로 직전
     // axios 설정값에 대해 작성합니다.
-    // config.headers['Authorization'] = `Bearer ${localStorage.getItem('token')}`
+    // const { authTokens } = useAuthStore()
+    // config.headers['Authorization'] = `Bearer ${authTokens}`
 
     return config
   },

diff --git a/src/apis/chatList/ChatListApi.ts b/src/apis/chatList/ChatListApi.ts
@@ -0,0 +1,13 @@
+import { axiosAPI } from '@/apis/axios'
+
+const ChatListApi = {
+  // TODO: zustand로 AccessToken 받아서 요청하기 (백엔드 개발 완료 후)
+  GET_CHAT_LIST: async () => {
+    const response = await axiosAPI.get(`/v1/histories`)
+    return {
+      data: response.data,
+    }
+  },
+}
+
+export default ChatListApi
diff --git a/src/assets/images/businessCardExample.jpg b/src/assets/images/businessCardExample.jpg
diff --git a/src/components/chatList/ChatRoomBubble.tsx b/src/components/chatList/ChatRoomBubble.tsx
@@ -0,0 +1,179 @@
+import styled from '@emotion/styled'
+import { timer } from 'd3'
+import { useEffect, useState } from 'react'
+
+import Spacing from '@/components/common/Spacing'
+import { Text, TextWrapper } from '@/components/common/Text'
+import AvatarGroup from '@/components/home/AvatarGroup'
+import { palette } from '@/styles/palette'
+
+type ChatRoomBubbleProps = {
+  title: string
+  participants: string[]
+  createdAt: string
+  isDarkMode: boolean
+}
+
+const ChatRoomBubble = ({ title, participants, createdAt, isDarkMode }: ChatRoomBubbleProps) => {
+  const [timeRemaining, setTimeRemaining] = useState({
+    hours: '00',
+    minutes: '00',
+    seconds: '00',
+  })
+
+  useEffect(() => {
+    const createdTime = new Date(new Date(createdAt).getTime() + 24 * 60 * 60 * 1000)
+
+    const updateTimer = () => {
+      const currentTime = new Date()
+      const timeDifference = createdTime.getTime() - currentTime.getTime()
+
+      if (timeDifference > 0) {
+        const leftHours = String(Math.floor(timeDifference / (1000 * 60 * 60))).padStart(2, '0')
+        const leftMinutes = String(
+          Math.floor((timeDifference % (1000 * 60 * 60)) / (1000 * 60)),
+        ).padStart(2, '0')
+        const leftSeconds = String(Math.floor((timeDifference % (1000 * 60)) / 1000)).padStart(
+          2,
+          '0',
+        )
+        setTimeRemaining({ hours: leftHours, minutes: leftMinutes, seconds: leftSeconds })
+      } else {
+        timerInstance.stop()
+        setTimeRemaining({ hours: '00', minutes: '00', seconds: '00' })
+      }
+    }
+
+    const timerInstance = timer(updateTimer)
+
+    return () => timerInstance.stop()
+  }, [])
+
+  return (
+    <StyledChatRoomBubble isDarkMode={isDarkMode}>
+      <Text
+        font={'Body_16'}
+        fontWeight={600}
+        letterSpacing={-1}
+        style={{
+          color: isDarkMode ? palette.DARK_WHITE : palette.BLACK,
+          padding: '15% 2% 0',
+          textAlign: 'center',
+        }}
+      >
+        {title}
+      </Text>
+      <Spacing size={30} />
+      <AvatarGroup
+        avatarList={['', '', '']}
+        avatarWidth={17}
+        avatarHeight={17}
+        style={{
+          position: 'absolute',
+          top: '70px',
+          right: '10px',
+        }}
+      />
+      <StyledAvatarGroupWrapper>
+        <StyledChatRoomBubbleTextWrapper
+          style={{
+            flexDirection: 'row',
+            justifyContent: 'space-between',
+            padding: '0 10px',
+          }}
+        >
+          <Text
+            font={'Body_12'}
+            fontWeight={500}
+            letterSpacing={-1}
+            style={{
+              color: isDarkMode ? palette.DARK_WHITE : palette.GRAY600,
+              display: 'inline-flex',
+            }}
+          >
+            {'참여자'}
+          </Text>
+          <StyledChatRoomBubbleParticipantsWrapper>
+            {participants.map((participant, index) => {
+              return (
+                <Text
+                  key={index}
+                  font={'Body_12'}
+                  fontWeight={500}
+                  letterSpacing={-1}
+                  style={{
+                    color: isDarkMode ? palette.GRAY300 : palette.GRAY500,
+                  }}
+                >
+                  {participant}
+                  {index !== participants.length - 1 && ', '}
+                </Text>
+              )
+            })}
+          </StyledChatRoomBubbleParticipantsWrapper>
+        </StyledChatRoomBubbleTextWrapper>
+        <Spacing size={4} />
+        <StyledChatRoomBubbleTextWrapper>
+          <Text
+            font={'Body_12'}
+            fontWeight={500}
+            letterSpacing={-1}
+            style={{
+              color: isDarkMode ? palette.DARK_WHITE : palette.GRAY600,
+              display: 'inline-flex',
+            }}
+          >
+            {'남은시간'}
+          </Text>
+          <Text
+            font={'Body_12'}
+            fontWeight={500}
+            letterSpacing={-1}
+            style={{
+              color: isDarkMode ? palette.GRAY300 : palette.GRAY500,
+            }}
+          >{`${timeRemaining.hours}시간 ${timeRemaining.minutes}분 ${timeRemaining.seconds}초`}</Text>
+        </StyledChatRoomBubbleTextWrapper>
+      </StyledAvatarGroupWrapper>
+    </StyledChatRoomBubble>
+  )
+}
+
+const StyledChatRoomBubble = styled.div<{ isDarkMode: boolean }>`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  max-width: 161px;
+  height: 161px;
+  background-color: ${({ isDarkMode }) => (isDarkMode ? palette.GRAY700 : palette.WHITE)};
+  border-radius: 20px;
+  box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.05);
+  position: relative;
+  cursor: pointer;
+`
+
+const StyledAvatarGroupWrapper = styled.div`
+  position: relative;
+  width: 100%;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  padding-bottom: 10px;
+`
+
+const StyledChatRoomBubbleTextWrapper = styled(TextWrapper)`
+  flex-direction: row;
+  justify-content: space-between;
+  padding: 0 10px;
+`
+
+const StyledChatRoomBubbleParticipantsWrapper = styled(TextWrapper)`
+  flex-direction: row;
+  justify-content: flex-end;
+  max-width: 80px;
+  flex-wrap: wrap;
+  row-gap: 3px;
+`
+
+export default ChatRoomBubble