Skip to content

Commit

Permalink
배포 테스트 (#128)
Browse files Browse the repository at this point in the history
* 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 에러 수정

* feature: 프로필 페이지 제작 (#109)

* refactor: Modal 컴포넌트 관련 코드 리팩토링
- useModal: acceptText, cancelText 받도록 수정
- Modal: framer-motion으로 애니메이션 효과 추가

* refactor: tsdoc 추가 + CSS 스타일 수정
- tsdoc: NaverIcon, KakaoIcon
- CSS 스타일 수정: AppHeader,Avatar, BackChevron

* refactor: CSS 스타일 수정
- Divider: width, height props string으로 타입 수정
- InterestButton: width props string으로 수정
- NavigationBar: Text 컴포넌트 사용하도록 수정

* refactor: tsdoc 추가 + emotion 코드 위치 변경
- emotion 코드 위치 변경: ProfileListRow, PageContainer, PageHeader
- tsdoc 추가: Text 컴포넌트

* refactor: Home 페이지 fragment 제거

* feature: ProfileDefault 페이지 제작
- useModal: 로그아웃, 계정 삭제 시 모달 사용
- useNavigate: 뒤로가기, 프로필 수정, 회사 정보 변경, 로그아웃, 계정 삭제에 라우팅 기능 추가
- 페이지 레이아웃 작업
- ProfileEdit: 기존 테스트 코드 제거

* refactor: BusinessCardContainer 공백 제거

* refactor: StyleList 관련 conflict 해결

* feature: 프로필 페이지 반응형 디자인 제작
- 갤럭시 Fold에서 적절하게 보이도록 미디어 쿼리 사용

* refactor: 사용하지 않는 파일 제거 + 반응형 디자인
- 모달 버튼의 폰트 크기 수정

* feature: 프로필 페이지 다크모드 코드 추가

* feature: Modal 컴포넌트 다크모드 추가

* feature: 404 페이지에서 홈으로 라우팅하게 수정

* fix: msw 2 버전으로 수정

* fix: authTokens이 없어서 생기는 오류 수정

* feature: 레이아웃 깨지는 부분 수정

* fix: useAuthTokens 주석 처리

* chore: msw 2.0.5 버전으로 수정

* Update handlers.ts

---------

Co-authored-by: wukddang <[email protected]>
Co-authored-by: from1to2 <[email protected]>
Co-authored-by: DaHyeonJu <[email protected]>

* [Feature] 실시간 채팅 기능 및 상대방 프로필 클릭 시 상대방 프로필 조회 기능 (#125)

* chore : 충돌 수정

* chore : 충돌 수정

* chore : 충돌 수정

* fix : 에러 주석 처리

* fix : 채팅방 통신 수정

* style : 채팅 버블 스타일 변경 및 첫 렌더 링 시 스크롤 맨 아래로 이동

* feat : 채팅방에서 상대방 프로필 클릭 시 정보 조회 기능 추가

* chore : 사용되지 않는 import 문 제거

* Update handlers.ts

* Update handlers.ts

* [Fix] 카카오 로그인 성공 시 토큰 불러오는 함수 무한루프 제거 (#127)

* chore : lint 에러 수정

* fix : 함수 무한루프 돌던 것 수정

* chore : lint 에러 수정

* chore : lint 에러 수정

* Update index.tsx (#129)

---------

Co-authored-by: Changuk Woo <[email protected]>
Co-authored-by: wukddang <[email protected]>
Co-authored-by: from1to2 <[email protected]>
  • Loading branch information
4 people authored Nov 16, 2023
1 parent 1fe794b commit 0e776ac
Show file tree
Hide file tree
Showing 39 changed files with 1,547 additions and 217 deletions.
2 changes: 1 addition & 1 deletion public/mockServiceWorker.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
/* tslint:disable */

/**
* Mock Service Worker (2.0.0).
* Mock Service Worker (2.0.5).
* @see https://github.com/mswjs/msw
* - Please do NOT modify this file.
* - Please do NOT serve this file on production.
Expand Down
18 changes: 9 additions & 9 deletions setupProxy.ts
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import { createProxyMiddleware } from 'http-proxy-middleware'
// import { createProxyMiddleware } from 'http-proxy-middleware'

module.exports = (app) => {
app.use(
createProxyMiddleware('/api/chat-stomp', {
target: process.env.VITE_BASE_URL,
ws: true,
}),
)
}
// module.exports = (app) => {
// app.use(
// createProxyMiddleware('/api/chat-stomp', {
// target: process.env.VITE_BASE_URL,
// ws: true,
// }),
// )
// }
3 changes: 2 additions & 1 deletion src/apis/axios.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,13 @@ export const axiosAPI = axios.create({
? 'http://localhost:5173'
: import.meta.env.VITE_BASE_URL,
})

// const { authTokens } = useAuthStore()
// Add a request interceptor
axiosAPI.interceptors.request.use(
function (config) {
// 요청 바로 직전
// axios 설정값에 대해 작성합니다.

// const { authTokens } = useAuthStore()
// config.headers['Authorization'] = `Bearer ${authTokens}`

Expand Down
9 changes: 9 additions & 0 deletions src/apis/chatting/chattingApi.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import { axiosAPI } from '@/apis/axios'
import { Messages } from '@/apis/chatting/chattingType'

export const ChattingApi = {
GET_DETAIL_MESSAGES: async (): Promise<Messages[]> => {
const response = await axiosAPI.get(`/v1/chatting/rooms/1`)
return response.data
},
}
8 changes: 8 additions & 0 deletions src/apis/chatting/chattingType.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
export type Messages = {
messageId: string
userId: string
profileImageUrl: string
nickname: string
content: string
createdAt: string
}
8 changes: 8 additions & 0 deletions src/assets/icons/KakaoIcon.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,14 @@ export type IconProps = {
borderRadius: number
}

/**
* @param width - 너비 (string)
* @param height - 높이 (string)
* @param iconWidth - (Optional) 아이콘 너비 (string)
* @param iconHeight - (Optional) 아이콘 높이 (string)
* @param borderRadius - (Optional) 아이콘 테두리 반지름 (string)
*/

const KakaoIcon = ({ width, height, iconWidth, iconHeight, borderRadius }: IconProps) => (
<span
style={{
Expand Down
8 changes: 8 additions & 0 deletions src/assets/icons/NaverIcon.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,14 @@ import { palette } from '@/styles/palette'

import { IconProps } from './KakaoIcon'

/**
* @param width - 너비 (string)
* @param height - 높이 (string)
* @param iconWidth - (Optional) 아이콘 너비 (string)
* @param iconHeight - (Optional) 아이콘 높이 (string)
* @param borderRadius - (Optional) 아이콘 테두리 반지름 (string)
*/

const NaverIcon = ({ width, height, iconWidth, iconHeight, borderRadius }: IconProps) => (
<span
style={{
Expand Down
3 changes: 3 additions & 0 deletions src/assets/icons/Send.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
118 changes: 118 additions & 0 deletions src/components/chatBubbleListLow/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,118 @@
import styled from '@emotion/styled'
import { type ComponentProps, type ReactNode } from 'react'

import defaultProfileImage from '@/assets/images/defaultProfileImage.png'
import Avatar from '@/components/common/Avatar'
import { ChattingText } from '@/components/common/ChattingText'
import useBottomSheetStore from '@/store/BottomSheetStore'
import { type KeyOfPalette, type KeyOfTypo } from '@/styles/theme'

interface ListRowProps extends ComponentProps<'div'> {
rightElement: ReactNode
userId: string
profileImageUrl: string
leftImage?: string | undefined
mainText: ReactNode
textTypo?: KeyOfTypo
textColor?: KeyOfPalette
imageGap?: number
gap?: number
subElement?: ReactNode
fullWidth?: boolean
}

/**
* @param rightElement : 오른쪽에 위치시킬 React Element
* @param leftImage : 왼쪽에 위치시킬 Image 컴포넌트
* @param mainText: 왼쪽에 위치시킬 main Text
* @param textTypo : main Text에 적용할 typo
* @param textColor: main Text에 적용시킬 color
* @param imageGap : image와 Text 사이의 gap
* @param gap : text와 subText 사이의 gap 결정
* @param subElement: main Text 아래에 위치할 React Element
* @param fullWidth : true로 설정할 경우 width: 100%, 기본값 true
*/

const ChatBubbleListLow = ({
rightElement,
userId,
profileImageUrl,
leftImage = defaultProfileImage,
mainText,
textTypo = 'Body_12',
textColor = 'GRAY500',
gap = 4,
imageGap = 5,
subElement,
fullWidth = true,
...props
}: ListRowProps) => {
const { setBottomSheetState, setUserId } = useBottomSheetStore()
const handleBottomSheet = () => {
setBottomSheetState(true)
setUserId(userId)
}
return (
<>
<MainFlexBox fullWidth={fullWidth} {...props}>
<SubFlexBox gap={imageGap}>
<StyleAvatarWrapper onClick={handleBottomSheet}>
{leftImage ? <Avatar width={35} height={35} imgUrl={leftImage} margin={'0'} /> : ''}
</StyleAvatarWrapper>
<TextFlexBox gap={gap}>
<StyledText text={mainText} typo={textTypo} color={textColor} />
{subElement && subElement}
</TextFlexBox>
</SubFlexBox>
{rightElement}
</MainFlexBox>
</>
)
}

const MainFlexBox = styled.div<{ fullWidth: boolean }>`
display: flex;
justify-content: space-between;
align-items: center;
width: ${({ fullWidth }) => (fullWidth ? '100%' : undefined)};
`

const SubFlexBox = styled.div<{ gap: number }>`
display: flex;
justify-content: flex-start;
align-items: center;
gap: ${({ gap }) => `${gap}px`};
`
const StyleAvatarWrapper = styled.span``
const TextFlexBox = styled.div<{ gap: number }>`
display: flex;
flex-direction: column;
justify-content: center;
gap: ${({ gap }) => `${gap}px`};
align-items: flex-start;
width: 330px;
`

const StyledText = ({
text,
typo,
color,
...props
}: {
text: ReactNode
typo: KeyOfTypo
color: KeyOfPalette
} & ComponentProps<'div'>) => {
return (
<>
{typeof text === 'string' ? (
<ChattingText typo={typo} color={color} {...props}>
{text}
</ChattingText>
) : (
<div {...props}>{text}</div>
)}
</>
)
}
export default ChatBubbleListLow
5 changes: 4 additions & 1 deletion src/components/common/AppHeader/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ const StyleAppHeader = styled.div<{ height?: string }>`
justify-content: flex-end;
height: ${({ height }) => height};
text-align: center;
padding: 6.5% 5% 7%;
padding: 15% 5% 7%;
`

const StyledAppHeaderLargeText = styled(Text)<Pick<AppHeaderProps, 'isDarkMode'>>`
Expand Down Expand Up @@ -75,6 +75,9 @@ const AppHeader = ({ nickname, isDarkMode, height, toggleDarkMode }: AppHeaderPr
height={49}
imgUrl={''}
margin={'0'}
style={{
cursor: 'pointer',
}}
onClick={() => {
moveFromAppHeader('profile')
}}
Expand Down
51 changes: 28 additions & 23 deletions src/components/common/Avatar/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,43 +6,24 @@ type AvatarProps = {
width: number | string
height: number | string
imgUrl: string
margin: string
margin?: string
onClick?: () => void
border?: string
shadow?: boolean
style?: React.CSSProperties
}

const StyledAvatar = styled.div<AvatarProps>`
width: ${(props) => (typeof props.width === 'number' ? `${props.width}px` : props.width)};
height: ${(props) => (typeof props.height === 'number' ? `${props.height}px` : props.height)};
background-image: url(${(props) => props.imgUrl});
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
border-radius: 50%; // 원 형태로 만들기 위함
margin: ${(props) => `${props.margin}px`};
border: ${(props) => (props.border ? props.border : 'none')};
box-shadow: ${(props) => (props.shadow ? '0px 0px 10px rgba(0, 0, 0, 0.25)' : 'none')};
@media (max-width: 280px) {
width: ${(props) =>
typeof props.width === 'number' ? `${props.width * 0.95}px` : `calc(${props.width} * 0.95)`};
height: ${(props) =>
typeof props.height === 'number'
? `${props.height * 0.95}px`
: `calc(${props.height} * 0.95)`};
}
`

/**
* `Avatar` component for displaying profile images.
* @param width - 아바타의 너비 (픽셀 또는 유효한 CSS 단위).
* @param height - 아바타의 높이 (픽셀 또는 유효한 CSS 단위).
* @param imgUrl - 아바타의 이미지 URL. 기본 이미지는 `defaultProfileImage`이다.
* @param margin - 아바타의 마진 (픽셀 또는 유효한 CSS 단위).
* @param margin - (Optional) 아바타의 마진 (픽셀 또는 유효한 CSS 단위).
* @param onClick - (Optional) 클릭 이벤트.
* @param border - (Optional) 아바타의 테두리. 기본 값은 `none`이다.
* @param shadow - (Optional) 아바타의 그림자. 기본 값은 `false`이다.
* @param props - (Optional) 추가적인 CSS 속성.
*/
const Avatar = ({
width,
Expand All @@ -52,6 +33,7 @@ const Avatar = ({
onClick,
border,
shadow = false,
...props
}: AvatarProps) => {
return (
<StyledAvatar
Expand All @@ -62,8 +44,31 @@ const Avatar = ({
margin={margin}
border={border}
onClick={onClick}
{...props}
/>
)
}

const StyledAvatar = styled.div<AvatarProps>`
width: ${(props) => (typeof props.width === 'number' ? `${props.width}px` : props.width)};
height: ${(props) => (typeof props.height === 'number' ? `${props.height}px` : props.height)};
background-image: url(${(props) => props.imgUrl});
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
border-radius: 50%; // 원 형태로 만들기 위함
margin: ${(props) => `${props.margin}px`};
border: ${(props) => (props.border ? props.border : 'none')};
box-shadow: ${(props) => (props.shadow ? '0px 0px 10px rgba(0, 0, 0, 0.25)' : 'none')};
cursor: pointer;
@media (max-width: 280px) {
width: ${(props) =>
typeof props.width === 'number' ? `${props.width * 0.95}px` : `calc(${props.width} * 0.95)`};
height: ${(props) =>
typeof props.height === 'number'
? `${props.height * 0.95}px`
: `calc(${props.height} * 0.95)`};
}
`

export default Avatar
1 change: 1 addition & 0 deletions src/components/common/BackChevron/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ const StyleBackChevron = styled.div<BackChevronProps>`
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
background-color: ${({ hasBackground, isDarkMode }) =>
isDarkMode
? hasBackground
Expand Down
Loading

0 comments on commit 0e776ac

Please sign in to comment.