diff --git a/src/api/service/group-service/index.ts b/src/api/service/group-service/index.ts index b7444ee3..e08d1892 100644 --- a/src/api/service/group-service/index.ts +++ b/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('/groups/create', payload); + return api.post('/groups/groups/create', payload); + }, + + getGroupDetails: (payload: GetGroupDetailsPayload) => { + return api.post(`/groups/${payload}`); }, }); diff --git a/src/app/post-meetup/page.tsx b/src/app/post-meetup/page.tsx index 002940a9..32f47444 100644 --- a/src/app/post-meetup/page.tsx +++ b/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 = () => { } name='tags' /> - + } + selector={(state) => state} + /> ); diff --git a/src/components/pages/post-meetup/fields/detail-feild/index.tsx b/src/components/pages/post-meetup/fields/detail-feild/index.tsx index 4e66cc4f..ffb301d5 100644 --- a/src/components/pages/post-meetup/fields/detail-feild/index.tsx +++ b/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)} /> diff --git a/src/components/pages/post-meetup/fields/tags-field/index.tsx b/src/components/pages/post-meetup/fields/tags-field/index.tsx index dfd4ea75..497bc364 100644 --- a/src/components/pages/post-meetup/fields/tags-field/index.tsx +++ b/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(null); const [inputValue, setInputValue] = useState(''); const onEnter = (e: React.KeyboardEvent) => { @@ -25,6 +26,7 @@ export const MeetupTagsField = ({ field }: Props) => { field.pushValue(inputValue); } + if (inputRef.current) inputRef.current.focus(); setInputValue(''); }; @@ -32,6 +34,7 @@ export const MeetupTagsField = ({ field }: Props) => {
{ +interface Props { + state: AnyFormState; +} + +export const MeetupSubmitButton = ({ state }: Props) => { return (
- +
); }; diff --git a/src/hooks/use-group/use-group-get-details/index.ts b/src/hooks/use-group/use-group-get-details/index.ts new file mode 100644 index 00000000..6b5c332c --- /dev/null +++ b/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; +}; diff --git a/src/types/service/group.ts b/src/types/service/group.ts index 0c769d3f..92a8ca66 100644 --- a/src/types/service/group.ts +++ b/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; + }[]; +}