CEOS-Developers · corinthionia · Mar 22, 2022 · Mar 22, 2022 · Mar 22, 2022 · Mar 23, 2022
diff --git a/package.json b/package.json
@@ -6,9 +6,15 @@
     "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/react": "^12.1.4",
     "@testing-library/user-event": "^13.5.0",
+    "@types/node": "^17.0.23",
+    "@types/react": "^17.0.43",
+    "@types/react-dom": "^17.0.14",
+    "@types/styled-components": "^5.1.24",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-scripts": "5.0.0",
+    "styled-components": "^5.3.3",
+    "typescript": "^4.6.3",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
@@ -34,5 +40,9 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
-  }
+  },
+  "main": "index.js",
+  "repository": "https://github.com/corinthionia/react-todo-15th.git",
+  "author": "Joohyun Kim <[email protected]>",
+  "license": "MIT"
 }
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/img/bin.png b/public/img/bin.png
diff --git a/public/index.html b/public/index.html
@@ -9,35 +9,9 @@
       name="description"
       content="Web site created using create-react-app"
     />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
-    <title>React App</title>
+    <title>투두리스트</title>
   </head>
   <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
   </body>
 </html>
diff --git a/public/logo192.png b/public/logo192.png
diff --git a/public/logo512.png b/public/logo512.png
diff --git a/public/manifest.json b/public/manifest.json
diff --git a/public/robots.txt b/public/robots.txt
diff --git a/src/App.js b/src/App.js
diff --git a/src/App.tsx b/src/App.tsx
@@ -0,0 +1,43 @@
+import { COLORS } from './constants/COLORS';
+import { GlobalStyle } from './styles/GlobalStyle';
+import styled from 'styled-components';
+import InputField from './components/InputField';
+import ItemList from './components/ItemList';
+
+function App() {
+  return (
+    <>
+      <GlobalStyle />
+      <Wrapper>
+        <Header>투두리스트</Header>
+        <InputField />
+        <ItemList isDoneList={false} />
+        <ItemList isDoneList={true} />
+      </Wrapper>
+    </>
+  );
+}
+
+const Wrapper = styled.main`
+  width: 350px;
+  height: 700px;
+
+  border-radius: 16px;
+  border: 1px solid ${COLORS.border};
+  overflow: hidden;
+
+  background: ${COLORS.background};
+`;
+
+const Header = styled.header`
+  height: 10%;
+  font-size: 28px;
+  padding-left: 16px;
+
+  display: flex;
+  align-items: center;
+
+  border-bottom: 1px solid ${COLORS.border};
+`;
+
+export default App;
diff --git a/src/components/InputField.tsx b/src/components/InputField.tsx
@@ -0,0 +1,71 @@
+import { useContext } from 'react';
+import styled from 'styled-components';
+import useInput from '../hooks/useInput';
+import { COLORS } from '../constants/COLORS';
+import { ItemListContext } from '../contexts/ItemListContext';
+import { IItem } from '../types/types';
+
+const InputField = () => {
+  const { inputText, handleInputChange, resetInputText } = useInput('');
+  const { setItemListHandler } = useContext(ItemListContext);
+
+  const handleFormSubmit = (e: React.SyntheticEvent) => {
-  const handleFormSubmit = (e: React.SyntheticEvent) => {
+  const handleFormSubmit = (e: React.FormEvent<HTMLFormElement>) => {
-  const handleFormSubmit = (e: React.SyntheticEvent) => {
+  const handleFormSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    if (inputText.replace(/\s+/g, '')) {
+      const todo = { id: Date.now(), text: inputText, isDone: false };
+      setItemListHandler((itemList: IItem[]) => [todo, ...itemList]);
+    } else {
+      alert('할일을 입력해 주세요');
+    }
+
+    resetInputText();
+  };
+
+  return (
+    <InputForm onSubmit={handleFormSubmit}>
+      <Input
+        value={inputText}
+        onChange={handleInputChange}
+        spellCheck="false"
+        autoFocus
+        placeholder="할일을 입력하세요"
+      />
+      <SubmitBtn onClick={handleFormSubmit}>➕</SubmitBtn>
+    </InputForm>
+  );
+};
+
+const InputForm = styled.form`
+  height: 10%;
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+`;
+
+const Input = styled.input`
+  width: 77.5%;
+  height: 50%;
+  padding-left: 2.5%;
+
+  border-radius: 8px;
+  border: 1px solid ${COLORS.border};
+  background: ${COLORS.background};
+
+  ::placeholder {
+    color: ${COLORS.placeholder};
+  }
+`;
+
+const SubmitBtn = styled.button`
+  width: 10%;
+  height: 50%;
+
+  background: none;
+  border-radius: 8px;
+  border: 1px solid ${COLORS.border};
+
+  cursor: pointer;
+`;
+
+export default InputField;
diff --git a/src/components/Item.tsx b/src/components/Item.tsx
@@ -0,0 +1,53 @@
+import styled, { css } from 'styled-components';
+import { COLORS } from '../constants/COLORS';
+import { IIsDoneList } from '../types/types';
+
+const Item = ({
+  id,
+  text,
+  isDoneList,
+  handleTextClick,
+  handleDeleteBtnClick,
+}) => {
+  return (
+    <ItemWrapper key={id}>
+      <ItemText id={id} isDoneList={isDoneList} onClick={handleTextClick}>
+        {text}
+      </ItemText>
+      <DeleteBtn
+        src={`${process.env.PUBLIC_URL}/img/bin.png`}
+        id={id}
+        onClick={handleDeleteBtnClick}
+      />
+    </ItemWrapper>
+  );
+};
+
+const ItemWrapper = styled.div`
+  width: 90%;
+  margin: 12px;
+
+  display: flex;
+  align-items: center;
+`;
+
+const ItemText = styled.span<IIsDoneList>`
+  ${({ isDoneList }) =>
+    isDoneList &&
+    css`
+      color: ${COLORS.lightgrey};
+      text-decoration: line-through;
+    `}
+
+  cursor: pointer;
+`;
+
+const DeleteBtn = styled.img`
+  width: 16px;
+  height: 16px;
+  margin-left: 8px;
+
+  cursor: pointer;
+`;
+
+export default Item;
diff --git a/src/components/ItemList.tsx b/src/components/ItemList.tsx
@@ -0,0 +1,94 @@
+import { useContext } from 'react';
+import styled from 'styled-components';
+import Item from './Item';
+import { COLORS } from '../constants/COLORS';
+import { ItemListContext } from '../contexts/ItemListContext';
+import { IItem } from '../types/types';
+
+const ItemList = ({ isDoneList }) => {
+  const { itemList, setItemListHandler } = useContext(ItemListContext);
+
+  const filteredList = itemList.filter(
+    (item: IItem) => item.isDone === isDoneList
+  );
+
+  const handleTextClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+    const textElement: HTMLButtonElement = e.currentTarget;
+
+    const newList = (filteredList: IItem[]) =>
+      filteredList.map((item: IItem) =>
+        item.id === parseInt(textElement.id)
+          ? { ...item, isDone: !item.isDone }
+          : item
+      );
+
+    setItemListHandler(newList);
+  };
+
+  const handleDeleteBtnClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+    const deleteBtn: HTMLButtonElement = e.currentTarget;
+
+    const newList = (filteredList: IItem[]) =>
+      filteredList.filter((todo: IItem) => todo.id !== parseInt(deleteBtn.id));
+
+    setItemListHandler(newList);
+  };
+
+  return (
+    <>
+      <ListTitle>
+        {isDoneList
+          ? `${filteredList.length}개의 할일을 완료했어요`
+          : `${filteredList.length}개의 할일이 남아있어요`}
+      </ListTitle>
+      <List>
+        {filteredList.map(({ id, text }) => (
+          <Item
+            key={id}
+            id={id}
+            text={text}
+            isDoneList={isDoneList}
+            handleTextClick={handleTextClick}
+            handleDeleteBtnClick={handleDeleteBtnClick}
+          />
+        ))}
+      </List>
+    </>
+  );
+};
+
+const ListTitle = styled.div`
+  height: 7.5%;
+  padding-left: 16px;
+
+  display: flex;
+  align-items: center;
+
+  font-size: 20px;
+
+  border-top: 1px solid ${COLORS.border};
+  border-bottom: 1px solid ${COLORS.border};
+`;
+
+const List = styled.section`
+  height: 32.5%;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  overflow: auto;
+
+  &::-webkit-scrollbar {
+    width: 0.75rem;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: ${COLORS.scrollbar};
+    background-clip: padding-box;
+    border-radius: 10px;
+    border: 0.25rem solid transparent;
+  }
+`;
+
+export default ItemList;
diff --git a/src/constants/COLORS.tsx b/src/constants/COLORS.tsx
@@ -0,0 +1,8 @@
+export const COLORS = {
+  border: '#ececec',
+  darkgrey: '#3d3d3d',
+  lightgrey: 'rgba(255, 255, 255, 0.3)',
+  placeholder: 'rgba(255, 255, 255, 0.7)',
+  scrollbar: 'rgba(255, 255, 255, 0.4)',
+  background: 'rgba(255, 255, 255, 0.1)',
+};