Feature 057

src/apis/config/instance.ts

@@ -8,8 +8,8 @@ const baseURL =
 const axiosInstance = axios.create({ baseURL });
 
 axiosInstance.interceptors.request.use((config) => {
-  config.withCredentials = true;
-  config.headers['Access-Control-Allow-Origin'] = '*';
+  // config.withCredentials = true;
+  // config.headers['Access-Control-Allow-Origin'] = '*';
 
   if (localStorage.vino) {
     const storage = JSON.parse(localStorage.vino);

src/components/Home/InsightVideos.tsx

@@ -22,12 +22,7 @@ const InsightVideos: React.FC<InsightVideosProps> = ({
 
   const endBox = useRef<HTMLDivElement>(null);
 
-  const onFileClick = async (
-    e: React.MouseEvent,
-    videoId: number,
-    categoryId: number,
-  ) => {
-    e.stopPropagation();
+  const onFileClick = async (videoId: number, categoryId: number) => {
     const res = await createDummyVideoToMine(videoId, categoryId);
     if (res.isSuccess)
       await getUnReadDummyVideos().then((res) =>

src/components/SummaryPage/SummaryDetailBox/CategorySelectBox/CategoryDropdown/CategoryDropdown.tsx

@@ -7,10 +7,11 @@ import { categoryState } from '@/stores/category';
 import DropdownItem from './DropdownItem';
 
 type Props = {
+  selectedId?: number;
   onSelect: (categoryId: number) => void;
 };
 
-const CategoryDropdown = ({ onSelect }: Props) => {
+const CategoryDropdown = ({ selectedId, onSelect }: Props) => {
   const categories = useRecoilValue(categoryState);
 
   return (
@@ -20,6 +21,7 @@ const CategoryDropdown = ({ onSelect }: Props) => {
           <DropdownItem
             key={category.categoryId}
             category={category}
+            selectedId={selectedId}
             onSelect={onSelect}
           />
         ))}

src/components/SummaryPage/SummaryDetailBox/CategorySelectBox/CategoryDropdown/DropdownItem.tsx

@@ -7,10 +7,11 @@ import { DropdownTopCategoryName } from '@/styles/SummaryPage';
 
 type Props = {
   category: IFolderProps;
+  selectedId?: number;
   onSelect: (categoryId: number) => void;
 };
 
-const DropdownItem = ({ category, onSelect }: Props) => {
+const DropdownItem = ({ category, selectedId, onSelect }: Props) => {
   const [isShow, setIsShow] = useState(false);
 
   const dynamicStyles = {
@@ -24,7 +25,7 @@ const DropdownItem = ({ category, onSelect }: Props) => {
 
   return (
     <>
-      <li>
+      <li className={selectedId === category.categoryId ? 'active' : ''}>
         <DownIcon
           width={18}
           height={18}
@@ -40,6 +41,7 @@ const DropdownItem = ({ category, onSelect }: Props) => {
       <ul style={dynamicStyles.subCategory}>
         {category.subFolders.map((subFolder) => (
           <li
+            className={selectedId === subFolder.categoryId ? 'active' : ''}
             key={subFolder.categoryId}
             onClick={() => onSelect(subFolder.categoryId)}
           >

src/components/SummaryPage/SummaryDetailBox/CategorySelectBox/CategorySelectBox.tsx

@@ -14,21 +14,17 @@ import { CategoryDropdown } from './CategoryDropdown';
 type Props = {
   selectedCategoryId?: number;
   onSelect: (categoryId: number) => void;
-  onFileClick?: (e: React.MouseEvent) => void;
 };
 
-const CategorySelectBox = ({
-  selectedCategoryId,
-  onSelect,
-  onFileClick,
-}: Props) => {
+const CategorySelectBox = ({ selectedCategoryId, onSelect }: Props) => {
   const userToken = useRecoilValue(userTokenState);
   const categories = useRecoilValue(categoryState);
 
   const [isOpen, setIsOpen] = useState(false);
+  const [selectedId, setSelectedId] = useState(selectedCategoryId);
 
   const selectedCategory =
-    selectedCategoryId &&
+    selectedId &&
     categories
       .reduce(
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -39,7 +35,7 @@ const CategorySelectBox = ({
         ],
         [],
       )
-      .find((category) => category.categoryId === selectedCategoryId);
+      .find((category) => category.categoryId === selectedId);
 
   // 다른 영역 클릭 시 dropdown 안보여지게 하기
   const [ref] = useOutsideClick<HTMLDivElement>(() => {
@@ -53,13 +49,22 @@ const CategorySelectBox = ({
   };
 
   const handleSelect = (categoryId: number) => {
-    onSelect(categoryId);
+    setSelectedId(categoryId);
     setIsOpen(false);
   };
 
+  const handleClick = () => {
+    if (!selectedId || selectedId === selectedCategoryId) return;
+
+    onSelect(selectedId);
+  };
+
   return (
-    <div ref={ref} style={{ display: 'flex', gap: 8 }} onClick={handleBoxClick}>
-      <div style={{ position: 'relative', flex: '1 1 auto' }}>
+    <div ref={ref} style={{ display: 'flex', gap: 8 }}>
+      <div
+        style={{ position: 'relative', flex: '1 1 auto' }}
+        onClick={handleBoxClick}
+      >
         <div className="select-box">
           <span>
             {userToken
@@ -72,14 +77,16 @@ const CategorySelectBox = ({
           <DownIcon width={18} height={18} />
         </div>
 
-        {isOpen && <CategoryDropdown onSelect={handleSelect} />}
+        {isOpen && (
+          <CategoryDropdown selectedId={selectedId} onSelect={handleSelect} />
+        )}
       </div>
 
       <span
         className={`icon-button ${!userToken && 'disabled'} ${
-          selectedCategory ? 'selected' : 'not-selected'
+          selectedCategoryId !== selectedId ? 'changed' : ''
         }`}
-        onClick={onFileClick}
+        onClick={handleClick}
       >
         <OpenFileIcon width={28} height={28} />
       </span>

src/components/SummaryPage/SummaryDetailBox/NoteBox/NoteBox.tsx

@@ -42,8 +42,6 @@ const NoteBox = ({ onRefresh }: Props) => {
         setDisableIndex();
       } else {
         await updateVideoAPI(summaryVideo.video_id, { summary: [summary] });
-
-        handleActiveEditable(editableIndex + 1);
       }
 
       onRefresh();
@@ -64,6 +62,17 @@ const NoteBox = ({ onRefresh }: Props) => {
     }
   };
 
+  const handleRemoveNote = async (summaryId: number) => {
+    try {
+      await deleteVideoSummaryAPI(summaryId);
+
+      setDisableIndex();
+      onRefresh();
+    } catch (e) {
+      console.error(e);
+    }
+  };
+
   return (
     <div style={{ position: 'relative', marginTop: 40 }}>
       <div className="note-box">
@@ -74,7 +83,15 @@ const NoteBox = ({ onRefresh }: Props) => {
             isEditable={editableIndex === index}
             onDisableEditable={setDisableIndex}
             onActiveEditable={() => handleActiveEditable(index)}
-            onEdit={(content) => handleUpdateNote({ id: summary.id, content })}
+            onEdit={(content) => {
+              handleUpdateNote({ id: summary.id, content });
+              setDisableIndex();
+            }}
+            onEditAndNext={(content) => {
+              handleUpdateNote({ id: summary.id, content });
+              handleActiveEditable(index + 1);
+            }}
+            onRemove={() => handleRemoveNote(summary.id)}
           />
         ))}
 
@@ -84,15 +101,22 @@ const NoteBox = ({ onRefresh }: Props) => {
             summary={{ id: -1, content: '' }}
             isEditable={editableIndex === -1}
             onDisableEditable={setDisableIndex}
-            onEdit={handleCreateNote}
+            onEdit={(content) => {
+              handleCreateNote(content);
+              setDisableIndex();
+            }}
+            onEditAndNext={handleCreateNote}
           />
         )}
 
         {/* 추가 버튼 */}
         {editableIndex === null && (
           <button
             className="create-button"
-            onClick={() => setEditableIndex(-1)}
+            onClick={(e) => {
+              e.stopPropagation();
+              setEditableIndex(-1);
+            }}
           >
             <PlusIcon width={28} height={28} />
           </button>

src/components/SummaryPage/SummaryDetailBox/NoteBox/NoteItem.tsx

@@ -2,6 +2,8 @@ import { useEffect, useRef, useState } from 'react';
 
 import CloseIcon from '@/assets/icons/close.svg?react';
 
+import useOutsideClick from '@/hooks/useOutsideClick';
+
 import { IVideoSummary } from '@/models/video';
 
 type Props = {
@@ -10,6 +12,8 @@ type Props = {
   onDisableEditable: () => void;
   onActiveEditable?: () => void;
   onEdit: (content: string) => void;
+  onEditAndNext?: (content: string) => void;
+  onRemove?: () => void;
 };
 
 const NoteItem = ({
@@ -18,10 +22,18 @@ const NoteItem = ({
   onDisableEditable,
   onActiveEditable,
   onEdit,
+  onEditAndNext,
+  onRemove,
 }: Props) => {
   const textareaRef = useRef<HTMLTextAreaElement>(null);
   const [noteText, setNoteText] = useState(summary.content);
 
+  const [outsideRef] = useOutsideClick<HTMLDivElement>(() => {
+    if (isEditable) {
+      onEdit(noteText);
+    }
+  });
+
   const handleKeyDown: React.KeyboardEventHandler<HTMLTextAreaElement> = (
     e,
   ) => {
@@ -30,7 +42,7 @@ const NoteItem = ({
     } else if (e.key === 'Enter') {
       e.preventDefault();
 
-      onEdit(noteText);
+      onEditAndNext && onEditAndNext(noteText);
 
       // 이어서 생성할 수 있도록
       if (summary.id === -1) {
@@ -53,6 +65,7 @@ const NoteItem = ({
 
   return (
     <div
+      ref={outsideRef}
       className={`note-item ${isEditable && 'editable'}`}
       onDoubleClick={onActiveEditable}
     >
@@ -70,9 +83,11 @@ const NoteItem = ({
             />
           </div>
 
-          <button className="close-button" onClick={onDisableEditable}>
-            <CloseIcon width={16} height={16} />
-          </button>
+          {summary.id !== -1 && (
+            <button className="close-button" onClick={onRemove}>
+              <CloseIcon width={16} height={16} />
+            </button>
+          )}
         </div>
       ) : (
         <span className="note-text">{noteText}</span>

src/components/category/Card.tsx

@@ -1,11 +1,8 @@
 import React, { useState } from 'react';
-import { useRecoilValue } from 'recoil';
 import { IVideoProps } from 'types/videos';
 
 import { CategorySelectBox } from '@/components/SummaryPage/SummaryDetailBox/CategorySelectBox';
 
-import { categoryState } from '@/stores/category';
-
 import * as CardStyles from '@/styles/category/Card.style';
 import Chip from '../common/chip/Chip';
 
@@ -14,11 +11,7 @@ interface ICardProps {
   video: IVideoProps;
   checkedVideos?: number[];
   setCheckedVideos?: (value: number[]) => void;
-  onFileClick?: (
-    e: React.MouseEvent,
-    videoId: number,
-    categoryId: number,
-  ) => void;
+  onFileClick?: (videoId: number, categoryId: number) => void;
 }
 
 const Card: React.FC<ICardProps> = ({
@@ -29,17 +22,9 @@ const Card: React.FC<ICardProps> = ({
   onFileClick,
 }) => {
   const [isOpen, setIsOpen] = useState(false);
-  const category = useRecoilValue(categoryState);
-
-  const [selectedCategoryId, setSelectedCategoryId] = useState(
-    category.length ? category[0].categoryId : -1,
-  );
-
-  const onFileClickWithProps = (e: React.MouseEvent) =>
-    onFileClick && onFileClick(e, video.video_id, selectedCategoryId);
 
   const handleSelectCategory = (categoryId: number) => {
-    setSelectedCategoryId(categoryId);
+    onFileClick && onFileClick(video.video_id, categoryId);
   };
 
   const handleCheckBox = (videoId: number) => {
@@ -82,9 +67,8 @@ const Card: React.FC<ICardProps> = ({
       {isOpen && mode === 'recommend' && (
         <CardStyles.DropdownWrap>
           <CategorySelectBox
-            selectedCategoryId={selectedCategoryId}
+            selectedCategoryId={video.category_id}
             onSelect={handleSelectCategory}
-            onFileClick={onFileClickWithProps}
           />
         </CardStyles.DropdownWrap>
       )}