모바일 버전에서 지도 볼 수 있는 기능 (#544)

* feat: 모바일에서 지도보기 버튼 추가, 지도 보는 기능 * refactor: 트립페이지 모바일 버전 컴포넌트 분리 * feat: 모바일에서 지도볼때도 daylog tab보이도록 수정 * refactor: 버튼 스타일 수정, 패딩 수정 * chore: 리베이스로 인한 버그 수정
woowacourse-teams · Sep 12, 2023 · 5f95112 · 5f95112
1 parent bc473bc
commit 5f95112
Show file tree

Hide file tree

Showing 7 changed files with 161 additions and 27 deletions.
diff --git a/frontend/src/components/common/DayLogList/DayLogList.style.ts b/frontend/src/components/common/DayLogList/DayLogList.style.ts
@@ -11,7 +11,7 @@ export const containerStyling = css({
   padding: `${Theme.spacer.spacing4} 50px`,
 
   '@media screen and (max-width: 600px)': {
-    padding: Theme.spacer.spacing4,
+    padding: `${Theme.spacer.spacing2} ${Theme.spacer.spacing4}`,
   },
 
   '& > ul': {

diff --git a/frontend/src/pages/TripPage/TripMobilePage.tsx b/frontend/src/pages/TripPage/TripMobilePage.tsx
@@ -0,0 +1,102 @@
+import { useMemo, useState } from 'react';
+import { useParams } from 'react-router-dom';
+
+import { Button, Flex, Tab, Tabs, useSelect } from 'hang-log-design-system';
+
+import {
+  buttonContainerStyling,
+  buttonStyling,
+  containerStyling,
+  contentStyling,
+  mapMobileContainerStyling,
+} from '@pages/TripPage/TripPage.style';
+
+import DayLogItem from '@components/common/DayLogItem/DayLogItem';
+import GoogleMapWrapper from '@components/common/GoogleMapWrapper/GoogleMapWrapper';
+import TripInformation from '@components/common/TripInformation/TripInformation';
+import TripMap from '@components/common/TripMap/TripMap';
+
+import { useTripQuery } from '@hooks/api/useTripQuery';
+import { useTrip } from '@hooks/trip/useTrip';
+
+import { formatMonthDate } from '@utils/formatter';
+
+const TripMobilePage = () => {
+  const [isDaylogShown, setIsDaylogShown] = useState(true);
+  const { tripId } = useParams();
+
+  const { tripData } = useTripQuery(Number(tripId));
+
+  const { selected: selectedDayLogId, handleSelectClick: handleDayLogIdSelectClick } = useSelect(
+    tripData.dayLogs[0].id
+  );
+  const selectedDayLog = tripData.dayLogs.find((log) => log.id === selectedDayLogId)!;
+  const { dates } = useTrip(Number(tripId));
+
+  const places = useMemo(
+    () =>
+      selectedDayLog.items
+        .filter((item) => item.itemType)
+        .map((item) => ({
+          id: item.id,
+          name: item.title,
+          coordinate: { lat: item.place!.latitude, lng: item.place!.longitude },
+        })),
+    [selectedDayLog.items]
+  );
+
+  return (
+    <Flex styles={{ direction: 'column' }}>
+      <section css={containerStyling}>
+        <TripInformation tripId={Number(tripId)} isEditable={false} />
+        <section css={contentStyling}>
+          <Tabs>
+            {dates.map((date, index) => {
+              const isLast = index === dates.length - 1;
+              const tabText =
+                date.id === selectedDayLog.id
+                  ? `Day ${index + 1} - ${formatMonthDate(date.date)}  `
+                  : `Day ${index + 1}`;
+
+              return (
+                <Tab
+                  key={date.id}
+                  text={isLast ? '기타' : tabText}
+                  variant="outline"
+                  tabId={date.id}
+                  selectedId={selectedDayLog.id}
+                  changeSelect={handleDayLogIdSelectClick}
+                />
+              );
+            })}
+          </Tabs>
+          {isDaylogShown && (
+            <DayLogItem tripId={Number(tripId)} isEditable={false} {...selectedDayLog} />
+          )}
+        </section>
+      </section>
+      {!isDaylogShown && (
+        <section css={mapMobileContainerStyling}>
+          <GoogleMapWrapper>
+            <TripMap
+              places={places}
+              centerLat={tripData.cities[0].latitude}
+              centerLng={tripData.cities[0].longitude}
+            />
+          </GoogleMapWrapper>
+        </section>
+      )}
+      <div css={buttonContainerStyling}>
+        <Button
+          variant="primary"
+          onClick={() => setIsDaylogShown((prev) => !prev)}
+          css={buttonStyling}
+        >
+          {isDaylogShown ? '지도 보기' : '데이로그 보기'}
+        </Button>
+      </div>
+    </Flex>
+  );
+};
+
+export default TripMobilePage;
diff --git a/frontend/src/pages/TripPage/TripPage.style.ts b/frontend/src/pages/TripPage/TripPage.style.ts
@@ -1,5 +1,7 @@
 import { css } from '@emotion/react';
 
+import { Theme } from 'hang-log-design-system';
+
 export const containerStyling = css({
   position: 'relative',
 
@@ -13,6 +15,7 @@ export const containerStyling = css({
 
   '@media screen and (max-width: 600px)': {
     width: '100vw',
+    paddingBottom: '0',
   },
 });
 
@@ -23,14 +26,48 @@ export const mapContainerStyling = css({
 
   width: '50vw',
   height: 'calc(100vh - 81px)',
+});
 
-  '@media screen and (max-width: 600px)': {
-    height: 'calc(100vh - 65px)',
-  },
+export const mapMobileContainerStyling = css({
+  position: 'sticky',
+
+  width: '100vw',
+  height: 'calc(100vh - 65px)',
 });
 
 export const skeletonContainerStyling = css({
   '& > div:first-of-type': {
     borderRadius: 0,
   },
 });
+
+export const buttonContainerStyling = css({
+  position: 'fixed',
+  bottom: '30px',
+  display: 'flex',
+  width: '100%',
+  alignItems: 'center',
+  justifyContent: 'center',
+});
+
+export const contentStyling = css({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: Theme.spacer.spacing4,
+
+  width: '100%',
+  padding: `${Theme.spacer.spacing4} 50px`,
+
+  '@media screen and (max-width: 600px)': {
+    padding: `${Theme.spacer.spacing3} ${Theme.spacer.spacing4} 0 ${Theme.spacer.spacing4}`,
+  },
+
+  '& > ul': {
+    width: '100%',
+  },
+});
+
+export const buttonStyling = css({
+  borderRadius: '40px',
+  boxShadow: Theme.boxShadow.shadow8,
+});
diff --git a/frontend/src/pages/TripPage/TripPage.tsx b/frontend/src/pages/TripPage/TripPage.tsx
@@ -1,8 +1,6 @@
 import { useMemo } from 'react';
 import { useParams } from 'react-router-dom';
 
-import { useRecoilValue } from 'recoil';
-
 import { Flex, useSelect } from 'hang-log-design-system';
 
 import { containerStyling, mapContainerStyling } from '@pages/TripPage/TripPage.style';
@@ -14,15 +12,11 @@ import TripMap from '@components/common/TripMap/TripMap';
 
 import { useTripQuery } from '@hooks/api/useTripQuery';
 
-import { mediaQueryMobileState } from '@store/mediaQuery';
-
 const TripPage = () => {
   const { tripId } = useParams();
 
   if (!tripId) throw new Error('존재하지 않는 tripId 입니다.');
 
-  const isMobile = useRecoilValue(mediaQueryMobileState);
-
   const { tripData } = useTripQuery(Number(tripId));
 
   const { selected: selectedDayLogId, handleSelectClick: handleDayLogIdSelectClick } = useSelect(
@@ -53,17 +47,15 @@ const TripPage = () => {
           onTabChange={handleDayLogIdSelectClick}
         />
       </section>
-      {!isMobile && (
-        <section css={mapContainerStyling}>
-          <GoogleMapWrapper>
-            <TripMap
-              places={places}
-              centerLat={tripData.cities[0].latitude}
-              centerLng={tripData.cities[0].longitude}
-            />
-          </GoogleMapWrapper>
-        </section>
-      )}
+      <section css={mapContainerStyling}>
+        <GoogleMapWrapper>
+          <TripMap
+            places={places}
+            centerLat={tripData.cities[0].latitude}
+            centerLng={tripData.cities[0].longitude}
+          />
+        </GoogleMapWrapper>
+      </section>
     </Flex>
   );
 };

diff --git a/frontend/src/router/AppRouter.tsx b/frontend/src/router/AppRouter.tsx
@@ -12,13 +12,15 @@ import TripPageSkeleton from '@pages/TripPage/TripPageSkeleton';
 import TripsPageSkeleton from '@pages/TripsPage/TripsPageSkeleton';
 
 import { isLoggedInState } from '@store/auth';
+import { mediaQueryMobileState } from '@store/mediaQuery';
 
 import * as Lazy from '@router/lazy';
 
 import { PATH } from '@constants/path';
 
 const AppRouter = () => {
   const isLoggedIn = useRecoilValue(isLoggedInState);
+  const isMobile = useRecoilValue(mediaQueryMobileState);
 
   const router = createBrowserRouter([
     {
@@ -40,7 +42,7 @@ const AppRouter = () => {
           path: PATH.TRIP(':tripId'),
           element: (
             <Suspense fallback={<TripPageSkeleton />}>
-              <Lazy.TripPage />
+              {isMobile ? <Lazy.TripMobilePage /> : <Lazy.TripPage />}
             </Suspense>
           ),
         },

diff --git a/frontend/src/router/lazy.ts b/frontend/src/router/lazy.ts
@@ -30,6 +30,10 @@ export const TripPage = lazy(
   () => import(/* webpackChunkName: "TripPage" */ '@pages/TripPage/TripPage')
 );
 
+export const TripMobilePage = lazy(
+  () => import(/* webpackChunkName: "TripPage" */ '@pages/TripPage/TripMobilePage')
+);
+
 export const TripsPage = lazy(
   () => import(/* webpackChunkName: "TripsPage" */ '@pages/TripsPage/TripsPage')
 );
diff --git a/frontend/webpack.config.js b/frontend/webpack.config.js
@@ -5,6 +5,7 @@ const path = require('path');
 const webpack = require('webpack');
 const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
 const CompressionPlugin = require('compression-webpack-plugin');
+const CopyPlugin = require('copy-webpack-plugin');
 
 const prod = process.env.NODE_ENV === 'production';
 
@@ -29,8 +30,6 @@ const plugins = [
 ];
 
 if (!prod) {
-  const CopyPlugin = require('copy-webpack-plugin');
-
   plugins.push(
     new CopyPlugin({
       patterns: [{ from: 'public/mockServiceWorker.js', to: '' }],
@@ -42,9 +41,7 @@ module.exports = {
   mode: prod ? 'production' : 'development',
   devtool: prod ? 'hidden-source-map' : 'eval',
   entry: './src/index.tsx',
-  resolve: {
-    extensions: ['.js', '.jsx', '.ts', '.tsx'],
-  },
+
   module: {
     rules: [
       {