diff --git a/src/presentation/pages/NeososeoForm/Answer/index.tsx b/src/presentation/pages/NeososeoForm/Answer/index.tsx index afc48b69..d91700cf 100644 --- a/src/presentation/pages/NeososeoForm/Answer/index.tsx +++ b/src/presentation/pages/NeososeoForm/Answer/index.tsx @@ -2,8 +2,9 @@ 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'; @@ -11,9 +12,7 @@ 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; @@ -21,7 +20,6 @@ interface OutletContextProps { function NeososeoFormAnswer() { const { neososeoFormData } = useOutletContext(); - const { fireToast } = useToast(); const [keywordList, setKeywordList] = useState([]); 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 index 722b6c24..f5a00f16 100644 --- 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(); - const { fireToast } = useToast(); const [selectedUser, setSelectedUser] = useState(null); const [content, setContent] = useState(''); @@ -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 index 7f7bc631..fc43d2ab 100644 --- 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([]); const { keywordList, removeKeyword, addKeyword, targetUser } = useOutletContext(); @@ -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() { setNewKeywordContent(value)} onSubmit={createKeyword} @@ -96,7 +110,7 @@ function TeamIssueKeyword() { page.result).flat()} viewMode="linear" - onItemClick={(keyword: Keyword) => addKeyword(keyword)} + onItemClick={updateKeywordList} /> {isFetchingNextPage && }