[TIL/React] 2023/04/26

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;

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/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;

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;