Merge branch 'dev' into feature-006

teamViNO · Feb 20, 2024 · 94040f3 · 94040f3
2 parents 44fbdb1 + 115352a
commit 94040f3
Show file tree

Hide file tree

Showing 16 changed files with 427 additions and 192 deletions.
diff --git a/public/assets/check.png b/public/assets/check.png
diff --git a/src/components/SummaryPage/SummaryDetailBox/CategorySelectBox/CategorySelectBox.tsx b/src/components/SummaryPage/SummaryDetailBox/CategorySelectBox/CategorySelectBox.tsx
@@ -4,6 +4,8 @@ import { useRecoilValue } from 'recoil';
 import DownIcon from '@/assets/icons/down.svg?react';
 import OpenFileIcon from '@/assets/icons/open-file.svg?react';
 
+import GuestLoginModal from '@/components/modals/GuestLoginModal';
+
 import useOutsideClick from '@/hooks/useOutsideClick';
 
 import { categoryState } from '@/stores/category';
@@ -28,6 +30,7 @@ const CategorySelectBox = ({
   const categories = useRecoilValue(categoryState);
 
   const [isOpen, setIsOpen] = useState(false);
+  const [isModalOpen, setIsModalOpen] = useState(false);
   const [selectedId, setSelectedId] = useState(selectedCategoryId);
 
   const selectedCategory =
@@ -50,9 +53,13 @@ const CategorySelectBox = ({
   });
 
   const handleBoxClick = () => {
-    if (!userToken || disabled) return;
+    if (disabled) return;
 
-    setIsOpen(!isOpen);
+    if (userToken) {
+      setIsOpen(!isOpen);
+    } else {
+      setIsModalOpen(true);
+    }
   };
 
   const handleSelect = (categoryId: number) => {
@@ -68,45 +75,55 @@ const CategorySelectBox = ({
   };
 
   return (
-    <div ref={ref} style={{ display: 'flex', gap: 8 }}>
-      <div
-        style={{
-          position: 'relative',
-          flex: '1 1 auto',
-        }}
-        onClick={handleBoxClick}
-      >
+    <>
+      <div ref={ref} style={{ display: 'flex', gap: 8 }}>
         <div
-          className="select-box"
-          style={{ cursor: disabled ? 'default' : 'pointer' }}
+          style={{
+            position: 'relative',
+            flex: '1 1 auto',
+          }}
+          onClick={handleBoxClick}
         >
-          <span>
-            {userToken
-              ? selectedCategory
-                ? selectedCategory.name
-                : size === 'SMALL'
-                  ? '카테고리 선택'
-                  : '어떤 카테고리에 넣을까요?'
-              : '로그인하고 요약한 영상을 아카이빙해요!'}
-          </span>
-
-          <DownIcon width={18} height={18} />
+          <div
+            className="select-box"
+            style={{ cursor: disabled ? 'default' : 'pointer' }}
+          >
+            <span>
+              {userToken
+                ? selectedCategory
+                  ? selectedCategory.name
+                  : size === 'SMALL'
+                    ? '카테고리 선택'
+                    : '어떤 카테고리에 넣을까요?'
+                : '로그인하고 요약한 영상을 아카이빙해요!'}
+            </span>
+
+            <DownIcon width={18} height={18} />
+          </div>
+
+          {isOpen && (
+            <CategoryDropdown selectedId={selectedId} onSelect={handleSelect} />
+          )}
         </div>
 
-        {isOpen && (
-          <CategoryDropdown selectedId={selectedId} onSelect={handleSelect} />
-        )}
+        <span
+          className={`icon-button ${(!userToken || disabled) && 'disabled'} ${
+            selectedCategoryId !== selectedId ? 'changed' : ''
+          }`}
+          onClick={handleClick}
+        >
+          <OpenFileIcon width={28} height={28} />
+        </span>
       </div>
 
-      <span
-        className={`icon-button ${(!userToken || disabled) && 'disabled'} ${
-          selectedCategoryId !== selectedId ? 'changed' : ''
-        }`}
-        onClick={handleClick}
-      >
-        <OpenFileIcon width={28} height={28} />
-      </span>
-    </div>
+      {isModalOpen && (
+        <GuestLoginModal
+          title="수정사항 저장 안내"
+          description={<>로그인하고 요약한 영상을 아카이빙해요!</>}
+          onClose={() => setIsModalOpen(false)}
+        />
+      )}
+    </>
   );
 };
 

diff --git a/src/components/SummaryPage/SummaryDetailBox/NoteBox/NoteBox.tsx b/src/components/SummaryPage/SummaryDetailBox/NoteBox/NoteBox.tsx
@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import { useRecoilValue } from 'recoil';
 
 import {
@@ -8,11 +9,14 @@ import {
 
 import PlusIcon from '@/assets/icons/plus.svg?react';
 
+import GuestLoginModal from '@/components/modals/GuestLoginModal';
+
 import useIndex from '@/hooks/useIndex';
 
 import { IVideoSummary } from '@/models/video';
 
 import { summaryIsEditingViewState, summaryVideoState } from '@/stores/summary';
+import { userTokenState } from '@/stores/user';
 
 import NoteItem from './NoteItem';
 
@@ -21,15 +25,19 @@ type Props = {
 };
 
 const NoteBox = ({ onRefresh }: Props) => {
+  const userToken = useRecoilValue(userTokenState);
   const summaryVideo = useRecoilValue(summaryVideoState);
   const isEditingView = useRecoilValue(summaryIsEditingViewState);
   const [editableIndex, setEditableIndex, setDisableIndex] = useIndex();
+  const [isModalOpen, setIsModalOpen] = useState(false);
 
   const handleActiveEditable = (index: number) => {
-    if (index > (summaryVideo?.summary || []).length - 1) {
-      setEditableIndex(-1);
-    } else {
-      setEditableIndex(index);
+    if (userToken) {
+      if (index > (summaryVideo?.summary || []).length - 1) {
+        setEditableIndex(-1);
+      } else {
+        setEditableIndex(index);
+      }
     }
   };
 
@@ -74,57 +82,63 @@ const NoteBox = ({ onRefresh }: Props) => {
     }
   };
 
-  return (
-    <div style={{ position: 'relative', marginTop: 40 }}>
-      <div className="note-box">
-        {summaryVideo?.summary.map((summary, index) => (
-          <NoteItem
-            key={summary.id}
-            summary={summary}
-            isEditable={editableIndex === index}
-            onDisableEditable={setDisableIndex}
-            onActiveEditable={() => handleActiveEditable(index)}
-            onEdit={(content) => {
-              handleUpdateNote({ id: summary.id, content });
-              setDisableIndex();
-            }}
-            onEditAndNext={(content) => {
-              handleUpdateNote({ id: summary.id, content });
-              handleActiveEditable(index + 1);
-            }}
-            onRemove={() => handleRemoveNote(summary.id)}
-          />
-        ))}
-
-        {/* 추가 */}
-        {editableIndex === -1 && (
-          <NoteItem
-            summary={{ id: -1, content: '' }}
-            isEditable={editableIndex === -1}
-            onDisableEditable={setDisableIndex}
-            onEdit={(content) => {
-              handleCreateNote(content);
-              setDisableIndex();
-            }}
-            onEditAndNext={handleCreateNote}
-          />
-        )}
-
-        {/* 추가 버튼 */}
-        {editableIndex === null && !isEditingView && (
-          <button
-            className="create-button"
-            onClick={(e) => {
-              e.stopPropagation();
-              setEditableIndex(-1);
-            }}
-          >
-            <PlusIcon width={28} height={28} />
-          </button>
-        )}
-      </div>
+  const handleClickCreateButton: React.MouseEventHandler<HTMLButtonElement> = (
+    e,
+  ) => {
+    if (userToken) {
+      e.stopPropagation();
+      setEditableIndex(-1);
+    } else {
+      setIsModalOpen(true);
+    }
+  };
 
-      {/* <div className="note-box-tooltip">
+  return (
+    <>
+      <div style={{ position: 'relative', marginTop: 40 }}>
+        <div className="note-box">
+          {summaryVideo?.summary.map((summary, index) => (
+            <NoteItem
+              key={summary.id}
+              summary={summary}
+              isEditable={editableIndex === index}
+              onDisableEditable={setDisableIndex}
+              onActiveEditable={() => handleActiveEditable(index)}
+              onEdit={(content) => {
+                handleUpdateNote({ id: summary.id, content });
+                setDisableIndex();
+              }}
+              onEditAndNext={(content) => {
+                handleUpdateNote({ id: summary.id, content });
+                handleActiveEditable(index + 1);
+              }}
+              onRemove={() => handleRemoveNote(summary.id)}
+            />
+          ))}
+
+          {/* 추가 */}
+          {editableIndex === -1 && (
+            <NoteItem
+              summary={{ id: -1, content: '' }}
+              isEditable={editableIndex === -1}
+              onDisableEditable={setDisableIndex}
+              onEdit={(content) => {
+                handleCreateNote(content);
+                setDisableIndex();
+              }}
+              onEditAndNext={handleCreateNote}
+            />
+          )}
+
+          {/* 추가 버튼 */}
+          {editableIndex === null && !isEditingView && (
+            <button className="create-button" onClick={handleClickCreateButton}>
+              <PlusIcon width={28} height={28} />
+            </button>
+          )}
+        </div>
+
+        {/* <div className="note-box-tooltip">
         <Tooltip direction="left">
           더블 클릭을 통해 잘못된 내용을 수정해봐요!
         </Tooltip>
@@ -133,7 +147,22 @@ const NoteBox = ({ onRefresh }: Props) => {
           직접 기록하고 싶은 내용들을 추가할 수 있어요!
         </Tooltip>
       </div> */}
-    </div>
+      </div>
+
+      {isModalOpen && (
+        <GuestLoginModal
+          title="수정사항 저장 안내"
+          description={
+            <>
+              로그인하지 않으면 수정한 부분을 나중에 다시 확인할 수 없어요!
+              <br />
+              로그인하고 수정내용을 저장해요
+            </>
+          }
+          onClose={() => setIsModalOpen(false)}
+        />
+      )}
+    </>
   );
 };
 

diff --git a/src/components/SummaryPage/SummaryScriptBox/ToolBox/ChangeKeyword/ChangeKeyword.tsx b/src/components/SummaryPage/SummaryScriptBox/ToolBox/ChangeKeyword/ChangeKeyword.tsx
@@ -1,8 +1,12 @@
-import { useRecoilState } from 'recoil';
+import { useState } from 'react';
+import { useRecoilState, useRecoilValue } from 'recoil';
 
 import TransformationIcon from '@/assets/icons/transformation.svg?react';
 
+import GuestLoginModal from '@/components/modals/GuestLoginModal';
+
 import { summaryTransformModalState } from '@/stores/modal';
+import { userTokenState } from '@/stores/user';
 
 import ChangeKeywordModal from './ChangeKeywordModal';
 
@@ -11,16 +15,45 @@ type Props = {
 };
 
 const ChangeKeyword = (props: Props) => {
-  const [isOpen, setIsOpen] = useRecoilState(summaryTransformModalState);
+  const userToken = useRecoilValue(userTokenState);
+  const [isTransformModalOpen, setIsTransformModalOpen] = useRecoilState(
+    summaryTransformModalState,
+  );
+  const [isGuestModalOpen, setIsGuestModalOpen] = useState(false);
+
+  const handleClickButton = () => {
+    if (userToken) {
+      setIsTransformModalOpen(true);
+    } else {
+      setIsGuestModalOpen(true);
+    }
+  };
 
   return (
     <>
-      <span className="icon-button" onClick={() => setIsOpen(true)}>
+      <span className="icon-button" onClick={handleClickButton}>
         <TransformationIcon width={18} height={18} />
       </span>
 
-      {isOpen && (
-        <ChangeKeywordModal onClose={() => setIsOpen(false)} {...props} />
+      {isTransformModalOpen && (
+        <ChangeKeywordModal
+          onClose={() => setIsTransformModalOpen(false)}
+          {...props}
+        />
+      )}
+
+      {isGuestModalOpen && (
+        <GuestLoginModal
+          title="수정사항 저장 안내"
+          description={
+            <>
+              로그인하지 않으면 수정한 부분을 나중에 다시 확인할 수 없어요!
+              <br />
+              로그인하고 수정내용을 저장해요
+            </>
+          }
+          onClose={() => setIsGuestModalOpen(false)}
+        />
       )}
     </>
   );