-
로그인
-
회원가입
+
+ {isLoggedIn ? (
+
+ 로그아웃
+
+
+ ) : (
+ <>
+
로그인
+
+ 회원가입
+
+
+ )}
{isMenuOpen && (
<>
diff --git a/src/components/Navigation/styles.ts b/src/components/Navigation/styles.ts
index a617847..dae5d72 100644
--- a/src/components/Navigation/styles.ts
+++ b/src/components/Navigation/styles.ts
@@ -11,6 +11,7 @@ export const NavContainer = styled.nav`
position: sticky;
top: 0;
width: 100%;
+ height: 80px;
z-index: 1000;
justify-content: space-between;
diff --git a/src/components/Newpost/ImageUpload/ImageUpload.tsx b/src/components/Newpost/ImageUpload/ImageUpload.tsx
index 73769e5..2016c99 100644
--- a/src/components/Newpost/ImageUpload/ImageUpload.tsx
+++ b/src/components/Newpost/ImageUpload/ImageUpload.tsx
@@ -11,8 +11,8 @@ export default function UploadBox() {
const [showModal, setShowModal] = useState(false);
const [selectedImage, setSelectedImage] = useState
(null);
- const handleDragStart = () => setActive(true);
- const handleDragEnd = (event: React.DragEvent) => {
+ const handleDragEnter = () => setActive(true);
+ const handleDragLeave = (event: React.DragEvent) => {
// 드래그가 완전히 벗어난 경우에만 setActive(false)를 호출
if (!event.currentTarget.contains(event.relatedTarget as Node)) {
setActive(false);
@@ -113,9 +113,9 @@ export default function UploadBox() {
))}
diff --git a/src/components/Newpost/MDEditor/styles.ts b/src/components/Newpost/MDEditor/styles.ts
new file mode 100644
index 0000000..08409ad
--- /dev/null
+++ b/src/components/Newpost/MDEditor/styles.ts
@@ -0,0 +1,11 @@
+import styled from "@emotion/styled";
+
+interface DragProps {
+ isActive: boolean;
+}
+
+export const ImageDragDiv = styled.div`
+ align-items: center;
+
+ border-radius: 5px;
+`;
diff --git a/src/components/Newpost/Mdeditor.tsx b/src/components/Newpost/Mdeditor.tsx
deleted file mode 100644
index de5167c..0000000
--- a/src/components/Newpost/Mdeditor.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import "@uiw/react-md-editor/markdown-editor.css";
-import "@uiw/react-markdown-preview/markdown.css";
-import dynamic from "next/dynamic";
-import { useState } from "react";
-
-const MDEditor = dynamic(() => import("@uiw/react-md-editor"), { ssr: false });
-
-function MdEditor() {
- const [value, setValue] = useState("**프로젝트 소개를 입력하세요**");
-
- const handleChange = (val?: string) => {
- setValue(val ?? "");
- };
-
- return (
-
-
-
- );
-}
-
-export default MdEditor;
diff --git a/src/components/Newpost/Newpost.tsx b/src/components/Newpost/Newpost.tsx
index 8a35983..cb8fe01 100644
--- a/src/components/Newpost/Newpost.tsx
+++ b/src/components/Newpost/Newpost.tsx
@@ -1,6 +1,6 @@
import * as Style from "./styles";
import SelectStackType from "../SelectStackType/SelectStackType";
-import NewpostEditor from "./Mdeditor";
+import NewpostEditor from "./MDEditor/mdeditor";
import { useEffect, useRef, useState } from "react";
import NewpostImages from "./ImageUpload/ImageUpload";
import { useAppDispatch } from "@/stores";
diff --git a/src/components/Newpost/styles.ts b/src/components/Newpost/styles.ts
index 0396013..e247a55 100644
--- a/src/components/Newpost/styles.ts
+++ b/src/components/Newpost/styles.ts
@@ -5,7 +5,7 @@ const lightgrey = "#d7e2eb";
const grey = "#b2c0cc";
export const NewpostContainer = styled.div`
- max-width: 800px;
+ max-width: 1200px;
min-height: 100svh;
align-items: center;
padding: 20px 20px 20px 20px;
diff --git a/src/components/newpost/MDEditor/mdeditor.tsx b/src/components/newpost/MDEditor/mdeditor.tsx
new file mode 100644
index 0000000..c6e308d
--- /dev/null
+++ b/src/components/newpost/MDEditor/mdeditor.tsx
@@ -0,0 +1,157 @@
+import "@uiw/react-md-editor/markdown-editor.css";
+import "@uiw/react-markdown-preview/markdown.css";
+import Spinners from "@/components/Common/Spinners";
+import { uploadImage } from "@/pages/api/NewPost/mdeditor-image-upload";
+import dynamic from "next/dynamic";
+import { useState } from "react";
+import * as Style from "./styles";
+
+const MDEditor = dynamic(() => import("@uiw/react-md-editor"), { ssr: false });
+
+function MdEditor() {
+ const [value, setValue] = useState("**프로젝트 소개를 입력하세요**");
+ const [loading, setLoading] = useState(false);
+ const [isActive, setIsActive] = useState(false);
+ const [cursorPosition, setCursorPosition] = useState(0);
+
+ // 이미지 드래그 앤 드롭 관련 처리
+ const handleDragEnter = () => setIsActive(true);
+ const handleDragLeave = (event: React.DragEvent) => {
+ // 드래그가 완전히 벗어난 경우에만 setActive(false)를 호출
+ if (!event.currentTarget.contains(event.relatedTarget as Node)) {
+ setIsActive(false);
+ }
+ };
+ const handleDragOver = (event: React.DragEvent) => {
+ event.preventDefault();
+ };
+
+ const handleDrop = (event: React.DragEvent) => {
+ event.preventDefault();
+ event.stopPropagation();
+ setIsActive(false);
+
+ const file = event.dataTransfer.files[0];
+ if (file) {
+ if (file.type.startsWith("image/")) {
+ const fileReader = new FileReader();
+ fileReader.readAsDataURL(file);
+ fileReader.onload = async (e) => {
+ if (typeof e.target?.result === "string") {
+ setLoading(true);
+ const imageUrl = await uploadImage(file);
+ if (imageUrl) {
+ setValue(
+ (prev) =>
+ prev.substring(0, cursorPosition) +
+ `\n\n` +
+ prev.substring(cursorPosition)
+ );
+ }
+ setLoading(false);
+ }
+ };
+ } else {
+ alert("이미지 파일만 업로드할 수 있습니다.");
+ }
+ }
+ };
+
+ // 이미지 붙여넣기 처리
+ const handlePaste = async (event: React.ClipboardEvent) => {
+ const clipboardData = event.clipboardData;
+ if (!clipboardData) {
+ return;
+ }
+
+ const clipboardItems = clipboardData.items;
+
+ if (clipboardItems[0].type.startsWith("image/")) {
+ const file = clipboardItems[0].getAsFile();
+
+ if (file) {
+ setLoading(true);
+ const imageUrl = await uploadImage(file);
+ if (imageUrl) {
+ setValue(
+ (prev) =>
+ prev.substring(0, cursorPosition) +
+ `\n\n` +
+ prev.substring(cursorPosition)
+ );
+ }
+ setLoading(false);
+ }
+ }
+ };
+
+ // 입력 처리
+ const handleChange = (text?: string) => {
+ const updatedText = text || "";
+ setValue(updatedText);
+ };
+
+ const handleFocus = (event: React.FocusEvent) => {
+ const position = event.target.selectionStart;
+ setCursorPosition(position);
+ };
+
+ const handleSelect = (event: React.SyntheticEvent) => {
+ const position = event.currentTarget.selectionStart;
+ setCursorPosition(position);
+ };
+
+ const handleMouseUp = (event: React.MouseEvent) => {
+ const position = event.currentTarget.selectionStart;
+ setCursorPosition(position);
+ };
+
+ const handleKeyUp = (event: React.KeyboardEvent) => {
+ const position = event.currentTarget.selectionStart;
+ setCursorPosition(position);
+ };
+
+ return (
+
+
+
+ {loading && (
+
+
+
+ )}
+
+