[2주차] 김다희 미션 제출합니다.

src/components/Date.jsx

@@ -6,16 +6,27 @@ dayjs.locale('ko')
 
 //styles
 const DateWrapper = styled.div`
-  background-color: bisque;
+  width: 100%;
+  height: 8.583rem;
+  display: flex;
+  flex-direction: column;
+  border-bottom: 0.05rem solid #968E8E;
 `
 const Title = styled.div`
-
+  text-align: end;
+  color: #968E8E;
+  font-weight: 200;
+  font-size: 1.3rem;
 `
 const GetDate = styled.h1`
-
+  margin: 0;
+  font-size: 3rem;
+  font-weight: bold;
 `
 const GetWeek = styled.h3`
-
+  margin: 0.5rem 0;
+  font-size: 2rem;
+  font-weight: normal;
 `
 
 

src/components/Lists/ListsItems.jsx

@@ -1,19 +1,42 @@
 import React from 'react'
-import styled from 'styled-components'
-import { useState } from 'react'
+import {styled, css} from 'styled-components'
+import iconLineCheck from '../../assets/circle-check-regular.svg'
+import iconSolidCheck from '../../assets/circle-check-solid.svg'
+import iconDelete from '../../assets/circle-minus-solid.svg'
+
 
 
 const ItemsWrapper = styled.div`
-
+  background-color: #fff;
+  width: 90%;
+  margin: 0.9rem auto;
+  border: 0.05rem solid #CBC0C0;
+  border-radius: 10px;
+  box-shadow: 0px 4px 4px #CBC0C0;
+  display: flex;
+  flex-direction: row;
 `
 const TodoText = styled.div`
-
+  display: flex;
+  align-items: center;
+  flex-grow: 1;
+  margin: 1.4rem 0;
+  padding: 0 1rem;
+  font-size: 1.2rem;
+  font-weight: normal;
+  word-break:break-all;
 `
-const DeleteButton = styled.button`
-
+export const button = css`
+  width: 1.5rem;
+  height: 1.5rem;
+  margin: auto 1rem auto 0rem;
 `
-const CheckButton = styled.button`
-
+
+const DeleteButton = styled.img`
+  ${button}
+`
+const CheckButton = styled.img`
+  ${button}
 `
 
 function ListsItems({todo, data, deleteTodo, toggleTodo}) {
@@ -22,8 +45,13 @@ function ListsItems({todo, data, deleteTodo, toggleTodo}) {
   return (
     <ItemsWrapper>
       <TodoText>{todo}</TodoText>
-      <DeleteButton onClick={() => deleteTodo(data.id)}>delete</DeleteButton>
-      <CheckButton onClick={() => toggleTodo(data.id)}>check</CheckButton>
+      <CheckButton 
+        onClick={() => toggleTodo(data.id)}
+        src = {data.completed ? iconSolidCheck: iconLineCheck}
+      ></CheckButton>
+      <DeleteButton 
+      onClick={() => deleteTodo(data.id)}
+      src = {iconDelete}/>
     </ItemsWrapper>
   )
 }

src/components/Lists/TodoInputField.jsx

@@ -3,18 +3,25 @@ import styled from 'styled-components'
 import dayjs from 'dayjs'
 
 const TodoInputFieldWrapper = styled.form`
-    height: 2.5rem;
+    height: 3.9rem;
+    width: 90%;
     display: flex;
     flex-direction: row;
-    justify-content: center;
+    margin: 0 auto;
     border-bottom: 0.1rem solid #968E8E;
 `
 const InputField = styled.input`
     border: none;
-   flex-grow: 1;
+    padding: 0;
+    flex-grow: 1;
     color: black;
     font-size: 1.3rem;
     font-weight: normal;
+    &::placeholder{
+    color: black;
+    font-size: 1.3rem;
+    font-weight: normal;
+    }
 `
 const SubmitButton = styled.button`
     border: none;
@@ -40,7 +47,6 @@ const onSubmit = (e) => {
     if(!value.trim()){
         alert('할일을 입력 해 주세요')
     }
-    console.log(value);
     getList(value);
     setValue("");
 }

src/components/Todos.jsx

@@ -1,12 +1,12 @@
 import React, { useEffect } from 'react';
 import Date from './Date';
 import styled from 'styled-components';
+import {css} from 'styled-components';
 import TodoInputField from './Lists/TodoInputField';
 import { useState } from 'react';
 import ListsItems from './Lists/ListsItems';
 //전체 틀 잡기
 const TodoContainer = styled.div`
-    background-color: aliceblue;
     display: flex;
     flex-direction: column;
     width: 70vw;
@@ -20,25 +20,47 @@ const TodoContainer = styled.div`
 `
 
 //list가 표시되는 하단부
+export const textCenter = css`
+    width: 90%;
+    display: flex;
+    align-items: center;
+    font-size: 1.4rem;
+    font-weight: normal;
+`
+
 const Wrapper = styled.div`
-    background-color: antiquewhite;
     display: flex;
     flex-direction: row;
+    width: 100%;
+    height: 40rem;
 `
+
 const TodoLists = styled.div`
-    background-color: beige;
     display: flex;
     flex-direction: column;
     width:50%;
 `
 const DoneLists = styled.div`
-    background-color: beige;
     display: flex;
     flex-direction: column;
     width:50%;
+    h4{
+     ${textCenter}
+     color: black;
+     margin: 0 auto;
+     height: 4.5rem;
+    }
+`
+
+const ListsWrapper = styled.div`
+    flex-grow: 1;
+    overflow: scroll;
 `
 const ListsCount = styled.div`
-
+   ${textCenter}
+   color: #968E8E;
+   justify-content: center;
+   margin-top: 0.9rem;
 `
 
 export default function Todos() {
@@ -63,8 +85,8 @@ const toggleTodo = (id) => {
   };
 
 
-  const todoCount = lists.filter((data) => !data.completed).length;
-  const doneCount = lists.filter((data) => data.completed).length;
+const todoCount = lists.filter((data) => !data.completed).length;
+const doneCount = lists.filter((data) => data.completed).length;
 
 
   return (
@@ -78,6 +100,7 @@ const toggleTodo = (id) => {
              setLists={setLists}
              setValue={setValue}
             />
+           <ListsWrapper>
             {lists.map((data)=>
             data.completed ? <></>:
             <ListsItems
@@ -88,12 +111,13 @@ const toggleTodo = (id) => {
             deleteTodo = {deleteTodo}
             />
             )}
-             
+            </ListsWrapper>
             <ListsCount>{todoCount} lists are left</ListsCount>
         </TodoLists>
 
         <DoneLists>
             <h4>Done</h4>
+            <ListsWrapper>
             {lists.map((data)=>
             data.completed ? 
             <ListsItems
@@ -104,7 +128,7 @@ const toggleTodo = (id) => {
             deleteTodo = {deleteTodo}
             /> : <></>
             )}
-
+            </ListsWrapper>
             <ListsCount>{doneCount} lists are done! way to go : )</ListsCount>
         </DoneLists>
         </Wrapper>