23/11/06 til react 1주차 개인과제

import logo from "./logo.svg";

import "./App.css";

import { useState } from "react";   //유즈 스테이트 에스 대문자로 안써서 어디서 안되는건지 한참 찾음

function App() {

  let [title, settitle] = useState("");        // 유즈 스테이트의 용법 // 유즈 스테이트 소괄호 안에는 해당 타이틀의 초기값

  let [content, setcontent] = useState("");                                 // 그다음 셋타이틀로 타이틀을 바꿔줄수 있다.

  let [card, setcard] = useState([]);                                           //리액트에서 새로운 랜더링은 유즈리액트같은 훅으로만 가능

  let [movedcards, setmovedcards] = useState([]);

                                                                                  

  let titleinput = function (e) {

    settitle(e.target.value);                               //input 태그에 온체인지를 주고 타이틀 인풋값을 할당함 

  };                                                               //셋타이틀을 통해 인풋에 타이핑되는 .event.target.value를 title로세팅한다.

  let contentinsput = function (e) { 

    setcontent(e.target.value);                 //이하동문

  };                                                  

  let plusbutton = function () {

    let newCard = {

      id: card.length + 1,                         //아이디를 카드길이보다 1큰값을 세팅하여서 카드에 축적되는 카드에 1씩느는 id값

      title: title,                                      //을 갖게한다. title은 title을 content는 content를 구조분해 할수 있도록 세팅

      content: content,

    };

    setcard([...card, newCard]);                // 카드를 스프레드 오퍼레이터하고 뉴카드를 추가해서 새로운 어레이 생성

    settitle("");                                           //그것을 셋카드로 카드에 세팅  // 인풋에 할당항 펑션이 작동한후 인풋안값을

    setcontent("");                                     //비우기위해 셋타이틀과 셋컨텐트를 빈텍스트 세팅

  };

  const deleteButton = function (id) {

    const newcards = card.filter(function (item) {               //삭제하기 버튼을 눌렀을때 해당 카드를 지우는 기능

      return item.id !== id;                                        //온클릭에 딜리트버튼을 세팅하고 //지워질 카드를 확정하기 위해 //

    });                                                   //해당태그에 파라미터에 item.id를 세팅하고 함수자체에는 id로 인자를 받고

    setcard(newcards);                  // 아이디가 일치하지 않는 것들만 남기면  삭제하기 버튼을 누른 해당아이디만 필터링됨

  };

  const deleteButton2 = function (id) {                                        //기능상 위에 딜리트버튼함수와 딜리트버튼2함수는 같다.

    const newcards2 = movedcards.filter(function (item) {             

      return item.id !== id;

    });

    setmovedcards(newcards2);                                 

  };

  const completebutton = function (id) {                                        //완료버튼에 온클릭 컴플리트버튼함수 할당

    const foundCard = card.find((item) => item.id === id);         //파인드 콜백함수로 카드 어레이에 아이디가 일치하는 것   

    if (foundCard) {                                                                //파운드카드로 선언할당 

      setcard(card.filter((item) => item.id !== id));                 //필터를 통해 아이디가 다르면 셋카드로 원래 자리에 놔두고

      setmovedcards([...movedcards, foundCard]);          //파운드카드는 셋무브드카드로 세팅해서 위치를 바꾼다.

    }

  };

  const backtoworkingbtn = function (id) {

    const foundCard2 = movedcards.find((item) => item.id === id);         //기능상 컴플리트버튼과 이하동문

    if (foundCard2) {

      setmovedcards(movedcards.filter((item) => item.id !== id));

      setcard([...card, foundCard2]);

    }

  };

  return (

    <>

      <h1>MY TO DO LIST </h1>

      <div className="searchbox">                                                                   //css도 공부해야되는데 ....

        제목 : <input type="text" value={title} onChange={titleinput}></input>  //input에 밸류세팅하고 온체인지세팅하는법

        &nbsp; 내용 :

        <input type="text" value={content} onChange={contentinsput}></input>

        &nbsp; <button onClick={plusbutton}>추가하기</button>

      </div>

      <h1>WORKING!</h1>

      <div>

        {card.map(function (item) {

          return (

            <div key={item.id} className="cardStyle">

              <h3> {item.title}</h3>

              <br />

              {item.content}

              <br />

              <button onClick={() => deleteButton(item.id)}>삭제하기</button>

              &nbsp;

              <button onClick={() => completebutton(item.id)}>완료</button>

            </div>

          );

        })}

      </div>

      <h1>DONE!</h1>

      <div>

        {movedcards.map(function (item) {

          return (

            <div key={item.id} className="cardStyle">

              <h3> {item.title}</h3>

              <br />

              {item.content}

              <br />

              <button onClick={() => deleteButton2(item.id)}>삭제하기</button>

              &nbsp;

              <button onClick={() => backtoworkingbtn(item.id)}>취소</button>

            </div>

          );

        })}

      </div>

    </>

  );

}

export default App;

// props 하고 컴포넌트 분리는 적용이 안됐다.