React Twittler Intro

import React from 'react';
import './App.css';
import './global-style.css';
import { dummyTweets } from './static/dummyData';
// ! 위 코드는 수정하지 않습니다.

// 개발 단계에서 사용하는 더미 데이터입니다.

const Sidebar = () => {
return (

<section className="sidebar">
<i className="far fa-comment-dots"></i>//sidebar에 아이콘 표시
</section>
);
};

const Counter = () => {
return (

<div className="tweetForm__input">
  <div className="tweetForm__inputWrapper">
    <div className="tweetForm__count" role="status">
      total : {dummyTweets.length}//데이터 개수 표시
    </div>
  </div>
</div>
 );
};

const Footer = () => {
return (

<footer>//img가 footer의 하위
<div>
  <img id="logo" src={`${process.env.PUBLIC_URL}/codestates-logo.png`} />
  Copyright @ 2022 Code States
</div>
</footer>//
 );
};

const Tweets = () => {
return(

<ul className="tweets">
  {dummyTweets.map((tweet) => {
    const isParkHacker = tweet.username === 'parkhacker'
    const tweetUserNameClass = isParkHacker
          ? 'tweet__username tweet__username--purple'
          : 'tweet__username';//tweet에서 가져온 username이 parkhacker인지 확인하고 true일경우 보라색으로 바꾼다


    return (
      <li className="tweet" key={tweet.id}>
        <div className="tweet__profile">
          <img src = {tweet.picture}></img>//프로필 사진 등록
        </div>
        <div className="tweet__content">
          <div className="tweet__userInfo">
            <span className={tweetUserNameClass} >
              {tweet.username}//사용자 이름 표시               
           </span>
            <span className='tweet__createdAt'>
              {tweet.createdAt}//생성일자
            </span>
          </div>
          <div className='tweet__message'>
            {tweet.content}//트위터 내용
          </div>
        </div>
      </li>
    );
  })}
</ul>

);
};

const Features = () => {
return (

<section className="features">
  <div className="tweetForm__container">
    <div className="tweetForm__wrapper">
      <div className="tweetForm__profile"></div>
      <Counter />
    </div>
  </div>
  <Tweets />
  <Footer />//footer가 features의 내부

</section>
 );
};

const App = () => {
return (

<div className="App">
  <main>
    <Sidebar />//sidebar가 app의 내부        
    <Features />
  </main>
</div>

);
};

// ! 아래 코드는 수정하지 않습니다.
export { App, Sidebar, Counter, Tweets, Features, Footer };