Twittler SPA와 중복되는 dummydata는 전 게시물을 참고해주세요
App.js
import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';// TODO : React Router DOM을 설치 후, import 구문을 이용하여 BrowserRouter, Routes, Route 컴포넌트를 불러옵니다.
import Sidebar from './Sidebar';
import Tweets from './Pages/Tweets';
import MyPage from './Pages/MyPage';
import About from './Pages/About';
import './App.css';
const App = () => {
return (
<BrowserRouter>
<div className="App">
<main>
<Sidebar />
<section className="features">
<Routes>
<Route path="/" element={<Tweets />} />
<Route path="/about" element={<About />} />
<Route path="/mypage" element={<MyPage />} />
</Routes>
</section>
</main>
</div>
</BrowserRouter>
);
};
// ! 아래 코드는 수정하지 않습니다.
export default App;
Sidebar.js
import React from 'react';
import { Link } from 'react-router-dom';
const Sidebar = () => {
return (
<section className="sidebar">
<Link to="/"><i className="far fa-comment-dots"></i></Link>
<Link to="/about"><i className="far fa-question-circle"></i></Link>
<Link to="/mypage"><i className="far fa-user"></i></Link>
</section>
);
};
export default Sidebar;
Tweet.js
import React from 'react';
import './Tweet.css';
const Tweet = ({ tweet }) => {
const parsedDate = new Date(tweet.createdAt).toLocaleDateString('ko-kr');
return (
<li className="tweet" id={tweet.id}>
<div className="tweet__profile">
<img src={tweet.picture} />
</div>
<div className="tweet__content">
<div className="tweet__userInfo">
<div className="tweet__userInfo--wrapper">
<span className="tweet__username">{tweet.username}</span>
<span className="tweet__createdAt">{parsedDate}</span>
</div>
</div>
<div className="tweet__message">
{tweet.content}
</div>
</div>
</li>
);
};
export default Tweet;
Tweets.js
import React, { useState } from 'react';
import Footer from '../Footer';
import Tweet from '../Components/Tweet';
import './Tweets.css';
import dummyTweets from '../static/dummyData';
const Tweets = () => {
const getRandomNumber = (min, max) => {
return parseInt(Math.random() * (Number(max) - Number(min) + 2));
};
const [user, setUser] = useState('parkhacker');
const [msg, setMsg] = useState('');
const[tweets, setTweets] = useState(dummyTweets);
const handleButtonClick = (event) => {
const tweet = {
id: dummyTweets.length,
username: user,
picture: `https://randomuser.me/api/portraits/women/${getRandomNumber(
1,
98
)}.jpg`,
content: msg,
createdAt: new Date().toLocaleDateString('ko-kr'),
updatedAt: new Date().toLocaleDateString('ko-kr')
};
setTweets([tweet, ...tweets])
};
const handleChangeUser = (event) => {
setUser(event.target.value)
};
const handleChangeMsg = (event) => {
setMsg(event.target.value)
};
return (
<React.Fragment>
<div className="tweetForm__container">
<div className="tweetForm__wrapper">
<div className="tweetForm__profile">
<img src="https://randomuser.me/api/portraits/men/98.jpg" />
</div>
<div className="tweetForm__inputContainer">
<div className="tweetForm__inputWrapper">
<div className="tweetForm__input">
<input
type="text"
defaultValue="parkhacker"
placeholder="your username here.."
className="tweetForm__input--username"
onChange={handleChangeUser}
></input>
<textarea
defaultValue={""}
placeholder="your message here.."
className="tweetForm__input--message"
onChange={handleChangeMsg}
value={msg}></textarea>
</div>
<div className="tweetForm__count" role="status">
<span className="tweetForm__count__text">
{'total: ' + tweets.length}
</span>
</div>
</div>
<div className="tweetForm__submit">
<div className="tweetForm__submitIcon"></div>
<button className="tweetForm__submitButton" onClick={handleButtonClick}>Tweet</button>
</div>
</div>
</div>
</div>
<div className="tweet__selectUser"></div>
<ul className="tweets">
{tweets.map((el) => {
return(
<Tweet tweet={el} />
)})}
</ul>
<Footer />
</React.Fragment>
);
};
export default Tweets;
MyPage.js
import React from 'react';
import Footer from '../Footer';
import Tweet from '../Components/Tweet';
import './MyPage.css';
import dummyTweets from '../static/dummyData';
import Tweets from './Tweets';
const MyPage = () => {
const filteredTweets = dummyTweets.filter((el) => {
return el.username === "parkhacker";
})
return (
<section className="myInfo">
<div className="myInfo__container">
<div className="myInfo__wrapper">
<div className="myInfo__profile">
<img src={filteredTweets[0].picture} />
</div>
<div className="myInfo__detail">
<p className="myInfo__detailName">
{filteredTweets[0].username} Profile
</p>
<p>28 팔로워 100 팔로잉</p>
</div>
</div>
</div>
<ul className="tweets__mypage">
{filteredTweets.map((tweet) => {
return <Tweet tweet={tweet}/>
})}
</ul>
<Footer/>
</section>
);
};
export default MyPage;