프로젝트 상세내용 모달 기능을 추가해봤습니다.

README.ko.md

@@ -286,6 +286,8 @@ $ cd ddongule-simple-portfolio
         "imgUrl": "/assets/images/exmaple.png",
         "githubUrl": "https://github.com/ddongule",
         "projectUrl": "www.ddongule.com",
+        "useDetailMd": false, 
+        "detailMdName": "",
         "title": "ddongule-simple-portfolio",
         "term": "21.02.02 v1.3.0",
         "description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia ..",
@@ -297,6 +299,20 @@ $ cd ddongule-simple-portfolio
 
 ```
 
+- 프로젝트 아이템 클릭에 대해 `projectUrl` 링크로 이동할지 모달에 프로젝트를 설명하는 마크다운을 보여줄지 선택할 수 있습니다.
+- 만약 `useDetailMd`가 false 라면, 프로젝트 아이템을 프로젝트 링크로 사용할 수 있습니다.
+- 만약 `useDetailMd`가 true 라면, 프로젝트 아이템을 모달을 표시하는 버튼으로 사용할 수 있습니다. 이때, 모달에는 `detailMdName` 파일에 해당하는 내용이 보여집니다.
+  - 프로젝트를 설명하는 마크다운 파일을 `src/assets/static/markdown`에 넣어주세요.
+  - 위 마크다운 파일의 이름을 `projects.detailMdName`에 적어주세요.
+  - 예시
+    ```
+    {
+      ...,
+      detailMdName: "projectDetail.md",
+      ...
+    }
+    ```
+
 ### 👉 5. Timestamp Section.
 
   <img src="./public/readme/images/Timestamp.png" alt="example-image"/>

README.md

@@ -288,6 +288,8 @@ Write down the **Projects** you have made!
         "imgUrl": "/assets/images/exmaple.png",
         "githubUrl": "https://github.com/ddongule",
         "projectUrl": "www.ddongule.com",
+        "useDetailMd": false, 
+        "detailMdName": "",
         "title": "ddongule-simple-portfolio",
         "term": "21.02.02 v1.3.0",
         "description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia ..",
@@ -299,6 +301,20 @@ Write down the **Projects** you have made!
 
 ```
 
+- For clicks on a project item, you can choose whether to go to the `projectUrl` link or show the markdown that describes the project in the modal.
+- If `useDetailMd` is false, you can use project item as a project link.
+- If `useDetailMd` is true, you can use project item as a button that shows a modal in which `detailMdName` file describes the project.
+  - Put your markdown file to `src/assets/static/markdown`.
+  - Write the file name to `projects.detailMdName`.
+  - Example
+    ```
+    {
+      ...,
+      detailMdName: "projectDetail.md",
+      ...
+    }
+    ```
+
 ### 👉 5. Timestamp Section.
 
   <img src="./public/readme/images/Timestamp.png" alt="example-image"/>

package.json

@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "file-loader": "^6.2.0",
+    "html-react-parser": "^1.2.8",
     "i18next": "^20.3.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",

public/index.html

@@ -26,5 +26,6 @@
 
     <noscript>You need to enable JavaScript to run this app. </noscript>
     <div id="root"></div>
+    <div id="modal"></div>
   </body>
 </html>

src/assets/static/icons/index.js

@@ -0,0 +1 @@
+export { ReactComponent as CancelNoCircleIcon } from "./cancel-no-circle-icon.svg";

src/assets/static/markdown/projectDetailExample.md

@@ -0,0 +1,11 @@
+# Project Detail Example
+
+<br>
+
+## This is Broccoli project!!
+
+<br>
+
+- Write down the project details here!!
+- Write down the project details here!!
+- Write down the project details here!!

src/components/AboutMe/index.jsx

@@ -1,4 +1,5 @@
 import './index.scss';
+import '../../sharedStyles/markdown.scss';
 
 import React, { useEffect, useRef, useState } from 'react';
 
@@ -124,7 +125,7 @@ const AboutMe = () => {
         </div>
         <div className='introduce'>
           <div className='subtitle'>Let me Introduce myself</div>
-          <div className='about' ref={aboutMyselfRef}></div>
+          <div className='markdown about' ref={aboutMyselfRef}></div>
         </div>
       </div>
     </>

src/components/AboutMe/index.scss

@@ -126,162 +126,6 @@
       margin-bottom: 0.5rem;
     }
 
