feat: 취소 시 내용 초기화

Author: DongEun02

app/(with-sidebar)/write/page.tsx

@@ -1,11 +1,9 @@
 import Editor from '@/components/write/Editor';
-import SaveButton from '@/components/write/SaveButton';
 
 const Page = () => {
   return (
     <div className="bg-background flex min-h-screen flex-col gap-8">
       <Editor />
-      <SaveButton />
     </div>
   );
 };

components/write/Editor.tsx

@@ -3,6 +3,7 @@
 import dynamic from 'next/dynamic';
 import { useState } from 'react';
 import type { MDEditorProps } from '@uiw/react-md-editor';
+import SaveButton from '@/components/write/SaveButton';
 
 const MDEditor = dynamic<MDEditorProps>(() => import('@uiw/react-md-editor'), {
   ssr: false,
@@ -11,10 +12,16 @@ const MDEditor = dynamic<MDEditorProps>(() => import('@uiw/react-md-editor'), {
 const Editor = () => {
   const [value, setValue] = useState<string>('');
 
+  const onClickCancel = () => {
+    setValue('');
+  };
+
+  const onClickSave = () => {};
+
   return (
     <div
       data-color-mode="light"
-      className="mx-auto mt-8 w-full max-w-5xl rounded-2xl px-4 [&_.w-md-editor]:border-0! [&_.w-md-editor]:bg-transparent! [&_.w-md-editor]:shadow-none [&_.w-md-editor-text]:bg-transparent! [&_.w-md-editor-toolbar]:bg-transparent! [&_.wmde-markdown]:bg-transparent!"
+      className="mx-auto mt-8 flex w-full max-w-5xl flex-col gap-8 rounded-2xl px-4 [&_.w-md-editor]:border-0! [&_.w-md-editor]:bg-transparent! [&_.w-md-editor]:shadow-none [&_.w-md-editor-text]:bg-transparent! [&_.w-md-editor-toolbar]:bg-transparent! [&_.wmde-markdown]:bg-transparent!"
     >
       <MDEditor
         value={value}
@@ -30,6 +37,7 @@ const Editor = () => {
           return cmd;
         }}
       />
+      <SaveButton onClickCancel={onClickCancel} onClickSave={onClickSave} />
     </div>
   );
 };

components/write/SaveButton.tsx

@@ -1,14 +1,21 @@
-const SaveButton = () => {
+type ButtonsProps = {
+  onClickCancel: () => void;
+  onClickSave: () => void;
+};
+
+const SaveButton = ({ onClickCancel, onClickSave }: ButtonsProps) => {
   return (
     <div className="mx-auto flex h-10 w-3xs gap-6">
       <button
+        onClick={onClickSave}
         type="button"
         className="bg-primary flex-1 rounded-xl py-4 text-center text-base leading-0 font-semibold text-white shadow-sm transition hover:bg-violet-500 active:bg-violet-700 disabled:cursor-not-allowed disabled:opacity-60"
       >
         저장
       </button>
 
       <button
+        onClick={onClickCancel}
         type="button"
         className="flex-1 rounded-xl border border-slate-300 bg-none py-4 text-center text-base leading-0 font-semibold text-slate-700 transition hover:bg-slate-200 active:bg-slate-300 disabled:cursor-not-allowed disabled:opacity-60"
       >