[ Fix ] 그룹 생성 데이트피커 버튼 제출 오류 / 제출 완료 시 페이지 깜빡임 해결

src/app/[user]/create-group/page.tsx

@@ -3,30 +3,22 @@
 import Modal from "@/common/component/Modal";
 import Sidebar from "@/common/component/Sidebar";
 import ToastProvider from "@/common/component/Toast";
-import CodeClipboard from "@/shared/component/CodeClipboard";
 import { sidebarWrapper } from "@/styles/shared.css";
 import CreateGroupForm from "@/view/user/create-group/CreateGroupForm";
 
 import { wrapper } from "@/view/user/create-group/index.css";
 import { useRouter } from "next/navigation";
-import { useState } from "react";
 
 const CreateGroupPage = () => {
   const router = useRouter();
-  const [responseCode, setResponseCode] = useState("");
-
-  const handleSuccess = (code: string) => {
-    setResponseCode(code);
-  };
 
   return (
     <main className={sidebarWrapper}>
       <ToastProvider />
       <Sidebar />
       <Modal isOpen={true} onClose={() => router.back()} hasCloseBtn>
         <div className={wrapper}>
-          <CreateGroupForm onSuccess={handleSuccess} />
-          {responseCode && <CodeClipboard code={responseCode} />}
+          <CreateGroupForm />
         </div>
       </Modal>
     </main>

src/app/join-group/[code]/query.ts

@@ -1,10 +1,10 @@
 import { getGroupsByCode } from "@/app/api/groups";
 import { joinGroupAction } from "@/app/join-group/[code]/action";
-import { useMutation, useSuspenseQuery } from "@tanstack/react-query";
+import { useMutation, useQuery } from "@tanstack/react-query";
 import { useRouter } from "next/navigation";
 
 export const useGroupByCodeQuery = (code: string) => {
-  return useSuspenseQuery({
+  return useQuery({
     queryKey: ["groupByCode", code],
     queryFn: () => getGroupsByCode(code),
   });

src/common/component/Calendar/index.tsx

@@ -92,13 +92,21 @@ const renderCustomHeader = ({
 }: CustomHeaderProps) => {
   return (
     <div className={customHeaderWrapperStyle}>
-      <button className={arrowWrapperStyle} onClick={decreaseMonth}>
+      <button
+        type="button"
+        className={arrowWrapperStyle}
+        onClick={decreaseMonth}
+      >
         <IcnBtnArrowLeft className={leftArrowStyle({ rotate: false })} />
       </button>
       <div className={dateDetailStyle}>{`${date.getFullYear()}년 ${
         date.getMonth() + 1
       }월`}</div>
-      <button className={arrowWrapperStyle} onClick={increaseMonth}>
+      <button
+        type="button"
+        className={arrowWrapperStyle}
+        onClick={increaseMonth}
+      >
         <IcnBtnArrowLeft className={leftArrowStyle({ rotate: true })} />
       </button>
     </div>

src/shared/component/CodeClipboard/index.tsx

@@ -16,12 +16,15 @@ interface CodeClipboardProps {
 }
 
 const CodeClipboard = ({ label, code }: CodeClipboardProps) => {
-  const { data: groupInfo } = useGroupByCodeQuery(code);
+  const { data: groupInfo, isSuccess } = useGroupByCodeQuery(code);
+
   const { isCopied, copy } = useClipboard(
-    groupInfo?.ownerNickname,
-    groupInfo?.name,
+    groupInfo?.ownerNickname ?? "",
+    groupInfo?.name ?? "",
   );
 
+  if (!isSuccess) return null;
+
   return (
     <div className={wrapperStyle}>
       {label && <p className={labelStyle}>{label}</p>}

src/view/user/create-group/CreateGroupForm/index.tsx

@@ -3,6 +3,7 @@ import { IcnPlus } from "@/asset/svg";
 import Button from "@/common/component/Button";
 import SupportingText from "@/common/component/SupportingText";
 import { useToast } from "@/common/hook/useToast";
+import CodeClipboard from "@/shared/component/CodeClipboard";
 import { Form } from "@/shared/component/Form";
 import DateFormController from "@/shared/component/GroupInfoForm/DateFormController";
 import DescFormController from "@/shared/component/GroupInfoForm/DescFormController";
@@ -16,15 +17,15 @@ import {
 } from "@/shared/component/GroupInfoForm/index.css";
 import { getGroupFormData } from "@/shared/component/GroupInfoForm/util";
 import { zodResolver } from "@hookform/resolvers/zod";
+import { useState } from "react";
 import { useForm } from "react-hook-form";
 import type { z } from "zod";
 import { submitBtnStyle } from "./index.css";
 
-type CreateGroupFormProps = {
-  onSuccess: (code: string) => void;
-};
-const CreateGroupForm = ({ onSuccess }: CreateGroupFormProps) => {
+const CreateGroupForm = () => {
   const { showToast } = useToast();
+  const [code, setCode] = useState("");
+
   const form = useForm<z.infer<typeof groupSchema>>({
     resolver: zodResolver(groupSchema),
     mode: "onTouched",
@@ -41,7 +42,7 @@ const CreateGroupForm = ({ onSuccess }: CreateGroupFormProps) => {
     const data = getGroupFormData(values);
     const code = await createGroupAction(data);
 
-    onSuccess(code);
+    setCode(code);
     showToast("스터디가 정상적으로 만들어졌어요.", "success");
   };
   const error = form.formState.errors.endDate;
@@ -86,6 +87,7 @@ const CreateGroupForm = ({ onSuccess }: CreateGroupFormProps) => {
           스터디 만들기
         </Button>
       </form>
+      {code && <CodeClipboard code={code} />}
     </Form>
   );
 };