Feat/#940 (#944)

* feat: 공동모임장 기본 틀 구현

* feat: button에 타입 지정해줘서 원치 않는 submit 안되도록 방지하기

* feat: 멘션을 포함한 input 틀 완성(완전히 디자인 똑같이 구현은 x)

* fix: +버튼 앞에 고정

* design: input창 열려있을 때 버튼 밝아지는 것 유지

* feat: 모임 개설 - 공동 모임장 추가 뷰,기능 구현 완료

* design: 피그마상에서는 8px로 되어있어서 수정

* design: mobile 반응형 디자인 구현

* fix: coLeader.map is not a function 버그 해결

* feat: 모바일 멘션 바텀시트 구현

* design: 모임장 프로필 디자인 변경

* design: 불필요한 margin 제거

* chore: 이해를 돕는 주석 첨가, 불필요한 콘솔 제거

* update: API 버전 최신화

* fix: 웹뷰-피드 작성 모달 무한 렌더링 이슈

* update: 멘션 유저 리스트 조회 API 최신화

* feat: isCoLeader 변수 추가

* update: API 최신화 (approvedCount)

* feat: 멘션 타입에 userId 추가

* feat: isCoLeader 선택적 타입 정의

* feat: formData에 coLeaderUserIds 추가

* feat: ProfileAnchor 컴포넌트 분리

* feat: 모임 상세 페이지에 ProfileAnchor 적용

* feat: 모임 수정에 공동 모임장 데이터 출력

* feat: 모임 수정 시 다이얼로그 워딩 변경

---------

Co-authored-by: ocahs9 <[email protected]>

pages/edit/index.tsx

@@ -100,6 +100,7 @@ const EditPage = () => {
           joinableParts,
           canJoinOnlyActiveGeneration: formData?.canJoinOnlyActiveGeneration,
           note: formData?.note ?? '',
+          coLeader: formData?.coMeetingLeaders,
         },
       });
     }

src/api/API_LEGACY/meeting/index.ts

@@ -245,6 +245,7 @@ const serializeFormData = (formData: FormType) => {
     //targetDesc: formData.detail.targetDesc,
     note: formData.detail.note,
     detail: undefined,
+    coLeaderUserIds: formData.detail.coLeader?.map(user => user.userId),
   };
   return data;
 };

src/api/user/index.ts

@@ -16,6 +16,7 @@ export interface UserResponse {
 export type ApplicationStatusType = 'WAITING' | 'APPROVE' | 'REJECT';
 
 export const getMentionUsers = async () => {
-  const { data } = await api.get('/user/v2/mention');
+  //타입 지정하지 않은 이유: Suggestion의 id, display 를 사용해야하기 때문
+  const { data } = await api.get('/user/v2');
   return data;
 };

src/components/feed/Mention/index.tsx

@@ -10,6 +10,7 @@ import { MentionContext } from './MentionContext';
 interface mentionableDataType {
   id: number;
   display: string;
+  userId: number;
   orgId: number;
   userName: string;
   recentPart: string;

src/components/feed/Modal/FeedFormPresentation.tsx

@@ -60,11 +60,13 @@ function FeedFormPresentation({
   const [remainingHeight, setRemainingHeight] = useState(100);
   const [selectedMeeting, setSelectedMeeting] = useState<GroupInfo | undefined>(undefined);
   const [isMobileDevice, setIsMobileDevice] = useState(false);
-  const userAgent = navigator.userAgent;
 
-  if (/android/i.test(userAgent) || /iPad|iPhone|iPod/.test(userAgent)) {
-    setIsMobileDevice(true);
-  }
+  useEffect(() => {
+    const userAgent = navigator.userAgent;
+    if (/android/i.test(userAgent) || /iPad|iPhone|iPod/.test(userAgent)) {
+      setIsMobileDevice(true);
+    }
+  }, []);
 
   const handleWindowResize = () => {
     setTextareaHeightChangeFlag(flag => !flag);

src/components/form/Presentation/CoLeader/index.tsx

@@ -19,10 +19,12 @@ interface mentionableDataType {
   id: number;
   display: string;
   orgId: number;
+  userId: number;
   userName: string;
   recentPart: string;
   recentGeneration: number;
   profileImageUrl: string;
+  userprofileImage?: string;
 }
 
 const CoLeader = ({ value: coLeaders = [], onChange, error }: CoLeaderFieldProps) => {
@@ -138,11 +140,13 @@ const CoLeader = ({ value: coLeaders = [], onChange, error }: CoLeaderFieldProps
 
         {/*추가된 공동 모임장 프로필 렌더링 */}
         <LeadersWrapper>
-          {coLeaders.map((leader, idx) => (
-            <Leader key={leader.id}>
+          {coLeaders?.map((leader, idx) => (
+            <Leader key={leader?.userId}>
               <SProfile>
-                {leader.profileImageUrl ? (
+                {leader?.profileImageUrl ? (
                   <img src={leader.profileImageUrl} alt={leader.userName} />
+                ) : leader?.userprofileImage ? (
+                  <img src={leader?.userprofileImage} alt={leader.userName} />
                 ) : (
                   <StyledProfileDefaultIcon />
                 )}

src/components/form/Presentation/index.tsx

@@ -64,6 +64,7 @@ function Presentation({
   const { open } = useDialog();
   const [isSoptScheduleOpen, setIsSoptScheduleOpen] = useState(false);
   const soptScheduleRef = useRef<HTMLDivElement | null>(null);
+  const isEdit = router.asPath.includes('/edit');
 
   const schedule: React.ReactNode = (
     <>
@@ -152,12 +153,12 @@ function Presentation({
   };
 
   const dialogOption: DialogOptionType = {
-    title: '모임을 개설하시겠습니까?',
+    title: `모임을 ${isEdit ? '수정' : '개설'}하시겠습니까?`,
     description: '모임에 대한 설명이 충분히 작성되었는지 확인해 주세요',
     type: 'default',
     typeOptions: {
       cancelButtonText: '취소',
-      approveButtonText: '개설하기',
+      approveButtonText: `${isEdit ? '수정' : '개설'}하기`,
       buttonFunction: () => {
         if (formRef.current) {
           formRef.current.requestSubmit();

src/components/form/SearchMention/index.tsx

@@ -10,6 +10,7 @@ interface mentionableDataType {
   id: number;
   display: string;
   orgId: number;
+  userId: number;
   userName: string;
   recentPart: string;
   recentGeneration: number;