[메모 트리 프로젝트] 4. UI 구현 - 1
프로젝트 글 목차
2021.03.13 - [메모 트리 프로젝트] 1. 기획
2021.03.13 - [메모 트리 프로젝트] 2. 설계 - 와이어프레임, 요구 사항
2021.03.14 - [메모 트리 프로젝트] 3. 설계 - 객체 모델링
2021.03.18 - [메모 트리 프로젝트] 4. UI 구현 - 1
2021.03.19 - [메모 트리 프로젝트] 5. UI 구현 - 2
2021.03.20 - [메모 트리 프로젝트] 6. 나머지 프론트엔드 작업
2021.03.20 - [메모 트리 프로젝트] 7. 배포 및 후기
UI 구현
생각한대로 스타일을 작성했지만 생각지도 못한 암초를 만나게 됐다.
흐름이 우측으로 발생하는 특성상 형제 요소의 상위 요소가 여러 자식 요소를 가지게 될 때, 다른 형제 요소의 영역을 침범하는 문제가 발생한다.
이 문제는 dfs 방식으로 앞에 위치한 요소부터 렌더링을 진행한 이후
다음 요소를 이전 요소의 최종 범위를 벗어난 위치에서 시작하도록 좌표를 설정하면 해결할 수 있는 부분이다.
곰곰히 생각해보니 position: absolute; 와 매번 계산하는 top, left 프로퍼티를 없애고 float 이나 grid 등으로 접근하면
굳이 위치를 계산할 필요가 없다는 판단을 했고, 프로퍼티를 수정하게 됐다.
기존 스타일
.item {
position: absolute;
display: flex;
padding: 0.5rem;
border: 0.2rem solid #333;
border-radius: 3px;
width: 12rem;
cursor: pointer;
height: 3.5rem;
align-items: center;
}
<div class="item item-folder" data-name="자바스크립트" style="left: 18rem;">
<div class="">자바스크립트</div>
</div>
<div class="item item-folder" data-name="HTML" style="left: 18rem; top: 6rem;">
<div class="">HTML</div>
</div>변경한 스타일
.item {
display: grid;
grid-auto-flow: column;
grid-template-columns: minmax(5rem, 12rem);
grid-gap: 3rem;
}
<div class="item item-folder" data-name="자바스크립트">
<div class="">자바스크립트</div>
</div>
<div class="item item-folder" data-name="HTML">
<div class="">HTML</div>
</div>다음으로 고민이 되는 부분은 형제 요소에 추가로 하위 요소를 추가할 때, 선을 새로 그려주어야 하는 부분이다.
현재는 미구현인 상태로 오늘 중으로 마무리하고 배포까지 할 계획이다.. ::)
진행 상황
- item
- 렌더링: 현재 상하위 요소간 라인 연결 미구현
- 하위 요소 추가
- 내용 변경
- 이름 변경
- 삭제: contentmenu의 삭제와 연계
- toObject (로컬스토리지 및 mongoDB 저장을 위함)
- contentview
- 렌더링
- 닫기
- 텍스트 불러오기
- 상태 토글
- 수정: item 내용 변경과 연계
- contentmenu
- 렌더링
- 타입에 따라 다른 선택지 제공
- 폴더 생성
- 파일 생성
- 글자 색상변경
- 배경 색상변경
- 테투리 색상변경
- 삭제: item의 삭제와 연계
- 캐시, localStorage
- 저장
- 불러오기
- 기본 값 설정
