feat(qa): bottomsheet height 수정 (#364)

* style: small mobile bottom sheet layout 양옆 간격 맞추기 * feat: floating button bottmSheet과 tooltip 겹침 현상 처리 * ✨ feat: small mobile 환경 calendar bottomsheet layout 조정 * 🎨 style: onboarding bottomsheet max height 80vh로 수정 * 🎨 style: scroll bar custom * ✨ feat: calendar bottomsheet height 90vh로 고정 * 🎨 style: 카테고리 bottomsheet height 90dvh로 고정 * ♻️ refactor: vh dvh로 변경 --------- Co-authored-by: DuHyeon Yoon <[email protected]>
depromeet · Nov 20, 2023 · 20310d3 · 20310d3
1 parent 5b8311e
commit 20310d3
Show file tree

Hide file tree

Showing 12 changed files with 78 additions and 29 deletions.
diff --git a/src/app/favicon.ico b/src/app/favicon.ico
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -5,6 +5,24 @@
 @import '~slick-carousel/slick/slick.css';
 @import '~slick-carousel/slick/slick-theme.css';
 
+@layer base {
+  /* 스크롤바 커스텀 */
+  ::-webkit-scrollbar {
+    width: 16px; /* 스크롤바의 너비 */
+    height: 16px;
+  }
+  ::-webkit-scrollbar-track {
+    background: none;
+  }
+  ::-webkit-scrollbar-thumb {
+    /* height: 30%; 스크롤바의 길이 */
+    background: #6f6f6f; /* 스크롤바의 색상 */
+    border-radius: 10px;
+    background-clip: padding-box;
+    border: 6px solid transparent;
+  }
+}
+
 @layer components {
   .body-h-screen {
     /* equivalent to 100dvh in major browsers */

diff --git a/src/app/toks-main/components/CategoryBottomSheet.tsx b/src/app/toks-main/components/CategoryBottomSheet.tsx
@@ -39,7 +39,7 @@ export const CategoryBottomSheet = () => {
 
   return (
     <BottomSheet
-      className="flex flex-col "
+      className="flex h-categoryBottomSheet flex-col "
       isShow={isShow}
       onClose={() => {
         setIsShow(false);
@@ -61,6 +61,7 @@ export const CategoryBottomSheet = () => {
         }}
       />
       <CategoryButtonGroups
+        className="h-categoryArea overflow-auto"
         buttons={buttons ?? []}
         selectedButtons={selectedLocalCategory}
         onClick={(value) => {

diff --git a/src/app/toks-main/components/CategoryButtonGroups.tsx b/src/app/toks-main/components/CategoryButtonGroups.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Button, Text } from '@/common';
+import { Button, Text, cn } from '@/common';
 
 interface CategoryButton {
   label: string;
@@ -11,15 +11,17 @@ interface CategoryButtonGroupsProps {
   buttons: CategoryButton[];
   selectedButtons: string[];
   onClick: (value: string) => void;
+  className?: string;
 }
 
 export const CategoryButtonGroups = ({
   buttons,
   onClick,
   selectedButtons,
+  className,
 }: CategoryButtonGroupsProps) => {
   return (
-    <div className="px-20px py-24px">
+    <div className={cn('px-20px py-24px', className)}>
       <div className="flex flex-wrap gap-[15px]">
         {buttons.length > 0 ? (
           buttons.map(({ value, label }) => {

diff --git a/src/app/toks-main/components/OnboardingBottomsheet/OnboardingCarousel.tsx b/src/app/toks-main/components/OnboardingBottomsheet/OnboardingCarousel.tsx
@@ -33,20 +33,16 @@ export const OnboardingCarousel = () => {
           {...setting}
         >
           {ONBOARDING_IMAGES.map((url) => (
-            <div key={url}>
-              <Image
-                className="m-auto h-420px w-336px small-mobile:h-380px small-mobile:w-280px"
-                alt="onboarding"
-                src={url}
-              />
+            <div key={url} className="max-h-bottomSheetImage overflow-auto">
+              <Image className="w-full" alt="onboarding" src={url} />
             </div>
           ))}
         </Slider>
       </div>
       {currentSlide !== 2 ? (
         <Button
           onClick={() => slider?.current?.slickNext()}
-          className="absolute bottom-0px w-full"
+          className="absolute bottom-0px left-0 right-0 mx-auto w-full"
           size="L"
           typo="subheadingBold"
           backgroundColor="primaryDefault"
@@ -57,7 +53,7 @@ export const OnboardingCarousel = () => {
         <Button
           iconName="KAKAO"
           iconPosition="LEFT"
-          className="absolute bottom-0px w-full"
+          className="absolute bottom-0px left-0 right-0 mx-auto w-full"
           size="L"
           textColor="kakaoText"
           typo="subheadingBold"

diff --git a/src/app/toks-main/components/OnboardingBottomsheet/index.tsx b/src/app/toks-main/components/OnboardingBottomsheet/index.tsx
@@ -7,8 +7,8 @@ import { BottomSheetProps } from '../../types/bottomsheet';
 
 export const OnboardingBottomSheet = ({ onClose }: BottomSheetProps) => {
   return (
-    <div className="relative px-20px py-24px">
-      <div className="flex items-center justify-between pb-22px">
+    <div className="relative max-h-bottomSheet px-20px py-24px">
+      <div className="mx-auto flex w-full items-center justify-between pb-22px">
         <Text typo="headingM" color="gray10">
           똑스와 함께 시작해볼까요?
         </Text>

diff --git a/src/app/toks-main/components/ProgressCheckBottomSheet/index.tsx b/src/app/toks-main/components/ProgressCheckBottomSheet/index.tsx
@@ -23,7 +23,7 @@ export const ProgressCheckBottomSheet = ({ onClose }: BottomSheetProps) => {
   );
 
   return (
-    <div className="flex flex-col justify-center px-20px py-16px">
+    <div className="flex max-h-bottomSheet flex-col justify-center px-20px py-16px">
       <button className="flex justify-end">
         <Image
           src={ICON_URL.CLOSE}
@@ -37,7 +37,7 @@ export const ProgressCheckBottomSheet = ({ onClose }: BottomSheetProps) => {
       </button>
       <div className="my-20px flex justify-between">
         <div className="flex flex-col">
-          <Text typo="headingL">{progress?.username}님,</Text>
+          <Text typo="headingL">{progress?.username}님, </Text>
           <div>
             <Text color="primaryDefault" typo="headingL">
               {progress?.attendance}번째{' '}
@@ -52,14 +52,16 @@ export const ProgressCheckBottomSheet = ({ onClose }: BottomSheetProps) => {
           height={53}
         />
       </div>
-      {progress && (
-        <QuizProgress
-          todayDescription={progress.description1}
-          totalDescription={progress.description2}
-        />
-      )}
-      <div className="m-auto mb-20px mt-16px w-fit">
-        <ToksCalendar />
+      <div className="max-h-progressBottomSheet overflow-auto">
+        {progress && (
+          <QuizProgress
+            todayDescription={progress.description1}
+            totalDescription={progress.description2}
+          />
+        )}
+        <div className="m-auto mb-20px mt-16px w-fit">
+          <ToksCalendar />
+        </div>
       </div>
       <Button
         onClick={() => onClose()}

diff --git a/src/app/toks-main/page.tsx b/src/app/toks-main/page.tsx
@@ -1,16 +1,20 @@
 'use client';
 import { useEffect, useState } from 'react';
+import { useRecoilState } from 'recoil';
 
 import { FloatingButton, Toast, ToastProps } from '@/common';
 import { useToast } from '@/common/hooks';
+import { isVisibleFloatingButtonBottomSheetAtom } from '@/store';
 
 import { CardList } from './components/CardList';
 import { MainPageBottomSheet } from './components/MainPageBottomSheet';
 
 function ToksMainPage() {
   const { getSavedToastInfo, clearSavedToast } = useToast();
   const [toastData, setToastData] = useState<ToastProps | null>(null);
-  const [isShow, setIsShow] = useState(false);
+
+  const [isOpenFloatingButtonBottomSheet, setIsOpenFloatingButtonBottomSheet] =
+    useRecoilState(isVisibleFloatingButtonBottomSheetAtom);
 
   useEffect(() => {
     setToastData(getSavedToastInfo());
@@ -29,8 +33,13 @@ function ToksMainPage() {
         />
       )}
       <CardList />
-      <FloatingButton onClick={() => setIsShow(true)} />
-      <MainPageBottomSheet onClose={() => setIsShow(false)} isShow={isShow} />
+      <FloatingButton
+        onClick={() => setIsOpenFloatingButtonBottomSheet(true)}
+      />
+      <MainPageBottomSheet
+        onClose={() => setIsOpenFloatingButtonBottomSheet(false)}
+        isShow={isOpenFloatingButtonBottomSheet}
+      />
     </div>
   );
 }

diff --git a/src/common/components/Appbar/index.tsx b/src/common/components/Appbar/index.tsx
@@ -3,11 +3,14 @@
 import Image from 'next/image';
 import { useRouter } from 'next/navigation';
 import React from 'react';
-import { useRecoilState } from 'recoil';
+import { useRecoilState, useRecoilValue } from 'recoil';
 
 import { ICON_URL, LOGIN_URL } from '@/common/constants';
 import { useAuth } from '@/common/hooks';
-import { isVisibleCategoryBottomSheetAtom } from '@/store';
+import {
+  isVisibleCategoryBottomSheetAtom,
+  isVisibleFloatingButtonBottomSheetAtom,
+} from '@/store';
 
 import { SSRSuspense } from '../SSRSuspense';
 import { Text } from '../Text';
@@ -18,6 +21,9 @@ export const Appbar = () => {
   const { isLogin, user } = useAuth();
   const [isOpenCategoryBottomSheet, setIsOpenCategoryBottomSheet] =
     useRecoilState(isVisibleCategoryBottomSheetAtom);
+  const isOpenFloatingButtonBottomSheet = useRecoilValue(
+    isVisibleFloatingButtonBottomSheetAtom
+  );
 
   // TODO: useAppbar hook 구현
   return (
@@ -44,7 +50,9 @@ export const Appbar = () => {
             <Tooltip
               isFirstRender
               message="관심있는 카테고리를 선택해보세요"
-              isVisibleTooltip={!isOpenCategoryBottomSheet}
+              isVisibleTooltip={
+                !isOpenCategoryBottomSheet && !isOpenFloatingButtonBottomSheet
+              }
             >
               <button type="button" className="h-fit">
                 <Image

diff --git a/src/store/floatingButton.ts b/src/store/floatingButton.ts
@@ -0,0 +1,6 @@
+import { atom } from 'recoil';
+
+export const isVisibleFloatingButtonBottomSheetAtom = atom<boolean>({
+  key: 'isVisibleFloatingButtonBottomSheetAtom',
+  default: false,
+});
diff --git a/src/store/index.ts b/src/store/index.ts
@@ -1 +1,2 @@
 export * from './category';
+export * from './floatingButton';
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -38,6 +38,9 @@ module.exports = {
       },
       height: {
         main: 'calc(100dvh - 54px)',
+        categoryBottomSheet: '90dvh',
+        categoryArea: 'calc(90dvh - 200px)',
+        onboardingBottomSheet: 'calc(80dvh - 220px)',
         ...generatorTailwindConfigList(300, 2),
       },
       width: {
@@ -54,6 +57,9 @@ module.exports = {
         ...generatorTailwindConfigList(300, 2),
       },
       maxHeight: {
+        bottomSheet: '90dvh',
+        bottomSheetImage: 'calc(80dvh - 220px)',
+        progressBottomSheet: 'calc(90dvh - 200px)',
         ...generatorTailwindConfigList(300, 2),
       },
       gap: {
Original file line number	Diff line number	Diff line change
		@@ -1 +1,2 @@
		export * from './category';
		export * from './floatingButton';