반딧🔥반

React Twittler Intro 과제 레퍼런스의 의사코드를 작성

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>
  );
};
// 오늘 뉴스가 몇개 나왔는지 알려주는 counter 함수
const Counter = () => {
  return (
    <div className="tweetForm__input">
      <div className="tweetForm__inputWrapper">
        <div className="tweetForm__count" role="status">
          <h1>오늘의 뉴스~</h1>
          <br></br>
          {/* dummyTweets 의 개수 만큼 total에 얼마 의 뉴스가 올라왔는지 알려주는 코드 */}
          total : {dummyTweets.length}
        </div>
      </div>
    </div>
  );
};
//  footer 즉 하단에 있는 함수를 제작하는 함수
const Footer = () => {
  return (
    <div>
      <footer>
        {/* 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이라고 지정 */}
      {dummyTweets.map((tweet) => {
        // isParkHacker를 tweet.username 이 parkhacker라고 명시하고
        // tweetUserNameClass 를 박해커 와 같다고 정의해
        // 3항연산자를 사용해 박해커가 맞으면 username을 보라색으로 바꾸고 그게 아니면 트윗이름만 출력한다.
        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 : 트윗 메세지가 있어야 합니다. */}
              <span className={"tweet__message"}>{tweet.content}</span>
            </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 };