Merge pull request #363 from woowacourse-teams/feature/#360

TripPage & TripEditPage 모바일 대응
woowacourse-teams · Aug 8, 2023 · a833694 · a833694
2 parents 2ccf68c + 829707d
commit a833694
Show file tree

Hide file tree

Showing 33 changed files with 285 additions and 59 deletions.
diff --git a/.github/workflows/frontend-e2e-test.yml b/.github/workflows/frontend-e2e-test.yml
@@ -33,7 +33,7 @@ jobs:
           browser: chrome
           start: npm run dev
           wait-on: 'http://localhost:3000'
-          record: true
+          record: false
           working-directory: ./frontend
         env:
           CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -1,5 +1,6 @@
 import { Outlet } from 'react-router-dom';
 
+import { useMediaQuery } from '@hooks/common/useMediaQuery';
 import { useResetError } from '@hooks/common/useResetError';
 
 import Error from '@components/common/Error/Error';
@@ -10,6 +11,7 @@ import Header from '@components/layout/Header/Header';
 
 const App = () => {
   const { handleErrorReset } = useResetError();
+  useMediaQuery();
 
   return (
     <ErrorBoundary Fallback={Error} onReset={handleErrorReset}>

diff --git a/frontend/src/components/common/DayLogItem/DayLogItemSkeleton.tsx b/frontend/src/components/common/DayLogItem/DayLogItemSkeleton.tsx
@@ -1,13 +1,17 @@
+import { mediaQueryMobileState } from '@store/mediaQuery';
 import { Box, Flex, Skeleton } from 'hang-log-design-system';
+import { useRecoilValue } from 'recoil';
 
 import { containerStyling, headerStyling } from '@components/common/DayLogItem/DayLogItem.style';
 import TripItemListSkeleton from '@components/common/TripItemList/TripItemListSkeleton';
 
 const DayLogItemSkeleton = () => {
+  const isMobile = useRecoilValue(mediaQueryMobileState);
+
   return (
     <Box css={containerStyling}>
       <Flex css={headerStyling} styles={{ justify: 'space-between' }}>
-        <Skeleton width="250px" height="38px" />
+        <Skeleton width={isMobile ? '180px' : '250px'} height="38px" />
         <Skeleton width="100px" height="38px" />
       </Flex>
       <TripItemListSkeleton />

diff --git a/frontend/src/components/common/DayLogItem/TitleInput/TitleInput.style.ts b/frontend/src/components/common/DayLogItem/TitleInput/TitleInput.style.ts
@@ -18,6 +18,11 @@ export const inputStyling = css({
 
   transition: 'all .2s ease-in',
 
+  '@media screen and (max-width: 600px)': {
+    maxWidth: '60%',
+    minWidth: '40%',
+  },
+
   '&:focus': {
     boxShadow: `inset`,
     borderColor: Theme.color.gray200,

diff --git a/frontend/src/components/common/DayLogList/DayLogList.style.ts b/frontend/src/components/common/DayLogList/DayLogList.style.ts
@@ -9,6 +9,10 @@ export const containerStyling = css({
   width: '100%',
   padding: `${Theme.spacer.spacing4} 50px`,
 
+  '@media screen and (max-width: 600px)': {
+    padding: Theme.spacer.spacing4,
+  },
+
   '& > ul': {
     width: '100%',
   },

diff --git a/frontend/src/components/common/TripInformation/TripInformation.style.ts b/frontend/src/components/common/TripInformation/TripInformation.style.ts
@@ -7,6 +7,11 @@ export const sectionStyling = css({
   minHeight: '240px',
   padding: `${Theme.spacer.spacing4} 50px`,
 
+  '@media screen and (max-width: 600px)': {
+    minHeight: '220px',
+    padding: Theme.spacer.spacing4,
+  },
+
   '& *': {
     color: Theme.color.white,
   },
@@ -50,7 +55,7 @@ export const descriptionStyling = css({
 export const buttonContainerStyling = css({
   position: 'absolute',
   top: Theme.spacer.spacing4,
-  right: '50px',
+  right: Theme.spacer.spacing4,
   display: 'flex',
   gap: Theme.spacer.spacing1,
 });
@@ -61,4 +66,23 @@ export const badgeStyling = css({
 
 export const badgeWrapperStyling = css({
   width: '60%',
+  minHeight: '24px',
+  marginBottom: Theme.spacer.spacing2,
+
+  overflowX: 'scroll',
+  whiteSpace: 'nowrap',
+  '-ms-overflow-style': 'none',
+  scrollbarWidth: 'none',
+
+  '& > span': {
+    marginRight: Theme.spacer.spacing1,
+  },
+
+  '::-webkit-scrollbar': {
+    display: 'none',
+  },
+
+  '@media screen and (max-width: 600px)': {
+    width: 'calc(100vw - 220px)',
+  },
 });
diff --git a/frontend/src/components/common/TripInformation/TripInformation.tsx b/frontend/src/components/common/TripInformation/TripInformation.tsx
@@ -1,10 +1,14 @@
 import DefaultThumbnail from '@assets/png/trip-information_default-thumbnail.png';
+import { mediaQueryMobileState } from '@store/mediaQuery';
 import type { TripData } from '@type/trip';
-import { Badge, Box, Flex, Heading, Text, Theme, useOverlay } from 'hang-log-design-system';
+import { Badge, Box, Heading, Text, useOverlay } from 'hang-log-design-system';
 import { memo } from 'react';
+import { useRecoilValue } from 'recoil';
 
 import { formatDate } from '@utils/formatter';
 
+import TripButtons from '@components/common/TripInformation/TripButtons/TripButtons';
+import TripEditButtons from '@components/common/TripInformation/TripEditButtons/TripEditButtons';
 import {
   badgeStyling,
   badgeWrapperStyling,
@@ -16,14 +20,13 @@ import {
 } from '@components/common/TripInformation/TripInformation.style';
 import TripInfoEditModal from '@components/trip/TripInfoEditModal/TripInfoEditModal';
 
-import TripButtons from './TripButtons/TripButtons';
-import TripEditButtons from './TripEditButtons/TripEditButtons';
-
 interface TripInformationProps extends Omit<TripData, 'dayLogs'> {
   isEditable?: boolean;
 }
 
 const TripInformation = ({ isEditable = true, ...information }: TripInformationProps) => {
+  const isMobile = useRecoilValue(mediaQueryMobileState);
+
   const { isOpen: isEditModalOpen, close: closeEditModal, open: openEditModal } = useOverlay();
 
   return (
@@ -34,14 +37,14 @@ const TripInformation = ({ isEditable = true, ...information }: TripInformationP
           <img src={information.imageUrl ?? DefaultThumbnail} alt="여행 대표 이미지" />
         </Box>
         <Box tag="section">
-          <Flex styles={{ gap: Theme.spacer.spacing1, wrap: 'wrap' }} css={badgeWrapperStyling}>
+          <Box css={badgeWrapperStyling}>
             {information.cities.map(({ id, name }) => (
               <Badge key={id} css={badgeStyling}>
                 {name}
               </Badge>
             ))}
-          </Flex>
-          <Heading css={titleStyling} size="large">
+          </Box>
+          <Heading css={titleStyling} size={isMobile ? 'medium' : 'large'}>
             {information.title}
           </Heading>
           <Text>

diff --git a/frontend/src/components/common/TripItem/EditMenu/EditMenu.style.ts b/frontend/src/components/common/TripItem/EditMenu/EditMenu.style.ts
@@ -19,11 +19,17 @@ export const moreButtonStyling = css({
   },
 });
 
-export const moreMenuStyling = css({
-  position: 'absolute',
-  top: 0,
-  right: 0,
-});
+export const getMoreMenuStyling = (hasImage: boolean, imageHeight: number) => {
+  return css({
+    position: 'absolute',
+    top: 0,
+    right: 0,
+
+    '@media screen and (max-width: 600px)': {
+      top: hasImage ? `calc(${imageHeight}px + ${Theme.spacer.spacing3})` : 0,
+    },
+  });
+};
 
 export const moreMenuListStyling = css({
   minWidth: 'unset',

diff --git a/frontend/src/components/common/TripItem/EditMenu/EditMenu.tsx b/frontend/src/components/common/TripItem/EditMenu/EditMenu.tsx
@@ -5,18 +5,20 @@ import { Menu, MenuItem, MenuList, useOverlay } from 'hang-log-design-system';
 import { useDeleteTripItemMutation } from '@hooks/api/useDeleteTripItemMutation';
 
 import {
+  getMoreMenuStyling,
   moreButtonStyling,
   moreMenuListStyling,
-  moreMenuStyling,
 } from '@components/common/TripItem/EditMenu/EditMenu.style';
 import TripItemAddModal from '@components/trip/TripItemAddModal/TripItemAddModal';
 
 interface EditMenuProps extends TripItemData {
   tripId: number;
   dayLogId: number;
+  hasImage: boolean;
+  imageHeight: number;
 }
 
-const EditMenu = ({ tripId, dayLogId, ...information }: EditMenuProps) => {
+const EditMenu = ({ tripId, dayLogId, hasImage, imageHeight, ...information }: EditMenuProps) => {
   const deleteTripItemMutation = useDeleteTripItemMutation();
 
   const { isOpen: isMenuOpen, open: openMenu, close: closeMenu } = useOverlay();
@@ -28,7 +30,7 @@ const EditMenu = ({ tripId, dayLogId, ...information }: EditMenuProps) => {
 
   return (
     <>
-      <Menu css={moreMenuStyling} closeMenu={closeMenu}>
+      <Menu css={getMoreMenuStyling(hasImage, imageHeight)} closeMenu={closeMenu}>
         <button css={moreButtonStyling} type="button" aria-label="더 보기 메뉴" onClick={openMenu}>
           <MoreIcon />
         </button>

diff --git a/frontend/src/components/common/TripItem/TripItem.style.ts b/frontend/src/components/common/TripItem/TripItem.style.ts
@@ -22,9 +22,14 @@ export const getContainerStyling = ({
   });
 };
 
-export const wrapperStyling = css({
+export const contentContainerStyling = css({
   display: 'flex',
   gap: Theme.spacer.spacing4,
+
+  '@media screen and (max-width: 600px)': {
+    flexDirection: 'column',
+    gap: Theme.spacer.spacing3,
+  },
 });
 
 export const informationContainerStyling = css({

diff --git a/frontend/src/components/common/TripItem/TripItem.tsx b/frontend/src/components/common/TripItem/TripItem.tsx
@@ -1,8 +1,10 @@
 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 { useEffect, useRef } from 'react';
 import type { ForwardedRef } from 'react';
+import { useEffect, useMemo, useRef } from 'react';
+import { useRecoilValue } from 'recoil';
 
 import { formatNumberToMoney } from '@utils/formatter';
 
@@ -11,13 +13,13 @@ import { useDraggedItem } from '@hooks/common/useDraggedItem';
 import StarRating from '@components/common/StarRating/StarRating';
 import EditMenu from '@components/common/TripItem/EditMenu/EditMenu';
 import {
+  contentContainerStyling,
   expenseStyling,
   getContainerStyling,
   informationContainerStyling,
   memoStyling,
   starRatingStyling,
   subInformationStyling,
-  wrapperStyling,
 } from '@components/common/TripItem/TripItem.style';
 
 interface TripListItemProps extends TripItemData {
@@ -42,6 +44,12 @@ const TripItem = ({
   onDragEnd,
   ...information
 }: TripListItemProps) => {
+  const isMobile = useRecoilValue(mediaQueryMobileState);
+  const viewportWidth = useRecoilValue(viewportWidthState);
+
+  const imageWidth = useMemo(() => viewportWidth - 48, [viewportWidth]);
+  const imageHeight = useMemo(() => (imageWidth / 4.5) * 3, [imageWidth]);
+
   const { isDragging, handleDrag, handleDragEnd } = useDraggedItem(onDragEnd);
   const itemRef = useRef<HTMLLIElement>(null);
 
@@ -62,11 +70,11 @@ const TripItem = ({
       onDragEnter={onDragEnter}
       onDragEnd={isEditable ? handleDragEnd : undefined}
     >
-      <div ref={scrollRef} css={wrapperStyling}>
+      <div ref={scrollRef} css={contentContainerStyling}>
         {information.imageUrls.length > 0 && (
           <ImageCarousel
-            width={250}
-            height={167}
+            width={isMobile ? imageWidth : 250}
+            height={isMobile ? imageHeight : 167}
             isDraggable={false}
             showNavigationOnHover
             showArrows
@@ -95,7 +103,15 @@ const TripItem = ({
           )}
         </Box>
       </div>
-      {isEditable ? <EditMenu tripId={tripId} dayLogId={dayLogId} {...information} /> : null}
+      {isEditable ? (
+        <EditMenu
+          tripId={tripId}
+          dayLogId={dayLogId}
+          hasImage={information.imageUrls.length > 0}
+          imageHeight={imageHeight}
+          {...information}
+        />
+      ) : null}
     </li>
   );
 };

diff --git a/frontend/src/components/common/TripItem/TripItemSkeleton.tsx b/frontend/src/components/common/TripItem/TripItemSkeleton.tsx
@@ -1,23 +1,37 @@
-import { Box, Flex, Skeleton, Theme } from 'hang-log-design-system';
+import { mediaQueryMobileState, viewportWidthState } from '@store/mediaQuery';
+import { Box, Skeleton } from 'hang-log-design-system';
+import { useMemo } from 'react';
+import { useRecoilValue } from 'recoil';
 
 import {
+  contentContainerStyling,
   getContainerStyling,
   informationContainerStyling,
 } from '@components/common/TripItem/TripItem.style';
 
 const TripItemSkeleton = () => {
+  const isMobile = useRecoilValue(mediaQueryMobileState);
+  const viewportWidth = useRecoilValue(viewportWidthState);
+
+  const imageWidth = useMemo(() => viewportWidth - 48, [viewportWidth]);
+  const imageHeight = useMemo(() => (imageWidth / 4.5) * 3, [imageWidth]);
+
   return (
     <li css={getContainerStyling({})}>
-      <Flex styles={{ gap: Theme.spacer.spacing4 }}>
-        <Skeleton css={{ minWidth: '250px' }} width="250px" height="167px" />
+      <div css={contentContainerStyling}>
+        <Skeleton
+          css={{ minWidth: isMobile ? imageWidth : '250px' }}
+          width={isMobile ? `${imageWidth}px` : '250px'}
+          height={isMobile ? `${imageHeight}px` : '167px'}
+        />
         <Box css={informationContainerStyling}>
           <Skeleton width="200px" height="28px" />
           <Skeleton css={{ marginTop: '8px', marginBottom: '16px' }} width="123px" height="20px" />
           <Skeleton css={{ marginBottom: '2px' }} width="90%" height="20px" />
           <Skeleton css={{ marginBottom: '16px' }} width="50%" height="20px" />
           <Skeleton width="100px" height="20px" />
         </Box>
-      </Flex>
+      </div>
     </li>
   );
 };

diff --git a/frontend/src/components/common/TripItemList/TripItemList.tsx b/frontend/src/components/common/TripItemList/TripItemList.tsx
@@ -1,4 +1,3 @@
-import { sortByOrdinal } from '@/utils/sort';
 import { PATH } from '@constants/path';
 import { clickedMarkerIdState } from '@store/scrollFocus';
 import type { TripItemData } from '@type/tripItem';
@@ -7,6 +6,8 @@ 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';

diff --git a/frontend/src/components/layout/Footer/Footer.style.ts b/frontend/src/components/layout/Footer/Footer.style.ts
@@ -15,6 +15,10 @@ export const containerStyling = css({
 
   backgroundColor: Theme.color.white,
 
+  '@media screen and (max-width: 600px)': {
+    height: '124px',
+  },
+
   '& *': {
     color: Theme.color.gray600,
   },

diff --git a/frontend/src/components/layout/Header/Header.style.ts b/frontend/src/components/layout/Header/Header.style.ts
@@ -11,6 +11,10 @@ export const headerStyling = css({
   backgroundColor: Theme.color.white,
   padding: `${Theme.spacer.spacing4} 50px`,
 
+  '@media screen and (max-width: 600px)': {
+    padding: `${Theme.spacer.spacing3} ${Theme.spacer.spacing4}`,
+  },
+
   '& > *': {
     cursor: 'pointer',
   },

diff --git a/frontend/src/components/trip/TripItemAddModal/DateInput/DateInput.style.ts b/frontend/src/components/trip/TripItemAddModal/DateInput/DateInput.style.ts
@@ -0,0 +1,5 @@
+import { css } from '@emotion/react';
+
+export const selectStyling = css({
+  height: '48px',
+});