공동 모임장 QA 반영 (#959)

* feat: 엔터를 통해 선택 시 선택 안됨 표시 - 흰색 텍스트 색 유지 * feat: 커서 초반 크기 키우기 * feat: AddButton 재클릭 및 이외 공간 클릭시 input 닫히는 기능 구현 * fix: 엔드포인트 다시 변경
sopt-makers · Nov 22, 2024 · 5694a6e · 5694a6e
1 parent 3ae0206
commit 5694a6e
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 9 deletions.
diff --git a/src/api/index.ts b/src/api/index.ts
@@ -8,9 +8,7 @@ export type PromiseResponse<T> = { data: T; statusCode: number };
 export type Data<T> = PromiseResponse<T>;
 
 const baseURL =
-  process.env.NEXT_PUBLIC_APP_ENV === 'production'
-    ? 'https://crew.api.prod.sopt.org'
-    : 'https://crew.api.develop.sopt.org';
+  process.env.NEXT_PUBLIC_APP_ENV === 'production' ? 'https://crew.api.prod.sopt.org' : 'https://crew.api.dev.sopt.org';
 
 const playgroundBaseURL =
   process.env.NEXT_PUBLIC_APP_ENV === 'production'

diff --git a/src/components/form/Presentation/CoLeader/index.tsx b/src/components/form/Presentation/CoLeader/index.tsx
@@ -40,7 +40,8 @@ interface metionUserType {
 const CoLeader = ({ value: coLeaders = [], onChange, error }: CoLeaderFieldProps) => {
   const { data: user } = useQueryMyProfile();
   const { data: mentionUserList } = useQueryGetMentionUsers();
-  //API 연결에서 타입을 지정해두지 않았기 때문에 any 이용
+  const containerRef = useRef<HTMLDivElement | null>(null);
+
   const filteredMeList = mentionUserList?.filter((mentionUser: metionUserType) => mentionUser.userId !== user?.id);
 
   const handleUserSelect = (user: mentionableDataType) => {
@@ -64,8 +65,17 @@ const CoLeader = ({ value: coLeaders = [], onChange, error }: CoLeaderFieldProps
       setIsMobile(window.innerWidth <= 414);
     };
     window.addEventListener('resize', handleResize);
+
+    const handleClickOutSide = (event: MouseEvent) => {
+      if (containerRef.current && !containerRef.current.contains(event.target as Node)) setShowInput(false);
+    };
+
     handleResize(); // Initial check
-    return () => window.removeEventListener('resize', handleResize);
+    document.addEventListener('mousedown', handleClickOutSide);
+    return () => {
+      window.removeEventListener('resize', handleResize);
+      document.removeEventListener('mousedown', handleClickOutSide);
+    };
   }, []);
 
   const handleBackdropClick = () => {
@@ -78,15 +88,15 @@ const CoLeader = ({ value: coLeaders = [], onChange, error }: CoLeaderFieldProps
   };
 
   return (
-    <Container>
+    <Container ref={containerRef}>
       <LeadersContainer>
         {/*추가 버튼과 멘션 인풋 */}
         {coLeaders.length < 3 && (
           <AddLeader>
             <AddButton
               type={'button'}
               onClick={() => {
-                setShowInput(true);
+                setShowInput(prev => !prev);
                 setComment('');
               }}
               isActive={showInput}

diff --git a/src/components/form/SearchMention/index.tsx b/src/components/form/SearchMention/index.tsx
@@ -99,7 +99,9 @@ const SearchMention = ({
       <>
         <SRenderSuggestion
           key={suggestion.id}
-          onClick={() => handleUserClick(suggestion as mentionableDataType)}
+          onClick={() => {
+            handleUserClick(suggestion as mentionableDataType);
+          }}
           onKeyDown={(e: React.KeyboardEvent) => {
             //엔터 누르면 간편히 설정되도록 하고 싶은데,
             //위에 react-mention의 li(aria-selected 속성 사용)를 조작해야할 것 같아서.. 아직은 구현 못함
@@ -160,6 +162,7 @@ const SearchMention = ({
       onKeyDown={(e: React.KeyboardEvent) => {
         if (e.key === 'Enter') {
           // 엔터 키를 눌렀을 때 기본 동작(개행) 방지
+          console.log('hi');
           e.preventDefault();
         }
       }}
@@ -176,6 +179,13 @@ const SearchMention = ({
           return data;
         }}
         renderSuggestion={renderSuggestion}
+        // onKeyDown={(e: React.KeyboardEvent) => {
+        //   if (e.key === 'Enter') {
+        //     // 엔터 키를 눌렀을 때 기본 동작(개행) 방지
+        //     console.log('hiss');
+        //     e.preventDefault();
+        //   }
+        // }}
       />
     </MentionsInput>
   );
@@ -206,6 +216,7 @@ const FeedModalMentionStyle = {
       boxSizing: 'border-box',
     },
     input: {
+      //요 부분이 textArea!
       color: colors.gray50,
       innerHeight: '0',
       borderRadius: '10px',
@@ -217,6 +228,7 @@ const FeedModalMentionStyle = {
       boxSizing: 'border-box',
       overflow: 'auto',
       width: '100%',
+      height: '30px',
       maxHeight: '208px',
       overscrollBehavior: 'none',
       fontFamily: 'inherit',
@@ -225,7 +237,6 @@ const FeedModalMentionStyle = {
       lineHeight: 'inherit',
     },
     highlighter: {
-      color: colors.success,
       innerHeight: '0',
       border: 'none',
       padding: '0',