[TIL/React] 2023/04/26

src/App.js

import React, { useState } from "react";
import InputSection from "./components/InputSection";
import TodoSection from "./components/TodoSection";
import CompleteSection from "./components/CompleteSection";
import styled from "styled-components";
import { createGlobalStyle } from "styled-components";
import TodoTemplate from "./components/TodoTemplate";

const GlobalStyle = createGlobalStyle`
  body {
    background: #2d518a;
    opacity: 0.9; 
  }
`;

const inputArray = ["title", "subTitle", "desc"];

function App() {
  const [inputValue, setInputValue] = useState({
    title: "",
    subTitle: "",
    desc: "",
    isDone: false,
  });
  const [editValue, setEditValue] = useState({
    title: "",
    subTitle: "",
    desc: "",
    isDone: false,
  });
  const [todos, setTodos] = useState([]);
  const [id, setId] = useState("");

  const noCompleteArray = todos.filter((todo) => todo?.isDone === false);
  const completeArray = todos.filter((todo) => todo?.isDone === true);

  const handleInputValue = (event) => {
    const { value, name } = event?.target;
    setInputValue((prev) => {
      return { ...prev, [name]: value };
    });
  };
  const handleEditValue = (event) => {
    const { value, name } = event?.target;
    setEditValue((prev) => {
      return { ...prev, [name]: value };
    });
  };

  const addButtonClick = () => {
    if (!inputValue?.title && !inputValue?.subTitle && !inputValue?.desc) {
      alert("Please enter at least one item!");
      return;
    }
    setTodos((prev) => {
      return [
        ...prev,
        {
          ...inputValue,
          id: `${inputValue?.title} ${inputValue?.subTitle} ${inputValue?.desc}`,
        },
      ];
    });
    setInputValue({ title: "", subTitle: "", desc: "", isDone: false });
  };

  const deleteButtonClick = (id) => {
    setTodos((prev) => {
      return prev?.filter((todo) => todo?.id !== id);
    });
  };

  const completeButtonClick = (id) => {
    let newArray = todos?.map((todo) =>
      todo?.id === id ? { ...todo, isDone: true } : todo
    );
    setTodos(newArray);
  };

  const editButtonClick = (id) => {
    setId(id);

    const editTodo = todos.find((todo) => todo?.id === id);
    setEditValue(editTodo);
  };
  const saveButtonClick = (id) => {
    setTodos((prev) => {
      return [...prev]?.map((todo) => (todo?.id === id ? editValue : todo));
    });
    setId("");
    setEditValue({
      title: "",
      subTitle: "",
      desc: "",
      isDone: false,
    });
  };
  const cancelButtonClick = (id) => {
    setId("");
    setEditValue({
      title: "",
      subTitle: "",
      desc: "",
      isDone: false,
    });
  };
  // console.log({ inputValue });
  console.log({ todos });
  return (
    <div>
      <GlobalStyle />
      <TodoTemplate>
        <InputSection
          inputArray={inputArray}
          inputValue={inputValue}
          handleInputValue={handleInputValue}
          addButtonClick={addButtonClick}
        />
        <TodoSection
          noCompleteArray={noCompleteArray}
          editButtonClick={editButtonClick}
          completeButtonClick={completeButtonClick}
          inputArray={inputArray}
          editValue={editValue}
          handleEditValue={handleEditValue}
          saveButtonClick={saveButtonClick}
          editId={id}
          cancelButtonClick={cancelButtonClick}
          deleteButtonClick={deleteButtonClick}
        />
        <CompleteSection
          completeArray={completeArray}
          deleteButtonClick={deleteButtonClick}
        />
      </TodoTemplate>
    </div>
  );
}

export default App;

src/components/InputSection.js

import React from "react";
import styled from "styled-components";

const InputTitle = styled.h1`
  text-align: center;
`;
const InputAddButtonWrap = styled.div`
  display: flex;
  justify-content: center;
`;

const InputFieldWrap = styled.div`
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
`;

const InputField = styled.input`
  border: 2px solid #85afee;
  border-radius: 7px;
  padding: 5px;
  width: 250px;
  cursor: pointer;
`;

const InputAddButton = styled.button`
  background-color: #85afee;
  color: white;
  font-weight: bolder;
  border: none;
  border-radius: 10px;
  width: 150px;
  padding: 10px;
  &:hover {
    background-color: navy;
    color: white;
  }
  cursor: pointer;
`;

const InputSection = ({
  inputArray,
  inputValue,
  handleInputValue,
  addButtonClick,
}) => {
  return (
    <div>
      <InputTitle>Todo List 📝</InputTitle>
      {/* Input & Add Button Field */}
      <div>
        {inputArray?.map((name, idx) => {
          return (
            <InputFieldWrap key={idx}>
              <InputField
                name={name}
                value={inputValue?.[name]}
                onChange={handleInputValue}
                placeholder={`Add your Todo '${name}'`}
              />
            </InputFieldWrap>
          );
        })}

        <InputAddButtonWrap>
          <InputAddButton onClick={addButtonClick}>
            Add your Passion!
          </InputAddButton>
        </InputAddButtonWrap>
      </div>
    </div>
  );
};

export default InputSection;

src/components/TodoSection.js

import React from "react";
import styled from "styled-components";

