feat: 모임생성 태그 필드 Enter입력 시 다시 동일 필드에 focus하게 변경

src/api/service/group-service/index.ts

@@ -2,6 +2,8 @@ import { api } from '@/api/core';
 import {
   CreateGroupPayload,
   CreateGroupResponse,
+  GetGroupDetailsPayload,
+  GetGroupDetailsResponse,
   GetGroupsPayload,
   GetGroupsResponse,
   GetMyGroupsPayload,
@@ -35,6 +37,10 @@ export const groupServiceRemote = () => ({
   },
 
   createGroup: (payload: CreateGroupPayload) => {
-    return api.post<CreateGroupResponse>('/groups/create', payload);
+    return api.post<CreateGroupResponse>('/groups/groups/create', payload);
+  },
+
+  getGroupDetails: (payload: GetGroupDetailsPayload) => {
+    return api.post<GetGroupDetailsResponse>(`/groups/${payload}`);
   },
 });

src/app/post-meetup/page.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useForm } from '@tanstack/react-form';
+import { z } from 'zod';
 
 import {
   MeetupCapField,
@@ -18,6 +19,14 @@ import { CreateGroupPayload } from '@/types/service/group';
 const PostMeetupPage = () => {
   const { mutate } = useCreateGroup();
 
+  const CreateGroupSchema = {
+    title: z.string().min(2),
+    location: z.string().min(2),
+    startTime: z.string().min(2),
+    description: z.string().min(2),
+    maxParticipants: z.number().min(2),
+  };
+
   const form = useForm({
     defaultValues: {
       title: '',
@@ -30,6 +39,9 @@ const PostMeetupPage = () => {
       maxParticipants: 0,
       images: [],
     } as CreateGroupPayload,
+    validators: {
+      onChange: () => CreateGroupSchema,
+    },
     onSubmit: ({ value }) => {
       console.log(value);
       const res = mutate(value);
@@ -61,7 +73,10 @@ const PostMeetupPage = () => {
           <form.Field children={(field) => <MeetupTagsField field={field} />} name='tags' />
         </section>
 
-        <MeetupSubmitButton />
+        <form.Subscribe
+          children={(state) => <MeetupSubmitButton state={state} />}
+          selector={(state) => state}
+        />
       </form>
     </div>
   );

src/components/pages/post-meetup/fields/detail-feild/index.tsx

@@ -19,7 +19,6 @@ export const MeetupDetailField = ({ field }: Props) => {
         className='bg-mono-white focus:border-mint-500 text-text-md-medium h-40 w-full resize-none rounded-2xl border border-gray-300 px-5 py-4 text-gray-800 focus:outline-none'
         maxLength={300}
         placeholder='모임에 대해 설명해주세요'
-        required
         value={field.state.value}
         onChange={(e) => field.handleChange(e.target.value)}
       />

src/components/pages/post-meetup/fields/tags-field/index.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState } from 'react';
+import { useRef, useState } from 'react';
 
 import { AnyFieldApi } from '@tanstack/react-form';
 import clsx from 'clsx';
@@ -13,6 +13,7 @@ interface Props {
 }
 
 export const MeetupTagsField = ({ field }: Props) => {
+  const inputRef = useRef<HTMLInputElement | null>(null);
   const [inputValue, setInputValue] = useState('');
 
   const onEnter = (e: React.KeyboardEvent<HTMLInputElement>) => {
@@ -25,13 +26,15 @@ export const MeetupTagsField = ({ field }: Props) => {
       field.pushValue(inputValue);
     }
 
+    if (inputRef.current) inputRef.current.focus();
     setInputValue('');
   };
 
   return (
     <div className='flex w-full flex-col gap-1'>
       <Label htmlFor='post-meetup-tags'>태그</Label>
       <Input
+        ref={inputRef}
         id='post-meetup-tags'
         className='bg-mono-white focus:border-mint-500 rounded-2xl border border-gray-300'
         frontIcon={

src/components/pages/post-meetup/post-button/index.tsx

@@ -1,9 +1,17 @@
+import { AnyFormState } from '@tanstack/react-form';
+
 import { Button } from '@/components/ui';
 
-export const MeetupSubmitButton = () => {
+interface Props {
+  state: AnyFormState;
+}
+
+export const MeetupSubmitButton = ({ state }: Props) => {
   return (
     <div className='mt-6 border-t-1 border-gray-200 bg-white px-4 py-3'>
-      <Button type='submit'>모임 생성</Button>
+      <Button disabled={!state.canSubmit} type='submit'>
+        모임 생성
+      </Button>
     </div>
   );
 };

src/hooks/use-group/use-group-get-details/index.ts

@@ -0,0 +1,12 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { API } from '@/api';
+import { GetGroupDetailsPayload } from '@/types/service/group';
+
+export const useGetGroupDetails = (payload: GetGroupDetailsPayload) => {
+  const query = useQuery({
+    queryKey: ['somekey'],
+    queryFn: () => API.groupService.getGroupDetails(payload),
+  });
+  return query;
+};

src/types/service/group.ts

@@ -121,3 +121,45 @@ export interface CreateGroupResponse {
   updatedAt: string;
   images?: PreUploadGroupImageResponse | null;
 }
+
+export interface GetGroupDetailsPayload {
+  groupId: number;
+}
+
+export interface GetGroupDetailsResponse {
+  id: number;
+  title: string;
+  location: string;
+  locationDetail: string;
+  startTime: string;
+  endTime: string;
+  images: {
+    sortOrder: number;
+    imageId440x240: number;
+    imageId100x100: number;
+    imageUrl440x240: string;
+    imageUrl100x100: string;
+  }[];
+  tags: string[];
+  description: string;
+  participantCount: number;
+  maxParticipants: number;
+  createdBy: {
+    userId: number;
+    nickName: string;
+    profileImage: string;
+  };
+  createdAt: string;
+  updatedAt: string;
+  userStatus: {
+    isJoined: boolean;
+    joinedAt: string;
+  };
+  joinedMembers: {
+    userId: 0;
+    groupRole: 'HOST' | 'MEMBER';
+    nickName: string;
+    profileImage: string;
+    joinedAt: string;
+  }[];
+}