[Todo list] 09. scss 입히기

개발은 뭐랄까... 코드를 짜고 있으면... 레포트나 논문, 자소서를 쓰던..

그시절 창작의 고통이 떠오르며 예술가가 되는 기분이 든다. 특히.. css에서 많이 그렇게 생각한다. 

 

기존의 요구사항에 있던 다른 조건들에서는 할 수 있는건 거의다 한것 같고..

'선택구현' 에 있던 조건들은 표현이 애매모호하거나, 개발환경 세팅을 다시해야되는것들이 남아있다. 

 

그래서 이제는 미루고 미뤘던 css를 작성 할 때가 온 것 같다.

 

 

---

대충 쪼개서 보면 크게 3가지로 고려할 수 있지 않을까?

 

1. 상단 부분 (Item 추가 / 필터 버튼 / 정렬 버튼)

-- 

 

2. 개별 Item 

-- 각 workState 에 따라서 ( wait / going / end )  테두리 색을 다르게 줘도 좋을것 같다. ? 

 

3. 전체적인 배치 

-- 다크모드

-- 색깔모드(테마색 , state 로 관리해서 특정 색의 조합으로 페이지 렌더링 ) 

 

---

ItemAdd 관련

- input -> textarea 로 변경 :  contents 의 경우 여러줄 입력이 필요하다고 생각 / enter 키로 줄바꿈 위해서 이벤트 변경

- enter 키 줄바꿈 반영이 안됨 -> 출력할 곳에서  pre 태그로 감싸준다.

     <div class='contents'><pre>${item.contents}</pre></div>

 

- textarea 안에 background 로  줄 긋기 

- repeating-linear-gradient 가 핵심이며, 글자 폰트에 따라서 간격을 잘 조절해야됨 . 

        // 줄긋기

        background-attachment:local;

        background-image:

          // 라인 좌우 여백

          linear-gradient(to right, white 10px, transparent 10px),

          linear-gradient(to left, white 10px, transparent 10px),

          repeating-linear-gradient(white, white $background_line+(-1), #ccc $background_line);

       

        line-height: $background_line;

        padding-top: 3px;

 

참고

https://skylove1982.tistory.com/entry/textarea-%EC%97%90%EC%84%9C-%EB%9D%BC%EC%9D%B8-%EA%B7%B8%EB%A6%AC%EA%B8%B0-%ED%9A%A8%EA%B3%BC-%EB%A7%88%EC%B9%98-%EC%97%B0%EC%8A%B5%EC%9E%A5-%EA%B0%99%EC%9D%80-%EB%8A%90%EB%82%8C%EC%9D%B4-%EB%82%98%EB%8A%94-CSS-%ED%9A%A8%EA%B3%BC-repeating-linear-gradient

---

 

대충 결과물..

 

 

 

일단은 여기까지 마무리.. 

 

https://github.com/js0616/todoList

 

---

 

그외 개선 방향

 

- modal 에서 수정 기능을 해야될까? 

-> 해당 item 에 대한 '상세 정보 제공 기능' 정도로 바꿔도 되지않을까

 

- Nav bar 같은거 만들어서 상단 메뉴를 조금 더 깔끔하게 만드는건 어떨까.

- 색깔 클릭하는것에 따라서 전체 색 바뀌도록 , 

- 쿠키에 정보등을 저장해서 페이지를 다시 켰을때, 해당 일정 기록, 상태등이 남아있게 할 수 있을까...?