const TodoTitle = styled.h2`
 text-align: center;
`;
const TodoButtonWrap = styled.div`
 display: flex;
 justify-content: center;
 column-gap: 5px;
`;
const TodoButton = styled.button`
 background-color: #85afee;
 color: white;
 font-weight: bolder;
 border: none;
 border-radius: 10px;
 width: 150px;
 padding: 10px;

 &:hover {
   background-color: navy;
   color: white;
 }
 cursor: pointer;
`;
const TodoWrap = styled.div`
 border: 2px solid #85afee;
 border-radius: 7px;
 margin: 20px;
 padding: 16px;
 display: flex;
 flex-direction: column;
 align-items: center;
 background-color: white;
`;
const TodoText = styled.div`
 display: flex;
 flex-direction: column;
 gap: 8px;
 align-items: center;
 margin-bottom: 10px;
 p {
   margin: 0;
   font-size: 18px;
   font-weight: bolder;
   color: black;
 }
`;
const EditInputFieldWrap = styled.div`
 display: flex;
 justify-content: center;
 margin-bottom: 10px;
`;
const EditInputField = styled.input`
 border: 2px solid #85afee;
 border-radius: 7px;
 padding: 5px;
 width: 250px;
 cursor: pointer;
`;
const EditButtonWrap = styled.div`
 display: flex;
 justify-content: center;
 column-gap: 5px;
`;
const EditButton = styled.button`
 background-color: #85afee;
 color: white;
 font-weight: bolder;
 border: none;
 border-radius: 10px;
 width: 150px;
 padding: 10px;

 &:hover {
   background-color: navy;
   color: white;
 }
 cursor: pointer;
`;
const EditWrap = styled.div`
 border: 2px solid #85afee;
 border-radius: 7px;
 margin: 20px;
 padding: 16px;
 display: flex;
 flex-direction: column;
 align-items: center;
 background-color: white;
`;
const TodoSection = ({
 noCompleteArray,
 editButtonClick,
 completeButtonClick,
 inputArray,
 editValue,
 handleEditValue,
 saveButtonClick,
 editId,
 cancelButtonClick,
 deleteButtonClick,
}) => {
 return (
   <div>
     <TodoTitle>Todo 👨‍💻</TodoTitle>
     {/* Todo & {(Edit(save, cancel), Complete, Delete) Button Field} */}
     {noCompleteArray.map((todo) => {
       return (
         <div key={todo?.id}>
           {todo?.id === editId ? (
             <EditWrap>
               {inputArray?.map((name, idx) => {
                 return (
                   <EditInputFieldWrap key={idx}>
                     <EditInputField
                       name={name}
                       value={editValue?.[name]}
                       onChange={handleEditValue}
                       placeholder={`Edit your Todo '${name}'`}
                     />
                   </EditInputFieldWrap>
                 );
               })}
               <EditButtonWrap>
                 <EditButton onClick={() => saveButtonClick(todo?.id)}>
                   Save
                 </EditButton>
                 <EditButton onClick={() => cancelButtonClick(todo?.id)}>
                   Cancel
                 </EditButton>
               </EditButtonWrap>
             </EditWrap>
           ) : (
             <TodoWrap>
               <TodoText>
                 <p>{todo?.title}</p>
                 <p>{todo?.subTitle}</p>
                 <p>{todo?.desc}</p>
               </TodoText>
               <TodoButtonWrap>
                 <TodoButton onClick={() => editButtonClick(todo?.id)}>
                   Edit
                 </TodoButton>
                 <TodoButton onClick={() => completeButtonClick(todo?.id)}>
                   Complete
                 </TodoButton>
                 <TodoButton onClick={() => deleteButtonClick(todo?.id)}>
                   Delete
                 </TodoButton>
               </TodoButtonWrap>
             </TodoWrap>
           )}
         </div>
       );
     })}
   </div>
 );
};

export default TodoSection;

src/components/CompleteSection.js

import React from "react";
import styled from "styled-components";

const CompleteTitle = styled.h2`
 text-align: center;
`;

const CompleteWrap = styled.div`
 border: 2px solid #85afee;
 border-radius: 7px;
 margin: 20px;
 padding: 16px;
 display: flex;
 flex-direction: column;
 align-items: center;
 background-color: white;
`;

const CompleteText = styled.div`
 display: flex;
 flex-direction: column;
 gap: 8px;
 align-items: center;
 margin-bottom: 10px;
 p {
   margin: 0;
   font-size: 18px;
   font-weight: bolder;
   color: black;
 }
`;

const DeleteButton = styled.button`
 background-color: #85afee;
 color: white;
 font-weight: bolder;
 border: none;
 border-radius: 10px;
 width: 150px;
 padding: 10px;
 &:hover {
   background-color: navy;
   color: white;
 }
 cursor: pointer;
`;

const CompleteArea = styled.div`
 max-height: 400px;
 margin-bottom: 270px;
`;

const CompleteSection = ({ completeArray, deleteButtonClick }) => {
 return (
   <CompleteArea>
     <CompleteTitle>Complete Todo 🔥</CompleteTitle>
     {/* Complete Todo & Delete Button Field */}
     {completeArray.map((todo) => {
       return (
         <CompleteWrap key={todo?.id}>
           <CompleteText>
             <p>{todo?.title}</p>
             <p>{todo?.subTitle}</p>
             <p>{todo?.desc}</p>
           </CompleteText>
           <DeleteButton onClick={() => deleteButtonClick(todo?.id)}>
             Delete
           </DeleteButton>
         </CompleteWrap>
       );
     })}
   </CompleteArea>
 );
};

export default CompleteSection;

src/components/TodoTemplate.js

import React from "react";
import styled from "styled-components";

const TodoTemplateBlock = styled.div`
  width: 512px;
  height: 768px;
  overflow-y: auto;
  background: linear-gradient(to bottom, white, #dce6f5);
  border-radius: 16px;

  margin: 0 auto; /* 페이지 중앙에 나타나도록 설정 */

  margin-top: 30px;
  margin-bottom: 30px;
  display: flex;
  flex-direction: column;
`;

function TodoTemplate({ children }) {
  return <TodoTemplateBlock>{children}</TodoTemplateBlock>;
}

export default TodoTemplate;

현재까지의 스타일링 (styled-components)