[3주차] 전시원 미션 제출합니다.

interface.tsx

@@ -1,5 +1,33 @@
+import React from 'react';
+
 export interface ITodoList {
   contents: string;
   id: number;
   isDone: boolean;
 }
+export interface IYetListProps {
+  list: [];
+  yetNum: number;
+  onToggle: (e: React.MouseEvent<HTMLButtonElement>) => void;
+  onDelete: (e: React.MouseEvent<HTMLButtonElement>) => void;
+}
+
+export interface IInputFormProps {
+  onSubmit: (e: React.SyntheticEvent) => void;
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  contents: string;
+}
+
+export interface IDoneList {
+  list: [];
+  onToggle: (e: React.MouseEvent<HTMLButtonElement>) => void;
+  doneNum: number;
+}
+// styled-component에 들어가는 property 에 대한 정의
+export interface IListBtn {
+  onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
+}
+
+// 클릭 : MouseEvent
+// 입력 : ChangeEvent
+// 제출 : SyntheticEvent (선종님이 말씀하신 건데 맞는지 모르겠음)

src/App.js → src/App.tsx

@@ -1,17 +1,15 @@
-import styled from 'styled-components';
-
 import AllContents from './components/AllContents/index';
 import Title from './components/Title';
 import { Container } from './style';
 function App() {
-  const D = new Date().toString().slice(0, -21);
-  console.log('test');
+  const lastLogin = new Date().toString().slice(0, -21);
+
   return (
     <>
       <Container>
         <Title />
         <span style={{ color: 'white', marginBottom: '5px' }}>
-          Last login: {D}
+          Last login: {lastLogin}
         </span>
         <AllContents />
       </Container>

src/components/AllContents/index.js → src/components/AllContents/index.tsx

@@ -1,67 +1,65 @@
-import styled from 'styled-components';
-import { useEffect, useState } from 'react';
-
-import Title from '../Title';
+import React, { useEffect, useState } from 'react';
 import InputForm from '../InputForm';
 import YetList from '../YetList';
 import DoneList from '../DoneList';
+import { ITodoList } from 'interface';
 
 const Index = () => {
   const listText = 'list';
-  // 텍스트 이름과 변수 이름을 같게하면 좋을 것 같다는 피드백을 받았던 거 같은데
-  // list 를 다른 변수에 사용해 버렸음. 변수 이름 정하는 센스를 더 길러야 겠음
 
-  const localData = JSON.parse(localStorage.getItem(listText)) || [];
+  const localData = JSON.parse(localStorage.getItem(listText) || '') || [];
   // localDate 를 처음에 가져와서 새로고침해도 데이터가 유지되게 설정
 
   const [yetNum, setYetNum] = useState(0);
   const [doneNum, setDoneNum] = useState(0);
   const [contents, setContents] = useState('');
   const [list, setList] = useState(localData);
-  const onChange = (e) => setContents(e.target.value);
-  const onSubmit = (e) => {
+
+  const onChange = (e: React.ChangeEvent<HTMLInputElement>) =>
+    setContents(e.target.value);
+  const onSubmit = (e: React.SyntheticEvent) => {
     e.preventDefault();
     const obj = {
       contents,
       id: Date.now(),
       isDone: false,
     };
-    setList((prev) => [...prev, obj]);
+    setList((prev: []) => [...prev, obj]);
     setContents('');
   };
-  const onToggle = (e) => {
+  const onToggle = (e: React.MouseEvent<HTMLButtonElement>) => {
     // 클릭된 값
-    const text = e.target.textContent;
+
+    const text = (e.target as HTMLElement).textContent;
     // 로컬스토리지에 저장된 값
-    const data = JSON.parse(localStorage.getItem(listText));
+    const data = JSON.parse(localStorage.getItem(listText) || '');
     // 두 값을 이용해서 클릭된 값만 isDone 상태 토글
     let indexClicked = 0;
     let obj;
-    data.map((item, index) => {
+    data.map((item: ITodoList, index: number) => {
       if (item.contents === text) {
         obj = { ...item };
         obj.isDone = !item.isDone;
         indexClicked = index;
-      } else {
-        // switch 에서 default 값 처럼 if 를 쓰면 else 도 써주는 게 좋다는 코멘트를 봤던 거 같은데
-        // 그럴 경우 여긴 뭘 넣어야 좋을까요?
-        // null ???!
       }
     });
     const updatedDate = [...data];
     updatedDate[indexClicked] = obj;
     setList(updatedDate);
     localStorage.setItem(listText, JSON.stringify(list));
   };
-  const onDelete = (e) => {
+  const onDelete = (e: React.MouseEvent<HTMLButtonElement>) => {
     // 클릭된 텍스트 찾기
-    const text = e.target.parentNode.innerText.slice(0, -4);
+
+    const text = (
+      (e.target as HTMLElement).parentNode as HTMLElement
+    ).innerText.slice(0, -4);
 
     // 현재 데이터 가져오기
-    const data = JSON.parse(localStorage.getItem(listText));
+    const data = JSON.parse(localStorage.getItem(listText) || '');
 
     // 데이터 삭제
-    const updatedDate = data.filter((item) => {
+    const updatedDate = data.filter((item: ITodoList) => {
       return item.contents.trim() !== text.trim();
     });
 
@@ -81,12 +79,12 @@ const Index = () => {
   }, [list]);
 
   const findNum = () => {
-    const data = JSON.parse(localStorage.getItem(listText));
+    const data = JSON.parse(localStorage.getItem(listText) || '');
     let yetCtn = 0;
     let doneCtn = 0;
 
     // isDone === true, false 인 경우에 따라서 개수를 세어 줘야 함
-    data.map((item) => {
+    data.map((item: ITodoList) => {
       if (item.isDone === false) {
         yetCtn += 1;
       } else {

src/components/DoneList/index.tsx

@@ -1,5 +1,3 @@
-import styled from 'styled-components';
-import PropTypes from 'prop-types';
 import { DivDoneList, DoneNumStyle, ListBtn, Unordered } from './style';
 import { IDoneList, ITodoList } from 'interface';
 
@@ -25,16 +23,4 @@ const Index = ({ list, onToggle, doneNum }: IDoneList) => {
   );
 };
 
-Index.propTypes = {
-  list: PropTypes.arrayOf(
-    PropTypes.shape({
-      contents: PropTypes.string,
-      id: PropTypes.number,
-      isDone: PropTypes.bool,
-    })
-  ).isRequired,
-  doneNum: PropTypes.number.isRequired,
-  onToggle: PropTypes.func.isRequired,
-};
-
 export default Index;

src/components/DoneList/style.tsx

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-
+import { IListBtn } from 'interface';
 export const DivDoneList = styled.div`
   //border: 2px solid indianred;
   margin-bottom: 10px;
@@ -19,7 +19,7 @@ export const DoneNumStyle = styled.div`
   font-size: 14px;
 `;
 
-export const ListBtn = styled.button`
+export const ListBtn = styled.button<IListBtn>`
   cursor: grab;
   color: white;
   background: blue;

src/components/InputForm/index.tsx

@@ -7,10 +7,10 @@ const Index = ({ onSubmit, onChange, contents }: IInputFormProps) => {
     <div>
       <DivInputForm>
         <form style={{ display: 'flex' }} onSubmit={onSubmit} action="">
-          <SpanStyle>
+          <span style={{ display: 'flex', background: 'black' }}>
             <Rec>~/</Rec>
             <Triangle />
-          </SpanStyle>
+          </span>
           <InputStyle
             maxLength={maxLength}
             required

src/components/InputForm/style.tsx

@@ -48,5 +48,6 @@ export const Triangle = styled.div`
 
 export const SpanStyle = styled.span`
   display: 'flex';
+  flex-direction: row;
   background: 'black';
 `;

src/components/Title/index.tsx

@@ -1,5 +1,4 @@
 import { Cir1, Cir2, Cir3, Etc, DivTitle, CircleContainer } from './style';
-import { useState } from 'react';
 
 const Index = () => {
   return (

src/components/YetList/index.tsx

@@ -6,15 +6,8 @@ import {
   Unordered,
   YetNumStyle,
 } from './style';
-import PropTypes from 'prop-types';
-import { ITodoList } from 'interface';
 
-interface IYetListProps {
-  list: [];
-  yetNum: number;
-  onToggle: () => void;
-  onDelete: () => void;
-}
+import { ITodoList, IYetListProps } from 'interface';
 
 const Index = ({ list, yetNum, onToggle, onDelete }: IYetListProps) => {
   return (
@@ -23,7 +16,7 @@ const Index = ({ list, yetNum, onToggle, onDelete }: IYetListProps) => {
         <span style={{ color: '#BF9053', fontWeight: 'bold' }}>
           TO DO ({yetNum})
         </span>
-        <span> src/components/yetList.js</span>
+        <span> src/components/yetList.tsx</span>
       </YetNumStyle>
       <Unordered>
         {list.map((item: ITodoList, index: number) => (
@@ -41,17 +34,4 @@ const Index = ({ list, yetNum, onToggle, onDelete }: IYetListProps) => {
   );
 };
 
-Index.propTypes = {
-  list: PropTypes.arrayOf(
-    PropTypes.shape({
-      contents: PropTypes.string,
-      id: PropTypes.number,
-      isDone: PropTypes.bool,
-    })
-  ).isRequired,
-  yetNum: PropTypes.number.isRequired,
-  onToggle: PropTypes.func.isRequired,
-  onDelete: PropTypes.func.isRequired,
-};
-
 export default Index;

src/index.js → src/index.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './App';
 
-
 ReactDOM.render(
   <React.StrictMode>
     <App />