diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..fdf604b Binary files /dev/null and b/.DS_Store differ diff --git a/README.md b/README.md index 017dd2b..1a78e86 100644 --- a/README.md +++ b/README.md @@ -1 +1,59 @@ -# FE-Todo \ No newline at end of file +# FE-Todo (TESTIFY 앱 구현) + +## 요구사항 분석 및 작업 목록 정리 + +### 메인 UI 구현 + +- [x] 메인 UI 구현 - 헤더 UI +- [x] 메인 UI 구현 - 카드 구현 +- [ ] 메인 UI 구현 - 칼럼 영역 UI (카드 표시) + +### 메뉴(히스토리) 구현 + +- [ ] 메뉴(히스토리) 구현 - 레이어 UI 및 닫기 버튼 구현 +- [ ] 메뉴(히스토리) 구현 - 슬라이드 애니메이션 +- [ ] 메뉴(히스토리) 구현 - 액션 UI 구현 (Mock 데이터 사용) +- [ ] 메뉴(히스토리) 구현 - 스크롤 구현 +- [ ] 메뉴(히스토리) 구현 - 삭제 버튼 구현 (+알럿창) + +### 새로운 카드 등록 기능 구현 + +- [ ] 새로운 카드 등록 기능 구현 - 새로운 카드 UI +- [ ] 새로운 카드 등록 기능 구현 - [+버튼] 기능 구현 +- [ ] 새로운 카드 등록 기능 구현 - 등록 및 취소 기능 구현 + +### 카드 이동 + +- [ ] 카드 이동 - 드래그 처리 +- [ ] 카드 이동 - 잔상 처리 +- [ ] 카드 이동 - 드롭 처리 + +### 카드 삭제 + +- [ ] 카드 삭제 - X버튼 시 등장하는 알럿창 구현 +- [ ] 카드 삭제 - 삭제 시 리스트에서 정보 삭제 + + +### 카드 수정 + +- [ ] 카드 수정 - 수정 카드 UI 구현 +- [ ] 카드 수정 - 수정 내용 반영하기 + + +### 카드 정렬 + +- [ ] 카드 정렬 - 정렬 구현 +- [ ] 카드 정렬 - 애니메이션 구현 + + + + +
diff --git a/components/card_component.html b/components/card_component.html new file mode 100644 index 0000000..c7fe350 --- /dev/null +++ b/components/card_component.html @@ -0,0 +1,22 @@ + +
+
+
Task 1
+
Description 1
+
author by YooN
+
+
+ edit task + delete task +
+
diff --git a/components/column_component.html b/components/column_component.html new file mode 100644 index 0000000..5c6aa1e --- /dev/null +++ b/components/column_component.html @@ -0,0 +1,45 @@ + +
+
+
+ 칼럼 이름 + 0 +
+
+ add task + delete column +
+
+ + +
diff --git a/components/history_modal.html b/components/history_modal.html new file mode 100644 index 0000000..e69de29 diff --git a/css/font/pretendard-subset.css b/css/font/pretendard-subset.css new file mode 100644 index 0000000..c8a0add --- /dev/null +++ b/css/font/pretendard-subset.css @@ -0,0 +1,89 @@ +/* +Copyright (c) 2021 Kil Hyung-jin, with Reserved Font Name Pretendard. +https://github.com/orioncactus/pretendard + +This Font Software is licensed under the SIL Open Font License, Version 1.1. +This license is copied below, and is also available with a FAQ at: +http://scripts.sil.org/OFL +*/ + +@font-face { + font-family: "Pretendard"; + font-weight: 900; + font-display: swap; + src: local("Pretendard Black"), + url(./woff2-subset/Pretendard-Black.subset.woff2) format("woff2"), + url(./woff-subset/Pretendard-Black.subset.woff) format("woff"); +} + +@font-face { + font-family: "Pretendard"; + font-weight: 800; + font-display: swap; + src: local("Pretendard ExtraBold"), + url(./woff2-subset/Pretendard-ExtraBold.subset.woff2) format("woff2"), + url(./woff-subset/Pretendard-ExtraBold.subset.woff) format("woff"); +} + +@font-face { + font-family: "Pretendard"; + font-weight: 700; + font-display: swap; + src: local("Pretendard Bold"), + url(./woff2-subset/Pretendard-Bold.subset.woff2) format("woff2"), + url(./woff-subset/Pretendard-Bold.subset.woff) format("woff"); +} + +@font-face { + font-family: "Pretendard"; + font-weight: 600; + font-display: swap; + src: local("Pretendard SemiBold"), + url(./woff2-subset/Pretendard-SemiBold.subset.woff2) format("woff2"), + url(./woff-subset/Pretendard-SemiBold.subset.woff) format("woff"); +} + +@font-face { + font-family: "Pretendard"; + font-weight: 500; + font-display: swap; + src: local("Pretendard Medium"), + url(./woff2-subset/Pretendard-Medium.subset.woff2) format("woff2"), + url(./woff-subset/Pretendard-Medium.subset.woff) format("woff"); +} + +@font-face { + font-family: "Pretendard"; + font-weight: 400; + font-display: swap; + src: local("Pretendard Regular"), + url(./woff2-subset/Pretendard-Regular.subset.woff2) format("woff2"), + url(./woff-subset/Pretendard-Regular.subset.woff) format("woff"); +} + +@font-face { + font-family: "Pretendard"; + font-weight: 300; + font-display: swap; + src: local("Pretendard Light"), + url(./woff2-subset/Pretendard-Light.subset.woff2) format("woff2"), + url(./woff-subset/Pretendard-Light.subset.woff) format("woff"); +} + +@font-face { + font-family: "Pretendard"; + font-weight: 200; + font-display: swap; + src: local("Pretendard ExtraLight"), + url(./woff2-subset/Pretendard-ExtraLight.subset.woff2) format("woff2"), + url(./woff-subset/Pretendard-ExtraLight.subset.woff) format("woff"); +} + +@font-face { + font-family: "Pretendard"; + font-weight: 100; + font-display: swap; + src: local("Pretendard Thin"), + url(./woff2-subset/Pretendard-Thin.subset.woff2) format("woff2"), + url(./woff-subset/Pretendard-Thin.subset.woff) format("woff"); +} diff --git a/css/font/pretendard.css b/css/font/pretendard.css new file mode 100644 index 0000000..52af3d5 --- /dev/null +++ b/css/font/pretendard.css @@ -0,0 +1,89 @@ +/* +Copyright (c) 2021 Kil Hyung-jin, with Reserved Font Name Pretendard. +https://github.com/orioncactus/pretendard + +This Font Software is licensed under the SIL Open Font License, Version 1.1. +This license is copied below, and is also available with a FAQ at: +http://scripts.sil.org/OFL +*/ + +@font-face { + font-family: "Pretendard"; + font-weight: 900; + font-display: swap; + src: local("Pretendard Black"), + url(./woff2/Pretendard-Black.woff2) format("woff2"), + url(./woff/Pretendard-Black.woff) format("woff"); +} + +@font-face { + font-family: "Pretendard"; + font-weight: 800; + font-display: swap; + src: local("Pretendard ExtraBold"), + url(./woff2/Pretendard-ExtraBold.woff2) format("woff2"), + url(./woff/Pretendard-ExtraBold.woff) format("woff"); +} + +@font-face { + font-family: "Pretendard"; + font-weight: 700; + font-display: swap; + src: local("Pretendard Bold"), + url(./woff2/Pretendard-Bold.woff2) format("woff2"), + url(./woff/Pretendard-Bold.woff) format("woff"); +} + +@font-face { + font-family: "Pretendard"; + font-weight: 600; + font-display: swap; + src: local("Pretendard SemiBold"), + url(./woff2/Pretendard-SemiBold.woff2) format("woff2"), + url(./woff/Pretendard-SemiBold.woff) format("woff"); +} + +@font-face { + font-family: "Pretendard"; + font-weight: 500; + font-display: swap; + src: local("Pretendard Medium"), + url(./woff2/Pretendard-Medium.woff2) format("woff2"), + url(./woff/Pretendard-Medium.woff) format("woff"); +} + +@font-face { + font-family: "Pretendard"; + font-weight: 400; + font-display: swap; + src: local("Pretendard Regular"), + url(./woff2/Pretendard-Regular.woff2) format("woff2"), + url(./woff/Pretendard-Regular.woff) format("woff"); +} + +@font-face { + font-family: "Pretendard"; + font-weight: 300; + font-display: swap; + src: local("Pretendard Light"), + url(./woff2/Pretendard-Light.woff2) format("woff2"), + url(./woff/Pretendard-Light.woff) format("woff"); +} + +@font-face { + font-family: "Pretendard"; + font-weight: 200; + font-display: swap; + src: local("Pretendard ExtraLight"), + url(./woff2/Pretendard-ExtraLight.woff2) format("woff2"), + url(./woff/Pretendard-ExtraLight.woff) format("woff"); +} + +@font-face { + font-family: "Pretendard"; + font-weight: 100; + font-display: swap; + src: local("Pretendard Thin"), + url(./woff2/Pretendard-Thin.woff2) format("woff2"), + url(./woff/Pretendard-Thin.woff) format("woff"); +} diff --git a/css/font/pretendardvariable.css b/css/font/pretendardvariable.css new file mode 100644 index 0000000..c16591a --- /dev/null +++ b/css/font/pretendardvariable.css @@ -0,0 +1,16 @@ +/* +Copyright (c) 2021 Kil Hyung-jin, with Reserved Font Name Pretendard. +https://github.com/orioncactus/pretendard + +This Font Software is licensed under the SIL Open Font License, Version 1.1. +This license is copied below, and is also available with a FAQ at: +http://scripts.sil.org/OFL +*/ + +@font-face { + font-family: "Pretendard Variable"; + font-weight: 45 920; + font-style: normal; + font-display: swap; + src: url("./woff2/PretendardVariable.woff2") format("woff2-variations"); +} diff --git a/css/global.css b/css/global.css new file mode 100644 index 0000000..4fb28a3 --- /dev/null +++ b/css/global.css @@ -0,0 +1,44 @@ +@import "./font/pretendard.css"; + +:root { + /* Grayscale colors */ + --grayscale-50: #fefefe; + --grayscale-100: #f7f7fc; + --grayscale-200: #eff0f6; + --grayscale-300: #d9dbe9; + --grayscale-400: #bec1d5; + --grayscale-500: #a0a3bd; + --grayscale-600: #6e7191; + --grayscale-700: #4e4b66; + --grayscale-800: #2a2a44; + --grayscale-900: #14142b; + /* Accent colors */ + --accent-blue: #007aff; + --accent-red: #ff3b30; + /* Text colors */ + --text-strong: var(--grayscale-900); + --text-bold: var(--grayscale-700); + --text-default: var(--grayscale-600); + --text-weak: var(--grayscale-500); + --text-white-default: var(--grayscale-50); + --text-white-weak: var(--grayscale-100); + --text-brand: var(--accent-blue); + --text-danger: var(--accent-red); + /* Surface colors */ + --surface-default: var(--grayscale-50); + --surface-alt: var(--grayscale-100); + --surface-brand: var(--accent-blue); + --surface-danger: var(--accent-red); + /* Border colors */ + --border-default: var(--grayscale-200); + --border-bord: var(--grayscale-400); +} + +* { + box-sizing: border-box; +} + +img { + margin: 5px; + /* width: 14px; */ +} diff --git a/css/reset.css b/css/reset.css new file mode 100644 index 0000000..3b52607 --- /dev/null +++ b/css/reset.css @@ -0,0 +1,129 @@ +/* http://meyerweb.com/eric/tools/css/reset/ +v2.0 | 20110126 +License: none (public domain) +*/ + +html, +body, +div, +span, +applet, +object, +iframe, +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +pre, +a, +abbr, +acronym, +address, +big, +cite, +code, +del, +dfn, +em, +img, +ins, +kbd, +q, +s, +samp, +small, +strike, +strong, +sub, +sup, +tt, +var, +b, +u, +i, +center, +dl, +dt, +dd, +ol, +ul, +li, +fieldset, +form, +label, +legend, +table, +caption, +tbody, +tfoot, +thead, +tr, +th, +td, +article, +aside, +canvas, +details, +embed, +figure, +figcaption, +footer, +header, +hgroup, +menu, +nav, +output, +ruby, +section, +summary, +time, +mark, +audio, +video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +menu, +nav, +section { + display: block; +} +body { + line-height: 1; +} +ol, +ul { + list-style: none; +} +blockquote, +q { + quotes: none; +} +blockquote:before, +blockquote:after, +q:before, +q:after { + content: ""; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..d8355d7 --- /dev/null +++ b/css/style.css @@ -0,0 +1,166 @@ +@import "reset.css"; +@import "global.css"; + +body { + font-family: "Pretendard"; + background-color: #f5f5f5; + margin: 0; + color: var(--text-strong); +} + +/* Header */ +.header { + height: 60px; + display: flex; + justify-content: space-between; + padding: 18px 80px; +} + +.header__logo { + font-size: 24px; + font-weight: 500; + color: var(--text-strong); +} + +.header__history { + display: flex; + justify-content: center; + align-items: center; +} + +.header__history-icon { + width: 24px; + height: 24px; +} + +/* Column Container */ +.column-container { + display: flex; + flex-wrap: wrap; + align-items: flex-start; + padding: 18px 80px; +} + +/* Column */ +.column { + display: flex; + flex-direction: column; + justify-content: center; + width: 320px; + margin: 0 24px 50px 0; +} + +.column__header { + display: flex; + justify-content: space-between; + width: 100%; + height: 14px; + font-size: 20px; + font-weight: 700; + padding: 16px 20px; + color: var(--text-strong); +} + +.column__header-left { + display: flex; + align-items: center; + gap: 8px; +} + +.column__header-title { + font-weight: bold; + font-size: 16px; + margin-right: 8px; +} + +.column__header-card-count { + border: 1px solid var(--border-default); + border-radius: 20%; + padding: 4px 8px; + font-size: 12px; + color: var(--text-weak); +} + +.column__header-right { + display: flex; + align-items: center; + gap: 10px; +} + +.column__header-right-icon { + width: 20px; + height: 20px; + cursor: pointer; + margin-left: 8px; +} + +/* Task Card */ +.task-card { + display: flex; + justify-content: space-between; + width: 320px; + height: 104px; + margin: 0px 0px 10px 0; + padding: 16px; + background-color: white; + border-radius: 15px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); +} + +.task-card__left { + display: grid; + grid-template-rows: 20px 1fr 12px; +} + +.task-card__title { + font-size: 18px; + font-weight: bold; +} + +.task-card__description { + font-size: 14px; + color: var(--text-default); + margin-top: 5px; +} + +.task-card__author { + color: var(--text-weak); + font-size: 12px; +} + +.task-card__right { + display: flex; + flex-direction: column; + justify-content: flex-start; +} + +.history-modal-container { + display: grid; + grid-template-rows: 48px 1fr 40px; + gap: 8px; + position: fixed; + top: 64px; + right: 56px; + width: 366px; + height: 680px; + background-color: white; + border-radius: 15px; + box-shadow: 0 16px 16px rgba(0, 0, 0, 0.1); +} + +.history-modal__header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 14.5px 16px; + font-size: 16px; + font-weight: 700; + color: var(--text-strong); +} + +.history-modal__header-close { + display: flex; + justify-content: flex-end; + align-items: center; + color: var(--text-default); +} diff --git a/icons/delete.png b/icons/delete.png new file mode 100644 index 0000000..4cf1115 Binary files /dev/null and b/icons/delete.png differ diff --git a/icons/history.png b/icons/history.png new file mode 100644 index 0000000..4829b83 Binary files /dev/null and b/icons/history.png differ diff --git a/icons/pen.png b/icons/pen.png new file mode 100644 index 0000000..eea7df0 Binary files /dev/null and b/icons/pen.png differ diff --git a/icons/plus.png b/icons/plus.png new file mode 100644 index 0000000..e15992c Binary files /dev/null and b/icons/plus.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..a512ee8 --- /dev/null +++ b/index.html @@ -0,0 +1,186 @@ + + + + + + TO-DO + + + + + +
+ +
+ 히스토리(활동기록)를 확인하는 아이콘 버튼 +
+
+ + +
+ +
+
+
+

해야 할 일

+

0

+
+
+ 할 일(카드)을 추가하는 플러스 아이콘 버튼 + 할 일(카드)을 지우는 가위표 아이콘 버튼 +
+
+ +
+
+

Task 1

+

Description 1

+

author by YooN

+
+
+ 카드를 삭제하는 가위표 아이콘 버튼 + 카드를 수정하는 펜 아이콘 버튼 +
+
+
+ + +
+
+
+

하고 있는 일

+

0

+
+
+ 할 일(카드)을 추가하는 플러스 아이콘 버튼 + 할 일(카드)을 지우는 가위표 아이콘 버튼 +
+
+ +
+
+

Task 1

+

Description 1

+

author by YooN

+
+
+ 카드를 삭제하는 가위표 아이콘 버튼 + 카드를 수정하는 펜 아이콘 버튼 +
+
+
+ + +
+
+
+

완료한 일

+

0

+
+
+ 할 일(카드)을 추가하는 플러스 아이콘 버튼 + 할 일(카드)을 지우는 가위표 아이콘 버튼 +
+
+ +
+
+

Task 1

+

Description 1

+

author by YooN

+
+
+ 카드를 삭제하는 가위표 아이콘 버튼 + 카드를 수정하는 펜 아이콘 버튼 +
+
+
+
+ +
+
+
+

사용자 활동 기록

+
+
+ 닫기 버튼 +

닫기

+
+
+
Hello
+
Hello
+
+ + diff --git a/solution.js b/solution.js new file mode 100644 index 0000000..829c556 --- /dev/null +++ b/solution.js @@ -0,0 +1,6 @@ +const historyIcon = document.querySelector(".header__history-icon"); +const historyContainer = document.querySelector(".history-modal-container"); + +historyIcon.addEventListener("click", () => { + // +});