---

To Do List & Bucket List 만들기

---

0. Intro

리액트와 자바스크립트 그리고 디자인과 퍼블리싱 실력 향상을 위해 진행한 토이 프로젝트입니다. 프로젝트를 진행하면서 마주친 문제점들과 해결방법, 추가적인 공부가 필요하다고 느낀 부분, 그리고 처음 도입해본 기술들의 리뷰를 중점으로 글을 작성하여 다음 프로젝트는 더욱 깔끔하고 순조롭게 진행하는것이 이 글의 목적입니다.
Git Hub Repositories

이번 토이 프로젝트의 목표

✔ 최대한 시멘틱하게 코드 작성하기
✔ 컴포넌트를 적극적으로 재사용하기
✔ github의 branch를 사용하여 협업하기

---

1. 개발 환경

• Design: Figma
• Editor: Visual Studio Code
• Tech Stack: React, styled-component

이전까지 진행하였던 프로젝트와의 가장 큰 차이점은 styled-component를 도입했다는 것입니다. styled-component를 사용하면서 어떤 부분이 매력적으로 느껴졌는지도 작성해 보겠습니다.

---

2. UX/UI

디자인 초반에는 페이스북이나 다른 개발자분들이 만드신 To Do List 디자인을 단순히 클론코딩하려고 했으나, 클론코딩만으론 디자인 감각을 키울 수 없을 것 같아 직접 디자인을 하게 되었습니다.

와이어 프레임

(와이어프레임이라고 부르기도 민망한 초기 디자인)

최종 디자인

프로젝트의 대표 기능인 To Do List & Bucket List '작성'에 초점을 두어 메모장의 느낌이 드는 배경사진과 직접 작성한 손글씨 느낌의 글꼴을 선정하게 되었습니다.

---

3. 주요 기능

3-1. 로그인 & 회원가입

기능 리스트

• 토글방식 버튼으로 비밀번호 숨김/보임 기능 구현
• 아이디와 비밀번호를 모두 입력해야 로그인 활성화

---

3-1-1. 비밀번호 숨김/보임 기능

눈 모양의 버튼을 클릭할 시 비밀번호가 보이고 다시 한번 누르면 숨겨지는 토글방식의 버튼입니다.
버튼을 클릭할 때마다 버튼 모양이 바뀌는 디테일을 한 스푼 추가해 봤습니다.

이러한 시각적 디테일들이 모여 사용자 경험을 향상시킨다고 생각합니다 ❗❗

이 부분에서 styled-component를 사용하니 상당히 편리했습니다.
특정 이벤트 발생 시 CSS가 변경되는 기능은 정말 많이 사용되는데, 기존 방식보다 코드 작성이 훨씬 간편해졌습니다.

기존 방식의 토글버튼

<button type="button" onClick={scrapHandle}>
  {isScrappedChange === "No" ? (
  	<img className={styles.RightImg} 
    src={Star} 
    alt="텅 빈 별" />
  ) : (
    <img
      className={styles.RightImg}
      src={FillStar}
      alt="꽉 찬 별"
    />
  )}
</button>

이전 프로젝트에서 만들었던, 클릭 이벤트마다 사진이 바뀌는 버튼입니다. 버튼 클릭시 state와 조건문을 사용하여 스타일을 직접 변경하거나, CSS파일에 두 가지 스타일을 만든 뒤 className을 변경하는 방법 등이 있습니다.

---

styled-component를 사용한 토글버튼

//LoginPage.js
<Eye onClick={togglePasswordVisibility}>
  <EyeState
  	done={isPasswdVisible}
  />
</Eye>

//style.js
export const EyeState = styled.div` 
background-image: url(${closeeyeimg});
${props => props.done && css`    		
		background-image: url(${openeyeimg});
	`}
`;

styled-component는 CSS파일에서 props를 전달받아 스타일을 바꿀 수 있다는 장점이 있습니다. 이로인해 jsx부분이 간결해진걸 볼 수 있습니다.

---

그런데 이렇게 코드를 작성하니 경고메시지가 발생했습니다...
Warning메시지라서 기능적으로 영향은 없었지만 괜히 찜찜해서 구글링해본 결과, styled-component의 style.js파일로 props를 전달할 때의 key값이 문제가 되었습니다.

key값을 전달할때 styled-component의 props로 전달하는지, HTML의 속성을 적용하는것인지 구별할 수 없다는 것이 그 이유입니다.

해결책 아주 간단합니다. 바로 key값을 정할때 앞에 $기호를 붙이는 것 입니다.

수정된 코드

//LoginPage.js
<Eye onClick={togglePasswordVisibility}>
  <EyeState
  	$done={isPasswdVisible}      //수정된 위치
  />
</Eye>

//style.js
export const EyeState = styled.div` 
background-image: url(${closeeyeimg});
${props => props.$done && css`     //수정된 위치
		background-image: url(${openeyeimg});
	`}
`;

해결 완료!

---

3-1-2. 아이디와 비밀번호를 모두 입력해야 버튼 활성화

아이디와 비밀번호의 입력을 useState를 사용하여 실시간으로 전달받아 빈칸이 아닌 경우에만 로그인 버튼이 활성화되는 간단한 기능입니다. 이 기능 역시 styled-component를 사용하여 간단하게 구현하였습니다.

styled-component를 사용한 간단한 조건문

export const Button = styled.button`
  width: 260px;
  height: 50px;
  position: absolute;
  top: 120px;
  background-color: #3DA5F5;
  color: white;
  border-radius: 5px;
  border: none;
  ${({ disabled }) => disabled && disabledStyles} 
`;

const disabledStyles = css`
  opacity: 0.6;				//연하게
  pointer-events: none;		//버튼 클릭 불가
`;

매개변수 disabled가 false인 경우(입력값이 하나라도 빈칸인 경우) 버튼의 색을 연하게 만들고 클릭이 불가능하게 만들었습니다.

---

3-2. To Do List & Bucket List 홈 화면

기능 리스트

• 체크박스 클릭시 Progress bar 증가
• react-slick 라이브러리를 사용한 슬라이더

---

3-2-1. 목표 달성 시 Progress bar 증가

체크 박스를 클릭할때마다 Progress bar가 증가하는 기능입니다. 라이브러리 사용 없이 css와 styled-component만을 사용하여 구현하였습니다. 달성한 목표 / 전체 목표를 서버에서 계산하여 퍼센트로 전달 받았습니다.

3-2-2. 목표를 3개씩 보여주는 Slider

React-slick라이브러리를 사용하여 Slider를 구현하였습니다. React-slick에 대해서는 제가 다른 글에서 자세하게 작성하였습니다. 이 글을 봐주시면 감사하겠습니다.
React-Slick 라이브러리 커스텀하기