Fix/#196

src/app/(default)/onboarding/page.tsx

@@ -41,7 +41,7 @@ function OnBoardingPage() {
     <div className='safe-screen safe-bottom safe-header flex h-[100dvh] w-full flex-col bg-gray-900'>
       <OnBoardingSlide setActiveSlide={setActiveSlide} />
       <div
-        className={`flex h-[22dvh] w-full flex-col items-center gap-[20px] ${activeSlide === 1 ? 'bg-category-bg-science' : 'bg-gray-300'} px-page py-[32px] pt-[12px] transition-all duration-200 [@media(max-height:750px)]:h-[25dvh]`}
+        className={`flex w-full flex-col items-center gap-[20px] pb-[36px] pt-[16px] ${activeSlide === 1 ? 'bg-category-bg-science' : 'bg-gray-300'} px-page transition-all duration-200`}
       >
         <div className='flex gap-[8px]'>
           {Array(3)

src/app/globals.css

@@ -88,7 +88,7 @@ body {
   position: relative;
   display: flex;
   overflow: auto;
-  -webkit-transform:translate3d(0,0,0);
+  -webkit-transform: translate3d(0, 0, 0);
 
   /* PC view setting */
   @media screen and (min-width: 430px) {
@@ -166,6 +166,10 @@ input[type='date']::-ms-expand {
   height: 100%;
 }
 
+.slick-list {
+  height: 100%;
+}
+
 .slick-slide {
   height: 100%;
 }

src/components/OnBoarding/OnBoardingSlide.tsx

@@ -1,54 +1,45 @@
 import React from 'react';
 import { onBoarding } from '@/data/ui/onBoarding';
-import { useRouter } from 'next/navigation';
 import Slider, { Settings } from 'react-slick';
 import Slide1 from 'public/images/onBoarding/slide-1.svg';
 import Slide2 from 'public/images/onBoarding/slide-2.svg';
 import Slide3 from 'public/images/onBoarding/slide-3.svg';
 import LightBg from 'public/images/flash/light-bg-onboarding.svg';
-import BackButton from '../Button/BackButton';
 
 interface Props {
   setActiveSlide: React.Dispatch<React.SetStateAction<number>>;
 }
 
 /** 온보딩 소개 슬라이드 */
 function OnBoardingSlide({ setActiveSlide }: Props) {
-  const router = useRouter();
-
   const settings: Settings = {
     dots: false,
     arrows: false,
     infinite: true,
     slidesToShow: 1,
     slidesToScroll: 1,
     autoplay: false,
-    adaptiveHeight: true,
+    adaptiveHeight: false,
     beforeChange: (_, next) => {
       setActiveSlide(next + 1);
     },
   };
 
   return (
-    <div className='flex flex-col gap-[20px] bg-gray-900 pt-[24px] transition-all duration-200'>
-      <BackButton
-        fill='#B3B6C4'
-        onClick={() => router.back()}
-        extraClass='px-page'
-      />
-      <Slider {...settings} className='w-full'>
-        <div className='relative !flex h-[calc(80dvh-54px)] flex-col [@media(max-height:750px)]:h-[calc(75dvh-54px)]'>
+    <div className='flex h-[100%] flex-col gap-[20px] bg-gray-900 pt-[24px] transition-all duration-200'>
+      <Slider {...settings} className='h-full w-full'>
+        <div className='relative !flex h-full flex-col'>
           <h1 className='absolute left-1/2 top-[18%] z-50 -translate-x-1/2 text-center text-title-xl-bold text-gray-900 [@media(max-width:375px)]:text-title-lg-bold'>
             {onBoarding[1].title()}
           </h1>
           <div className='w-full translate-y-[2px] [@media(max-height:670px)]:translate-y-[3px]'>
             <LightBg />
           </div>
-          <div className='flex flex-1 translate-y-[1px] flex-col justify-end bg-gray-300 [@media(max-height:670px)]:translate-y-[2px]'>
+          <div className='mt-auto flex flex-1 translate-y-[1px] flex-col justify-end bg-gray-300 [@media(max-height:670px)]:translate-y-[2px]'>
             <Slide1 className='h-auto w-full' />
           </div>
         </div>
-        <div className='relative !flex h-[calc(80dvh-54px)] flex-col [@media(max-height:750px)]:h-[calc(75dvh-54px)]'>
+        <div className='relative !flex h-full flex-col'>
           <h1 className='absolute left-1/2 top-[18%] z-50 -translate-x-1/2 text-center text-title-xl-bold text-gray-900 [@media(max-width:375px)]:text-title-lg-bold'>
             {onBoarding[2].title()}
           </h1>
@@ -59,7 +50,7 @@ function OnBoardingSlide({ setActiveSlide }: Props) {
             <Slide2 className='my-auto h-auto w-full' />
           </div>
         </div>
-        <div className='relative !flex h-[calc(80dvh-54px)] flex-col [@media(max-height:750px)]:h-[calc(75dvh-54px)]'>
+        <div className='relative !flex h-full flex-col'>
           <h1 className='absolute left-1/2 top-[18%] z-50 w-[25dvw] -translate-x-1/2 text-center text-title-xl-bold text-gray-900 mobile:w-[70dvw] [@media(max-width:375px)]:text-title-lg-bold'>
             {onBoarding[3].title()}
           </h1>

src/middleware.ts

@@ -47,7 +47,7 @@ export async function middleware(req: NextRequest) {
   let newSessionToken: string | undefined = undefined;
 
   if (sessionToken && isRemember?.value === 'false' && !isLoggedIn) {
-    response = NextResponse.redirect(new URL('/default', req.url));
+    response = NextResponse.redirect(new URL('/onboarding', req.url));
     response.cookies.set(process.env.NEXTAUTH_TOKEN_NAME || '', '', {
       httpOnly: true,
       secure: true,
@@ -110,7 +110,7 @@ export async function middleware(req: NextRequest) {
 
   if (pathname === '/') {
     if (!sessionToken) {
-      return NextResponse.redirect(new URL('/default', req.url));
+      return NextResponse.redirect(new URL('/onboarding', req.url));
     } else if (defaultWellId && !referer?.includes('/well')) {
       // 재발급
       const redirectResponse = NextResponse.redirect(