Merge pull request #260 from YAPP-Github/feat/YS-556

[YS-556] 공고 등록 / 수정 form 교내 실험 여부 필드 추가 및 공고 상세 조회 시 해당 필드에 따른 수정사항 반영

Author: rbgksqkr

src/app/edit/[postId]/components/EditExperimentPost.tsx

@@ -2,7 +2,7 @@
 
 import { usePathname, useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
-import { FormProvider } from 'react-hook-form';
+import { FormProvider, useWatch } from 'react-hook-form';
 
 import { emptySubTitle } from '@/app/my-posts/components/MyPostsTable/MyPostsTable.css';
 import { emptyViewLayout } from '@/app/post/[postId]/desktop/components/ExperimentPostContainer/ExperimentPostContainer.css';
@@ -31,12 +31,12 @@ const EditExperimentPost = ({ params }: { params: { postId: string } }) => {
 
   const [addLink, setAddLink] = useState<boolean>(false);
   const [addContact, setAddContact] = useState<boolean>(false);
+  const [isOnCampus, setIsOnCampus] = useState<boolean>(true);
 
   const [openSubmitAlertDialog, setOpenSubmitAlertDialog] = useState<boolean>(false);
   const [openUpdateAlertModal, setOpenUpdateAlertModal] = useState<boolean>(false);
 
   const [images, setImages] = useState<(File | string)[]>([]);
-
   const [errorMessage, setErrorMessage] = useState<string>('');
 
   const { form, handleSubmit, isLoading, applyMethodData, isRecruitStatus, originExperimentError } =
@@ -45,17 +45,23 @@ const EditExperimentPost = ({ params }: { params: { postId: string } }) => {
       postId: params.postId,
       addLink,
       addContact,
+      isOnCampus,
       setOpenAlertModal: setOpenSubmitAlertDialog,
       images,
       setImages,
       setErrorMessage,
     });
 
   const isUserInputDirty = form.formState.isDirty;
+  const isOnCampusValue = useWatch({ name: 'isOnCampus', control: form.control });
 
   const { isLeaveConfirmModalOpen, handleBackClick, handleCancelLeave, handleConfirmLeave } =
     useLeaveConfirmModal({ isUserInputDirty });
 
+  useEffect(() => {
+    setIsOnCampus(isOnCampusValue);
+  }, [isOnCampusValue, isUserInputDirty]);
+
   useEffect(() => {
     if (originExperimentError) {
       setOpenUpdateAlertModal(true);
@@ -101,6 +107,7 @@ const EditExperimentPost = ({ params }: { params: { postId: string } }) => {
             experimentDateChecked={experimentDateChecked}
             durationChecked={durationChecked}
             isRecruitStatus={isRecruitStatus}
+            setIsOnCampus={setIsOnCampus}
           />
           <ApplyMethodSection
             addLink={addLink}

src/app/post/[postId]/ExperimentPostPage.utils.ts

@@ -1,6 +1,6 @@
 import { format } from 'date-fns';
 
-import { GENDER_TYPE, GenderType } from './ExperimentPostPage.types';
+import { GENDER_TYPE, GenderType, MATCH_TYPE } from './ExperimentPostPage.types';
 
 import { durationMinutesOptions } from '@/app/upload/upload.constants';
 import { convertToWebpUrl } from '@/app/upload/upload.utils';
@@ -97,6 +97,40 @@ const replaceImageListWithWebp = async (originalImages: string[]): Promise<strin
   );
 };
 
+// 조건별 실험 장소 렌더링
+const getAddressDisplay = (
+  matchType: string,
+  address: {
+    region: string | null;
+    area: string | null;
+    isOnCampus: boolean;
+    place: string | null;
+    detailedAddress: string | null;
+  },
+) => {
+  // 1. 비대면 실험일 때
+  if (matchType === MATCH_TYPE.ONLINE) return '본문 참고';
+
+  // 2. 지역 정보 없을 때
+  if (!address.region || !address.area) return '본문 참고';
+
+  //  지역 + 지역구 조합
+  const baseAddress = `${getRegionLabel(address.region)} ${getAreaLabel(
+    address.region,
+    address.area,
+  )}`;
+
+  // 3. 교내 실험 (place 필수, detailedAddress는 옵셔널)
+  if (address.isOnCampus) {
+    const parts = [baseAddress, address.place, address.detailedAddress].filter(Boolean);
+    return parts.join(' ');
+  }
+
+  // 4. 교외 실험 (detailedAddress 필수, place 필드 없음)
+  const parts = [baseAddress, address.detailedAddress].filter(Boolean);
+  return parts.join(' ');
+};
+
 export {
   formattedContentText,
   getGenderLabel,
@@ -108,4 +142,5 @@ export {
   formatDate,
   checkImageExists,
   replaceImageListWithWebp,
+  getAddressDisplay,
 };

src/app/post/[postId]/desktop/components/ExperimentPostInfo/ExperimentPostInfo.css.ts

@@ -65,4 +65,8 @@ export const buttonStyles = style({
 
 export const postTitle = style({
   flex: 1,
+  overflow: 'hidden',
+  wordBreak: 'break-word',
+  whiteSpace: 'normal',
+  marginRight: '1rem',
 });

src/app/post/[postId]/desktop/components/ExperimentPostOutline/ExperimentPostOutline.tsx

@@ -14,14 +14,13 @@ import {
   dynamicSpacing,
   divider,
 } from './ExperimentPostOutline.css';
-import { GENDER_TYPE, MATCH_TYPE } from '../../../ExperimentPostPage.types';
+import { GENDER_TYPE } from '../../../ExperimentPostPage.types';
 import {
   getGenderLabel,
   getDurationLabel,
-  getRegionLabel,
-  getAreaLabel,
   getMatchTypeText,
   formatDate,
+  getAddressDisplay,
 } from '../../../ExperimentPostPage.utils';
 import { UseApplyMethodQueryResponse } from '../../../hooks/useApplyMethodQuery';
 import { UseQueryExperimentDetailsAPIResponse } from '../../../hooks/useExperimentDetailsQuery';
@@ -105,16 +104,7 @@ const ExperimentPostOutline = ({ postDetailData, applyMethodData }: ExperimentPo
             <tr>
               <th>실험 장소</th>
               <td>
-                <p>
-                  {summary.matchType === MATCH_TYPE.ONLINE
-                    ? '비대면'
-                    : address.place && address.region && address.area
-                    ? `${getRegionLabel(address.region)} ${getAreaLabel(
-                        address.region,
-                        address.area,
-                      )} ${address.place} ${address.detailedAddress}`
-                    : '본문 참고'}
-                </p>
+                <p>{getAddressDisplay(summary.matchType, address)}</p>
               </td>
             </tr>
 

src/app/post/[postId]/desktop/components/ParticipationGuideModal/ParticipationGuideModal.css.ts

@@ -40,6 +40,8 @@ export const participationModalTitle = style({
   color: colors.text06,
   marginTop: '1.2rem',
   marginRight: '1.2rem',
+
+  overflowWrap: 'break-word',
 });
 
 export const contactInfoRowContainer = style({

src/app/post/[postId]/hooks/useExperimentDetailsQuery.ts

@@ -30,6 +30,7 @@ interface Address {
   region: string | null;
   area: string | null;
   detailedAddress: string;
+  isOnCampus: boolean;
 }
 
 export interface UseQueryExperimentDetailsAPIResponse {

src/app/post/[postId]/mobile/components/ExperimentPostSummary/ExperimentPostSummary.tsx

@@ -5,14 +5,13 @@ import {
   postSummaryContent,
   postSummaryLayout,
 } from './ExperimentPostSummary.css';
-import { GENDER_TYPE, MATCH_TYPE } from '../../../ExperimentPostPage.types';
+import { GENDER_TYPE } from '../../../ExperimentPostPage.types';
 import {
   getGenderLabel,
   getMatchTypeText,
   getDurationLabel,
-  getRegionLabel,
-  getAreaLabel,
   formatDate,
+  getAddressDisplay,
 } from '../../../ExperimentPostPage.utils';
 import { UseQueryExperimentDetailsAPIResponse } from '../../../hooks/useExperimentDetailsQuery';
 
@@ -80,16 +79,7 @@ const ExperimentPostSummary = ({
           <tr>
             <th>실험 장소</th>
             <td>
-              <p>
-                {summary.matchType === MATCH_TYPE.ONLINE
-                  ? '비대면'
-                  : address.place && address.region && address.area
-                  ? `${getRegionLabel(address.region)} ${getAreaLabel(
-                      address.region,
-                      address.area,
-                    )} ${address.place} ${address.detailedAddress}`
-                  : '본문 참고'}
-              </p>
+              <p>{getAddressDisplay(summary.matchType, address)}</p>
             </td>
           </tr>
 

src/app/post/[postId]/mobile/components/ParticipationGuideBottomSheet/ParticipationGuideBottomSheet.css.ts

@@ -14,6 +14,9 @@ export const bottomSheetTitle = style({
   color: colors.text06,
 
   marginBottom: '1.2rem',
+
+  width: '100%',
+  overflowWrap: 'break-word',
 });
 
 export const contactInfoRowContainer = style({

src/app/upload/components/AgeForm/AgeForm.css.ts

@@ -22,4 +22,11 @@ export const ageInput = style({
   '::placeholder': {
     color: colors.text02,
   },
+
+  '@media': {
+    'screen and (max-width: 767px)': {
+      maxWidth: '17.2rem',
+      width: '100%',
+    },
+  },
 });

src/app/upload/components/ApplyMethodSection/ApplyMethodSection.css.ts

@@ -28,13 +28,24 @@ export const targetConditionLayout = style({
 
 export const targetGroupContainer = style({
   display: 'flex',
-  flexFlow: 'row nowrap',
+
   justifyContent: 'space-between',
+  alignItems: 'flex-start',
+
+  flexDirection: 'row',
+
+  '@media': {
+    'screen and (max-width: 767px)': {
+      flexDirection: 'column',
+      gap: '1.2rem',
+    },
+  },
 });
 
 export const ageInputContainer = recipe({
   base: {
-    width: '45.2rem',
+    maxWidth: '45.2rem',
+    width: '100%',
     height: '4.8rem',
     display: 'flex',
     alignItems: 'center',
@@ -63,8 +74,8 @@ export const textStyle = style({
 
 export const alarmAgreeContainer = style({
   width: 'fit-content',
-  height: '3.4rem',
-  padding: '0 1rem',
+  minHeight: '3.4rem',
+  padding: '0.2rem 1rem',
   backgroundColor: colors.field02,
   borderRadius: '0.8rem',
   display: 'flex',