Knock 🚪

B2B SaaS 사내문서 검색서비스

1. Search

• #동료에게물어보기힘든것 #내가놓친것
• 고민하지 말고 Knock에 물어보자!
• 가중치, 중요도 계산으로 연관성이 높은 게시글이 검색 돼요!

2. Security

• #사내문서 #보안이생명
• 각 회사별 Admin이 있고, Admin을 통해서만 Member를 등록할 수 있어요.
• 읽기/수정하기 권한을 직급별로 부여할 수 있어요!

3. Community

• 카테고리를 나누어, 용도별로 관리해요!
• #오늘의점심 #직장내소모임 #수평적문화 #12기공채친목
• 소통이 활발한 사내분위기를 만들어요!

4. D.I.Y

• #내가원하는대로 #내맘대로 #다꾸아닌문꾸
• 즐겨찾기 기능이 있어, 내가 원하는 글을 원하는 폴더에 넣어 꾸밀 수 있어요!
• 즐겨찾기 폴더는 나만 볼 수 있으니, 안심하고 넣을 수 있어요!
  
  
  
  

Knock Backend Team

📚 Knock Team Notion

	이름	Github
FE 팀장	박정현	https://github.com/swing-park
FE 팀원	송진환	https://github.com/jinhwansong

프로젝트 세부사항

• 구현 영상
  

  • 최종 발표영상 📷
    

• 구현목표

  • 검색 성능 : 형태소 분석을 통한 정확하고 빠른 검색 결과 제공
  • 편집상태 알림 : 게시글의 편집상태를 보여주고, 편집이 완료되면 알림 제공
  • 개인별 문서 관리 : 자신이 작성한 문서를 관리하고, 필요한 사내 문서들은 폴더로 관리
  • 게시글 공유 커뮤니티 : 댓글을 통해 소통하고, 편집 로그를 확인하여 다른 직원들의 편집 내역을 조회 가능
  • 로그 기능 : 게시글이 편집되어 왔던 기록을 과거와 현재로 모두 열람 가능
  • 다크모드 기능 : 라이트모드와 다크모드 기능

• 구현기능

  • 검색 및 유형별 조회 기능
  • 게시물 상세페이지 기능
  • 마이페이지, 즐겨찾기 기능
  • 관리자 페이지 기능 (회사, 사원, 카테고리 등 관리)
  • 댓글, 로그 기능
  • 다크모드 기능

• 기간 :

  • 2023.03.10 ~ 2023.04.21

Tech Stack

Service Architecture

API 명세서

📄 API 바로가기

주요 기능

문서 검색 및 유형별 조회 기능	편집상태 조회 기능
- 제목, 내용, 키워드 조회를 통한 우수한 검색 성능 - 카테고리별 검색 - 검색 필터(연관순, 댓글순, 조회순, 최신순) 제공	- 게시글 편집 상태 조회 - 편집 완료된 경우 수정을 원하는 사용자에게 알림

관리자 페이지 기능	댓글 및 로그 기능
- 직원의 직급 및 권한 관리 - 사내 게시글의 카테고리 등록 및 관리	- 댓글로 커뮤니티 기능 - 로그를 통해 이전과 이후 게시글 비교 가능

Trouble Shooting

Toast UI Editor / AWS SDK

-Toast UI Editor는 마크다운 에디터를 구현한 오픈 소스 라이브러리로, 사용자가 텍스트를 마크다운 형식으로 작성하면 해당 마크다운을 HTML로 변환하여 보여주는 기능을 제공합니다. 또한, 다양한 플러그인을 제공하여 사용자가 편리하게 에디터를 사용할 수 있습니다.

이 중에서 이미지 첨부 기능을 사용하기 위해서는 클라이언트에서 이미지를 서버에 업로드하고 링크를 받아와야 합니다. AWS SDK 라이브러리를 이용하면 Amazon Web Services의 다양한 서비스들을 JavaScript에서 사용할 수 있습니다. 이 중에서 S3 서비스는 클라우드 스토리지 서비스로, 이용자는 이를 이용하여 파일을 저장하고, 검색하고, 다운로드할 수 있습니다.

따라서, AWS SDK 라이브러리를 이용하여 Toast UI Editor에서 이미지를 업로드하는 커스텀 훅을 제작하여, 사용자가 편리하게 이미지 첨부 기능을 사용할 수 있게하였습니.

이러한 방법을 사용하면, 신입 사원들이 찾기 어려운 내용도 검색하여 찾을 수 있고, 선임들은 이를 통해 빠르고 쉽게 정보를 공유할 수 있습니다. 또한, Toast UI Editor와 AWS SDK 라이브러리를 이용하여 간편하게 이미지를 업로드하고 첨부하는 기능을 구현할 수 있기 때문에, 이를 활용하여 다양한 프로젝트에서 활용할 수 있습니다.

SSE

-SSE(Server-Sent Events)는 웹 애플리케이션에서 서버로부터 실시간으로 데이터를 받아와 화면에 표시할 수 있는 기술입니다. 이를 사용하면 WebSocket과 같은 양방향 통신을 필요로 하지 않으므로 서버 측에서도 부담이 적습니다.

하지만 SSE API call을 할 때, request에 인증 헤더를 추가해야 하는 경우가 있습니다. 이때 문제가 발생할 수 있는데, 일부 브라우저에서는 인증 헤더가 적용되지 않아 API call이 실패하는 경우가 있습니다.

이러한 문제를 해결하기 위해 Event-source-polyfill 라이브러리를 사용하였습니다. 이 라이브러리는 eventSource 객체에 xhr header를 주입하는 방식으로 인증 헤더를 추가할 수 있도록 지원해줍니다.

이를 사용하여 SSE API call을 수행하면 인증 헤더가 제대로 적용되어 API call이 정상적으로 수행하였 SSE API call에 대한 문제를 해결하였습니다.

editing status

- 게시글 수정 후 editing status가 업데이트되지 않는 이슈는 사용자 경험에 영향을 미치는 큰 문제였습니다. 따라서 이 문제를 해결하기 위해 적극적으로 접근했습니다.

우선적으로, 문제가 발생한 시나리오를 이해하고 문제가 발생하는 부분을 파악했습니다. 게시글 수정시점에 페이지를 이동하는 과정에서, editing status가 업데이트되지 않았습니다.

이 문제를 해결하기 위해, history 라이브러리를 이용하여 페이지 이동 이벤트를 감지하고, 해당 시점에 editing status를 변경하는 로직을 추가했습니다. 이를 통해 게시글 수정 및 삭제 시점에 페이지 이동 이벤트를 감지하고, 적절하게 editing status가 업데이트되도록 하였습니다.

또한, 이 문제를 해결하는 과정에서 우리 팀은 사용자 경험을 고려한 다양한 시나리오를 고려하고, 이에 따른 다양한 테스트를 수행했습니다. 이를 통해 문제를 해결하고, 사용자에게 더 나은 경험을 제공할 수 있었습니다.

이번 이슈를 통해 우리 팀은 문제 해결에 대한 전략과 문제 발생 시 빠르게 대처하는 능력을 향상시켰습니다. 이를 통해 우리 서비스의 안정성과 사용자 경험을 높일 수 있었습니다.