feat/#25/대표이미지 추가

team-pofo · Dec 20, 2024 · 2ae5841 · 2ae5841
1 parent fb7e82e
commit 2ae5841
Show file tree

Hide file tree

Showing 7 changed files with 151 additions and 27 deletions.
diff --git a/next.config.mjs b/next.config.mjs
@@ -12,6 +12,12 @@ const nextConfig = {
         hostname: "velog.velcdn.com", // 도메인 설정
         pathname: "/**", // 경로 설정, 모든 경로 허용
       },
+
+      {
+        // 외부 이미지 테스트를 위한 경로 등록(국민대)
+        protocol: "https",
+        hostname: "www.kookmin.ac.kr",
+      },
     ],
   },
   output: "standalone",

diff --git a/src/components/Newpost/ImageUpload/ImageUpload.tsx b/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"

diff --git a/src/components/Newpost/ImageUpload/styles.ts b/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;
   }
 `;
 

diff --git a/src/components/Project/MDEditor/MdeditorViewer.tsx b/src/components/Project/MDEditor/MdeditorViewer.tsx
@@ -8,7 +8,7 @@ const MDEditor = dynamic(() => import("@uiw/react-md-editor"), { ssr: false });
 
 function MDEditorViewer() {
   return (
-    <div>
+    <div style={{ marginTop: "20px" }}>
       <MDEditor
         className={styles.editor}
         preview={"preview"}

diff --git a/src/components/Project/MDEditor/styles.module.css b/src/components/Project/MDEditor/styles.module.css
@@ -1,11 +1,11 @@
 /* 컨테이너 스타일 */
 .editor {
-  min-height: 800px; /* 전체 에디터 높이 지정 */
+  min-height: 700px; /* 전체 에디터 높이 지정 */
 }
 
 /* MDEditor 내부 스타일 */
 .editor :global(.w-md-editor-content) {
-  min-height: 800px; /* 내용 영역 높이 설정 */
+  min-height: 700px; /* 내용 영역 높이 설정 */
   font-size: 16px; /* 글꼴 크기 설정 */
 }
 

diff --git a/src/components/Project/Project.tsx b/src/components/Project/Project.tsx
@@ -1,23 +1,109 @@
 import { useRouter } from "next/router";
 import * as Styles from "./styles";
 import MDEditorViewer from "./MDEditor/MdeditorViewer";
+import Image from "next/image";
 import Link from "next/link";
+import { useState } from "react";
 
-export default function ProjectComponents() {
+const imgList: string[] = [
+  `https://www.kookmin.ac.kr/content/05sub/style0005/images/sub/ui_5_col_image_1.jpg`,
+  `https://www.kookmin.ac.kr/content/05sub/style0005/images/sub/ui_5_col_image_2.jpg`,
+  `https://www.kookmin.ac.kr/content/05sub/style0005/images/sub/ui_5_col_image_3.jpg`,
+];
+
+const linkList: string[] = [
+  `https://github.com/team-pofo/frontend`,
+  `https://google.com`,
+];
+
+function ProjectTittle() {
   const router = useRouter();
   const { id } = router.query;
+  return (
+    <Styles.ProjectDetailTitle>외국민 (id:{id})</Styles.ProjectDetailTitle>
+  );
+}
+
+function ProjectIntroduction() {
+  return (
+    <div>
+      <Styles.ProjectDetailIntroduction>
+        외국인 유학생 앱입니다
+      </Styles.ProjectDetailIntroduction>
+    </div>
+  );
+}
+
+function ProjectRepresentativeImages() {
+  const [showModal, setShowModal] = useState(false);
+  const [selectedImage, setSelectedImage] = useState<string | null>(null);
+
+  const openImagePreview = (src: string) => {
+    setSelectedImage(src);
+    setShowModal(true);
+  };
 
+  const closeImagePreview = () => {
+    setSelectedImage(null);
+    setShowModal(false);
+  };
+
+  const ImageWide = ({
+    src,
+    onClose,
+  }: {
+    src: string;
+    onClose: () => void;
+  }) => (
+    <Styles.ModalOverlay onClick={onClose}>
+      <Styles.ModalImage src={src} alt="" />
+    </Styles.ModalOverlay>
+  );
+
+  return (
+    <Styles.ProjectDetailRepresentativeImageContainer>
+      {imgList.map((img, index) => (
+        <Styles.ImagePreview key={index}>
+          <Image
+            src={img}
+            onClick={() => {
+              openImagePreview(img);
+            }}
+            alt=""
+            layout="fill"
+          />
+          {showModal && selectedImage && (
+            <ImageWide src={selectedImage} onClose={closeImagePreview} />
+          )}
+        </Styles.ImagePreview>
+      ))}
+    </Styles.ProjectDetailRepresentativeImageContainer>
+  );
+}
+
+function ProjectLinks() {
+  return (
+    <div>
+      {linkList.map((link, index) => (
+        <Link key={index} href={link} legacyBehavior>
+          <Styles.ProjectDetailLink target="_blank">
+            링크 {index + 1}:{" "}
+            <span style={{ textDecoration: "underline" }}>{link}</span>
+            <br />
+          </Styles.ProjectDetailLink>
+        </Link>
+      ))}
+    </div>
+  );
+}
+
+export default function ProjectComponents() {
   return (
     <Styles.ProjectDetailContainer>
-      <Styles.ProjectDetailTitle>프로젝트 제목: {id}</Styles.ProjectDetailTitle>
-      <Styles.ProjectDetailText>
-        한 줄 소개글 우리 프로젝트 좋아요 많관부
-      </Styles.ProjectDetailText>
-      <Link href="https://github.com/team-pofo/frontend" legacyBehavior>
-        <Styles.ProjectDetailLink target="_blank">
-          https://github.com/team-pofo/frontend
-        </Styles.ProjectDetailLink>
-      </Link>
+      <ProjectTittle />
+      <ProjectIntroduction />
+      <ProjectRepresentativeImages />
+      <ProjectLinks />
       <MDEditorViewer />
     </Styles.ProjectDetailContainer>
   );

diff --git a/src/components/Project/styles.ts b/src/components/Project/styles.ts
@@ -4,7 +4,6 @@ export const ProjectDetailContainer = styled.div`
   max-width: 1200px;
   align-items: center;
   padding: 20px 20px 20px 20px;
-  margin: auto;
 `;
 
 export const ProjectDetailTitle = styled.p`
@@ -13,11 +12,54 @@ export const ProjectDetailTitle = styled.p`
   font-weight: 700;
 `;
 
+export const ProjectDetailIntroduction = styled.p`
+  margin: 0px 0px 10px;
+  font-size: 25px;
+  font-weight: 500;
+`;
+
 export const ProjectDetailText = styled.p`
   margin: 0px 0px 10px;
   font-size: 20px;
 `;
 
+export const ProjectDetailRepresentativeImageContainer = styled.div`
+  display: fixed;
+  gap: 20px;
+  justify-content: start;
+  align-items: center;
+  overflow-x: auto;
+`;
+
+export const ImagePreview = styled.div`
+  width: 200px;
+  height: 200px;
+  position: relative;
+  margin: 0px 0px 10px;
+
+  img {
+    object-fit: cover;
+  }
+`;
+
+export const ModalOverlay = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+`;
+
+export const ModalImage = styled.img`
+  max-width: 90%;
+  max-height: 90%;
+`;
+
 export const ProjectDetailLink = styled.a`
   padding: 0 0 10px;
   font-size: 20px;