[React] React State & Props

Slidebar.js
import React from 'react';
import {Link} from "react-router-dom
const Sidebar = () => {
return (

<section className="sidebar">
  {/* */}
  <Link to="/">
    <i className="far fa-comment-dots"></i>
    </Link>
    <Link to="/about">
    <i className="far fa-question-circle"></i>
    </Link>
    <Link to="/mypage">
    <i className="far fa-user"></i>
    </Link>
</section>  
  );
 };
export default Sidebar;

Footer.js
import React from 'react';
const Footer = () => {
return

<footer>     
</footer>

; }; export default Footer;

Tweet.js
import React from 'react';
import './Tweet.css';
const Tweet = ({ tweet }) => {
const parsedDate = new Date(tweet.createdAt).toLocaleDateString('ko-kr');
return (

<li className="tweet" id={tweet.id}>
  <div className="tweet__profile">
    <img src={tweet.picture} />
  </div>
  <div className="tweet__content">
    <div className="tweet__userInfo">
      <div className="tweet__userInfo--wrapper">
      <span className="tweet__username">{tweet.username}</span>{/* TODO : 유져 이름이 있어야 합니다. */}
      <span className="tweet__createdAt">{parsedDate}</span>  {/* TODO : 트윗 생성 일자가 있어야 합니다. parsedDate를 이용하세요. */}
      </div>
      <div className="tweet__message">{tweet.content}</div>
    </div>
    <div className="tweet__message">
      TODO : 트윗 메세지가 있어야 합니다.
    </div>
  </div>
</li>
  );
 };
export default Tweet;

About.js

import React from 'react';
import Footer from '../Footer';
import './About.css';
const About = (props) => {
return (

<section className="aboutTwittler">
  <div className="aboutTwittler__container">
    <div className="aboutTwittler__wrapper">
      <div className="aboutTwittler__detail">
        <p className="aboutTwittler__detailName">React Twittler Info</p>
      </div>
    </div>
  </div>
  <div className="aboutTwittler__content">
    <i className="fas fa-users"></i>
    <p>나만의 Twittler 소개페이지를 꾸며보세요.</p>
  </div>
  <Footer />
</section>
  );
 };
export default About;

MyPage.js
import React from 'react';
import Footer from '../Footer';
import Tweet from '../Components/Tweet';
import './MyPage.css';
import dummyTweets from '../static/dummyData';
const MyPage = () => {
const filteredTweets = dummyTweets.filter(dummyTweets => dummyTweets.username==='parkhacker')
// TODO : 주어진 트윗 목록(dummyTweets)중 현재 유져인 parkhacker의 트윗만 보여줘야 합니다.
return (

 <section className="myInfo">
  <div className="myInfo__container">
    <div className="myInfo__wrapper">
      <div className="myInfo__profile">
        <img src={filteredTweets[0].picture} />
      </div>
      <div className="myInfo__detail">
        <p className="myInfo__detailName">
          {filteredTweets[0].username} Profile
        </p>
        <p>28 팔로워 100 팔로잉</p>
      </div>
    </div>
  </div>
  <ul className="tweets__mypage">       
    <Tweet tweet={filteredTweets[0]}/>
    {/* TODO : 주어진 트윗 목록(dummyTweets)중 현재 유져인 parkhacker의 트윗만 보여줘야 합니다. */}        
  </ul>
  <Footer />
</section>

);
};
export default MyPage;

App.js
import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
// TODO : React Router DOM을 설치 후, import 구문을 이용하여 BrowserRouter, Routes, Route 컴포넌트를 불러옵니다.
import Sidebar from './Sidebar';
import Tweets from './Pages/Tweets';
import MyPage from './Pages/MyPage';
import About from './Pages/About';
// TODO : MyPage, About 컴포넌트를 import 합니다.
import './App.css';
import './global-style.css';
const App = (props) => {
return (

  <div className="App">
    <main>
      <Sidebar />
      <section className="features">
        {/* TODO : 유어클래스를 참고해서, 테스트 케이스를 통과하세요.
          TODO : React Router DOM 설치 후 BrowserRouter, Routes, Route의 주석을 해제하고 Routes, Route 컴포넌트를 적절하게 작성합니다. */}
        {/* Route 예시: <Route path="/" element={<Tweets />}></Route> */}
        <Routes>
          <Route path="/" element={<Tweets />}></Route>
          <Route path="/about" element={<About />}></Route>
          <Route path="/mypage" element={<MyPage />}></Route>
        </Routes>
      </section>
    </main>
  </div>
</BrowserRouter>  
  );
 };
// ! 아래 코드는 수정하지 않습니다.
export default App;

Tweets.js
import React, { useState } from 'react';
import Footer from '../Footer';
import Tweet from '../Components/Tweet';
import './Tweets.css';
import dummyTweets from '../static/dummyData';
const Tweets = () => {
const [msg, setMsg] = useState("");// TODO : 새로 트윗을 작성하고 전송할 수 있게 useState를 적절히 활용하세요.
const [name,setName]=useState("parkhacker")
const [data,setData]=useState(dummyTweets)
const handleButtonClick = (event) => {
const tweet = {
id:data.length+1,
username:name,
picture:https://randomuser.me/api/portraits/women/$,
content:msg,
};
setData([tweet,...data])
// TODO : Tweet button 엘리먼트 클릭시 작동하는 함수를 완성하세요.
// 트윗 전송이 가능하게 작성해야 합니다.
};
const handleChangeUser = (event) => {
setName(event.target.value)// TODO : Tweet input 엘리먼트에 입력 시 작동하는 함수를 완성하세요.
};
const handleChangeMsg = (event) => {
setMsg(event.target.value);// TODO : Tweet textarea 엘리먼트에 입력 시 작동하는 함수를 완성하세요.
};
return (
<React.Fragment>

  <div className="tweetForm__container">
    <div className="tweetForm__wrapper">
      <div className="tweetForm__profile">
        <img src="https://randomuser.me/api/portraits/men/98.jpg" />
      </div>
      <div className="tweetForm__inputContainer">
        <div className="tweetForm__inputWrapper">
          <div className="tweetForm__input">
            <input
              type="text"
              defaultValue="parkhacker"
              placeholder="your username here.."
              className="tweetForm__input--username"
              onChange={handleChangeUser}
              value={name}

          <textarea 
              className='tweetForm__input--message'
              placeholder="your tweet here.."
              value={msg}
              onChange={handleChangeMsg}
              ></textarea>
          </div>
          <div className="tweetForm__count" role="status">
            <span className="tweetForm__count__text">
              {/* TODO : 트윗 총 개수를 보여줄 수 있는 Counter를 작성하세요. */}
              {"total:" + dummyTweets.length}
            </span>
          </div>
        </div>
        <div className="tweetForm__submit">
          <div className="tweetForm__submitIcon"></div>
          {/* TODO : 작성한 트윗을 전송할 수 있는 button 엘리먼트를 작성하세요. */}
          <button 
          className='tweetForm__submitButton'
          onClick={handleButtonClick}
          >Tweet</button>
        </div>
      </div>
    </div>
  </div>
  <div className="tweet__selectUser"></div>
  <ul className="tweets">
    {/* TODO : 하나의 트윗이 아니라, 주어진 트윗 목록(dummyTweets) 갯수에 맞게 보여줘야 합니다. */}
    {data.map((el)=>{
      return <Tweet tweet = {el} />})}
  </ul>
  <Footer />
</React.Fragment>
     );
    };
   export default Tweets;