React

[TIL/React] 2023/04/23

src/App.jssrc/Components/InputSection.jssrc/Components/TodoSection.jssrc/Components/CompleteSection.js오늘까지의 최선... 일단은 굴러간다

2023년 4월 23일3min read

src/App.js

code

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

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

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

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

  const handleInputValue = (event) => {
    const { value, name } = event?.target;
    console.log(event);
    setInputValue((prev) => {
      return { ...prev, [name]: value };
    });
  };
  const handleAddClick = () => {
    setTodos((prev) => {
      return [
        ...prev,
        {
          ...inputValue,
          id: `${inputValue?.title}${inputValue?.subTitle}${inputValue?.desc}`,
        },
      ];
    });
    setInputValue({
      title: "",
      subTitle: "",
      desc: "",
      isDone: false,
    });
  };
  const handleDeleteClick = (id) => {
    setTodos((prev) => prev?.filter((todo) => todo?.id !== id));
  };
  const handleCompleteClick = (id) => {
    console.log(typeof id);

    let newArray = [...todos].map((todo) =>
      todo?.id === id ? { ...todo, isDone: true } : todo
    );

    setTodos(newArray);
  };
  const handleEditValue = (event) => {
    const { value, name } = event?.target;
    console.log(event);
    setEditValue((prev) => {
      return { ...prev, [name]: value };
    });
  };
  const handleEditClick = (id) => {
    const editTodo = todos.find((todo) => todo?.id === id);
    setEditValue(editTodo);
    setEditMode(true);
  };
  const handleSaveClick = () => {
    setTodos((prev) => {
      return prev?.map((todo) => {
        if (todo?.id === editValue?.id) {
          return {
            ...editValue,
          };
        } else {
          return todo;
        }
      });
    });
    setEditMode(false);
    setEditValue({
      title: "",
      subTitle: "",
      desc: "",
      isDone: false,
    });
  };
  // console.log({ todos });
  return (
    <div>
      <InputSection
        inputArray={inputArray}
        inputValue={inputValue}
        handleInputValue={handleInputValue}
        handleAddClick={handleAddClick}
      />

      <TodoSection
        noCompleteArray={noCompleteArray}
        handleEditClick={handleEditClick}
        handleCompleteClick={handleCompleteClick}
        handleDeleteClick={handleDeleteClick}
        editMode={editMode}
        inputArray={inputArray}
        editValue={editValue}
        handleEditValue={handleEditValue}
        handleSaveClick={handleSaveClick}
      />
      {/* complete section */}
      <CompleteSection
        completeArray={completeArray}
        handleDeleteClick={handleDeleteClick}
      />
    </div>
  );
};

export default App;

src/Components/InputSection.js

code

import React from "react";

const InputSection = ({
  inputArray,
  inputValue,
  handleInputValue,
  handleAddClick,
}) => {
  return (
    <div>
      <h1>Todo List</h1>
      {inputArray?.map((name, idx) => {
        return (
          <div key={idx}>
            <span>{name}</span>
            <input
              name={name}
              value={inputValue?.[name]}
              onChange={handleInputValue}
            />
          </div>
        );
      })}
      <button onClick={handleAddClick}>추가</button>
    </div>
  );
};

export default InputSection;

src/Components/TodoSection.js

code

import React from "react";

const TodoSection = ({
  noCompleteArray,
  handleEditClick,
  handleCompleteClick,
  handleDeleteClick,
  editMode,
  inputArray,
  editValue,
  handleEditValue,
  handleSaveClick,
}) => {
  return (
    <div>
      <h2>Todo Section</h2>
      {noCompleteArray?.map((todo) => {
        return (
          <div
            key={todo?.id}
            style={{ border: "1px solid black", padding: "10px" }}
          >
            <div
              style={{
                display: "flex",
                justifyContent: "flex-end",
                columnGap: "5px",
              }}
            >
              <button onClick={() => handleEditClick(todo?.id)}>수정</button>
              <button onClick={() => handleCompleteClick(todo?.id)}>
                완료
              </button>
              <button onClick={() => handleDeleteClick(todo?.id)}>삭제</button>
            </div>
            <p>Title: {todo?.title}</p>
            <p>SubTitle: {todo?.subTitle}</p>
            <p>Desc: {todo?.desc}</p>
          </div>
        );
      })}
      {editMode && (
        <div>
          <h2>Edit Mode</h2>
          {inputArray?.map((name, idx) => {
            return (
              <div key={idx}>
                <span>{name}</span>
                <input
                  name={name}
                  value={editValue?.[name]}
                  onChange={handleEditValue}
                />
              </div>
            );
          })}
          <button onClick={handleSaveClick}>저장</button>
        </div>
      )}
    </div>
  );
};

export default TodoSection;

src/Components/CompleteSection.js

code

import React from "react";

const CompleteSection = ({ completeArray, handleDeleteClick }) => {
  return (
    <div>
      <h2>Complete Section</h2>
      {completeArray?.map((todo) => {
        return (
          <div
            key={todo?.id}
            style={{ border: "1px solid black", padding: "10px" }}
          >
            <div
              style={{
                display: "flex",
                justifyContent: "flex-end",
                columnGap: "5px",
              }}
            >
              <button onClick={() => handleDeleteClick(todo?.id)}>삭제</button>
            </div>
            <p>Title: {todo?.title}</p>
            <p>SubTitle: {todo?.subTitle}</p>
            <p>Desc: {todo?.desc}</p>
          </div>
        );
      })}
    </div>
  );
};

export default CompleteSection;

오늘까지의 최선... 일단은 굴러간다