Hotfix: modify alert modal state to recoil and fix the modal style

src/chakra/buttonCustom.ts

@@ -0,0 +1,79 @@
+import { defineStyle, defineStyleConfig } from "@chakra-ui/react";
+
+const baseStyle = defineStyle({
+  _hover: {
+    _disabled: {
+      backgroundColor: "neutral.200",
+      color: "neutral.400",
+    },
+  },
+  _disabled: {
+    backgroundColor: "neutral.200",
+    color: "neutral.400",
+  },
+});
+
+const CTAButton = defineStyle({
+  position: "fixed",
+  bottom: "2.4rem",
+  left: "50%",
+  transform: "translateX(-50%)",
+  width: "32.7rem",
+  height: "4.6rem",
+
+  backgroundColor: "primary.300",
+  borderRadius: "16px",
+
+  color: "neutral.0",
+  fontSize: "button",
+  fontWeight: "button",
+  lineHeight: "button",
+
+  zIndex: "2",
+
+  _hover: {
+    backgroundColor: "primary.400",
+  },
+});
+
+const blueButton = defineStyle({
+  backgroundColor: "primary.300",
+  borderRadius: "16px",
+  boxShadow: "shadow.200",
+
+  color: "neutral.0",
+  fontSize: "button",
+  fontWeight: "button",
+  lineHeight: "button",
+
+  _hover: {
+    backgroundColor: "primary.400",
+  },
+});
+
+const voteButton = defineStyle({
+  w: "18.4rem",
+  h: "5.4rem",
+  backgroundColor: "primary.300",
+  borderRadius: "48px",
+  boxShadow: "shadow.200",
+
+  position: "fixed",
+  left: "50%",
+  transform: "translateX(-50%)",
+  bottom: "8rem",
+
+  color: "neutral.0",
+  fontSize: "button",
+  fontWeight: "button",
+  lineHeight: "button",
+
+  _hover: {
+    backgroundColor: "primary.400",
+  },
+});
+
+export const buttonTheme = defineStyleConfig({
+  baseStyle,
+  variants: { CTAButton, blueButton, voteButton },
+});

src/chakra/chakraCustomTheme.ts

@@ -1,10 +1,11 @@
 import { extendTheme } from "@chakra-ui/react";
 
 import { avatarTheme } from "./avatarCustom";
+import { buttonTheme } from "./buttonCustom";
+import { checkboxTheme } from "./checkboxCustom";
 import { modalTheme } from "./modalCustom";
 import { tabsTheme } from "./tabsCustom";
 import { tagTheme } from "./tagCustom";
