[메모 트리 프로젝트] 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
  • 저장
  • 불러오기
  • 기본 값 설정

gif가 끊기는 경우 이미지를 클릭하면 정상적으로 확인이 가능합니다.