[Feature] - touroot v1.3.2 (#595)

* [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: 손진영 <[email protected]>

* [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 <[email protected]>

* [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 <[email protected]>

* [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: 손진영 <[email protected]>
Co-authored-by: jinyoung <[email protected]>

* [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 <[email protected]>

* [Feature] - 여행 계획 상세조회 페이지 구현 (#127)

* chore: 업데이트된 다른 파일과 동기화

* feat(TravelPlansTabContent): 컴포넌트 구현

* feat(TravelPlansDetail): 컴포넌트 구현

* refactor(TravelogueDetailPage): 타입 분리 및 TransformBottomSheet props 수정에 따른 변경

* refactor: 네이밍 변경에 따른 수정 및 불 필요한 코드 삭제

Co-authored-by: choi river <[email protected]>
Co-authored-by: simorimi <[email protected]>

* refactor: 스타일링 조정 및 stylelint에 맞게 순서 수정

* refactor(storybook): decorator 수정

* chore(createPathElement): 설정

* [Feature] - 2차 스프린트 QA 진행 (#141)

* refactor: 네이밍 변경에 따른 수정 및 불 필요한 코드 삭제

Co-authored-by: choi river <[email protected]>
Co-authored-by: simorimi <[email protected]>

* 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 <[email protected]>
Co-authored-by: simorimi <[email protected]>

* 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 <[email protected]>

* [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 <[email protected]>

* refactor: UserProvider에 accessToken만 저장하도록 수정

* feat: 카카오 로그인시 accessToken만 로컬스토리지에 저장하도록 수정

* fix: Header의 Drawer에 로그인/로그아웃 버튼 변하도록 수정

* feat: 로그아웃 구현

---------

Co-authored-by: eunjungL <[email protected]>

* [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: 손진영 <[email protected]>

* [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: 손진영 <[email protected]>

* [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: 손진영 <[email protected]>

* [Feature] - 배포한 서비스를 모니터링 하는 도구 GA 세팅  (#263)

* chore: react-ga4 설치

* feat(main): ga4 init

* chore: 전환 버튼 클릭 시 이벤트 집계하도록 설정

---------

Co-authored-by: 손진영 <[email protected]>

* [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 <[email protected]>

* chore: 사용되지 않는 styled 삭제

* fix : 빈 칸으로 수정 시도할 경우 원래 닉네임으로 되돌아가도록 수정

* fix: 닉네임 수정시 깜빡이며 렌더링 되는것 수정, spellcheck false로 설정

---------

Co-authored-by: jinyoung <[email protected]>

* [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: 손진영 <[email protected]>

* [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: 손진영 <[email protected]>

* [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: 손진영 <[email protected]>

* [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 <[email protected]>

* 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 수정

- …

frontend/package.json

@@ -25,6 +25,7 @@
     "@tanstack/react-query-devtools": "^5.51.1",
     "axios": "^1.7.2",
     "dotenv-webpack": "^8.1.0",
+    "heic2any": "^0.0.4",
     "immer": "^10.1.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

frontend/src/components/pages/main/MainPage.styled.ts

@@ -125,18 +125,18 @@ export const MainPageList = styled.li`
 export const FetchButton = styled.button`
   position: fixed;
   bottom: 0;
-  left: 0;
+  left: -10rem;
   z-index: ${({ theme }) => theme.zIndex.floating};
   padding: ${({ theme }) => theme.spacing.xs};
 
   background-color: ${PRIMITIVE_COLORS.black};
 
   color: ${PRIMITIVE_COLORS.white};
 
-  transform: translateY(100%);
-  transition: transform 0.3s;
+  transform: translateX(0);
 
   &:focus {
-    transform: translateY(0);
+    transform: translateX(10rem);
+    transition: transform 0.3s;
   }
 `;

frontend/src/components/pages/travelPlanEdit/TravelPlanEditPage.tsx

@@ -1,4 +1,4 @@
-import { useNavigate } from "react-router-dom";
+import { useBeforeUnload, useNavigate } from "react-router-dom";
 
 import {
   Accordion,
@@ -18,6 +18,7 @@ import { useTravelPlanInitialization } from "@components/pages/travelPlanEdit/ho
 import TravelPlanDayAccordion from "@components/pages/travelPlanRegister/TravelPlanDayAccordion/TravelPlanDayAccordion";
 
 import useTravelPlanFormState from "@hooks/pages/useTravelPlanFormState/useTravelPlanFormState";
+import usePrompt from "@hooks/usePrompt";
 import useToggle from "@hooks/useToggle";
 
 import { ERROR_MESSAGE_MAP } from "@constants/errorMessage";
@@ -69,6 +70,15 @@ const TravelPlanEditPage = () => {
 
   const navigate = useNavigate();
 
+  usePrompt({
+    message: "사이트에서 나가시겠습니까?",
+    when: ({ currentLocation, nextLocation }) => currentLocation.pathname !== nextLocation.pathname,
+  });
+
+  useBeforeUnload((event) => {
+    event.preventDefault();
+  });
+
   if (status === "error") {
     const errorMessage =
       error?.message === ERROR_MESSAGE_MAP.api.travelPlanOnlyWriter

frontend/src/components/pages/travelPlanRegister/TravelPlanRegisterPage.tsx

@@ -1,3 +1,5 @@
+import { useBeforeUnload } from "react-router-dom";
+
 import { useTravelTransformDetailContext } from "@contexts/TravelTransformDetailProvider";
 
 import {
@@ -18,6 +20,7 @@ import useTravelPlanRegister from "@components/pages/travelPlanRegister/hooks/us
 
 import useTravelPlanFormState from "@hooks/pages/useTravelPlanFormState/useTravelPlanFormState";
 import useAuthRedirect from "@hooks/useAuthRedirect";
+import usePrompt from "@hooks/usePrompt";
 import useToggle from "@hooks/useToggle";
 
 import { CYPRESS_DATA_MAP } from "@constants/cypress";
@@ -69,8 +72,22 @@ const TravelPlanRegisterPage = () => {
     handleBottomSheetClose,
   );
 
+  usePrompt({
+    message: "사이트에서 나가시겠습니까?",
+    when: ({ currentLocation, nextLocation }) => currentLocation.pathname !== nextLocation.pathname,
+  });
+
   useAuthRedirect();
 
+  usePrompt({
+    message: "사이트에서 나가시겠습니까?",
+    when: ({ currentLocation, nextLocation }) => currentLocation.pathname !== nextLocation.pathname,
+  });
+
+  useBeforeUnload((event) => {
+    event.preventDefault();
+  });
+
   return (
     <>
       <S.Layout>

frontend/src/components/pages/travelogueEdit/TravelogueEditPage.tsx

@@ -1,3 +1,5 @@
+import { useBeforeUnload } from "react-router-dom";
+
 import {
   Accordion,
   Button,
@@ -18,6 +20,7 @@ import TravelogueDayAccordion from "@components/pages/travelogueRegister/Travelo
 
 import useTravelogueFormState from "@hooks/pages/useTravelogueFormState/useTravelogueFormState";
 import { useDragScroll } from "@hooks/useDragScroll";
+import usePrompt from "@hooks/usePrompt";
 import useToggle from "@hooks/useToggle";
 import useUnmountAnimation from "@hooks/useUnmountAnimation";
 
@@ -78,6 +81,15 @@ const TravelogueEditPage = () => {
     handleInitializeThumbnail,
   });
 
+  usePrompt({
+    message: "사이트에서 나가시겠습니까?",
+    when: ({ currentLocation, nextLocation }) => currentLocation.pathname !== nextLocation.pathname,
+  });
+
+  useBeforeUnload((event) => {
+    event.preventDefault();
+  });
+
   return (
     <>
       <S.Layout>

frontend/src/components/pages/travelogueRegister/TravelogueMultiImageUpload/hooks/useMultiImageUpload.ts

@@ -12,6 +12,8 @@ interface ImageState {
   isLoading: boolean;
 }
 
+const MAX_FILE_SIZE = 25 * 1024 * 1024; // 25MB in bytes
+
 export const useTravelogueMultiImageUpload = ({
   dayIndex,
   placeIndex,
@@ -71,18 +73,20 @@ export const useTravelogueMultiImageUpload = ({
   };
 
   const handleChangeImage = async (e: React.ChangeEvent<HTMLInputElement>) => {
-    if (isPaused) {
-      alert(ERROR_MESSAGE_MAP.network);
-      return;
-    }
-
     const files = Array.from(e.target.files as FileList);
 
     if (imageStates.length + files.length > MAX_IMAGE_UPLOAD_COUNT) {
       alert(ERROR_MESSAGE_MAP.imageUpload);
       return;
     }
 
+    const oversizedFile = files.find((file) => file.size > MAX_FILE_SIZE);
+
+    if (oversizedFile) {
+      alert(`파일 '${oversizedFile.name}'이 25MB 제한을 초과했습니다.`);
+      return;
+    }
+
     try {
       addLoadingImageStates(files);
 

frontend/src/components/pages/travelogueRegister/TravelogueRegisterPage.tsx

@@ -1,3 +1,5 @@
+import { useBeforeUnload } from "react-router-dom";
+
 import { useTravelTransformDetailContext } from "@contexts/TravelTransformDetailProvider";
 
 import {
@@ -20,6 +22,7 @@ import useTravelogueRegister from "@components/pages/travelogueRegister/hooks/us
 import useTravelogueFormState from "@hooks/pages/useTravelogueFormState/useTravelogueFormState";
 import useAuthRedirect from "@hooks/useAuthRedirect";
 import { useDragScroll } from "@hooks/useDragScroll";
+import usePrompt from "@hooks/usePrompt";
 import useToggle from "@hooks/useToggle";
 
 import { FORM_VALIDATIONS_MAP } from "@constants/formValidation";
@@ -57,6 +60,15 @@ const TravelogueRegisterPage = () => {
     isEnabledForm,
   } = useTravelogueFormState(transformDetail?.days ?? []);
 
+  usePrompt({
+    message: "사이트에서 나가시겠습니까?",
+    when: ({ currentLocation, nextLocation }) => currentLocation.pathname !== nextLocation.pathname,
+  });
+
+  useBeforeUnload((event) => {
+    event.preventDefault();
+  });
+
   const payload = {
     title,
     thumbnail: thumbnail || (process.env.DEFAULT_THUMBNAIL_IMAGE ?? ""),

frontend/src/hooks/useModalControl.ts

@@ -1,5 +1,6 @@
-import { useEffect } from 'react';
-import usePressESC from '@hooks/usePressESC';
+import { useEffect } from "react";
+
+import usePressESC from "@hooks/usePressESC";
 
 /**
  * modal control에 관한 훅입니다.
@@ -10,11 +11,26 @@ const useModalControl = <T extends (...args: unknown[]) => void>(isOpen: boolean
   usePressESC(isOpen, onToggle);
 
   useEffect(() => {
-    if (isOpen) document.body.style.overflow = 'hidden';
+    if (isOpen) {
+      const scrollY = window.scrollY;
+
+      document.body.style.position = "fixed";
+      document.body.style.width = "100%";
+      document.body.style.top = `-${scrollY}px`;
+      document.body.style.overflow = "hidden";
+
+      document.body.style.touchAction = "none";
+
+      return () => {
+        document.body.style.position = "";
+        document.body.style.width = "";
+        document.body.style.top = "";
+        document.body.style.overflow = "auto";
+        document.body.style.touchAction = "";
 
-    return () => {
-      document.body.style.overflow = 'auto';
-    };
+        window.scrollTo(0, scrollY);
+      };
+    }
   }, [isOpen]);
 };
 

frontend/src/hooks/usePrompt.ts

@@ -0,0 +1,25 @@
+import { useEffect } from "react";
+import { BlockerFunction, useBlocker } from "react-router-dom";
+
+const usePrompt = ({ when, message }: { when: boolean | BlockerFunction; message: string }) => {
+  const blocker = useBlocker(when);
+
+  useEffect(() => {
+    if (blocker.state === "blocked") {
+      const proceed = window.confirm(message);
+      if (proceed) {
+        setTimeout(blocker.proceed, 0);
+      } else {
+        blocker.reset();
+      }
+    }
+  }, [blocker, message]);
+
+  useEffect(() => {
+    if (blocker.state === "blocked" && !when) {
+      blocker.reset();
+    }
+  }, [blocker, when]);
+};
+
+export default usePrompt;

frontend/src/utils/resizeAndConvertImage.ts

@@ -1,12 +1,37 @@
+import heic2any from "heic2any";
+
 import { ERROR_MESSAGE_MAP } from "@constants/errorMessage";
 import { MAX_HEIGHT, MAX_WIDTH } from "@constants/resize";
 
-const loadImageFromFile = (file: File): Promise<HTMLImageElement> => {
+const loadImageFromFile = async (file: File): Promise<HTMLImageElement> => {
+  let processedFile = file;
+  if (file.type === "image/heic" || file.type === "image/heif") {
+    try {
+      const blob = await heic2any({
+        blob: file,
+        toType: "image/jpeg",
+        quality: 0.8,
+      });
+
+      processedFile = new File(
+        [Array.isArray(blob) ? blob[0] : blob],
+        file.name.replace(/\.heic$/i, ".jpg"),
+        { type: "image/jpeg" },
+      );
+    } catch (error) {
+      throw new Error(`HEIC 이미지를 변환하는데 실패 했습니다. 다시 시도해주세요.`);
+    }
+  }
+
   return new Promise((resolve, reject) => {
     const img = new Image();
     img.onload = () => resolve(img);
-    img.onerror = (error) => reject(error);
-    img.src = URL.createObjectURL(file);
+    img.onerror = () => {
+      reject(
+        new Error(`이름 - ${file.name}, 타입 - ${file.type}인 이미지를 업로드하는데 실패했습니다.`),
+      );
+    };
+    img.src = URL.createObjectURL(processedFile);
   });
 };
 
@@ -41,20 +66,15 @@ const resizeImage = (
 const convertCanvasToBlob = (
   canvas: HTMLCanvasElement,
   format: string = "image/webp",
-  quality: number = 0.8,
 ): Promise<Blob> => {
   return new Promise((resolve, reject) => {
-    canvas.toBlob(
-      (blob) => {
-        if (blob) {
-          resolve(blob);
-        } else {
-          reject(new Error(ERROR_MESSAGE_MAP.imageConvert));
-        }
-      },
-      format,
-      quality,
-    );
+    canvas.toBlob((blob) => {
+      if (blob) {
+        resolve(blob);
+      } else {
+        reject(new Error(ERROR_MESSAGE_MAP.imageConvert));
+      }
+    }, format);
   });
 };
 
@@ -82,6 +102,7 @@ const resizeAndConvertImage = async (
     const newFile = createFileFromBlob(blob, file.name); // 4. Blob을 파일로 변환
     return newFile;
   } catch (error) {
+    console.error(error);
     throw new Error(ERROR_MESSAGE_MAP.imageConvert);
   }
 };