OVERVIEW
-
프로젝트 소개
대시보드 프로그램인 Momentum을 참고하여 제작한 클론 사이트 프로젝트입니다. 사용자의 행동에 동적으로 반응하는 요소들을 Vanilla JS를 사용하여 구현하였습니다. 로컬 스토리지에 할 일 목록을 저장하고 불러오며, 원격 API를 호출하여 날씨 및 뉴스 정보를 제공합니다.
와이어프레임 및 기능 소개, 최종 디자인 순으로 구성하였습니다.
-
역할
디자인 및 프론트엔드 개발 전담 (1인 프로젝트)
-
사용 언어 및 툴(tool)
웹 디자인 툴:
Figma개발 툴:
Visual Studio Code, Github사용 언어:
HTML, CSS(SCSS), Javascript(Vanilla)
FEATURES
현재 사용 중인 기기 또는 브라우저의 가로 폭(px 기준)에 반응하여 와이어프레임이 소개됩니다. (모바일/태블릿/데스크톱)
-
로그인 화면
로그인에 필요한 사용자 이름을 전달받습니다. 사용자 이름은 저장된 할 일 목록을 불러오는 데 필요합니다. 기존 사용자가 아닐 경우, 로컬 스토리지에 새롭게 저장됩니다.
-
홈 화면 (로그인 후)
- 로그인 후 사용할 수 있는 메뉴입니다. 각 기능을 팝업 창 형식으로 보여줍니다.
- 원격 API를 호출하여 사용자 지역의 날씨 정보를 제공합니다. 문자열로 전달받은 날씨 상태를 아이콘으로 변환하여 시각적으로 전달합니다.
- 현재 시각을 오전/오후를 구분하여 표시합니다.
- 전달받은 사용자 이름을 기억하여 시간대에 맞는 환영 인사와 함께 표시합니다. 현재 사용자 이름이 로컬 스토리지에 저장되어 새로고침 후에도 동일하게 보입니다.
- 무작위로 명언 및 배경 이미지를 보여줍니다. 새로고침을 하면 변경됩니다.
- 로그아웃 버튼입니다. 로그아웃하면 현재 사용자 이름을 더 이상 기억하지 않으며 로그인 화면으로 새로고침 됩니다.
-
할 일 팝업 창
사용자 이름으로 저장된 할 일 목록을 보여줍니다. 할 일을 추가하고 삭제할 수 있습니다.
-
뉴스 팝업 창
원격 API를 호출하여 뉴스 정보를 불러옵니다. 전달받은 오브젝트에서 헤드라인과 출처를 추출하여 목록으로 나열합니다.
FINAL DESIGN
-
로그인 화면
-
홈 화면
-
할 일 팝업 창
-
뉴스 팝업 창
