부제: 슈퍼슈프림 익스트림스페셜 파워풀대시보드
알고리즘 문제 풀이도 밀리고 할일도 밀리고 디데이도 자꾸 잊어버려서 제가 쓰려고 만들었습니다
대시보드에서 할 일과 디데이, 시도했지만 풀지 못한 알고리즘 문제들, 자주 방문하는 웹사이트 링크 등을 한번에 정리해서 볼 수 있도록 하였습니다
브라우저 시작 페이지로 설정하면 편리합니다
$> yarn
$> yarn start
-
대시보드는 디데이, 할 일, 알고리즘 문제, 날씨, 바로가기 리스트 총 5개의 컨테이너로 구성되어 있습니다.
-
그리드 레이아웃을 이용하여 화면에 딱 맞게 구성하였습니다.
-
바로가기, 날씨, 디데이는 화면 너비에 따라 가로 또는 세로로 렌더링됩니다.
-
상단 닉네임은 사용자가 입력한 닉네임이 출력됩니다.
-
태블릿 (SD) 사이즈 가로폭에서는 그리드의 열의 개수가 줄어듭니다.
-
바로가기는 숨김 처리됩니다.
-
모바일에서는 그리드 없이 세로로 길게 렌더링됩니다.
-
좌측 사이드바는 모바일에서 가려지고, 햄버거 버튼을 눌렀을 때 위에서 나타납니다.
- 데이터를 추가하면 자동으로 로컬 스토리지에 저장되므로, 새로고침을 하거나 창을 닫아 세션이 만료되어도 데이터가 사라지지 않습니다.
- X 버튼을 누르면 삭제 확인 모달이 렌더링되며, 한번 더 확인 버튼을 누르면 삭제됩니다.
-
디데이 목록에 항목을 추가할 수 있습니다.
-
react-datepicker를 이용하여 날짜를 선택할 수 있습니다. -
테두리 색상을 선택할 수 있습니다.
-
이모지나 문자를 넣어 디데이를 꾸며줄 수 있습니다.
-
현재 디데이가 4개 등록되었다면, 추가로 등록할 수 없습니다.
-
디데이를 추가하면 이와 같이 렌더링됩니다.
-
오늘로부터 남은 일 수나 지나간 일 수가 같이 렌더링됩니다.
-
디데이가 큰 순서대로 (양수 => 음수) 정렬되어 렌더링됩니다.
-
PC 화면에서는 좌우 너비에 따라 디데이 블록 길이가 다르게 렌더링됩니다.
-
X 버튼을 누르면 삭제할 수 있습니다.
-
할 일 목록에 항목을 추가할 수 있습니다.
-
마감일이 있는 항목이라면, 마감일 체크박스를 클릭한 후
datepicker로 날짜를 선택합니다.
-
할 일 목록은 세로로 스크롤되는 형태로 보여집니다.
-
마감일이 얼마 남지 않은 항목부터 정렬되어 렌더링되며, 같은 마감일을 가진 항목이거나 마감일이 없을 경우 생성된 순서대로 렌더링됩니다.
-
X 버튼을 누르면 삭제할 수 있습니다.
-
풀 예정인 Baekjoon 문제를 추가할 수 있습니다.
-
문제 ID를 입력하고 제출하면,
react-query및 Solved.ac API를 이용하여 문제의 정보를 받아옵니다. -
문제 정보를 최초로 1번 받아온 뒤에는, 등록한 문제 정보가 로컬 스토리지에 저장되므로 다시 받아오지 않습니다.
- 존재하지 않는 문제번호를 입력했을 경우, 우상단에 '404 Not Found'가 출력되고 사라집니다.
-
등록한 문제는 Solved.ac 에서 분류된 티어표에 의해 테두리 색상과 좌측 이미지가 결정됩니다.
-
테두리 색상과 티어 색상을 일치시켜 한 눈에 레벨을 알아볼 수 있도록 하였습니다.
-
클릭하면 백준 내의 문제 페이지로 이동합니다.
-
X 버튼을 누르면 삭제할 수 있습니다.
-
설정 페이지에서 등록한 위도와 경도에 따라 지금 시점부터 3시간 간격으로 24시간동안의 날씨를 보여줍니다.
-
3시, 6시, 9시... 등 3시간 간격으로 값이 변합니다.
-
1분 간격으로 빠르게 자주 보는 페이지가 아니기 때문에, refetch 간격은 10분으로 설정하였습니다.
-
-
날씨에 따라 날씨와 어울리는 색상의 테두리가 좌측에 함께 출력됩니다.
-
가로 너비에 따라 반응형으로 가로스크롤로 출력되거나, 세로스크롤로 출력됩니다.
-
지역이 어딘지에 따라 상단 텍스트가 다르게 출력됩니다.
-
잘못된 위도 / 경도이거나, 날씨를 불러오지 못했을 경우 Error Boundary에 의해 설정된 Fallback 컴포넌트가 출력됩니다.
- 날씨 데이터를 받아오는 동안 로딩 스피너가 돌아갈 수 있도록 React-query와 Suspense를 통해 구현하였습니다.
- 바로가기 이름과 URL을 입력하면 파비콘과 함께 바로가기 블록이 렌더링됩니다.
-
블록을 클릭하면 각 페이지로 이동합니다.
-
X 버튼을 누르면 삭제할 수 있습니다.
-
태블릿 사이즈 화면에서는 공간 문제로 출력되지 않습니다.
-
설정 페이지에서 입력한 깃허브 아이디에 대하여 최근 1년간의 커밋 그래프를 출력합니다.
-
색상은 테마 색상에 맞추어 지정하였습니다.
-
존재하지 않는 아이디일 경우, 경고 컴포넌트가 대신 렌더링됩니다.
-
-
통계 페이지에 추가 기능을 더해갈 예정입니다.
-
설정 페이지는 대시보드에서 사용하는 값들을 설정할 수 있는 '프로필 설정' 섹션과, 데이터를 초기화할 수 있는 '데이터 초기화' 총 두 섹션으로 나누어져 있습니다.
-
프로필 설정의 각 input을 작성하고 변경 버튼을 누르면, 해당 값이 변경되어 저장됩니다.
-
닉네임은 최상단 내비게이션 바에 출력됩니다.
-
테마는 드롭다운만 존재하고, 아직 구현하지 않았습니다.
-
Github ID는 통계 페이지의 깃허브 커밋 그래프를 받아오는 데에 사용됩니다.
-
위도와 경도는 각각 날씨 데이터를 받아오는 데에 사용됩니다.
-
-
데이터 초기화 섹션의 각 버튼을 클릭하면 확인 모달이 출력되며, 다시 한번 체크하면 해당 데이터가 전부 지워집니다.
-
전체 초기화를 통해 모든 데이터 (알고리즘 문항, 할 일 목록, 디데이 등) 를 초기화할 수 있습니다.
-
datepicker스타일링 -
다양한 컬러 테마 추가 (다크모드 및 기타 색상팩)
-
드래그 앤 드롭으로 리스트 순서 변경
-
유튜브 임베드, 깃허브 API 연동을 통한 커밋 현황 등 추가 리스트 컨테이너
-
투두리스트 날짜별 필터링
-
디데이 개수 한도 및 알고리즘 문항 개수 한도 늘리기
-
로컬 스토리지를 사용하지 않고 서버 연결하여 넉넉한 용량 즐기기
-
캘린더에 할일 및 기념일 출력하기
.
├── assets
│ ├── images
│ └── svgs
├── components
│ ├── Button
│ ├── ColorPalette
│ ├── CustomDatePicker
│ ├── DeleteConfirmModal
│ ├── Error
│ ├── Layout
│ │ ├── ErrorMessage
│ │ ├── SideNavigationBar
│ │ ├── TopNavigationBar
│ ├── Loading
├── hooks
├── router
│ ├── Dashboard
│ │ ├── BaekjoonContainer
│ │ │ ├── BaekjoonAddFormElement
│ │ │ ├── BaekjoonListElement
│ │ │ └── states
│ │ ├── DDayContainer
│ │ │ ├── DDayAddFormElement
│ │ │ ├── DDayListElement
│ │ ├── ShortcutContainer
│ │ │ ├── ShortcutAddFormElement
│ │ │ ├── ShortcutListElement
│ │ ├── TodoContainer
│ │ │ ├── TodoAddFormElement
│ │ │ ├── TodoListElement
│ │ ├── WeatherContainer
│ │ │ ├── WeatherListElement
│ ├── Settings
│ │ ├── ResetAppElement
│ │ ├── SettingsFormElement
│ ├── Statistics
│ │ ├── GithubContainer
├── services
├── states
├── styles
│ ├── base
│ ├── constants
│ └── mixins
├── types
└── utils
최지윤 chichoon