import "./App.css";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import Home from "./pages/Home";
import Detail from "./pages/Detail";
function App() {
/**
* TODO: 아래와 같은 구조로 컴포넌트를 만들고 Browser Router 설정하세요. UI는 신경쓰지 않습니다. 별도의 Router 컴포넌트 생성 여부는 자유입니다.
* Home 컴포넌트는 <Link> 컴포넌트를 사용해서 Detail 컴포넌트로 이동하도록 하세요.
* Detail 컴포넌트를 path parameter 로 id 를 받도록 하세요.
* Detail 컴포넌트는 path parameter 로 받은 id 를 콘솔로그로 찍으세요.
*
* src/
|-- pages/
| |-- Home.jsx
| |-- Detail.jsx
|-- App.jsx
*/
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/Detail/:id" element={<Detail />} />
</Routes>
</BrowserRouter>
);
}
export default App;
import { Link } from "react-router-dom";
const Home = () => {
return (
<div>
<h1>홈페이지!</h1>
<Link to={"/detail/1"}>Go to : Detail!</Link>
</div>
);
};
export default Home;
import { Link, useParams } from "react-router-dom";
const Detail = () => {
const params = useParams();
console.log(params.id);
return (
<div>
<h1>디테일 페이지!</h1>
<p>{params.id}</p>
<Link to={"/"}>Go to : Home!</Link>
</div>
);
};
export default Detail;
import BoxContainer from "./components/BoxContainer";
import GlobalStyle from "./components/GlobalStyle";
function App() {
// Box 를 클릭하면 해당 Box만 파란색이 되도록 해야 합니다. components/ 안의 컴포넌트들안에서 TODO를 확인하세요.
// TODO: GlobalStyle 컴포넌트를 만들고 styled-reset 패키지로 스타일 초기화하고 App 컴포넌트에 적용해 보세요.
return (
<div>
<GlobalStyle />
<h1>Clickable Boxes</h1>
<BoxContainer />
</div>
);
}
export default App;
import { createGlobalStyle } from "styled-components";
import reset from "styled-reset";
const GlobalStyle = createGlobalStyle`
${reset}
body {
font-family: "Helvetica", "Arial", sans-serif;
line-height: 1.5;
font-size:30px;
}
`;
export default GlobalStyle;
import { useState } from "react";
import styled from "styled-components";
import Box from "./Box";
const Container = styled.div`
display: flex;
gap: 10px;
`;
function BoxContainer() {
const [activeIndex, setActiveIndex] = useState(0);
const handleClick = (index) => {
setActiveIndex(index);
};
return (
<Container>
{/* TODO: active prop 을 어떻게 해야 클릭한 박스임을 알수있을 지 active prop에 할당할 값을 수정해보세요. */}
{[0, 1, 2, 3, 4].map((index) => (
<Box
key={index}
active={activeIndex === index}
onClick={() => handleClick(index)}
/>
))}
</Container>
);
}
export default BoxContainer;
import styled from "styled-components";
// TODO: props로 받은 $active 에 따라 배경색이 blue 또는 gray가 되도록 해보세요.
const StyledBox = styled.div`
width: 100px;
height: 100px;
background-color: ${(props) => (props.$active ? "blue" : "gray")};
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: white;
font-size: 20px;
`;
function Box({ active, onClick }) {
return <StyledBox $active={active} onClick={onClick} />;
}
export default Box;