Merge pull request #28 from team-pofo/feature/#25/projectDetailPage

Feature/#25/project detail page

next.config.mjs

@@ -12,6 +12,12 @@ const nextConfig = {
         hostname: "velog.velcdn.com", // 도메인 설정
         pathname: "/**", // 경로 설정, 모든 경로 허용
       },
+
+      {
+        // 외부 이미지 테스트를 위한 경로 등록(국민대)
+        protocol: "https",
+        hostname: "www.kookmin.ac.kr",
+      },
     ],
   },
   output: "standalone",

package.json

@@ -25,7 +25,6 @@
     "react": "^18",
     "react-dom": "^18",
     "react-icons": "^5.3.0",
-    "react-redux": "^9.1.2",
     "react-spinners": "^0.14.1",
     "tailwind-merge": "^2.5.5",
     "tailwindcss-animate": "^1.0.7",

src/components/Newpost/ImageUpload/ImageUpload.tsx

@@ -98,8 +98,7 @@ export default function UploadBox() {
               openImagePreview(img);
             }}
             alt=""
-            width={196}
-            height={196}
+            layout="fill"
           />
           <Style.CloseButton
             className="close-button"

src/components/Newpost/ImageUpload/styles.ts

@@ -4,8 +4,7 @@ const lightgrey = "#d7e2eb";
 const grey = "#b2c0cc";
 
 export const ImageUploadContainer = styled.div`
-  display: flex;
-  white-space: nowrap;
+  display: fixed;
   gap: 20px;
   justify-content: start;
   align-items: center;
@@ -38,16 +37,8 @@ export const ImagePreview = styled.div`
   width: 200px;
   height: 200px;
   position: relative;
-  display: inline-block;
-
-  border-radius: 5px;
-
   img {
-    object-fit: contain;
-  }
-
-  &:hover .close-button {
-    display: flex;
+    object-fit: cover;
   }
 `;
 

src/components/newpost/MDEditor/mdeditor.tsx → src/components/Newpost/MDEditor/MdeditorWriter.tsx

@@ -8,7 +8,7 @@ import * as Style from "./styles";
 
 const MDEditor = dynamic(() => import("@uiw/react-md-editor"), { ssr: false });
 
-function MdEditor() {
+function MDEditorWriter() {
   const [value, setValue] = useState<string>("**프로젝트 소개를 입력하세요**");
   const [loading, setLoading] = useState<boolean>(false);
   const [isActive, setIsActive] = useState<boolean>(false);
@@ -45,7 +45,7 @@ function MdEditor() {
                 (prev) =>
                   prev.substring(0, cursorPosition) +
                   `\n![image](https://www.kookmin.ac.kr/content/05sub/style0005/images/sub/ui_5_col_image_3.jpg)\n` +
-                  prev.substring(cursorPosition)
+                  prev.substring(cursorPosition),
               );
             }
             setLoading(false);
@@ -77,7 +77,7 @@ function MdEditor() {
             (prev) =>
               prev.substring(0, cursorPosition) +
               `\n![image](https://www.kookmin.ac.kr/content/05sub/style0005/images/sub/ui_5_col_image_2.jpg)\n` +
-              prev.substring(cursorPosition)
+              prev.substring(cursorPosition),
           );
         }
         setLoading(false);
@@ -154,4 +154,4 @@ function MdEditor() {
   );
 }
 
-export default MdEditor;
+export default MDEditorWriter;

src/components/Newpost/Newpost.tsx

@@ -1,6 +1,6 @@
 import * as Style from "./styles";
 import SelectStackType from "../SelectStackType/SelectStackType";
-import NewpostEditor from "./MDEditor/mdeditor";
+import NewpostEditor from "./MDEditor/MdeditorWriter";
 import { useEffect, useRef, useState } from "react";
 import NewpostImages from "./ImageUpload/ImageUpload";
 import { useSelectStacks } from "@/stores/selectStackType/selectStacksStore";

src/components/Project/MDEditor/MdeditorViewer.tsx

@@ -0,0 +1,24 @@
+import "@uiw/react-md-editor/markdown-editor.css";
+import "@uiw/react-markdown-preview/markdown.css";
+import styles from "./styles.module.css";
+import dynamic from "next/dynamic";
+import { testReadme } from "./TestReadme";
+
+const MDEditor = dynamic(() => import("@uiw/react-md-editor"), { ssr: false });
+
+function MDEditorViewer() {
+  return (
+    <div style={{ marginTop: "20px" }}>
+      <MDEditor
+        className={styles.editor}
+        preview={"preview"}
+        hideToolbar={true}
+        visiableDragbar={false}
+        tabSize={2}
+        value={testReadme}
+      />
+    </div>
+  );
+}
+
+export default MDEditorViewer;