Merge pull request #129 from capstone-five-ai/develop

hotfix: 요약 편집 시 파일 중복 체크 안하는 문제 해결
capstone-five-ai · Jun 16, 2024 · a2efb4b · a2efb4b
2 parents 407afcf + 515e2b0
commit a2efb4b
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 5 deletions.
diff --git a/src/components/Button/PlainButton.tsx b/src/components/Button/PlainButton.tsx
@@ -87,7 +87,7 @@ const StyledButton = styled.button<{
   ${({ $size }) => getSizeStyle($size)}
   ${({ $variant }) => getVariantStyle($variant)}
 
-  transition: all  0.3s ease;
+  transition: all 0.3s ease;
 
   &:disabled {
     background: ${({ theme }) => theme.colors.grayScale06};

diff --git a/src/hooks/useDuplicatedFileName.ts b/src/hooks/useDuplicatedFileName.ts
@@ -3,18 +3,26 @@ import { ServiceType } from '@/types/category.type';
 import { useEffect } from 'react';
 
 interface DuplicatedFileName {
+  initialFileName?: string | undefined;
   fileName: string;
   checkType: Extract<ServiceType, 'SUMMARY'> | 'PROBLEM';
   duplicateHandler: (isDuplicated?: boolean) => void;
 }
 
 const useDuplicatedFileName = ({
+  initialFileName = undefined,
   fileName,
   checkType,
   duplicateHandler,
 }: DuplicatedFileName) => {
   useEffect(() => {
     if (!fileName) return;
+
+    if (initialFileName === fileName) {
+      duplicateHandler(false);
+      return;
+    }
+
     (async () => {
       try {
         const res = await checkDuplicateFileName(fileName, checkType);

diff --git a/src/pages/CategorySummaryEditPage.tsx b/src/pages/CategorySummaryEditPage.tsx
@@ -4,6 +4,8 @@ import DefaultSidebar from '@/components/Sidebar/DefaultSidebar';
 import ContentWrapper from '@/components/Wrapper/ContentWrapper';
 import TopButtonBar from '@/containers/CategoryDetailPage/TopButtonBar';
 import GenerateTextWrapper from '@/containers/QuizAIPage/GenerateTextWrapper';
+import useDebouncedValue from '@/hooks/useDebouncedValue';
+import useDuplicatedFileName from '@/hooks/useDuplicatedFileName';
 import useRedirect from '@/hooks/useRedirect';
 import { CategorySummaryItem } from '@/types/summary.type';
 import { useEffect, useState } from 'react';
@@ -14,19 +16,28 @@ function CategorySummaryEditPage() {
   const [params] = useSearchParams();
   const categoryId = Number(params.get('categoryId'));
   const summaryId = Number(params.get('id'));
-  const [fileName, setFileName] = useState('');
+  const [fileName, setFileName] = useState<string>('');
+  const [newFileName, setNewFileName] = useState('');
   const [summaryContent, setSummaryContent] = useState<string>('');
+  const [isDuplicatedFileName, setIsDuplicatedFileName] = useState<
+    boolean | undefined
+  >(undefined);
   const location = useLocation();
   const navigate = useNavigate();
   const redirect = useRedirect();
 
+  const { debouncedInputValue: debouncedFileName } = useDebouncedValue({
+    inputValue: newFileName,
+  });
+
   useEffect(() => {
     const { state } = location;
 
     if (state.summaryData) {
       const summary = state.summaryData as CategorySummaryItem;
       setSummaryContent(summary.summaryContent);
       setFileName(summary.summaryTitle);
+      setNewFileName(summary.summaryTitle);
     } else {
       navigate(
         `/management/category/summary?categoryId=${categoryId}&id=${summaryId}`
@@ -38,6 +49,14 @@ function CategorySummaryEditPage() {
     if (isNaN(categoryId) || isNaN(summaryId)) redirect('/management/category');
   }, [categoryId, summaryId]);
 
+  useDuplicatedFileName({
+    initialFileName: fileName,
+    fileName: debouncedFileName,
+    checkType: 'SUMMARY',
+    duplicateHandler: (isDuplicatedFileName) =>
+      setIsDuplicatedFileName(isDuplicatedFileName),
+  });
+
   const handleCancel = () => {
     navigate(
       `/management/category/summary?categoryId=${categoryId}&id=${summaryId}`
@@ -46,7 +65,7 @@ function CategorySummaryEditPage() {
 
   const handleEdit = async () => {
     try {
-      await editSummaryToCategory(summaryId, fileName, summaryContent);
+      await editSummaryToCategory(summaryId, newFileName, summaryContent);
       handleCancel();
     } catch (e) {
       console.error(e);
@@ -69,8 +88,10 @@ function CategorySummaryEditPage() {
       </StyledContent>
       <DefaultSidebar>
         <FileNameInputField
-          value={fileName}
-          onChange={(e) => setFileName(e.target.value)}
+          value={newFileName}
+          onChange={(e) => setNewFileName(e.target.value)}
+          errorMessage="중복되는 제목입니다."
+          isError={isDuplicatedFileName === true}
         />
       </DefaultSidebar>
     </ContentWrapper>