파일 업로드 및 에디터 글자색 수정

client/src/app/globals.css

@@ -14,9 +14,42 @@ html {
 }
 
 .w-md-editor {
-  color: #000;
   background-color: transparent !important;
   --md-editor-box-shadow-color: #d0d7de !important;
+  --color-fg-default: #000000;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --foreground-rgb: 255, 255, 255;
+    --background-start-rgb: 0, 0, 0;
+    --background-end-rgb: 0, 0, 0;
+
+    --primary-glow: radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0));
+    --secondary-glow: linear-gradient(
+      to bottom right,
+      rgba(1, 65, 255, 0),
+      rgba(1, 65, 255, 0),
+      rgba(1, 65, 255, 0.3)
+    );
+
+    --tile-start-rgb: 2, 13, 46;
+    --tile-end-rgb: 2, 5, 19;
+    --tile-border: conic-gradient(
+      #ffffff80,
+      #ffffff40,
+      #ffffff30,
+      #ffffff20,
+      #ffffff10,
+      #ffffff10,
+      #ffffff80
+    );
+
+    --callout-rgb: 20, 20, 20;
+    --callout-border-rgb: 108, 108, 108;
+    --card-rgb: 100, 100, 100;
+    --card-border-rgb: 200, 200, 200;
+  }
 }
 
 .wmde-markdown {
@@ -28,20 +61,16 @@ html {
 }
 
 .wmde-markdown h1 {
-  color: #9e9e9e;
   border-bottom: transparent !important;
 }
 
 .wmde-markdown p {
-  color: #9e9e9e;
   border-bottom: transparent !important;
 }
 .wmde-markdown h2 {
-  color: #9e9e9e;
   border-bottom: transparent !important;
 }
 .wmde-markdown h3 {
-  color: #9e9e9e;
   border-bottom: transparent !important;
 }
 

client/src/app/write/create/[categoryId]/page.tsx

@@ -16,6 +16,7 @@ import '@uiw/react-md-editor/markdown-editor.css';
 import '@uiw/react-markdown-preview/markdown.css';
 import { WriteProps } from '@/util/useWriteProps';
 import { useGetTemplateDetailQuery, useGetTemporaryDetailQuery } from '@/api/write-api';
+import onImagePasted from '@/util/onImagePasted';
 
 const Write = ({ params }: { params: { categoryId: number } }) => {
   const [userTheme] = useUserThemeSSR();
@@ -78,7 +79,17 @@ const Write = ({ params }: { params: { categoryId: number } }) => {
         <TagList editTagArray={(newValue) => setTags(newValue)} tagArray={tags} />
         <TopButton />
       </ToolBar>
-      <MDEditor height="68vh" value={content} onChange={setContent} />
+      <MDEditor
+        onPaste={async (event) => {
+          await onImagePasted(event.clipboardData, setContent);
+        }}
+        onDrop={async (event) => {
+          await onImagePasted(event.dataTransfer, setContent);
+        }}
+        height="68vh"
+        value={content}
+        onChange={setContent}
+      />
       <BottomButton categoryId={params.categoryId} writeProps={writeProps} />
     </Stack>
   );

client/src/util/insertToTextArea.ts

@@ -0,0 +1,23 @@
+const insertToTextArea = (intsertString: string) => {
+  const textarea = document.querySelector('textarea');
+  if (!textarea) {
+    return null;
+  }
+
+  let sentence = textarea.value;
+  const len = sentence.length;
+  const pos = textarea.selectionStart;
+  const end = textarea.selectionEnd;
+
+  const front = sentence.slice(0, pos);
+  const back = sentence.slice(pos, len);
+
+  sentence = front + intsertString + back;
+
+  textarea.value = sentence;
+  textarea.selectionEnd = end + intsertString.length;
+
+  return sentence;
+};
+
+export default insertToTextArea;

client/src/util/onImagePasted.ts

@@ -0,0 +1,32 @@
+import type { SetStateAction } from 'react';
+import insertToTextArea from './insertToTextArea';
+
+const onImagePasted = async (
+  dataTransfer: DataTransfer,
+  setMarkdown: (value: SetStateAction<string | undefined>) => void,
+) => {
+  const files: File[] = [];
+  for (let index = 0; index < dataTransfer.items.length; index += 1) {
+    const file = dataTransfer.files.item(index);
+
+    if (file) {
+      files.push(file);
+    }
+  }
+
+  await Promise.all(
+    files.map(async (file) => {
+      console.log(file);
+      const url =
+        'https://elasticbeanstalk-us-east-1-064991853848.s3.amazonaws.com/thumbnail/8d531220-b1d4-433c-907f-919524e9908a39268032.png';
+      //   const url = await fileUpload(file);
+      const insertedMarkdown = insertToTextArea(`![](${url})`);
+      if (!insertedMarkdown) {
+        return;
+      }
+      setMarkdown(insertedMarkdown);
+    }),
+  );
+};
+
+export default onImagePasted;