diff --git a/src/api/index.ts b/src/api/index.ts index e5a5f2ae..261cd274 100644 --- a/src/api/index.ts +++ b/src/api/index.ts @@ -8,9 +8,7 @@ export type PromiseResponse = { data: T; statusCode: number }; export type Data = PromiseResponse; 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 index 6e05dc50..b6e017cb 100644 --- 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(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,7 +88,7 @@ const CoLeader = ({ value: coLeaders = [], onChange, error }: CoLeaderFieldProps }; return ( - + {/*추가 버튼과 멘션 인풋 */} {coLeaders.length < 3 && ( @@ -86,7 +96,7 @@ const CoLeader = ({ value: coLeaders = [], onChange, error }: CoLeaderFieldProps { - setShowInput(true); + setShowInput(prev => !prev); setComment(''); }} isActive={showInput} diff --git a/src/components/form/SearchMention/index.tsx b/src/components/form/SearchMention/index.tsx index af7c186b..958cead0 100644 --- a/src/components/form/SearchMention/index.tsx +++ b/src/components/form/SearchMention/index.tsx @@ -99,7 +99,9 @@ const SearchMention = ({ <> 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(); + // } + // }} /> ); @@ -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',