React Twittler Intro 과제

주요 JSX 문법
- 최상위에서 opening tag와 closing tag로 감싸주어야함
- CSS class 속성 지정 : "className" 으로 표기
- JSX에서 JavaScript를 쓰고자 한다면, 꼭 중괄호를 이용 (미 사용 시 일반텍스로 인식)
- React 엘리먼트가 JSX로 작성되면 "대문자"로 시작=사용자 정의 컴포넌트 (소문자로 시작 일반적인 HTML 엘리먼트로 인식)
- 조건부 렌더링은 삼항연산자 사용
- 여러 개의 HTML 엘리먼트를 표시할 때는 "map()" 함수를 사용 (map 함수 사용 시 "key" JSX 속성을 넣어야함)

React Twittler Intro 과제
App.js Sidebar 컴포넌트
      ✓ App 컴포넌트의 후손 컴포넌트로 Sidebar 컴포넌트가 있어야 합니다.
      ✓ Font Awesome을 활용한 트윗 메세지 아이콘이 있어야 합니다. (className : ".far .fa-comment-dots")
    App.js Counter 컴포넌트
      ✓ Feature 컴포넌트의 후손 컴포넌트로 Counter 컴포넌트가 있어야 합니다.
      ✓ `dummyTweet`로 전달되는 트윗 갯수와 카운트가 일치해야 합니다.
    App.js Footer 컴포넌트
      ✓ Features 컴포넌트의 후손 컴포넌트로 Footer 컴포넌트가 있어야 합니다.
      ✓ Footer 컴포넌트의 후손 엘리먼트로 시멘틱 엘리먼트 footer가 있어야 합니다. 
    App.js Tweets 컴포넌트
      각 트윗은
        ✓ 트윗 저자의 프로필 사진이 있어야 합니다.
        ✓ 유져 이름이 있어야 합니다.
        ✓ 트윗 생성 일자(yyyy. m. d.) 가 있어야 합니다. 
        ✓ 트윗 메세지가 있어야 합니다.
        ✓ dummyTweets의 길이 만큼 트윗이 보여야 합니다.
    App.js Feautres 컴포넌트
      ✓ App 컴포넌트의 후손 컴포넌트로 Features 컴포넌트가 있어야 합니다.
    App.js 조건부 렌더링 테스트
      parkhacker가 작성한 트윗의 경우
        ✓ username 배경색이 var(--point-color-tint-2)가 되도록 클래스(.tweet__username--purple)를 지정해야 합니다. 

작성코드

import React from 'react';
import './App.css';
import './global-style.css';
import { dummyTweets } from './static/dummyData';
// ! 위 코드는 수정하지 않습니다.
console.log(dummyTweets); // 개발 단계에서 사용하는 더미 데이터입니다.

const Sidebar = () => {
  return (
    <section className="sidebar">
      <i className="far fa-comment-dots"></i>
    </section>
  );
};

const Counter = () => {
  return (
    <div className="tweetForm__input">
      <div className="tweetForm__inputWrapper">
        <div className="tweetForm__count" role="status">
          {/* TODO : dummyTweet로 전달되는 데이터의 갯수를 보여줍니다. */}
          total: {dummyTweets.length}
        </div>
      </div>
    </div>
  );
};

const Footer = () => {
  return (
    <div>
      <img id="logo" src={`${process.env.PUBLIC_URL}/codestates-logo.png`} />
      <footer>Copyright @ 2022 Code States</footer>
    </div>
  );
};
// TODO : Footer 함수 컴포넌트를 작성합니다. 시멘틱 엘리먼트 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';
        return (
          <li className="tweet" key={tweet.id}>
            <div className="tweet__profile">
              {/* TODO: 트윗 저자의 프로필 사진이 있어야 합니다.  */}
              <img src={tweet.picture}></img>              
            </div>
            <div className="tweet__content">
              <div className="tweet__userInfo">
                {/* TODO : 유져 이름이 있어야 합니다. */}
                {/* TODO : 이름이 "parkhacker"인 경우, 이름 배경색을 rgb(235, 229, 249)으로 바꿔야 합니다. */}
                {/* TODO : 트윗 생성 일자가 있어야 합니다. */}
                <span className={tweetUserNameClass}> {tweet.username}</span>
                <span className="tweet__createdAt">{tweet.createdAt}</span>
              </div>
              {/* TODO : 트윗 메세지가 있어야 합니다. */}
              <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 />
      {/* TODO : Footer 컴포넌트를 작성합니다. */}
      <Footer />
    </section>
  );
};

const App = () => {
  return (
    <div className="App">
      <main>
        {/* TODO : Sidebar 컴포넌트를 작성합니다. */}
        <Sidebar />
        <Features />
      </main>
    </div>
  );
};

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