diff --git a/components/Icons/SolidIcons.tsx b/components/Icons/SolidIcons.tsx index 39cd371e4..5b9b80cf8 100644 --- a/components/Icons/SolidIcons.tsx +++ b/components/Icons/SolidIcons.tsx @@ -1,10 +1,10 @@ export const CalendarCheckIcon = () => ( - + ); @@ -19,3 +19,14 @@ export const NoticeIcon = () => ( ); + +export const ClockIcon = () => ( + + + +); diff --git a/components/organisms/drawer/BottomDrawerLg.tsx b/components/organisms/drawer/BottomDrawerLg.tsx index 0b3c8f514..5b31b2937 100644 --- a/components/organisms/drawer/BottomDrawerLg.tsx +++ b/components/organisms/drawer/BottomDrawerLg.tsx @@ -94,7 +94,6 @@ export default function BottomDrawerLg({ colorScheme="mintTheme" size="lg" isLoading={footer.buttonLoading} - borderRadius="var(--rounded-lg)" onClick={footer.onClick} > {footer.buttonText} @@ -118,11 +117,11 @@ const Layout = styled(motion.div)<{ border-top-left-radius: 20px; border-top-right-radius: 20px; background-color: white; - z-index: 500; + z-index: 501; padding: ${(props) => (props.isxpadding === "true" ? "12px 20px" : "12px 0")}; padding-bottom: ${(props) => props.isxpadding === "true" && props?.paddingoptions?.bottom !== 0 - ? `${20 + iPhoneNotchSize()}px` + ? `${8 + iPhoneNotchSize()}px` : iPhoneNotchSize()}; touch-action: none; /* 터치 스크롤을 막음 */ display: flex; @@ -131,11 +130,12 @@ const Layout = styled(motion.div)<{ `; const TopNav = styled.nav` - width: 56px; - height: 4px; - border-radius: 4px; - background-color: var(--gray-400); - margin-bottom: 16px; + width: 60px; + height: 5px; + border-radius: 100px; + background-color: var(--gray-500); + opacity: 0.4; + margin-bottom: 12px; `; const Header = styled.header` diff --git a/components/organisms/drawer/BottomFlexDrawer.tsx b/components/organisms/drawer/BottomFlexDrawer.tsx index dd34ff016..da1833200 100644 --- a/components/organisms/drawer/BottomFlexDrawer.tsx +++ b/components/organisms/drawer/BottomFlexDrawer.tsx @@ -11,7 +11,7 @@ export default function BottomFlexDrawer({ setIsModal, options, isAnimation = true, - height = 403.5, + children, isxpadding = true, isOverlay = true, @@ -21,7 +21,7 @@ export default function BottomFlexDrawer({ const header = options?.header; const footer = options?.footer; - const [drawerHeight, setDrawerHeight] = useState(height); // 초기 높이 + const [drawerHeight, setDrawerHeight] = useState(DRAWER_MAX_HEIGHT); // 초기 높이 const startYRef = useRef(0); // 드래그 시작 위치 저장 const currentHeightRef = useRef(drawerHeight); // 현재 높이 저장 diff --git a/pageTemplates/layout/Layout.tsx b/pageTemplates/layout/Layout.tsx index 9062b6158..655358b5d 100644 --- a/pageTemplates/layout/Layout.tsx +++ b/pageTemplates/layout/Layout.tsx @@ -13,6 +13,7 @@ import PageTracker from "../../components/layouts/PageTracker"; import { useToken } from "../../hooks/custom/CustomHooks"; import { useToast } from "../../hooks/custom/CustomToast"; import { parseUrlToSegments } from "../../utils/stringUtils"; +import { iPhoneNotchSize } from "../../utils/validationUtils"; import BaseModal from "./BaseModal"; import BaseScript from "./BaseScript"; import Seo from "./Seo"; @@ -90,7 +91,7 @@ function Layout({ children }: ILayout) { : !NOT_PADDING_NAV_SEGMENT.includes(currentSegment?.[0]) ? { paddingTop: "56px", - // paddingBottom: `calc(var(--bottom-nav-height) + ${iPhoneNotchSize()}px`, + paddingBottom: `calc(var(--bottom-nav-height) + ${iPhoneNotchSize()}px`, } : undefined } diff --git a/pageTemplates/vote/StudyControlButton.tsx b/pageTemplates/vote/StudyControlButton.tsx index 0a9cda224..757c51e2d 100644 --- a/pageTemplates/vote/StudyControlButton.tsx +++ b/pageTemplates/vote/StudyControlButton.tsx @@ -1,8 +1,12 @@ -import { Button } from "@chakra-ui/react"; +import { Box, Button } from "@chakra-ui/react"; import { useSearchParams } from "next/navigation"; import { useState } from "react"; import { useRecoilValue } from "recoil"; import { CheckCircleIcon } from "../../components/Icons/CircleIcons"; +import { CalendarCheckIcon, ClockIcon } from "../../components/Icons/SolidIcons"; +import BottomDrawerLg, { + IBottomDrawerLgOptions, +} from "../../components/organisms/drawer/BottomDrawerLg"; import { DRAWER_MIN_HEIGHT } from "../../components/organisms/drawer/BottomFlexDrawer"; import { myStudyParticipationState } from "../../recoils/studyRecoils"; @@ -22,24 +26,68 @@ function StudyControlButton({ isAleadyAttend }: StudyControlButtonProps) { const isOpenStudy = myStudyParticipation?.status === "open"; + const options: IBottomDrawerLgOptions = { + footer: { + buttonText: "취소", + onClick: () => {}, + }, + }; + return ( - + <> + + { + + + + + + } + // //
- + {cardArr && cardArr.map((card, idx) => ( diff --git a/theme.ts b/theme.ts index eb9ae4dbe..13041d58e 100644 --- a/theme.ts +++ b/theme.ts @@ -111,6 +111,7 @@ const theme = extendTheme({ h: "48px", fontWeight: 700, fontSize: "14px", + borderRadius: "12px", }, }, variants: {