[YooN] 3/5(수)까지 작업할 PR

README.md

@@ -1 +1,59 @@
-# FE-Todo
+# FE-Todo (TESTIFY 앱 구현)
+
+## 요구사항 분석 및 작업 목록 정리
+
+### 메인 UI 구현
+
+- [x] 메인 UI 구현 - 헤더 UI
+- [x] 메인 UI 구현 - 카드 구현
+- [ ] 메인 UI 구현 - 칼럼 영역 UI (카드 표시)
+
+### 메뉴(히스토리) 구현
+
+- [ ] 메뉴(히스토리) 구현 - 레이어 UI 및 닫기 버튼 구현
+- [ ] 메뉴(히스토리) 구현 - 슬라이드 애니메이션
+- [ ] 메뉴(히스토리) 구현 - 액션 UI 구현 (Mock 데이터 사용)
+- [ ] 메뉴(히스토리) 구현 - 스크롤 구현
+- [ ] 메뉴(히스토리) 구현 - 삭제 버튼 구현 (+알럿창)
+
+### 새로운 카드 등록 기능 구현
+
+- [ ] 새로운 카드 등록 기능 구현 - 새로운 카드 UI
+- [ ] 새로운 카드 등록 기능 구현 - [+버튼] 기능 구현
+- [ ] 새로운 카드 등록 기능 구현 - 등록 및 취소 기능 구현
+
+### 카드 이동
+
+- [ ] 카드 이동 - 드래그 처리
+- [ ] 카드 이동 - 잔상 처리
+- [ ] 카드 이동 - 드롭 처리
+
+### 카드 삭제
+
+- [ ] 카드 삭제 - X버튼 시 등장하는 알럿창 구현
+- [ ] 카드 삭제 - 삭제 시 리스트에서 정보 삭제
+<!-- - [ ] 카드 삭제 - -->
+
+### 카드 수정
+
+- [ ] 카드 수정 - 수정 카드 UI 구현
+- [ ] 카드 수정 - 수정 내용 반영하기
+<!-- - [ ] 카드 수정 - -->
+
+### 카드 정렬
+
+- [ ] 카드 정렬 - 정렬 구현
+- [ ] 카드 정렬 - 애니메이션 구현
+<!-- - [ ] 카드 정렬 - -->
+
+<!--
+
+### 칼럼 수정
+
+- [ ] 칼럼 수정 -
+- [ ] 칼럼 수정 -
+- [ ] 칼럼 수정 -
+- [ ] 칼럼 수정 -
+- [ ] 칼럼 수정 - -->
+
+<br/>

components/card_component.html

@@ -0,0 +1,4 @@
+<div class="column__task-card task-card">
+  <div class="task-card__title">Task 1</div>
+  <div class="task-card__description">Description 1</div>
+</div>

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");
+}

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");
+}

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");
+}

css/global.css

@@ -0,0 +1,39 @@
+@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;
+}