+
+
+
+
+ {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 (
+
+ );
+ })}
+
+ {isDaylogShown && (
+
+ )}
+
+
+ {!isDaylogShown && (
+
+ )}
+
+
+
+
+ );
+};
+
+export default TripMobilePage;
diff --git a/frontend/src/pages/TripPage/TripPage.style.ts b/frontend/src/pages/TripPage/TripPage.style.ts
index 6a271788f..e55161f08 100644
--- 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,10 +26,13 @@ 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({
@@ -34,3 +40,34 @@ export const skeletonContainerStyling = css({
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
index e68f3546b..3db990c4b 100644
--- 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}
/>
- {!isMobile && (
-