Merge branch 'develop' into feature/#360

frontend/cypress/fixtures/trip.json

@@ -0,0 +1,213 @@
+{
+  "id": 1,
+  "title": "런던 여행",
+  "startDate": "2023-07-01",
+  "endDate": "2023-07-03",
+  "description": "라곤의 좌충우돌 유럽 여행기",
+  "imageUrl": "https://a.cdn-hotels.com/gdcs/production153/d1371/e6c1f55e-51ac-41d5-8c63-2d0c63faf59e.jpg",
+  "cities": [
+    {
+      "id": 1,
+      "name": "런던",
+      "latitude": 51.509865,
+      "longitude": -0.118092
+    },
+    {
+      "id": 2,
+      "name": "애든버러",
+      "latitude": 55.953251,
+      "longitude": -3.188267
+    },
+    {
+      "id": 3,
+      "name": "파리",
+      "latitude": 48.864716,
+      "longitude": 2.338629
+    }
+  ],
+  "dayLogs": [
+    {
+      "id": 1,
+      "title": "런던 방문기",
+      "ordinal": 1,
+      "date": "2023-07-01",
+      "items": [
+        {
+          "id": 1,
+          "itemType": true,
+          "title": "피카딜리 서커스",
+          "ordinal": 1,
+          "rating": 4,
+          "memo": "북적북적한 피키달리 서크스. 주변에 맛있는 식당이 없는게 아쉬움.",
+          "place": {
+            "id": 1,
+            "name": "피카딜리 서커스",
+            "latitude": 51.510067,
+            "longitude": -0.133869,
+            "category": {
+              "id": 1,
+              "name": "명소"
+            }
+          },
+          "expense": {
+            "id": 1,
+            "currency": "GBP",
+            "amount": 200,
+            "category": {
+              "id": 3,
+              "name": "관광"
+            }
+          },
+          "imageUrls": [
+            "https://upload.wikimedia.org/wikipedia/commons/f/f9/Open_Happiness_Piccadilly_Circus_Blue-Pink_Hour_120917-1126-jikatu.jpg",
+            "https://e3.365dm.com/17/10/2048x1152/skynews-piccadilly-piccadilly-circus_4131587.jpg",
+            "https://dynamic-media-cdn.tripadvisor.com/media/photo-o/15/9e/a5/6f/regent-str.jpg?w=1200&h=-1&s=1",
+            "https://flashbak.com/wp-content/uploads/2017/01/Piccadilly-by-Night-London-1960-by-Elmar-Ludwig.jpg"
+          ]
+        },
+        {
+          "id": 2,
+          "itemType": true,
+          "title": "대영박물관",
+          "ordinal": 2,
+          "rating": null,
+          "memo": "세계의 역사를 볼 수 있는 대영박물관",
+          "place": {
+            "id": 2,
+            "name": "대영박물관",
+            "latitude": 51.51929365,
+            "longitude": -0.128017721784947,
+            "category": {
+              "id": 1,
+              "name": "명소"
+            }
+          },
+          "expense": null,
+          "imageUrls": ["https://pbs.twimg.com/media/D8sOPlgXUAACySN.jpg"]
+        },
+        {
+          "id": 3,
+          "itemType": false,
+          "title": "택시",
+          "ordinal": 3,
+          "rating": null,
+          "memo": "대영박물관에서 빅밴으로",
+          "place": null,
+          "expense": {
+            "id": 2,
+            "currency": "GBP",
+            "amount": 20,
+            "category": {
+              "id": 3,
+              "name": "교통"
+            }
+          },
+          "imageUrls": []
+        },
+        {
+          "id": 10,
+          "itemType": true,
+          "title": "covertGarden",
+          "ordinal": 1,
+          "rating": 4.5,
+          "memo": null,
+          "place": {
+            "id": 1,
+            "name": "covertGarden",
+            "latitude": 51.5117,
+            "longitude": -0.1226,
+            "category": {
+              "id": 2,
+              "name": "공원"
+            }
+          },
+          "expense": {
+            "id": 3,
+            "currency": "GBP",
+            "amount": 50,
+            "category": {
+              "id": 2,
+              "name": "음식"
+            }
+          },
+          "imageUrls": [
+            "https://lh3.googleusercontent.com/p/AF1QipOirgDoMN4u1mwho_3Nh_4hS6IehGlewiHtcQLI=s1360-w1360-h1020"
+          ]
+        }
+      ]
+    },
+    {
+      "id": 2,
+      "title": "애든버러 방문기",
+      "ordinal": 2,
+      "date": "2023-07-02",
+      "items": [
+        {
+          "id": 5,
+          "itemType": true,
+          "title": "LOWDOWN",
+          "ordinal": 1,
+          "rating": 4.5,
+          "memo": null,
+          "place": {
+            "id": 4,
+            "name": "LOWDOWN",
+            "latitude": 55.95302,
+            "longitude": -3.19973,
+            "category": {
+              "id": 1,
+              "name": "카페"
+            }
+          },
+          "expense": {
+            "id": 3,
+            "currency": "GBP",
+            "amount": 50,
+            "category": {
+              "id": 2,
+              "name": "음식"
+            }
+          },
+          "imageUrls": [
+            "https://lh3.googleusercontent.com/p/AF1QipOirgDoMN4u1mwho_3Nh_4hS6IehGlewiHtcQLI=s1360-w1360-h1020"
+          ]
+        },
+        {
+          "id": 4,
+          "itemType": false,
+          "title": "기차",
+          "ordinal": 2,
+          "rating": 2,
+          "memo": "오래걸리고 엄청 추웠다.",
+          "place": null,
+          "expense": {
+            "id": 3,
+            "currency": "GBP",
+            "amount": 300,
+            "category": {
+              "id": 3,
+              "name": "교통"
+            }
+          },
+          "imageUrls": [
+            "https://www.thetrainline.com/cms/media/4626/southeastern-javelin-train-st-pancras-intl-desktop_1x.jpg"
+          ]
+        }
+      ]
+    },
+    {
+      "id": 3,
+      "title": "",
+      "ordinal": 3,
+      "date": "2023-07-03",
+      "items": []
+    },
+    {
+      "id": 4,
+      "title": "",
+      "ordinal": 4,
+      "date": "2023-07-04",
+      "items": []
+    }
+  ]
+}

