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

Tanney-102 · 2021-09-05T15:33:35Z

안녕하세요 동글님!
손XX의 부탁으로 간단한 모달기능을 구현해 봤습니다.
기존에는 ProjectItem 클릭시 지정한 projectUrl에 대한 링크만 제공을 했었는데요!
설정에 따라 상세 내용을 모달로 상세 내용을 보여주도록 구현했습니다.

상세내용

markdown 관련 css 분리(commit: 135adf8)
- 기존 css 파일 내 .about 클래스 내용 중 마크다운에 대한 스타일(하이라이팅, 폰트 사이즈 등)을 다루는 부분을 분리해봤습니다.
- 이 부분은 필히 문제가 없는지 확인부탁드립니다.
ModalPortal 컴포넌트 및 관련 훅 구현 (commit: bd1c6e8)
- react portal을 이용해 모달을 구현했습니다.
- useModal을 통해 modal 조작에 대한 인터페이스를 구현했습니다.
project detail modal 기능 구현 (commit: 372ff54, eec6b00)
- useDetailModal 변수에 따라 ProjectItem의 성격(a or button)을 분기하도록 했습니다.
- 모달 사용 시 src/assets/static/markdown에 있는 md 파일을 가져와 보여주도록 했으며 이때, 기존 프로젝트에 있던 mmd.js 모듈을 이용했습니다.
- mmd.js를 통해 md 파일을 파싱하면 html string을 반환하기 때문에, 기존에는 직접 돔에 넣어주는 로직을 구현하신 것으로 알고있습니다. 저는 이번에 html-react-parser라는 라이브러리를 사용해 직접 JSX 안에 넣어줬습니다. 확인해보시고 AboutMe 컴포넌트에도 사용을 고려해봐도 좋을 것 같습니다!
readme 작성 (commit: a34359a)
- readme 영문, 한글 버전 모두 업데이트했습니다.
- 영문버전의 경우 문법 오류가 있을 수 있으니(그럴 확률이 높으니) 필히 확인 부탁드립니다.

사용 예시

md 파일 작성 및 src/assets/static/markdown에 추가
db.json 설정 변경
실제 프로젝트에 반영 되었는지 확인

ddongule

안녕하세요 Tanny님!
먼저 이렇게 관심을 가지고 제 프로젝트에 기여해주셔서 감사하다는 말씀드리고 싶습니다!
덕분에 포트폴리오에 담길 내용들이 훨씬 풍성해질 수 있는 기회가 된 것 같습니다.
(아이디어를 주신 손XX님도 감사합니다.) ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

PR 내용도 꼼꼼히 작성해주셔서 편하게 리뷰드릴 수 있었어요. 감사합니다!
몇 가지 내용들을 코멘트로 남겨놓았으니 확인 한 번 해주시면 좋을 것 같아요.
제가 프로젝트에 깜빡하고 프리티어를 적용해놓지 않아서 ㅠ_ㅇ EOF 문제가 많이 보이네요ㅠㅠ
빠른 시일 내에 프리티어를 설정해 문제를 해결해보도록 하겠습니다..🙀

정말 감사합니다! 😎 최고에요!

ddongule · 2021-09-06T14:42:43Z

README.md

+  - Put your markdown file to `src/assets/static/markdown`.
+  - Write the file name to `projects.detailMdName`.


Suggested change

- Put your markdown file to `src/assets/static/markdown`.

- Write the file name to `projects.detailMdName`.

- Put your Detail Markdown File to `src/assets/static/markdown`.

- Write the name of the Detail Markdown file in `projects.detailMdName`.

어떤 마크다운 파일인지 명시해주는 편이 더 좋을 것 같아서
요렇게 조금 더 디테일하게 설명을 붙여보는 건 어떨까요~? 🙀

(추가) 요 내용은 일단 한국말 버전 마크다운 파일이 확정되면 그 때 변경해보는 것이 더 좋을 것 같아요! 허헛!
한국말 Readme 파일보다 영문 Readme 파일을 먼저 리뷰해버려서 이렇게 리뷰를 해버렸네욨..! 🙀

ddongule · 2021-09-06T14:46:43Z

src/assets/static/icons/index.js

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


End Of File 문제가 있네요!
일단 해결해주신다면 이후에 제가 프로젝트에 prettier 설정을 빠르게 적용하도록 하겠습니다 ㅜㅜ!

