# 기존 프로토타입과 사이드바앱 래핑과의 차이점 정리

## 기능

### 새 메세지 뱃지 알림 기능
- 구현 내용
- 새로운 메세지가 오면 `<span class="new">2</span>` 가 추가되는 것 확인
- 채팅 목록에 `MutationObserver`를 걸어 새로운 메세지를 감지
- span 태그의 textContent 값을 합산하여 새로운 메세지의 개수를 계산
- `sendMessage`를 통해 `{newMessage: True, count: 2}` 를 보내면 background.js에서 `onMessage`로 뱃지 표시
- `whale.sidebarAction.setBadgeText` : 뱃지 텍스트 지정
- `whale.sidebarAction.setBadgeBackgroundColor` : 뱃지 색상 지정

- 비교

|프로토타입|확장앱|
|:---:|:---:|
| <img width="50" alt="스크린샷 2021-02-14 오후 11 15 04" src="https://user-images.githubusercontent.com/39231606/107879513-8bca7200-6f1c-11eb-8de9-f324f3a651ed.png"> | <img width="50" alt="스크린샷 2021-02-15 오후 1 11 38" src="https://user-images.githubusercontent.com/39231606/107904532-6cb8f800-6f8f-11eb-99d7-69696dc2ec4c.png"> |

### 다른 웹 사이트로 나가지 않도록 흐름 통제
- 구현 내용
- 사이드바 내에서 다른 웹사이트로 나가지 않도록 링크는 새 탭으로 열도록 구현
- `document.body`에 `MutataionObserver`를 걸어 `a` 태그의 추가를 감지
- 추가되는 노드들만 검사 => `MutationRecord`의 `addedNodes` 활용
- 요소 노드들 중 `a` 태그의 `href` 속성값이 http로 시작하고 해당 웹페이지 URL를 제외한 노드들의 `target` 속성값을 `_blank`로 지정
- `_blank` : 링크 클릭 시 새 창이나 탭으로 열림

### 로그아웃 버튼 추가
- 구현 내용
- 처음 프로토타입버전에서는 헤더 부분이 `display: none;`처리가 되어있어서 관련 기능을 사용할수가 없었음

|웹버전|확장앱 프로토타입|
|------|---|
|||

- 헤더부분의 대부분의 기능들은 웤스 메신저가 아닌 다른 기능이었지만 로그아웃기능도 포함되어있음
- 메신저에 로그아웃이 없으면 불편할뿐만아니라 보안상에 문제가 될수도 있어서 필요하다고 판단
- 화면 좌측 하단에 톱니바퀴 모양의 설정 메뉴 버튼이 있는데 이 메뉴에 로그아웃 버튼 추가
- 로그아웃 버튼의 엘리먼트는 기존 로그아웃 버튼의 엘리먼트를 사용

|프로토타입|확장앱|
|------|---|
|||

|실행 화면|
|------|
|<img src="https://user-images.githubusercontent.com/48170519/108027979-66e61400-706e-11eb-9dab-75a92e5f839e.gif" width="350px" height="450px">|

## 스타일

### 채팅방 메뉴 클릭시 채팅방이 일그러지는 현상
- 구현 내용
- 채팅방의 우측 상단에는 채팅방에서 사용할수 있는 메뉴가 있는데, 이를 사용하면 채팅방이 메뉴창에 밀려서 일그러지는 현상이 발생함
- 이 문제를 해결하기 위해 채팅방 메뉴에 해당하는 `section_rgt`의 `z-index`를 15로 수정하여 메뉴창이 채팅방을 덮도록 구현
- 또한 채팅방에 해당하는 `section-lft`의 `right`값을 0으로 설정
- 기존의 프로토타입에서는 메뉴창의 `width`가 고정되어있었는데 이것을 100%로 고정하여 채팅방 전체를 덮도록 변경

|프로토타입|확장앱|
|------|---|
|||

