내 지원 현황 페이지에서 과제 설명을 확인할 수 있다.

[woowahan-pjs]

• 내 지원 현황 페이지에 과제 보기 버튼을 추가하여 클릭하면 과제 보기 페이지로 이동한다.
• 과제 보기 버튼은 과제의 상태가 SUBMITTING이 아닌 경우에는 활성화되거나 표시되지 않아야 한다.
  • URL을 통한 직접 접근에 대한 방어가 가능해야 한다.
• 과제 보기 페이지에는 과제 설명의 마크다운이 렌더링된다.
• 제출하기 버튼은 내 지원 현황 페이지의 제출하기 버튼 UI 정책을 따른다.
• 와이어프레임

[woowahan-cron]

Branch

• feature/mission-description-view

References

• 지원플랫폼에서 과제 확인 기능 명세

[woowahan-cron]

1. 라우팅 naming
2. 페이지 레이아웃 (서버에서 md로 갖고 있다가 html로 서빙해 줌)
3. 페이지 내 버튼 라우팅
4. 과제 뷰 API 연결 + error status 처리

[woowahan-cron]

코드 블록

현황

• md -> html 변환 후 반환
• 코드 블록의 경우 아래와 같이 변환하여 반환합니다

  <code class="language-java">public class OutputView {
      public void printMenu() {
          System.out.println(&quot;&lt;주문 메뉴&gt;&quot;);
          // ...
      }
      // ...
  }
  </code>

제약사항

• 라이브러리를 사용하지 않고 날것의 html을 그대로 리액트 환경에서 렌더링하게 되면, github에서 보는 것과 같이 예쁜 코드 하이라이팅 기능을 비롯하여 문단의 서식 등을 모두 임의로 지정해야 합니다. -> 리소스 발생
  • 

해결 방법?

• 직접 스타일을 다 구현한다: 시간 리소스를 들여야 함
  • 현재 리액트 프로젝트는 module css 환경을 사용하고 있는데 SCSS와 같은 전처리기를 사용하고 있지 않아 계층(Hierarchy) 표현이 불가능함. -> 가독성 + 관리의 문제
• 라이브러리를 쓴다: 기본적인 하이라이팅이 들어가 있을 것이라서 임의로 스타일링을 하는 데 부담이 없을 듯
  • highlight.js: html로 내려 받는 코드 하이라이팅을 쓸지?
    • 코드 블록을 제외한 나머지 서식은 임의로 커스터마이징해야 함
  • react-markdown: 조금 번거로울 수 있지만 서버에서 md로 다시 내려주고 마크다운을 렌더링하는 라이브러리를 쓸지?
    • 서버 작업 리소스 발생...😓

---

검토 필요

[woowahan-pjs]

@woowahan-cron
서버에서 마크다운을 HTML로 변환할 때 이미 <code> 태그와 클래스의 language-xxxx 속성을 포함하고 있네요. 따라서 서버가 제공하는 HTML 코드에 코드 강조 표시를 포함하여 마크다운 스타일을 지정하는 방법에는 크게 두 가지가 있는 것 같습니다. 두 가지 방법 중 마음에 드는 방법을 선택하시면 되며, 먼저 적용하신 후 코드 리뷰 등을 통해 피드백을 받아 보시면 좋을 것 같습니다.

1. Prism
2. GitHub Markdown CSS + Highlight.js

아래는 2번으로 적용한 간단한 예입니다.

• github-markdown.css를 가져왔습니다.

import "github-markdown-css/github-markdown.css";
import "highlight.js/styles/github.css";

• AssignmentViewer의 useEffect 훅에 hljs.highlightAll()을 추가하였습니다.

useEffect(() => {
  fetchRequirement();
  hljs.highlightAll();
});

• App.css에서 <ul>과 <ol> 태그의 list-style: none 값을 제거하였습니다.
  • 이 부분은 설명 <div> 태그에 markdown-body 클래스를 추가하고 해당 클래스만 제외하면 됩니다.

<div className="markdown-body" dangerouslySetInnerHTML={{ __html: description }} />