add anonymous checkbox

AboutClan · Sep 5, 2024 · b7f00d9 · b7f00d9
1 parent f4129f3
commit b7f00d9
Show file tree

Hide file tree

Showing 4 changed files with 80 additions and 54 deletions.
diff --git a/components/atoms/WritingNavigation.tsx b/components/atoms/WritingNavigation.tsx
@@ -1,49 +1,27 @@
 import { Flex } from "@chakra-ui/react";
-import { useEffect, useState } from "react";
 
-import Slide from "../layouts/PageSlide";
+import { useKeypadHeight } from "../../hooks/custom/useKeypadHeight";
 
 interface WritingNavigationProps extends React.PropsWithChildren {}
 
 function WritingNavigation({ children }: WritingNavigationProps) {
-  const [modalBottom, setModalBottom] = useState("0px");
-
-  useEffect(() => {
-    const handleResize = () => {
-      const viewportHeight = window.visualViewport
-        ? window.visualViewport.height
-        : window.innerHeight;
-      const windowHeight = window.innerHeight;
-      const keyboardHeight = windowHeight - viewportHeight;
-
-      if (keyboardHeight > 0) {
-        // 모바일 키보드가 올라왔을 때의 높이 기준 조정
-        setModalBottom(`${keyboardHeight}px`); // 모달을 키보드 바로 위에 위치
-      } else {
-        setModalBottom("0px"); // 기본 위치
-      }
-    };
-
-    window.addEventListener("resize", handleResize);
-    return () => window.removeEventListener("resize", handleResize);
-  }, []);
+  const keypadHeight = useKeypadHeight();
 
   return (
-    <Slide isFixed={true}>
-      <Flex
-        mx="auto"
-        maxW="var(--max-width)"
-        position="fixed"
-        bottom={modalBottom}
-        left={0}
-        right={0}
-        bgColor="white"
-        borderTop="var(--border-main)"
-        p="8px"
-      >
-        {children}
-      </Flex>
-    </Slide>
+    <Flex
+      mx="auto"
+      maxW="var(--max-width)"
+      position="fixed"
+      bottom={`${keypadHeight}px`}
+      left={0}
+      right={0}
+      bgColor="white"
+      borderTop="var(--border-main)"
+      justifyContent="space-between"
+      p="8px"
+    >
+      {children}
+    </Flex>
   );
 }
 

diff --git a/hooks/custom/useKeypadHeight.ts b/hooks/custom/useKeypadHeight.ts
@@ -0,0 +1,26 @@
+import { useEffect, useState } from "react";
+
+export function useKeypadHeight() {
+  const [keypadHeight, setKeypadHeight] = useState(0);
+
+  useEffect(() => {
+    const handleResize = () => {
+      const viewportHeight = window.visualViewport
+        ? window.visualViewport.height
+        : window.innerHeight;
+      const windowHeight = window.innerHeight;
+
+      setKeypadHeight(windowHeight - viewportHeight);
+    };
+    if (window.visualViewport) {
+      window.visualViewport.addEventListener("resize", handleResize);
+    }
+    return () => {
+      if (window.visualViewport) {
+        window.visualViewport.removeEventListener("resize", handleResize);
+      }
+    };
+  }, []);
+
+  return keypadHeight;
+}
diff --git a/pages/square/secret/writing.tsx b/pages/square/secret/writing.tsx
@@ -1,4 +1,13 @@
-import { Box, Button, Flex, IconButton, Spacer, useDisclosure, VStack } from "@chakra-ui/react";
+import {
+  Box,
+  Button,
+  Checkbox,
+  Flex,
+  IconButton,
+  Spacer,
+  useDisclosure,
+  VStack,
+} from "@chakra-ui/react";
 import { useRouter } from "next/router";
 import { useState } from "react";
 import { FormProvider, SubmitHandler, useForm } from "react-hook-form";
@@ -24,6 +33,7 @@ const defaultFormData: SecretSquareFormData = {
   content: "",
   pollItems: [{ name: "" }, { name: "" }],
   canMultiple: false,
+  isAnonymous: true,
 };
 
 function SquareWritingPage() {
@@ -62,7 +72,7 @@ function SquareWritingPage() {
 
   const onSubmit: SubmitHandler<SecretSquareFormData> = (data) => {
     const type = isPollType ? "poll" : "general";
-    const { category, title, content, pollItems, canMultiple } = data;
+    const { category, title, content, pollItems, canMultiple, isAnonymous } = data;
 
     const formData = new FormData();
 
@@ -78,6 +88,7 @@ function SquareWritingPage() {
     imageFormArr.forEach((imageBlob) => {
       formData.append("images", imageBlob);
     });
+    formData.append("isAnonymous", JSON.stringify(isAnonymous));
 
     createSecretSquareMutate(
       { formData },
@@ -216,21 +227,31 @@ function SquareWritingPage() {
         </VStack>
       </Slide>
       <WritingNavigation>
-        <ImageUploadButton
-          maxFiles={5}
-          setImageUrls={setImageArr}
-          setImageForms={setImageFormArr}
-        />
-        <Button
-          color="var(--gray-600)"
-          type="button"
-          onClick={openPollCreatorDrawer}
-          leftIcon={<i className="fa-regular fa-check-to-slot fa-lg" />}
-          variant="ghost"
-          size="sm"
+        <div>
+          <ImageUploadButton
+            maxFiles={5}
+            setImageUrls={setImageArr}
+            setImageForms={setImageFormArr}
+          />
+          <Button
+            color="var(--gray-600)"
+            type="button"
+            onClick={openPollCreatorDrawer}
+            leftIcon={<i className="fa-regular fa-check-to-slot fa-lg" />}
+            variant="ghost"
+            size="sm"
+          >
+            투표
+          </Button>
+        </div>
+        <Checkbox
+          {...register("isAnonymous", {
+            required: true,
+          })}
+          colorScheme="mintTheme"
         >
-          투표
-        </Button>
+          익명
+        </Checkbox>
       </WritingNavigation>
     </>
   );

diff --git a/types/models/square.ts b/types/models/square.ts
@@ -44,4 +44,5 @@ export type SecretSquareFormData = {
   content: string;
   pollItems: { name: string }[];
   canMultiple: boolean;
+  isAnonymous: boolean;
 };