React Twittler Intro 복습

의사코드 작성

• 메세지 아니콘을 넣기 위해 폰트어썸을 import

Sidebar

• 아이콘을 <i></i>에 클래스명으로 삽입

App

• 리턴값에 컴포넌트 작성

Tweets

• <img/>태그 src 속성값으로 {tweet.picture}을 작성
  (객체는 다른 dummyTweets.js 파일에 존재)
• 유저이름: <span>태그 사용, 내용은 {tweet.username}
• 같은 방식으로 트윗 생성일자와 트윗 메세지가 담기 태그 생성
• 이름이 "parkhacker"인 경우, 이름 배경색 변경
  • 변수 isParkhacker 선언 username이 박해커인지 확인 (t/f 반환)
  • 변수 tweetUserNameClass 선언,
    삼항 언산자를 통해 t일 때와 f일 때의 결과값 구분해서 변수에 할당
  • 유저이름이 담긴 span 태그의 className 속성에 tweetUserNameClass 할당
    (css로 배경색 조절)

Counter

• <span>태그 사용, 내용은 {tweet.length}

Footer

• 최상위 태그 명을 div => footer로 변경 (시맨틱 엘리먼트)

Features

• 리턴값에 컴포넌트 작성

import React from 'react';
import './App.css';
import './global-style.css';
import "@fortawesome/react-fontawesome";
import { dummyTweets } from './static/dummyData';

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">
          <span>TOTAL: {dummyTweets.length}</span>
        </div>
      </div>
    </div>
  );
};

const Footer = () => {
  return (
  <footer>
    <img id="logo" src={`${process.env.PUBLIC_URL}/codestates-logo.png`} />
    Copyright @ 2022 Code States
  </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">
              <img src = {tweet.picture}/>
            </div>
            <div className="tweet__content">
              <div className="tweet__userInfo">
                <span className = {tweetUserNameClass}>{tweet.username}</span>
                <span className = "tweet__createdAt">{tweet.createdAt}</span>
              </div>
              <p className = "tweet__message">{tweet.content}</p>
            </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/>
    </section>
  );
};

const App = () => {
  return (
    <div className="App">
      <main>
        <Sidebar/>
        <Features />
      </main>
    </div>
  );
};

export { App, Sidebar, Counter, Tweets, Features, Footer };