2023.02.15 - 2022.02.22

개요

퀀터스 홈페이지에서 자산배분 탭의 전략 배분 메뉴를 클론코딩하는 과제입니다. 안내된 페이지에 따라 요구사항에 맞게 구현하려고 최선을 다했습니다.

기술 스택 및 라이브러리

JavaScript, React, react-dom, react-router-dom, redux, redux-toolkit, styled-components, styled-reset, react-icons, react-datepicker, date-fns, antd, ant-design/icons, Vite

과제 진행 과정

💾 Header 레이아웃 및 기능 구현

퀀터스 홈페이지와 일치하게 헤더 레이아웃과 기능을 구현했습니다. 레벨 선택 시 localStroage에 바로 반영될 수 있게 구현했고, 로그인 클릭시에는 로그인 페이지로 이동할 수 있습니다.

Nav바는 react-router-dom의 NavLink를 이용해 active스타일링과 이동기능을 구현했습니다. 공지사항을 클릭하면 해당하는 링크로 이동할 수 있도록 구현했습니다.

💾 자산 배분 레이아웃 및 기능 구현

📈 전략 이름

제목을 한 글자 이상 입력해야만 전략 저장 버튼이 활성화 될 수 있게 구현했습니다.