FEAT vaul drawer testing (#develop)

Author: createhb21

services/ahhachul.com/src/components/common/filter/drawerFilter/DrawerFilter.component.tsx

@@ -32,8 +32,8 @@ const DrawerFilter: React.FC<DrawerFilterProps> = ({ label, drawerTitle }) => {
         </S.FilterButton>
       </Drawer.Trigger>
       <Drawer.Portal>
-        <S.Overlay />
-        <S.DrawerContent>
+        <Drawer.Overlay css={S.overlay} />
+        <Drawer.Content css={S.drawerContainer}>
           <S.ContentWrapper>
             <S.Header>
               <S.ActionButton variant="cancel" onClick={handleToggleDrawer}>
@@ -52,7 +52,7 @@ const DrawerFilter: React.FC<DrawerFilterProps> = ({ label, drawerTitle }) => {
             </S.SearchContainer>
             <S.ContentArea />
           </S.ContentWrapper>
-        </S.DrawerContent>
+        </Drawer.Content>
       </Drawer.Portal>
     </Drawer.Root>
   );

services/ahhachul.com/src/components/common/filter/drawerFilter/DrawerFilter.styled.tsx

@@ -21,7 +21,7 @@ export const FilterButton = styled.button<{ isActive: boolean }>`
   }
 `;
 
-export const Overlay = styled(Drawer.Overlay)`
+export const overlay = css`
   position: fixed;
   top: 0;
   right: 0;
@@ -30,18 +30,17 @@ export const Overlay = styled(Drawer.Overlay)`
   background-color: rgba(0, 0, 0, 0.4);
 `;
 
-export const DrawerContent = styled(Drawer.Content)`
-  z-index: ${({ theme }) => theme.zIndex.drawer};
+export const drawerContainer = css`
+  z-index: 999999999;
   display: flex;
   flex-direction: column;
   border-top-left-radius: 10px;
   border-top-right-radius: 10px;
-  height: max-content;
+  max-height: 96%;
   position: fixed;
   bottom: 0;
   left: 0;
   right: 0;
-  box-shadow: 0px -10px 16px 0px rgba(0, 0, 0, 0.17);
 `;
 
 export const ContentWrapper = styled.div`

services/ahhachul.com/src/components/common/float/atoms/floatBtn/FloatButton.component.tsx

@@ -4,11 +4,12 @@ import * as S from './FloatButton.styled';
 
 interface FloatButtonProps {
   onClick: () => void;
+  className?: string;
 }
 
-const FloatButton = ({ onClick, children }: PropsWithChildren<FloatButtonProps>) => {
+const FloatButton = ({ onClick, className, children }: PropsWithChildren<FloatButtonProps>) => {
   return (
-    <S.FloatButton type="button" onClick={onClick}>
+    <S.FloatButton type="button" className={className} onClick={onClick}>
       {children}
     </S.FloatButton>
   );

services/ahhachul.com/src/components/common/float/molecules/newBtn/newBtn.component.tsx

@@ -12,6 +12,7 @@ interface NewBtnProps {
   type?: NewBtnType;
   replace?: boolean;
   checkAuth?: boolean;
+  className?: string;
 }
 
 const NewBtn = ({
@@ -20,6 +21,7 @@ const NewBtn = ({
   type = 'new',
   replace = false,
   checkAuth = true,
+  className,
 }: NewBtnProps) => {
   const { push, replace: replacePage } = useFlow();
   const { authService } = useAuth();
@@ -36,7 +38,7 @@ const NewBtn = ({
   };
 
   return (
-    <UiComponent.FloatButton onClick={onClick}>
+    <UiComponent.FloatButton className={className} onClick={onClick}>
       {type === 'new' ? <PlusIcon /> : <ListIcon />}
       <span>{label}</span>
     </UiComponent.FloatButton>

services/ahhachul.com/src/components/common/maintain/MaintainContent.component.tsx

@@ -2,7 +2,7 @@ import styled from '@emotion/styled';
 
 import { useFlow } from '@/stackflow';
 
-const MaintainContent = () => {
+const MaintainContent = ({ actionLabel = '홈으로' }: { actionLabel?: string }) => {
   const { pop } = useFlow();
   const handleBack = () => pop();
 
@@ -34,7 +34,7 @@ const MaintainContent = () => {
         <Title>기능 준비 중입니다</Title>
         <Message>{'더 나은 서비스 제공을 위해\n해당 기능의 업데이트를 진행하고 있습니다.'}</Message>
         <ButtonGroup>
-          <HomeButton onClick={handleBack}>홈으로</HomeButton>
+          <HomeButton onClick={handleBack}>{actionLabel}</HomeButton>
         </ButtonGroup>
       </ContentWrapper>
     </Container>

services/ahhachul.com/src/components/domain/complaint/postDetail/sendMessage/SendMessage.component.tsx

@@ -108,5 +108,9 @@ export default function SendComplaintMessage({
 
   if (!isAuthor) return null;
 
-  return <UiComponent.FloatButton onClick={handleClick}>즉시 민원 보내기</UiComponent.FloatButton>;
+  return (
+    <UiComponent.FloatButton css={{ bottom: '130px' }} onClick={handleClick}>
+      즉시 민원 보내기
+    </UiComponent.FloatButton>
+  );
 }

services/ahhachul.com/src/pages/complaint/[id]/edit.tsx

@@ -1,7 +1,12 @@
 import { LayoutComponent } from '@/components';
+import { MaintainContent } from '@/components/common';
 
 const EditComplaintPage = () => {
-  return <LayoutComponent.Base>EditComplaintPage</LayoutComponent.Base>;
+  return (
+    <LayoutComponent.Base>
+      <MaintainContent actionLabel="뒤로 가기" />
+    </LayoutComponent.Base>
+  );
 };
 
 export default EditComplaintPage;

services/ahhachul.com/src/pages/subway/map-page.tsx

@@ -1,7 +1,12 @@
 import { LayoutComponent } from '@/components';
+import { MaintainContent } from '@/components/common';
 
 const SubwayMapPage = () => {
-  return <LayoutComponent.Base>지하철 노선도</LayoutComponent.Base>;
+  return (
+    <LayoutComponent.Base>
+      <MaintainContent />
+    </LayoutComponent.Base>
+  );
 };
 
 export default SubwayMapPage;