ddongule · 2021-09-06T14:49:24Z

src/components/ModalPortal/index.jsx

+  return createPortal(<Modal {...props} />, $MessageModal);
+};
+
+export default ModalPortal


마찬가지로 여기에도 End Of File 문제가 있네요! 🥺

ddongule · 2021-09-06T14:54:41Z

src/sharedStyles/markdown.scss

+      display: block;
+    }
+  }
+}


여기에도 End Of File 문제가 있네요 ㅠㅠ! (죄송합니다)

Markdown Style을 따로 분리해 스타일을 적용해주셨네요!
분리한 후에 보기에도 훨씬 좋고, 재사용도 잘 되고 있는 것 같아서 좋은 분리인 것 같습니다!
감사합니다아아! 🍑

ddongule · 2021-09-06T14:57:01Z

src/hooks/useModal.js

+  return { isModalShown, showModal, hideModal };
+}
+
+export default useModal;


여기에도 End Of File 문제가..! 하핫..!

useModal Hook을 만들어 모달 기능을 구현해주셨군요!
상세 내용을 보기에 적합한 방법인 것 같습니다 :-)

ddongule · 2021-09-06T16:00:18Z

src/components/ModalPortal/index.scss

+  to {
+    opacity: 1;
+  }
+}


End Of File.. 번거로우시겠지만 부탁드리옵니다..

ddongule · 2021-09-06T16:12:37Z

src/components/Projects/ProjectItem/index.jsx

