fix: Fixed travel-auto page layout (#54)

BTS-Busan-Trip-Supporter · Sep 28, 2024 · cc8e624 · cc8e624
1 parent 8ef9a98
commit cc8e624
Show file tree

Hide file tree

Showing 9 changed files with 122 additions and 111 deletions.
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -5,12 +5,15 @@
   padding: 0;
   margin: 0;
   list-style: none;
+  overscroll-behavior: none;
 }
 
 html,
 body {
   width: 100dvw;
-  height: 100dvh;
+  height: 100svh;
+  display: flex;
+  flex-direction: column;
 }
 
 a {
@@ -19,8 +22,7 @@ a {
 }
 
 main {
-  width: 100%;
-  height: 100%;
+  flex: 1;
   min-width: 375px;
 
   display: flex;

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -26,7 +26,7 @@ export default function RootLayout({
       <head>
         <meta
           name='viewport'
-          content='width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no'
+          content='width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, viewport-fit=cover, user-scalable=no'
         />
       </head>
       <body className={inter.className}>

diff --git a/src/app/pages/travel-auto-page.tsx b/src/app/pages/travel-auto-page.tsx
@@ -150,7 +150,7 @@ export function TravelAutoPage() {
     childNode: (
       <styles.wrapper>
         <InputWhat where={searchContent} setContent={setEvent} />
-        <div ref={ResultsRef}>
+        <div ref={ResultsRef} className='result-wrapper'>
           <ResultWrapper
             isLoading={status === 'pending'}
             isError={status === 'error'}
@@ -331,26 +331,35 @@ function ResultWrapper({
 const styles = {
   wrapper: styled.div`
     width: 100%;
-    height: 100vh;
+    height: calc(100% - 35px);
     overflow-y: scroll;
     -webkit-overflow-scrolling: touch;
     scroll-snap-type: y mandatory;
 
     &::-webkit-scrollbar {
       display: none;
     }
+
+    .result-wrapper {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
   `,
 
   container: styled.div`
     width: 100%;
-    height: 100vh;
+    height: 100%;
     gap: 2rem;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    padding-bottom: 20rem;
     scroll-snap-align: start;
+    overflow-y: scroll;
+    padding: 1rem 0;
   `,
 
   description: styled.p`
@@ -375,7 +384,9 @@ const styles = {
   resultCon: styled.div`
     display: flex;
     width: 100%;
+    height: 100%;
     align-items: flex-start;
+    justify-content: center;
     flex-direction: column;
     gap: 0.5rem;
   `,
@@ -396,6 +407,9 @@ const styles = {
   travel: styled.ul`
     display: flex;
     width: 100%;
+    height: 100%;
+    justify-content: center;
+    align-items: center;
     flex-direction: column;
 
     color: #505050;
@@ -409,6 +423,7 @@ const styles = {
 
     li {
       display: flex;
+      width: 100%;
       gap: 1rem;
       border-bottom: 1px solid #e2e2e2;
       padding: 0.3rem 0;

diff --git a/src/components/NavigationBar.tsx b/src/components/NavigationBar.tsx
@@ -20,77 +20,83 @@ export function NavigationBar() {
   }
 
   return (
-    <styles.container>
-      <button
-        type='button'
-        onClick={() => {
-          router.replace('/my');
-        }}
-      >
-        {pathName === '/my' ? (
-          <styles.menu $active>
-            <styles.icon src='/user-active.svg' alt='user-active-menu' />
-            마이 페이지
-          </styles.menu>
-        ) : (
-          <styles.menu>
-            <styles.icon src='/user.svg' alt='user-menu' />
-            마이 페이지
-          </styles.menu>
-        )}
-      </button>
-      <button
-        type='button'
-        onClick={() => {
-          router.replace('/');
-        }}
-      >
-        {pathName === '/' || pathName.startsWith('/travel') ? (
-          <styles.menu $active>
-            <styles.icon src='/travel-active.png' alt='travel-active-menu' />
-            여행하기
-          </styles.menu>
-        ) : (
-          <styles.menu>
-            <styles.icon src='/travel.png' alt='travel-menu' />
-            여행하기
-          </styles.menu>
-        )}
-      </button>
-
-      <button
-        type='button'
-        onClick={() => {
-          router.replace('/record');
-        }}
-      >
-        {pathName.startsWith('/record') ? (
-          <styles.menu $active>
-            <styles.icon src='/record-active.png' alt='record-active-menu' />
-            기록하기
-          </styles.menu>
-        ) : (
-          <styles.menu>
-            <styles.icon src='/record.png' alt='record-menu' />
-            기록하기
-          </styles.menu>
-        )}
-      </button>
-    </styles.container>
+    <styles.wrapper>
+      <styles.container>
+        <button
+          type='button'
+          onClick={() => {
+            router.replace('/my');
+          }}
+        >
+          {pathName === '/my' ? (
+            <styles.menu $active>
+              <styles.icon src='/user-active.svg' alt='user-active-menu' />
+              마이 페이지
+            </styles.menu>
+          ) : (
+            <styles.menu>
+              <styles.icon src='/user.svg' alt='user-menu' />
+              마이 페이지
+            </styles.menu>
+          )}
+        </button>
+        <button
+          type='button'
+          onClick={() => {
+            router.replace('/');
+          }}
+        >
+          {pathName === '/' || pathName.startsWith('/travel') ? (
+            <styles.menu $active>
+              <styles.icon src='/travel-active.png' alt='travel-active-menu' />
+              여행하기
+            </styles.menu>
+          ) : (
+            <styles.menu>
+              <styles.icon src='/travel.png' alt='travel-menu' />
+              여행하기
+            </styles.menu>
+          )}
+        </button>
+        <button
+          type='button'
+          onClick={() => {
+            router.replace('/record');
+          }}
+        >
+          {pathName.startsWith('/record') ? (
+            <styles.menu $active>
+              <styles.icon src='/record-active.png' alt='record-active-menu' />
+              기록하기
+            </styles.menu>
+          ) : (
+            <styles.menu>
+              <styles.icon src='/record.png' alt='record-menu' />
+              기록하기
+            </styles.menu>
+          )}
+        </button>
+      </styles.container>
+    </styles.wrapper>
   );
 }
 
 const styles = {
-  container: styled.nav`
+  wrapper: styled.nav`
+    display: flex;
+    position: relative;
+    z-index: 99999;
+  `,
+
+  container: styled.div`
     width: 100%;
+    height: 55px;
     display: flex;
     justify-content: space-around;
     align-items: center;
-    padding: 0.75rem 0;
     position: fixed;
     bottom: 0;
     background-color: white;
-    z-index: 99999;
 
     button {
       all: unset;
@@ -101,7 +107,7 @@ const styles = {
     color: ${(props) => (props.$active ? '#605EFF' : '#b0afbc')};
 
     font-family: 'Noto Sans KR';
-    font-size: 0.5rem;
+    font-size: 0.7rem;
     font-style: normal;
     font-weight: 700;
     line-height: normal;
@@ -115,6 +121,6 @@ const styles = {
   `,
 
   icon: styled.img`
-    width: 1.125rem;
+    width: 1.3rem;
   `,
 };
diff --git a/src/components/travel/ContentsCard.tsx b/src/components/travel/ContentsCard.tsx
@@ -16,42 +16,18 @@ export function ContentsCard({
 const styles = {
   container: styled.div<{ $type: 'auto' | 'traveler' | 'edit' }>`
     width: 100%;
-    height: calc(100% - 34px);
+    height: 76%;
     border-radius: 2.6875rem;
     background: #fafaff;
     box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
     position: absolute;
+    padding: 20px;
 
     display: flex;
-    padding: 1.25rem;
     flex-direction: column;
     align-items: center;
-    justify-content: center;
+    justify-content: start;
 
-    top: ${({ $type }) => {
-      switch ($type) {
-        case 'auto':
-          return '12rem';
-        case 'traveler':
-          return '7rem';
-        case 'edit':
-          return '9rem';
-        default:
-          return '12rem';
-      }
-    }};
-
-    padding-bottom: ${({ $type }) => {
-      switch ($type) {
-        case 'auto':
-          return '13rem';
-        case 'traveler':
-          return '8rem';
-        case 'edit':
-          return '10rem';
-        default:
-          return '13rem';
-      }
-    }};
+    top: 24%;
   `,
 };
diff --git a/src/components/travel/DetailCard.tsx b/src/components/travel/DetailCard.tsx
@@ -34,6 +34,8 @@ export function DetailCard({
 }) {
   const [time, setTime] = useState<Times>(place.time ?? '오전');
 
+  console.log(time);
+
   const { data: tourSpot } = useTourSpotData(
     place.item.contentId,
     place.item.contentTypeId,
@@ -161,20 +163,24 @@ export function DetailCard({
 const styles = {
   wrapper: styled.div`
     width: 100%;
-    min-height: 100dvh;
-    flex-shrink: 0;
+    height: 100%;
     display: flex;
     align-items: center;
-    justify-content: center;
+    justify-content: start;
     scroll-snap-align: start;
-    padding: 0.5rem 0.5rem 20rem 0.5rem;
+    padding: 0.5rem;
     flex-direction: column;
     gap: 1rem;
+    overflow-y: scroll;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
   `,
 
   placeCon: styled.div`
     width: 100%;
-    min-height: 20rem;
+    flex: 1;
     border-radius: 10px;
     background: #fff;
     box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);
@@ -216,7 +222,8 @@ const styles = {
 
   placeImg: styled.img<NoImage>`
     width: 100%;
-    height: 16rem;
+    object-fit: content;
+    flex: 1;
     border-radius: 8px;
     margin-top: 0.8rem;
     scale: ${(props) => (props.$isNoImage ? 0.5 : 1)};