From b26fb3749cbed273d346362338a1a011e6b96252 Mon Sep 17 00:00:00 2001
From: ocahs9 <piorag99@gmail.com>
Date: Mon, 28 Oct 2024 04:52:25 +0900
Subject: [PATCH 01/25] =?UTF-8?q?feat:=20=EA=B3=B5=EB=8F=99=EB=AA=A8?=
 =?UTF-8?q?=EC=9E=84=EC=9E=A5=20=EA=B8=B0=EB=B3=B8=20=ED=8B=80=20=EA=B5=AC?=
 =?UTF-8?q?=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/make/index.tsx                          |   5 +
 src/components/form/FormController/index.tsx  |   2 +-
 .../form/Presentation/CoLeader/index.tsx      | 141 ++++++++++++++++++
 src/components/form/Presentation/index.tsx    |  18 ++-
 src/types/form.ts                             |   1 +
 5 files changed, 165 insertions(+), 2 deletions(-)
 create mode 100644 src/components/form/Presentation/CoLeader/index.tsx

diff --git a/pages/make/index.tsx b/pages/make/index.tsx
index ec3853cd..c4dc1986 100644
--- a/pages/make/index.tsx
+++ b/pages/make/index.tsx
@@ -22,6 +22,11 @@ const MakePage = () => {
   const formMethods = useForm<FormType>({
     mode: 'onChange',
     resolver: zodResolver(schema),
+    defaultValues: {
+      detail: {
+        coLeader: [],
+      },
+    },
   });
   const { isValid } = formMethods.formState;
   const { mutateAsync: mutateCreateMeeting, isLoading: isSubmitting } = useMutation({
diff --git a/src/components/form/FormController/index.tsx b/src/components/form/FormController/index.tsx
index 13ebda13..70151c31 100644
--- a/src/components/form/FormController/index.tsx
+++ b/src/components/form/FormController/index.tsx
@@ -5,7 +5,7 @@ import { Option } from '../Select/OptionItem';
 interface FormControllerProps {
   name: string;
   render: ControllerProps['render'];
-  defaultValue?: boolean | string | number | Option | Option[];
+  defaultValue?: boolean | string | number | Option | Option[] | string[];
 }
 
 function FormController({ name, render, defaultValue }: FormControllerProps) {
diff --git a/src/components/form/Presentation/CoLeader/index.tsx b/src/components/form/Presentation/CoLeader/index.tsx
new file mode 100644
index 00000000..13b7bf2b
--- /dev/null
+++ b/src/components/form/Presentation/CoLeader/index.tsx
@@ -0,0 +1,141 @@
+import { styled } from 'stitches.config';
+import React, { useState } from 'react';
+
+interface CoLeaderFieldProps {
+  value: string[];
+  onChange: (coLeaders: string[]) => void;
+  error: string | undefined;
+}
+
+const CoLeader = ({ value: coLeaders = [], onChange, error }: CoLeaderFieldProps) => {
+  //const [coLeaders, setCoLeaders] = useState([]);
+  const [newLeader, setNewLeader] = useState('');
+
+  const handleAddLeader = () => {
+    if (newLeader && coLeaders.length < 3) {
+      onChange([...coLeaders, newLeader]);
+      setNewLeader('');
+    }
+  };
+
+  const handleDeleteLeader = (index: number) => {
+    const updatedLeaders = coLeaders.filter((_, i) => i !== index);
+    onChange(updatedLeaders);
+  };
+
+  return (
+    <Container>
+      <LeadersContainer>
+        {coLeaders.map((leader, idx) => (
+          <Leader key={idx}>
+            <LeaderAvatar>👤</LeaderAvatar>
+            <LeaderName>{leader}</LeaderName>
+            <DeleteButton onClick={() => handleDeleteLeader(idx)}>×</DeleteButton>
+          </Leader>
+        ))}
+        {coLeaders.length < 3 && (
+          <AddLeader>
+            <AddInput
+              type="text"
+              placeholder="+ 이름 입력"
+              value={newLeader}
+              onChange={e => setNewLeader(e.target.value)}
+            />
+            <AddButton type={'button'} onClick={handleAddLeader}>
+              추가
+            </AddButton>
+          </AddLeader>
+        )}
+      </LeadersContainer>
+
+      {error && <ErrorMessage>{error}</ErrorMessage>}
+    </Container>
+  );
+};
+
+export default CoLeader;
+
+const Container = styled('div', {
+  border: '1px solid $gray700',
+  padding: '16px',
+  borderRadius: '8px',
+  backgroundColor: '$gray800',
+});
+
+const LeadersContainer = styled('div', {
+  display: 'flex',
+  alignItems: 'center',
+  gap: '12px',
+});
+
+const Leader = styled('div', {
+  display: 'flex',
+  alignItems: 'center',
+  backgroundColor: '$gray600',
+  borderRadius: '4px',
+  padding: '4px 8px',
+  color: '$white',
+  position: 'relative',
+});
+
+const LeaderAvatar = styled('span', {
+  fontSize: '20px',
+  marginRight: '6px',
+});
+
+const LeaderName = styled('span', {
+  fontSize: '14px',
+  color: '$white',
+});
+
+const DeleteButton = styled('button', {
+  background: 'none',
+  border: 'none',
+  color: '$red500',
+  fontSize: '14px',
+  cursor: 'pointer',
+  position: 'absolute',
+  top: '0',
+  right: '0',
+  padding: '2px 4px',
+});
+
+const AddLeader = styled('div', {
+  display: 'flex',
+  alignItems: 'center',
+  gap: '8px',
+});
+
+const AddInput = styled('input', {
+  width: '120px',
+  padding: '4px 8px',
+  borderRadius: '4px',
+  border: '1px solid $gray700',
+  backgroundColor: '$gray900',
+  color: '$white',
+  outline: 'none',
+
+  '&::placeholder': {
+    color: '$gray500',
+  },
+});
+
+const AddButton = styled('button', {
+  type: 'button', //이거 없으면 제출 처리됨!!
+  padding: '4px 8px',
+  backgroundColor: '$green500',
+  color: '$white',
+  border: 'none',
+  borderRadius: '4px',
+  cursor: 'pointer',
+
+  '&:hover': {
+    backgroundColor: '$green400',
+  },
+});
+
+const ErrorMessage = styled('div', {
+  color: '$red500',
+  fontSize: '12px',
+  marginTop: '8px',
+});
diff --git a/src/components/form/Presentation/index.tsx b/src/components/form/Presentation/index.tsx
index f90eab35..fb3dc7e9 100644
--- a/src/components/form/Presentation/index.tsx
+++ b/src/components/form/Presentation/index.tsx
@@ -26,6 +26,7 @@ import { useDialog } from '@sopt-makers/ui';
 import sopt_schedule_tooltip from 'public/assets/images/sopt_schedule_tooltip.png';
 import BubblePointIcon from 'public/assets/svg/bubble_point.svg';
 import JoinablePartsField from '@components/form/Presentation/JoinablePartsField';
+import CoLeader from './CoLeader';
 
 interface PresentationProps {
   submitButtonLabel: React.ReactNode;
@@ -484,10 +485,25 @@ function Presentation({
           </div>
           {/* 모집 정보 끝 */}
 
-          {/* 추가 정보 - 모임장 소개 */}
+          {/* 추가 정보 - 공동 모임장 */}
           <div>
             <SFormSectionDevider>4. 추가 정보</SFormSectionDevider>
             <SectionLine />
+            <Label size="small">공동 모임장</Label>
+            <HelpMessage>
+              공동 모임장은 총 3명까지 등록 가능해요. 플레이그라운드에서의 모임 관리/편집은 모임 개설자만 가능해요.
+            </HelpMessage>
+
+            <FormController
+              name="detail.coLeader"
+              render={({ field: { value, onChange }, fieldState: { error } }) => {
+                return <CoLeader value={value} onChange={onChange} error={error?.message} />;
+              }}
+            ></FormController>
+          </div>
+
+          {/* 추가 정보 - 모임장 소개 */}
+          <div>
             <Label size="small">모임장 소개</Label>
 
             <SNeedMentorFieldWrapper>
diff --git a/src/types/form.ts b/src/types/form.ts
index bc7f164d..ff9633fa 100644
--- a/src/types/form.ts
+++ b/src/types/form.ts
@@ -77,6 +77,7 @@ export const schema = z.object({
       )
       .min(1, { message: '대상 파트를 선택해주세요.' }),
     note: z.string().max(1000, { message: '1000자 까지 입력 가능합니다.' }).optional().nullable(),
+    coLeader: z.array(z.string()).optional(),
   }),
 });
 

From 73ad3a28256db1ee777680c16f2bbe5a38eb0efa Mon Sep 17 00:00:00 2001
From: ocahs9 <piorag99@gmail.com>
Date: Mon, 28 Oct 2024 05:04:21 +0900
Subject: [PATCH 02/25] =?UTF-8?q?feat:=20button=EC=97=90=20=ED=83=80?=
 =?UTF-8?q?=EC=9E=85=20=EC=A7=80=EC=A0=95=ED=95=B4=EC=A4=98=EC=84=9C=20?=
 =?UTF-8?q?=EC=9B=90=EC=B9=98=20=EC=95=8A=EB=8A=94=20submit=20=EC=95=88?=
 =?UTF-8?q?=EB=90=98=EB=8F=84=EB=A1=9D=20=EB=B0=A9=EC=A7=80=ED=95=98?=
 =?UTF-8?q?=EA=B8=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/form/Presentation/CoLeader/index.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/form/Presentation/CoLeader/index.tsx b/src/components/form/Presentation/CoLeader/index.tsx
index 13b7bf2b..f947df8c 100644
--- a/src/components/form/Presentation/CoLeader/index.tsx
+++ b/src/components/form/Presentation/CoLeader/index.tsx
@@ -30,7 +30,9 @@ const CoLeader = ({ value: coLeaders = [], onChange, error }: CoLeaderFieldProps
           <Leader key={idx}>
             <LeaderAvatar>👤</LeaderAvatar>
             <LeaderName>{leader}</LeaderName>
-            <DeleteButton onClick={() => handleDeleteLeader(idx)}>×</DeleteButton>
+            <DeleteButton type={'button'} onClick={() => handleDeleteLeader(idx)}>
+              ×
+            </DeleteButton>
           </Leader>
         ))}
         {coLeaders.length < 3 && (

From f8906a7252b8efec6c3ad2dee686eeece2c767ee Mon Sep 17 00:00:00 2001
From: ocahs9 <piorag99@gmail.com>
Date: Tue, 29 Oct 2024 01:52:03 +0900
Subject: [PATCH 03/25] =?UTF-8?q?feat:=20=EB=A9=98=EC=85=98=EC=9D=84=20?=
 =?UTF-8?q?=ED=8F=AC=ED=95=A8=ED=95=9C=20input=20=ED=8B=80=20=EC=99=84?=
 =?UTF-8?q?=EC=84=B1(=EC=99=84=EC=A0=84=ED=9E=88=20=EB=94=94=EC=9E=90?=
 =?UTF-8?q?=EC=9D=B8=20=EB=98=91=EA=B0=99=EC=9D=B4=20=EA=B5=AC=ED=98=84?=
 =?UTF-8?q?=EC=9D=80=20x)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../react-mentions/src/SuggestionsOverlay.js  |   1 +
 pages/_app.tsx                                |  59 ++--
 .../form/Presentation/CoLeader/index.tsx      | 180 ++++++++--
 .../SearchMention/SearchMentionContext.tsx    |  28 ++
 src/components/form/SearchMention/index.tsx   | 322 ++++++++++++++++++
 src/types/form.ts                             |   2 +-
 6 files changed, 526 insertions(+), 66 deletions(-)
 create mode 100644 src/components/form/SearchMention/SearchMentionContext.tsx
 create mode 100644 src/components/form/SearchMention/index.tsx

diff --git a/packages/react-mentions/src/SuggestionsOverlay.js b/packages/react-mentions/src/SuggestionsOverlay.js
index 6c85ced9..687e709d 100644
--- a/packages/react-mentions/src/SuggestionsOverlay.js
+++ b/packages/react-mentions/src/SuggestionsOverlay.js
@@ -78,6 +78,7 @@ function SuggestionsOverlay({
     return suggestionsToRender
   }
 
+  //여기서 엔터를 눌렀을 때 해당 값 설정되도록 만들수는 없을까?
   const renderSuggestion = (result, queryInfo, index) => {
     const isFocused = index === focusIndex
     const { childIndex, query } = queryInfo
diff --git a/pages/_app.tsx b/pages/_app.tsx
index b77ca31d..c70b223d 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -20,6 +20,7 @@ import '@sopt-makers/ui/dist/index.css';
 import { DialogProvider, ToastProvider } from '@sopt-makers/ui';
 import { MentionProvider } from '@components/feed/Mention/MentionContext';
 import { globalStyles } from 'styles/globals';
+import { SearchMentionProvider } from '@components/form/SearchMention/SearchMentionContext';
 
 // 리액트 하이드레이션 에러를 피하기 위해 사용. 렌더링에 관여하지 않는 코드여서 if 문으로 분기처리
 if (typeof window !== 'undefined') {
@@ -97,40 +98,42 @@ function MyApp({ Component, pageProps }: AppProps) {
   }, []);
 
   return (
-    <MentionProvider>
-      <QueryClientProvider client={queryClient}>
-        <SEO />
-        <Script
-          id="gtag-base"
-          strategy="afterInteractive"
-          dangerouslySetInnerHTML={{
-            __html: `
+    <SearchMentionProvider>
+      <MentionProvider>
+        <QueryClientProvider client={queryClient}>
+          <SEO />
+          <Script
+            id="gtag-base"
+            strategy="afterInteractive"
+            dangerouslySetInnerHTML={{
+              __html: `
             (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
             new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
             j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
             'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
             })(window,document,'script','dataLayer', '${GTM_ID}');
           `,
-          }}
-        />
-        <Layout>
-          <DialogProvider>
-            <ToastProvider>
-              <OverlayProvider>
-                {isServiceReady ? (
-                  <>
-                    <Header />
-                    <Component {...pageProps} />
-                  </>
-                ) : (
-                  <Loader />
-                )}
-              </OverlayProvider>
-            </ToastProvider>
-          </DialogProvider>
-        </Layout>
-      </QueryClientProvider>
-    </MentionProvider>
+            }}
+          />
+          <Layout>
+            <DialogProvider>
+              <ToastProvider>
+                <OverlayProvider>
+                  {isServiceReady ? (
+                    <>
+                      <Header />
+                      <Component {...pageProps} />
+                    </>
+                  ) : (
+                    <Loader />
+                  )}
+                </OverlayProvider>
+              </ToastProvider>
+            </DialogProvider>
+          </Layout>
+        </QueryClientProvider>
+      </MentionProvider>
+    </SearchMentionProvider>
   );
 }
 
diff --git a/src/components/form/Presentation/CoLeader/index.tsx b/src/components/form/Presentation/CoLeader/index.tsx
index f947df8c..13cf51c4 100644
--- a/src/components/form/Presentation/CoLeader/index.tsx
+++ b/src/components/form/Presentation/CoLeader/index.tsx
@@ -1,21 +1,52 @@
 import { styled } from 'stitches.config';
-import React, { useState } from 'react';
+import React, { useRef, useState } from 'react';
+import { IconPlus } from '@sopt-makers/icons';
+import CommonMention from '@components/feed/Mention';
+import SearchMention from '@components/form/SearchMention';
+import ProfileDefaultIcon from '@assets/svg/profile_default.svg?rect';
+import { IconSearch } from '@sopt-makers/icons';
+import { IconXCircle } from '@sopt-makers/icons';
+import { SearchField } from '@sopt-makers/ui';
+import { useQueryGetMentionUsers } from '@api/user/hooks';
 
 interface CoLeaderFieldProps {
-  value: string[];
-  onChange: (coLeaders: string[]) => void;
+  value: mentionableDataType[];
+  onChange: (coLeaders: mentionableDataType[]) => void;
   error: string | undefined;
 }
 
+interface mentionableDataType {
+  id: number;
+  display: string;
+  orgId: number;
+  userName: string;
+  recentPart: string;
+  recentGeneration: number;
+  profileImageUrl: string;
+}
+
 const CoLeader = ({ value: coLeaders = [], onChange, error }: CoLeaderFieldProps) => {
-  //const [coLeaders, setCoLeaders] = useState([]);
-  const [newLeader, setNewLeader] = useState('');
+  console.log('coLeaders:', coLeaders);
+  const { data: mentionUserList } = useQueryGetMentionUsers();
 
-  const handleAddLeader = () => {
-    if (newLeader && coLeaders.length < 3) {
-      onChange([...coLeaders, newLeader]);
-      setNewLeader('');
+  const handleUserSelect = (user: mentionableDataType) => {
+    if (coLeaders.length < 3 && !coLeaders.some(leader => leader.id === user.id)) {
+      onChange([...coLeaders, user]); // 선택한 유저 객체 추가
     }
+    setComment('');
+    setShowInput(false);
+  };
+
+  const [showInput, setShowInput] = useState(false);
+
+  const [comment, setComment] = useState('');
+  const [isFocused, setIsFocused] = useState(false);
+  const [userId, setUserId] = useState<number | null>(null);
+
+  const inputRef = useRef<HTMLTextAreaElement | null>(null);
+
+  const handleAddLeader = () => {
+    // 리더 추가 기능 비활성화
   };
 
   const handleDeleteLeader = (index: number) => {
@@ -27,9 +58,16 @@ const CoLeader = ({ value: coLeaders = [], onChange, error }: CoLeaderFieldProps
     <Container>
       <LeadersContainer>
         {coLeaders.map((leader, idx) => (
-          <Leader key={idx}>
-            <LeaderAvatar>👤</LeaderAvatar>
-            <LeaderName>{leader}</LeaderName>
+          <Leader key={leader.id}>
+            <SProfile>
+              {leader.profileImageUrl ? (
+                <img src={leader.profileImageUrl} alt={leader.userName} />
+              ) : (
+                <ProfileDefaultIcon />
+              )}
+              <span>{leader.userName}</span>
+            </SProfile>
+
             <DeleteButton type={'button'} onClick={() => handleDeleteLeader(idx)}>
               ×
             </DeleteButton>
@@ -37,15 +75,41 @@ const CoLeader = ({ value: coLeaders = [], onChange, error }: CoLeaderFieldProps
         ))}
         {coLeaders.length < 3 && (
           <AddLeader>
-            <AddInput
-              type="text"
-              placeholder="+ 이름 입력"
-              value={newLeader}
-              onChange={e => setNewLeader(e.target.value)}
-            />
-            <AddButton type={'button'} onClick={handleAddLeader}>
-              추가
+            <AddButton
+              type={'button'}
+              onClick={() => {
+                setShowInput(true);
+                setComment('');
+              }}
+            >
+              <IconPlus style={{ width: '22px', height: '22px', color: 'white', cursor: 'pointer' }} />
             </AddButton>
+            {showInput && (
+              <CommentInput>
+                <InputBox isActive={comment !== ''}>
+                  <SearchMention
+                    mentionUserList={mentionUserList}
+                    inputRef={inputRef}
+                    value={comment}
+                    setValue={setComment}
+                    placeholder={`Search...`}
+                    setIsFocused={setIsFocused}
+                    setUserId={setUserId}
+                    onUserSelect={handleUserSelect}
+                  />
+                  {comment ? (
+                    <IconXCircle
+                      style={{ width: '24px', height: '24px' }}
+                      onClick={() => {
+                        setComment('');
+                      }}
+                    />
+                  ) : (
+                    <IconSearch style={{ width: '24px', height: '24px' }} />
+                  )}
+                </InputBox>
+              </CommentInput>
+            )}
           </AddLeader>
         )}
       </LeadersContainer>
@@ -106,33 +170,56 @@ const AddLeader = styled('div', {
   display: 'flex',
   alignItems: 'center',
   gap: '8px',
+  position: 'relative',
 });
 
-const AddInput = styled('input', {
-  width: '120px',
-  padding: '4px 8px',
-  borderRadius: '4px',
+const CommentInput = styled('div', {
+  position: 'absolute',
+  top: '40px',
+  display: 'inline-flex',
+  padding: '8px',
+  alignItems: 'flex-start',
+  borderRadius: '13px',
   border: '1px solid $gray700',
-  backgroundColor: '$gray900',
-  color: '$white',
-  outline: 'none',
+  background: '$gray900',
+  width: '170px',
+  height: '64px',
+});
 
-  '&::placeholder': {
-    color: '$gray500',
+const InputBox = styled('div', {
+  width: '100%',
+  height: '100%',
+  display: 'flex',
+  padding: '11px 16px',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  borderRadius: '10px',
+  backgroundColor: '$gray800',
+  variants: {
+    isActive: {
+      true: {
+        border: '1px solid $gray200',
+      },
+      false: {
+        border: '1px solid transparent',
+      },
+    },
   },
 });
 
 const AddButton = styled('button', {
-  type: 'button', //이거 없으면 제출 처리됨!!
-  padding: '4px 8px',
-  backgroundColor: '$green500',
-  color: '$white',
-  border: 'none',
-  borderRadius: '4px',
+  type: 'button',
+  backgroundColor: '$gray700',
+  borderRadius: '100px',
   cursor: 'pointer',
-
+  display: 'flex',
+  width: '32px',
+  height: '32px',
+  padding: '5px',
+  justifyContent: 'center',
+  alignItems: 'center',
   '&:hover': {
-    backgroundColor: '$green400',
+    backgroundColor: '$gray500',
   },
 });
 
@@ -141,3 +228,22 @@ const ErrorMessage = styled('div', {
   fontSize: '12px',
   marginTop: '8px',
 });
+
+const SProfile = styled('a', {
+  flexType: 'verticalCenter',
+  color: '$gray10',
+  width: 'fit-content',
+  img: {
+    width: '$60',
+    height: '$60',
+    borderRadius: '50%',
+    objectFit: 'cover',
+    mr: '$16',
+    background: '$gray700',
+    '@tablet': {
+      width: '$32',
+      height: '$32',
+      mr: '$8',
+    },
+  },
+});
diff --git a/src/components/form/SearchMention/SearchMentionContext.tsx b/src/components/form/SearchMention/SearchMentionContext.tsx
new file mode 100644
index 00000000..64e10eef
--- /dev/null
+++ b/src/components/form/SearchMention/SearchMentionContext.tsx
@@ -0,0 +1,28 @@
+import React, { createContext, useState, Dispatch, SetStateAction } from 'react';
+
+interface SearchMentionProviderProps {
+  children: React.ReactNode;
+}
+
+interface User {
+  userName: string;
+  userId: number;
+}
+
+interface SearchMentionContextProps {
+  user: User;
+  setUser: Dispatch<SetStateAction<User>>;
+}
+
+const SearchMentionContext = createContext<SearchMentionContextProps>({
+  user: { userName: '', userId: 0 },
+  setUser: () => {},
+});
+
+const SearchMentionProvider: React.FC<SearchMentionProviderProps> = ({ children }) => {
+  const [user, setUser] = useState({ userName: '', userId: 0 });
+
+  return <SearchMentionContext.Provider value={{ user, setUser }}>{children}</SearchMentionContext.Provider>;
+};
+
+export { SearchMentionContext, SearchMentionProvider };
diff --git a/src/components/form/SearchMention/index.tsx b/src/components/form/SearchMention/index.tsx
new file mode 100644
index 00000000..295176a8
--- /dev/null
+++ b/src/components/form/SearchMention/index.tsx
@@ -0,0 +1,322 @@
+import { useQueryGetMentionUsers } from '@api/user/hooks';
+import { parseMentionedUserIds } from '@components/util/parseMentionedUserIds';
+import { colors } from '@sopt-makers/colors';
+import { fontsObject } from '@sopt-makers/fonts';
+import { keyframes, styled } from '@stitches/react';
+import DefaultProfile from 'public/assets/svg/mention_profile_default.svg';
+import React, { useCallback, useContext, useEffect, useState } from 'react';
+import { Mention, MentionsInput, SuggestionDataItem } from 'react-mentions';
+import { SearchMentionContext } from './SearchMentionContext';
+
+interface mentionableDataType {
+  id: number;
+  display: string;
+  orgId: number;
+  userName: string;
+  recentPart: string;
+  recentGeneration: number;
+  profileImageUrl: string;
+}
+
+interface SearchMentionProps {
+  mentionUserList: mentionableDataType[];
+  inputRef: React.RefObject<HTMLTextAreaElement>;
+  value: string;
+  setValue: (val: string) => void;
+  placeholder?: string;
+  setIsFocused: React.Dispatch<React.SetStateAction<boolean>>;
+  setUserId: React.Dispatch<React.SetStateAction<number | null>>;
+  onClick?: () => void;
+  onUserSelect: (user: mentionableDataType) => void;
+}
+
+const SearchMention = ({
+  mentionUserList,
+  inputRef,
+  value,
+  setValue,
+  placeholder,
+  setIsFocused,
+  setUserId,
+  onClick,
+  onUserSelect,
+}: SearchMentionProps) => {
+  useEffect(() => {
+    console.log(value);
+  }, [value]);
+  //전역 상태(이걸로 user에게 필요한 정보 잘 모아서, api 요청 보내야할 듯) -> 근데 지금은 딱히 사용하고 있지 않음
+  const { user, setUser } = useContext(SearchMentionContext);
+  const [selectedSuggestionIndex, setSelectedSuggestionIndex] = useState(-1); // -1은 선택된 것이 없음을 나타냄
+
+  const handleUserClick = (user: mentionableDataType) => {
+    onUserSelect(user);
+    setValue('');
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      const suggestions = getFilteredAndRandomUsers(
+        value,
+        mentionUserList.map(v => ({ ...v, id: v.orgId, display: v.userName }))
+      );
+
+      if (suggestions.length > 0) {
+        // If there are suggestions, select the first one
+        handleUserClick(suggestions[0]);
+        e.preventDefault(); // Prevent default behavior of Enter key (like submitting a form)
+      }
+    }
+  };
+
+  const filterUsersBySearchTerm = (searchTerm: string, users: mentionableDataType[]) => {
+    return users?.filter((v: mentionableDataType) => v.userName.includes(searchTerm));
+  };
+
+  const getRandomUsers = (users: mentionableDataType[]) => {
+    const shuffled = users?.sort(() => 0.5 - Math.random());
+    return shuffled.slice(0, 30);
+  };
+
+  const [isMobile, setIsMobile] = useState(false);
+
+  useEffect(() => {
+    const userAgent = navigator.userAgent;
+    if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent)) {
+      setIsMobile(true);
+    }
+  }, []);
+
+  const getFilteredAndRandomUsers = (searchTerm: string, users: mentionableDataType[]) => {
+    const filteredUsers = filterUsersBySearchTerm(searchTerm, users);
+    const randomUsers = getRandomUsers(filteredUsers);
+    return randomUsers;
+  };
+
+  const customSuggestionsContainer = (children: React.ReactNode) => {
+    return <SCustomSuggestionsContainer>{children}</SCustomSuggestionsContainer>;
+  };
+
+  //이게 인물 하나 하나의 모습
+  const renderSuggestion = useCallback((suggestion: SuggestionDataItem) => {
+    return (
+      <>
+        <SRenderSuggestion
+          key={suggestion.id}
+          onClick={() => handleUserClick(suggestion as mentionableDataType)}
+          onKeyDown={(e: React.KeyboardEvent) => {
+            //엔터 누르면 간편히 설정되도록 하고 싶은데, 위에 li(aria-selected 속성 사용)를 사용해야할 것 같아서..
+            //아직은 구현 못함
+            if (e.key === 'Enter') {
+              handleUserClick(suggestion as mentionableDataType);
+            }
+          }}
+        >
+          {(suggestion as mentionableDataType).profileImageUrl ? (
+            <SImageWrapper>
+              <img src={(suggestion as mentionableDataType).profileImageUrl} alt="Img" />
+            </SImageWrapper>
+          ) : (
+            <DefaultProfile />
+          )}
+
+          <div>
+            <div>{suggestion.display}</div>
+            <p>
+              {(suggestion as mentionableDataType).recentGeneration}기{` `}
+              {(suggestion as mentionableDataType).recentPart}
+            </p>
+          </div>
+        </SRenderSuggestion>
+      </>
+    );
+  }, []);
+
+  useEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [inputRef]);
+
+  return (
+    <MentionsInput
+      inputRef={inputRef}
+      value={value}
+      onChange={(e, newValue) => {
+        setUserId(user.userId); //아마 api 요청 보낼 때 전역상태인 user.userId를 잘 활용해야 할 거임! -> 아닌가..?
+        if (!inputRef.current) {
+          setValue(newValue);
+          return;
+        }
+        if (e.target.value.length === 0) {
+          inputRef.current.style.height = 'auto';
+        } else {
+          inputRef.current.style.height = `${inputRef.current.scrollHeight}px`;
+        }
+        setValue(newValue);
+      }}
+      placeholder={placeholder}
+      onFocus={() => setIsFocused(true)}
+      customSuggestionsContainer={customSuggestionsContainer}
+      style={FeedModalMentionStyle}
+      forceSuggestionsAboveCursor={isMobile}
+      onClick={onClick}
+      onKeyDown={(e: React.KeyboardEvent) => {
+        if (e.key === 'Enter') {
+          // 엔터 키를 눌렀을 때 기본 동작 방지
+          e.preventDefault();
+        }
+      }}
+    >
+      <Mention
+        trigger=""
+        displayTransform={(_, display) => display}
+        data={search => {
+          if (search.length < 1) return [];
+          const data = getFilteredAndRandomUsers(
+            search,
+            mentionUserList?.map((v: mentionableDataType) => ({ ...v, id: v.orgId, display: v.userName }))
+          );
+          return data;
+        }}
+        renderSuggestion={renderSuggestion}
+      />
+    </MentionsInput>
+  );
+};
+
+export default SearchMention;
+
+const SImageWrapper = styled('div', {
+  img: {
+    objectFit: 'cover',
+    width: '32px',
+    height: '32px',
+    borderRadius: '100%',
+  },
+});
+
+const FeedModalMentionStyle = {
+  width: '100%',
+  height: '100%',
+  '&multiLine': {
+    control: {
+      fontWeight: 'normal',
+      fontFamily: 'inherit',
+      fontSize: 'inherit',
+      lineHeight: 'inherit',
+      width: '100%',
+      height: '100%',
+      boxSizing: 'border-box',
+    },
+    input: {
+      color: colors.gray50,
+      innerHeight: '0',
+      borderRadius: '10px',
+      border: 'none',
+      padding: '0',
+      margin: '0',
+      marginTop: '0',
+      marginLeft: '0',
+      boxSizing: 'border-box',
+      overflow: 'auto',
+      width: '100%',
+      maxHeight: '208px',
+      overscrollBehavior: 'none',
+      fontFamily: 'inherit',
+      fontWeight: 'normal',
+      fontSize: 'inherit',
+      lineHeight: 'inherit',
+    },
+    highlighter: {
+      color: colors.success,
+      innerHeight: '0',
+      border: 'none',
+      padding: '0',
+      margin: '0',
+      marginTop: '0',
+      marginLeft: '0',
+      overflow: 'auto',
+      boxSizing: 'border-box',
+      maxHeight: '208px',
+      pointerEvents: 'none',
+      width: '100%',
+      zIndex: '1',
+    },
+  },
+  suggestions: {
+    backgroundColor: 'transparent',
+    item: {
+      minWidth: '154px',
+      borderRadius: '8px',
+      '&focused': {
+        background: colors.gray800,
+      },
+    },
+  },
+};
+
+const fadeIn = keyframes({
+  '0%': { opacity: 0, transform: 'translateY(0)' },
+  '100%': { opacity: 1, transform: 'translateY(10px)' },
+});
+
+const SCustomSuggestionsContainer = styled('div', {
+  borderRadius: '13px',
+  boxSizing: 'border-box',
+  width: '170px',
+  padding: '8px',
+  background: '#17181c',
+  position: 'absolute',
+  top: '18px',
+  left: '-24px',
+  border: `1px solid ${colors.gray700}`,
+
+  animation: `${fadeIn} 0.5s forwards`,
+
+  maxHeight: '230px',
+
+  overflowY: 'scroll',
+  overflowX: 'hidden',
+
+  // 스크롤 스타일
+  '&::-webkit-scrollbar': {
+    width: '4px',
+  },
+  '&::-webkit-scrollbar-thumb': {
+    backgroundColor: colors.gray600,
+    borderRadius: '10px',
+  },
+  '&::-webkit-scrollbar-track': {
+    backgroundColor: 'transparent',
+  },
+
+  '@tablet': {
+    position: 'fixed',
+    left: '0',
+    bottom: '120px',
+    width: '100%',
+    maxHeight: '418px',
+    height: '100%',
+    border: 'none',
+    borderRadius: '20px',
+  },
+});
+
+const SRenderSuggestion = styled('button', {
+  boxSizing: 'border-box',
+  padding: '8px 12px',
+  gap: '12px',
+  display: 'flex',
+  alignItems: 'center',
+  borderRadius: '8px',
+  marginBottom: '6px',
+  ...fontsObject.BODY_2_16_M,
+  color: colors.gray10,
+  '& > div > p': {
+    ...fontsObject.BODY_4_13_R,
+    color: colors.gray100,
+  },
+  '@tablet': {
+    padding: '16px 12px',
+  },
+});
diff --git a/src/types/form.ts b/src/types/form.ts
index ff9633fa..e060c3d1 100644
--- a/src/types/form.ts
+++ b/src/types/form.ts
@@ -77,7 +77,7 @@ export const schema = z.object({
       )
       .min(1, { message: '대상 파트를 선택해주세요.' }),
     note: z.string().max(1000, { message: '1000자 까지 입력 가능합니다.' }).optional().nullable(),
-    coLeader: z.array(z.string()).optional(),
+    coLeader: z.array(z.any()).optional(),
   }),
 });
 

From 67c3dbf825876cc627f89b7581fe2d591e4bbe7a Mon Sep 17 00:00:00 2001
From: ocahs9 <piorag99@gmail.com>
Date: Tue, 29 Oct 2024 01:56:53 +0900
Subject: [PATCH 04/25] =?UTF-8?q?fix:=20+=EB=B2=84=ED=8A=BC=20=EC=95=9E?=
 =?UTF-8?q?=EC=97=90=20=EA=B3=A0=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../form/Presentation/CoLeader/index.tsx      | 33 ++++++++++---------
 1 file changed, 17 insertions(+), 16 deletions(-)

diff --git a/src/components/form/Presentation/CoLeader/index.tsx b/src/components/form/Presentation/CoLeader/index.tsx
index 13cf51c4..d11e2cf8 100644
--- a/src/components/form/Presentation/CoLeader/index.tsx
+++ b/src/components/form/Presentation/CoLeader/index.tsx
@@ -57,22 +57,6 @@ const CoLeader = ({ value: coLeaders = [], onChange, error }: CoLeaderFieldProps
   return (
     <Container>
       <LeadersContainer>
-        {coLeaders.map((leader, idx) => (
-          <Leader key={leader.id}>
-            <SProfile>
-              {leader.profileImageUrl ? (
-                <img src={leader.profileImageUrl} alt={leader.userName} />
-              ) : (
-                <ProfileDefaultIcon />
-              )}
-              <span>{leader.userName}</span>
-            </SProfile>
-
-            <DeleteButton type={'button'} onClick={() => handleDeleteLeader(idx)}>
-              ×
-            </DeleteButton>
-          </Leader>
-        ))}
         {coLeaders.length < 3 && (
           <AddLeader>
             <AddButton
@@ -112,6 +96,23 @@ const CoLeader = ({ value: coLeaders = [], onChange, error }: CoLeaderFieldProps
             )}
           </AddLeader>
         )}
+
+        {coLeaders.map((leader, idx) => (
+          <Leader key={leader.id}>
+            <SProfile>
+              {leader.profileImageUrl ? (
+                <img src={leader.profileImageUrl} alt={leader.userName} />
+              ) : (
+                <ProfileDefaultIcon />
+              )}
+              <span>{leader.userName}</span>
+            </SProfile>
+
+            <DeleteButton type={'button'} onClick={() => handleDeleteLeader(idx)}>
+              ×
+            </DeleteButton>
+          </Leader>
+        ))}
       </LeadersContainer>
 
       {error && <ErrorMessage>{error}</ErrorMessage>}

From d7d2fa72cd85efca2ff0dc3baeaf45622c5c9d2b Mon Sep 17 00:00:00 2001
From: ocahs9 <piorag99@gmail.com>
Date: Tue, 29 Oct 2024 01:59:17 +0900
Subject: [PATCH 05/25] =?UTF-8?q?design:=20input=EC=B0=BD=20=EC=97=B4?=
 =?UTF-8?q?=EB=A0=A4=EC=9E=88=EC=9D=84=20=EB=95=8C=20=EB=B2=84=ED=8A=BC=20?=
 =?UTF-8?q?=EB=B0=9D=EC=95=84=EC=A7=80=EB=8A=94=20=EA=B2=83=20=EC=9C=A0?=
 =?UTF-8?q?=EC=A7=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/form/Presentation/CoLeader/index.tsx | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/components/form/Presentation/CoLeader/index.tsx b/src/components/form/Presentation/CoLeader/index.tsx
index d11e2cf8..bc6d1895 100644
--- a/src/components/form/Presentation/CoLeader/index.tsx
+++ b/src/components/form/Presentation/CoLeader/index.tsx
@@ -65,6 +65,7 @@ const CoLeader = ({ value: coLeaders = [], onChange, error }: CoLeaderFieldProps
                 setShowInput(true);
                 setComment('');
               }}
+              isActive={showInput}
             >
               <IconPlus style={{ width: '22px', height: '22px', color: 'white', cursor: 'pointer' }} />
             </AddButton>
@@ -222,6 +223,13 @@ const AddButton = styled('button', {
   '&:hover': {
     backgroundColor: '$gray500',
   },
+  variants: {
+    isActive: {
+      true: {
+        backgroundColor: '$gray500',
+      },
+    },
+  },
 });
 
 const ErrorMessage = styled('div', {

From 27d7a6b2eed8ec08be819cd7544efd3e5b5dc9e1 Mon Sep 17 00:00:00 2001
From: ocahs9 <piorag99@gmail.com>
Date: Tue, 29 Oct 2024 19:40:13 +0900
Subject: [PATCH 06/25] =?UTF-8?q?feat:=20=EB=AA=A8=EC=9E=84=20=EA=B0=9C?=
 =?UTF-8?q?=EC=84=A4=20-=20=EA=B3=B5=EB=8F=99=20=EB=AA=A8=EC=9E=84?=
 =?UTF-8?q?=EC=9E=A5=20=EC=B6=94=EA=B0=80=20=EB=B7=B0,=EA=B8=B0=EB=8A=A5?=
 =?UTF-8?q?=20=EA=B5=AC=ED=98=84=20=EC=99=84=EB=A3=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../form/Presentation/CoLeader/index.tsx      | 59 ++++++++++---------
 1 file changed, 32 insertions(+), 27 deletions(-)

diff --git a/src/components/form/Presentation/CoLeader/index.tsx b/src/components/form/Presentation/CoLeader/index.tsx
index bc6d1895..f1be2db8 100644
--- a/src/components/form/Presentation/CoLeader/index.tsx
+++ b/src/components/form/Presentation/CoLeader/index.tsx
@@ -8,6 +8,8 @@ import { IconSearch } from '@sopt-makers/icons';
 import { IconXCircle } from '@sopt-makers/icons';
 import { SearchField } from '@sopt-makers/ui';
 import { useQueryGetMentionUsers } from '@api/user/hooks';
+import { fontsObject } from '@sopt-makers/fonts';
+import { IconXClose } from '@sopt-makers/icons';
 
 interface CoLeaderFieldProps {
   value: mentionableDataType[];
@@ -57,6 +59,7 @@ const CoLeader = ({ value: coLeaders = [], onChange, error }: CoLeaderFieldProps
   return (
     <Container>
       <LeadersContainer>
+        {/*추가 버튼과 멘션 인풋 */}
         {coLeaders.length < 3 && (
           <AddLeader>
             <AddButton
@@ -98,6 +101,7 @@ const CoLeader = ({ value: coLeaders = [], onChange, error }: CoLeaderFieldProps
           </AddLeader>
         )}
 
+        {/*추가된 공동 모임장 프로필 렌더링 */}
         {coLeaders.map((leader, idx) => (
           <Leader key={leader.id}>
             <SProfile>
@@ -106,16 +110,16 @@ const CoLeader = ({ value: coLeaders = [], onChange, error }: CoLeaderFieldProps
               ) : (
                 <ProfileDefaultIcon />
               )}
-              <span>{leader.userName}</span>
             </SProfile>
-
+            <LeaderName>{leader.userName}</LeaderName>
             <DeleteButton type={'button'} onClick={() => handleDeleteLeader(idx)}>
-              ×
+              <IconXClose style={{ width: '16px', height: '16px', color: '#9D9DA4', strokeWidth: '1.5' }} />
             </DeleteButton>
           </Leader>
         ))}
       </LeadersContainer>
 
+      {/*추후 사용할수도 있어 만들어 둔 에러 메세지 */}
       {error && <ErrorMessage>{error}</ErrorMessage>}
     </Container>
   );
@@ -124,48 +128,49 @@ const CoLeader = ({ value: coLeaders = [], onChange, error }: CoLeaderFieldProps
 export default CoLeader;
 
 const Container = styled('div', {
-  border: '1px solid $gray700',
-  padding: '16px',
-  borderRadius: '8px',
-  backgroundColor: '$gray800',
+  //디자인적인 건 x (에러메세지도 담아두기 위한 Container)
 });
 
 const LeadersContainer = styled('div', {
   display: 'flex',
   alignItems: 'center',
-  gap: '12px',
+  gap: '16px',
 });
 
 const Leader = styled('div', {
+  width: '134px',
+  heigth: '48px',
+
   display: 'flex',
+  padding: '8px 12px',
+  justifyContent: 'center',
   alignItems: 'center',
-  backgroundColor: '$gray600',
-  borderRadius: '4px',
-  padding: '4px 8px',
+  gap: '10px',
+  borderRadius: '10px',
+  backgroundColor: '$gray900',
+  flexWrap: 'nowrap',
+
   color: '$white',
   position: 'relative',
 });
 
-const LeaderAvatar = styled('span', {
-  fontSize: '20px',
-  marginRight: '6px',
-});
-
 const LeaderName = styled('span', {
-  fontSize: '14px',
   color: '$white',
+  ...fontsObject.BODY_2_16_M,
+  whiteSpace: 'nowrap',
 });
 
 const DeleteButton = styled('button', {
-  background: 'none',
-  border: 'none',
-  color: '$red500',
-  fontSize: '14px',
+  display: 'flex',
+  width: '16px',
+  height: '16px',
+  padding: '2px',
+  justifyContent: 'center',
+  alignItems: 'center',
+
+  borderRadius: '50px',
+  background: '$gray700',
   cursor: 'pointer',
-  position: 'absolute',
-  top: '0',
-  right: '0',
-  padding: '2px 4px',
 });
 
 const AddLeader = styled('div', {
@@ -243,8 +248,8 @@ const SProfile = styled('a', {
   color: '$gray10',
   width: 'fit-content',
   img: {
-    width: '$60',
-    height: '$60',
+    width: '$32',
+    height: '$32',
     borderRadius: '50%',
     objectFit: 'cover',
     mr: '$16',

From 084b75ea49bb0838b3616816e9a7f22c87139f94 Mon Sep 17 00:00:00 2001
From: ocahs9 <piorag99@gmail.com>
Date: Tue, 29 Oct 2024 19:40:36 +0900
Subject: [PATCH 07/25] =?UTF-8?q?design:=20=ED=94=BC=EA=B7=B8=EB=A7=88?=
 =?UTF-8?q?=EC=83=81=EC=97=90=EC=84=9C=EB=8A=94=208px=EB=A1=9C=20=EB=90=98?=
 =?UTF-8?q?=EC=96=B4=EC=9E=88=EC=96=B4=EC=84=9C=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/form/HelpMessage/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/form/HelpMessage/index.tsx b/src/components/form/HelpMessage/index.tsx
index f7a223a2..73109593 100644
--- a/src/components/form/HelpMessage/index.tsx
+++ b/src/components/form/HelpMessage/index.tsx
@@ -13,7 +13,7 @@ const HelpMessage = ({ children }: HelpMessageProps) => {
 export default HelpMessage;
 
 const SHelpMessage = styled('span', {
-  marginBottom: 18,
+  marginBottom: 8,
   display: 'inline-block',
   ...fontsObject.LABEL_4_12_SB,
   color: '$gray300',

From e3c86d0902b008a6451c74ea9ce035d2cbb10df7 Mon Sep 17 00:00:00 2001
From: ocahs9 <piorag99@gmail.com>
Date: Tue, 29 Oct 2024 20:24:48 +0900
Subject: [PATCH 08/25] =?UTF-8?q?design:=20mobile=20=EB=B0=98=EC=9D=91?=
 =?UTF-8?q?=ED=98=95=20=EB=94=94=EC=9E=90=EC=9D=B8=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../form/Presentation/CoLeader/index.tsx      | 127 +++++++++++++++---
 1 file changed, 106 insertions(+), 21 deletions(-)

diff --git a/src/components/form/Presentation/CoLeader/index.tsx b/src/components/form/Presentation/CoLeader/index.tsx
index f1be2db8..9a0e405d 100644
--- a/src/components/form/Presentation/CoLeader/index.tsx
+++ b/src/components/form/Presentation/CoLeader/index.tsx
@@ -70,7 +70,7 @@ const CoLeader = ({ value: coLeaders = [], onChange, error }: CoLeaderFieldProps
               }}
               isActive={showInput}
             >
-              <IconPlus style={{ width: '22px', height: '22px', color: 'white', cursor: 'pointer' }} />
+              <StyledIconPlus />
             </AddButton>
             {showInput && (
               <CommentInput>
@@ -80,20 +80,19 @@ const CoLeader = ({ value: coLeaders = [], onChange, error }: CoLeaderFieldProps
                     inputRef={inputRef}
                     value={comment}
                     setValue={setComment}
-                    placeholder={`Search...`}
+                    placeholder={`멤버 검색`}
                     setIsFocused={setIsFocused}
                     setUserId={setUserId}
                     onUserSelect={handleUserSelect}
                   />
                   {comment ? (
-                    <IconXCircle
-                      style={{ width: '24px', height: '24px' }}
+                    <StyledIconXCircle
                       onClick={() => {
                         setComment('');
                       }}
                     />
                   ) : (
-                    <IconSearch style={{ width: '24px', height: '24px' }} />
+                    <StyledIconSearch />
                   )}
                 </InputBox>
               </CommentInput>
@@ -102,21 +101,23 @@ const CoLeader = ({ value: coLeaders = [], onChange, error }: CoLeaderFieldProps
         )}
 
         {/*추가된 공동 모임장 프로필 렌더링 */}
-        {coLeaders.map((leader, idx) => (
-          <Leader key={leader.id}>
-            <SProfile>
-              {leader.profileImageUrl ? (
-                <img src={leader.profileImageUrl} alt={leader.userName} />
-              ) : (
-                <ProfileDefaultIcon />
-              )}
-            </SProfile>
-            <LeaderName>{leader.userName}</LeaderName>
-            <DeleteButton type={'button'} onClick={() => handleDeleteLeader(idx)}>
-              <IconXClose style={{ width: '16px', height: '16px', color: '#9D9DA4', strokeWidth: '1.5' }} />
-            </DeleteButton>
-          </Leader>
-        ))}
+        <LeadersWrapper>
+          {coLeaders.map((leader, idx) => (
+            <Leader key={leader.id}>
+              <SProfile>
+                {leader.profileImageUrl ? (
+                  <img src={leader.profileImageUrl} alt={leader.userName} />
+                ) : (
+                  <StyledProfileDefaultIcon />
+                )}
+              </SProfile>
+              <LeaderName>{leader.userName}</LeaderName>
+              <DeleteButton type={'button'} onClick={() => handleDeleteLeader(idx)}>
+                <StyledIconXClose />
+              </DeleteButton>
+            </Leader>
+          ))}
+        </LeadersWrapper>
       </LeadersContainer>
 
       {/*추후 사용할수도 있어 만들어 둔 에러 메세지 */}
@@ -135,6 +136,19 @@ const LeadersContainer = styled('div', {
   display: 'flex',
   alignItems: 'center',
   gap: '16px',
+  '@mobile': {
+    gap: '10px',
+  },
+});
+
+const LeadersWrapper = styled('div', {
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  gap: '10px',
+  '@mobile': {
+    gap: '8px',
+  },
 });
 
 const Leader = styled('div', {
@@ -146,18 +160,31 @@ const Leader = styled('div', {
   justifyContent: 'center',
   alignItems: 'center',
   gap: '10px',
+
   borderRadius: '10px',
   backgroundColor: '$gray900',
   flexWrap: 'nowrap',
 
   color: '$white',
   position: 'relative',
+
+  '@mobile': {
+    width: '89px',
+    height: '30px',
+    padding: '5px 8px',
+    gap: '6px',
+    borderRadius: '6.25px',
+  },
 });
 
 const LeaderName = styled('span', {
   color: '$white',
   ...fontsObject.BODY_2_16_M,
   whiteSpace: 'nowrap',
+
+  '@mobile': {
+    ...fontsObject.LABEL_5_11_SB,
+  },
 });
 
 const DeleteButton = styled('button', {
@@ -171,6 +198,10 @@ const DeleteButton = styled('button', {
   borderRadius: '50px',
   background: '$gray700',
   cursor: 'pointer',
+  '@mobile': {
+    width: '12px',
+    height: '12px',
+  },
 });
 
 const AddLeader = styled('div', {
@@ -182,7 +213,7 @@ const AddLeader = styled('div', {
 
 const CommentInput = styled('div', {
   position: 'absolute',
-  top: '40px',
+  top: '44px', //32 + 12
   display: 'inline-flex',
   padding: '8px',
   alignItems: 'flex-start',
@@ -235,6 +266,12 @@ const AddButton = styled('button', {
       },
     },
   },
+  '@mobile': {
+    width: '24px',
+    height: '24px',
+    padding: '3.75px',
+    br: '75px',
+  },
 });
 
 const ErrorMessage = styled('div', {
@@ -259,5 +296,53 @@ const SProfile = styled('a', {
       height: '$32',
       mr: '$8',
     },
+    '@mobile': {
+      width: '$20',
+      height: '$20',
+    },
+  },
+});
+
+const StyledIconXCircle = styled(IconXCircle, {
+  width: '24px',
+  height: '24px',
+  cursor: 'pointer',
+  '@mobile': {},
+});
+
+const StyledIconSearch = styled(IconSearch, {
+  width: '24px',
+  height: '24px',
+  //모바일에선 input에 다른 뷰 필요 (현재는 구현 x)
+});
+
+const StyledIconPlus = styled(IconPlus, {
+  width: '22px',
+  height: '22px',
+  color: 'white',
+  cursor: 'pointer',
+  '@mobile': {
+    width: '16.5px',
+    height: '16.5px',
+  },
+});
+
+const StyledIconXClose = styled(IconXClose, {
+  width: '12px',
+  height: '12px',
+  '@mobile': {
+    width: '8px',
+    height: '8px',
+  },
+  color: '#9D9DA4',
+  strokeWidth: '1.5',
+});
+
+const StyledProfileDefaultIcon = styled(ProfileDefaultIcon, {
+  width: '32px',
+  height: '32px',
+  '@mobile': {
+    width: '20px',
+    height: '20px',
   },
 });

From b793d91ac896daac0be83b13b91bdd7d30258a3b Mon Sep 17 00:00:00 2001
From: ocahs9 <piorag99@gmail.com>
Date: Tue, 29 Oct 2024 20:32:03 +0900
Subject: [PATCH 09/25] =?UTF-8?q?fix:=20coLeader.map=20is=20not=20a=20func?=
 =?UTF-8?q?tion=20=EB=B2=84=EA=B7=B8=20=ED=95=B4=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/edit/index.tsx | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/pages/edit/index.tsx b/pages/edit/index.tsx
index 37f11882..7a52f891 100644
--- a/pages/edit/index.tsx
+++ b/pages/edit/index.tsx
@@ -38,6 +38,11 @@ const EditPage = () => {
   const formMethods = useForm<FormType>({
     mode: 'onChange',
     resolver: zodResolver(schema),
+    defaultValues: {
+      detail: {
+        coLeader: [],
+      },
+    },
   });
 
   const onSubmit: SubmitHandler<FormType> = async formData => {

From af213c0823850aecc9575c20854f01d3bc69428f Mon Sep 17 00:00:00 2001
From: ocahs9 <piorag99@gmail.com>
Date: Wed, 30 Oct 2024 00:06:02 +0900
Subject: [PATCH 10/25] =?UTF-8?q?feat:=20=EB=AA=A8=EB=B0=94=EC=9D=BC=20?=
 =?UTF-8?q?=EB=A9=98=EC=85=98=20=EB=B0=94=ED=85=80=EC=8B=9C=ED=8A=B8=20?=
 =?UTF-8?q?=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../form/Presentation/CoLeader/index.tsx      | 134 ++++++++++++++----
 src/components/form/SearchMention/index.tsx   |  21 ++-
 2 files changed, 124 insertions(+), 31 deletions(-)

diff --git a/src/components/form/Presentation/CoLeader/index.tsx b/src/components/form/Presentation/CoLeader/index.tsx
index 9a0e405d..e790ccb7 100644
--- a/src/components/form/Presentation/CoLeader/index.tsx
+++ b/src/components/form/Presentation/CoLeader/index.tsx
@@ -1,12 +1,10 @@
 import { styled } from 'stitches.config';
-import React, { useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { IconPlus } from '@sopt-makers/icons';
-import CommonMention from '@components/feed/Mention';
 import SearchMention from '@components/form/SearchMention';
 import ProfileDefaultIcon from '@assets/svg/profile_default.svg?rect';
 import { IconSearch } from '@sopt-makers/icons';
 import { IconXCircle } from '@sopt-makers/icons';
-import { SearchField } from '@sopt-makers/ui';
 import { useQueryGetMentionUsers } from '@api/user/hooks';
 import { fontsObject } from '@sopt-makers/fonts';
 import { IconXClose } from '@sopt-makers/icons';
@@ -40,15 +38,24 @@ const CoLeader = ({ value: coLeaders = [], onChange, error }: CoLeaderFieldProps
   };
 
   const [showInput, setShowInput] = useState(false);
-
   const [comment, setComment] = useState('');
+
   const [isFocused, setIsFocused] = useState(false);
   const [userId, setUserId] = useState<number | null>(null);
-
   const inputRef = useRef<HTMLTextAreaElement | null>(null);
 
-  const handleAddLeader = () => {
-    // 리더 추가 기능 비활성화
+  const [isMobile, setIsMobile] = useState(false);
+  useEffect(() => {
+    const handleResize = () => {
+      setIsMobile(window.innerWidth <= 414);
+    };
+    window.addEventListener('resize', handleResize);
+    handleResize(); // Initial check
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
+  const handleBackdropClick = () => {
+    setShowInput(false);
   };
 
   const handleDeleteLeader = (index: number) => {
@@ -73,29 +80,59 @@ const CoLeader = ({ value: coLeaders = [], onChange, error }: CoLeaderFieldProps
               <StyledIconPlus />
             </AddButton>
             {showInput && (
-              <CommentInput>
-                <InputBox isActive={comment !== ''}>
-                  <SearchMention
-                    mentionUserList={mentionUserList}
-                    inputRef={inputRef}
-                    value={comment}
-                    setValue={setComment}
-                    placeholder={`멤버 검색`}
-                    setIsFocused={setIsFocused}
-                    setUserId={setUserId}
-                    onUserSelect={handleUserSelect}
-                  />
-                  {comment ? (
-                    <StyledIconXCircle
-                      onClick={() => {
-                        setComment('');
-                      }}
-                    />
-                  ) : (
-                    <StyledIconSearch />
-                  )}
-                </InputBox>
-              </CommentInput>
+              <>
+                {isMobile ? (
+                  <Backdrop onClick={handleBackdropClick}>
+                    <CommentInput onClick={e => e.stopPropagation()}>
+                      <InputBox isActive={comment !== ''}>
+                        <SearchMention
+                          mentionUserList={mentionUserList}
+                          inputRef={inputRef}
+                          value={comment}
+                          setValue={setComment}
+                          placeholder={`멤버 검색`}
+                          setIsFocused={setIsFocused}
+                          setUserId={setUserId}
+                          onUserSelect={handleUserSelect}
+                        />
+                        {comment ? (
+                          <StyledIconXCircle
+                            onClick={() => {
+                              setComment('');
+                            }}
+                          />
+                        ) : (
+                          <StyledIconSearch />
+                        )}
+                      </InputBox>
+                    </CommentInput>
+                  </Backdrop>
+                ) : (
+                  <CommentInput onClick={e => e.stopPropagation()}>
+                    <InputBox isActive={comment !== ''}>
+                      <SearchMention
+                        mentionUserList={mentionUserList}
+                        inputRef={inputRef}
+                        value={comment}
+                        setValue={setComment}
+                        placeholder={`멤버 검색`}
+                        setIsFocused={setIsFocused}
+                        setUserId={setUserId}
+                        onUserSelect={handleUserSelect}
+                      />
+                      {comment ? (
+                        <StyledIconXCircle
+                          onClick={() => {
+                            setComment('');
+                          }}
+                        />
+                      ) : (
+                        <StyledIconSearch />
+                      )}
+                    </InputBox>
+                  </CommentInput>
+                )}
+              </>
             )}
           </AddLeader>
         )}
@@ -132,6 +169,18 @@ const Container = styled('div', {
   //디자인적인 건 x (에러메세지도 담아두기 위한 Container)
 });
 
+const Backdrop = styled('div', {
+  position: 'fixed',
+  width: '100vw',
+  height: '100vh',
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0,
+  backgroundColor: 'rgba(0, 0, 0, 0.7)',
+  zIndex: 10,
+});
+
 const LeadersContainer = styled('div', {
   display: 'flex',
   alignItems: 'center',
@@ -222,6 +271,27 @@ const CommentInput = styled('div', {
   background: '$gray900',
   width: '170px',
   height: '64px',
+
+  '@mobile': {
+    position: 'fixed',
+    //부모 요소 : transform, perspective, 또는 position: fixed 등의 속성
+    //자식 요소의 fixed 위치가 의도대로 표시되지 않음 -> 따라서 top 속성을 unset으로 제거해줘야 함
+    top: 'unset',
+    bottom: '0',
+    left: '0',
+    right: '0',
+
+    width: '100%', // 좌우 16px 간격
+    height: '66px', //18 + 48
+    paddingTop: '10px',
+    paddingBottom: '8px',
+    bg: 'rgba(0, 0, 0, 0.7)',
+    border: 'none',
+    br: '0',
+
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
 });
 
 const InputBox = styled('div', {
@@ -243,6 +313,10 @@ const InputBox = styled('div', {
       },
     },
   },
+  '@mobile': {
+    width: '328px',
+    height: '48px',
+  },
 });
 
 const AddButton = styled('button', {
diff --git a/src/components/form/SearchMention/index.tsx b/src/components/form/SearchMention/index.tsx
index 295176a8..139b8986 100644
--- a/src/components/form/SearchMention/index.tsx
+++ b/src/components/form/SearchMention/index.tsx
@@ -260,6 +260,11 @@ const fadeIn = keyframes({
   '100%': { opacity: 1, transform: 'translateY(10px)' },
 });
 
+const fadeInUp = keyframes({
+  '0%': { opacity: 0, transform: 'translateY(0px)' }, // 위로 올라가는 애니메이션
+  '100%': { opacity: 1, transform: 'translateY(-10px)' },
+});
+
 const SCustomSuggestionsContainer = styled('div', {
   borderRadius: '13px',
   boxSizing: 'border-box',
@@ -291,7 +296,7 @@ const SCustomSuggestionsContainer = styled('div', {
   },
 
   '@tablet': {
-    position: 'fixed',
+    position: 'absolute',
     left: '0',
     bottom: '120px',
     width: '100%',
@@ -300,6 +305,20 @@ const SCustomSuggestionsContainer = styled('div', {
     border: 'none',
     borderRadius: '20px',
   },
+
+  //@mobile alias 사용 불가 (react-mention 에서 렌더링하기 때문)
+  '@media (max-width: 414px)': {
+    position: 'fixed',
+    top: 'unset', //부모 요소 - transform, perspective, fixed 일 경우 필요
+    bottom: '66px', //8 + 48 + 10
+    left: '0',
+    right: '0',
+    width: '328px',
+    maxHeight: '210px',
+    margin: '0 auto',
+
+    animation: `${fadeInUp} 0.5s forwards`,
+  },
 });
 
 const SRenderSuggestion = styled('button', {

From f0a3a96938f181f85b1c4dd6d6476ca74abd9492 Mon Sep 17 00:00:00 2001
From: ocahs9 <piorag99@gmail.com>
Date: Wed, 30 Oct 2024 00:37:01 +0900
Subject: [PATCH 11/25] =?UTF-8?q?design:=20=EB=AA=A8=EC=9E=84=EC=9E=A5=20?=
 =?UTF-8?q?=ED=94=84=EB=A1=9C=ED=95=84=20=EB=94=94=EC=9E=90=EC=9D=B8=20?=
 =?UTF-8?q?=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../meetingDetail/MeetingController/index.tsx | 45 ++++++++++++++-----
 1 file changed, 34 insertions(+), 11 deletions(-)

diff --git a/src/components/page/meetingDetail/MeetingController/index.tsx b/src/components/page/meetingDetail/MeetingController/index.tsx
index c6e6e63f..622bdeaa 100644
--- a/src/components/page/meetingDetail/MeetingController/index.tsx
+++ b/src/components/page/meetingDetail/MeetingController/index.tsx
@@ -24,6 +24,7 @@ import { ampli } from '@/ampli';
 import ButtonLoader from '@components/loader/ButtonLoader';
 import { useDialog } from '@sopt-makers/ui';
 import { ReactNode } from 'react';
+import { fontsObject } from '@sopt-makers/fonts';
 
 interface DetailHeaderProps {
   detailData: GetMeetingResponse;
@@ -248,7 +249,7 @@ const MeetingController = ({
             >
               {hostProfileImage ? <img src={getResizedImage(hostProfileImage, 120)} /> : <ProfileDefaultIcon />}
               <span>{hostName}</span>
-              <ArrowSmallRightIcon />
+              {/* <ArrowSmallRightIcon />*/}
             </SProfileAnchor>
             {isMentorNeeded && <MentorTooltip />}
           </SHostWrapper>
@@ -408,42 +409,64 @@ const SProfileAnchor = styled('a', {
   flexType: 'verticalCenter',
   color: '$gray10',
   width: 'fit-content',
+  bg: '$gray900',
+  br: '10px',
+
+  display: 'flex',
+  padding: '12px 16px',
+  justifyContent: 'center',
+  alignItems: 'center',
+  gap: '14px',
+  '@mobile': {
+    padding: '5px 8px',
+    gap: '6px',
+    br: '6.25px',
+  },
 
   img: {
-    width: '$60',
-    height: '$60',
+    width: '$48',
+    height: '$48',
     borderRadius: '50%',
     objectFit: 'cover',
-    mr: '$16',
+
     background: '$gray700',
     '@tablet': {
       width: '$32',
       height: '$32',
-      mr: '$8',
+    },
+    '@mobile': {
+      width: '$20',
+      height: '$20',
     },
   },
 
   '& > svg:first-child': {
-    width: '$60',
-    height: '$60',
-    mr: '$16',
+    width: '$48',
+    height: '$48',
 
     '@tablet': {
       width: '$32',
       height: '$32',
-      mr: '$8',
+    },
+    '@mobile': {
+      width: '$20',
+      height: '$20',
     },
   },
 
   '& > span': {
-    mr: '$16',
+    ...fontsObject.TITLE_3_24_SB,
+    fontWeight: 500,
 
     '@tablet': {
       fontStyle: 'T5',
-      mr: '$2',
+    },
+    '@mobile': {
+      ...fontsObject.LABEL_5_11_SB,
     },
   },
 
+  // '>' 아이콘이 사라지면서 지금은 사용 안함.
   '& > svg:last-child > path': {
     stroke: `$gray200`,
   },

From 2a64b6573ce4d248eb61d3051172572ee93803b4 Mon Sep 17 00:00:00 2001
From: ocahs9 <piorag99@gmail.com>
Date: Wed, 30 Oct 2024 00:40:12 +0900
Subject: [PATCH 12/25] =?UTF-8?q?design:=20=EB=B6=88=ED=95=84=EC=9A=94?=
 =?UTF-8?q?=ED=95=9C=20margin=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/form/Presentation/CoLeader/index.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/components/form/Presentation/CoLeader/index.tsx b/src/components/form/Presentation/CoLeader/index.tsx
index e790ccb7..47c93044 100644
--- a/src/components/form/Presentation/CoLeader/index.tsx
+++ b/src/components/form/Presentation/CoLeader/index.tsx
@@ -363,12 +363,10 @@ const SProfile = styled('a', {
     height: '$32',
     borderRadius: '50%',
     objectFit: 'cover',
-    mr: '$16',
     background: '$gray700',
     '@tablet': {
       width: '$32',
       height: '$32',
-      mr: '$8',
     },
     '@mobile': {
       width: '$20',

From 10dae429617f16b08d991e1d4a88ee9208777586 Mon Sep 17 00:00:00 2001
From: ocahs9 <piorag99@gmail.com>
Date: Wed, 30 Oct 2024 00:51:15 +0900
Subject: [PATCH 13/25] =?UTF-8?q?chore:=20=EC=9D=B4=ED=95=B4=EB=A5=BC=20?=
 =?UTF-8?q?=EB=8F=95=EB=8A=94=20=EC=A3=BC=EC=84=9D=20=EC=B2=A8=EA=B0=80,?=
 =?UTF-8?q?=20=EB=B6=88=ED=95=84=EC=9A=94=ED=95=9C=20=EC=BD=98=EC=86=94=20?=
 =?UTF-8?q?=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../form/Presentation/CoLeader/index.tsx      |  1 -
 .../SearchMention/SearchMentionContext.tsx    |  5 ++++
 src/components/form/SearchMention/index.tsx   | 27 +++++++++----------
 src/components/form/TableOfContents/index.tsx |  4 +--
 4 files changed, 19 insertions(+), 18 deletions(-)

diff --git a/src/components/form/Presentation/CoLeader/index.tsx b/src/components/form/Presentation/CoLeader/index.tsx
index 47c93044..31c36cba 100644
--- a/src/components/form/Presentation/CoLeader/index.tsx
+++ b/src/components/form/Presentation/CoLeader/index.tsx
@@ -26,7 +26,6 @@ interface mentionableDataType {
 }
 
 const CoLeader = ({ value: coLeaders = [], onChange, error }: CoLeaderFieldProps) => {
-  console.log('coLeaders:', coLeaders);
   const { data: mentionUserList } = useQueryGetMentionUsers();
 
   const handleUserSelect = (user: mentionableDataType) => {
diff --git a/src/components/form/SearchMention/SearchMentionContext.tsx b/src/components/form/SearchMention/SearchMentionContext.tsx
index 64e10eef..b4ffd05b 100644
--- a/src/components/form/SearchMention/SearchMentionContext.tsx
+++ b/src/components/form/SearchMention/SearchMentionContext.tsx
@@ -14,6 +14,11 @@ interface SearchMentionContextProps {
   setUser: Dispatch<SetStateAction<User>>;
 }
 
+/*
+  참고) SearchMentionContext는 공동모임장을 위한 context입니다. 
+  혹시 나중에 사용할 일이 생길 수도 있을까봐 간단하게 구조만 작성해두었습니다.
+*/
+
 const SearchMentionContext = createContext<SearchMentionContextProps>({
   user: { userName: '', userId: 0 },
   setUser: () => {},
diff --git a/src/components/form/SearchMention/index.tsx b/src/components/form/SearchMention/index.tsx
index 139b8986..41881454 100644
--- a/src/components/form/SearchMention/index.tsx
+++ b/src/components/form/SearchMention/index.tsx
@@ -1,5 +1,3 @@
-import { useQueryGetMentionUsers } from '@api/user/hooks';
-import { parseMentionedUserIds } from '@components/util/parseMentionedUserIds';
 import { colors } from '@sopt-makers/colors';
 import { fontsObject } from '@sopt-makers/fonts';
 import { keyframes, styled } from '@stitches/react';
@@ -41,18 +39,16 @@ const SearchMention = ({
   onClick,
   onUserSelect,
 }: SearchMentionProps) => {
-  useEffect(() => {
-    console.log(value);
-  }, [value]);
-  //전역 상태(이걸로 user에게 필요한 정보 잘 모아서, api 요청 보내야할 듯) -> 근데 지금은 딱히 사용하고 있지 않음
+  //전역 상태 - 혹시 필요하면 context 적절히 조작하여 사용
   const { user, setUser } = useContext(SearchMentionContext);
-  const [selectedSuggestionIndex, setSelectedSuggestionIndex] = useState(-1); // -1은 선택된 것이 없음을 나타냄
+  const [selectedSuggestionIndex, setSelectedSuggestionIndex] = useState(-1);
 
   const handleUserClick = (user: mentionableDataType) => {
     onUserSelect(user);
     setValue('');
   };
 
+  //엔터만 눌러도 추가가 되도록 함수 구현 -> 지금은 사용하고 있지 않음.
   const handleKeyDown = (e: React.KeyboardEvent) => {
     if (e.key === 'Enter') {
       const suggestions = getFilteredAndRandomUsers(
@@ -61,9 +57,9 @@ const SearchMention = ({
       );
 
       if (suggestions.length > 0) {
-        // If there are suggestions, select the first one
+        // select the first suggestion
         handleUserClick(suggestions[0]);
-        e.preventDefault(); // Prevent default behavior of Enter key (like submitting a form)
+        e.preventDefault();
       }
     }
   };
@@ -96,7 +92,7 @@ const SearchMention = ({
     return <SCustomSuggestionsContainer>{children}</SCustomSuggestionsContainer>;
   };
 
-  //이게 인물 하나 하나의 모습
+  //인물 하나 하나의 모습
   const renderSuggestion = useCallback((suggestion: SuggestionDataItem) => {
     return (
       <>
@@ -104,8 +100,8 @@ const SearchMention = ({
           key={suggestion.id}
           onClick={() => handleUserClick(suggestion as mentionableDataType)}
           onKeyDown={(e: React.KeyboardEvent) => {
-            //엔터 누르면 간편히 설정되도록 하고 싶은데, 위에 li(aria-selected 속성 사용)를 사용해야할 것 같아서..
-            //아직은 구현 못함
+            //엔터 누르면 간편히 설정되도록 하고 싶은데,
+            //위에 react-mention의 li(aria-selected 속성 사용)를 조작해야할 것 같아서.. 아직은 구현 못함
             if (e.key === 'Enter') {
               handleUserClick(suggestion as mentionableDataType);
             }
@@ -142,7 +138,7 @@ const SearchMention = ({
       inputRef={inputRef}
       value={value}
       onChange={(e, newValue) => {
-        setUserId(user.userId); //아마 api 요청 보낼 때 전역상태인 user.userId를 잘 활용해야 할 거임! -> 아닌가..?
+        setUserId(user.userId); //필요한 경우가 있을까봐 설정해둠
         if (!inputRef.current) {
           setValue(newValue);
           return;
@@ -162,7 +158,7 @@ const SearchMention = ({
       onClick={onClick}
       onKeyDown={(e: React.KeyboardEvent) => {
         if (e.key === 'Enter') {
-          // 엔터 키를 눌렀을 때 기본 동작 방지
+          // 엔터 키를 눌렀을 때 기본 동작(개행) 방지
           e.preventDefault();
         }
       }}
@@ -260,8 +256,9 @@ const fadeIn = keyframes({
   '100%': { opacity: 1, transform: 'translateY(10px)' },
 });
 
+// 위로 올라가는 애니메이션
 const fadeInUp = keyframes({
-  '0%': { opacity: 0, transform: 'translateY(0px)' }, // 위로 올라가는 애니메이션
+  '0%': { opacity: 0, transform: 'translateY(0px)' },
   '100%': { opacity: 1, transform: 'translateY(-10px)' },
 });
 
diff --git a/src/components/form/TableOfContents/index.tsx b/src/components/form/TableOfContents/index.tsx
index 69d8ba50..2e27bb1d 100644
--- a/src/components/form/TableOfContents/index.tsx
+++ b/src/components/form/TableOfContents/index.tsx
@@ -18,9 +18,9 @@ function TableOfContents({ label }: TableOfContentsProps) {
   const isCategoryValid = form.category?.value && !errors.category;
   // console.log('카테고리', '' + form.category?.value, isCategoryValid);
   const isImageValid = form.files && form.files.length > 0;
-  console.log('이미지', isImageValid);
+  //console.log('이미지', isImageValid);
   const isDescriptionValid = form.detail && form.detail.desc && !errors.detail;
-  console.log('모임소개', isImageValid);
+  //console.log('모임소개', isImageValid);
   const isApplicationDateValid = form.startDate && form.endDate && !errors.startDate && !errors.endDate;
   const isTargetValid =
     form.detail &&

From a62a4cea4ef7a24e5e43db12e0b2f15d596c3c52 Mon Sep 17 00:00:00 2001
From: Hyeonsu Kim <kimhyunsu11@naver.com>
Date: Wed, 30 Oct 2024 21:12:06 +0900
Subject: [PATCH 14/25] =?UTF-8?q?update:=20API=20=EB=B2=84=EC=A0=84=20?=
 =?UTF-8?q?=EC=B5=9C=EC=8B=A0=ED=99=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/__generated__/schema2.d.ts | 153 ++++++++++++++++++++++-----------
 1 file changed, 103 insertions(+), 50 deletions(-)

diff --git a/src/__generated__/schema2.d.ts b/src/__generated__/schema2.d.ts
index 6ccd5e4d..25b43d0f 100644
--- a/src/__generated__/schema2.d.ts
+++ b/src/__generated__/schema2.d.ts
@@ -102,26 +102,25 @@ export interface paths {
     /** 로그인/회원가입 */
     post: operations["loginUser"];
   };
+  "/user/v2": {
+    /** 전체 사용자 조회 */
+    get: operations["getAllUser"];
+  };
   "/user/v2/profile/me": {
     /** 유저 본인 프로필 조회 */
     get: operations["getUserOwnProfile"];
   };
-  "/user/v2/profile/me/temp": {
-    /** [TEMP] 유저 본인 프로필 조회 */
-    get: operations["getUserOwnProfileTemp"];
-  };
   "/user/v2/mention": {
-    /** 멘션 사용자 조회 */
+    /**
+     * 멘션 사용자 조회
+     * @deprecated
+     */
     get: operations["getAllMentionUser"];
   };
   "/user/v2/meeting": {
     /** 내가 만든 모임 조회 */
     get: operations["getCreatedMeetingByUser"];
   };
-  "/user/v2/meeting/temp": {
-    /** [TEMP] 내가 만든 모임 조회 */
-    get: operations["getCreatedMeetingByUserTemp"];
-  };
   "/user/v2/meeting/all": {
     /** 내가 속한 모임 조회 */
     get: operations["getAllMeetingByUser"];
@@ -130,10 +129,6 @@ export interface paths {
     /** 내가 신청한 모임 조회 */
     get: operations["getAppliedMeetingByUser"];
   };
-  "/user/v2/apply/temp": {
-    /** [TEMP] 내가 신청한 모임 조회 */
-    get: operations["getAppliedMeetingByUserTemp"];
-  };
   "/post/v2/count": {
     /** 모임 게시글 개수 조회 */
     get: operations["getPostCount"];
@@ -320,6 +315,11 @@ export interface components {
        * ]
        */
       joinableParts: ("PM" | "DESIGN" | "IOS" | "ANDROID" | "SERVER" | "WEB")[];
+      /**
+       * @description 공동 모임장 userId (크루에서 사용하는 userId)
+       * @example [251, 942]
+       */
+      coLeaderUserIds?: number[];
     };
     /** @description 모임 지원자 상태 변경 request body dto */
     ApplyV2UpdateStatusBodyDto: {
@@ -570,6 +570,42 @@ export interface components {
        */
       accessToken: string;
     };
+    /** @description 전체 사용자 조회 응답 Dto */
+    UserV2GetAllUserDto: {
+      /**
+       * Format: int32
+       * @description 크루에서 사용하는 userId
+       * @example 103
+       */
+      userId: number;
+      /**
+       * Format: int32
+       * @description 메이커스 프로덕트에서 범용적으로 사용하는 userId
+       * @example 403
+       */
+      orgId: number;
+      /**
+       * @description 유저 이름
+       * @example 홍길동
+       */
+      userName: string;
+      /**
+       * @description 최근 파트
+       * @example 서버
+       */
+      recentPart: string;
+      /**
+       * Format: int32
+       * @description 최근 기수
+       * @example 33
+       */
+      recentGeneration: number;
+      /**
+       * @description 유저 프로필 사진
+       * @example [url] 형식
+       */
+      profileImageUrl?: string;
+    };
     /** @description 유저 본인 프로필 조회 응답 Dto */
     UserV2GetUserOwnProfileResponseDto: {
       /**
@@ -600,10 +636,6 @@ export interface components {
        */
       hasActivities: boolean;
     };
-    /** @description 임시 응답 Dto */
-    TempResponseDto: {
-      data: components["schemas"]["UserV2GetUserOwnProfileResponseDto"];
-    };
     /** @description 멘션 유저 조회 응답 Dto */
     UserV2GetAllMentionUserDto: {
       /**
@@ -719,6 +751,11 @@ export interface components {
        * @enum {integer}
        */
       status: 0 | 1 | 2;
+      /**
+       * @description 공동 모임장 여부
+       * @example false
+       */
+      isCoLeader: boolean;
       /**
        * @description 모임 사진
        * @example [url] 형식
@@ -1177,10 +1214,15 @@ export interface components {
       user: components["schemas"]["MeetingCreatorDto"];
       /**
        * Format: int32
-       * @description 신청 승인 수
-       * @example 7
+       * @description TODO: FE에서 수정 완료 후 삭제
        */
       appliedCount: number;
+      /**
+       * Format: int32
+       * @description 승인된 신청자 수
+       * @example 3
+       */
+      approvedCount: number;
     };
     /** @description 모임 조회 응답 Dto */
     MeetingV2GetAllMeetingDto: {
@@ -1272,6 +1314,31 @@ export interface components {
       status: number;
       user: components["schemas"]["ApplicantByMeetingDto"];
     };
+    /** @description 공동 모임장 조회 dto */
+    MeetingV2CoLeaderResponseDto: {
+      /**
+       * Format: int32
+       * @description 공동 모임장 id, 크루에서 사용하는 userId
+       * @example 203
+       */
+      userId: number;
+      /**
+       * Format: int32
+       * @description 공동 모임장 org id, 메이커스 프로덕트에서 범용적으로 사용하는 userId
+       * @example 789
+       */
+      orgId: number;
+      /**
+       * @description 공동 모임장 이름
+       * @example 공동 모임장 이름
+       */
+      userName: string;
+      /**
+       * @description 공동 모임장 프로필 이미지 url
+       * @example [url 형식]
+       */
+      userprofileImage: string;
+    };
     /** @description 모임 상세 조회 dto */
     MeetingV2GetMeetingByIdResponseDto: {
       /**
@@ -1381,6 +1448,13 @@ export interface components {
        * ]
        */
       joinableParts: ("PM" | "DESIGN" | "IOS" | "ANDROID" | "SERVER" | "WEB")[];
+      /** @description 공동 모임장 목록 */
+      coMeetingLeaders?: components["schemas"]["MeetingV2CoLeaderResponseDto"][];
+      /**
+       * @description 공동 모임장 여부
+       * @example false
+       */
+      isCoLeader: boolean;
       /**
        * Format: int32
        * @description 모임 상태, 0: 모집전, 1: 모집중, 2: 모집종료
@@ -2373,33 +2447,34 @@ export interface operations {
       500: never;
     };
   };
-  /** 유저 본인 프로필 조회 */
-  getUserOwnProfile: {
+  /** 전체 사용자 조회 */
+  getAllUser: {
     responses: {
       /** @description 성공 */
       200: {
         content: {
-          "application/json;charset=UTF-8": components["schemas"]["UserV2GetUserOwnProfileResponseDto"];
+          "application/json;charset=UTF-8": components["schemas"]["UserV2GetAllUserDto"][];
         };
       };
-      /** @description 해당 유저가 없는 경우 */
-      400: never;
     };
   };
-  /** [TEMP] 유저 본인 프로필 조회 */
-  getUserOwnProfileTemp: {
+  /** 유저 본인 프로필 조회 */
+  getUserOwnProfile: {
     responses: {
       /** @description 성공 */
       200: {
         content: {
-          "application/json;charset=UTF-8": components["schemas"]["TempResponseDto"];
+          "application/json;charset=UTF-8": components["schemas"]["UserV2GetUserOwnProfileResponseDto"];
         };
       };
       /** @description 해당 유저가 없는 경우 */
       400: never;
     };
   };
-  /** 멘션 사용자 조회 */
+  /**
+   * 멘션 사용자 조회
+   * @deprecated
+   */
   getAllMentionUser: {
     responses: {
       /** @description 성공 */
@@ -2421,17 +2496,6 @@ export interface operations {
       };
     };
   };
-  /** [TEMP] 내가 만든 모임 조회 */
-  getCreatedMeetingByUserTemp: {
-    responses: {
-      /** @description 성공 */
-      200: {
-        content: {
-          "application/json;charset=UTF-8": components["schemas"]["TempResponseDto"];
-        };
-      };
-    };
-  };
   /** 내가 속한 모임 조회 */
   getAllMeetingByUser: {
     responses: {
@@ -2456,17 +2520,6 @@ export interface operations {
       };
     };
   };
-  /** [TEMP] 내가 신청한 모임 조회 */
-  getAppliedMeetingByUserTemp: {
-    responses: {
-      /** @description 성공 */
-      200: {
-        content: {
-          "application/json;charset=UTF-8": components["schemas"]["TempResponseDto"];
-        };
-      };
-    };
-  };
   /** 모임 게시글 개수 조회 */
   getPostCount: {
     parameters: {

From c381332f01d72853b412ecdb2ede913efd32507a Mon Sep 17 00:00:00 2001
From: Hyeonsu Kim <kimhyunsu11@naver.com>
Date: Wed, 30 Oct 2024 21:13:35 +0900
Subject: [PATCH 15/25] =?UTF-8?q?fix:=20=EC=9B=B9=EB=B7=B0-=ED=94=BC?=
 =?UTF-8?q?=EB=93=9C=20=EC=9E=91=EC=84=B1=20=EB=AA=A8=EB=8B=AC=20=EB=AC=B4?=
 =?UTF-8?q?=ED=95=9C=20=EB=A0=8C=EB=8D=94=EB=A7=81=20=EC=9D=B4=EC=8A=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/feed/Modal/FeedFormPresentation.tsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/components/feed/Modal/FeedFormPresentation.tsx b/src/components/feed/Modal/FeedFormPresentation.tsx
index 187dcaa9..e7eca656 100644
--- a/src/components/feed/Modal/FeedFormPresentation.tsx
+++ b/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);

From 7ae607ecb0d33f9eee1e219c4fdf9e52e0a4fe6d Mon Sep 17 00:00:00 2001
From: Hyeonsu Kim <kimhyunsu11@naver.com>
Date: Wed, 30 Oct 2024 21:22:47 +0900
Subject: [PATCH 16/25] =?UTF-8?q?update:=20=EB=A9=98=EC=85=98=20=EC=9C=A0?=
 =?UTF-8?q?=EC=A0=80=20=EB=A6=AC=EC=8A=A4=ED=8A=B8=20=EC=A1=B0=ED=9A=8C=20?=
 =?UTF-8?q?API=20=EC=B5=9C=EC=8B=A0=ED=99=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/user/index.ts                 | 3 ++-
 src/components/feed/Mention/index.tsx | 1 +
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/api/user/index.ts b/src/api/user/index.ts
index 584b3319..b4ae6c21 100644
--- a/src/api/user/index.ts
+++ b/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;
 };
diff --git a/src/components/feed/Mention/index.tsx b/src/components/feed/Mention/index.tsx
index 23de227e..a6862d25 100644
--- a/src/components/feed/Mention/index.tsx
+++ b/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;

From f1fc14051c2a497316d3d5e74c2e78babeea4482 Mon Sep 17 00:00:00 2001
From: Hyeonsu Kim <kimhyunsu11@naver.com>
Date: Wed, 30 Oct 2024 21:26:29 +0900
Subject: [PATCH 17/25] =?UTF-8?q?feat:=20isCoLeader=20=EB=B3=80=EC=88=98?=
 =?UTF-8?q?=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../RecruitmentStatusModalContent/index.tsx   |  8 +++---
 .../meetingDetail/MeetingController/index.tsx |  2 ++
 src/components/page/meetingList/Grid/List.tsx | 26 ++++++++++++++++++-
 3 files changed, 32 insertions(+), 4 deletions(-)

diff --git a/src/components/page/meetingDetail/MeetingController/Modal/Content/RecruitmentStatusModalContent/index.tsx b/src/components/page/meetingDetail/MeetingController/Modal/Content/RecruitmentStatusModalContent/index.tsx
index 40f60726..4adce93c 100644
--- a/src/components/page/meetingDetail/MeetingController/Modal/Content/RecruitmentStatusModalContent/index.tsx
+++ b/src/components/page/meetingDetail/MeetingController/Modal/Content/RecruitmentStatusModalContent/index.tsx
@@ -9,6 +9,7 @@ interface RecruitmentStatusModalContentProps {
   meetingId: number;
   appliedInfo: paths['/meeting/v2/{meetingId}']['get']['responses']['200']['content']['application/json;charset=UTF-8']['appliedInfo'];
   isHost: boolean;
+  isCoLeader: boolean;
   isApplied: boolean;
 }
 
@@ -16,10 +17,11 @@ const RecruitmentStatusModalContent = ({
   meetingId,
   appliedInfo,
   isHost,
+  isCoLeader,
   isApplied,
 }: RecruitmentStatusModalContentProps) => {
   const total = appliedInfo.length;
-  const isBottomVisible = total > 0 || isHost || isApplied;
+  const isBottomVisible = total > 0 || isHost || isApplied || isCoLeader;
 
   return (
     <>
@@ -33,10 +35,10 @@ const RecruitmentStatusModalContent = ({
       {isBottomVisible && (
         <SRecruitmentStatusModalBottom>
           {total > 0 && <STotal>총 {total}명 신청</STotal>}
-          {(isHost || isApplied) && (
+          {(isHost || isApplied || isCoLeader) && (
             <Link href={`/mine/management?id=${meetingId}`} passHref legacyBehavior>
               <SManagementAnchor onClick={() => ampli.clickMemberManagement()}>
-                {isHost ? '신청자 관리' : isApplied && '참여자 리스트'}
+                {isHost ? '신청자 관리' : (isCoLeader || isApplied) && '참여자 리스트'}
                 <ArrowSmallRightIcon />
               </SManagementAnchor>
             </Link>
diff --git a/src/components/page/meetingDetail/MeetingController/index.tsx b/src/components/page/meetingDetail/MeetingController/index.tsx
index c6e6e63f..33003bd7 100644
--- a/src/components/page/meetingDetail/MeetingController/index.tsx
+++ b/src/components/page/meetingDetail/MeetingController/index.tsx
@@ -80,6 +80,7 @@ const MeetingController = ({
     approved,
     approvedApplyCount,
     capacity,
+    isCoLeader,
     host: isHost,
     apply: isApplied,
     isMentorNeeded,
@@ -308,6 +309,7 @@ const MeetingController = ({
             meetingId={Number(meetingId)}
             appliedInfo={appliedInfo}
             isHost={isHost}
+            isCoLeader={isCoLeader}
             isApplied={isApplied}
           />
         )}
diff --git a/src/components/page/meetingList/Grid/List.tsx b/src/components/page/meetingList/Grid/List.tsx
index a1bad002..f3b1c2aa 100644
--- a/src/components/page/meetingList/Grid/List.tsx
+++ b/src/components/page/meetingList/Grid/List.tsx
@@ -93,6 +93,7 @@ const PaginationWrapper = styled('div', {
 
 export function MeetingListOfMine() {
   const { data: mineData, isLoading } = useQueryMeetingListOfMine();
+  console.log(mineData);
   useScrollRestorationAfterLoading(isLoading);
   return (
     <main style={{ marginBottom: '20%' }}>
@@ -104,7 +105,13 @@ export function MeetingListOfMine() {
               key={meetingData.id}
               meetingData={meetingData}
               mobileType="card"
-              bottom={<ManagementButton id={meetingData.id} />}
+              bottom={
+                meetingData?.isCoLeader ? (
+                  <SBlankManageMentButton></SBlankManageMentButton>
+                ) : (
+                  <ManagementButton id={meetingData.id} />
+                )
+              }
             />
           ))}
         </GridLayout>
@@ -146,3 +153,20 @@ const SMeetingCount = styled('p', {
     fontAg: '12_semibold_100',
   },
 });
+
+const SBlankManageMentButton = styled('div', {
+  width: '128px',
+  padding: '12px 12px 13px 14px',
+  borderRadius: '71px',
+  fontAg: '16_bold_100',
+  whiteSpace: 'nowrap',
+  //background: '$gray800',
+  '@tablet': {
+    width: '91px',
+    //todo: 참여자 리스트 버튼으로 바꾸기
+    height: '30px',
+    marginTop: '16px',
+    fontStyle: 'T6',
+    padding: '6px 6px 6px 12px',
+  },
+});

From 8533976735db59f19b70221a07db80b4cee3b65b Mon Sep 17 00:00:00 2001
From: Hyeonsu Kim <kimhyunsu11@naver.com>
Date: Thu, 31 Oct 2024 09:23:54 +0900
Subject: [PATCH 18/25] =?UTF-8?q?update:=20API=20=EC=B5=9C=EC=8B=A0?=
 =?UTF-8?q?=ED=99=94=20(approvedCount)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/__generated__/schema2.d.ts | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/__generated__/schema2.d.ts b/src/__generated__/schema2.d.ts
index 25b43d0f..a17ebabf 100644
--- a/src/__generated__/schema2.d.ts
+++ b/src/__generated__/schema2.d.ts
@@ -785,10 +785,16 @@ export interface components {
       user: components["schemas"]["MeetingCreatorDto"];
       /**
        * Format: int32
-       * @description 신청 수
+       * @description [DEPRECATED] TODO: FE에서 수정 완료 후 삭제
        * @example 7
        */
       appliedCount: number;
+      /**
+       * Format: int32
+       * @description 신청자 수
+       * @example 7
+       */
+      approvedCount: number;
     };
     /** @description 활동 기수 */
     UserActivityVO: {

From 6104476e379c4e4da1c543c85a46c937d68d92a0 Mon Sep 17 00:00:00 2001
From: Hyeonsu Kim <kimhyunsu11@naver.com>
Date: Thu, 31 Oct 2024 09:24:44 +0900
Subject: [PATCH 19/25] =?UTF-8?q?feat:=20=EB=A9=98=EC=85=98=20=ED=83=80?=
 =?UTF-8?q?=EC=9E=85=EC=97=90=20userId=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/form/Presentation/CoLeader/index.tsx | 1 +
 src/components/form/SearchMention/index.tsx         | 1 +
 2 files changed, 2 insertions(+)

diff --git a/src/components/form/Presentation/CoLeader/index.tsx b/src/components/form/Presentation/CoLeader/index.tsx
index 31c36cba..e15acbc1 100644
--- a/src/components/form/Presentation/CoLeader/index.tsx
+++ b/src/components/form/Presentation/CoLeader/index.tsx
@@ -19,6 +19,7 @@ interface mentionableDataType {
   id: number;
   display: string;
   orgId: number;
+  userId: number;
   userName: string;
   recentPart: string;
   recentGeneration: number;
diff --git a/src/components/form/SearchMention/index.tsx b/src/components/form/SearchMention/index.tsx
index 41881454..af7c186b 100644
--- a/src/components/form/SearchMention/index.tsx
+++ b/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;

From f6246b5ffdd09ba331ac5fd4a2930234f1ac9239 Mon Sep 17 00:00:00 2001
From: Hyeonsu Kim <kimhyunsu11@naver.com>
Date: Thu, 31 Oct 2024 09:25:10 +0900
Subject: [PATCH 20/25] =?UTF-8?q?feat:=20isCoLeader=20=EC=84=A0=ED=83=9D?=
 =?UTF-8?q?=EC=A0=81=20=ED=83=80=EC=9E=85=20=EC=A0=95=EC=9D=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/page/meetingList/Card/DesktopSizeCard.tsx  | 7 +++++--
 src/components/page/meetingList/Card/MobileSize/index.tsx | 5 ++++-
 src/components/page/meetingList/Card/index.tsx            | 5 ++++-
 3 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/components/page/meetingList/Card/DesktopSizeCard.tsx b/src/components/page/meetingList/Card/DesktopSizeCard.tsx
index 9a83ca7e..374bce3a 100644
--- a/src/components/page/meetingList/Card/DesktopSizeCard.tsx
+++ b/src/components/page/meetingList/Card/DesktopSizeCard.tsx
@@ -8,7 +8,10 @@ import { getResizedImage } from '@utils/image';
 import { paths } from '@/__generated__/schema2';
 
 interface CardProps {
-  meetingData: paths['/user/v2/meeting']['get']['responses']['200']['content']['application/json;charset=UTF-8']['meetings'][number];
+  meetingData: Omit<
+    paths['/user/v2/meeting']['get']['responses']['200']['content']['application/json;charset=UTF-8']['meetings'][number],
+    'isCoLeader'
+  > & { isCoLeader?: boolean };
   isAllParts: boolean;
 }
 
@@ -61,7 +64,7 @@ function DesktopSizeCard({ meetingData, isAllParts }: CardProps) {
       <SInfoRow>
         <SKey>모집 현황</SKey>
         <SValue>
-          {meetingData.appliedCount}/{meetingData.capacity}명
+          {meetingData.approvedCount}/{meetingData.capacity}명
         </SValue>
       </SInfoRow>
     </div>
diff --git a/src/components/page/meetingList/Card/MobileSize/index.tsx b/src/components/page/meetingList/Card/MobileSize/index.tsx
index c4a28063..a6b1eb0c 100644
--- a/src/components/page/meetingList/Card/MobileSize/index.tsx
+++ b/src/components/page/meetingList/Card/MobileSize/index.tsx
@@ -3,7 +3,10 @@ import ListType from './ListType';
 import { paths } from '@/__generated__/schema2';
 
 export interface MobileSizeCardProps {
-  meetingData: paths['/user/v2/meeting']['get']['responses']['200']['content']['application/json;charset=UTF-8']['meetings'][number];
+  meetingData: Omit<
+    paths['/user/v2/meeting']['get']['responses']['200']['content']['application/json;charset=UTF-8']['meetings'][number],
+    'isCoLeader'
+  > & { isCoLeader?: boolean };
   isAllParts: boolean;
   mobileType: 'list' | 'card';
 }
diff --git a/src/components/page/meetingList/Card/index.tsx b/src/components/page/meetingList/Card/index.tsx
index f99def4e..f1a17012 100644
--- a/src/components/page/meetingList/Card/index.tsx
+++ b/src/components/page/meetingList/Card/index.tsx
@@ -10,7 +10,10 @@ import { paths } from '@/__generated__/schema2';
 
 interface CardProps {
   bottom?: ReactNode;
-  meetingData: paths['/user/v2/meeting']['get']['responses']['200']['content']['application/json;charset=UTF-8']['meetings'][number];
+  meetingData: Omit<
+    paths['/user/v2/meeting']['get']['responses']['200']['content']['application/json;charset=UTF-8']['meetings'][number],
+    'isCoLeader'
+  > & { isCoLeader?: boolean };
   mobileType: 'list' | 'card';
 }
 

From cb183e0fba8e20b1f6df3e65906eaf581f3c759a Mon Sep 17 00:00:00 2001
From: Hyeonsu Kim <kimhyunsu11@naver.com>
Date: Thu, 31 Oct 2024 09:25:37 +0900
Subject: [PATCH 21/25] =?UTF-8?q?feat:=20formData=EC=97=90=20coLeaderUserI?=
 =?UTF-8?q?ds=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/API_LEGACY/meeting/index.ts        | 1 +
 src/components/form/Presentation/index.tsx | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/api/API_LEGACY/meeting/index.ts b/src/api/API_LEGACY/meeting/index.ts
index 1f5aa8b6..bea250f1 100644
--- a/src/api/API_LEGACY/meeting/index.ts
+++ b/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;
 };
diff --git a/src/components/form/Presentation/index.tsx b/src/components/form/Presentation/index.tsx
index fb3dc7e9..726adcb8 100644
--- a/src/components/form/Presentation/index.tsx
+++ b/src/components/form/Presentation/index.tsx
@@ -555,7 +555,7 @@ function Presentation({
           </CancelButton>
         )}
         <SubmitButton
-          type="button"
+          type="submit"
           onClick={() => {
             open(dialogOption);
           }}

From 4363efee95ffa36f4ff3522cf38aa59730f65cdc Mon Sep 17 00:00:00 2001
From: borimong <kimhyunsu11@naver.com>
Date: Sun, 3 Nov 2024 16:38:29 +0900
Subject: [PATCH 22/25] =?UTF-8?q?feat:=20ProfileAnchor=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../MeetingController/ProfileAnchor.tsx       | 96 +++++++++++++++++++
 1 file changed, 96 insertions(+)
 create mode 100644 src/components/page/meetingDetail/MeetingController/ProfileAnchor.tsx

diff --git a/src/components/page/meetingDetail/MeetingController/ProfileAnchor.tsx b/src/components/page/meetingDetail/MeetingController/ProfileAnchor.tsx
new file mode 100644
index 00000000..78b973af
--- /dev/null
+++ b/src/components/page/meetingDetail/MeetingController/ProfileAnchor.tsx
@@ -0,0 +1,96 @@
+import { fontsObject } from '@sopt-makers/fonts';
+import { styled } from 'stitches.config';
+import { playgroundURL } from '@constants/url';
+import { playgroundLink } from '@sopt-makers/playground-common';
+import { ampli } from '@/ampli';
+import ProfileDefaultIcon from '@assets/svg/profile_default.svg?rect';
+
+interface ProfileAnchorProps {
+  profileData: {
+    orgId: number;
+    userprofileImage?: string;
+    userName: string;
+  };
+}
+
+const ProfileAnchor = ({ profileData }: ProfileAnchorProps) => {
+  return (
+    <SProfileAnchor
+      href={`${playgroundURL}${playgroundLink.memberDetail(profileData.orgId)}`}
+      onClick={() => ampli.clickOwnerProfile({ group_owner_id: Number(profileData.orgId) })}
+    >
+      {profileData.userprofileImage ? <img src={profileData.userprofileImage} /> : <ProfileDefaultIcon />}
+      <span>{profileData.userName}</span>
+      {/* <ArrowSmallRightIcon />*/}
+    </SProfileAnchor>
+  );
+};
+
+export default ProfileAnchor;
+
+const SProfileAnchor = styled('a', {
+  flexType: 'verticalCenter',
+  color: '$gray10',
+  width: 'fit-content',
+  bg: '$gray900',
+  br: '10px',
+
+  display: 'flex',
+  padding: '12px 16px',
+  justifyContent: 'center',
+  alignItems: 'center',
+  gap: '14px',
+  '@mobile': {
+    padding: '5px 8px',
+    gap: '6px',
+    br: '6.25px',
+  },
+
+  img: {
+    width: '$48',
+    height: '$48',
+    borderRadius: '50%',
+    objectFit: 'cover',
+
+    background: '$gray700',
+    '@tablet': {
+      width: '$32',
+      height: '$32',
+    },
+    '@mobile': {
+      width: '$20',
+      height: '$20',
+    },
+  },
+
+  '& > svg:first-child': {
+    width: '$48',
+    height: '$48',
+
+    '@tablet': {
+      width: '$32',
+      height: '$32',
+    },
+    '@mobile': {
+      width: '$20',
+      height: '$20',
+    },
+  },
+
+  '& > span': {
+    ...fontsObject.TITLE_3_24_SB,
+    fontWeight: 500,
+
+    '@tablet': {
+      fontStyle: 'T5',
+    },
+    '@mobile': {
+      ...fontsObject.LABEL_5_11_SB,
+    },
+  },
+
+  // '>' 아이콘이 사라지면서 지금은 사용 안함.
+  '& > svg:last-child > path': {
+    stroke: `$gray200`,
+  },
+});

From 096dd95382882286ec33a3389b6fe85b1835c60d Mon Sep 17 00:00:00 2001
From: borimong <kimhyunsu11@naver.com>
Date: Sun, 3 Nov 2024 16:40:09 +0900
Subject: [PATCH 23/25] =?UTF-8?q?feat:=20=EB=AA=A8=EC=9E=84=20=EC=83=81?=
 =?UTF-8?q?=EC=84=B8=20=ED=8E=98=EC=9D=B4=EC=A7=80=EC=97=90=20ProfileAncho?=
 =?UTF-8?q?r=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../meetingDetail/MeetingController/index.tsx | 89 +++----------------
 1 file changed, 10 insertions(+), 79 deletions(-)

diff --git a/src/components/page/meetingDetail/MeetingController/index.tsx b/src/components/page/meetingDetail/MeetingController/index.tsx
index bead939b..444dd95e 100644
--- a/src/components/page/meetingDetail/MeetingController/index.tsx
+++ b/src/components/page/meetingDetail/MeetingController/index.tsx
@@ -13,18 +13,15 @@ import GuestConfirmModal from './Modal/Confirm/GuestConfirmModal';
 import ApplicationModalContent from './Modal/Content/ApplicationModalContent';
 import RecruitmentStatusModalContent from './Modal/Content/RecruitmentStatusModalContent';
 import { PostApplicationRequest, GetMeetingResponse } from '@api/API_LEGACY/meeting';
-import { playgroundURL } from '@constants/url';
 import { ERecruitmentStatus, RECRUITMENT_STATUS } from '@constants/option';
-import ProfileDefaultIcon from '@assets/svg/profile_default.svg?rect';
 import ArrowSmallRightIcon from '@assets/svg/arrow_small_right.svg';
 import MentorTooltip from './MentorTooltip';
-import { getResizedImage } from '@utils/image';
 import { useQueryMyProfile } from '@api/API_LEGACY/user/hooks';
 import { ampli } from '@/ampli';
 import ButtonLoader from '@components/loader/ButtonLoader';
 import { useDialog } from '@sopt-makers/ui';
 import { ReactNode } from 'react';
-import { fontsObject } from '@sopt-makers/fonts';
+import ProfileAnchor from './ProfileAnchor';
 
 interface DetailHeaderProps {
   detailData: GetMeetingResponse;
@@ -82,6 +79,7 @@ const MeetingController = ({
     approvedApplyCount,
     capacity,
     isCoLeader,
+    coMeetingLeaders,
     host: isHost,
     apply: isApplied,
     isMentorNeeded,
@@ -244,16 +242,12 @@ const MeetingController = ({
             {title}
           </h1>
           <SHostWrapper>
-            <SProfileAnchor
-              href={`${playgroundURL}${playgroundLink.memberDetail(hostId)}`}
-              onClick={() => ampli.clickOwnerProfile({ group_owner_id: Number(hostId) })}
-            >
-              {hostProfileImage ? <img src={getResizedImage(hostProfileImage, 120)} /> : <ProfileDefaultIcon />}
-              <span>{hostName}</span>
-              {/* <ArrowSmallRightIcon />*/}
-            </SProfileAnchor>
-            {isMentorNeeded && <MentorTooltip />}
+            <ProfileAnchor profileData={{ orgId: hostId, userprofileImage: hostProfileImage, userName: hostName }} />
+            {coMeetingLeaders?.map((item: typeof coMeetingLeaders[number]) => (
+              <ProfileAnchor profileData={item} />
+            ))}
           </SHostWrapper>
+          {isMentorNeeded && <MentorTooltip />}
         </SAbout>
         <div>
           <SStatusButton onClick={handleRecruitmentStatusModal}>
@@ -407,75 +401,12 @@ const SPeriod = styled('div', {
   },
 });
 
-const SProfileAnchor = styled('a', {
-  flexType: 'verticalCenter',
-  color: '$gray10',
-  width: 'fit-content',
-  bg: '$gray900',
-  br: '10px',
-
-  display: 'flex',
-  padding: '12px 16px',
-  justifyContent: 'center',
-  alignItems: 'center',
-  gap: '14px',
+const SHostWrapper = styled('div', {
+  position: 'relative',
+  gap: '16px',
   '@mobile': {
-    padding: '5px 8px',
     gap: '6px',
-    br: '6.25px',
-  },
-
-  img: {
-    width: '$48',
-    height: '$48',
-    borderRadius: '50%',
-    objectFit: 'cover',
-
-    background: '$gray700',
-    '@tablet': {
-      width: '$32',
-      height: '$32',
-    },
-    '@mobile': {
-      width: '$20',
-      height: '$20',
-    },
-  },
-
-  '& > svg:first-child': {
-    width: '$48',
-    height: '$48',
-
-    '@tablet': {
-      width: '$32',
-      height: '$32',
-    },
-    '@mobile': {
-      width: '$20',
-      height: '$20',
-    },
   },
-
-  '& > span': {
-    ...fontsObject.TITLE_3_24_SB,
-    fontWeight: 500,
-
-    '@tablet': {
-      fontStyle: 'T5',
-    },
-    '@mobile': {
-      ...fontsObject.LABEL_5_11_SB,
-    },
-  },
-
-  // '>' 아이콘이 사라지면서 지금은 사용 안함.
-  '& > svg:last-child > path': {
-    stroke: `$gray200`,
-  },
-});
-
-const SHostWrapper = styled('div', {
-  position: 'relative',
 });
 
 const Button = styled('button', {

From ae0c43eaf575a57abadbd96c6913fbdd70baa91b Mon Sep 17 00:00:00 2001
From: borimong <kimhyunsu11@naver.com>
Date: Sun, 3 Nov 2024 16:41:43 +0900
Subject: [PATCH 24/25] =?UTF-8?q?feat:=20=EB=AA=A8=EC=9E=84=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95=EC=97=90=20=EA=B3=B5=EB=8F=99=20=EB=AA=A8=EC=9E=84?=
 =?UTF-8?q?=EC=9E=A5=20=EB=8D=B0=EC=9D=B4=ED=84=B0=20=EC=B6=9C=EB=A0=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/edit/index.tsx                                | 1 +
 src/components/form/Presentation/CoLeader/index.tsx | 9 ++++++---
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/pages/edit/index.tsx b/pages/edit/index.tsx
index 7a52f891..cc98324a 100644
--- a/pages/edit/index.tsx
+++ b/pages/edit/index.tsx
@@ -100,6 +100,7 @@ const EditPage = () => {
           joinableParts,
           canJoinOnlyActiveGeneration: formData?.canJoinOnlyActiveGeneration,
           note: formData?.note ?? '',
+          coLeader: formData?.coMeetingLeaders,
         },
       });
     }
diff --git a/src/components/form/Presentation/CoLeader/index.tsx b/src/components/form/Presentation/CoLeader/index.tsx
index e15acbc1..0d0e386a 100644
--- a/src/components/form/Presentation/CoLeader/index.tsx
+++ b/src/components/form/Presentation/CoLeader/index.tsx
@@ -24,6 +24,7 @@ interface mentionableDataType {
   recentPart: string;
   recentGeneration: number;
   profileImageUrl: string;
+  userprofileImage?: string;
 }
 
 const CoLeader = ({ value: coLeaders = [], onChange, error }: CoLeaderFieldProps) => {
@@ -139,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 />
                 )}

From 58a102fd546fbcd1a0a393252912774ee765a815 Mon Sep 17 00:00:00 2001
From: borimong <kimhyunsu11@naver.com>
Date: Sun, 3 Nov 2024 16:42:01 +0900
Subject: [PATCH 25/25] =?UTF-8?q?feat:=20=EB=AA=A8=EC=9E=84=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95=20=EC=8B=9C=20=EB=8B=A4=EC=9D=B4=EC=96=BC=EB=A1=9C?=
 =?UTF-8?q?=EA=B7=B8=20=EC=9B=8C=EB=94=A9=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/form/Presentation/index.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/components/form/Presentation/index.tsx b/src/components/form/Presentation/index.tsx
index 726adcb8..fb462101 100644
--- a/src/components/form/Presentation/index.tsx
+++ b/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();
@@ -555,7 +556,7 @@ function Presentation({
           </CancelButton>
         )}
         <SubmitButton
-          type="submit"
+          type="button"
           onClick={() => {
             open(dialogOption);
           }}