1. 요구사항 정리, 기초 구상

1. 개요

보이스봇, 챗봇 저작 운영 서비스의 사용자 매뉴얼, FAQ, 릴리즈 노트를 조회할 수 있는 사이트를 개발

2. 요구사항 정리

사용자 매뉴얼

1) 사용자 매뉴얼은 개발자들이 md파일로 작성해 관리한다. md파일의 주소, 이름을 서버에서 관리한다.
2) 매뉴얼의 큰 제목들을 화면 우측의 목차에 보여주고, 클릭 시 해당 제목이 있는 영역으로 이동하게 한다.
3) 각 매뉴얼을 인쇄, 복사할 수 있어야 한다.
4) 검색을 통해 검색어가 포함된 매뉴얼의 정보들(매뉴얼 제목, 큰 제목, 내용)을 검색결과 팝업에 나타내고, 클릭 시 해당 매뉴얼의 해당 영역으로 이동하게 한다. 포함된 단어 주변의 2~3단어를 포함해 결과창에 보여주고 검색어는 강조 처리한다.
5) 매뉴얼은 화면 좌측의 사이드바에서 클릭을 통해 자유롭게 조회할 수 있다. 메뉴얼은 최대 3개의 깊이를 가진다. (ex: BOT BUILDER > 지식 관리 > 사용자 사전 관리)

FAQ, 릴리즈 노트, 배포 내역

1) 각 항목의 내용,제목 등은 서버에서 불러온다.
2) 아코디언 형태의 UI로 세로로 나열해서 출력한다. 제목을 클릭 시 아코디언이 펼쳐지면서 내용이 보여진다.

3. 기초 구상

레이아웃

타 공식문서 사이트 (React, Redux 등)를 참조하여 레이아웃을 구성했다.

라이브러리 선정

마크다운을 읽어올 시에 ### , --- 등 다양한 특수문자들이 포함되어 있다. 이런 내용들을 정규식으로 처리해서 #이면 h1, ---이면 code block 이런 식으로 파싱할 수 있지만, 경우의 수가 너무 많아 구현에 많은 시간이 걸릴 것이라 생각했다. md파일을 파싱 후 어느정도 스타일링을 해주는 라이브러리를 사용하고 해당 내용에 스타일을 입히는 것이 더 빠르게 개발이 가능할 것 같아 react-markdown이라는 라이브러리를 선정했다.

react-markdown은 기본적으로 파싱 후 적합한 dom으로 변환해줄 뿐만 아니라 다양한 plugin을 제공해 code 강조, 표 출력 등 스타일링을 편하게 할 수 있어 제일 적합하다고 생각했다.