23.03.27 웹개발_React(Twittler Intro 의사코드)

//react를 불러오는 코드
import React from 'react';
//작업중인 폴더 안에 있는 css파일 불러오는 코드
import './App.css';
import './global-style.css';
//작업중인 폴더 안에 있는 dummyData파일안에 있는 dummyTweets 함수를 불러오는 코드
import { dummyTweets } from './static/dummyData';

//Sidebar캄포넌트
const Sidebar = () => {
  return (
    <section className="sidebar">
    //sidebar에 이미지 추가(출처 : font awsome)
    <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">
    //dummyTweet로 전달되는 데이터의 갯수를 보여주는 코드
    total:{dummyTweets.length}  
        </div>
      </div>
    </div>
  );
};

//Footer컴포넌트
const Footer = () => {
  return (
    //시멘틱 엘리먼트 footer 사용
    <footer>
      <img id="logo" src={`${process.env.PUBLIC_URL}/codestates-logo.png`} />
      Copyright @ 2022 Code States
    </footer>
  );
};


//Tweets컴포넌트
const Tweets = () => {
  return (
    <ul className="tweets">
    //dummyTweets에서 username이 parkhacker인것만 가져오기
    //가져온 이름이 parkhacker이면 배경색이 purple로 바꿔주기
      {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">
              //dummyTweets.mpa에서 picture을 가져와서 프로필 사진으로 넣기
              <img src={tweet.picture}</img>
            </div>
            <div className="tweet__content">
              <div className="tweet__userInfo">
                // dummyTweets.mpa에서 username을 가져와서 유저 이름 넣기
				<span className={tweetUserNameClass}>
				{tweet.username}
				</span>
                //dummyTweets.mpa에서 createdAt을 가져와서 생성 일자넣기
				<span className="tweet__createdAt">
				{tweet.createdAt}
				</span>
                //dummyTweets.mpa에서 content를 가져와서 넣기
				<div className="tweet__message">
				{tweet.content}
				</div>
              </div>
            </div>
          </li>
        );
      })}
    </ul>
  );
};

//Features컴포넌트
const Features = () => {
  return (
    <section className="features">
      <div className="tweetForm__container">
        <div className="tweetForm__wrapper">
          <div className="tweetForm__profile"></div>
        //Counter컴포넌트 불러오기  
    	<Counter />
        </div>
      </div>
    	//Tweets컴포넌트 불러오기
      <Tweets />
      //Footer 컴포넌트 불러오기
      <Footer />
    </section>
  );
};

//APP함수 선언
const App = () => {
  return (
    <div className="App">
      <main>
        //Sidebar 컴포넌트 불러오기
		<Siderbar />
    	//Features 컴포넌트 불러오기
        <Features />
      </main>
    </div>
  );
};

export { App, Sidebar, Counter, Tweets, Features, Footer };