### 사진/동영상 부분의 이미지가 잘리는 현상
- 구현 내용
- 페이지를 가로로 줄였을때, 사진/동영상 찾기 메뉴에서 이미지가 짤리는 현상 존재
- 원인을 찾아보니 사진/동영상 찾기 메뉴의 `min-width`가 고정되어있어서 발생하는 문제
- 해결하기 위해 `min-width`를 0으로 고정시킴

|프로토타입|확장앱|
|------|---|
|||

### 채팅방 고정날짜와 플로팅 날짜가 맞지않는 문제
- 구현 내용
- 채팅방 내부에는 지금 보고있는 메세지의 날짜가 플로팅으로 구현되어있고, 채팅 메세지의 날짜 구분을 해주는 고정된 날짜가 존재.
- 근데 이 두 날짜의 위치가 조금 안맞음
- 스크롤했을때 자연스럽게 겹쳐지도록 변경

|프로토타입|확장앱|
|------|---|
|||
|*자세히봐야 보입니다|

### 채팅방 더보기 모달 반응형으로 구현
- 구현 내용
- 페이지를 세로로 줄일 경우, 채팅방의 더보기 메뉴가 스크롤로 변형되지 않아 하단 메뉴 옵션 이용불가
- 채팅방 더보기 메뉴를 반응형으로 구현
- `overflow: auto;`로 사이즈에 따라 자동으로 스크롤바를 생성하도록 변경
- `max-height`를 (화면의 높이 - 메뉴 모달의 top값)으로 계산하도록 변경
- `max-height: calc(100vh - 62px);`

|프로토타입|확장앱|
|------|---|
|||

### 메세지 묶어서 전달시 문제 수정
- 구현 내용
- 채팅방의 메세지를 묶어서 전달하면, 전달한 메세지, 메세지 보기 모달, 전달 완료 모달 전부에세 문제가 생김
- 기존의 다른 모달을 수정하면서 `!important`때문에 메세지 보기 모달에서 오류가 발생, 다시한번 `!important`를 선언하여 해결
- 전달한 메세지 박스의 `width`가 `230px`로 고정되어있던걸을 반응형으로 개선
- 전달 완료 모달의 `max-width`를 90%로 조정

|프로토타입|<img width="281" alt="스크린샷 2021-02-19 오전 10 35 30" src="https://user-images.githubusercontent.com/48170519/108444771-98ddbd00-729e-11eb-8945-4d844a4b2408.png">|<img width="407" alt="스크린샷 2021-02-19 오전 10 35 02" src="https://user-images.githubusercontent.com/48170519/108444747-8b283780-729e-11eb-8568-0ea636f951fe.png">||
|------|---|---|---|
|확장앱||<img width="575" alt="스크린샷 2021-02-19 오전 11 52 51" src="https://user-images.githubusercontent.com/48170519/108451005-70a78b80-72a9-11eb-9163-e00f3d99b140.png">||

### 모달창
- 구현 내용
- 사이드바로 래핑되면서 기존 모달창의 고정되어 있던 너비와 높이로 인해 확장앱에서 모달창 일부가 보여지지 않는 문제 발생
- 해당 너비와 높이를 `calc()`와 `%`를 통해 일정 비율로 나타나도록 수정
- 초대하기 모달창의 조직도 탭에서 기존의 가로로 분할되어 있던 조직 목록과 결과창을 사이드바에서는 세로로 분할하여 보여주도록 수정

- 초대하기 모달창 비교

| 프로토타입 | 확장앱 |
|:---:|:---:|
| <img width="608" alt="스크린샷 2021-02-15 오후 2 10 02" src="https://user-images.githubusercontent.com/39231606/107925732-2c21a480-6fb8-11eb-858c-3d2c9cceb3f1.png"> | <img width="608" alt="스크린샷 2021-02-15 오후 2 08 18" src="https://user-images.githubusercontent.com/39231606/107925735-2d52d180-6fb8-11eb-907a-603d199434b4.png"> |

| 세로 분할 전 | 세로 분할 후 |
|:---:|:---:|
| <img width="400" alt="스크린샷 2021-02-16 오후 5 28 05" src="https://user-images.githubusercontent.com/39231606/108037042-5c327b80-707c-11eb-99ba-4675dbe05b59.png"> | <img width="400" alt="스크린샷 2021-02-17 오후 2 05 32" src="https://user-images.githubusercontent.com/39231606/108158870-37481200-7129-11eb-9c0b-2384efebd768.png"> |

