From 457a1b1a06cb8fcda5fa15f59cb3c5f773a0530b Mon Sep 17 00:00:00 2001 From: jinyoung <87177577+jinyoung234@users.noreply.github.com> Date: Thu, 24 Oct 2024 15:38:27 +0900 Subject: [PATCH] [Feature] touroot v1.3.1 (#587) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * [Feature] - 프로젝트 환경 세팅 (#4) * chore: 초기 package.json 설정 * chore: .gitignore 추가 * chore: tsconfig.json 초기 설정 * chore: react 내 webpack 세팅 1. webpack 관련 의존성 추가 2. build scrpit 수정 3. webpack.common.js 추가 4. public 디렉터리 내 index.html 추가 5. src 디렉터리 내 App.tsx 및 main.tsx 추가 * chore: prettier & eslint 설정 * chore: emotion 설정 * docs: pull request 템플릿 추가 * chore: package.json 내 broswerslist 변경 1%에서 5%로 변경(크롬, 사파리, 엣지만 점유율이 5% 이상이기 때문) 사소한 설정으로 인해 develop에 바로 push * [Feature] - stylelint 설정 (#51) * chore: stylelint 관련 의존성 추가 * chore: stylelint 규칙 stylelintrc.json에 추가 * chore: vscode 관련 설정 추가 * [Feature] - 여행기 상세 기능 구현 (#42) * feat: 기본 폰트 설정 1. webpack 내 asset/resource 옵션 추가 2. pretendard 폰트 추가 3. woff에 대한 타입 추가 4. globalStyle 내 기본 폰트를 pretendard로 변경 * feat: svg 내 asset 설정 * feat: ThemeProvider 추가 1. theme 관련 declare 파일 추가 2. theme 추가 3. theme을 ThemeProvider 적용 * feat: svg를 컴포넌트 형태로 사용하도록 변경 1. @svgr/webpack 의존성 추가 2. webpack.common.js 내 관련 설정 추가(url, component 모두 사용) 3. svg.d.ts 내 svg 관련 타입 설정 추가 * feat: font 관련 local 함수 추가 * feat: assets/index.ts 내 marker url 설정 추가 * feat: tanstack query 의존성 추가 * chore: prettier 내 sort 순서 변경 * chore: 환경 변수 세팅 1. dotenv-webpack 의존성 추가 2. webpack config 파일 내 DotenvWebpack를 통해 환경변수 파일 동적으로 변경하도록 설정 * feat: axios instance 객체 생성 baseUrl 지정 * feat: react-query 및 devtools 설정 추가 * chore: @apis path alias 추가 * refactor: theme 내 detail에 font-family 제거 * feat: Box 컴포넌트 구현 * feat: Carousel 컴포넌트 구현 * feat: Header 컴포넌트 구현 * feat: Tab 컴포넌트 구현 * feat: TransformBottomSheet 컴포넌트 구현 * feat: PlaceDetailCard 컴포넌트 구현 * feat: TravelogueTabContent 컴포넌트 구현 * feat: GoogleMapView 컴포넌트 구현 * chore: re-export 관련 설정 추가 * feat: 초기 여행기 상세 페이지 구현 * chore: .gitignore 내 .env.development, .env.production만 오도록 변경 * chore: @react-google-maps/api 의존성 추가 * fix(Carousel): 이미지가 이동하지 않는 문제 해결 max-width 대신 transform 속성 추가 * [Feature] - codeowner 및 자동 할당 설정 (#59) * chore: codeowners 설정 추가 * [Feature] - 테스트 환경 설정 추가 (#58) * chore: storybook 관련 설정 추가 * chore: jest 관련 의존성 및 script 추가 * chore: jest config 파일 관련 의존성 추가 * chore: eslint 파일 내 jest plugin 추가 * [Feature] Storybook 배포 설정 (#61) * chore: chromatic 배포 설정 추가 * feat: TransformBottomSheet story 파일 추가 * chore: chromatic ci/cd 설정 추가 * [Feature] - react-router-dom 설정 (#71) * chore: react-router-dom 세팅 * chore: createBrowserRouter 적용 * chore: @constants path alias 추가 * feat: AppLayout 컴포넌트 추가 1. TravelogueDetailPage 내 margin-top 제거 2. AppLayout 컴포넌트 구현 * feat: router path 관련 상수 추가 * refactor: router 세팅 변경 1. App 내 router router.tsx로 이동 2. router.tsx 내 AppLayout 추가 및 router path 설정 * chore: storybook-addon-remix-react-router 의존성 추가 * chore: storybook 내 router addon 설정 추가 --------- Co-authored-by: 손진영 * [Feature] - 서비스 Foundation 설정 (#76) * chore: styles 내 declare 파일들 types 폴더로 이동 * chore: foundation 정의 1. color, spacing, typography에 대한 foundation 추가 2. global theme 변경 3. emotion.d.ts 내 declare theme 타입 변경 * refactor: foundation 컴포넌트 들에 적용 * chore: stylelint 적용 * [Feature] - msw 설정 (#73) * chore: msw 의존성 추가 * fix: msw v2 내 발생하는 문제 해결을 위한 폴리필 코드 추가 ReferenceError: TextEncoder is not defined 에러 발생 방지를 위해 폴리필 코드 추가 1. package.json 내 undici 의존성 추가 2. jest.polyfills.js 내 관련 설정 추가 3. jest.config.js 내 폴리필 관련 설정 추가 * chore: @mocks 관련 설정 추가 1. path alias 추가(webpack, tsconfig) 2. prettier import sort 내 mocks 추가 * chore: typescript 환경에서 jest api를 제공하기 위한 설정 추가 * chore: msw 기본 설정 추가 * chore: 불필요한 chromatic_publish 파일 제거 * chore: msw-storybook-addon 의존성 추가 * chore: storybook 내 msw 설정 추가 1. main.ts 내 환경 변수 설정 추가 2. preview.tsx 내 initialize & mswLoader 설정, handler 추가 3. npx msw init public/ 명령어 실행(mockServiceWorker.js & package.json 내 msw workerDirectory 추가 * [Feature] - 여행기 등록 페이지에 필요한 공통 컴포넌트 구현(지니) (#91) * feat(assets): 휴지통 아이콘 추가 * feat(Accordian): 아코디언 컴포넌트 구현 * test(Accordion): 아코디언 컴포넌트 스토리북 추가 * feat(Button): 버튼 컴포넌트 구현 * test(Button): 버튼 컴포넌트 스토리북 추가 * test(Accordion): 테스트 케이스 네이밍을 영어로 수정 * feat(asset): asset 추가 * feat(Icon): 아이콘 컴포넌트 구현 * test(Icon): Icon 컴포넌트 스토리북 추가 * feat(IconButton): IconButton 컴포넌트 구현 * test(IconButton): IconButton 컴포넌트 스토리북 추가 * feat(Icon): svg들에 대한 json 파일 추가 * feat(Text): Text 컴포넌트 구현 * test(Text): Text 컴포넌트 스토리북 추가 * refactor(preview): 스토리북 root에 rootStyle 추가 * test(Text): Overview 스토리 추가 * test(preview): 스토리북 환경 root style 변경 1. preview.tsx 내 rootStyle 변경 후 다른 story들에 적용 * refactor(Button): ButtonVariants import 시 type 추가 * refactor(Text): 변수 내에서 export 하도록 변경 * refactor(Icon): type들 type.ts로 분리 * refactor(Icon): import 방식 변경 * [Feature] - 여행기 등록 페이지에 필요한 공통 컴포넌트 구현(시모) (#90) * feat(Input): 컴포넌트 구현 * feat(InputField): 컴포넌트 구현 * fix(tsconfig): 개행으로 인한 오류 해결 * test(Input): 스토리북 구현 * test(InputField): 스토리북 구현 * refactor(InputContainer): 파일명 수정 및 count 컴포넌트 분리 * feat(Textarea): 컴포넌트 구현 * refactor(Textarea): props 및 css 수정 * test(Textarea): 스토리북 구현 * refactor(Count): 네이밍 직관적으로 수정 * refactor(Input): InputContainer를 Input으로 단일화 * refactor(Textarea): title 수정 * feat(BackDrop): 컴포넌트 구현 * feat(asset): Tturi svg 추가 * refactor(BackDrop): position 수정 * feat(asset): close-button svg 추가 * feat(Button): 컴포넌트 구현 * feat(ModalContainer): 컴포넌트 구현 * feat(ModalContent): 컴포넌트 구현 * feat(ModalFooter): 컴포넌트 구현 * feat(ModalHeader): 컴포넌트 구현 * feat(Modal): 컴포넌트 구현 * test(Modal): 스토리북 구현 * refactor(asset): close button 삭제 * refactor: modalBottomSheet로 네이밍 수정 * refactor(storybook): 모바일 환경을 위한 preview 수정, 불필요한 스토리북 테스트 삭제 및 네이밍 수정 * feat(Container): 에니메이션 추가 --------- Co-authored-by: jinyoung <87177577+jinyoung234@users.noreply.github.com> * [Feature] - 여행기 등록 페이지에 필요한 공통 컴포넌트 구현(리버) (#89) * feat: MultiImageUpload 컴포넌트 구현 * feat: ThumbnailUpload 컴포넌트 구현 * fix: emotion css를 styled로 수정 - storybook에서 emotion css가 적용되지 않는 문제가 있어서 emotion styled로 수정 * test: ThumnailUpload 컴포넌트 storybook 추가 * feat: MultiImageUpload 컴포넌트 이미지 삭제 기능 구현 * refactor: MultiImageUpload 컴포넌트에서 함수명 코드 컨벤션에 맞게 수정 * feat: ThumbnailUpload 컴포넌트 썸네일 수정 기능 구현 * feat: ThumbnailUploadButton에 gap 수정 * refactor: ThumbnailUpload 컴포넌트에서 중복 제거 * refactor: ThumbnailUpload 컴포넌트에서 화살표 함수로 단순화 * fix: MulitiImageUpload 컴포넌트에서 emotion css를 emotion styled로 수정 - storybook에서 emotion css 적용 되지 않는 이슈때문에 수정 * refactor: 이미지 업로드 로직을 useImageUpload로 분리 * test: MultiImageUpload 컴포넌트 storybook 추가 * fix: ThumbnailUpload 컴포넌트 storybook title 수정 * fix: MultiImageUpload 컴포넌트 storybook title 수정 * refactor: ThumbnailUpload 컴포넌트 storybook에서 base64를 mageUrl로 수정 -CORS 정책때문에 외부 URL에서 이미지를 직접 가져오는 것이 안됐었다. - 이 때문에 imageUrl 대신 base64를 사용했었다 - base64 값이 너무 길다 - 때문에 무료 CORS 프록시 서비를 사용하여 imageUrl을 사용하는 방법으로 수정 * feat: MultiImageUpload 컴포넌트의 이미지 렌더링 부분에 스크롤 추가 * test: MultiImageUpload 컴포넌트 storybook에 이미지 많이 첨부한 경우 추가 * refactor: MultiImageUpload 컴포넌트 삭제 버튼에 svg 사용 * refactor: MultiImageUpload 컴포넌트에서 styled 컴포넌트명 수정 * feat: useDragScroll hook 구현 * feat: MultiImageUpload 컴포넌트에 드래그 스크롤 기능 추가 * feat: MultiImageUpload 컴포넌트에 y축 스크롤 hidden 추가 * refactor: MultiImageUpload 컴포넌트에서 사진 추가 버튼 UI 수정 --------- Co-authored-by: jinyoung <87177577+jinyoung234@users.noreply.github.com> * [Feature] - 여행기 등록 기능 구현 (#115) * feat: types path alias 추가 * refactor(AccordionRoot): 다른 attributes들도 받을 수 있도록 변경 * fix(preview): 스토리북 열리지 않는 문제 해결 div 태그 추가 * chore: type, queries, hooks에 대한 type alias 추가 * feat: DayContent 컴포넌트 구현 * refactor(GoogleMapView): LoadScript 외부로 분리 1. GoogleMapView에서 LoadScript 제거 2. GoogleMapLoadScript 추가 * feat(GoogleSearchPopup): GoogleSearchPopup 컴포넌트 구현 * refactor(ModalBottomSheet): currentY 값 open시 0이 되도록 변경 * refactor(ModalBottomSheet): stylelint 적용 * refactor(MultiImageUpload): useImageUpload 반환 값을 외부에서 주입 받도록 변경 * feat(PageInfo): PageInfo 컴포넌트 구현 * test(PageInfo): PageInfo 컴포넌트 스토리북 구현 * chore: useDragScroll, useImageUpload 경로 변경 hooks에 위치하도록 변경 * refactor(ThumbnailUpload): useImageUpload 반환 값을 외부에서 주입 받도록 변경 * feat(TravelogueMultiImgaeUpload): TravelogueMultiImgaeUpload 컴포넌트 구현 * feat: register route path 추가 * feat(useTravelDays): useTravelDays hook 구현 * feat: travelogue 공통 타입들 추가 * feat: usePostTrevelogue 구현 * feat: usePostUploadImages 구현 * chore: reexport 추가 * feat: 여행기 등록 기능 구현 1. router에 추가 2. 여행기 등록 페이지 추가 * feat: 여행기 등록 완료 시 해당 상세 페이지로 이동하는 기능 추가 * [Feature] - 로그인 페이지 구현 (#80) * chore(stylelint): properties 추가 * refactor(style): 스타일린트 적용 * feat(theme): white 컬러 추가 * refactor(Header): 재사용성을 위한 컴포넌트 수정 * refactor(style): Header align-items 추가 * feat(assets): Tturi webp asset 추가 * feat(Login): 로그인 페이지 컴포넌트 구현 * chore: dev 실행을 위한 dotenv-webpack 설치 * feat(assets): kakao symbol 추가 * feat(theme): yellow color 추가 * feat(LoginPage): 네이밍 변경 및 로그인 버튼 UI 추가 구현 * feat(LoginPage): 카카오 로그인 구현 * chore(webpack.common.js): publicPath 추가 * feat: IconButton 구현 * refactor(Header): Header 내 content를 내부에 넣도록 변경 * refactor(ExcitedTturi): tturi에서 네이밍 수정 * feat(constants): ROUTE_PATHS 추가 * refactor(LoginPage): 불필요한 주석 삭제 및 핸들러 네이밍 수정 * feat(KakaoCallbackPage): 페이지 구현 * feat(router): kakaoCallbackPage 추가 * feat(App): useContext 추가 --------- Co-authored-by: 손진영 Co-authored-by: jinyoung <87177577+jinyoung234@users.noreply.github.com> * [Feature] - 여행 계획 등록 페이지 구현 (#125) * chore: react-datepicker 임시로 사용(데모데이때 빠르게 보여주기 위함) * chore: css-loader, style-loader 추가 데모데이때 사용하는 date-picker를 위해 임시로 설치 * feat(DateRangePicker): 임시로 사용할 DateRangePicker 컴포넌트 구현 * refactor(Input): maxCount, count optional로 변경 * chore(main): datepicker css 추가 * refactor: Place 내 name을 placeName으로 변경 * refactor(useTravelDays): onAddDay에 useCallback 추가 * feat(usePostTravelPlan): 여행 계획 post 요청 hook 구현 * feat(TravelogueRegisterPage): 여행 계획 등록 페이지 구현 * [Feature] - 메인 페이지 구현 (#78) * feat: AvatarCircle 컴포넌트 구현 * test: AvatarCircle 컴포넌트 storybook 추가 * feat: TravelogueCard 컴포넌트 구현 * test: TravelogueCard 컴포넌트 storybook 추가 * feat: MainPage 구현 * refactor: AvatarCircle 컴포넌트 useAvatar가 undefined일때도 기본 이미지 보이도록 수정 * feat: TravelCard 컴포넌트에서 likes 기본값 0으로 설정 * feat: useIntersectionObserver 훅 구현 * feat: useInfiniteTravelogues 구현 - 5개씩 fetch해옵니다. * refactor: 메인페이지에서 useInfiniteTravelogues 사용하도록 수정 * feat: Drawer 컴포넌트 구현 * feat: Header 컴포넌트에 Drawer 추가 * test: Drawer storybook 추가 * feat: Drawer 컴포넌트 style 수정 * refactor: 잘못된 image url 다루는 부분 useImageError 훅으로 분리 * feat: TravelCard 컴포넌트에서 잘못된 image url 핸들 추가 * test: TravelogueCard 컴포넌트 strorybook에 유요하지 않은 썸네일 케이스 추가 --------- Co-authored-by: jinyoung <87177577+jinyoung234@users.noreply.github.com> * [Feature] - 여행 계획 상세조회 페이지 구현 (#127) * chore: 업데이트된 다른 파일과 동기화 * feat(TravelPlansTabContent): 컴포넌트 구현 * feat(TravelPlansDetail): 컴포넌트 구현 * refactor(TravelogueDetailPage): 타입 분리 및 TransformBottomSheet props 수정에 따른 변경 * refactor: 네이밍 변경에 따른 수정 및 불 필요한 코드 삭제 Co-authored-by: choi river <0jenn0@users.noreply.github.com> Co-authored-by: simorimi * refactor: 스타일링 조정 및 stylelint에 맞게 순서 수정 * refactor(storybook): decorator 수정 * chore(createPathElement): 설정 * [Feature] - 2차 스프린트 QA 진행 (#141) * refactor: 네이밍 변경에 따른 수정 및 불 필요한 코드 삭제 Co-authored-by: choi river <0jenn0@users.noreply.github.com> Co-authored-by: simorimi * refactor: 스타일링 조정 및 stylelint에 맞게 순서 수정 * refactor(storybook): decorator 수정 * chore(createPathElement): 설정 * fix(router): router 수정 1. travelPlans url에 TravelPlansDetailPage 추가 2. travelPlansRegister url에 TravelPlanRegisterPage 추가 * fix(Header): title style 변경 align-items center 추가 * fix(Drawer): DrawerHeader 스타일 조정 align-items center 추가 * fix(TravelogueCard): 카드 디자인 시안 변경 1. CardHeader가 밑으로 가도록 변경 2. Layout의 animation 제거 후 border 관련 스타일 추가 * fix(TravelPlansTabContent): name을 placeName으로 변경 * fix: ROUTE_PATHS 수정 1. travelPlans 추가 2. travelPlansRegister의 url endpoint 변경 * refactor(TravelPlansTabContent): stylelint 적용 * refactor(TravelogueDetailPage): 불필요한 import 제거 * test(MultiImageUpload): storybook 오류 수정 * test(ThumbnailUpload): ThumbnailUpload 스토리북 수정 * refactor(MainPage): stylelint 적용 * fix(TravelPlansDetail): 여행 계획 api 오류 수정 1. headers 추가(Authorization) 2. queryKey 변경 3. useGetTravelPlan 분리 * fix(Header): 헤더 관련 오류 수정 1. 로그인 내 click 액션 시 로그인 페이지로 이동하도록 수정 2. access token 결과에 따라 로그인/로그아웃 분기 처리하도록 변경 3. HeaderTitle 컴포넌트 제거 * chore: type 관련 import sort 추가 * fix: TravelPlanRegisterPage navigate url 수정 * feat(asset): svg-icons.json 내 asset 추가 * feat: MainPage 내 FloatingButton 추가 * refactor(useGetTravelPlan): queryFn 형태 변경 * fix(TravelogueDetailPage): margin-top 변경 * fix(TransformBottomSheet): text-align center 변경 * refactor: declare file 관리 1. 불필요한 emotion.d.ts 파일 제거 2. style.d.ts에 모든 declare type 추가 * chore: context path alias 설정 추가 * chore: jest 내 moduleNameMapper 수정 * refactor(AvatarCircle): userAvatar props 변경 profileImageUrl로 변경 * test(AvatarCircle): argTypes(userAvatar)를 profileImageUrl로 변경 * refactor: App 내 Context들 UserProvider로 분리 * refactor: useUser hook 분리 * style: 불필요한 파일 제거 * fix(Header): 로그인 화면에서 뒤로가기 아이콘의 색이 잘못된 이슈 해결 * refactor(TravelPlansDetailPage): Context import 경로 및 네이밍 변경 * refactor(Container): stylelint 적용 * refactor(MainPage): TravelogueCard 컴포넌트 내 key prop 추가 * fix(LoginPage): 뚜리 이미지가 배포 환경에서 보이지 않는 문제 해결 webp에서 gif 파일로 변경 * refactor(KakaoCallbackPage): UseSetUseContext import 경로 및 네이밍 변경 * refactor(TravelogueCard): AvatarCircle prop name 변경 * refactor(TravelPlansDetail): stylelint 적용 * refactor(PlaceDetailCard): 이미지가 1개 일때 캐러셀이 아닌 일반 이미지를 보여주도록 변경 * refactor(TravelogueDetailPage): TitleContainer 스타일 변경 * refactor(TravelogueDetailPage): font title이 아닌 subtitle로 변경 * feat: favicon 추가 * chore: storybook path alias 추가(contexts) * chore: 변경사항 반영 * refactor: queries 디렉터리 구조 변경 * chore: 불필요한 console.log 제거 * refactor(useImageUpload): 해당 hook 제거 local state로 관리하는 것이 아닌 서버로 부터 받은 url을 컴포넌트에 주입하는 방식으로 변경 * refactor(TravelogueDetailPage): 리액트 쿼리 hook 로직 분리 useGetTravelogue로 분리 --------- Co-authored-by: choi river <0jenn0@users.noreply.github.com> Co-authored-by: simorimi * chore: chromatic 배포 yml 파일 추가 (#117) * [Feature] - CI 설정 (#66) * fix: __tests__ 내 jest 타입 에러 해결 * chore: styled 파일 내 stylelint 적용 * chore: 프론트엔드 ci 설정 github actions 추가 * chore: jest-junit 의존성 추가 * chore: jest.config.js 내 reporters 옵션 추가 * chore: ci 스크립트 내 check 코멘트 추가 * feat: 통과 하는 테스트 추가 * test: 예제 테스트 제거 * chore: jest 설정 내 --passWithNoTests config 추가 * [Feature] - 3주차 스프린트 리팩토링 (#145) * feat: 아코디언 toggle trigger부분을 확장 * feat: FloatingButton이 가려지지 않게 z-index 추가 * feat: description에 포함된 개행 문자 적용되도록 수정 * feat: tab 컴포넌트에서 3일 이상인 경우 마지막 tab은 반만 보이도록 구현 * fix: 이미지와 컨테이너 border가 각각 보이는 부분 수정 * chore: yarn.lock 업데이트 * fix: ci 에러 해결 (#150) install --frozen-lockfile 제거 * [Feature] - sentry 세팅하기 (#168) * chore: sentry/react 설치 * feat: ApiError 객체 구현 * feat: sentry 초기 설정 * fix: 잘못된 name 수정 * fix: 존재하지 않는 함수 import 수정 * [Feature] - 2차 스프린트 리팩토링 (#164) * refactor(useGetTravelogue): queryFn 수정 * chore: datepicker 추가에 따른 변경 * fix(globalStyle): 모바일 환경에서 주소창이 전체 화면 크기에 포함되는 문제 해결 * refactor(Header): 불 필요한 z-index 제거 * fix(ModalBottomSheet): useBottomSheet 분리 및 모바일 환경에서 작동하도록 수정 * refactor: z-index 추가 * refactor(useBottomSheet): 상수화 * [Feature] - 전환 기능 구현 (#146) * fix(useGetTravelogue): merge 과정에서 queryFn 사라진 오류 수정 * fix(App): 사용자 정보를 제대로 받지 못하는 오류 수정 App 이외 다른 페이지에서 유저 정보를 받아오지 못하는 오류 해결 * fix(useGetTravelogue): 반환하는 데이터 형태가 달라 런타임 에러 발생 해결 data return 형태 변경 * refactor(Header): useContext로 유저 정보를 받는 것이 아닌 useUser hook을 사용하도록 변경 * feat: 여행기 - 여행 계획 변환 기능 구현 1. TravelogueProvider 구현 2. App 내 TravelogueProvider 추가 3. TransformBottomSheet 내 onTransform prop 추가 4. TravelogueDetailPage 내 onTransform 로직 추가 5. TravelPlanRegisterPage 내 travelogue 데이터 추가 6. useTravelDays 내 days 파라미터로 받도록 변경 * feat: 여행계획 - 여행기 전환 기능 구현 * refactor: 여행 계획 - 여행기 변환 시 공통되는 부분을 TransformDetail로 통일 * refactor: 여행 계획 변환 시 title 제거 변환 시 title이 없도록 변경 * refactor(TravelogueProvider): import 내 type 추가 * refactor: import 내 type 추가 * refactor(TravelPlanDetailPage): 컴포넌트 명 및 디렉터리 변경 1. TravelPlansDetail에서 travelPlanDetail로 디렉터리 변경 2. TravelPlanDetailPage로 컴포넌트 네이밍 변경 3. 변경 사항 다른 컴포넌트들에 반영 * refactor(TravelTransformDetailProvider): 여행 전환 정보 데이터를 TravelTransformDetail로 변경 1. type을 TravelTransformPlaces와 TravelTransformDetail로 변경 2. TravelTransformDetailProvider로 네이밍 변경 * refactor: travelogue 타입 파일 내에서 travelTransform으로 분리 1. TravelTransformPlaces와 TravelTransformDetail 타입 파일 분리 2. 변경 사항 적용 * chore: utils path alias 추가 * refactor: onTransformTravelDetail context hook 내부로 이동 * [Feature] - 인가 처리 추가 (#176) * refactor(ApiError): Error 스택트레이스 수정 AxiosError가 아닌 custom name이 들어가도록 변경 * feat: 전역 axios interceptor 설정 추가 1. request 전 accessToken 확인 처리 및 authorization header 내 access token 추가 2. APIError 발생 시 sentry 스택트레이서 추가 3. AxiosError가 아닌 APIError를 throw * feat(TravelPlanRegisterPage): 여행 계획 등록 페이지 내 인가 처리 추가 액세스 토큰이 없다면 login 페이지로 redirect * feat(TravelogueRegisterPage): 여행기 등록 페이지 내 인가 처리 추가 액세스 토큰이 없다면 login 페이지로 redirect * refactor(main): sentry init 설정 변경 * refactor(useGetTravelPlan): accessToken 처리 로직 제거 * feat(usePostUploadImages): 이미지 업로드에 대한 인가처리 추가 * refactor(interceptor): ErrorResponse에 대한타입 추가 * feat(usePostTravelPlan): 여행 계획 추가에 대한 인가 처리 추가 * feat(usePostTravelogue): 여행기 추가에 대한 인가 처리 추가 * refactor(interceptor): import type 변경 * refactor: error response가 없는 경우에 대한 분기 처리 post query 내 cors 에러의 경우 error response가 없기 때문에 이에 대한 분기 처리 작업을 위해 union 타입으로 설정 * [Feature] - 상수화 작업 진행 (#188) * refactor: route path 상수화 추가 1. 여행 계획, 여행기에 대한 route path 형태 변경(optional 형태로 id를 받는 함수 형태) 2. navigate 함수 내 하드 코딩 된 url 값 상수화 3. ROUTE_PATHS_MAP으로 변경 * refactor: storage key 상수화 * refactor: api endpoint 상수화 * refactor: status code 관련 map(record) constants 디렉터리로 이동 * refactor: 쿼리키 상수화 * refactor: api endpoint 내 detail 네이밍 빠진 부분 추가 * refactor: 에러 메시지 상수화 * [Feature] - 타입 구조 변경 (#191) * refactor: 타입 구조 변경 1. travelogue, travelplan, traveltransformdetail에 대한 타입을 구분하는 것으로 변경 2. 변경 사항 적용(useTravelogueDays, useTraveloguePlanDays 분리) 3. DayContent 제거 후 TravelogueDayAccordion, TravelPlanDayAccordion각각 추가 * fix: 충돌 난 부분 수정 * refactor: DayAccordion들에 대한 interface 분리 각각 TravelPlanDayAccordionProps과 TravelPlanDayAccordionProps로 분리 * [Feature] - 여행기 무한 스크롤 관련 테스트 추가 (#166) * refactor(prettier): queries import order 수정 * fix(jest.config.js): msw가 실행되지 않는 문제 해결 setupFilesAfterEnv 내 jest-setup.ts 추가 * test(mainPage): 여행기 무한 스크롤 테스트 로직 추가 1. 무한스크롤 관련 핸들러 추가 2. 여행기 mock 데이터 추가 3. useInfiniteTravelogue를 renderHook으로 wrapping한 hook 추가(createInfiniteTravelogueHook) 4. 테스트 로직 추가 * fix(useGetTravelogue): queryFn 변경 * [Feature] - 모달 컴포넌트 구현 (#200) * fix: 여행 전환 후 다른 페이지에서 다시 등록 페이지로 접근 시 데이터가 남아있는 문제 해결 (#207) 페이지를 벗어나면 transformDetail를 null로 변경 * [Fix] - 등록 페이지에서 제목과 여행 장소 설명란 한글 입력시 제한 길이보다 1자 더 입력되는 문제 해결 (#210) * fix(TravelogueRegisterPage): 한글 입력시 21자까지 입력되는 오류 해결 * fix(TravelPlanRegisterPage): 한글 입력시 21자까지 입력되는 오류 해결 * fix(useTravelogueDays): 장소 설명란 한글 입력시 301자까지 입력되는 오류 해결 * fix(useTravelPlanDays): 장소 설명란 한글 입력시 301자까지 입력되는 오류 해결 * [Feature] - Login 명세 변경 (#181) * refactor(KakaoCallbackPage): http method를 get으로 변경 * refactor(KakaoCallbackPage): encoding된 redirect-uri params에 추가 * fix: 로그인 명세 변경 1. http method post로 변경 2. params에 추가하는 것이 아닌 url내 code 및 redirectUri 추가 * fix: ci 실패 하는 원인 수정 1. api endpoint map 내 loginOauth 수정 2. KakaoCallbackPage 내 반영 --------- Co-authored-by: simhorim * [Feature] - 메인페이지 skeleton 작업 (#221) * feat: TravelogueCardSkeleton 컴포넌트 구현 * test: TravelogueCardSkeleton storybook 추가 * feat: 메인 페이지에 skeleton UI 추가 * feat: 스켈레톤 컴포넌트에 key 추가 * fix: styled 컴포넌트 이름 컨벤션에 맞도록 수정 * fix: styled 컴포넌트 이름 컨벤션에 맞도록 수정 * [Feature] - Drawer가 열려져있는 경우 화면 스크롤 안되도록 수정 (#222) * feat: Drawer가 열려져있는 경우 화면 스크롤 안되도록 수정 * refactor: Drawer에서 DrawerProvider를 contexts로 분리 * refactor: useModalControl 훅을 이용하여 리팩토링 * [Feature] - user 컨텍스트에 access token만 담도록 수정 & 로그인/로그아웃 버튼 수정 (#224) * feat: useUserProfile 훅 구현 Co-Authored-By: eunjungL <62099953+eunjungL@users.noreply.github.com> * refactor: UserProvider에 accessToken만 저장하도록 수정 * feat: 카카오 로그인시 accessToken만 로컬스토리지에 저장하도록 수정 * fix: Header의 Drawer에 로그인/로그아웃 버튼 변하도록 수정 * feat: 로그아웃 구현 --------- Co-authored-by: eunjungL <62099953+eunjungL@users.noreply.github.com> * [Feature] - 여행 계획 등록 기능 변경 & 테스트 추가 (#225) * chore: react-datepick 라이브러리 제거 * feat: useCalendar hook 구현 * feat: useClickAway hook 구현 * feat: Calendar 컴포넌트 구현 * test: 캘린더 컴포넌트 스토리북 추가 * feat(TravelPlanRegisterPage): 캘린더 컴포넌트 페이지 내 연결 * fix: 여행 계획 및 여행기 아코디언을 연 상태에서 삭제 시 마음대로 열리고 닫히는 문제 수정 value가 배열 index로 되어있어 삭제 할 때 인덱스 값이 수정되어 발생했던 문제이므로 place 및 day를 추가할 때 uuid를 id로 하여 추가하도록 변경 * refactor(useTravelPlanDays): onChangePlaceDescription 함수 파라미터 변경 event를 받는 것이 아닌 description을 받도록 변경 * test(travelPlanRegisterPage): 여행 계획 등록 페이지 테스트 구현 1. 여행 계획 등록 msw 핸들러 추가 2. usePostTravelPlan를 wrapping한 createTravelPlanRegisterHook 추가 3. 여행 계획 등록 페이지 테스트 코드 구현 * refactor: px단위 rem으로 변경 * refactor: StartDate를 StartDateLabel로 네이밍 수정 * [Feature] - 여행 공유하기 기능 구현 (#226) * feat: 개발 환경에서 browser 모킹 가능하도록 설정 * feat: travelPlan mock 데이터 추가 * chore: prettier import 순서 추가(contexts, utils) * refactor: url에서 id 분리하는 유틸함수 추가 * refactor: 여행기, 여행 계획 endpoint 내 id type을 string으로 변경 * feat: uuid 검증 함수 및 정규 표현식 추가 * feat: 테스트 환경/브라우저 환경 구분하기 위한 변수 추가 * refactor(travelogueInfinteHandler): 환경에 따라 request url 다르게 설정하도록 변경 * feat: 여행 계획 mock 핸들러 추가 * refactor(travelPlan.json): 여행 계획 데이터 내 shareKey 추가 * refactor(travelPlanHandler): 404 httpResponse statusText 변경 * refactor(usePostTravelPlan): mutationFn variable type 수정 shareKey를 뺀 타입인 TravelPlanPayload 타입 추가 * feat(asset): icon 추가 * feat(ShareModal): 공유 모달 구현 * feat: url 복사를 위한 함수 구현 copyLinkToClipboard 구현 * refactor(ROUTE_PATHS_MAP): travelogue 및 travelPlan의 id variable 타입 변경 uuid와 id 모두 받을 수 있도록 타입 변경 * refactor(colors): green 컬러 theme 내 추가 toast 구현을 위한 green 컬러 PRIMITIVE_COLORS 내 추가 * feat: Toast 컴포넌트 구현 * test: Toast 컴포넌트 스토리북 추가 * refactor(Input): forwardRef 추가 input 내 ref를 추가하기 위해 컴포넌트 내 forwardRef wrapping * feat(main): main.tsx 내 ToastProvider 추가 * feat: 공유하기 기능 구현 1. ShareModal 내 복사 시 toast 추가 2. endpoint 추가 및 변경 3. TravelPlanPage 내 shareModal 연결 및 icon button(공유, 더보기) 추가 * test(Modal): 복사하기 기능 Modal 컴포넌트 내 추가 * refactor(Toast): gap 내 spacing 적용 * refactor(endpoint): 여행 계획 상세 및 공유된 여행 계획 상세 prefix(/) 추가 * refactor: extractId 함수 개선 * [Feature] - 여행 계획 & 여행기 삭제 기능 구현 (#229) * feat(Dropdown): 컴포넌트 구현 * test(Dropdown): 스토리북 테스트 구현 * feat(svg-icons): 데이터 추가 * feat(useDeleteTravelogue): mutation 훅 구현 * feat(useDeleteTravelPlan): mutation 훅 구현 * feat(TravelogueDeleteModal): 컴포넌트 구현 * feat(TravelPlanDeleteModal): 컴포넌트 구현 * feat(TravelogueDetailPage): Text 컴포넌트로 수정 및 불필요한 css 제거, Dropdown 기능 추가 * feat(TravelPlanDetailPage): Dropdown 기능 추가 * refactor(Button): 개행 수정 * refactor(Dropdown): 스토리북 수정 * refactor(Dropdown): 의미의 명확성을 위해 css 값으로 변경 * refactor(Dropdown): import type으로 수정 * refactor(index): Dropdown, Modal index에서 호출하도록 수정 * refactor(TravelogueDetailPage): style 속성을 css로 일관성 있게 변경, spacing 추가 및 의미의 명확성을 위한 isOpen 밖에서 보이도록 수정 * refactor(TravelPlanDetailPage): style 속성을 css로 일관성 있게 변경, spacing 추가 및 의미의 명확성을 위한 isOpen 밖에서 보이도록 수정 * refactor(TravelogueDeleteModal): style 속성을 css로 일관성 있게 변경 * refactor(TravelPlanDeleteModal): style 속성을 css로 일관성 있게 변경 * refactor: title과 subtitle이 바뀌어있는 부분 수정 --------- Co-authored-by: 손진영 * [Feature] - 마이 페이지 구현 (#236) * feat: Tab 컴포넌트에 새로고침해도 선택된 tab 그대로이도록 수정 * feat: AvatarCircle에 medium 사이즈 추가 * test: AvatarCircle의 medium 사이즈 storybook 추가 * feat: 마이페이지 route 설정 * feat: Header Drawer에 마이페이지 route 처리 * feat: 마이페이지 tab content에서 사용될 TabContent 컴포넌트 구현 * fix: Tab 컴포넌트 unmount 될 때 선택된 탭이 첫번째 탭이 되도록 수정 * style: 필요없는 주석 삭제 * refactor: Tab 컴포넌트에 새로고침할 때 처음 버튼으로 돌아갔다가 최근껄로 보이는거 수정 * feat: useInfiniteMyTravelPlans 구현 * fix: renderItem type 수정 * feat: 날짜 문자열에 숫자로 일수 더해주는 util 함수 구현 * fix: TravelPlanDetail 페이지를 useGetTravelPlan 반환 타입에 맞춰 수정 * feat: MyTravelPlans 컴포넌트 구현 * feat: MyTravelogues 컴포넌트 구현 * feat: 마이 페이지 구현 * fix: 쓰지 않는 변수들 삭제 * fix: type 이름 수정 * fix: 여행기 등록페이지에서 type 맞춰서 수정 * refactor: Tab 컴포넌트 상수 분리 * refactor: state 초기값을 localStorage에서 가져오도록 수정 * style: border css 순서 수정 * style: 색상 코드 하드코딩 대신 디자인 토큰값 사용 * refactor: MyPage에서 필요없는 useEffect 제거 * style: font-weight값 수정 * style: 긴 css를 styled.ts로 분리 * refactor: TabContent 컴포넌트 이름을 MyPageTapContent로 수정 * refactor: MyTravelogue 타입을 types폴더로 이동 * refactor: MyPageTabContent의 props명 수정 * refactor: queries에서 try catch 제거 * refactor: data 평탄화를 select로 리팩토링 * fix: useGetTravelPlan에서 id string만 받도록 수정 --------- Co-authored-by: 손진영 * [Fix] - 3차 스프린트 QA 반영(리버) (#255) * feat: 여행 계획 상세 페이지 내에서 로그아웃 했을 때, 로그인 페이지로 이동할 수 있도록 수정 * fix: Tab 컴포넌트가 마운트될 때 로컬스토리지의 selected index로 값 초기화 안되던 이슈 수정 * fix: 여행계획 상세페이지, 마이페이지에서 로그아웃 할 시, 로그인 페이지로 이동하도록 수정 * style: Drawer의 z-index가 transformbottomsheet보다 높도록 수정 * fix: 여행기,여행계획 삭제에 무효화 추가, 여행기 작성에 무효화 추가 * fix: 메인 페이지에서 여행기 작성자들 프로필 이미지 보이도록 수정 * style: zIndex 디자인 토큰 추가 및 적용 * feat: Spinner 컴포넌트 구현 - Icon 컴포넌트를 사용하려했으나, Icon 컴포넌트 사용시 뚜리 눈이 사라지는 이슈가있어서 사용하지 않았습니다 * test: Spinner storybook 추가 * feat: LoginFallback 컴포넌트 구현 및 적용 * test: LoginFallback storybook 추가 * feat: 여행 계획 상세 페이지에 날짜 정보 추가 * fix: Tab 컴포넌트에 day가 3개일 때 탭버튼 가로 넓이 잘못 설정되는거 수정 * fix: api 명세 수정에 따라서 수정 * style: drawerOverlay 따로 추가 * [Fix] - 3차 스프린트 QA 반영(지니) (#256) * fix(TravelPlanDetailPage): 공유 url 접근에 대한 더보기 버튼 분기 처리 추가 * fix(TravelogueDetailPage): 런타임 에러 발생 해결 TravelogueTabContent 내 places에 옵셔널 체이닝 추가 * fix(TravelPlanRegisterPage): 아무것도 입력하지 않고 등록을 눌렀을 때 아무 것도 처리되지 않는 문제 해결 startDate가 없을 경우 빈 문자열로 request 날리도록 변경 * fix(TravelPlanRegisterPage): handleAddTravelPlan를 mutate가 아닌 mutateAsync로 변경 mutateAsync로 인해 런타임 에러 발생하는 부분 해결 * fix(MyPage): 로그인 없이 마이페이지로 접근할 경우 2번 alert가 발생하는 문제 해결 * fix(TravelogueDetailPage): 여행기 상세 페이지 내 작성자 및 작성 일자 추가 * fix(TravelogueRegisterPage): TravelogueDayAccordion 내 key를 id 값으로 변경 * feat: 여행기 상세페이지 내 스켈레톤 추가 1. GoogleMapLoadScript에서 loadingElement를 props로 받도록 변경 2. Skeleton 컴포넌트 구현 3. 여행기 상세 스켈레톤 컴포넌트 구현 4. 여행기 상세 페이지에 스켈레톤 반영 * refactor(Skeleton): 스타일 파일 분리 * feat: 여행 계획 페이지 내 스켈레톤 ui 추가 * feat: 마이페이지 내 스켈레톤 ui 적용 * fix: 여행기 & 여행 계획 등록 페이지 내 구글 검색 ui loading 개선 * fix(TravelPlanDetailPage): 여행 계획 상세 페이지 내 작성자가 아닐 경우 뒤로 가도록 처리 * fix(TravelPlanDetailPage): 런타임 에러 해결 옵셔널 체이닝 추가 * fix(interceptor): 만료된 토큰에 대한 처리 추가 * refactor: 아코디언의 기본 상태가 열려있도록 변경 * fix(interceptor): access token 없을 시 인증 헤더에 빈 값을 보내도록 변경 * [Feature] - sentry 초기 설정 변경 & 소스맵 설정 추가 (#261) * chore(main): dev 환경에서만 sentry가 동작하도록 변경 * chore: @sentry/webpack-plugin 의존성 추가 * chore: webpack 설정 파일 내 sourcemap 관련 설정 추가 * [Fix] - 3차 스프린트 QA 반영(시모) (#262) * refactor(FloatingButton): 불 필요한 버튼들 제거 * refactor(Dropdown): dropdown 외부 클릭시 닫치도록 수정 * refactor(travelogue): 타입 수정 * refactor(user): 글 작성자인지 파악하기위해서 memberId 를 전역으로 관리하도록 수정 * fix: 삭제시 쿼리 캐싱 최신화되지 않는 문제, error 객체 그대로 반환하는 문제, 그리고 navigation route 수정 * fix: 삭제시 쿼리 캐싱 최신화되지 않는 문제 해결 * fix(TravelogueDetailPage): ci 문제 해결 --------- Co-authored-by: 손진영 * [Feature] - 배포한 서비스를 모니터링 하는 도구 GA 세팅 (#263) * chore: react-ga4 설치 * feat(main): ga4 init * chore: 전환 버튼 클릭 시 이벤트 집계하도록 설정 --------- Co-authored-by: 손진영 * [Fix] - 한 Day 내 중복된 장소 이름이 존재할 경우 게시물이 지속적으로 생기는 문제 해결 (#266) * fix(TravePlansTabContent): 한 Day 내 중복된 장소 이름이 존재할 경우 게시물이 지속적으로 생기는 문제 해결 중복된 key로 인해 발생했던 문제이므로 고유한 값인 id로 변경 * fix: 잘못된 key prop 해결 1. calendar의 key를 index가 아닌 date 값으로 변경 2. CarouselImageItem의 key를 imageUrl로 변경 3. TravelogueTabContent의 key를 place id로 변경 * [Fix] - 3차 스프린트 QA 반영 2차 (리버) (#276) * style: 프로필 이미지 납작하게 보이던것 수정 * style: Drawer에서 클릭되지 않는 부분에 마우스 커서 pointer이던것 수정 * feat: Drawer에 메인 페이지로 이동하는 홈 버튼 추가 * [Fix] - 3차 스프린트 QA 반영 2차 (시모) (#275) * fix: 삭제 이후 마이 페이지로 돌아왔을 때 캐시 최신화 되지않는 문제 해결 * fix(useGetTravelogue): retry 3회로 지연되는 현상 해결 * fix: 존재하지 않는 상세 조회시 alert 띄우고 페이지 뒤로 이동하도록 수정 * refactor(TransformBottomSheet): IconButton으로 수정, 불 필요한 css 제거 및 up-arrow layout에 붙은 문제 해결 * [Fix] - 3차 스프린트 QA 반영 2차 (지니) (#280) * fix: 크롬 브라우저 환경에서 캘린더 밑줄 보이는 문제 해결 meta tag 추가 * fix(TravelPlansTabContent): 여행 상세 페이지 내 마지막 요소가 바텀 시트로 인해 보여지지 않는 문제 해결 * refactor(TravelPlansTabContent): 여행 계획 내 description 추가 * fix(TravelogueMultiImageUpload): 장소 별 사진 10장 이하로 업로드 가능하도록 변경 * refactor(GoogleMapView): 마커 내 순서 표시 텍스트 추가 * fix(Calendar): key prop 변경 * refactor(TravelPlanRegisterPage): 주석 처리 된 부분 수정 * refactor: 마커 색상 변경 & 여행기 상세 페이지 title & subtitle 순서 변경 (#283) * refactor: 마커 색상 변경 * refactor(TravelogueDetailPage): 여행기 상세 페이지 title, subtitle 수정 * [Fix] - 만료된 access token 핸들링 (#292) * fix(interceptor): 만료 토큰 에러 시 early return 하여 error를 throw 하지 않도록 변경 * fix: onSuccess callback 내에서 구조 분해 할당을 하지 않도록 변경 * refactor: 수정 ui 제거 * [Fix] - 삭제 및 등록 시 여러번 요청하지 못하게 수정 (#295) * feat(useLeadingDebounce): 선행 디바운드 훅 구현 * fix: 삭제 반복 요청하지 않도록 수정 * fix: 등록 반복 요청하지 않도록 수정 * refactor(useLeadingDebounce): 렌더링과 무관하기에 useState 에서 useRef로 수정 * [Feature] - refresh token 클라이언트 내 적용 (#307) * feat: 리프레시 토큰 추가 1. 로그아웃 시 refresh token empty string으로 변경 2. 로그인 시 refresh token localstorage 내 추가 3. AuthTokenResponse 내 refreshToken 추가 * feat: 리프레시 토큰 클라이언트 내 적용 1. handleAPIError 내 401 에러 시 access token 재발급 로직 추가 2. 리프레시 토큰 만료 시 logout 로직 추가 * [Feature] - TravelogueCard 컴포넌트 리팩터링 (#314) * refactor(svg-icons): empty-heart 아이콘 변경 * refactor: travelogue mock data 수정 * refactor(travelogue): TravelogueRepsonse 타입 변경 현재 명세에 맞게 변경 * test(TravelogueCard): likes 필드를 likeCount로 변경 * refactor: TravelogueCard ui 형태 리팩터링 * refactor: 여행기 mock data 추가 * refactor: TravelogueOverview 타입 제거 TravelogueResponse 타입을 Pick 하는 형태로 변경 * [Feature] - Input 컴포넌트 리팩토링 (#310) * feat: Input 컴포넌트에 variants 추가 - border bottom이 있는 input 추가 - focus 했을 때만 border bottom이 생기는 input 추가 * test: 추가된 Input storybook 추가 * fix: 안쓰는 import문 삭제 * refactor: InputVariants type 수정 * Fix - image error 처리 누락, 여행기 삭제시 마이페이지로 넘어갈 때 tab 초기값 수정 , 여행기 썸네일 (#296) * fix: PlaceDetailCard에서 이미지 에러 핸들링 추가 * test: PlaceDetailCard storybook 추가 * fix: 여행기 상세 조회 썸네일 가운데가 아니라 위쪽 보이는 이슈 수정 * fix: 내 여행기 삭제 후 마이페이지 이동시, tab이 내 여행기로 가있도록 수정 * [Fix] - Icon, Icon Button storybook에서 iconType option 적용되도록 수정 (#327) * test: Icon storybook iconType option 적용되도록 수정 * test: IconButton storybook iconType option 적용되도록 수정 * [Feature] - 여행 계획 TO DO 기능 구현 (#333) * feat: asset 추가(check) * feat: Checkbox 컴포넌트 구현 * test(Checkbox): 스토리북 추가 * refactor(Input): label과 count가 있을 경우 컴포넌트를 렌더링하도록 변경 * test: Input 컴포넌트 변경으로 인한 Calendar & Modal 컴포넌트 스토리북 업데이트 * feat: PlaceTodoListItem 컴포넌트 구현 * test: PlaceTodoListItem 스토리북 추가 * refactor(Input): Input 스타일링 변경 * refactor(travelPlan): TravelPlanPlace 타입 명세 변경 1. todos 필드 추가 2. TravelPlanTodo 인터페이스 추가 * refactor(travelPlan): TravelPlanTodo id 명세 변경 * refactor(TravelPlanRegisterPage): description이 아닌 todo를 추가 및 삭제하도록 변경 * refactor(travelPlan): TravelPlanPlace 내 description 필드 제거 * refactor: 여행 계획 mock 데이터 변경된 명세에 맞게 수정 * refactor(Checkbox): checked가 아닌 defaultChecked로 변경 브라우저 warning으로 인한 defaultChecked로 변경 * refactor(endpoint): todo patch 요청 관련 endpoint 추가 * test: 공유 링크로 접속한 여행 계획 msw handler 추가 * test: 여행 계획 상세 msw 핸들러 변경 uuid 확인하는 로직 제거 * test: 여행 계획 todo patch 요청 msw 핸들러 추가 * feat(usePatchTravelPlanTodo): 여행 계획 todo patch 요청 관련 query 구현 * feat: TravelPlanTodoItem 컴포넌트 구현 * refactor(TravelPlansTabContent): description text가 아닌 todo list들이 보여지도록 변경 * refactor(useTravelPlanDays): onAddPlaceTodo 내 논리 or 연산자가 아닌 널 병합 연산자로 변경 * test(travelPlanRegisterPage): 여행 등록 페이지 테스트 내 장소 설명 변경 test 제거 * fix(TravelPlanTodoItem): 현재 사용자가 action을 일으킨 상태로 request 날리도록 변경 * fix: ci 문제 해결 checkbox index.ts 내 default export 추가 * refactor(TravelPlanTodoItem): gap에 spacing 적용 * refactor(PlaceTodoItem): Wrapper가 아닌 Container로 변경 여러 요소를 감싸고 있기 때문에 컨벤션에 따라 변경 * refactor: 불필요한 console.log 제거 * refactor(Checkbox): checked, defaultChecked를 외부에서 주입 받도록 변경 제어 컴포넌트, 비제어 컴포넌트 모두 사용 가능하다고 판단되어 다음과 같이 변경 * [Feature] - tag 기능 구현 (#335) * refactor(TravelogueCard): layout css 수정 * refactor(Text): bodyBold, detailBold 추가 * feat(Chip): 컴포넌트 구현 * test(Chip): 스토리북 구현 * refactor(Chip): isSelected 초기값 설정 및 optional로 수정 * feat(travelogue): tag type 추가 * feat(TravelogueDetailPage): 테그 UI 구현 * feat(TravelogueCart): tag UI 추가 * refactor(Chip): button 에서 li로 변경 * refactor(useDragScroll): 재사용성을 높이기위하여 li로 변경 후 적용 * feat(index): Chip 추가 * refactor: chips ul로 변경 * feat(tags): tags endpoint 및 queryKey 추가 * feat(useGetTags): tags type 추가 및 getTags 구현 * feat(TravelogueRegisterPage): 태그 UI 및 기능 구현 * feat(TravelogueRegisterPage): 태그 UI 넘어가는 화면 끝까지 닿도록 수정 및 태그 선택 3개까지만 하도록 수정 * refactor(Tab): no-wrap은 없는 속성이라 nowrap으로 수정 * feat(useInfiniteTravelogues): 필터링 기능 추가 * feat(travelogue): 태그 추가에 따른 mock data 및 handler 수정 * feat(MainPage): 태그 필터링 기능 구현 * refactor(createInfiniteTravelogueHook): 파라미터 수정 * refactor(chip): 스토리북 options 추가 * refactor(Chip): line-height 추가 * refactor(MultiImageUpload): div로 수정 * refactor: chips를 chipsContainer로 수정 * feat(queryKey): travelogue.tag 추가 * refactor(useDragScroll): 타입 유연성을 위해 제네릭으로 수정 * feat(condition): condition 상수화 * refactor(useInfiniteTravelogues): 상수 외부로 이동 및 queryKey 상수화 활용 * refactor: useDragScroll 제네릭 수정에 따른 변경 * refactor(TravelPlanRegisterPage): 상수화에 따른 수정 * refactor(MainPage): 상수화 활용, useDragScroll 제네릭 적용 및 chipsContainer로 변경 * feat(useTagSelection): 훅 구현 및 적용 * refactor(formValidation): condition 네이밍 수정 * [Feature] - 여행기 장소 이미지 업로드 중일 경우, spinner를 보여주도록 리팩터링 (#332) * refactor(Spinner): Spinner 컴포넌트 내 variants 및 size option 추가 circle spinner 및 확장성을 위해 해당 option들 추가 * test: Spinner 컴포넌트 스토리북 추가 * refactor(MultiImageUpload): 해당 컴포넌트 내 image upload 중일 시 loading ui를 보여줄 수 있도록 컴포넌트 리팩터링 * test(MultiImageUpload): 컴포넌트 변경점에 따른 스토리북 변경 * refactor: 불필요한 console.log 제거 * fix(MultiImageUpload): x 버튼이 짤려서 보이는 문제 수정 * fix(TravelogueMultiImageUpload): 같은 image를 여러 번 업로드 시 업로드가 되지 않는 문제 해결 fileInputRef를 초기화 하도록 변경 * refactor(TravelogueMultiImageUpload): 최대 이미지 업로드 갯수 상수화 및 핸들러 함수 네이밍 수정 * refactor(TravelogueMultiImageUpload): newImgUrls를 newImageUrls로 변경 다른 변수들에서 image로 사용하고 있는 만큼 img가 아닌 image로 일관성을 보장하기 위해 다음과 같이 변경 * refactor(TravelogueMultiImageUpload): props interface 분리 * refactor(TravelogueMultiImageUpload): 내부 로직 hook으로 분리 * refactor: imageStates에 lazy 초기화 적용 * [Feature] - 사용자 닉네임 수정 (#317) * feat: 닉네임 수정 msw 추가 * feat: 닉네임수정 hook 구현 * fix : 닉네임 수정 api 명세에 맞춰서 msw,query,endpoint 수정 * fix: 닉네임 수정 hook에서 refetchType 수정 * feat : 마이 페이지에 프로필 수정 기능 추가 * style: 글씨 색상 theme color로 수정 * fix: 함수명을 파일명과 동일하게 수정 * fix: refetchType 삭제 - 없애도 잘되기에 삭제함 * fix: console.log를 alert로 수정 * fix : ref 사용, 닉네임을 다 지우고 수정 시도할 경우 원래 닉네임으로 되도록가도록 수정 Co-authored-by: jinyoung <87177577+jinyoung234@users.noreply.github.com> * chore: 사용되지 않는 styled 삭제 * fix : 빈 칸으로 수정 시도할 경우 원래 닉네임으로 되돌아가도록 수정 * fix: 닉네임 수정시 깜빡이며 렌더링 되는것 수정, spellcheck false로 설정 --------- Co-authored-by: jinyoung <87177577+jinyoung234@users.noreply.github.com> * [Feature] - 검색 구현 (#328) * feat: 여행기 검색 무한스크롤 query 구현 * chore: 검색 아이콘 추가 * feat: 헤더에 검색 추가 * feat: SearchFallback 컴포넌트 추가 * feat: 검색 결과 페이지 구현 * feat: 검색 페이지 라우트 추가 * feat: home icon 추가 * refactor: Header 컴포넌트를 기본 Header의 basic으로 사용할 수 있도록 리팩토링 * feat: HomeHeader 구현 * feat: LogoHeader 구현 * feat: NavigationHeader 구현 * feat: SearchHeader 구현 * fix: storybook preview rootStyle이 common/Header에는 다르게 적용되도록 수정 - rootStyle에 들어가있는 padding 때문에 Header storybook에서 컴포넌트가 padding만큼 밀리는 이슈가있어서 common/Header일때는 padding이 0이 되도록 수정함 * test: Header storybook 추가 * feat: AppLayout에서 Header를 동적으로 추가 * refactor: HomeHeader -> HomePageHeader로 이름 수정 * refactor: 스타일드 컴포넌트 이름 수정 (wrapper -> container) * refactor: Header Props명 수정 * refactor: 검색어 최소 글자수 상수화 * refactor: AppLayout에서 pathname 확인 부분 상수 사용 * refactor: h1 태그 대신 Text 컴포넌트를 사용해서 리팩토링 * refactor: gap 값에 theme spacing을 사용 * refactor: gap 값에 theme spacing 사용 * chore: 코드 사이에 개행 추가 * chore: 개행추가 * refactor: Icon 대신 IconButton을 사용 * refactor: #fff 대신 primitive white 사용 * chore: 빈 파일 삭제 * refactor: dom으로 직접 접근하는 부분 ref를 사용하도록 수정 * fix: 검색어에 trim 추가 및 useInfiniteSearchTravelogues 가 keyword가 빈값이 아닐때만 요청되도록 수정 * refactor: NavigationHeader -> SearchResultPageHeader로 이름 수정 * fix: Header 이름 수정 꼬인것 수정 * refactor: Header 관련 컴포넌트 인덱싱 * fix: 검색 페이지에서 뒤로가기 누를 때, query는 그전 검색어지만 Input value는 그전 검색어가 아니던 이슈 수정 * storybook: styled의 Input이 아닌 진짜 Input.tsx 사용하도록 수정 - 로컬 환경에서는 문제없이 잘 렌더링되나, storybook에서는 값을 넣지 않은 label,maxcount,count div까지 만드는 이슈가있습니다. - 일단 style로 marginbottom에 음수를 줘서 가운데정렬된거처럼 보이게 수정은해놨습니다 * fix: build 에러 잡음 * [Feature] - 여행기 상세보기 페이지에서 지도 상세보기 구현 (#334) * feat: 지도 아이콘 추가 * style: Box 높이 수정 * feat: 지도 아이콘 버튼을 누르면 구글맵 사이트로 이동하도록 구현 - place 데이터 안에 구글맵 placeId가 없어 일단 lat,lng,placeName으로 구현(정확한 결과 나오지 않는것도 있음) * fix: Box 컴포넌트에서 tag 삭제 - Box에서 tag 안쓰기로해서 삭제함 * chore: 필요없는 태그 삭제 * fix: build 에러 잡기 * [Feature] - 여행기 좋아요 기능 구현 (#342) * feat: asset(heart) 추가 * refactor(TravelogueDetailPage): 좋아요 디자인 수정 1. flex-end가 아닌 space-between으로 변경 2. gap 8px로 변경 * feat: 좋아요 관련 msw 핸들러 추가 * feat: 여행기 상세 조회 msw 핸들러 추가 * refactor: 여행기 mock 데이터 변경 isLiked 및 likeCount 추가 * refactor: 메인 페이지 여행기 핸들러 변경 request 객체 없을 경우 예외 처리 추가 * refactor(travelogue): TraveloguePayload 및 TravelogueResponse 타입 변경 1. TraveloguePayload을 Omit이 아닌 Pick으로 변경 2. TravelogueResponse 타입 내 likeCount 및 isLiked 추가 * feat(endpoint): 여행기 좋아요 endpoint 추가 * feat: 여행기 active 및 inactive 관련 query 추가 * feat(TravelogueDetailPage): 여행기 좋아요 기능 구현 * refactor(TravelogueDetailPage): 여행기를 등록한 사람만 좋아요를 토글할 수 있도록 수정 * refactor(svg-icons): heart, empty-heart에 대한 path 변경 * refactor(asset): 좋아요 svg 변경 * refactor(Icon): icon viewBox를 size로 받도록 변경 * refactor: 좋아요 icon button 사이즈 16으로 변경 * refactor: 좋아요 쿼리 관련 refetch type all로 변경 * refactor(useGetTravelogue): access token이 스토리지에 있을 경우 예외적으로 인증 헤더 추가 하도록 변경 백엔드 측에서 인증 헤더 없이는 유저 좋아요 여부를 확인하기 어렵다고 하셔서 다음과 같이 변경 * refactor(TravelogueDetailPage): 로그인 한 경우 무조건 좋아요를 할 수 있도록 변경 * refactor(Icon): viewbox를 다시 svg-icons의 width, height로 설정하도록 변경 * refactor: query 내 refetchType 없애는 걸로 변경 상세 페이지만 refetch 하도록 변경 * [Feature] - 썸네일 에러 발생 시 예외 처리 추가 (#356) * refactor(TravelogueRegisterPage): 썸네일 에러 발생 시 예외 처리 추가 * refactor: api endpoint 원래대로 변경 * [Feature] - 여행기 및 여행 계획 수정 페이지 구현 (#348) * refactor(ModalBottomSheet): 수정페이지에서도 사용하도록 props 유연하게 수정 * feat(route): 수정 페이지 route 추가 * refactor(RegisterPage): modalBottomSheet props 수정에 따른 리팩토링 * feat(DetailPage): 수정 버튼 활성화 * feat(TravelogueEditPage): UI 구현 * feat(TravelPlanEditPage): UI 구현 * refactor(errorMessage): only writer 속성명을 구체적으로 수정 * refactor: state를 set 시키는 change 함수 구현 및 반환히도록 수정 * feat(TravelogueEditPage): 초기값 설정, 태그 ui 추가 및 타 사용자가 수정하지 못하도록 막는 기능 구현 * refactor(router): 오타 수정 * refactor(BackDrop): position fixed로 수정 * refactor(useTravelogueDays): change 함수명 수정 * refactor(TravelPlanRegisterPage): mutate 네이밍 수정 * feat(errorMessage): errorMessage 추가 * refactor(PlaceTodoListItem): value 값 및 isChecked 값 받도록 수정 * feat(usePutTravelogue): 기능 구현 * feat(usePutTravelPlan): 기능 구현 * feat(useTravelPlanDays): onChange 함수 추가 * feat(TravelPlanEditPage): 값 초기화, put 요청 및 에러 처리 기능 구현 * refactor: useEffect 의존성 배열로 사용하여 useCallback으로 수정 * feat(debouncedTime): 상수화 * refactor(extractId): 재사용성을 위한 수정 * feat(extractUTCDate):UTC Date 추출 함수 유틸화 * refactor(travelPlan): days 타입 수정 * refactor: 불 필요한 css 제거 및 일관성을 위한 수정 * refactor: 명세 isChecked와 checked 불일치로 인한 수정 * refactor(TravelogueDetailPage): extractId 적용 * refactor: mutate 네이밍, 상수화, 유틸함수, Text 컴포넌트 적용 * refactor(SearchFallback): 가운데로 오도록 정렬 * refactor(SearchFallback): common으로 분리 * feat(MainPage): 태그 필터링 결과 없을 시 SearchFallback 보여주도록 구현 * refactor(MainPage): 태그 갯수 설정에 관한 설명 추가 * refactor(extractId): 네이밍 수정 * refactor: extractID 네이밍 수정 * refactor(extractId): extractLastPath 유틸화에 따른 분리 * fix(ModalBottomSheet): 에니메이션 되지 않는 문제 해결 * refactor(SearchFallback): ui 위치 수정 * refactor(TravelogueTabContent): negative margin-top 추가 * refactor(TravelPlanRegisterPage): 여행 계획 등록 subText 추가 * refactor(TravelogueDetailPage): 개행 추가 * refactor(TravelogueRegisterPage): mutate 네이밍 수정 * [Feature] - 플로팅 버튼에 여행 계획 작성 추가 (#368) * refactor(FloatingButton): 여행 계획 작성 추가 및 UI 수정 * refactor(FloatingButton): 작성 페이지 반대로 가게끔 되어있는 것 수정 * refactor(zIndex): 수정 * refactor(FloatingButton): subButtonContainer gap 및 padding 수정 * [Feature] - required 구현 (#361) * feat(Input) : label 속성 삭제 * feat(TextField) : TextField 컴포넌트 구현 * test(TextField): TextField 컴포넌트 storybook 추가 * feat(TravelogueRegisterPage): TextField 컴포넌트 적용 * feat(TravelPlanRegisterPage): TextField 컴포넌트 적용 * style(TextField): style 수정 * refactor(TextField): cloneElement 대신 renderProps를 쓰도록 수정 - cloneElement는 legacy라고 함 * style: isRequired 심볼 색상을 디자인 토큰에 추가 및 적용 * refactor(TextField): props 수정 * refactor(ThumbnailUpload): id 받도록 수정 - hiddenInput과 label을 정확하게 연결시켜주기 위함 * test(ThumbnailUpload): storybook에 변경된 props 적용 * test(TextField): storybook에 id 추가 * refactor(TravelogueResisterPage,TravelPlanRegisterPage): TextFiled props에 renderProp 형식으로 넘겨주도록 수정 * test(Header): Header 컴포넌트에서 IconButton을 사용하도록 리팩토링 * [Fix] - 4차 스프린트 QA 반영 1차 (시모) (#374) * fix(MainPage): 여행기 1개일 때 메인 페이지 스타일 깨지는 문제 수정 * fix(TransformBottomSheet): 화살표 이외에 클릭시도 닫치게 수정 * fix(TravelogueDetailPage): 내가 작성한 여행기의 경우 바텀시트 안보이도록 수정 * fix(MyTravelPlans): 여행 계획 20자 넘어가면 ... 보이도록 수정 * fix: 빈 값의 경우 []나 '' 값으로 보내도록 수정 * fix(travelPlanRegisterPage): 테스트 오류 해결 * fix(useInfiniteTravelogues): 네트워크 오류 처리하도록 isPaused 반환 * fix(MainPage): 네트워크 오류 및 서버 오류 시 alert 던지도록 수정 * [Fix] - 4차 스프린트 QA 반영 1차 (지니) (#375) * fix(useMultiImageUpload): 이미지가 있는 상태에서 다중 업로드 시 모두 업로드 되는 이슈 수정 * fix(AccordionTrigger): IconButton으로 교체 svg를 사용하고 있던 것을 IconButton으로 교체 * fix: 좋아요 크기 변경 * refactor(PlaceTodoListItem): input을 autofocus로 지정 * fix(MyPage): 닉네임 글자수 제한 추가 및 닉네임 등록 시 이전 닉네임이 보여지다 현재 닉네임으로 보여지는 문제 수정 * fix(ShareModal): 공유 버튼 간격 조정 * fix: 좋아요를 누르면 로그인 alert가 2번 뜨는 문제 해결 좋아요를 눌렀을 때 interceptor의 alert와 onError 콜백의 alert가 겹쳐 2번 alert 뜨는 문제 해결 * fix(MyPage): input이 20자 넘어가는 문제 해결 * refactor(MyPage): 닉네임 request query 함수 네이밍 개선 * refactor(ShareModal): spacing 적용 * fix: ci 문제 해결 * fix: ci 문제 해결 * fix: ci 문제 해결 * [Feature] - 프론트엔드 dev, prod 분리 작업 (#378) * chore(package.json): babel 설정을 위한 의존성 설치 * chore: babel 관련 config 설정 추가 * chore: webpack dev, prod 분리 * chore(.gitignore): .env.local 파일 추가 * chore(.storybook/main): importSource 내 @emotion/react 추가 * chore: ci script dev, prod 분리 * chore(webpack.production): 불필요한 변수 제거 * chore: ci 스크립트 수정 * chore: yarn.lock 수정 * fix: ci 문제 해결 * [Fix] - 4차 스프린트 QA 반영 1차 (리버) (#376) * feat(Input) : label 속성 삭제 * feat(TextField) : TextField 컴포넌트 구현 * test(TextField): TextField 컴포넌트 storybook 추가 * feat(TravelogueRegisterPage): TextField 컴포넌트 적용 * feat(TravelPlanRegisterPage): TextField 컴포넌트 적용 * style(TextField): style 수정 * fix(Header): $isRightContentFull 속성이름 isRightContentFull로 수정 * feat(SearchHeader): SearchHeader에 Home 아이콘 버튼 추가 * test(Header): Header 스토리북에 SearchHeader 수정사항 반영 * fix(PlaceDetailCard): 여행지 이미지가 없는 경우 FallbackImage를 보여주도록 수정 * test(PlaceDetailCard): PlaceDetailCard 스토리북에 등록한 여행지 사진이 없는 경우 추가 * fix(useInfiniteSearchTravelogues): 로그인 안해도 검색할 수 있도록 수정 * feat(TravelogueCard): TravelogueCard에서 제목이 20자보다 길어질 경우 (...)로 줄임 추가 * test(TravelogueCard): TravelogueCard 스토리북에 제목이 20자보다 길어지는 경우 추가 * fix(TravelogueResisterPage): 여행기 등록시 여행기 장소 사진 추가하지 않는 경우 payload에 빈 배열 보내기 추가 * chore(TravelogueResisterPage): 필요없는 주석 삭제 * feat: TextField 컴포넌트 적용 * [Feature] - 404 NotFound 페이지 구현 (#380) * feat:404 NotFound 페이지 구현 * chore(TravelPlanRegisterPage): 사용되지않는 import 구문 삭제 * fix(TravelogueEditPage,TravelPlanEditPage): label 삭제 * refactor(ThumbnailUpload): id props를 옵셔널로 수정 * fix(TravelPlanRegisterPage): import되어있지 않은 컴포넌트 import * refactor: 불필요한 것 제거 --------- Co-authored-by: 손진영 * [Fix] - 로딩, 에러 처리 및 메인페이지, 로그인 콜백 페이지 오류 수정 (#391) * fix(useMultiImageUpload): 이미지가 있는 상태에서 다중 업로드 시 모두 업로드 되는 이슈 수정 * fix(AccordionTrigger): IconButton으로 교체 svg를 사용하고 있던 것을 IconButton으로 교체 * fix: 좋아요 크기 변경 * refactor(PlaceTodoListItem): input을 autofocus로 지정 * fix(MyPage): 닉네임 글자수 제한 추가 및 닉네임 등록 시 이전 닉네임이 보여지다 현재 닉네임으로 보여지는 문제 수정 * fix(ShareModal): 공유 버튼 간격 조정 * fix: 좋아요를 누르면 로그인 alert가 2번 뜨는 문제 해결 좋아요를 눌렀을 때 interceptor의 alert와 onError 콜백의 alert가 겹쳐 2번 alert 뜨는 문제 해결 * fix(MainPage): 여행기 1개일 때 메인 페이지 스타일 깨지는 문제 수정 * fix(TransformBottomSheet): 화살표 이외에 클릭시도 닫치게 수정 * fix(TravelogueDetailPage): 내가 작성한 여행기의 경우 바텀시트 안보이도록 수정 * fix(MyTravelPlans): 여행 계획 20자 넘어가면 ... 보이도록 수정 * fix: 빈 값의 경우 []나 '' 값으로 보내도록 수정 * fix(MyPage): input이 20자 넘어가는 문제 해결 * fix(travelPlanRegisterPage): 테스트 오류 해결 * refactor(MyPage): 닉네임 request query 함수 네이밍 개선 * refactor(ShareModal): spacing 적용 * fix(useInfiniteTravelogues): 네트워크 오류 처리하도록 isPaused 반환 * fix(MainPage): 네트워크 오류 및 서버 오류 시 alert 던지도록 수정 * chore(gitignore): .ene.local 추가 * fix(LoginFallback): 줄바뀌는 문제 해결 * fix(MainPage): 휑 멘트 및 subTitle 메시지 너비에 따라 변하도록 수정 * refactor(LoginPage): text 컴포넌트 적용 및 스타일링 수정 * refactor(KakaoCallbackPage): usePostKakaoLogin 훅 분리 및 네트워크 에러 처리 * fix(useTravelogueDays): 전환시 PhotoUrls 빈값으로 인한 오류 해결 * refactor(TravelogueDeleteModal): isPending 시 spinner 보여주도록 수정 * refactor(TravelogueDetailPage): error 및 로딩 처리 * fix: 여행기 상세 페이지 에러 시에도 스켈레톤이 보여지도록 변경 --------- Co-authored-by: 손진영 * [Fix] - 여행 계획 수정, 마이페이지, 검색 페이지 에러 핸들링 (#393) * feat(useInfiniteMyTravelogues,MyTravelogues): 내 여행기 불러오기 네트워크 오류 처리 추가 * feat(useInfiniteMyTravelogues,MyTravelogues) : 프로필 정보를 잘 가져와야 내 여행기를 fetch하도록 구현, error 핸들링 추가 * feat(MyPage): 내 프로필 정보 가져오기 error 처리 추가 * feat(MyTravelPlans,useInfiniteMyTravelPlans): 내 프로필 정보를 잘 가져와야 여행계획 fetch하도록 수정 * feat(MyTravelPlan): 커밋 누락 추가 * feat(TravelPlanEditPage): 확인 버튼 클릭시 네트워크 오류면 alert창 뜨도록 수정 * feat: 검색 에러처리 (네트워크,서버오류) * feat: Query client retry 횟수 0으로 수정 * fix: 오타 수정 * [Fix] - 여행기 등록 & 수정, 여행 계획 등록, 여행 계획 상세 페이지 예외 및 로딩 처리 (#394) * fix: 여행기 등록 & 수정 페이지 로딩 및 예외 처리 * fix: 여행 계호기 상세 페이지 예외 처리 * fix: 여행 계획 등록 페이지 예외 처리 * [Fix] - 4차 스프린트 QA 반영 2차 (시모) (#400) * fix(FloatingButton): 여행 계획 작성 글자 잘리는 문제 해결 * fix(useTravelPlanDays): todos 빈 배열로 보내도록 수정 * refactor(Button): children 위치 유연하게 받도록 수정 * fix(modalBottomSheet): isPending 시 spinner 보여주도록 수정 * fix(debouncedTime): 디바운스 시간 10초로 수정 * fix(Button): justify-content 안 먹는 문제 해결 * [Fix] - 4차 스프린트 QA 반영 2차 (리버) (#401) * refactor(Box): Box 컴포넌트 props 수정 * feat(TravelPlansTabContent): 상세지도 보기 추가 * refactor(TravelogueCard): title을 Text 컴포넌트 사용으로 수정하여 텍스트 위 짤림 현상 수정 * fix(useInfiniteSearchTravelogues): api 올바르게 수정 * refactor(ThumbnailUpload): 이미지가 등록 중일 때 스피너가 나오도록 구현 * feat(TravelogueRegisterPage): 썸네일 업로드 후 보이는 삭제버튼 구현 * test(ThumbnailUpload): 로딩 중인 ThumbnailUpload storybook 추가 * feat(TravelogueRegisterPage): 썸네일 필수값으로 수정 * refactor(ThumbnailUpload): ThumbnailUpload에서 이미지가 change될때 isLoading 변하게 수정, border보이는 조건 수정 * fix: 썸네일 TextField 컴포넌트로 변경 * fix(ThumbnailUpload): 중복된 z-index 제거 * fix: 검색 결과 text가 이상하게 보이는 오류 해결 * fix: 썸네일 require 아닌 걸로 수정 --------- Co-authored-by: 손진영 * [Fix] - 4차 스프린트 QA 반영 2차 (지니) (#402) * fix: 구글맵 마커 클릭 하지 못하도록 변경 * fix: 마이페이지 alert 2번 뜨는 현상 개선 * fix: 여행 계획 변환 시 todos가 없을 경우 빈배열로 생성 * fix: 로그아웃 상태에서 좋아요 누를 때 alert 2번 뜨는 문제 해결 * fix: 여행 계획 date가 제대로 보이지 않는 문제 해결 * fix: 달 마지막 일을 시작일로 할 때 여행 계획 Day 아코디언 추가 시 다음 달로 넘어가지 않는 문제 해결 * fix(TravelPlanRegisterPage): subText 추가 * fix(MyPage): 닉네임 한글로 입력 시 21자로 입력되는 문제 해결 * fix: to do 입력 시 20자로 제한 하도록 변경 * fix: 존재하지 않는 여행 계획 시 메인 페이지로 이동하도록 변경 * fix: 여행기 수정 페이지 내 썸네일이 없을 경우 디폴트 이미지를 업로드 하도록 변경 * fix: ci 문제 해결 * fix: 여행 계획 상세 페이지 내 작성자 아닌 게시물 접근 시 alert가 2번 뜨는 현상 개선 (#404) * [Fix] - line height,shareModal 수정 (#407) * fix(shareModal): 잘못된 텍스트 수정 * style(typography): line-height 수정 * v1.0.1 * [Feature] - e2e 테스트 초기 설정 및 여행 계획 등록, 로그인, 메인 페이지 e2e 테스트 구현 (#412) * chore: cypress & eslint-plugin-cypress 의존성 설치 * chore: eslint-plugin-cypress 설정 추가 * chore: cypress 사전 세팅 추가 1. baseUrl 및 viewport 설정 추가 2. root tsconfig.json 내 exclude 옵션에 cypress 추가(__tests__ 내 테스트들 type 보장을 위해) 3. cypress 관련 declaration 설정 추가 4. cypress 내부 tsconfig.json 추가 5. e2e.ts 추가 * feat: 여행 계획 등록 테스트 코드 구현 * feat: 카카오 로그인 테스트 코드 구현 * feat: 메인 페이지 테스트 코드 구현 * refactor(travelPlanRegister): path alias 적용 * chore: ci e2e 테스트 추가 * fix: ci 스크립트 수정 ci 스크립트에서 e2e 테스트 제거(로컬 환경과 ci 환경에서의 테스트 차이로 인해 일단 보류) * [Feature] - 여행 계획 등록 페이지 리팩터링 (#414) * refactor: 여행 계획 등록 페이지 내 상태 정리 form, ui, server, authorization, router 상태에 맞게 정리 * chore: immer, use-immer 의존성 추가 * refactor(useTravelPlanDays): use-immer를 활용하여 코드 리팩터링 * refactor(useTravelPlanDays): travelPlanDays에 게으른 초기화 적용 * refactor(useTravelPlanDays): 장소 내 todo 추가 시 기존 todos에 추가만 하도록 변경 1. 여행 변환, 수정, 추가 모두 todos가 존재하기 때문에 todos 필드 여부를 확인하지 않아도 되어 다음과 같이 변경 * fix: 폰트 import path 수정 (#429) * [Feature] - kakao bundle lazy loading 적용 (#430) * refactor(index.html): 카카오 sdk script body 태그로 이동 * fix: kakao sdk defer 제외 defer 추가로 인해 카카오 로그인 버튼을 누를 시 에러가 발생하여 제거 * [Feature] - 데모데이 피드백 반영(지니) (#418) * refactor(GoogleMapView): 코드 리팩터링 * chore(package.json): test-e2e:run 스크립트 수정 chrome이 기본 브라우저로 테스트 되도록 수정 * test(travelPlanRegister): force click으로 변경 * fix(useTravelPlanDays): todo가 제대로 삭제되지 않는 문제 해결 * fix(Input): 모바일 화면에서 확대되는 현상 해결 Input font-size를 16px로 변경 * refactor(Calendar): 캘린더 ui에서 지난 날짜에 대한 별도 처리 추가 이전 or 다음 달에 대한 날짜를 제공하지 않고 오늘 기준 이전 날짜에 대해 gray text 처리 및 disable 처리 하도록 변경 * refactor(GoogleMapView): 불필요한 console 제거 * test(travelPlanRegister): 불필요한 only 제거 * [Feature] - webpack 캐시 버스팅 설정 (#447) * refactor(webpack): 캐시 버스팅 적용 빌드 할 때마다 번들 파일 이름을 변경 시켜 캐시 무효화 시키도록 변경 * refactor(webpack): chunkFilename 제거 * refactor(webpack): asset들에 대한 파일 경로 및 해시 값 설정 변경 1. assets 내 위치 시키도록 변경 2. hash를 contenthash로 지정하여 파일이 변경될 때만 hash 값이 변경되도록 지정 * [Feature] - 코드 스플리팅 설정 (#450) * chore: webpack-bundle-analyzer 의존성 추가 * refactor: 코드 스플리팅 적용 * refactor: 코드 스플리팅 필요한 부분만 적용하는 것으로 변경 스켈레톤이 없는 페이지인 검색 시작 페이지, 여행기 & 여행 계획 수정/등록 페이지만 적용하는 것으로 변경 * refactor: BundleAnalyzerPlugin 주석 추가 * [Feature] - 여행 계획 상세 페이지 성능 최적화 (#453) * refactor(GoogleMapLoadScript): LoadScript 사용 대신 useJsApiLoader로 변경 * refactor(index.html): google map에 대한 preconnect 및 dns-prefetch 옵션 관련 link 태그 추가 * refactor: 불필요한 빈문자열 제거 * [Feature] - Layout Shift 개선 (#454) * refactor(AccordionRoot): gap 값 수정 * refactor(TravelogueRegisterPage): layout shift 문제 해결 * refactor(TravelogueEditPage): layout shift 문제 해결 * refactor(TravelPlanRegisterPage): layout shift 문제 해결 * refactor(TravelPlanEditPage): layout shift 문제 해결 * refactor(Input): count 있는 경우 미리 공간 차지하도록 수정 * refactor(Input): input 내부에 있던 characterCount 분리 * test(Input): input 속성 변경에 따른 storybook 속성 수정 * [Feature] - 이미지 최적화 (#455) * feat(resizeAndConvertImage): 이미지 리사이즈,포맷 변환 해주는 util 함수 구현 * feat(TravelogueRegisterPage): 썸네일 이미지 업로드시 리사이즈 및 변환하도록 수정 * feat(useMultiImageUpload): 여행장소 이미지 업로드시 이미지 리사이즈 및 변환하도록 수정 * refactor(resizeAndConvertImage): 2 depth if문 개선 * refactor(resizeAndConvertImage): 함수 책임 분리 * v1.1.0 * [Feature] - 데모데이 피드백 반영(시모) (#434) * fix(FloatingButton): 플로팅 버튼 근처 클릭이벤트 발생하지 않는 문제 해결 * refactor(Chip): isSelected에 따라 textType 달라지는 코드 간결하게 수정 * fix(useSearchPlaceHistory): history api를 이용하여 장소 검색 이후 뒤로가기 클릭 시 페이지 이동하는 문제 해결 * refactor(useSearchPlaceHistory): early return 으로 수정 * refactor(MainPage): theme으로 수정 * refactor(useTagSelection): 훅에서 sortedTags 반환하도록 수정 * refactor(Chip): 재사용성을 높이기위한 수정 * fix(TravelPlanDeleteModal): padding에 따옴표 제거 * refactor(Modal): 재사용성을 높이기 위한 수정 * refactor(useBottomSheet): 초기값 변경하여 modal 일관성있게 사용하도록 수정 * refactor(Modal): 재사용성을 높여 bottomSheet도 사용할 수 있도록 수정 * refactor(DeleteModal): 추상화 * refactor(EditRegisterModalBottomSheet): 추상화 * refactor(ShareModal): Modal Props 변경에 따른 수정 * refactor(FloatingButton): backdropLayout으로 수정 * storybook(Modal): Modal 변경에 따른 수정 및 EditRegisterModalBottomSheet 스토리북 구현 * feat(SingleSelectionTagModalBottomSheet): 컴포넌트 구현 * storybook(Modal): SingleSelectionTagModalBottomSheet 스토리북 구현 * refactor(SingleSelectionTagModalBottom): 불 필요한 props 제거 * refactor(Modal): 닫칠 때도 에니메이션을 보여주도록 수정 * refactor(SingleSelectionTagModalBottomSheet): 버튼 라벨 수정 * refactor(useMultiSelectionTag): 네이밍 수정 * feat(useSingleSelectionTag): 훅 구현 * feat(MainPage): 정렬 및 여행기간 필터링 UI 및 기능 구현 * fix(Chip): tag 선택시 에니메이션을 추가하여 버그 같아 보이는 문제 해결 * refactor(createInfiniteTravelogueHandler): 인자 변경에 따른 수정 * chore: yarn install * refactor(TravelogueRegisterPage): 태그 에니메이션 추가 * refactor(useInfiniteTravelogues): filter param 네이밍 수정 * refactor(TravelogueEditPage): 태그 에니메이션 추가 * refactor: 태그 컨테이너 layoutShift 해결 * refactor(TransformBottomSheet): UI 수정 및 내용 bottom sheet에 의해 가려지는 문제 해결 * refactor(MainPage): 상단 필터링 부분 레이아웃 고정 * refactor(DeleteModal): 반복되는 텍스트 부분 추상화 * refactor(Chip): 가독성을 위한 수정 * refactor(TransformFooter): bottom sheet 에서 네이밍 수정 * refactor(Modal): 추상화한 모달들 모달 내부로 오도록 파일 구조 수정 * refactor(Modal): props 네이밍 수정 * refactor(Modal): 중복된 속성 제거 * refactor(useInfiniteTravelogues): param에 sort 추가 * refactor(MainPage): 상수 분리 * refactor(useInfiniteTravelogues): 인자를 객체로 받도록 수정 * feat(storage): sort, filtering local storage에 저장해서 페이지 이동시에도 기억하도록 수정 * [Feature] - 데모데이 피드백 반영(리버) (#444) * feat(PlaceDetailCard): 여행기 사진 없을 경우 noImage이 아닌 아무것도 안나오도록 수정 * test(PlaceDetailCard): 이미지 없는 경우 테스트의 args 수정 * feat(getDaysAndNights): 여행일자 텍스트 생성 util 함수 구현 * refactor(TravelogueDetailPage,TravelPlanDetailPage): 여행 일자 계산 util 함수 사용 * feat(useInitialTripTitle): 여행기,여행계획 제목 초기값 생성 커스텀 훅 구현 * feat(TravelogueRegisterPage,useTravelPlanForm): 여행기,여행계획 변환시 제목 default값 제공 * feat(usePreviousPage): 뒤로가기를 관리하는 훅 구현 - 그 전페이지가 my 페이지이고 현재 페이지가 login 페이지면 뒤로 가기 누를시 메인 페이지로 이동하도록 구현 * chore(useInitialTripTitle): Trip을 Travel로 수정 * feat(TravelogueRegisterPage): 제목 input에 placeholder 추가 * fix(useInitialTravelTitle): 전환시에만 default title을 반환하도록 수정 * fix(interceptor): 리다이렉트 중이 아닐 때 alert,리다리렉트하도록 수정 - 인가 인증이 필요한 페이지에서 로그아웃 후 다시 인가 인증이 필요한 페이지로 이동시 로그인 하라는 alert창이 2번 뜨는 이슈가 있었는데, 리다이렉트 중에는 alert 및 리다이렉트를 하지 않도록 하여 수정함 * feat(queryKey): search 쿼리키에 searchType 추가 * feat(useInfiniteSearchTravelogue): 여행기 검색 param에 searchType 추가 * style(Tab): 텍스트 세로 가운데 정렬 및 theme 사용 리팩토링 * refactor(TravelogueList): 검색 결과 부분을 컴포넌트로 분리 * feat(SearchPage): 검색 타입 Tab 추가 * feat(getInitialTravelTitle): 제목 초기값에서 사용자 닉네임 삭제 - 사용자 닉네임을 삭제하면서 훅이 아니게되어 함수이름을 useInitialTravelTitle에서 getInitialTravelTitle로 수정하고 util 폴더로 이동 시켰습니다. * refactor(usePreviousPage): type에서 interface로 수정 * refactor(usePreviousPage): 필요없는 state 삭제 및 그 전 페이지만 저장하도록 수정 - 그전 페이지만 알면되므로 객체로 저장할 필요가 없고, 그전 페이지를 state로 관리할 필요가 없기에 수정했습니다. * fix(MainPage): 테그 필터링 스크롤 되지 않는 문제 해결 (#460) * [Fix] - 검색 페이지 탭바 width 수정, 여행기 수정페이지에서 이미지 최적화 안됨 (#462) * fix(SearchPage): 검색 페이지 탭바 width 수정 * fix(TravelogueEditPage): 여행기 수정페이지에서 썸네일 업로드 최적화 추가 * fix: 검색 페이지는 코드 스플리팅을 하지 않는 것으로 변경 (#465) * fix(NotFound): NotFound 버튼 텍스트 수정 (#473) 이전 페이지로로 돌아가기를 이전 페이지로 돌아가기로 수정 * [Fix] - tag filter 및 sort localStorage key 값이 공유되는 현상 해결 및 태그 변경시 최상단으로 이동하도록 수정 (#474) * fix(MainPage): 테그 필터링 스크롤 되지 않는 문제 해결 * fix(MainPage): sort, filtering storageKey 공유되는 문제 해결 및 태그 변경시 제일 처음 컨텐트 보이도록 수정 * refactor(useMultiSelection): 코드상 어색한 부분 수정 * [Fix] - 상세보기에서 좋아요 누를 때마다 지도 움직이는 문제 & 사용자가 지도를 확대하지 못하는 문제 해결 (#478) * fix(GoogleMapView): 상세보기에서 좋아요 누를 때마다 지도 움직이는 문제 & 사용자가 지도를 확대하지 못하는 문제 해결 onBoundsChanged callback 사용하는 대신 useEffect를 통해 places가 변경될 때 마다 zoom level를 변경하는 방향으로 변경 * refactor: 여행 장소가 하나일 때 zoom level 조정 zoom level을 9로 변경 * [Fix] - 5차 스프린트 QA 반영 1차 (리버) (#479) * fix(SearchPage): 탭바가 헤더 가리는 문제 수정 * fix: 좋아요 순,최신 순 맞춤법 수정 * fix(Header): 검색창 placeholder 수정 * [Fix] - 5차 스프린트 QA 반영 1차 (시모) (#485) * fix(MainPage): 테그 필터링 스크롤 되지 않는 문제 해결 * fix(MainPage): sort, filtering storageKey 공유되는 문제 해결 및 태그 변경시 제일 처음 컨텐트 보이도록 수정 * refactor(useMultiSelection): 코드상 어색한 부분 수정 * fix: 전체를 무효화함으로 인해 api요청 여러번 나가는 것 수정 * v1.2.0 * [Refactor] - API 요청 및 응답 명세 통일 (#508) * refactor: edit 응답 명세 변경에 따른 수정 * refactor: 등록 페이지 응답 명세 변경에 따른 수정 * refactor: checked 명세서 변경에 따라 isChecked로 수정 * refactor: useLocation 대신 useParams 사용하도록 수정 * refactor(TravelPlanTodoItem): as 수정 * [Feature] - Immer을 사용한 코드 구조 개선 (#495) * refactor(useTravelogueDays): immer을 활용한 로직 구조 개선 * refactor(useTravelPlanDays): transformTravelPlanDays 리팩터링 * refactor(travelTransform): 여행기 변환 타입 수정(TravelTransformDays) * refactor: query 내 중첩 객체 구조 Immer로 개선 * fix(GoogleMapLoadScript): 구글맵을 한국어로 받아오도록 수정 (#488) * [Feature] - 여행 계획 & 여행기 상세 페이지로 이동 시 scroll 최상단으로 이동 되도록 변경 (#511) * refactor(TravelogueDetailPage): 여행기 상세 페이지 이동 시 최상단으로 스크롤 되도록 변경 * refactor(TravelPlanDetailPage): 여행 계획 상세 페이지 이동 시 최상단으로 스크롤 되도록 변경 * [Feature] - 여행기 & 여행 계획 등록/수정 페이지 리팩터링 (#520) * refactor(useTravelogueDays): 여행기 등록 페이지 default export로 변경 * refactor(useTravelogueForm): 여행기 form에 대한 책임을 useTravelogueForm으로 분리 1. 여행기 제목에 대한 책임을 useTravelogueTitle로 분리 2. 여행기 썸네일에 대한 책임을 useTravelogueThumbnail로 분리 3. 여행기 등록에 대한 책임을 useTravelogueRegister로 분리 4. useTravelogueForm 추가 * refactor(useMultiImageUpload): 다중 이미지 업로드 로직에 대한 리팩터링 1. TravelogueDayAccordion과 TravelogueMultiImageUpload 내 isPaused 및 onRequestAddImage 제거 2. useImageUpload 내 props 형태 변경 및 usePostUploadImages hook을 내부에 추가 * refactor(TravelogueRegisterPage): 페이지 리팩터링 form에 대한 책임을 useTravelogueForm에 위임하여 비즈니스 로직을 컴포넌트 내 제거 * refactor(ThumbnailUpload): fileRef와 click 핸들러를 내부에서 관리하는 것으로 변경 * refactor: 인증된 사용자가 아닌 경우 redirect 시키는 hook 분리 1. useAuthRedirect hook 분리 2. 해당 hook을 여행기 & 여행 계획 등록 페이지 내 적용 * refactor: useToggle 훅을 통해 open, close 하도록 변경 1. open, close에 대한 useToggle hook 추가 2. 해당 hook을 여행기 & 여행 계획 등록 페이지 내 적용 * refactor(travelTransform): TravelTransformPlace의 타입을 유틸리티 타입으로 개선 * refactor(TravelogueRegisterPage): useTravelogueForm 형태 변경 1. useTravelogueForm 내 submit 하는 로직 제거(수정 페이지에서도 재사용하기 위해) 2. useTravelogueFormState로 네이밍 변경 3. TravelogueRegisterPage 내 useTravelogueRegister 위치 시키도록 변경 * refactor(TravelogueEditPage): 여행기 수정 페이지 리팩터링 1. useTravelogueFormState 재 사용 2. useTravelogueEdit 훅 분리(여행기 수정 요청) 3. travelogue 데이터 초기화에 대한 hook 추가(useTravelogueInitialization) 4. 작성자 여부 확인 hook 분리(useAuthorCheck) 5. useTravelogueTitle 내 onChangeTitle 매개변수 수정 6. 썸네일 hook 내 썸네일 초기화 시키는 핸들러 추가 * refactor(TravelPlanRegisterPage): 여행 계획 등록에 대한 책임 분리 1. useTravelPlanRegister 훅 따로 분리 2. TravelPlanRegisterPage에 반영 * refactor(TravelPlanRegisterPage): 여행 계획 수정 페이지 리팩터링 1. 여행 계획 수정에 대한 책임 분리(useTravelPlanEdit) 2. 여행 계획 초기화 hook 분리 3. useTravelPlanFormState로 네이밍 변경 4. startDate와 title에 대한 책임을 각각 분리 * refactor: useTravelPlanFormState, useTravelogueFormState 폴더구조 변경 * fix(useTravelogueFormState): ci 문제 해결 * refactor: on prefix를 handle prefix로 변경 컴포넌트 props 이외 핸들러는 handle prefix를 따라야하므로 다음과 같이 변경 * refactor(ThumbnailUpload): 불필요한 제네릭 제거 * refactor(travelTransform): import 시 type 추가 * refactor(ThumbnailUpload): 불필요한 props 개행 제거 * [Feature] - 프로필 이미지 수정 기능 및 여행기 등록 시 여행 장소마다 국가 코드 주도록 구현 (#535) * refactor(Drawer): 기존 헤드와 높이 달라 선 위치가 다른 문제 개선 * feat: 장소 필터링을 위하여 장소 등록시 countryCode를 보내도록 기능 구현 * refactor(AvatarCircle): props $네이밍 수정 * refactor(MyTravelogue):$ 제거에 따른 수정 * refactor(usePostUploadImages): resize 와 convert 처리 내부에서 하도록 수정 * refactor(MainPage): div semantic 태그인 button으로 수정 * feat(ProfileImageEditModalBottomSheet): 기능 구현 * feat(usePutProfile): api 명세 변경에 따라 patch를 put으로, imageUrl body 값에 부여 * refactor(AvatarCircle): props 유연하게 수정 * feat(useMyPage): 훅 구현 * feat(MyPage): 프로필 이미지 수정 기능 구현 * refactor(MyPage): 기능 단위로 pr 분리하기 위한 수정 * refactor(SearchPage): 기능 단위로 pr 분리하기 위한 수정 * refactor(useMyPage): useToggle 사용하도록 수정 * refactor(common): 반복되는 타입PlaceInfo 타입으로 선언 및 수정 * refactor(constants): 상수들 파일로 분리 * refactor(useMyPage): 책임에 따라 각각 커스텀 훅으로 분리 * refactor(constants): 상수 파일로 분리 * refactor(usePostUploadImages): max width, height 값 받을 수 있도록 수정 * refactor(usePostUploadImages): max width, height 값 받을 수 있도록 수정 * refactor(useProfileInitialization): 의존성 배열 추가 * refactor: useCallback으로 update 함수 감싸주도록 수정 * [Fix] - 6차 피드백 반영(시모) (#545) * refactor(MyPage): 이모지 추가로 여행 계획, 여행기 구분 명확히 되도록 수정 * refactor(Detail): 전환이라는 용어 낯설다는 피드백 반영 * refactor(Chip): icon 컴포넌트 포함하도록 추상화 * feat(useMultiSelectionTag): animationKey 네이밍 수정 및 reset 기능 구현 * feat(useSingleSelectionTag): animationKey 및 리셋 기능 구현 * feat(MainPage): reset Button 기능 구현 * feat(assets): 리셋 버튼, 정렬 버튼 아이콘 추가 * refactor: 초기화 시 localStorage도 초기화 하도록 수정 * refactor(useTravelogueFormState): animation key 네이밍 변경에 따른 수정 * refactor: 전환 용어 변경 * refactor: 이모지 삭제 * refactor(svg-icons): 데이터 변경 * refactor(MainPage): 의존성 문제 해결 * refactor(MyPage): 프로필 이미지 수정 모달 텍스트 수정 * [Feature] - 메인 페이지, 로그인 페이지 웹 접근성 개선 (#529) * refactor(Header): 헤더에 사용된 IconButton들에 aria-label 추가 * refactor(Drawer): button 태그 중첩 사용 수정 * chore(MainPage): 필요 없는 공백,태그 삭제 * refactor(AvatarCircle): props 수정 * refactor(TravelogueCard): 웹 접근성 개선 - 장식 이미지에 alt 빈 값 추가 - 카드 컴포넌트 태그를 button 태그로 수정 - aria-label 추가 * refactor(Chip): as props 추가 * style(FallbackImage): color contrast 개선 * refactor(MainPage): Chip을 button으로 사용하도록 수정 * refactor(FloatingButton): 플로팅 버튼 title 추가 * feat(FocusTrap): 키보드 트랩 hook 구현 Co-Authored-By: jinyoung <87177577+jinyoung234@users.noreply.github.com> * refactor(Modal): createPortal 위치를 #root에서 body로 변경 * refactor(FocusTrap): onEscapeFocusTrap을 옵셔널로 수정 * feat(Header): 키보드 트랩 적용 * refactor(Header): 시맨틱 태그 수정 * feat(Drawer): esc로 닫기 추가 및 열려있을 경우에만 DrawerContainer렌더링하도록 수정 - DrawerContainer를 처음부터 렌더링되어있으면 이때부터 이미 focusTrap도 같이 렌더링되어 Drawer가 열려있지 않아도 focus trap이 Drawer content 내부에 갇히는 이슈가 있었기 때문입니다. * feat(FocusTrap): 첫번째 요소에 자동 포커스 삭제 * feat(Modal): 모달에 FocusTrap 적용 * feat(MainPage): 시맨틱 태그 개선 * feat(MainPage): 모달 열림 닫힘 알림 추가 * feat(removeEmojis): 이모지를 지우고 string만 반환하는 유틸 함수 추가 * refactor(TravelogueCard): removeEmojis 유틸 함수 사용 * refactor(FloatingButton): 플로팅 버튼에 focus trap 사용 * style(FloatingButton): visual hidden 스타일 추가 * feat(VisuallyHidden): Visually hidden 컴포넌트 추가 - 웹 접근성 개선에서 사용할 수 있는 보이지 않는 컴포넌트 추가했습니다. * feat(MainPage): 태그 선택,해제시 알림 추가 * feat(MainPage): TravelogueCard 리스트 시맨틱 태그 개선 * fix(TravelogueCard): aria-live 속성 삭제 - 필터,정렬딜 때 마다 렌더링되어있는 모든 카드 aria-label이 읽히는 이슈가 있어서 삭제했습니다. * feat(MainPage): 모달 열/닫힘 알림에 VisuallyHidden 컴포넌트 사용 * refactor(Drawer): Trigger 시맨틱 태그 및 props 수정 - button 태그를 사용하고 onClick props를 받아서 button 내부에 button을 받지 않도록 하기 위함입니다. * refactor(Header): 시맨틱 태그 수정 및 button 개선 - 수정된 Drawer.Trigger에 맞춰 수정했습니다. * feat(MainPage): 여행기 로드시 새로 로드된 여행기에 focus되기 구현 * feat(MainPage): fetchButton으로 로드시 알림 및 태그 선택시 알람 추가 - fetchButton으로 여행기 로드시 알림 울리도록 구현 - 태그 선택 알림 구현 코드 일부분이 다른 부분에 딸려 들어간것같습니다.. * feat(Drawer): 사용자 메뉴 모달 열/닫힘 안내 추가 * fix(TravelogueCard): 여행기 제목 읽을 시 이모지 삭제 * refactor(FloatingButton): VisuallyHidden 컴포넌트 사용으로 수정 * refactor(FloatingButton): 상수 분리 * refactor(Chip): 화살표 함수로 수정 및 논리 연산자 수정 * refactor(removeEmojis): 함수 책임 간소화 * chore(FocusTrap): 불필요한 주석 삭제 * refactor(FocusTrap): 사용되지 않는 값들 삭제 * refactor(SearchHeader): 불필요한 option 삭제 * refactor(Drawer): usePressESC 훅 사용 * refactor(Drawer): styled component로 수정 * refactor(FloatingButton): 클로저 삭제 * chore(Header): 사용하지 않는 styled component 삭제 * styled(MainPage): theme 사용 * refactor(FloatingButton): 알림 텍스트 수정 * refactor(LoginPage): 상수 파일 분리 * feat(LoginPage): 로그인 페이지 접속시 로그인 버튼에 focus되어있기 구현 * feat(useKeyDown): 키보드로 요소 선택 및 이동 훅 구현 * feat(SingleSelectionTagModalBottomShee): 바텀 시트 모달에 keyDown 훅 추가 * feat(MainPage): 태그 선택부분에 keyDown 훅 추가 * refactor(Drawer): interface 타입 개선 * fix: 모달, 플로팅 버튼이라는 단어 대신 메뉴라는 단어로 수정 * fix(MainPage): 병합 잘못된것 수정 * chore: 파일명 컨벤션 수정 * refactor(MainPage): 적절한 변수명으로 수정 * fix(handlers): 주석 처리 삭제 * feat(useToggle): toggle 함수 추가 * refactor(Drawer,FloatingButton): useToggle 사용 --------- Co-authored-by: jinyoung <87177577+jinyoung234@users.noreply.github.com> * [Feature] - 마이페이지 좋아요 탭 및 검색 창 국가 탭 기능 구현 (#556) * refactor(MyPage): 프로필 이미지 수정 모달 text 변경 * feat(TravelogueList): 여행기 검색 나라 탭 추가 * refactor(Tab): 스타일링 수정 * refactor(MyTravelogue): 불필요한 스타일 제거 및 일관성을 위하여 게시일 텍스트 제거 * feat(useInfiniteMyLikes): 훅 기능 구현 * feat(MyLikes): 좋아요 탭 UI 구현 * refactor: 좋아요 버튼 클릭시 마이페이지 좋아요 무효화 하도록 수정 * refactor(MyLikes): 마이페이지텝 컴포넌트 좋아요 탭에서도 재사용하도록 수정 * [Fix] - 여행기 & 여행 계획 등록 과정에서 클라이언트 내에서 유효성 검사를 하도록 변경 (#537) * feat(useTravelogueThumbnail): 썸네일 이미지에 대한 클라이언트 예외 처리 추가 * feat(useTravelogueTitle): 제목에 대한 유효성 처리 추가 1. validateTitle 추가 2. handleChangeTitle 내 유효성 검사 추가 3. isEnabledTravelogueTitle 변수 추가 4. useTravelogueFormState 내 isEnabledForm 추가 5. CharacterCount 내 css prop 뚫는 부분 추가 6. 등록 페이지 내 에러 텍스트 추가 및 disable 처리 * feat(useTravelogueDays): 날짜 정보에 대한 유효성 처리 추가 1. validate/travelogue 내 day와 place에 대한 검증 로직 추가 2. useTravelogueDays 내 검증 후 에러 메시지 state update 하도록 로직 변경 3. isEnabledTravelogueDays를 통해 날짜 및 장소에 대해 활성화 된 상태인지 확인 4. TravelogueRegisterPage 내 day 및 place에 대한 에러 메시지 추가 * feat(TravelogueEditPage): 여행기 수정 페이지 내 유효성 검증 처리 추가 * feat(useTravelPlanTitle): 여행 계획 제목에 대한 유효성 검증 추가 * feat(useTravelogueStartDate): 시작 날짜에 대한 유효성 검증 추가 * feat(useTravelPlanDays): 날짜 정보에 대한 유효성 검증 추가 * feat(TravelPlanEditPage): 여행기 수정 페이지 유효성 검증 구현 * refactor: 불필요한 console 제거 * refactor(errorMessage): 불필요한 주석 제거 * refactor(errorMessages): 변수 네이밍 변경 * refactor: 불필요한 파일 제거 * refactor(validation/travelPlan): import 내 type 추가 * refactor: 중복되는 상수 분리 * refactor(validation/travelogue): import type 추가 * [Feature] - 랜딩 페이지 구현 (#539) * feat(Text): isInline props 추가 * feat(webp): 랜딩 페이지에 사용되는 이미지들 추가 * feat(router): 랜딩 페이지 route 추가 * feat(Animation): Animation style 추가 * feat(useAnimationObserver): 애니메이션을 위한 Observer 훅 구현 * feat(FirstPage): 랜딩 페이지의 첫번째 페이지 구현 * feat(SecondPage): 랜딩 페이지의 두번째 페이지 구현 * feat(ThirdPage): 랜딩 페이지의 세번째 페이지 구현 * feat(Box): 랜딩 페이지 내에서 사용되는 Box 컴포넌트 구현 * feat(FourthPage): 랜딩 페이지의 네번째 페이지 추가 * feat(LandingPage): 랜딩 페이지에 페이지들 추가 * refactor(useScrollAnimation): hook으로 분리 * fix(SecondPage): 띄어쓰기 없어지는 이슈 수정 * chore(useAnimationObserver): 필요없는 console.log 삭제 * fix(SecondPage): 글자 개행 깨지는 이슈 수정 * fix(FourthPage): 말풍선 속 글씨 깨짐 수정 * style(Text): 조건문 css 값 수정 * fix: 라우터가 달라짐에따라 수정 * [Feature] - 여행기 및 여행 계획 상세페이지 접근성 개선 (#566) * refactor(Tab): tab 포커스 받도록 수정 * fix: modal 포커스 트랩으로 인하여 탭 되지않는 문제 해결 * fix(MyPage): listStyle 먹지 않는 문제 해결 * refactor(Carousel): 불 필요한 style 제거 * refactor(Carousel): 웹 접근성 개선 * fix(Dropdown): z-index 부재로 태그에 의해 드롭다운 가려지는 현상 해결 * refactor(Tab): 탭 접근성 개선 * refactor(TravelogueDetailPage): 접근성 개선 * fix: useEffect 내 handler 무한 호출되는 문제 해결 * refactor(Thumbnail): alt 추가 * refactor(TravelogueTabContent): iconButton icon으로 수정 * refactor(Carousel): ul li 태그의 명확성을 위한 수정 * refactor(DeleteModal): 삭제 모달 열고 닫칠 때 접근성 개선 * refactor(TravelPlansTabContent): 지도 상세보기 버튼 링크로 수정 * refactor(Checkbox): 접근성 개선 * refactor(TravelPlanDetailPage): 접근성 개선 * refactor: 오타 수정 및 용어 통일 * refactor: dropdown에 usePressESC 추가 * refactor(useTravelPlanStartDate): 개행 추가 * [Feature] - 여행 계획 등록 페이지 접근성 개선 (#554) * feat(TextField): 필수 항목이면 '필수 항목입니다'를 접근성 리더기가 읽어주는 기능 구현 * feat(TravelPlanRegisterPage): input을 enter 했을 때 캘린더가 열리는 것 구현 * feat(TravelPlanRegisterPage): 캘린더가 열리고 닫힐 때 안내 메시지 추가 1. Calendar 내 esc를 눌렀을 때 닫히도록 변경 2. visual hidden 텍스트 추가 * feat(Calendar): 캘린더 이전, 이후 버튼 눌렀을 때 안내메시지 추가 1. 현재 년, 월에 대한 텍스트를 스크린 리더기가 읽도록 변경 2. 이전 버튼, 다음 버튼에 대한 설명 추가 3. Visual hidden 텍스트를 통해 이전 달로 이동할 수 없는 경우에 대한 안내 메시지 추가 * feat(Calendar): 캘린더 내 각 일을 선택 가능하도록 접근성 개선 * feat(AccordionTrigger): 아코디언 버튼을 눌렀을 때 열림, 닫힘 상태 메시지 제공 * feat(GoogleSearchPopup): 팝업이 열렸을 때 input이 포커스 간 후 접근성 메시지를 읽는 것 구현 * fix(GoogleSearchPopup): 자동완성 장소 항목을 엔터 했을 경우 런타임 에러 발생하는 부분 해결 * refactor(GoogleSearchPopup): 팝업 열렸을 때 다른 요소들이 스크린 리더기가 접근하지 못하도록 개선 * refactor(AccordionTrigger): 아코디언 버튼 aria-label 추가 * feat(PlaceTodoListItem): todo 삭제 버튼 aria-label 추가 * feat: 등록 바텀 시트 등장할 때 focus trap 적용 * fix: 전체 화면 탭이 적용되지 않는 문제 해결 EditRegisterModalBottomSheet 내 isOpen 시 렌더링 되도록 변경 * fix: ci 문제 해결 * fix(router): lazy loading 제거 (#558) * fix: 토큰 만료시 토큰 재발급을 하지 않는 이슈 해결 (#560) 백엔드 내 던지는 예외 메시지가 2개인 이유로, 다른 예외 메시지 검증 로직 추가 * [Feature] - 검색 결과 페이지 내 필터링 옵션 적용 (#565) * refactor(useInfiniteSearchTravelogues): api 명세 통합으로 인한 변경 useInfiniteTravelogues 내에서 검색 조건 까지 모두 처리하는 것으로 변경 * feat(TravelogueList): 여행기 검색 결과 내 필터링 ui 추가 * refactor: travelogues가 0개인 경우에도 FixedLayout으로 감싸는 것으로 변경 * fix(TravelogueList): 메인 페이지에 추가한 태그들이 검색 결과 페이지에서도 보이는 문제 해결 * [Fix] - 메인페이지 modal css 깨짐 및 modal, drawer 애니메이션 적용 안되던 이슈 수정 (#567) * style(SingleSelectionTagModalBottomSheet): 바텀 시트 css 깨지던것 수정 * feat(useUnmountAnimation): 컴포넌트 언마운트시 애니메이션 재생되는 훅 구현 * feat(MainPage): 정렬,필터 모달에 useUnmountAnimation 훅 사용 * feat(Drawer): Drawer에 useUnmountAnimation 훅 사용 * refactor(useUnmountAnimation): shouldRender를 isRendered로 수정 * fix: 프로필 사진 수정, 여행기 및 여행계획 수정 bottomSheet에 useUnmountAnimation 훅 사용 * fix(EditRegisterModalBottomSheet): 애니메이션 실종 이슈 수정 * style(FloatingButton): animation 추가 및 useUnmountAnimation 훅 사용 * style(Icon): 세로 가운데 정렬을 위한 wrapper 추가 * feat(animation): animation 토큰 추가 * refactor: Drawer,FloatingButton에서 animation 토큰 사용 * chore: 필요없는 주석 삭제 * fix(route): 앞에 / 추가 * fix(Drawer): overlay 위치 수정 - 페이지 이동할 때 마다 ovelay가 보였다가 안보이는 이슈가 있어서 수정 * [Fix] - 6차 데모데이 1차 QA(지니) (#580) * fix(SearchPage): 여행기를 들어갈 때 탭이 클릭되지 않는 이슈 해결 * refactor(MyTravelPlans): 여행기 전환 텍스트 수정 * fix(TextArea): font size로 인해 확대되는 문제 수정 * [Fix] - 6차 데모데이 1차 QA(시모) (#578) * fix(Checkbox): 체크 표시 보이지 않는 문제 해결 * fix(MyLikes): 여행기 보러가기 클릭시 루트 페이지로 이동하는 문제 해결 * refactor: 태그 마우스 벗어났는데도 스크롤 되는 문제 해결 * fix(Chip): 검색 페이지 갔다가 홈으로 돌아오면 에니메이션 정상적으로 작동하지 않는 문제 해결 * [Fix] - 6차 데모데이 1차 QA(리버) (#581) * style(Icon): 가운데 정렬 추가 * style(FourthPage): 제목 줄바꿈 방지 설정 추가 * feat(LandingPage): TopButton 추가 --------- Co-authored-by: 손진영 * [Fix] - 랜딩 페이지 페이지 잘리는 문제 및 todo 세로 배열이 맞지 않는 문제 (#583) * fix(FirstPage): 주소창에 가려지는 문제 해결 * fix(TravelPlanTodoItem): 투투 텍스트 정렬 다른 문제 해결 * [Fix] - 랜딩페이지 화살표 위치 문제 해결 및 두번째 페이지 에니메이션 문제 해결 (#585) * fix(FirstPage): 주소창에 가려지는 문제 해결 * fix(TravelPlanTodoItem): 투투 텍스트 정렬 다른 문제 해결 * refactor(LandingPage): 화살표 위치 조정 및 두번째 페이지 에니메이션 제거 --------- Co-authored-by: simorimi <141118352+simorimi@users.noreply.github.com> Co-authored-by: choi river <130737187+0jenn0@users.noreply.github.com> Co-authored-by: choi river <0jenn0@users.noreply.github.com> Co-authored-by: simorimi Co-authored-by: simhorim Co-authored-by: eunjungL <62099953+eunjungL@users.noreply.github.com> --- .../landing/FirstPage/FirstPage.styled.ts | 20 ++++++++++++++++++- .../pages/landing/FirstPage/FirstPage.tsx | 5 ++++- .../pages/landing/LandingPage.styled.ts | 8 -------- .../components/pages/landing/LandingPage.tsx | 7 +------ .../landing/SecondPage/SecondPage.styled.ts | 20 +------------------ .../pages/landing/SecondPage/SecondPage.tsx | 5 +---- 6 files changed, 26 insertions(+), 39 deletions(-) diff --git a/frontend/src/components/pages/landing/FirstPage/FirstPage.styled.ts b/frontend/src/components/pages/landing/FirstPage/FirstPage.styled.ts index 6adbef6c..cc4db9b7 100644 --- a/frontend/src/components/pages/landing/FirstPage/FirstPage.styled.ts +++ b/frontend/src/components/pages/landing/FirstPage/FirstPage.styled.ts @@ -1,4 +1,4 @@ -import { css } from "@emotion/react"; +import { css, keyframes } from "@emotion/react"; import styled from "@emotion/styled"; import theme from "@styles/theme"; @@ -61,3 +61,21 @@ export const Gradient = styled.div` height: 20rem; background: linear-gradient(to bottom, rgb(255 255 255 / 0%) 0%, rgb(255 255 255 / 50%) 100%); `; + +const float = keyframes` + 0% { transform: translateY(0px); } + 50% { transform: translateY(-1rem); } + 100% { transform: translateY(0px); } +`; + +export const iconStyle = css` + position: absolute; + bottom: 0; + z-index: ${theme.zIndex.toast}; + padding: ${theme.spacing.m}; + opacity: 0.5; + + background-color: transparent; + + animation: ${float} 1s ease-in-out infinite; +`; diff --git a/frontend/src/components/pages/landing/FirstPage/FirstPage.tsx b/frontend/src/components/pages/landing/FirstPage/FirstPage.tsx index 231b1dc8..692b9d97 100644 --- a/frontend/src/components/pages/landing/FirstPage/FirstPage.tsx +++ b/frontend/src/components/pages/landing/FirstPage/FirstPage.tsx @@ -1,9 +1,11 @@ import { useNavigate } from "react-router-dom"; -import { Button, Text } from "@components/common"; +import { Button, Icon, Text } from "@components/common"; import { ROUTE_PATHS_MAP } from "@constants/route"; +import { PRIMITIVE_COLORS } from "@styles/tokens"; + import { BigTturi } from "@assets/webp"; import { createAnimation } from "../Animation.styled"; @@ -47,6 +49,7 @@ const FirstPage = () => { + ); }; diff --git a/frontend/src/components/pages/landing/LandingPage.styled.ts b/frontend/src/components/pages/landing/LandingPage.styled.ts index e5674a46..dc7694f7 100644 --- a/frontend/src/components/pages/landing/LandingPage.styled.ts +++ b/frontend/src/components/pages/landing/LandingPage.styled.ts @@ -19,11 +19,3 @@ export const firstPageStyle = css` top: 0; z-index: 1; `; - -export const secondPageStyle = css` - position: absolute; - top: 100vh; - z-index: 2; - width: 100%; - transition: transform 0.1s ease-out; -`; diff --git a/frontend/src/components/pages/landing/LandingPage.tsx b/frontend/src/components/pages/landing/LandingPage.tsx index ffad61ec..ff6932ae 100644 --- a/frontend/src/components/pages/landing/LandingPage.tsx +++ b/frontend/src/components/pages/landing/LandingPage.tsx @@ -5,20 +5,15 @@ import FourthPage from "./FourthPage/FourthPage"; import * as S from "./LandingPage.styled"; import SecondPage from "./SecondPage/SecondPage"; import ThirdPage from "./ThirdPage/ThirdPage"; -import useScrollAnimation from "./hook/useScrollAnimation"; const LandingPage = () => { - const [secondPageRef] = useScrollAnimation(); - return (
-
- -
+
diff --git a/frontend/src/components/pages/landing/SecondPage/SecondPage.styled.ts b/frontend/src/components/pages/landing/SecondPage/SecondPage.styled.ts index b7cf811d..803e79b3 100644 --- a/frontend/src/components/pages/landing/SecondPage/SecondPage.styled.ts +++ b/frontend/src/components/pages/landing/SecondPage/SecondPage.styled.ts @@ -1,4 +1,4 @@ -import { css, keyframes } from "@emotion/react"; +import { css } from "@emotion/react"; import theme from "@styles/theme"; import { PRIMITIVE_COLORS } from "@styles/tokens"; @@ -99,24 +99,6 @@ export const emojiStyle = css` z-index: 10; `; -const float = keyframes` - 0% { transform: translateY(0px); } - 50% { transform: translateY(-1rem); } - 100% { transform: translateY(0px); } -`; - -export const buttonStyle = css` - position: absolute; - top: -5.8rem; - z-index: ${theme.zIndex.toast}; - padding: ${theme.spacing.m}; - opacity: 0.5; - - background-color: transparent; - - animation: ${float} 1s ease-in-out infinite; -`; - export const primaryText = css` color: ${theme.colors.primary}; `; diff --git a/frontend/src/components/pages/landing/SecondPage/SecondPage.tsx b/frontend/src/components/pages/landing/SecondPage/SecondPage.tsx index 0f0239b3..f158c3f5 100644 --- a/frontend/src/components/pages/landing/SecondPage/SecondPage.tsx +++ b/frontend/src/components/pages/landing/SecondPage/SecondPage.tsx @@ -1,6 +1,4 @@ -import { Icon, Text } from "@components/common"; - -import { PRIMITIVE_COLORS } from "@styles/tokens"; +import { Text } from "@components/common"; import { MainPageImage } from "@assets/webp"; @@ -14,7 +12,6 @@ const SecondPage = () => { return (
-