-
 export const customTheme = extendTheme({
   styles: {
     global: {
@@ -216,75 +217,8 @@ export const customTheme = extendTheme({
     Tabs: tabsTheme,
     Tag: tagTheme,
     Modal: modalTheme,
-    Button: {
-      baseStyle: {
-        _disabled: {
-          backgroundColor: "neutral.200",
-          color: "neutral.400",
-          PointerEvent: "none",
-        },
-      },
-      //ex) Button 컴포넌트 내부에 variant="CTAButton"
-      variants: {
-        blueButton: {
-          backgroundColor: "primary.300",
-          borderRadius: "16px",
-          boxShadow: "shadow.200",
-
-          color: "neutral.0",
-          fontSize: "button",
-          fontWeight: "button",
-          lineHeight: "button",
-
-          _hover: {
-            backgroundColor: "primary.400",
-          },
-        },
-        CTAButton: {
-          position: "fixed",
-          bottom: "2.4rem",
-          left: "50%",
-          transform: "translateX(-50%)",
-          width: "32.7rem",
-          height: "4.6rem",
-
-          backgroundColor: "primary.300",
-          borderRadius: "16px",
-
-          color: "neutral.0",
-          fontSize: "button",
-          fontWeight: "button",
-          lineHeight: "button",
-
-          zIndex: "2",
-
-          _hover: {
-            backgroundColor: "primary.400",
-          },
-        },
-        voteButton: {
-          w: "18.4rem",
-          h: "5.4rem",
-          backgroundColor: "primary.300",
-          borderRadius: "48px",
-          boxShadow: "shadow.200",
-
-          position: "fixed",
-          left: "50%",
-          transform: "translateX(-50%)",
-          bottom: "8rem",
-
-          color: "neutral.0",
-          fontSize: "button",
-          fontWeight: "button",
-          lineHeight: "button",
-
-          _hover: {
-            backgroundColor: "primary.400",
-          },
-        },
-      },
-    },
+    Checkbox: checkboxTheme,
+    Button: buttonTheme,
   },
 
   fonts: {

src/chakra/checkboxCustom.ts

@@ -0,0 +1,32 @@
+import { checkboxAnatomy } from "@chakra-ui/anatomy";
+import { createMultiStyleConfigHelpers, defineStyle } from "@chakra-ui/react";
+
+// import CheckedIcon from "@/assets/voteIcons/Checkbox_checked.svg?react";
+
+const { definePartsStyle, defineMultiStyleConfig } =
+  createMultiStyleConfigHelpers(checkboxAnatomy.keys);
+
+const candidateCheckbox = definePartsStyle({
+  control: defineStyle({
+    rounded: "full",
+    boxSize: "2rem",
+    mr: "12px",
+    mb: "35px",
+    _checked: {
+      background: "#2388FF",
+      borderColor: "#2388FF",
+      _hover: {
+        background: "#2388FF",
+        borderColor: "#2388FF",
+      },
+    },
+    _active: {
+      background: "#2388FF",
+      borderColor: "#2388FF",
+    },
+  }),
+});
+
+export const checkboxTheme = defineMultiStyleConfig({
+  variants: { candidateCheckbox },
+});

src/chakra/modalCustom.ts

@@ -1,28 +1,49 @@
 import { modalAnatomy } from "@chakra-ui/anatomy";
-import { createMultiStyleConfigHelpers } from "@chakra-ui/styled-system";
+import {
+  createMultiStyleConfigHelpers,
+  defineStyle,
+} from "@chakra-ui/styled-system";
 
 const { definePartsStyle, defineMultiStyleConfig } =
   createMultiStyleConfigHelpers(modalAnatomy.keys);
 
 const baseStyle = definePartsStyle({
+  //dialog 부모 박스, 가로 사이즈 정하고 가운데 정렬
+  dialogContainer: {
+    width: "100%",
+    maxWidth: "45rem",
+    minWidth: "36rem",
+    left: "50%",
+    transform: "translateX(-50%)",
+  },
+  closeButton: {
+    fontSize: "1.5rem",
+    top: "16px",
+    right: "16px",
+  },
   overlay: {
-    bg: "rgba(20, 20, 20, 0.8)",
+    bg: "rgba(0, 0, 0, 0.6)",
   },
 });
 
+const alertSizeForDialog = defineStyle({
+  mx: "20px",
+});
+
 const alertModal = definePartsStyle({
   dialogContainer: {
-    width: "45rem",
+    width: "100%",
+    maxWidth: "45rem",
     minWidth: "36rem",
     left: "50%",
     transform: "translateX(-50%)",
-    px: "0",
   },
   dialog: {
-    w: "31.1rem",
+    w: "100%",
+    maxWidth: "45rem",
     mt: "264px",
-    mx: "0",
-    p: "32px 20px",
+    mx: "32px",
+    p: "32px 24px",
 
     borderRadius: "16px",
     gap: "24px",
@@ -40,7 +61,12 @@ const alertModal = definePartsStyle({
   },
 });
 
+const sizes = {
+  xl: definePartsStyle({ dialog: alertSizeForDialog }),
+};
+
 export const modalTheme = defineMultiStyleConfig({
+  sizes,
   baseStyle,
   variants: { alertModal },
 });

src/components/AlertModal/AlertModal.tsx

@@ -29,6 +29,7 @@ import { AlertModalProps } from "@/types/vote";
 const AlertModal = ({
   title,
   subText,
+  cancelText,
   actionButton,
   isSmallSize,
   onClickAction,
@@ -57,7 +58,7 @@ const AlertModal = ({
             onClick={() => setIsModalOpen(false)}
             className={styles.buttons__cancel}
           >
-            취소
+            {cancelText ? cancelText : "취소"}
           </button>
           <button onClick={onClickAction} className={styles.buttons__action}>
             {actionButton}

src/components/Vote/CreatVoteTitleModal/CreatVoteTitleModal.tsx

@@ -32,30 +32,31 @@ const CreatVoteTitleModal = () => {
 
       <Modal isOpen={isOpen} onClose={onClose} size={"lg"}>
         <ModalOverlay
-          maxWidth="45rem"
-          left="50%"
-          transform="translateX(-50%)"
+        // maxWidth="45rem"
+        // left="50%"
+        // transform="translateX(-50%)"
         />
         <ModalContent
-          px="10px"
-          py="20px"
-          borderRadius="20px"
+          px="20px"
+          py="40px"
+          mx="24px"
+          maxWidth="100%"
+          borderRadius="16px"
           alignSelf="center"
-          w="32.7rem"
-          h="23.6rem"
           boxSizing="border-box"
         >
           <ModalHeader
             fontWeight="titleSmall"
             fontSize="titleSmall"
             textAlign="center"
-            mt="5px"
+            p="0"
+            mb="32px"
           >
             투표 제목을 정해주세요
           </ModalHeader>
           <ModalCloseButton />
 
-          <ModalBody>
+          <ModalBody p="0">
             <FormControl justifyContent={"center"}>
               <Input
                 onChange={(e) => setInputCount(e.target.value.length)}
@@ -65,7 +66,6 @@ const CreatVoteTitleModal = () => {
                 variant="flushed"
                 placeholder=" 숙소 정하자, 카페 정하자"
                 fontSize="subTitle"
-                mt="5%"
               />
               <FormLabel
                 display="flex"
@@ -80,7 +80,7 @@ const CreatVoteTitleModal = () => {
             </FormControl>
           </ModalBody>
 
-          <ModalFooter>
+          <ModalFooter p="0" mt="24px">
             <Button
               type="submit"
               onClick={onClose}

src/components/Vote/DeleteCandidatesButton/DeleteCandidatesButton.module.scss

@@ -0,0 +1,43 @@
+@use "@/sass" as *;
+
+.container {
+  width: 100%;
+  max-width: 45rem;
+  min-width: 36rem;
+  height: 7rem;
+
+  background: $primary300;
+
+  display: flex;
+
+  position: fixed;
+  left: 50%;
+  bottom: 0;
+  transform: translateX(-50%);
+
+  z-index: 3;
+
+  color: $neutral0;
+
+  .cancelButton,
+  .deleteButton {
+    @include typography(button);
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex: 1;
+
+    gap: 4px;
+
+    & > svg {
+      width: 2.2rem;
+      height: 2.2rem;
+      color: $neutral0;
+    }
+
+    &:disabled {
+      background: $neutral200;
+    }
+  }
+}