[TIL/React] 2023/06/29

Home.js

import React, { forwardRef, useEffect } from "react";
import { styled } from "styled-components";
import { useDispatch, useSelector } from "react-redux";
import { getTodo } from "../features/todosSlice";

const HomeContainer = styled.div`
  height: 100%;
  background-image: url("https://kormedi.com/wp-content/uploads/2021/10/211025_02_01-580x410.jpg");
  background-position: top center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
`;

const Home = forwardRef((props, ref) => {
  return <HomeContainer ref={ref}></HomeContainer>;
});

export default Home;

AddTask.js

import React, { forwardRef, useEffect } from "react";
import { useState } from "react";
import { useDispatch } from "react-redux";
import { styled } from "styled-components";
import { addTodo } from "../features/todosSlice";
import { getTodo } from "../features/todosSlice";

const inputArray = ["Title", "Subtitle", "Desc"];

const AddTaskFieldWrapper = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  background-color: #f1e3d9;
`;

const AddTaskContainer = styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 70%;
`;

const AddTaskTitle = styled.h1`
  margin-bottom: 100px;
  font-weight: bolder;
  font-size: 70px;
`;

const AddTaskInput = styled.input`
  padding: 40px;
  border: 1px solid #ccc;
  border-radius: 10px;
  width: 65%;
  margin-bottom: 20px;
`;

const AddTaskButton = styled.button`
  padding: 20px 30px;
  background-color: #c07848;
  font-weight: bolder;
  color: #fff;
  border: none;
  border-radius: 4px;
  margin-top: 100px;
  cursor: pointer;
  width: 40%;
  &:hover {
    opacity: 0.7;
  }
`;

const AddTask = forwardRef((props, ref) => {
  const dispatch = useDispatch();
  const [inputValue, setInputValue] = useState({
    Title: "",
    Subtitle: "",
    Desc: "",
    isDone: false,
    id: Date.now(),
  });

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

  const handleAddClick = () => {
    dispatch(addTodo(inputValue));
    setInputValue({
      Title: "",
      Subtitle: "",
      Desc: "",
      isDone: false,
      id: Date.now(),
    });
  };

  console.log(inputValue);
  return (
    <AddTaskFieldWrapper ref={ref}>
      <AddTaskContainer>
        <AddTaskTitle>ADD TASK</AddTaskTitle>
        {inputArray?.map((elem, idx) => (
          <AddTaskInput
            key={idx}
            name={elem}
            value={inputValue?.[elem]}
            onChange={handleInputValue}
            placeholder={`Add your ${elem}!`}
          />
        ))}
        <AddTaskButton onClick={handleAddClick}>ADD</AddTaskButton>
      </AddTaskContainer>
    </AddTaskFieldWrapper>
  );
});

export default AddTask;

RecentTodo.js

import React, { forwardRef } from "react";
import { useSelector } from "react-redux";
import styled from "styled-components";

const RecentTodoFieldWrapper = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 100%;
  width: 100%;
`;
const RecentTodoContainer = styled.div`
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 70%;
  height: 50%;
  border: none;
  border-radius: 10px;
  background-color: #f1e3d9;
`;

const RecentTodoAreaTitle = styled.h1`
  margin-bottom: 100px;
  font-weight: bolder;
  font-size: 70px;
`;

const RecentTodoTitleWrapper = styled.div`
  border-bottom: 6px solid #c07848;
`;

const RecentTodoMainWrapper = styled.div`
  border: 1px solid black;
  display: flex;
  flex-direction: column;
  row-gap: 100px;
  justify-content: center;
  align-items: center;
`;
const RecentTodoTitle = styled.p`
  font-size: 30px;
  font-weight: bolder;
`;
const RecentTodoSubtitle = styled.p`
  font-size: 20px;
`;

const RecentTodoDesc = styled.p`
  font-size: 20px;
`;

const RecentTodo = forwardRef((props, ref) => {
  const { todo } = useSelector((state) => state.todos);
  console.log(todo);
  const mostRecentTodo = todo.length >= 0 ? todo[todo.length - 1] : null;

  return (
    <RecentTodoFieldWrapper ref={ref}>
      <RecentTodoAreaTitle>Recent Todo</RecentTodoAreaTitle>
      <RecentTodoContainer>
        <RecentTodoTitleWrapper>
          <RecentTodoTitle>{mostRecentTodo?.Title}</RecentTodoTitle>
        </RecentTodoTitleWrapper>
        <RecentTodoMainWrapper>
          <div>
            <RecentTodoSubtitle>{mostRecentTodo?.Subtitle}</RecentTodoSubtitle>
            <RecentTodoDesc>{mostRecentTodo?.Desc}</RecentTodoDesc>
          </div>
          <div>
            <button>COMPLETE</button>
            <button>DELETE</button>
          </div>
        </RecentTodoMainWrapper>
      </RecentTodoContainer>
    </RecentTodoFieldWrapper>
  );
});

export default RecentTodo;

MyTodo.js

import React, { forwardRef } from "react";
import { styled } from "styled-components";
import { useSelector } from "react-redux";

const MyTodoFieldWrapper = styled.div`
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 100%;
  width: 100%;
  background-color: #f1e3d9;
  overflow-x: auto;
  column-gap: 10px;
`;

const TodoCard = styled.div`
  display: flex;
  flex-direction: column;
  width: 2000px;
  height: 70%;
  background-color: #fff;
  border: none;
  border-radius: 10px;
`;

const MyTodo = forwardRef((props, ref) => {
  const { todo } = useSelector((state) => state.todos);
  console.log(todo);
  return (
    <MyTodoFieldWrapper ref={ref}>
      {todo.map((elem, idx) => {
        console.log(elem);
        return (
          <TodoCard key={idx}>
            <p>{elem.Title}</p>
            <p>{elem.Subtitle}</p>
            <p>{elem.Desc}</p>
          </TodoCard>
        );
      })}
    </MyTodoFieldWrapper>
  );
});

export default MyTodo;

어쩌구저쩌구

MyTodo 컴포넌트에서, todo card에 overflow-x를 적용하는 것이 목표였는데... 왜왜왜 후