Merge pull request #278 from gloddy-dev/feature/274-refactoring-creat…

…e-group-page

Feature : 모임 개설 페이지 및 BottomSheet 리팩토링

src/apis/groups/type.ts

@@ -9,6 +9,8 @@ export interface Grouping {
   meetDate: string; // '2021-08-01'
   startTime: string; // '19:00'
   endTime: string; // '21:00'
+  placeName: string;
+  placeAddress: string;
   placeLatitude: number;
   placeLongitude: number;
 }
@@ -23,10 +25,6 @@ export interface Article {
   commentCount: number;
   isCertifiedStudent: boolean;
   isCaptain: boolean;
-  isWriter: boolean;
-  isWriterCaptain: boolean;
-  isWriterCertifiedStudent: boolean;
-  writerReliabilityLevel: string;
   images: string[];
 }
 
@@ -52,8 +50,18 @@ export interface GroupDetailResponse extends Omit<Grouping, 'groupId'> {
   isCaptain: true;
 }
 
-export interface CreateGroupRequest extends Omit<Grouping, 'groupId' | 'memberCount' | 'imageUrl'> {
+export interface CreateGroupRequest {
   imageUrl: string;
+  title: string;
+  content: string;
+  meetDate: string;
+  startTime: string;
+  endTime: string;
+  placeName: string;
+  placeAddress: string;
+  placeLatitude: string;
+  placeLongitude: string;
+  maxUser: number;
 }
 
 export interface ArticleRequest {

src/app/(main)/grouping/create/components/CreateGroupContext.tsx

@@ -6,29 +6,29 @@ import { UseFormReturn, useForm } from 'react-hook-form';
 
 import type { StrictPropsWithChildren } from '@/types';
 
-const inputDefaultValues: CreateGroupContextValue = {
-  imageUrl: '',
-  title: '',
-  content: '',
-  date: new Date(),
-  time: {
-    fromHour: '1',
-    fromMin: '0',
-    fromAmPm: 'AM',
-    toHour: '1',
-    toMin: '0',
-    toAmPm: 'AM',
-  },
-  place: '',
-  placeLatitude: 0,
-  placeLongitude: 0,
-  maxUser: 0,
-};
 const CreateGroupContext = createContext<UseFormReturn | null>(null);
 
 export default function CreateGroupContextProvider({ children }: StrictPropsWithChildren) {
   const methods = useForm<CreateGroupContextValue>({
-    defaultValues: inputDefaultValues,
+    defaultValues: {
+      imageFile: undefined,
+      title: '',
+      content: '',
+      meetDate: undefined,
+      time: {
+        fromHour: '1',
+        fromMin: '0',
+        fromAmPm: 'AM',
+        toHour: '1',
+        toMin: '0',
+        toAmPm: 'AM',
+      },
+      placeName: '',
+      placeAddress: '',
+      placeLatitude: undefined,
+      placeLongitude: undefined,
+      maxUser: undefined,
+    },
   });
 
   const contextValue = { ...methods };

src/app/(main)/grouping/create/components/CreateHeader.tsx

@@ -1,24 +1,19 @@
-'use client';
+import { IconButton } from '@/components/Button';
 import { Header } from '@/components/Header';
 import Image from 'next/image';
-import { useRouter } from 'next/navigation';
+import Link from 'next/link';
 
 export default function CreateHeader() {
-  const router = useRouter();
   return (
-    <Header
-      leftNode={
-        <Image
-          alt="back"
-          src="/assets/arrow_back.svg"
-          width={8}
-          height={30}
-          onClick={() => {
-            router.back();
-          }}
-        />
-      }
-      text="모임 개설하기"
-    />
+    <Header className="px-4">
+      <Header.Left>
+        <Link href="/grouping">
+          <IconButton size="large">
+            <Image src="/icons/24/arrow_back.svg" alt="back" width={24} height={24} />
+          </IconButton>
+        </Link>
+        <p>모임 개설하기</p>
+      </Header.Left>
+    </Header>
   );
 }

src/app/(main)/grouping/create/components/CreateModal.client.tsx

@@ -0,0 +1,20 @@
+import { Spacing } from '@/components/common/Spacing';
+import { Modal } from '@/components/Modal';
+import Image from 'next/image';
+
+interface CreateModalProps {
+  onOkClick: () => void;
+  onCancelClick: () => void;
+}
+
+export default function CreateModal({ onOkClick, onCancelClick }: CreateModalProps) {
+  return (
+    <Modal variant="warning" onOkClick={onOkClick} onCancelClick={onCancelClick}>
+      <Spacing size={32} />
+      <Image src="/icons/48/warning.svg" width={48} height={48} alt="warning" />
+      <Spacing size={12} />
+      <p>계속하시겠어요?</p>
+      <Spacing size={16} />
+    </Modal>
+  );
+}