frontend/cypress/support/e2e.ts

@@ -12,9 +12,8 @@
 // You can read more here:
 // https://on.cypress.io/configuration
 // ***********************************************************
-
 // Import commands.js using ES2015 syntax:
-import './commands'
+import './commands';
 
 // Alternatively you can use CommonJS syntax:
-// require('./commands')
+// require('./commands')

frontend/package.json

@@ -23,7 +23,7 @@
     "@tanstack/react-query": "^4.29.19",
     "axios": "^1.4.0",
     "dotenv": "^16.3.1",
-    "hang-log-design-system": "^1.2.12",
+    "hang-log-design-system": "^1.2.17",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.14.1",

frontend/public/mockServiceWorker.js

@@ -2,7 +2,7 @@
 /* tslint:disable */
 
 /**
- * Mock Service Worker (1.2.2).
+ * Mock Service Worker (1.2.3).
  * @see https://github.com/mswjs/msw
  * - Please do NOT modify this file.
  * - Please do NOT serve this file on production.

frontend/src/components/common/DateInput/DateInput.tsx

@@ -52,6 +52,7 @@ const DateInput = ({
       <Menu closeMenu={closeCalendar} css={containerStyling}>
         <Box onClick={toggleCalendar} css={getInputStyling(isCalendarOpen)}>
           <Input
+            id="date"
             placeholder="방문 날짜를 입력해주세요"
             icon={<CalendarIcon aria-label="캘린더 아이콘" />}
             value={inputValue}

frontend/src/components/common/TripItem/TripItem.tsx

@@ -2,6 +2,8 @@ import { CURRENCY_ICON } from '@constants/trip';
 import { mediaQueryMobileState, viewportWidthState } from '@store/mediaQuery';
 import type { TripItemData } from '@type/tripItem';
 import { Box, Heading, ImageCarousel, Text } from 'hang-log-design-system';
+
+import type { ForwardedRef } from 'react';
 import { useEffect, useMemo, useRef } from 'react';
 import { useRecoilValue } from 'recoil';
 
@@ -19,13 +21,15 @@ import {
   memoStyling,
   starRatingStyling,
   subInformationStyling,
+  wrapperStyling,
 } from '@components/common/TripItem/TripItem.style';
 
 interface TripListItemProps extends TripItemData {
   tripId: number;
   dayLogId: number;
   isEditable?: boolean;
   observer?: IntersectionObserver | null;
+  scrollRef?: ForwardedRef<HTMLDivElement>;
   onDragStart?: () => void;
   onDragEnter?: () => void;
   onDragEnd?: () => void;
@@ -36,6 +40,7 @@ const TripItem = ({
   dayLogId,
   isEditable = true,
   observer,
+  scrollRef,
   onDragStart,
   onDragEnter,
   onDragEnd,
@@ -67,7 +72,7 @@ const TripItem = ({
       onDragEnter={onDragEnter}
       onDragEnd={isEditable ? handleDragEnd : undefined}
     >
-      <div css={contentContainerStyling}>
+      <div ref={scrollRef} css={contentContainerStyling}>
         {information.imageUrls.length > 0 && (
           <ImageCarousel
             width={isMobile ? imageWidth : 250}

frontend/src/components/common/TripItemList/TripItemList.tsx

@@ -1,12 +1,15 @@
 import { PATH } from '@constants/path';
+import { clickedMarkerIdState } from '@store/scrollFocus';
 import type { TripItemData } from '@type/tripItem';
 import { Button, Divider, Heading, Text } from 'hang-log-design-system';
-import { Fragment, useEffect } from 'react';
+import { Fragment, useEffect, useRef } from 'react';
 import { useNavigate } from 'react-router-dom';
+import { useRecoilValue } from 'recoil';
 
 import { sortByOrdinal } from '@utils/sort';
 
 import { useDayLogOrderMutation } from '@hooks/api/useDayLogOrderMutation';
+import { useAutoScroll } from '@hooks/common/useAutoScroll';
 import { useDragAndDrop } from '@hooks/common/useDragAndDrop';
 import { useScrollFocus } from '@hooks/common/useScrollFocus';
 
@@ -27,6 +30,14 @@ interface TripItemListProps {
 const TripItemList = ({ tripId, dayLogId, tripItems, isEditable = true }: TripItemListProps) => {
   const dayLogOrderMutation = useDayLogOrderMutation();
   const { observer } = useScrollFocus();
+  const listRef = useRef<HTMLOListElement>(null);
+  const itemRef = useRef<HTMLDivElement>(null);
+  const { scrollToCenter } = useAutoScroll(listRef, itemRef);
+  const clickedMarkerId = useRecoilValue(clickedMarkerIdState);
+
+  useEffect(() => {
+    scrollToCenter();
+  }, [clickedMarkerId, scrollToCenter]);
 
   const handlePositionChange = (newItems: TripItemData[]) => {
     const itemIds = newItems.map((item) => item.id);
@@ -49,10 +60,11 @@ const TripItemList = ({ tripId, dayLogId, tripItems, isEditable = true }: TripIt
   }, [handleItemsUpdate, tripItems]);
 
   return (
-    <ol css={containerStyling}>
+    <ol ref={listRef} css={containerStyling}>
       {sortedItems.map((item, index) => (
         <Fragment key={item.id}>
           <TripItem
+            scrollRef={item.id === clickedMarkerId ? itemRef : null}
             tripId={tripId}
             dayLogId={dayLogId}
             isEditable={isEditable}