- 미디어 쿼리가 적용된 높이가 700px보다 작은 470px에서 테스트

| 수정 전 | 수정 후 |
|:---:|:---:|
| <img width="391" alt="스크린샷 2021-02-17 오후 8 22 35" src="https://user-images.githubusercontent.com/39231606/108197818-38476680-715e-11eb-8f7c-5fe7e9fe0130.png"> | <img width="389" alt="스크린샷 2021-02-17 오후 8 22 15" src="https://user-images.githubusercontent.com/39231606/108197820-39789380-715e-11eb-9b74-abd4230a2415.png"> |

- 이미지 편집 모달창 비교

| 프로토타입 | 확장앱 |
|:---:|:---:|
| <img width="605" alt="스크린샷 2021-02-15 오후 3 55 00" src="https://user-images.githubusercontent.com/39231606/107925935-6c812280-6fb8-11eb-8dde-d193b293df95.png"> | <img width="605" alt="스크린샷 2021-02-15 오후 4 03 11" src="https://user-images.githubusercontent.com/39231606/107925941-6db24f80-6fb8-11eb-9988-00b8d99eb684.png"> |

### 첨부파일 미리보기
- 구현 내용
- 첨부파일 미리보기 모달창 너비가 고정되어있어 일부가 잘리는 문제 발생
- 너비를 px 대신 비율로 수정
- 가로 크기를 최소로 줄였을 때 헤더에 있는 글자들의 일부가 보여지지 않는 문제 발생
- 미디어 쿼리를 사용해서 530px이하로 줄어드면 글씨 크기와 패딩값을 줄여서 해결
- 비교

| 프로토타입 | 확장앱 |
|:---:|:---:|
| <img width="607" alt="스크린샷 2021-02-15 오후 4 05 25" src="https://user-images.githubusercontent.com/39231606/107926029-8ae71e00-6fb8-11eb-9e10-4e4359c65459.png"> | <img width="602" alt="스크린샷 2021-02-15 오후 5 52 38" src="https://user-images.githubusercontent.com/39231606/107926030-8b7fb480-6fb8-11eb-99c3-82ade844294f.png">|

- 가로를 최소로 줄인 너비가 408px에서 테스트

| 프로토타입 | 확장앱 |
|:---:|:---:|
| <img width="404" alt="스크린샷 2021-02-18 오후 2 45 48" src="https://user-images.githubusercontent.com/39231606/108311405-595c9580-71f8-11eb-9f6d-f0eb82d27021.png"> | <img width="402" alt="스크린샷 2021-02-18 오후 2 46 46" src="https://user-images.githubusercontent.com/39231606/108311447-61b4d080-71f8-11eb-8c55-69113fb18828.png">|

### 채팅창 너비 확보

- 구현 내용
- 메인화면(채팅방 목록 화면)에서 채팅방 일부분만 보여 불편한 문제 해결
- 메인화면에서는 채팅방 목록만 볼 수 있고, 채팅방 목록 중 하나를 클릭하면 해당 채팅방이 나타나도록 구현(채팅방의 공간을 충분히 확보하기 위해 채팅방 목록은 프로필만 보이게 하여 너비를 좁게 유지)
- 채팅방 화면에서 채팅방 목록 화면으로 돌아가는 버튼 추가
- 기존 웹 버전 웍스의 헤더에 위치한 채팅방 목록 화면 너비 줄이는 기능을 활용

- 비교

|프로토타입|확장앱(채팅방 목록 화면)|확장앱(채팅방 화면)|
|:---:|:---:|:---:|
||||

### 채팅방 메세지 박스