+  }, [detailMdName]);
+
+  useEffect(() => {
+    document.body.style.overflow = isModalShown ? "hidden" : "unset";


모달이 열리면 뒷 배경이 스크롤되지 않게 해주셨네요!
최곱니다 👍

ddongule · 2021-09-06T16:16:04Z

src/components/Projects/ProjectItem/index.jsx

+      {isModalShown && 
+        <ModalPortal onClose={hideModal}>
+          <div className="markdown">
+            {parse(modalContent)}


오오 html-react-parser를 이용해 내용을 넣어주셨군요~~!
이런 라이브러리가 있는 줄도 모르고.. innerHTML을 이용했었는데, 이거 정말 유용하네요!!!!!!!
About Me Section에도 이렇게 적용해봐야겠어요!
알려주셔서 감사합니당 덕분에 새로운 내용을 배웠네요! 🥺🙀👏💯

ddongule · 2021-09-06T17:05:48Z

README.ko.md

+- 프로젝트 아이템 클릭에 대해 `projectUrl` 링크로 이동할지 모달에 프로젝트를 설명하는 마크다운을 보여줄지 선택할 수 있습니다.
+- 만약 `useDetailMd`가 false 라면, 프로젝트 아이템을 프로젝트 링크로 사용할 수 있습니다.
+- 만약 `useDetailMd`가 true 라면, 프로젝트 아이템을 모달을 표시하는 버튼으로 사용할 수 있습니다. 이때, 모달에는 `detailMdName` 파일에 해당하는 내용이 보여집니다.
+  - 프로젝트를 설명하는 마크다운 파일을 `src/assets/static/markdown`에 넣어주세요.
+  - 위 마크다운 파일의 이름을 `projects.detailMdName`에 적어주세요.
+  - 예시
+    ```
+    {
+      ...,
+      detailMdName: "projectDetail.md",
+      ...
+    }
+    ```
+


Suggested change

- 프로젝트 아이템 클릭에 대해 `projectUrl` 링크로 이동할지 모달에 프로젝트를 설명하는 마크다운을 보여줄지 선택할 수 있습니다.

- 만약 `useDetailMd`가 false 라면, 프로젝트 아이템을 프로젝트 링크로 사용할 수 있습니다.

- 만약 `useDetailMd`가 true 라면, 프로젝트 아이템을 모달을 표시하는 버튼으로 사용할 수 있습니다. 이때, 모달에는 `detailMdName` 파일에 해당하는 내용이 보여집니다.

- 프로젝트를 설명하는 마크다운 파일을 `src/assets/static/markdown`에 넣어주세요.

- 위 마크다운 파일의 이름을 `projects.detailMdName`에 적어주세요.

- 예시

```

{

...,

detailMdName: "projectDetail.md",

...

}

```

#### 프로젝트 아이템 클릭에 대해 `projectUrl` 링크로 이동할지 프로젝트를 설명하는 모달을 보여줄지 선택할 수 있습니다.

만약 `useDetailMd`이 true 라면, 프로젝트 아이템을 모달을 표시하는 버튼으로 사용할 수 있습니다. 이때, 모달에는 `detailMdName` 파일에 해당하는 내용이 보여집니다.

🚨🚨🚨 꼭 아래 내용을 보시고 작성해 주세요!

**만약 프로젝트 설명 모달을 사용하고 싶지 않으시다면**, 아래 Step을 따라하시면 됩니다.

1. `projectUrl`에 프로젝트가 배포된 URL을 넣으세요.

2. `useDetailMd`에 `false` 속성을 넣으세요.

3. `detailMdName`에 `""`(빈 String)을 넣으세요.

- 예시

```

{

...,

"projectUrl": "www.broccoli.com",

"useDetailMd": false,

"detailMdName": "",

...

}

```

---

**만약 프로젝트 설명 모달을 사용하고 싶으시다면**, 아래 Step을 따라하시면 됩니다.

1. 프로젝트를 설명하는 "마크다운 파일"을 `src/assets/static/markdown/details`에 만들어주세요.

2. `projectUrl`에 `""`(빈 String)을 넣으세요.

3. `useDetailMd`에 `true` 속성을 넣으세요.

4. `detailMdName`에 `1`에서 만들어주신 마크다운 파일 이름을 적어주세요.

- 예시

- `src/assets/static/markdown/details/broccoli_project.md` 파일을 생성

```

{

...,

"projectUrl": "",

"useDetailMd": true,

"detailMdName": "broccoli_project",

...

}

```

제가 설명을 좀 극도로 자세히 하는 편이라 ^^;;ㅋㅋㅋㅋㅋㅋㅋㅋㅋ
조금 더 자세히 사용자 가이드를 적어봤습니다.
잘못된 부분은 없는지 한 번 살펴봐주시면 감사하겠습니다! >_ㅇ

그리고 UseDetailMd 속성과 detailMdName 속성이 서로 연관된 속성인만큼, 예시에도 함께 넣어주는 편이 더 좋을 것 같습니다! 어떻게 생각하시나요?

그리고 detailMdName에 파일 확장자인 .md는 달라질 부분이 없는 내용인 만큼,
사용자가 확장자를 굳이 쓰지 않아도 될 수 있도록
ProjectItem에서 import할 때에 미리 넣어두는 방법은 어떠신가요?
그 쪽 부분에도 코멘트 달아두겠습니다!

이 부분에 코멘트가 많네요 따흐흑 한 번 확인해주시면 감사하겠습니다 >_ㅠ

ddongule · 2021-09-06T17:08:53Z

src/components/Projects/ProjectItem/index.jsx

+    import(`../../../assets/static/markdown/${detailMdName}`)
+      .then((res) => {
+        fetch(res.default)
+          .then((res) => res.text())
+          .then((res) => setModalContent(mmd(res)))
+          .catch((err) => console.log(err));
+      })
+      .catch((err) => {
+        console.log(err);
+
+        return '';
+      });


import를 하실 때, 사용자가 굳이 파일명을 db.json 에 언급하지 않아도 되도록
아래와 같이 변경하는 것은 어떠신가요?
혹시 다른 이유가 있으셨던 것이라면 알려주시면 감사하겠습니다 >_ㅇ!!

Suggested change

import(`../../../assets/static/markdown/${detailMdName}`)

.then((res) => {

fetch(res.default)

.then((res) => res.text())

.then((res) => setModalContent(mmd(res)))

.catch((err) => console.log(err));

})

.catch((err) => {

console.log(err);

return '';

});

import(`../../../assets/static/markdown/${detailMdName}.md`)

.then((res) => {

fetch(res.default)

.then((res) => res.text())

.then((res) => setModalContent(mmd(res)))

.catch((err) => console.log(err));

})

.catch((err) => {

console.log(err);

return '';

});

ddongule · 2021-09-06T17:23:13Z

src/components/ModalPortal/index.scss

+  left: 0;
+  z-index: 100; 
+  background-color: rgba(0, 0, 0, 0.5);
+


헤헷 저는 개인적으로 모달 뒤의 내용을 흐리는 것을 좋아해서..
backdrop-filter: blur(2px); 요 내용 추가해주시면 더 좋을 것 같아요 >_ㅇ
아래처럼 보여지게 된답니다!

Tanney-102 added 5 commits September 5, 2021 23:12

refactor: markdown 스타일링 관련 css 분리

135adf8

feat: ModalPortal 컴포넌트 및 관련 훅 구현

bd1c6e8

feat: project detail modal 기능 구현

372ff54

refactor: 프로퍼티 명 변경 및 예시 마크다운 추가

eec6b00

docs: readme에 project detail modal에 대한 내용 추가

a34359a

ddongule requested changes Sep 6, 2021

View reviewed changes

ddongule reviewed Sep 6, 2021

View reviewed changes

ddongule mentioned this pull request Sep 6, 2021

About Me Section에 html-react-parser 적용 #4

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

Tanney-102 commented Sep 5, 2021

ddongule left a comment

ddongule Sep 6, 2021 •

edited

Loading

ddongule Sep 6, 2021

ddongule Sep 6, 2021

ddongule Sep 6, 2021

ddongule Sep 6, 2021

ddongule Sep 6, 2021

ddongule Sep 6, 2021

ddongule Sep 6, 2021

ddongule Sep 6, 2021

ddongule Sep 6, 2021

ddongule Sep 6, 2021

		- Put your markdown file to `src/assets/static/markdown`.
		- Write the file name to `projects.detailMdName`.

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

-- 프로젝트 아이템 클릭에 대해 `projectUrl` 링크로 이동할지 모달에 프로젝트를 설명하는 마크다운을 보여줄지 선택할 수 있습니다.
-- 만약 `useDetailMd`가 false 라면, 프로젝트 아이템을 프로젝트 링크로 사용할 수 있습니다.
-- 만약 `useDetailMd`가 true 라면, 프로젝트 아이템을 모달을 표시하는 버튼으로 사용할 수 있습니다. 이때, 모달에는 `detailMdName` 파일에 해당하는 내용이 보여집니다.
-  - 프로젝트를 설명하는 마크다운 파일을 `src/assets/static/markdown`에 넣어주세요.
-  - 위 마크다운 파일의 이름을 `projects.detailMdName`에 적어주세요.
-  - 예시
-    ```
-    {
-      ...,
-      detailMdName: "projectDetail.md",
-      ...
-    }
-    ```
+#### 프로젝트 아이템 클릭에 대해 `projectUrl` 링크로 이동할지 프로젝트를 설명하는 모달을 보여줄지 선택할 수 있습니다.
+만약 `useDetailMd`이 true 라면, 프로젝트 아이템을 모달을 표시하는 버튼으로 사용할 수 있습니다. 이때, 모달에는 `detailMdName` 파일에 해당하는 내용이 보여집니다.
+🚨🚨🚨 꼭 아래 내용을 보시고 작성해 주세요!
+**만약 프로젝트 설명 모달을 사용하고 싶지 않으시다면**, 아래 Step을 따라하시면 됩니다.
+. `projectUrl`에 프로젝트가 배포된 URL을 넣으세요.
+. `useDetailMd`에 `false` 속성을 넣으세요.
+. `detailMdName`에 `""`(빈 String)을 넣으세요.
+  - 예시
+    ```
+    {
+      ...,
+      "projectUrl": "www.broccoli.com",
+      "useDetailMd": false,
+      "detailMdName": "",
+      ...
+    }
+    ```
+---
+**만약 프로젝트 설명 모달을 사용하고 싶으시다면**, 아래 Step을 따라하시면 됩니다.
+.  프로젝트를 설명하는 "마크다운 파일"을 `src/assets/static/markdown/details`에 만들어주세요.
+. `projectUrl`에 `""`(빈 String)을 넣으세요.
+. `useDetailMd`에 `true` 속성을 넣으세요.
+.  `detailMdName`에 `1`에서 만들어주신 마크다운 파일 이름을 적어주세요.
+  - 예시
+    - `src/assets/static/markdown/details/broccoli_project.md` 파일을 생성
+    ```
+    {
+      ...,
+      "projectUrl": "",
+      "useDetailMd": true,
+      "detailMdName": "broccoli_project",
+      ...
+    }
+    ```

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

Are you sure you want to change the base?

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

Conversation

Tanney-102 commented Sep 5, 2021

상세내용

사용 예시

ddongule left a comment

Choose a reason for hiding this comment

ddongule Sep 6, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ddongule Sep 6, 2021 •

edited

Loading