diff --git a/app/(docs)/docs/[title]/page.tsx b/app/(docs)/docs/[title]/page.tsx index 67cef92..83c13f7 100644 --- a/app/(docs)/docs/[title]/page.tsx +++ b/app/(docs)/docs/[title]/page.tsx @@ -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 ( - - + + - - + + ); }; diff --git a/app/(docs)/docs/[title]/style.css.ts b/app/(docs)/docs/[title]/style.css.ts index 55257d8..c75e735 100644 --- a/app/(docs)/docs/[title]/style.css.ts +++ b/app/(docs)/docs/[title]/style.css.ts @@ -9,6 +9,7 @@ export const container = style({ export const body = style({ width: "100%", + whiteSpace: "pre-wrap", }); export const contributorsBox = style({ diff --git a/app/edit/[title]/page.tsx b/app/edit/[title]/page.tsx index 3a83d78..e00fce1 100644 --- a/app/edit/[title]/page.tsx +++ b/app/edit/[title]/page.tsx @@ -9,10 +9,10 @@ interface PageProps { } const Page = async ({ params: { title } }: PageProps) => { - const doc = await useDocsByTitleQuery({ title }); + const docs = await useDocsByTitleQuery({ title }); return (
- +
); }; diff --git a/app/layout.tsx b/app/layout.tsx index f94a80a..e3a2622 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -21,7 +21,7 @@ export default function RootLayout({ { +const Editor = ({ contents = "", title = "", docsType = "", mode }: EditorPropsType) => { const [isExampleOpen, setIsExampleOpen] = useState(false); const { autoClosingTag, getDocsTypeByClassify, translateClassify } = useDocs(); const { mutateAsync: create } = useCreateDocsMutation(); @@ -54,12 +56,13 @@ const Editor = ({ contents = "", title = "", mode }: EditorPropsType) => { 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(); if (contents === docs.contents.trim()) return toast(); try { @@ -124,7 +127,9 @@ const Editor = ({ contents = "", title = "", mode }: EditorPropsType) => { contents: docs.contents, }); toast(); - 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) => ( ))} diff --git a/components/Editor/style.css.ts b/components/Editor/style.css.ts index 254d253..0f522fc 100644 --- a/components/Editor/style.css.ts +++ b/components/Editor/style.css.ts @@ -29,6 +29,10 @@ export const titleInput = style({ "::placeholder": { color: theme.boldgray, }, + + ":disabled": { + backgroundColor: "transparent", + }, }); export const previewBox = style({ diff --git a/components/Header/index.tsx b/components/Header/index.tsx index ee0466a..9efc767 100644 --- a/components/Header/index.tsx +++ b/components/Header/index.tsx @@ -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 = [ diff --git a/components/Toastify/index.tsx b/components/Toastify/index.tsx index 0b8bf77..fc38929 100644 --- a/components/Toastify/index.tsx +++ b/components/Toastify/index.tsx @@ -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 ( diff --git a/package.json b/package.json index 95267fc..728eb90 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 621a5f1..b9feeb7 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -95,6 +95,9 @@ dependencies: react-spinners: specifier: ^0.13.8 version: 0.13.8(react-dom@18.2.0)(react@18.2.0) + react-toastify: + specifier: ^10.0.5 + version: 10.0.5(react-dom@18.2.0)(react@18.2.0) devDependencies: '@stylexjs/babel-plugin': @@ -1966,6 +1969,11 @@ packages: /client-only@0.0.1: resolution: {integrity: sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==} + /clsx@2.1.0: + resolution: {integrity: sha512-m3iNNWpd9rl3jvvcBnu70ylMdrXt8Vlq4HYadnU5fwcOtvkSQWPmj7amUcDT2qYI7risszBjI5AUIUox9D16pg==} + engines: {node: '>=6'} + dev: false + /color-convert@1.9.3: resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==} dependencies: @@ -3855,6 +3863,17 @@ packages: react-dom: 18.2.0(react@18.2.0) dev: false + /react-toastify@10.0.5(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-mNKt2jBXJg4O7pSdbNUfDdTsK9FIdikfsIE/yUCxbAEXl4HMyJaivrVFcn3Elvt5xvCQYhUZm+hqTIu1UXM3Pw==} + peerDependencies: + react: '>=18' + react-dom: '>=18' + dependencies: + clsx: 2.1.0 + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + dev: false + /react@18.2.0: resolution: {integrity: sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==} engines: {node: '>=0.10.0'} diff --git a/services/docs/docs.key.ts b/services/docs/docs.key.ts index 195147d..9ed6dcb 100644 --- a/services/docs/docs.key.ts +++ b/services/docs/docs.key.ts @@ -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"], }; diff --git a/services/docs/docs.mutation.tsx b/services/docs/docs.mutation.tsx index 03e7415..d8a8cff 100644 --- a/services/docs/docs.mutation.tsx +++ b/services/docs/docs.mutation.tsx @@ -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({ diff --git a/types/editorPropType.interface.ts b/types/editorPropType.interface.ts index e7db184..603ddd1 100644 --- a/types/editorPropType.interface.ts +++ b/types/editorPropType.interface.ts @@ -1,5 +1,6 @@ export interface EditorPropsType { contents?: string; title?: string; + docsType?: string; mode: "EDIT" | "CREATE"; }