/prography-front

[프로그라피 5기 React 사전 과제] 지원자: 한지원

Primary LanguageJavaScript

프로그라피 5기 React 사전 과제

지원자: 한지원

[필요한 기능 및 주의사항]

  • 입력한 todo, todos list에 추가

  • 'x' 버튼 클릭 시 list에서 삭제

  • list에서 클릭 시, 취소선 표시 + 완료된 상태

  • todos list 접기/펼치기

  • Hooks API 사용

  • 부트스트랩 사용 x

  • position: absolute 사용 x

[컨셉 및 계획]

todo 앱은 해야 할 일을 관리하는 앱.
우주 비행사에게 우주선을 통해 미션을 내려주는 컨셉으로 제작.

todo_plan_before

todo_plan_after

-할 일을 적고 우주선을 클릭하면 리스트에 추가
-'x' 버튼 클릭 시 리스트에서 삭제
-리스트 클릭 시, 취소선 표시 + 완료된 상태 (+깃발 색 변화)
-우주 비행사를 클릭하면 리스트 접기/펼치기 (펼치면 'Show me the missions' 사라지게)
(구체적인 이미지 및 일부 기능은 변경될 수 있음, 모든 이미지는 직접 제작함)
(추후 추가하고 싶은 기능: 우주선 클릭 시 우주선이 움직이며 연기를 뿜거나, 빛이 우주 비행사에게 도달하는 모션 / 배경에 별이 떠있어서 마우스 움직임에 따라 이동)

[완성본(20190904)]

pf2

할 일을 로켓에 실어 파란 달에게 보내면,

pf3

우주인이 미션을 잘 간직하고 있다.
완료된 미션은 흰 깃발, 해야할 미션은 검정 깃발.
삭제도 잘 된다.

pf1

작아도 커도 귀엽다.