Merge pull request #267 from YAPP-Github/fix/YS-569

[YS-569] 교내 실험 여부에 따른 조건부 유효성 검증 에러 해결

Author: rbgksqkr

src/app/upload/components/OutlineSection/OutlineSection.tsx

@@ -52,7 +52,7 @@ const OutlineSection = ({
   useUserResearcherInfo();
 
   // 진행 방식 선택 로직
-  const { selectedMatchType, handleMatchTypeChange } = useMatchType();
+  const { selectedMatchType, handleMatchTypeChange } = useMatchType({ setIsOnCampus });
 
   // 지역 선택 로직
   const {
@@ -212,25 +212,27 @@ const OutlineSection = ({
             <label className={label} htmlFor="place">
               실험 장소
             </label>
-            <div>
-              <Controller
-                name="isOnCampus"
-                control={control}
-                render={({ field }) => (
-                  <CheckboxWithIcon
-                    checked={field.value}
-                    onChange={() => {
-                      const newValue = !field.value;
-                      field.onChange(newValue);
-                      setIsOnCampus?.(newValue);
-                    }}
-                    label="교내 실험"
-                    align="left"
-                    size="large"
-                  />
-                )}
-              />
-            </div>
+            {selectedMatchType !== MATCH_TYPE.ONLINE && (
+              <div>
+                <Controller
+                  name="isOnCampus"
+                  control={control}
+                  render={({ field }) => (
+                    <CheckboxWithIcon
+                      checked={field.value}
+                      onChange={() => {
+                        const newValue = !field.value;
+                        field.onChange(newValue);
+                        setIsOnCampus?.(newValue);
+                      }}
+                      label="교내 실험"
+                      align="left"
+                      size="large"
+                    />
+                  )}
+                />
+              </div>
+            )}
           </div>
 
           {selectedMatchType === MATCH_TYPE.ONLINE ? (

src/app/upload/hooks/useMatchType.ts

@@ -1,11 +1,16 @@
 import { usePathname } from 'next/navigation';
+import { Dispatch, SetStateAction } from 'react';
 import { useFormContext, useWatch } from 'react-hook-form';
 
 import useUserInfo from '@/app/home/hooks/useUserInfo';
 import { MATCH_TYPE, MatchType } from '@/app/post/[postId]/ExperimentPostPage.types';
 import { isResearcherInfo } from '@/utils/typeGuard';
 
-const useMatchType = () => {
+interface UseMatchTypeProps {
+  setIsOnCampus?: Dispatch<SetStateAction<boolean>>;
+}
+
+const useMatchType = ({ setIsOnCampus }: UseMatchTypeProps) => {
   const pathname = usePathname();
   const isEdit = pathname.startsWith('/edit');
   const { control, setValue } = useFormContext();
@@ -21,7 +26,9 @@ const useMatchType = () => {
       setValue('region', null);
       setValue('area', null);
       setValue('place', null);
-      setValue('detailedAddress', '');
+      setValue('detailedAddress', null);
+      setValue('isOnCampus', false);
+      setIsOnCampus?.(false);
     } else {
       setValue('region', '');
       setValue('area', '');

src/schema/upload/uploadExperimentPostSchema.ts

@@ -56,10 +56,20 @@ const UploadExperimentPostSchema = ({
     region: z.string().min(1, '').nullable(),
     // 지역구
     area: z.string().min(1, '').nullable(),
-    // 상세 주소
-    detailedAddress: isOnCampus // 교내실험이면 옵셔널, 교내실험이 아니라면 필수값
-      ? z.string().max(70, { message: '최대 70자 이하로 입력해 주세요' }).optional()
-      : z.string().min(1, '').max(70, { message: '최대 70자 이하로 입력해 주세요' }),
+    // 상세 주소. 비대면 또는 교내실험이면 옵셔널, 교내실험이 아니라면 필수값.
+    detailedAddress: z
+      .string()
+      .nullable()
+      .refine(
+        (val) => {
+          if (val === null) return true; // 비대면
+          if (val.length > 70) return false; // 최대 70자 이하
+          if (!isOnCampus && val.trim().length === 0) return false; // 교내실험이 아니면 필수값
+
+          return true;
+        },
+        { message: '최대 70자 이하로 입력해 주세요' },
+      ),
 
     // 보상
     reward: z