- 구현 내용
- 채팅방 메세지 박스 채팅 내용과 시간, 읽음 표시가 겹치는 문제 해결
- 사이드바 너비에 따라 채팅방 메세지 너비도 변경되도록 구현
- 챗봇 메세지 박스, replay 메세지 박스에도 똑같이 적용
- 챗봇 캘린더 메세지 박스의 경우 "캘린더" 키워드로 css 셀렉터를 사용했기 때문에 다국어 적용
- ex) `div[data-for-copy*='カレンダー'] .md_txt:not(.txt_center) {
width: 82%;}`
- 비교

|프로토타입|확장앱(사이드바 너비 좁을 때)|확장앱(사이드바 너비 넓을 때)|
|:---:|:---:|:---:|
|<img width="231" alt="스크린샷 2021-02-10 오전 11 52 56" src="https://media.oss.navercorp.com/user/22741/files/0dc24000-6b97-11eb-982c-69e31cc503ec">||
|<img src="https://media.oss.navercorp.com/user/16849/files/9599f100-720c-11eb-8252-4e5caae6676a" width="300">|||

|프로토타입|확장앱(챗봇 채팅방)|
|------|---|
|||
|||

### 툴팁

- 구현 내용
- 채팅방 이름 툴팁으로 보여주는 기능 추가
- 채팅방 목록 너비가 좁을 때, 채팅방 프로필에 마우스 hover시 해당 채팅방 이름이 툴팁으로 보여짐
- 새로운 채팅방에도 적용되도록 구현(mutationObserver API 활용)
- 비교

|확장앱(일반 채팅방)|확장앱(챗봇 채팅방)|
|:---:|:---:|
|||

### 도움말 메뉴

- 구현 내용
- 하단 도움말 버튼 클릭했을 때 메뉴가 사이드바에서 보이도록 위치 수정

- 비교

|프로토타입|확장앱|
|:---:|:---:|
|||

# 릴리즈 이후 개선 사항

### 대화창이 열리지 않는 문제 개선

- 이벤트 등록 방식 개선


### 대화방내의 사진 클릭시 상세보기에서 뒤로가기 버튼과 전달 버튼이 곂치는 문제 수정


### 사진/동영상 상세보기에서 툴 버튼 모음이 깨지던 문제 수정

- 최소 가로 길이에서도 깨지지 않게끔 사이즈 조절

### 사진/동영상 상세보기에서 마우스를 올려야 다음, 이전 버튼이 떠오르도록 수정
- 사이드바 크기가 작아서, 버튼 크기가 작아도 사진을 가릴꺼라 생각해서 마우스를 올려야 버튼이 보이게끔 수정

### 대화방 열린 채로 대화방 목록이 스크롤이 안되던 문제 수정

- 임시로 적용되어있던 부분 삭제
- 

### 대화방 내의 다양한 모달들이 사이즈가 깨지던 문제 수정
- 적용 모달: 프로필, 통역, 알림 설정, 배경 바꾸기, 대화방 이름 바꾸기, 나가기, 연결 끊긴 상태에서의 다시 로그인
- 예시 :

|다시 로그인|통역|
|------|---|
|||

### 메세지 박스 사이즈 깨지던 문제 수정

### 스티커 입렵 팝업, 대화방 핀 아이콘의 z-index 문제 수정

|Before|After|
|------|---|
|||

### 대화방 접기 버튼 위치 수정(대화방 내 좌측 상단 -> 대화방 헤더부분 좌측)

|Before|After|
|------|---|
|||

### 메세지 검색 기능이 대화방의 일부분만 가리도록 수정, 메세지 검색 후 해당 메세지로 이동 가능

|Before|After|
|------|---|
|||

### 초대하기 팝업에서 결과 목록이 모달을 이탈하던 문제 수정

|Before|After|
|:---:|:---:|
|<img width="300" alt="세로 700px 이하일 때 목록이 컨테이너 이탈 2" src="https://media.oss.navercorp.com/user/12800/files/eb2f1000-7522-11eb-9169-afad4734b54e">|<img width="300" alt="스크린샷 2021-02-23 오전 11 57 51" src="https://user-images.githubusercontent.com/39231606/108797439-87622100-75ce-11eb-988c-16443332150d.png">|

### 대화창 사진이 화면을 이탈하던 문제 수정

|Before|After|
|:---:|:---:|
|||