-    .about {
-      h1 {
-        font-size: m.size(large-2);
-        font-weight: m.weight(light-bold);
-      }
-
-      h2 {
-        font-size: m.size(large-1);
-        font-weight: m.weight(light-bold);
-      }
-
-      h3 {
-        font-size: m.size(large-0);
-        font-weight: m.weight(light-bold);
-        margin-left: 1rem;
-      }
-
-      a {
-        color: m.color(primary);
-
-        &:hover {
-          font-weight: m.weight(light-bold);
-        }
-      }
-
-      ul {
-        & > li {
-          margin: 0.25rem 1.125rem;
-
-          &::before {
-            content: '';
-            height: 20px;
-            width: 20px;
-            vertical-align: middle;
-            background-repeat: no-repeat;
-            position: relative;
-            display: inline-block;
-            background-image: url('../../assets/static/images/check-mark.png');
-            background-repeat: no-repeat;
-            background-size: contain;
-          }
-        }
-
-        & > customli {
-          display: block;
-          margin: 0.25rem 1.125rem;
-
-          &::before {
-            content: '';
-            height: 20px;
-            width: 20px;
-            vertical-align: middle;
-            background-repeat: no-repeat;
-            position: relative;
-            display: inline-block;
-            background-image: url('../../assets/static/images/check-light.png');
-            background-repeat: no-repeat;
-            background-size: contain;
-          }
-        }
-      }
-
-      ol {
-        counter-reset: number-counter;
-
-        li {
-          margin: 0.25rem 0;
-          counter-increment: number-counter;
-          vertical-align: middle;
-          line-height: 1.5;
-
-          &::before {
-            content: '0' counter(number-counter);
-            position: relative;
-            display: inline-block;
-            text-align: center;
-            font-size: m.size(small-0);
-            font-weight: m.weight(light-bold);
-            color: m.color(primary);
-            margin-right: 0.375rem;
-            padding: 0 0.225rem;
-            background-color: m.color(primary-opacity-heavy);
-            border-radius: v.$border-radius;
-          }
-        }
-      }
-
-      strong {
-        background-color: m.color(primary-opacity-heavy);
-        padding: 0 0.225rem;
-        color: m.color(main);
-      }
-
-      boldred {
-        background-color: m.color(alert-opacity);
-        padding: 0 0.225rem;
-        color: m.color(main);
-        font-weight: m.weight(semi-bold);
-      }
-
-      boldblue {
-        background-color: m.color(dark-event-opacity);
-        padding: 0 0.225rem;
-        color: m.color(main);
-        font-weight: m.weight(semi-bold);
-      }
-
-      boldgreen {
-        background-color: m.color(safe-opacity);
-        padding: 0 0.225rem;
-        color: m.color(main);
-        font-weight: m.weight(semi-bold);
-      }
-
-      code {
-        vertical-align: middle;
-        background-color: m.color(grey-0);
-        border-radius: 6px;
-        font-size: m.size(small-0);
-        font-weight: m.weight(medium);
-        color: m.color(grey-10);
-        display: inline-block;
-        padding: 0.2em 0.4em;
-        margin: 0 0.225rem;
-        height: fit-content;
-      }
-
-      p {
-        display: flex;
-        flex-flow: wrap;
-        align-items: center;
-      }
-
-      blockquote {
-        position: relative;
-        margin: 0.825rem 0;
-        color: m.color(grey-9);
-        padding: 0.5rem 0.25rem;
-        position: relative;
-        padding-left: 1.5rem;
-        padding: 0.75rem 1.5rem;
-        background: m.color(grey-light);
-
-        &::before {
-          content: '';
-          width: 5px;
-          height: 100%;
-          background: #ccd5dd;
-          position: absolute;
-          top: 0;
-          left: 0;
-          display: block;
-        }
-      }
-    }
-
     .about {
       padding: 0 0 0 1.5rem;
     }

src/components/ModalPortal/index.jsx

@@ -0,0 +1,35 @@
+import './index.scss';
+
+import { createPortal } from "react-dom";
+import { CancelNoCircleIcon } from "../../assets/static/icons";
+
+const Modal = ({ onClose, children }) => {
+  const onDimmedAreaClick = (event) => {
+    if (event.target === event.currentTarget) {
+      onClose();
+    }
+  }
+
+  return (
+    <section className="modal-container" onClick={onDimmedAreaClick}>
+      <div className="modal-inner">
+        <button type="button" onClick={onClose}>
+          <CancelNoCircleIcon />
+        </button>
+        <div className="modal-content">
+          {children}
+        </div>
+      </div>
+    </section>
+  )
+}
+
+const ModalPortal = (props) => {
+  const $MessageModal = document.getElementById("modal");
+
+  if (!$MessageModal) throw Error("cannot find modal wrapper");
+
+  return createPortal(<Modal {...props} />, $MessageModal);
+};
+
+export default ModalPortal

src/components/ModalPortal/index.scss

@@ -0,0 +1,58 @@
+.modal-container {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 100; 
+  background-color: rgba(0, 0, 0, 0.5);
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  animation: fadeIn 0.5s forwards;
+
+}
+
+.modal-inner {
+  width: fit-content;
+  height: fit-content;
+  border-radius: 4px;
+  background-color: #ffffff;
+  position: relative;
+
+
+  button {
+    position: absolute;
+    right: -30px;
+    top: -30px;
+
+    svg {
+      transform: scale(2);
+    }
+
+    &:active {
+      transform: scale(0.98)
+    }
+  }
+}
+
+.modal-content {
+  padding: 1.5rem;
+  width: fit-content;
+  height: fit-content;
+  max-width: 31.25rem;
+  min-height: 25rem;
+  max-height: 37.5rem;
+  overflow: scroll;
+}
+
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}