Merge pull request #435 from Neogasogaeseo/hotfix/#433

Neogasogaeseo · Jan 15, 2023 · bc023c1 · bc023c1
2 parents e1753ce + 6eefd9a
commit bc023c1
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 41 deletions.
diff --git a/src/presentation/pages/NeososeoForm/Answer/index.tsx b/src/presentation/pages/NeososeoForm/Answer/index.tsx
@@ -2,26 +2,24 @@ import { api } from '@api/index';
 import { NeososeoFormData } from '@api/types/neososeo-form';
 import { Keyword } from '@api/types/user';
 import { ImgPage2 } from '@assets/images';
-import CommonNavigation from '@components/common/Navigation';
+import { StInput } from '@components/common/Input/style';
 import ImmutableKeywordList from '@components/common/Keyword/ImmutableList';
+import CommonNavigation from '@components/common/Navigation';
 import NeososeoFormHeader from '@components/NeososeoFormHeader';
 import { neososeoAnswerState } from '@stores/neososeo-form';
 import { isAllFilled } from '@utils/string';
 import { useEffect, useState } from 'react';
 import { Link, Outlet, useNavigate, useOutletContext } from 'react-router-dom';
 import { useRecoilState, useResetRecoilState } from 'recoil';
 import { StButton, StNeososeoFormLayout, StNeososeoTitle, StSubTitle } from '../style';
