[PROlog] 인트로 페이지 변경 + Quill editor 도입

1. 인트로 수정

저번에도 언급했듯이 카카오로 소셜로그인을 하는 대신 이메일로 로그인과 구글로 로그인을 구현하기로 해서 인트로 화면을 변경해야 했다. 카카오 로그인 버튼을 빼고 이메일과 비밀번호 입력란, 회원가입(이메일) 버튼, 구글로 로그인 버튼을 새로 만들었다.

 

 

이메일로 회원가입도 진행해야 되니 회원가입 화면도 새로 구현했다.

 

개인정보 처리방침 동의 페이지

 

회원가입 정보 입력 페이지

 

비밀번호 확인은 비밀번호 코드를 복붙해서 만들었는데 비밀번호에 input을 입력하면 비밀번호 확인에서도 똑같은 input이 입력되는 오류가 생겼다. 아무래도 수정이 필요할 것 같다.

 

---

2. Quill 에디터 도입

전에는 글 작성을 그냥 textarea로 구현했었는데, 생각해보니 게시물에는 사진도 첨부되는 것이 맞는 것 같아 어떻게 하면 좋을까 생각하다가 에디터 라이브러리를 도입하기로 했다. 처음에 생각한 것은 TOAST UI였는데 React 18을 지원하지 않아서 다른 에디터를 쓰기로 했다. 많은 사람들이 또 쓰는 에디터 라이브러리가 Quill이어서 바로 도입해보았다.

 

그냥 적용하면 끝인가 싶었는데 문제가 하나 발생했다. Quill은 이미지를 첨부하면 이미지가 Base64로 첨부가 된다. 하지만 Base64는 용량이 크기 때문에 이대로 서버로 전송하면 서버에 과부하가 걸릴 수도 있는 문제가 발생한다. 다른 사람들은 어떻게 했나 살펴보니 Base64 파일을 서버로 POST 한 다음 그 response로 받은 img url을 대신 에디터에 첨부하도록 하는 이미지 핸들러를 구현한 것이었다. 사실 또 다른 방법들이 있나 검색을 해봤는데 마땅한 방법들이 떠오르지 않아서 이 방법을 그대로 쓰기로 했다.

 

아직 서버와 통신을 해보지는 않았지만 아래와 같은 과정을 거칠 것이다.

 

1. 이미지 핸들러를 따로 생성해서 이미지를 첨부하면 base64 파일을 formdata에 첨부해서 POST를 한다.

2. response로 이미지 url을 받으면 url을 첨부한다.

3. 다 작성하고 제출버튼을 누르면 아래와 같은 과정을 거친다.

const formData = new FormData(); <- 폼데이터 생성
 formData.append('title', newTitle); <- 제목 추가
 formData.append('writing', newWriting); <- 본문 추가

(참고로 여기서 title과 writing은 전부 string!)

 

생각한대로 잘 구현이 될지는 미지수이지만, API 명세서가 오면 한 번 이렇게 구현해보려고 한다.

 

그리고 Quill에서 이미지를 드래그 앤 드롭을 할 수 있는 모듈이 있다길래 바로 사용해보려했다.

npm으로 quill-image-drop-module을 install하고 바로 import 해주었다. 블로그에서 나와있는 대로 구현을 했지만 TypeScript를 쓰고 있어서 타입 오류가 발생했다. 타입을 install해주면 될까 싶어서 npm install @types/quill-image-drop-module을 터미널에 입력해봤지만 오류가 발생했다. 사람들이 Quill을 별로 사용하지 않나하는 의문이 들었다.

아마 따로 declare 문구를 적어주면 될 것 같지만, 다음에 한 번 fix해보기로 했다.

---

4. 남은 목표

이제 무엇이 남았나 글을 써보며 정리해보려 한다(순서와 중요도는 관계가 없다.)

 

게시판(/board) 수정

- 게시판에서 본문을 표시하지 않기로 했으니 수정이 필요하다. 계속 카드를 쓸 것인지, 아니면 제목만 주르륵 보여줄 것인지 결정해야 한다. 제목만 보여주기로 하긴 했는데, 카드를 수정해서 계속 쓰면 어떨까 마음이 흔들린다.

 

마이페이지(/my) 수정

-  내가 쓴 글과 닉네임 변경/회원탈퇴 페이지를 분리하는 것이 괜찮아 보인다. 아니면 그대로 마이페이지 하나로 계속 유지해도 되고. 지금은 헤더에서 오른쪽 위를 클릭하면 바로 마이페이지로 이동하는데, 마이페이지를 두 개로 분리하면 삼단바 아이콘을 도입해서 navigation bar를 구현하는 것도 괜찮아 보인다.

 

로그인 구현(★ ★ ★ ★ ★)

- 가장 큰 난제다. 이론은 알고 있지만 실제로 성공해본 적은 없기에 지금은 그저 두려울 뿐이다. 구글 소셜 로그인 뿐만 아니라 이메일로 로그인까지 같이 구현해야 되기 때문에 백엔드를 맡은 친구와 같이 작업하며 친구 속을 터뜨릴 예정이다.

 

서버와의 연동

- 어제 친구가 ERD를 완성했다고 사진을 보내왔었다. 아마 머지 않아서 명세서를 보내오지 않을까. Swaggers를 사용한다는데 사실 Swaggers는 안써보고 POSTMAN만 써봐서 어떨까 기대(?)된다. 뭐 크게 다를 거 없다고 친구가 안심을 시키긴 했다.

친구가 보내준 ERD

Quill 에디터 개선

- 아까 언급했듯이 드래그 앤 드롭 모듈이 인식이 안된다. 나중에 수정을 해야한다.

 

다크모드 문제

- 사용자 기기가 다크모드일 때 특정한 제목들이 안 보이는 문제가 존재한다. 머지 않아 수정을 해야한다.

 

다 써보고나니 할 것들 천지이다. 하지만 너무 조급하진 않게, 하나씩 천천히 해보자.