지금까지 만든 화면 | 만들어야 하는 화면(피그마) |
|---|
현재 PostDetail.vue에다가 전체 페이지의 내용을 작성 중이고 댓글 부분을 따로 컴포넌트화 해서 PostComment.vue(노란색)로 분리시켰다.
그런데 Post내용이 담긴 것과 Comment내용이 담긴 것의 배치를 어떻게 해야할 지가 고민이다.
- 프로젝트 설정으로 인해 기본 가운데 정렬된 것을 flex의 속성 설정으로 post를 맨 위부터 시작되도록 할 것이다.
-> post 내용에 관한 post-detail-container(초록)와 comment에 관한 comment-container(노랑)가 담긴 center-container를 height:100%으로 설정하여 공간을 만들어 주고 justify-content: flex-start;를 통해 맨 위에서 부터 공간을 차지하게 하였다.
- post의 내용의 길이가 항상 같지 않기 때문에 post-detail-container의 최소와 최대의 높이를 고정해놓아야 할 것 같다.
-> flex의 아이템의 기본 크기를 설정할 수 있는 flex-basis를 이용하는 게 좋을 것 같다고 생각했다. 그래야 유연한 박스크기를 설정할 수 있기 때문이다.
-> 만들다보니까 깨닫게 된 건데 최대/최소 높이를 설정 안 해도 될 것같다.
왜냐하면 아래와 같이 글의 길이에 따라 어차피 박스의 크기가 달라짐으로 글의 박스 간의 간격을 신경 쓰면 굳이 최소 크기가 필요한 것 같지는 않다. 그냥 글자 수 제한 정도만 해도 될 것 같다. 근데 글자 수 제한은 어떻게 하는 거지...?
 |  |
|---|
- post의 내용 이후엔 모두 comment-container(노랑)의 영역으로 만들기
-> 처음엔 height="100%"으로 설정하려 했지만 그렇게 되면 부모요소에 대한 100%로 이기 때문에 post의 영역의 뒤에서 부터 시작하게 된다. 따라서 post영역 이외의 나머지를 모두 차지하게 하려면 flex-grow: 1;를 사용하면 된다.
post와 comment의 구분을 주기 위해 center-container에 gap:5px;를 설정하여 떨구고 배경색을 회색으로 바꿔 마치 선이 있는 듯한 느낌을 주었다. post와 comment 간의 전체적인 배치는 끝났따.
위 내용을 모두 적용하니 아래와 같은 상태가 되었다!
수정/삭제 팝업 기능(edit-icon) 컴포넌트화에 대한 고민
comment의 css까지 적용했는데 생각해보니까 댓글도 수정 삭제 기능이 필요한 걸 깨달았다...아무나 댓글을 삭제할 수 있지 않기 때문에 원래의 계획이던 쓰레기통 아이콘은 사용할 수 없다.
대신 이전 글인 topbar를 만들었을 때처럼 edit-icon이 필요하다. edit-icon을 통해 작성자가 댓글을 수정/삭제 하고, 사용자가 comment를 신고할 수 있게 할 것이다. 따라서 이전 topbar에 만든 edit기능을 컴포넌트화 할 생각이다. post의 수정/삭제와 comment의 수정/삭제 총 2번의 재사용을 할 수 있고, 나중에 추가로 사용할 가능성이 높은 기능이기 때문이다.
멋진 개발자