버그 픽스 (#105)

Close #103
SWM-SMART · Nov 11, 2023 · 365f479 · 365f479
2 parents 9ce9a18 + 6e498c6
commit 365f479
Show file tree

Hide file tree

Showing 25 changed files with 581 additions and 153 deletions.
diff --git a/app/components/ContextMenuViewer/contextMenuViewer.module.css b/app/components/ContextMenuViewer/contextMenuViewer.module.css
@@ -0,0 +1,23 @@
+.container {
+  position: absolute;
+  background-color: var(--background);
+  border-radius: 6px;
+  border: 1px solid var(--grey-normal);
+  margin: 0;
+  padding: 0;
+  animation: var(--intro-animation);
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+.item {
+  min-width: 100px;
+  cursor: default;
+  list-style: none;
+  margin: 0;
+  padding: 10px;
+}
+
+.item:hover {
+  background-color: var(--grey-normal);
+}
diff --git a/app/components/ContextMenuViewer/index.tsx b/app/components/ContextMenuViewer/index.tsx
@@ -0,0 +1,39 @@
+import { useContextMenu } from '@/states/contextMenu';
+import styles from './contextMenuViewer.module.css';
+import { CSSProperties, useEffect } from 'react';
+
+export default function ContextMenuViewer() {
+  const { menu, setMenu } = useContextMenu((state) => ({
+    menu: state.menu,
+    setMenu: state.setMenu,
+  }));
+
+  useEffect(() => {
+    if (menu === null) return;
+    const pointerDown = () => setMenu(null);
+    document.addEventListener('pointerdown', pointerDown);
+    return () => document.removeEventListener('pointerdown', pointerDown);
+  }, [menu, setMenu]);
+
+  if (menu === null) return <></>;
+
+  const style: CSSProperties = {};
+  // check x overflow
+  if (menu.position.x < window.innerWidth / 2) style.left = menu.position.x;
+  else style.right = window.innerWidth - menu.position.x;
+  // check y overflow
+  if (menu.position.y < window.innerHeight / 2) style.top = menu.position.y;
+  else style.bottom = window.innerHeight - menu.position.y;
+
+  return (
+    <ul className={styles.container} style={style}>
+      {menu.items.map((v) => {
+        return (
+          <li className={styles.item} key={v.label} onPointerDown={v.onClick}>
+            {v.label}
+          </li>
+        );
+      })}
+    </ul>
+  );
+}
diff --git a/app/components/DocumentCreateDialogue/index.tsx b/app/components/DocumentCreateDialogue/index.tsx
@@ -4,7 +4,6 @@ import Dialogue from '@/components/Dialogue';
 import FileInput from '@/components/Dialogue/Input/FileInput';
 import TextInput from '@/components/Dialogue/Input/TextInput';
 import { useToast } from '@/states/toast';
-import { useViewer } from '@/states/viewer';
 import { createDocument, uploadFile } from '@/utils/api';
 import { throwError } from '@/utils/ui';
 import { useRouter } from 'next/navigation';
@@ -21,14 +20,13 @@ export default function DocumentCreateDialogue({
 }: DocumentCreateDialogueProps) {
   const router = useRouter();
   const [load, setLoad] = useState<boolean>(false);
-  const documentId = useViewer((state) => state.document?.documentId ?? 0);
   const pushToast = useToast((state) => state.pushToast);
 
   return (
     <div className={styles.container} style={load ? { pointerEvents: 'none' } : undefined}>
       <Dialogue
         enabled={!load}
-        title={'문서 생성'}
+        title={'학습 생성'}
         onCancel={onCancel}
         onSubmit={(e) => {
           e.preventDefault();
@@ -37,19 +35,27 @@ export default function DocumentCreateDialogue({
           const titleInput = (e.target as any).title as HTMLInputElement;
           const fileInput = (e.target as any).file as HTMLInputElement;
 
+          // check file
+          if (fileInput.files === null || fileInput.files.length === 0) {
+            throwError('요약할 파일을 입력해 주세요');
+            return setLoad(false);
+          }
+
           // check title
           if (titleInput.value.length === 0) {
-            throwError('문서의 제목을 입력해 주세요');
-            return setLoad(false);
+            // throwError('문서의 제목을 입력해 주세요');
+            // return setLoad(false);
+
+            // set to filename if left blank
+            titleInput.value = fileInput.files[0].name;
           }
 
           (async () => {
             // create new Document
             const newDocument = await createDocument(titleInput.value);
+
             // upload file (if exists)
-            if (fileInput.files !== null && fileInput.files.length > 0) {
-              await uploadFile(documentId, fileInput.files[0]);
-            }
+            await uploadFile(newDocument.documentId, fileInput.files![0]);
 
             pushToast({
               id: new Date().getTime(),

diff --git a/app/components/Header/index.tsx b/app/components/Header/index.tsx
@@ -6,6 +6,7 @@ import { useOverlay } from '@/states/overlay';
 import DocumentCreateDialogue from '../DocumentCreateDialogue';
 import Logo from '@/components/Logo';
 import { useUser } from '@/states/user';
+import { useViewer } from '@/states/viewer';
 export default function Header() {
   const { setOverlay } = useOverlay((state) => ({
     setOverlay: state.setOverlay,
@@ -21,7 +22,7 @@ export default function Header() {
         {userDataExists ? (
           <ClickableBackgroundButton
             invert={true}
-            text={'새로운 문서'}
+            text={'학습 생성'}
             icon="add"
             onClick={() =>
               setOverlay(
@@ -33,7 +34,6 @@ export default function Header() {
             }
           />
         ) : undefined}
-
         <LoginButton />
       </div>
     </div>

diff --git a/app/document/[documentId]/components/BottomToolBar/index.tsx b/app/document/[documentId]/components/BottomToolBar/index.tsx
@@ -4,11 +4,14 @@ import ClickableBackgroundButton from '@/components/BackgroundButton/ClickableBa
 import { useViewer } from '@/states/viewer';
 import 'material-symbols';
 import SmallIconButton from '@/components/Button/SmallIconButton';
+import { useOverlay } from '@/states/overlay';
+import MixModePanel from '@/components/GraphCanvas/MixModePanel';
 
 export default function BottomToolBar() {
   const elementRef = useRef<HTMLDivElement>(null);
   const [pos, setPos] = useState<Coord>({ x: 0, y: 0 });
   const [drag, setDrag] = useState<Coord | undefined>(undefined);
+  const setOverlay = useOverlay((state) => state.setOverlay);
 
   useEffect(() => {
     if (!drag) return;
@@ -67,6 +70,13 @@ export default function BottomToolBar() {
           invert={true}
           onClick={() => setView('DATA')}
         />
+        <ClickableBackgroundButton
+          color={'primary'}
+          thin={true}
+          text={'MIX!'}
+          invert={false}
+          onClick={() => setOverlay(<MixModePanel />)}
+        />
       </div>
     </div>
   );

diff --git a/app/document/[documentId]/page.tsx b/app/document/[documentId]/page.tsx
@@ -11,10 +11,6 @@ const GraphCanvas = dynamic(() => import('@/components/GraphCanvas'), { ssr: fal
 import 'material-symbols';
 import AudioViewer from '@/components/DataViewer/AudioViewer';
 import ClickableBackgroundButton from '@/components/BackgroundButton/ClickableBackgroundButton';
-import Dialogue from '@/components/Dialogue';
-import FileInput from '@/components/Dialogue/Input/FileInput';
-import { useToast } from '@/states/toast';
-import { uploadFile } from '@/utils/api';
 import { useViewerEvents } from '@/utils/ui';
 import Divider, { useDivider } from '@/components/Divider';
 
@@ -46,16 +42,17 @@ export default function DoucumentsPage({ params }: DocumentPageProps) {
   const eventCallback = useCallback(
     (type: ViewerEventType) => {
       // reload on event
+      if (documentData === null) return loadDocument(documentId);
       // TODO: implement other types of events
       syncDocument();
     },
-    [syncDocument],
+    [documentData, documentId, loadDocument, syncDocument],
   );
 
   // subscribe to events
   useViewerEvents(documentId, eventCallback);
 
-  if (documentData === null) return <LoadingScreen message={'Loading document'} />;
+  if (documentData === null) return <LoadingScreen message={'요약 마인드맵 로드중'} />;
 
   return (
     <div className={styles.rootContainer}>
@@ -122,49 +119,17 @@ function DataViewer({ type }: DataViewerProps) {
       return <PdfViewer dataSource={dataSource} />;
     case 'audio':
       return <AudioViewer dataSource={dataSource} />;
-    case 'none':
-      return <DataUploadDialogue />;
   }
 }
 
-function DataUploadDialogue() {
-  const pushToast = useToast((state) => state.pushToast);
-  const documentId = useViewer((state) => state.document?.documentId);
-  return (
-    <div className={styles.uploadDialogue}>
-      <Dialogue
-        enabled={true}
-        title={'자료 업로드'}
-        onSubmit={(e) => {
-          if (documentId === undefined) return;
-          const fileInput = (e.target as any).file as HTMLInputElement;
-          // upload file (if exists)
-          (async () => {
-            if (fileInput.files !== null && fileInput.files.length > 0) {
-              await uploadFile(documentId, fileInput.files[0]);
-            }
-          })();
-        }}
-      >
-        <FileInput
-          name="file"
-          types={['application/pdf', 'audio/mpeg']}
-          typeNames={['pdf', 'mp3']}
-          onError={(msg) => pushToast({ id: new Date().getTime(), duraton: 3000, msg: msg })}
-        />
-      </Dialogue>
-    </div>
-  );
-}
-
 function GraphViewer() {
-  const hasGraph = useViewer((state) => state.mindMapData?.keywords.length !== 0);
-  if (!hasGraph) return <p>no graph available</p>;
+  const mindMapData = useViewer((state) => state.mindMapData);
+  if (mindMapData === null) return <p>no graph available</p>;
   return (
     <>
       <div className={styles.whiteBoardContainer}>
-        <Suspense fallback={<LoadingScreen message={'Loading renderer'} />}>
-          <GraphCanvas />
+        <Suspense fallback={<LoadingScreen message={'렌더러 로드중'} />}>
+          <GraphCanvas mindMapData={mindMapData} />
         </Suspense>
       </div>
     </>

diff --git a/app/globals.css b/app/globals.css
@@ -14,6 +14,7 @@
   --grey-darker: #383b40;
   --foreground-disabled: #c7cfd0;
   --foreground: #ffffff;
+  --warning-color: #c2599a;
   --background: #f4f6f8;
   --background-accent: #e6f5f5;
   --intro-animation: show 0.5s;
@@ -76,10 +77,10 @@ div.loading-container {
 
 @keyframes barAnimation {
   0% {
-    background-color: var(--primary-light);
+    background-color: var(--primary-dark);
   }
   50% {
-    background-color: var(--primary-dark);
+    background-color: var(--highlight);
   }
   100% {
     background-color: var(--primary-light);
@@ -116,9 +117,9 @@ div.loading-bar {
 }
 
 mark {
-  text-decoration: dotted;
+  text-decoration: underline dotted;
   text-decoration-color: red;
-  text-decoration-thickness: 2px;
+  text-decoration-thickness: 3px;
   color: transparent;
   background: transparent;
 }

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -6,6 +6,7 @@ import { Inter } from 'next/font/google';
 import ToastViewer from './components/ToastViewer';
 import OverlayViewer from './components/OverlayViewer';
 import Header from './components/Header';
+import ContextMenuViewer from './components/ContextMenuViewer';
 
 const inter = Inter({ subsets: ['latin'] });
 
@@ -20,6 +21,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
           {children}
         </div>
         <OverlayViewer />
+        <ContextMenuViewer />
       </body>
     </html>
   );

diff --git a/components/DataViewer/AudioViewer/index.tsx b/components/DataViewer/AudioViewer/index.tsx
@@ -67,7 +67,9 @@ function useFocusKeyword(
   useEffect(() => {
     setCallback((keyword, location) => {
       setAllKeyword(false);
-      setKeyWord(keyword, true);
+      setKeyWord(keyword, {
+        enabled: true,
+      });
       setFocusIndex(location[0]);
       setSelectIndex(location[0]);
       if (audioRef.current === null) return;