에디터 및 상수 리팩토링 / codeSyntaxHighlighter 코드 복사 구현 및 스타일 수정

src/app/coding-meetings/[token]/page.tsx

@@ -4,9 +4,9 @@ import { AxiosError } from "axios"
 import { APIResponse } from "@/interfaces/dto/api-response"
 import { notFound } from "next/navigation"
 import { getCodingMeetingDetail } from "@/service/coding-meetings"
-import DetailHeader from "@/page/coding-meetings/detail/DetailHeader"
 import ScrollTopButton from "@/components/shared/button/ScrollTopButton"
 import { deSerializeCmToken } from "@/page/coding-meetings/util/cm-token"
+import LinkToListPage from "@/components/LinkToListPage"
 
 export interface CodingMeetingsDetailPageProps {
   params: {
@@ -85,7 +85,9 @@ export default async function CodingMeetingsDetailPage({
     return (
       <div className="flex w-full px-6 pt-5 pb-8 tablet:px-12 tablet:pb-12 lg:mt-[72px] box-border">
         <div className="flex-1 max-w-full break-all">
-          <DetailHeader />
+          <div className="hidden pc:block">
+            <LinkToListPage to="coding-meetings" />
+          </div>
           <CodingMeetingsDetail detail={detailResponse.data.data!} />
         </div>
         <aside className="bg-transparent min-h-screen hidden lg:block lg:w-32" />

src/app/profile/[id]/page.tsx

@@ -1,7 +1,7 @@
 import AuthGuardModal from "@/components/shared/auth-modal"
 import { UserPayload } from "@/interfaces/dto/member/get-member.dto"
 import { getMemeber } from "@/service/member"
-import { isLogined } from "@/util/auth"
+import { getServerSession } from "@/util/auth"
 import { extractTextFromMarkdown } from "@/util/markdown"
 import { Metadata } from "next"
 import dynamic from "next/dynamic"
@@ -107,13 +107,14 @@ const UserProfile = dynamic(() => import("@/page/user-profile/UserProfile"), {
 })
 
 export default function UserProfilePage({ params }: UserProfilePageProps) {
+  const { user } = getServerSession()
   const id = Number(params.id)
 
   if (!isValidPageProps({ params })) {
     notFound()
   }
 
-  if (!isLogined()) {
+  if (!user) {
     return <AuthGuardModal page="userProfile" />
   }
 

src/app/signup/page.tsx

@@ -1,7 +1,7 @@
 import AuthGuardModal from "@/components/shared/auth-modal"
 import { layoutMeta } from "@/constants/layoutMeta"
 import Signup from "@/page/signup/Signup"
-import { isLogined } from "@/util/auth"
+import { getServerSession } from "@/util/auth"
 import { Metadata } from "next"
 
 export const revalidate = 0
@@ -32,7 +32,9 @@ export const metadata: Metadata = {
 }
 
 export default async function SignupPage() {
-  if (isLogined()) {
+  const { user } = getServerSession()
+
+  if (user) {
     return <AuthGuardModal page="signup" />
   }
 

src/components/shared/animation/CheckSuccess.tsx

@@ -7,13 +7,15 @@ import { CSSProperties, useLayoutEffect } from "react"
 interface CheckSuccessProps {
   style?: CSSProperties
   className?: string
+  loop?: boolean
 }
 
-function CheckSuccess({ style, className }: CheckSuccessProps) {
+function CheckSuccess({ style, className, loop = false }: CheckSuccessProps) {
   const { setSpeed, View } = useLottie({
     animationData: checkSuccess,
     style: { ...style },
     className,
+    loop,
   })
 
   useLayoutEffect(() => {

src/components/shared/button/Button.tsx

@@ -30,7 +30,7 @@ function Button({
         ? "text-secondary hover:text-white hover:bg-secondary"
         : "text-white bg-secondary hover:bg-[#464e57]"),
     buttonTheme === "third" &&
-      "text-black border-[1px] border-primary hover:bg-primary",
+      "text-black border-[1px] border-primary hover:bg-light-green hover:border-light-green hover:text-secondary",
     ghost && "bg-transparent",
   ])
 
@@ -42,7 +42,7 @@ function Button({
   ])
 
   return (
-    <button type={type ?? "button"} className={classNames} {...props}>
+    <button type={type ?? "button"} className={classNames + ""} {...props}>
       {children}
     </button>
   )

src/page/askQuestion/components/editor/ContentEditor.tsx → src/components/shared/toast-ui-editor/editor/ContentEditor.tsx

@@ -1,33 +1,41 @@
 "use client"
 
-import "prismjs/themes/prism.css"
+import "prismjs/themes/prism-tomorrow.css"
+import "tui-color-picker/dist/tui-color-picker.css"
+import "@toast-ui/editor-plugin-color-syntax/dist/toastui-editor-plugin-color-syntax.css"
+import "@toast-ui/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight.css"
 import Prism from "prismjs"
 import { ToastUiEditor } from "@/components/shared/toast-ui-editor"
 import { Editor as ToastEditor, EditorProps } from "@toast-ui/react-editor"
+import colorSyntax from "@toast-ui/editor-plugin-color-syntax"
 import codeSyntaxHighlight from "@toast-ui/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight-all.js"
-import "@toast-ui/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight.css"
 import { ForwardedRef, forwardRef, useEffect, useRef, useState } from "react"
 import Button from "@/components/shared/button/Button"
 import { twMerge } from "tailwind-merge"
-import { contentEditorToolbarItemsWithImage } from "@/constants/editor"
+import {
+  contentEditorToolbarItemsWithImage,
+  contentEditorToolbarItemsWithoutImage,
+} from "@/constants/editor"
 import { throttle } from "lodash-es"
 import type { EditorRefObj } from "@/components/shared/toast-ui-editor/editor/EditorWrapper"
 
 type MdTabMode = "write" | "preview"
 
-type ContentEditorProps = Partial<EditorProps>
+type ContentEditorProps = Partial<
+  Omit<EditorProps, "toolbarItems" | "plugins">
+> & {
+  includeImageToolbarItem?: boolean
+  includeColorSyntaxPlugins?: boolean
+}
 
-/*
-  [TODO] 
-  기존 여러 에디터를 ContentEditor 
-  하나로 통합해서 사용하는 것으로 수정
-*/
 const ContentEditor = (
   {
     minHeight = "300px",
     onLoad,
     hooks,
     placeholder,
+    includeImageToolbarItem = true,
+    includeColorSyntaxPlugins,
     ...props
   }: ContentEditorProps,
   ref: ForwardedRef<ToastEditor>,
@@ -38,12 +46,18 @@ const ContentEditor = (
   const [mdTabVisible, setMdTabVisible] = useState(true)
   const [mode, setMode] = useState<MdTabMode>("write")
 
+  const toolbarItems = includeImageToolbarItem
+    ? contentEditorToolbarItemsWithImage
+    : contentEditorToolbarItemsWithoutImage
+
+  const plugins: EditorProps["plugins"] = includeColorSyntaxPlugins
+    ? [colorSyntax, [codeSyntaxHighlight as any, { highlighter: Prism }]]
+    : [[codeSyntaxHighlight as any, { highlighter: Prism }]]
+
   const classNames = (active: boolean) =>
     twMerge([
-      "font-normal text-xs rounded-[4px] border-colorsGray px-4 py-2 w-[84px] rounded-br-none rounded-bl-none border-l-0 first:border-l-[1px]",
-      active
-        ? "text-[#555] bg-white border-b-[#f7f9fc] border-t border-l border-r"
-        : "text-[#969aa5] bg-[#eaedf1]",
+      "font-normal text-xs rounded-[4px] border-colorsGray px-4 py-2 w-[84px] rounded-br-none rounded-bl-none border-l-0 first:border-l-[1px] border-t border-l border-r border-b-[#f7f9fc]",
+      active ? "text-[#555] bg-white" : "text-[#969aa5] bg-[#eaedf1]",
     ])
 
   const handleMdTab = () => {
@@ -100,10 +114,10 @@ const ContentEditor = (
     <div
       ref={wrapperRef}
       className={
-        "relative z-[1] [&_.toastui-editor-popup]:toastify:!ml-0 [&_.toastui-editor-defaultUI-toolbar]:!flex-wrap [&_.toastui-editor-dropdown-toolbar]:!max-w-full [&_.toastui-editor-dropdown-toolbar]:!h-max [&_.toastui-editor-dropdown-toolbar]:flex-wrap [&_.toastui-editor-toolbar-group]:flex-wrap [&_.toastui-editor-main-container]:break-all"
+        "relative z-[1] [&_.toastui-editor-popup]:toastify:!ml-0 [&_.toastui-editor-defaultUI-toolbar]:!flex-wrap [&_.toastui-editor-dropdown-toolbar]:!max-w-full [&_.toastui-editor-dropdown-toolbar]:!h-max [&_.toastui-editor-dropdown-toolbar]:flex-wrap [&_.toastui-editor-toolbar-group]:flex-wrap [&_.toastui-editor-main-container]:break-all [&_.toastui-editor-contents_pre]:rounded-sm [&_.toastui-editor-contents_pre]:!bg-[#002451] [&_.toastui-editor-contents_pre_code]:text-[#ccc] [&_.toastui-editor-contents_pre_code_.token.operator]:bg-transparent"
       }
     >
-      <div className="flex w-full -mt-2 box-border pl-4 relative top-2 z-[1] editor:hidden">
+      <div className="flex w-full -mt-2 box-border pt-3 pl-4 relative top-2 z-[1] bg-[#f7f9fc] border-t border-l border-r border-[#dadde6] rounded-tl rounded-tr editor:hidden">
         <Button
           data-md-tab-mode="write"
           className={classNames(mode === "write")}
@@ -122,7 +136,7 @@ const ContentEditor = (
       <ToastUiEditor
         ref={ref}
         mdTabVisible={mdTabVisible}
-        toolbarItems={contentEditorToolbarItemsWithImage}
+        toolbarItems={toolbarItems}
         placeholder={placeholder}
         initialEditType="markdown"
         previewStyle="tab"
@@ -132,7 +146,7 @@ const ContentEditor = (
         minHeight={minHeight}
         onLoad={handleLoad}
         hooks={hooks}
-        plugins={[[codeSyntaxHighlight as any, { highlighter: Prism }]]}
+        plugins={plugins}
         {...props}
       />
     </div>