땡스클립 프로젝트 - 개인 개발 회고 (3) 편지지 에디터 공통 컴포넌트 제작

편지지 에디터 공통 컴포넌트 제작

관련 PR

• https://github.com/GDSC-CAU/Frontend-final-project/pull/10

기능

• 편지지 에디터를 만들기 위해 필요한 UI 컴포넌트를 제작
• 전체 컴포넌트 설명
  • Container 컴포넌트는 옵션 아이콘이나, 에디터 툴바를 담는 가장 바깥의 UI 컴포넌트이다
  • Toolbar는 옵션을 선택할 수 있는 상단의 툴바를 의미하고, EditorToolBar는 옵션에 따라 세부옵션을 조정할 수 있는 하단의 툴바를 의미한다 = 여기 내부에서 Container 컴포넌트를 사용
  • LetterEditorLayout 컴포넌트는 편집기 전체를 담는 가장 바깥의 UI 컴포넌트이다. 즉, 해당 컴포넌트의 하위 컴포넌트(children)로 ToolBar, EditorToolBar 그리고 편지 콘텐츠 자체가 담긴 Letter 컴포넌트가 배치된다
• Container 컴포넌트 구현
• EditorToolBar 컴포넌트 구현
• LetterEditorLayout 컴포넌트 구현
• Toolbar 컴포넌트 구현
  • 옵션을 무엇을 선택했냐에 따라 editorToolbar가 동적으로 바뀌게 함

Keep

프로젝트 완료 후에도 간직하고 싶은 잘했던 것 / 좋았던 것

ex) "~기술 적용을 했더니 효율적으로 ~를 할 수 있었다.”

• LetterEditorLayout에서 어떤 툴바옵션이 선택되었는지에 따라 EditorToolBar내용이 바뀌어야 했다.
  • 즉, 하위컴포넌트에서 상위컴포넌트로 데이터를 역으로 전달해야하는 상황이었다.
  • handleClickOptions함수를 Toolbar의 props로 전달하고, Toolbar에서 해당 함수의 파라미터를 통해 다시 상위 컴포넌트로 데이터(선택한 옵션)를 전달하는 구조로 작성했더니 잘 동작하였다.

Problem

프로젝트 중 겪었던 어려움

ex) "~기능 적용 중 ~이슈가 발생하였다.”

1. 옵션이 실제 적용되어야 하는 부분인(어쩌면 가장 중요한 부분인) 편지지 파트는 어떻게 렌더링해야하는 것인지 감이 오지 않았다.
2. 편지지 편집기에서, 편지지 위에 툴바들이 우측 상단과 하단에 고정되어 배치해야하는데 css적 어려움이 있었다

Try

Problem 중 해결된 사항에 대한 해결 방법 / 해결되지 않은 사항에 대한 피드백

ex) "~기능 적용 중 발생한 ~이슈 해결을 위해 ~를 하였다.”

1. 편지지 파트 자체는 따로 Letter 컴포넌트로 뺐다. 그리고 필요한 값은 jotai로 가져온다.
   • 편지지 안에는 편지지 형태, 텍스트, 폰트 유형, 색깔, 스티커 등 여러 하위컴포넌트가 적절히 배치되는 구조이다.
   • 옵션에서 무엇을 클릭했냐에 따라 letter 컴포넌트의 props로 데이터를 전달해줄 필요없이, 결국 letter 내에 필요한 값들은 추후 비디오에 렌더링되는 값(즉, jotai에서 전역변수로 관리되고 있는 값)과 동일하기 때문에 쉽게 useAtom을 활용하여 값을 가져올 수 있었다.
2. css : relative & positive 활용을 잘 해보자 (역시 css가 제일 어렵다…)