Merge pull request #285 from WeGo-Together/somang-feat/create-group

[Feat] 모임생성/수정 정책 필드 추가

Author: HopeFullee

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

@@ -12,6 +12,7 @@ import {
   GroupDetailField,
   GroupImagesField,
   GroupLocationField,
+  GroupPolicyField,
   GroupSubmitButton,
   GroupTagsField,
   GroupTitleField,
@@ -38,7 +39,9 @@ const EditGroupPage = ({ params }: Props) => {
     tags,
     description,
     maxParticipants,
+    joinPolicy,
     images,
+    participantCount,
   } = data as GetGroupDetailsResponse;
 
   const { defaultImages } = convertToDefaultImages(images);
@@ -51,8 +54,8 @@ const EditGroupPage = ({ params }: Props) => {
       tags,
       description,
       maxParticipants,
+      joinPolicy,
       images: defaultImages,
-      joinPolicy: 'FREE',
     } as CreateGroupFormValues,
     validators: {
       onChange: createGroupSchema,
@@ -77,9 +80,15 @@ const EditGroupPage = ({ params }: Props) => {
           <form.Field children={(field) => <GroupLocationField field={field} />} name='location' />
           <form.Field children={(field) => <GroupDateField field={field} />} name='startTime' />
           <form.Field
-            children={(field) => <GroupCapField field={field} />}
+            children={(field) => (
+              <GroupCapField field={field} participantCount={participantCount} />
+            )}
             name='maxParticipants'
           />
+          <form.Field
+            children={(field) => <GroupPolicyField field={field} isEditMode={true} />}
+            name='joinPolicy'
+          />
           <form.Field children={(field) => <GroupImagesField field={field} />} name='images' />
           <form.Field children={(field) => <GroupDetailField field={field} />} name='description' />
           <form.Field children={(field) => <GroupTagsField field={field} />} name='tags' />

src/app/create-group/page.tsx

@@ -10,6 +10,7 @@ import {
   GroupDetailField,
   GroupImagesField,
   GroupLocationField,
+  GroupPolicyField,
   GroupSubmitButton,
   GroupTagsField,
   GroupTitleField,
@@ -29,8 +30,8 @@ const CreateGroupPage = () => {
       tags: [],
       description: '',
       maxParticipants: 0,
-      images: [],
       joinPolicy: 'FREE',
+      images: [],
     } as CreateGroupFormValues,
     validators: {
       onChange: createGroupSchema,
@@ -58,6 +59,10 @@ const CreateGroupPage = () => {
             children={(field) => <GroupCapField field={field} />}
             name='maxParticipants'
           />
+          <form.Field
+            children={(field) => <GroupPolicyField field={field} isEditMode={false} />}
+            name='joinPolicy'
+          />
           <form.Field children={(field) => <GroupImagesField field={field} />} name='images' />
           <form.Field children={(field) => <GroupDetailField field={field} />} name='description' />
           <form.Field children={(field) => <GroupTagsField field={field} />} name='tags' />

src/components/pages/create-group/fields/cap-field/index.tsx

@@ -7,9 +7,18 @@ import { Input, Label } from '@/components/ui';
 
 interface Props {
   field: AnyFieldApi;
+  participantCount?: number;
 }
 
-export const GroupCapField = ({ field }: Props) => {
+export const GroupCapField = ({ field, participantCount = 0 }: Props) => {
+  const handleOnBlur = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = Number(e.target.value);
+
+    if (value < participantCount) field.handleChange(participantCount);
+    else if (value < 2) field.handleChange(2);
+    else if (value > 12) field.handleChange(12);
+  };
+
   return (
     <div className='mt-3 flex w-full flex-col gap-1'>
       <Label htmlFor='create-group-cap' required>
@@ -32,11 +41,7 @@ export const GroupCapField = ({ field }: Props) => {
         required
         type='number'
         value={!!field.state.value && field.state.value}
-        onBlur={(e) => {
-          const value = Number(e.target.value);
-          if (value < 2) field.handleChange(2);
-          else if (value > 12) field.handleChange(12);
-        }}
+        onBlur={(e) => handleOnBlur(e)}
         onChange={(e) => {
           field.handleChange(Number(e.target.value));
         }}

src/components/pages/create-group/fields/date-field/index.tsx

@@ -46,7 +46,11 @@ export const GroupDateField = ({ field }: Props) => {
             hasValue && 'text-gray-800',
           )}
         >
-          {hasValue ? formattedDate : '날짜와 시간을 선택해주세요'}
+          {hasValue ? (
+            formattedDate
+          ) : (
+            <span className='select-none'>날짜와 시간을 선택해주세요</span>
+          )}
         </p>
       </button>
       {isInvalid && <Hint className='mt-0.5' message={field.state.meta.errors[0].message} />}

src/components/pages/create-group/fields/detail-feild/index.tsx

@@ -18,7 +18,7 @@ export const GroupDetailField = ({ field }: Props) => {
       </Label>
       <textarea
         id='create-group-Detail'
-        className='bg-mono-white scrollbar-thin 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'
+        className='bg-mono-white scrollbar-thin 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 placeholder:select-none focus:outline-none'
         maxLength={300}
         placeholder='모임에 대해 설명해주세요'
         required
@@ -27,9 +27,9 @@ export const GroupDetailField = ({ field }: Props) => {
       />
       <div className='mt-0.5 flex'>
         {isInvalid && <Hint message={field.state.meta.errors[0].message} />}
-        <div className='text-text-sm-medium ml-auto text-right text-gray-500'>
+        <span className='text-text-sm-medium ml-auto text-right text-gray-500 select-none'>
           {field.state.value.length}/300
-        </div>
+        </span>
       </div>
     </div>
   );

src/components/pages/create-group/fields/images-field/index.tsx

@@ -90,8 +90,9 @@ export const GroupImagesField = ({ field }: Props) => {
           ({ imageUrl100x100 }: PreUploadGroupImageResponse['images'][0], idx: number) => (
             <div key={imageUrl100x100} className='relative aspect-square w-full max-w-20'>
               <Image
-                className='border-mono-black/5 h-full w-full rounded-2xl border-1 object-cover'
+                className='border-mono-black/5 h-full w-full rounded-2xl border-1 object-cover select-none'
                 alt='썸네일 이미지'
+                draggable={false}
                 fill
                 src={imageUrl100x100}
               />
@@ -112,7 +113,9 @@ export const GroupImagesField = ({ field }: Props) => {
           ),
         )}
       </div>
-      <p className='text-text-sm-medium px-2 text-gray-500'>최대 3개까지 업로드할 수 있어요.</p>
+      <p className='text-text-sm-medium px-2 text-gray-500 select-none'>
+        최대 3개까지 업로드할 수 있어요.
+      </p>
     </div>
   );
 };

src/components/pages/create-group/fields/location-field/index.tsx

@@ -19,6 +19,7 @@ export const GroupLocationField = ({ field }: Props) => {
     open(<LocationSearchModal LocationField={field} />);
   };
 
+  const hasValue = field.state.value;
   const isInvalid = field.state.meta.isTouched && !field.state.meta.isValid;
 
   return (
@@ -39,11 +40,11 @@ export const GroupLocationField = ({ field }: Props) => {
         />
         <p
           className={clsx(
-            'text-text-md-medium text-left text-gray-500',
+            'text-text-md-medium text-left text-gray-500 select-none',
             field.state.value && 'text-gray-800',
           )}
         >
-          {field.state.value ? field.state.value : '모임 장소를 입력해주세요'}
+          {hasValue ? field.state.value : <span>모임 장소를 입력해주세요</span>}
         </p>
       </button>
       {isInvalid && <Hint className='mt-0.5' message={field.state.meta.errors[0].message} />}

src/components/pages/create-group/fields/policy-field/index.tsx

@@ -4,29 +4,33 @@ import { Label } from '@/components/ui';
 
 interface Props {
   field: AnyFieldApi;
+  isEditMode: boolean;
 }
 
-export const GroupPolicyField = ({ field }: Props) => {
+export const GroupPolicyField = ({ field, isEditMode }: Props) => {
   return (
     <div className='mt-6 space-y-4'>
-      <Label htmlFor='create-group-policy'>참여 방식</Label>
+      <Label htmlFor='create-group-joinPolicy'>참여 방식</Label>
       {POLICY_OPTIONS.map(({ type, name, description }) => {
         return (
-          <div key={name} className='flex items-start gap-2'>
-            <input
-              id={name}
-              className='size-6'
-              checked={field.state.value === type}
-              name='create-group-policy'
-              type='radio'
-              value={type}
-              onChange={(e) => field.handleChange(e.target.value)}
-            />
-            <Label htmlFor={name}>
-              <p>{name}</p>
+          <label key={name} className='flex gap-2 px-2 select-none'>
+            <span className='flex-center has-focus:border-mint-500 size-6 cursor-pointer rounded-full border-1 border-gray-200 bg-white has-disabled:cursor-auto has-disabled:bg-gray-200'>
+              <input
+                className='checked:bg-mint-500 size-3 cursor-pointer appearance-none rounded-full outline-none disabled:cursor-auto'
+                checked={field.state.value === type}
+                disabled={isEditMode}
+                name='create-group-policy'
+                type='radio'
+                value={type}
+                onChange={(e) => field.handleChange(e.target.value)}
+              />
+            </span>
+
+            <div className='text-text-sm-medium'>
+              <p className='text-gray-700'>{name}</p>
               <p className='text-gray-500'>{description}</p>
-            </Label>
-          </div>
+            </div>
+          </label>
         );
       })}
     </div>

src/components/pages/create-group/fields/tags-field/index.tsx

@@ -75,7 +75,9 @@ export const GroupTagsField = ({ field }: Props) => {
         ))}
       </ul>
 
-      <p className='text-text-sm-medium px-2 text-gray-500'>최대 10개까지 업로드할 수 있어요.</p>
+      <p className='text-text-sm-medium px-2 text-gray-500 select-none'>
+        최대 10개까지 업로드할 수 있어요.
+      </p>
       {isInvalid && <Hint className='mt-0.5' message={field.state.meta.errors[0].message} />}
     </div>
   );

src/components/pages/create-group/index.ts

@@ -3,6 +3,7 @@ export { GroupDateField } from './fields/date-field';
 export { GroupDetailField } from './fields/detail-feild';
 export { GroupImagesField } from './fields/images-field';
 export { GroupLocationField } from './fields/location-field';
+export { GroupPolicyField } from './fields/policy-field';
 export { GroupTagsField } from './fields/tags-field';
 export { GroupTitleField } from './fields/title-field';
 export { GroupSubmitButton } from './post-button';