React Twittler Intro

학습 목표

• 리액트, JSX 기본 문법을 익힌다.
• 리액트, JSX로 트위틀러를 하드 코딩할 수 있다.
• 컴포넌트를 먼저 개발하는 Bottom-up 개발 방식에 익숙해진다.
• npm script로 리액트 개발에 필요한 기본적인 툴을 사용할 수 있다.

Sidebar

• App 컴포넌트의 후손 컴포넌트로 Sidebar 컴포넌트가 있어야 합니다.
• Font Awesome을 활용하여 트윗 메시지 아이콘이 있어야 합니다. (className : "far fa-comment-dots").

const Sidebar = () => {
  return (
    <section className="sidebar">
      {/* TODO : 메세지 아이콘을 작성합니다. */}
      <i className="far fa-comment-dots"></i>
    </section>
  );
};

Counter

• Feature 컴포넌트의 후손 컴포넌트로 Counter 컴포넌트가 있어야 합니다.
• dummyTweet로 전달되는 트윗 개수와 카운트가 일치해야 합니다. ex) total : 5
  • total과 숫자가 콘텐츠에 포함되어 있어야 합니다.

const Counter = () => {
  return (
    <div className="tweetForm__input">
      <div className="tweetForm__inputWrapper">
        <div className="tweetForm__count" role="status">
          total: {dummyTweets.length}
        </div>
      </div>
    </div>
  );
};

Footer

• eatures 컴포넌트의 후손 컴포넌트로 Footer 컴포넌트가 있어야 합니다.
• Footer 컴포넌트의 후손 엘리먼트로 시맨틱 엘리먼트 footer가 있어야 합니다.
  • 시멘틱 엘리먼트 <footer>가 포함되어야 합니다.

const Footer = () => {
  return (
    <footer>
      <div>
        <img id="logo" src={`${process.env.PUBLIC_URL}/codestates-logo.png`} />
        Copyright @ 2022 Code States
      </div>
    </footer>
  );
};

Tweets

• 트윗 저자의 프로필 사진이 있어야 합니다.
  • li.tweet 엘리먼트의 후손 엘리먼트로<img>엘리먼트를 생성하고 dummyTweets의 이미지 주소 정보를 찾아서 <src> 속성을 지정합니다.
• 유저 이름이 있어야 합니다.
  • li.tweet 엘리먼트의 후손 엘리먼트로 <span> 엘리먼트를 생성하고 dummyTweets의 유저 이름을 <span>의 텍스트 콘텐츠로 넣습니다.
  • 클래스 이름은 tweet__username으로 지정합니다.
• 트윗 생성 일자(yyyy. m. d.) 가 있어야 합니다.
  • li.tweet 엘리먼트의 후손 엘리먼트로 <span> 엘리먼트를 생성하고 dummyTweets의 트윗 생성 일자를 <span>의 텍스트 콘텐츠로 넣습니다.
  • 클래스 이름은 tweet__createdAt으로 지정합니다.
  • 트윗 생성 일자는 yyyy. m. d. 형식으로 표시되어야 합니다. (’static/dummyTweets.js’ 파일을 잘 읽어보세요.)
• 트윗 메시지가 있어야 합니다.
  • li.tweet 엘리먼트의 후손 엘리먼트로 <div> 엘리먼트를 생성하고 dummyTweets의 트윗 내용을 <div> 의 텍스트 콘텐츠로 넣습니다.
  • 클래스 이름은 tweet__message으로 지정합니다.
• 트윗이 dummyTweets의 길이만큼 있어야 합니다.
  • dummyTweets에 트윗이 n개 전달되면, 화면에 트윗이 n개가 보여야 합니다.

조건부 렌더링 기술 요구사항

• 조건부 렌더링을 활용해서 여러 트윗 중 유저 이름이 parkhacker인 배경색이 var(--point-color-tint-2)가 되도록 클래스(tweet__username--purple)를 지정해야 합니다. (tweet__username tweet__username--purple)
  • ‘src/App.css’에 클래스가 미리 준비되어 있습니다. (className : 'tweet__username--purple')

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} />
            </div>
            <div className="tweet__content">
              <div className="tweet__userInfo">
                {/* TODO : 유져 이름이 있어야 합니다. */}
                <span className={tweetUserNameClass}>{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 };

과제가 끝나고 느낌점...