Team-INSERT · Ubinquitous · Mar 17, 2024 · Mar 17, 2024
@@ -1,7 +1,8 @@
 import Container from "@/components/Container";
 import React from "react";
-import { HydrationBoundary } from "@tanstack/react-query";
+import { HydrationBoundary, dehydrate } from "@tanstack/react-query";
 import { useDocsByTitleQuery } from "@/services/docs/docs.query";
+import getQueryClient from "@/app/getQueryClient";
 import Docs from "./Docs";
 
 interface PageProps {
@@ -11,14 +12,15 @@ interface PageProps {
 }
 
 const Page = async ({ params: { title } }: PageProps) => {
+  const queryClient = getQueryClient();
   const docs = await useDocsByTitleQuery({ title });
 
   return (
-    <Container {...docs}>
-      <HydrationBoundary>
+    <HydrationBoundary state={dehydrate(queryClient)}>
+      <Container {...docs}>
         <Docs docs={docs} />
-      </HydrationBoundary>
-    </Container>
+      </Container>
+    </HydrationBoundary>
   );
 };
 

@@ -9,6 +9,7 @@ export const container = style({
 
 export const body = style({
   width: "100%",
+  whiteSpace: "pre-wrap",
 });
 
 export const contributorsBox = style({

@@ -9,10 +9,10 @@ interface PageProps {
 }
 
 const Page = async ({ params: { title } }: PageProps) => {
-  const doc = await useDocsByTitleQuery({ title });
+  const docs = await useDocsByTitleQuery({ title });
   return (
     <div>
-      <Editor contents={doc.contents} title={doc.title} mode="EDIT" />
+      <Editor {...docs} mode="EDIT" />
     </div>
   );
 };

@@ -21,7 +21,7 @@ export default function RootLayout({
       <body>
         <Providers>
           <ToastContainer
-            autoClose={5000}
+            autoClose={3000}
             hideProgressBar
             closeOnClick
             pauseOnHover

@@ -3,15 +3,16 @@ import { style } from "@vanilla-extract/css";
 
 export const container = style({
   width: "100%",
-  padding: "20px 0",
 });
 
 export const title = style({
   textAlign: "center",
   lineHeight: "45px",
 });
 
-export const details = style({});
+export const details = style({
+  paddingBottom: "50px",
+});
 
 export const summary = style({
   width: "100%",

@@ -7,8 +7,8 @@ import useUser from "@/hooks/useUser";
 import { dateText } from "@/utils";
 import { useDeleteDocsMutation } from "@/services/docs/docs.mutation";
 import { useRouter } from "next/navigation";
-import * as styles from "./style.css";
 import { toast } from "react-toastify";
+import * as styles from "./style.css";
 import Toastify from "../Toastify";
 
 interface ContainerProps extends PropsWithChildren {

@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useCallback, useEffect, useState } from "react";
+import React, { useCallback, useState } from "react";
 import { decodeContent, getYear } from "@/utils";
 import { ArrowIcon } from "@/assets";
 import { useDocs } from "@/hooks/useDocs";
@@ -10,13 +10,15 @@ import {
   useUpdateDocsMutation,
 } from "@/services/docs/docs.mutation";
 import { useRouter } from "next/navigation";
-import * as styles from "./style.css";
-import DragDropUpload from "../DragDropUpload";
-import { EditorPropsType } from "@/types/editorPropType.interface";
 import { toast } from "react-toastify";
-import Toastify from "../Toastify";
+import { EditorPropsType } from "@/types/editorPropType.interface";
 import useModal from "@/hooks/useModal";
+import { useQueryClient } from "@tanstack/react-query";
+import getQueryClient from "@/app/getQueryClient";
+import * as styles from "./style.css";
+import DragDropUpload from "../DragDropUpload";
 import Confirm from "../(modal)/Confirm";
+import Toastify from "../Toastify";
 
 const wikiExampleList = [
   [
@@ -46,20 +48,21 @@ const wikiExampleList = [
   ],
 ];
 
-const Editor = ({ contents = "", title = "", mode }: EditorPropsType) => {
+const Editor = ({ contents = "", title = "", docsType = "", mode }: EditorPropsType) => {
   const [isExampleOpen, setIsExampleOpen] = useState(false);
   const { autoClosingTag, getDocsTypeByClassify, translateClassify } = useDocs();
   const { mutateAsync: create } = useCreateDocsMutation();
   const { mutateAsync: upload } = useUploadImageMutation();
   const { mutateAsync: update } = useUpdateDocsMutation();
   const router = useRouter();
   const [cursorPosition, setCursorPosition] = useState(0);
+  const queryClient = useQueryClient(getQueryClient());
   const { openModal } = useModal();
   const [docs, setDocs] = useState({
     enroll: 0,
     title,
     contents,
-    docsType: "",
+    docsType,
   });
 
   const handleOpenComfirm = () => {
@@ -83,10 +86,9 @@ const Editor = ({ contents = "", title = "", mode }: EditorPropsType) => {
     if (!file) return;
     const { url } = await upload(file);
     setDocs((prev) => {
-      const { contents } = prev;
-      const first = contents.substring(0, cursorPosition);
+      const first = prev.contents.substring(0, cursorPosition);
       const middle = `<사진 {200px}>${url}</사진>`;
-      const last = contents.substring(cursorPosition, contents.length);
+      const last = prev.contents.substring(cursorPosition, prev.contents.length);
       return {
         ...prev,
         contents: `${first}${middle}${last}`,
@@ -116,6 +118,7 @@ const Editor = ({ contents = "", title = "", mode }: EditorPropsType) => {
   };
 
   const handleEditDocsClick = async () => {
+    if (!docs.contents.trim()) return toast(<Toastify content="내용이 없습니다!" />);
     if (contents === docs.contents.trim())
       return toast(<Toastify content="변경된 사항이 없습니다!" />);
     try {
@@ -124,7 +127,9 @@ const Editor = ({ contents = "", title = "", mode }: EditorPropsType) => {
         contents: docs.contents,
       });
       toast(<Toastify content="문서가 수정되었습니다!" />);
-      router.push(`/docs/${docs.title}`);
+      // await queryClient.refetchQueries();
+      // router.push(`/docs/${docs.title}`);
+      window.location.href = `/docs/${docs.title}`;
     } catch (err) {
       console.log(err);
     }
@@ -186,13 +191,13 @@ const Editor = ({ contents = "", title = "", mode }: EditorPropsType) => {
                 "전공동아리",
                 "사설동아리",
                 "틀",
-              ].map((docsType) => (
+              ].map((type) => (
                 <button
-                  onClick={() => setDocs((prev) => ({ ...prev, docsType }))}
-                  key={docsType}
-                  className={styles.docsType[String(docsType === docs.docsType)]}
+                  onClick={() => setDocs((prev) => ({ ...prev, docsType: type }))}
+                  key={type}
+                  className={styles.docsType[String(type === docs.docsType)]}
                 >
-                  {docsType}
+                  {type}
                 </button>
               ))}
             </div>

@@ -29,6 +29,10 @@ export const titleInput = style({
   "::placeholder": {
     color: theme.boldgray,
   },
+
+  ":disabled": {
+    backgroundColor: "transparent",
+  },
 });
 
 export const previewBox = style({

@@ -14,8 +14,8 @@ import {
 import { useRouter } from "next/navigation";
 import { Storage } from "@/storage";
 import { TOKEN } from "@/constants/token.constant";
-import * as styles from "./style.css";
 import { toast } from "react-toastify";
+import * as styles from "./style.css";
 import Toastify from "../Toastify";
 
 const navigationList = [

@@ -1,5 +1,5 @@
-import * as styles from "./style.css";
 import Image from "next/image";
+import * as styles from "./style.css";
 
 const Tostify = ({ content }: { content: string }) => {
   return (

@@ -40,7 +40,8 @@
     "prettier": "^3.2.5",
     "react": "^18",
     "react-dom": "^18",
-    "react-spinners": "^0.13.8"
+    "react-spinners": "^0.13.8",
+    "react-toastify": "^10.0.5"
   },
   "devDependencies": {
     "@stylexjs/babel-plugin": "^0.5.1",

@@ -1,6 +1,6 @@
 export const DOCS = {
-  LIST: (classify: string) => ["docsList", classify],
-  TITLE: (title: string) => ["docsByTitle", title],
-  KEYWORD: (keyword: string) => ["docsList", keyword],
+  LIST: (classify: string) => ["docsList", { classify }],
+  TITLE: (title: string) => ["docsByTitle", { title }],
+  KEYWORD: (keyword: string) => ["docsList", { keyword }],
   LASTMODIFY: ["docsListModified"],
 };
@@ -1,12 +1,12 @@
 import { useMutation } from "@tanstack/react-query";
+import { toast } from "react-toastify";
+import Toastify from "@/components/Toastify";
 import {
   requestCreateDocs,
   requestDeleteDocs,
   requestUpdateDocs,
   requestUploadImage,
 } from "./docs.api";
-import { toast } from "react-toastify";
-import Toastify from "@/components/Toastify";
 
 export const useCreateDocsMutation = () => {
   return useMutation({

@@ -1,5 +1,6 @@
 export interface EditorPropsType {
   contents?: string;
   title?: string;
+  docsType?: string;
   mode: "EDIT" | "CREATE";
 }