Router , styled-components

 

 

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;