이십이일. 반딧불이반 과제

블로그를 적으려면 항상 하고 싶은 말이 많은데 어디까지 개발 블로그에 해당하는 건지 잘모르겠다. 그 경계선이 애매한것처럼 느껴지는데,, 생각해보면 개발블로그는 이래야해! 라고 정해진 틀이 있는 것도 아니고 그냥 앞으로 내가 좀 더 발전하기 위해 도움 되는 글을 올리면 되지 않을까..? 어제 오늘 감기 몸살로 컨디션이 최악을 달리는 중이다...암튼 이것때문에 반딧불이반이 되었다는 건 아니고,, 실제로 프로젝트를 할땐 어렵지 않게 진행했는데..이론에서는 제대로 확인하지 못한 부분이 몇개 있었던거같다..많이 틀린,,ㅠㅠ 근데 이상하게도 과제는 프로젝트의 레퍼런스 의사코드를 작성하라는 것이다.. 일단 작성은 해야지 모,,

이게 맞는건가..하하
일단 프로젝트의 레퍼런스를 찾을수 없다..

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">
      {/* TODO : 메세지 아이콘을 작성합니다. */}
      <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">
          total : {dummyTweets.length}
        </div>
      </div>
    </div>
  );
};

const Footer = () => {
  return (
    <div>
      <img id="logo" src={`${process.env.PUBLIC_URL}/codestates-logo.png`} />
      Copyright @ 2022 Code States
      <footer></footer>
    </div>
    
  );
};
// TODO : Footer 함수 컴포넌트를 작성합니다. 시멘틱 엘리먼트 footer가 포함되어야 합니다.

const Tweets = () => {
  return (
    <ul className="tweets">
      {dummyTweets.map((tweet) => {

        const isParkHacker = tweet.username === 'parkhacker'
        const tweet__username = 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 : 유져 이름이 있어야 합니다. */}
                <span className={tweet__username}>{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>
          <Counter />
        </div>
      </div>
      <Tweets />
      <Footer />
    </section>
  );
};

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

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