[개인블로그] - 글쓰기(Post) 버튼 구현

제작 80% 완성본

좌측은 textarea를 통해서 글을 작성하는 영역과 우측에는 적은 내용들을 보여주는 preview의 영역으로 구현했다.

 

velog의 영감을 받아 velog의 글쓰기보다 더 편하게 글을 쓸수있도록 노력했다.

 

기능

1. textarea의 영역에 작성된 내용은 우측의 영역에 markdown의 형식을 HTML화 시켜서 보여주어야한다.

2. H1~H4까지의 버튼을 눌렀을 경우 상황에 맞는 # 의 값을 넣어준다. 이때, 사용자가 H1에서 H4로 변화를 주고 싶을 수 있기때문에 조건문을 적용하여 버튼을 누른형식으로 바꿔주도록 한다.

3. 굵음, 이텔릭, 취소선은 사용자가 그냥 눌러서 사용하거나, 영역을 정해놓고 버튼을 누를수 있기 때문에 두가지의 경우의 수로 나누어 개발을 한다.

4. 인용문의 경우에는 보통 한줄 전체를 먹기때문에 버튼을 누를경우 제일 앞부분에 > 를 넣어준다.

5. 코드의 경우 무조건적으로 새줄에 띄워서 작성을 하도록하고 만약 사용자가 영역을 지정했다면 그 영역만큼을 더해 새줄로 인계하도록 한다.

 

마지막 5번에서 velog와의 기능적 차이가 존재하는데 내 입장에선 매번 저 코드버튼을 누를때마다 글이 써지고 있는 상황에서 누르게 되면 그 줄을 포함해서 코드영역이 잡히는것이 매우 불편했다.. 적용도 안되고..

때문에, 내가 사용하기 좋도록 변경을 했다는것에 의미가 있다.

 

개인적으로 제일 어려운 부분

 

6. 이미지를 누를경우 숨겨져있던 input이 전체 페이지에 깔리도록 하며 사용자가 이미지 파일을 선택시 supabase의 스토리지에 저장과 동시에 html을 inner 해주어야 한다. 만약, 사용자가 이미지를 넣었었지만 개시글을 개시할때 해당 이미지 파일을 사용하지 않을 수 있는데, 이때는 supabase에서 사용하지 않는 이미지를 지울 수 있도록 해야한다.

7. 링크영역은 velog와 같이 링크주소를 넣는 폼을 만들어서 사용자가 폼안에 링크주소를 입력한뒤 확인버튼을 누르면 inner가 되면서 맨앞에 링크 텍스트 라는 텍스트가 포커스되도록 해야한다.

8. preview 버튼을 누를경우 모바일 환경과 데스크탑 환경에서 서로 호환이 다르게 되도록 설계한 뒤에 preview영역이 닫혔다 열렸다 할 수 있도록 한다. 여기서 모바일의 경우엔 preview가 화면 전체를 덮을 수 있도록 한다.

9. velog와의 차이점을 두기위해서 preview의 영역에서 사용자가 현재 작성중인 위치를 observing 할 수 있는 기술을 도입한다.

observing 설정 포인트에는 start, nomal, end 영역이 존재하며 만약 사용자가 start 영역으로 설정할 경우 사용자가 현재 작성중인 라인을 우측의 preview에서 확인하고 제일 최상단에 커서가 위치하도록 조정한다. normal의 경우에는 중앙에 위치하도록 하며, end의 경우에는 가장 아래쪽에 위치하도록 한다. 만약 이때 영역이 충분하지 않다면(스크롤이 없는 상태라면) observing 기술이 판단하여 스크롤이 있을 경우에 사용되도록 한다. [변수 : 사용자마다 각기 다른 화면 크기가 있음]