[React] 실습 - react twittler

 

 

 

 

 

📌 react twittler

 

 

 

📖 학습 목표

 

상세 컴포넌트 구현하기

Sidebar 컴포넌트 기술 요구사항

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

튜토리얼1을 먼저 학습하고 진행해보세요.

Counter 컴포넌트 기술 요구사항

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

Footer 컴포넌트 기술 요구사항

• Features 컴포넌트의 후손 컴포넌트로 Footer 컴포넌트가 있어야 합니다.
• Footer 컴포넌트의 후손 엘리먼트로 시맨틱 엘리먼트 footer가 있어야 합니다.
  • 시멘틱 엘리먼트 <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')

 

 

 

app.js

 

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

const Counter = () => {
  return (
    <div className="tweetForm__input">
      <div className="tweetForm__inputWrapper">
        <div className="tweetForm__count" role="status">
        {'total:' + dummyTweets.length}
        // dummyTweet로 전달되는 데이터의 개수
        </div>
      </div>
    </div>
  );
};

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

const Tweets = () => {
  return (
// 조건부 렌더링을 활용해서 여러 트윗 중 username 배경색이 var(--point-color-tint-2)가 되도록 클래스(.tweet__username--purple)를 지정
    <ul className="tweets">
      {dummyTweets.map((tweet) => {
        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">
                {tweet.username === "parkhacker" ? <span className = "tweet__username tweet__username--purple">{tweet.username}</span> : <span className = "tweet__username">{tweet.username}</span>}
                <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 };