React Twittler Intro

//export(내보내기)키를 통해서 dummyData 안에 있는 dummyTweet라는 배열의 값을 다른 파일에 import키를 통해서 쓸 수 있음
import { dummyTweets } from './static/dummyData'; //{해당변수명} + 해당경로

console.log(dummyTweets); //개발 단계에서 사용하는 더미 데이터입니다.

const Sidebar = () => {
  return (
    <section className="sidebar">
      Sidebar
      <i class="fa-regular fa-comment-dots"></i>
      //<span class="fa-regular fa-comment-dots"></span>가능
      //<div class="fa-regular fa-comment-dots"></div>가능
      //class명만 동일하면 대부분의 태그가 가능함
    </section>
  );
};

const Counter = () => {
  return (
    <div className="tweetForm__input">
      <div className="tweetForm__inputWrapper">
        <div className="tweetForm__count" role="status">
        //JS문법 사용하기위해 {}에 + 탬포럴 스트링 사용
        {`total : ${dummyTweets.length}}
        </div>
      </div>
    </div>
  );
};

const Footer = () => {
  return (
    //<div>를 <footer>로 바꿈 -> 시맨틱 엘리먼트 사용 시 <div>를 사용했을 때보다 footer영역을 더 명확하게 알 수 있음
    <footer>
      <img id="logo" src={`${process.env.PUBLIC_URL}/codestates-logo.png`} />
      Copyright @ 2022 Code States
    </footer>
  );
};

const Tweets = () => {
  return (
    <ul className="tweets">
    //dummyData를 고차함수 map을 통해서 원하는 형식의 레이아웃으로 표현
      {dummyTweets.map((tweet) => {
      //조건부 렌더링 할 때에는 삼항연산자를 사용
      //user이름이 parkhacker인 사람을 만나면 class를 하나 더 추가
      //삼항연사자 사용할 위치: className -> 조건부가 나뉘는 기준이니까
      //가독성을 위해 변수화함
        const isParkHacker = tweet.username === 'parkhacker' //tweet에서 username꺼내와서
         //parkhacker true일때는 tweet 두개를 설정
          ? 'tweet__username tweet__username--purple'
          : 'tweet__username'; //parkhacker가 아닐 경우 tweet__username하나만 설정
        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">
                {/* TODO : 유져 이름이 있어야 합니다. */}
                <span className={isParkHacker}>{tweet.username}</span>
                {/* TODO : 이름이 "parkhacker"인 경우, 이름 배경색을 rgb(235, 229, 249)으로 바꿔야 합니다. */}
                {/* TODO : 트윗 생성 일자가 있어야 합니다. */}
                <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>
          <h1>Counter</h1> <br />
          total :{dummyTweets.length}
          <Counter />
        </div>
      </div>
      <Tweets />
      <Footer /> //Footer을 Features의 후속 컴퍼넌트로 선언
    </section>
  );
};

const App = () => {
  return (
    <div className="App">
      <main>
        <Sidebar /> //Sidebar컴퍼넌트를 App컴퍼넌트의 하위 컴퍼넌트로 선언
        <Features />
      </main>
    </div>
  );
};