sampleTest : 리액트(React) , 글발행(input/button 신규), 글삭제(title button)

App.js

/* eslint-disable*/

import { useState } from 'react';
import './App.css';

function App() {
  let [coffe, setCoffe] = useState(['아메리카노', '카페라떼', '카푸치노']);
  let [modal, setModal] = useState(false);
  let [inputtext, setInputtext] = useState(''); // , input 창에 입력한 값을 상태로 저장한다.
  let handleClick = () => {
    setInputtext(''); // , input 창에 입력한 값을 초기화한다.
  }
  return (
    <>
      <h4 className="BlogFrom_CSC">BlogFrom_CSC</h4>
      {
        coffe.map((c, i) => {
          return (
            <div className='titleCss' key={i}>
              <div onClick={() => {
                setModal(!modal);   
              }}>{coffe[i]}
                <button className='buttonCss'

                onClick={(e) => {
                  e.stopPropagation();
                  let copy1 = [...coffe]; 
                  copy1.splice(i, 1); 
                  setCoffe(copy1);  
                } }
                >삭제</button>
              </div>
              <div>날짜</div>
            </div>
          )
        })
      }
      {
        modal ? <Modal /> : null
      }
      <div className='inputButtonCss'></div>
      <input className='inputCss'
        type='text'
        placeholder='입력'
        onChange={(e) => {
          setInputtext(e.target.value); // , input 창에 입력한 값을 상태로 저장한다.
        }}
        value={inputtext} 
        ></input>
      <button className='buttonCss'
        onClick={() => {
          let copy = [...coffe];
          copy.unshift(inputtext);
          setCoffe(copy);
         handleClick(); 
        }}
      >글발행</button>
    </>
  )
}

function Modal() {
  return (
    <div className='modal'>
      <br></br>
      <div>모달</div>
      <div>날짜</div>
      <div>모달내용</div>
      <br></br>
    </div>
  )
}


export default App;

 

App.css

.App {
  text-align: center;
}

.BlogFrom_CSC  {
  padding: 20px;
  text-align: left;
  border-bottom: 1px solid grey;
}
 
 .titleCss , .ModalContent {
  padding-left: 20px;
  text-align: left;
  border-bottom: 2px solid grey;
}
 

.inputButtonCss {
  padding-left: 20px;
  padding-right: 20px;
  text-align: left;
  border-bottom: 2px solid grey;
}

  .inputCss {
  padding: 10px;
  margin: 10px;
  background-color: grey(252, 248, 248, 0.817);
  color: 2px solid grey;
  border: black;
  border-radius: 5px;
  cursor: pointer;
  border-bottom: 2px solid grey;
}
.buttonCss  {
  padding: 10px;
  margin: 10px;
  background-color: rgb(37, 7, 7);
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}



.modal {
  margin-top: 20px;
  padding: 20px;
  background: #eee;
  text-align: left;
  box-sizing: border-box;
}

div {
  box-sizing: border-box;
}

 


.black-nav {
  display: flex;
  background-color: rgb(37, 7, 7);
  width: 100%;
  color: white;
  padding-left: 20px;
  font-size: 20px;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}