React-Tweetler 스프린트 의사코드

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>
      <i class="fa-sharp fa-solid fa-video"></i>
      <i class="fa-sharp fa-solid fa-arrow-up-from-bracket"></i>
      <i class="fa-sharp fa-solid fa-envelope"></i>
      <i class="fa-sharp fa-solid fa-gear"></i>
      
    </section>
  );
};

const Counter = () => { //카운터 컴포넌트
  return (
    <div className="tweetForm__input">
      <div className="tweetForm__inputWrapper">
        <div className="tweetForm__count" role="status">
          <span className="tweetForm__count__text">총 트윗 횟수:{dummyTweets.length}</span>
        </div>
        <img id= "titlelogo" src="https://www.codestates.com/assets/common/logo/codestates-ci.png"></img>
      </div>
    </div>
  );
};

const Footer = () => { //푸터 컴포넌트
  return (
    <div>
      <footer>
      <img id="logo" src={`${process.env.PUBLIC_URL}/codestates-logo.png`} />
      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">
              <img src = {tweet.picture}></img>
            </div>
            <div className="tweet__content">
              <div className="tweet__userInfo">
              
                <span className={tweetUserNameClass}>{tweet.username}</span>
                {/* TODO : 이름이 "parkhacker"인 경우, 이름 배경색을 rgb(235, 229, 249)으로 바꿔야 합니다. */}
                <span className='tweet__createdAt'>{tweet.createdAt}</span>
              </div>
              <div className='tweet__message'>{tweet.content}</div>
            </div>
          </li>
        );
      })}
    </ul>
  );
};

const Features = () => { // 피쳐 컴포넌트 // feature클래스 안에 Counter,Tweets,Footer 가 후손태그로 들어가있다.
  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 = () => { // 앱 컴포넌트 // APP클래스 자식태그인 main, 후손태그인 Sidebar,Feature 가 있다.
  return ( // 크게보면 feature 와 app이 큰덩어리 컴포넌트고 각각에 자손으로 여러 컴포넌트들이 들어가있다. 이렇게 합쳐진 app컴포넌트는 html root아이디 태그로 들어가 화면에 출력된다.
    <div className="App">
      <main>
       <Sidebar />
        <Features />
      </main>
    </div>
  );
};

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