-import { StTextarea, StKeywordListWrapper } from './style';
-import { useToast } from '@hooks/useToast';
-import { StInput } from '@components/common/Input/style';
+import { StKeywordListWrapper, StTextarea } from './style';
 
 interface OutletContextProps {
   neososeoFormData: NeososeoFormData;
 }
 
 function NeososeoFormAnswer() {
   const { neososeoFormData } = useOutletContext<OutletContextProps>();
-  const { fireToast } = useToast();
   const [keywordList, setKeywordList] = useState<Keyword[]>([]);
   const [neososeoAnswer, setNeososeoAnswer] = useRecoilState(neososeoAnswerState);
   const resetNeososeoAnswer = useResetRecoilState(neososeoAnswerState);
@@ -83,13 +81,9 @@ function NeososeoFormAnswer() {
         context={{
           keywordList: keywordList,
           addKeyword: (keyword: Keyword) => {
-            if (keywordList.length < 2) {
-              setKeywordList((prev) =>
-                prev.map((prev) => prev.id).includes(keyword.id) ? prev : [...prev, keyword],
-              );
-            } else {
-              fireToast({ content: '키워드는 최대 2개 입력할 수 있어요' });
-            }
+            setKeywordList((prev) =>
+              prev.map((prev) => prev.id).includes(keyword.id) ? prev : [...prev, keyword],
+            );
           },
           removeKeyword: (targetKeyword: Keyword) =>
             setKeywordList((prev) => prev.filter((keyword) => keyword.id !== targetKeyword.id)),

diff --git a/src/presentation/pages/Team/Issue/Feedback/index.tsx b/src/presentation/pages/Team/Issue/Feedback/index.tsx
@@ -1,27 +1,26 @@
 import { useEffect, useState } from 'react';
-import { Link, Outlet, useNavigate, useOutletContext, useParams } from 'react-router-dom';
 import { useMutation, useQuery, useQueryClient } from 'react-query';
+import { Link, Outlet, useNavigate, useOutletContext, useParams } from 'react-router-dom';
 
 import { api } from '@api/index';
-import { Keyword } from '@api/types/user';
 import { FeedbackEditInfo, TeamMemberNoneId } from '@api/types/team';
-import ProfileListSelectable from '@components/ProfileListSelectable';
+import { Keyword } from '@api/types/user';
+import { IcLock } from '@assets/icons';
+import { imgEmptyProfile } from '@assets/images';
+import { StInput } from '@components/common/Input/style';
 import ImmutableKeywordList from '@components/common/Keyword/ImmutableList';
+import ProfileListSelectable from '@components/ProfileListSelectable';
 import {
   StAbsoluteWrapper,
   StBlackBlur,
-  StWrapper,
-  StSection,
-  StSectionTitle,
   StButton,
-  StTextarea,
   StEmptyWrapper,
+  StSection,
+  StSectionTitle,
   StTargetUser,
+  StTextarea,
+  StWrapper,
 } from './style';
-import { IcLock } from '@assets/icons';
-import { imgEmptyProfile } from '@assets/images';
-import { useToast } from '@hooks/useToast';
-import { StInput } from '@components/common/Input/style';
 
 interface TeamIssueFeedbackProps {
   isEditMode?: boolean;
@@ -32,7 +31,6 @@ interface TeamIssueFeedbackProps {
 function TeamIssueFeedback(props: TeamIssueFeedbackProps) {
   const { isEditMode = false } = props;
   const { feedbackEditInfo, closeBottomSheet } = useOutletContext<TeamIssueFeedbackProps>();
-  const { fireToast } = useToast();
 
   const [selectedUser, setSelectedUser] = useState<TeamMemberNoneId | null>(null);
   const [content, setContent] = useState<string>('');
@@ -181,15 +179,11 @@ function TeamIssueFeedback(props: TeamIssueFeedbackProps) {
         context={{
           keywordList,
           addKeyword: (keyword: Keyword) => {
-            if (keywordList.length < 2) {
-              setKeywordList((prev) =>
-                prev.map((prev) => prev.content).includes(keyword.content)
-                  ? prev
-                  : [...prev, keyword],
-              );
-            } else {
-              fireToast({ content: '키워드는 최대 2개 입력할 수 있어요' });
-            }
+            setKeywordList((prev) =>
+              prev.map((prev) => prev.content).includes(keyword.content)
+                ? prev
+                : [...prev, keyword],
+            );
           },
           removeKeyword: (targetKeyword: Keyword) =>
             setKeywordList((prev) =>

diff --git a/src/presentation/pages/Team/Issue/Keyword/index.tsx b/src/presentation/pages/Team/Issue/Keyword/index.tsx
@@ -1,16 +1,17 @@
-import { useCallback, useEffect, useState } from 'react';
-import { useNavigate, useOutletContext, Navigate } from 'react-router-dom';
-import { useInfiniteQuery } from 'react-query';
 import { api } from '@api/index';
 import { Keyword } from '@api/types/user';
-import CommonInput from '@components/common/Input';
-import CommonLoader from '@components/common/Loader';
 import KeywordEmptyView from '@components/common/Empty/Keyword';
+import CommonInput from '@components/common/Input';
 import ImmutableKeywordList from '@components/common/Keyword/ImmutableList';
 import MutableKeywordList from '@components/common/Keyword/MutableList';
+import CommonLoader from '@components/common/Loader';
 import { useScrollHeight } from '@hooks/useScrollHeight';
+import { useToast } from '@hooks/useToast';
 import { PAGES } from '@utils/constant';
-import { StAbsoluteWrapper, StTitleWrapper, StWhiteWrapper, StHeader } from './style';
+import { useCallback, useEffect, useState } from 'react';
+import { useInfiniteQuery } from 'react-query';
+import { Navigate, useNavigate, useOutletContext } from 'react-router-dom';
+import { StAbsoluteWrapper, StHeader, StTitleWrapper, StWhiteWrapper } from './style';
 
 interface OutletContextProps {
   keywordList: Keyword[];
@@ -21,6 +22,7 @@ interface OutletContextProps {
 
 function TeamIssueKeyword() {
   const navigate = useNavigate();
+  const { fireToast } = useToast();
   const [createdKeywordIDs, setCreatedKeywordIDs] = useState<string[]>([]);
   const { keywordList, removeKeyword, addKeyword, targetUser } =
     useOutletContext<OutletContextProps>();
@@ -48,6 +50,10 @@ function TeamIssueKeyword() {
 
   const createKeyword = async () => {
     if (newKeywordContent === '') return;
+    if (keywordList.length >= 2) {
+      fireToast({ content: '키워드는 최대 2개 입력할 수 있어요' });
+      return;
+    }
     setIsKeywordCreating(true);
     const newKeyword = await api.userService.postKeyword(targetUser.id, newKeywordContent);
     addKeyword(newKeyword);
@@ -56,6 +62,14 @@ function TeamIssueKeyword() {
     setIsKeywordCreating(false);
   };
 
+  const updateKeywordList = (keyword: Keyword) => {
+    if (keywordList.length >= 2) {
+      fireToast({ content: '키워드는 최대 2개 입력할 수 있어요' });
+      return;
+    }
+    addKeyword(keyword);
+  };
+
   const deleteKeyword = (keyword: Keyword) => {
     if (createdKeywordIDs.includes(keyword.id)) {
       api.userService.undoPostKeyword(keyword.id);
@@ -77,7 +91,7 @@ function TeamIssueKeyword() {
       <StWhiteWrapper>
         <CommonInput
           width="100%"
-          placeholder="새 키워드를 입력해주세요"
+          placeholder="새 키워드를 입력해주세요 (최대 2개)"
           value={newKeywordContent}
           onChange={(value: string) => setNewKeywordContent(value)}
           onSubmit={createKeyword}
@@ -96,7 +110,7 @@ function TeamIssueKeyword() {
           <ImmutableKeywordList
             keywordList={userKeywordList.pages.map((page) => page.result).flat()}
             viewMode="linear"
-            onItemClick={(keyword: Keyword) => addKeyword(keyword)}
+            onItemClick={updateKeywordList}
           />
           {isFetchingNextPage && <CommonLoader />}
         </>