블로그

• App.js

• /* eslint-disable */
  
  import React, { useState } from 'react';
  import logo from './logo.svg';
  import './App.css';
  
  function App() {
    let [title, setTitle] = useState(['치킨 맛집 추천', '도넛 맛집 추천', '피자 맛집 추천']);
    let [good, setGood] = useState(0);
    let [modal, setModal] = useState(false);
    let [push, setPush] = useState(0);
    let [input, setInput] = useState('');
  
    function changeTitle(){
      var newTitle = [...title];
      newTitle[0] = '햄버거 맛집 추천';
      setTitle(newTitle);
    }
  
    return (
      <div className="App">
        <div className="black-nav">
          <div>개발 Blog</div>
        </div>
        <button onClick={ changeTitle }>버튼</button>
  
      {
        title.map((item, i)=>{
          return(
            <div className="list" key={i}>
              <h3 onClick={() => {setPush(i)}}> { item } <span onClick={()=>{setGood(good+1)}}>👍</span> {good} </h3>
              <p>2월 17일 발행</p>
              <hr />
            </div>
          )
        })
      }
        
        {/* <button onClick={() => {setPush(0)}}>버튼1</button>
        <button onClick={() => {setPush(1)}}>버튼2</button>
        <button onClick={() => {setPush(2)}}>버튼3</button> */}
  
        {/* <input onChange={(e) => { setInput(e.target.value) }}/> */}
  
        <div className="publish">
          <input onChange={(e) => (setInput(e.target.value))}/> 
          <button onClick={()=> {
            var titleCopy = [...title];
            titleCopy.unshift(input);
            setTitle(titleCopy);
          }}>저장</button>
        </div>  
  
        <button onClick={()=>{setModal(!modal)}}>Modal</button>
        {
          modal === true ? 
          <Modal title={title}
            push={push}
          /> : null
        }
  
      </div>
    );
  }
  
  
  function Modal({title, push}){
    return(
        <div className="modal">
          <h2>{ title[push] }</h2>
          <p>날짜</p>
          <p>상세내용</p>
        </div>
    );
  }
  
  export default App;

 

• App.css

• .App {
    text-align: center;
  }
  
  body {
    font-family: 
    'nanumsquare';
  }
  
  .black-nav {
    display: flex;
    width: 100%;
    padding: 20px;
    color: white;
    background: black;
    font-size: 20px;
    font-weight: 600;
  }
  
  .list { 
    margin-top: 30px;
    padding-left: 20px;
    padding-right: 20px;
    text-align: left;
  }
  
  .modal {
    margin-top: 20px;
    padding: 20px;
    background: #eee;
  }
  
  .publish {
    margin-top: 30px;
    margin-bottom: 30px;
  }
  
  .publish input {
    padding: 10px;
    font-size: 16px;
    border-radius: 5px;
    width: 80%;
    border: 1px solid grey;
  }
  
  .publish button {
    display: block;
    margin: auto;
    margin-top: 10px;
  }
  
  .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);
    }
  }