tap 만들기

강의를 듣다가 tap을 만드는 과제를 주어졌는데 bootstrap를 사용해서 css를 만들고 구현을 했는데 나는 bootstrap을 사용하기가 싫어서 직접 styled-component를 사용해서 만들어보았다.

 

(기능구현위주라서 css는 대충 만들었다.)

 

react, styled-component 사용

 

UI를 만드는 단계

applecoding에서 배운 ui를 만드는 단계는 크게 3단계로 나뉘어져 있다.

 

1. html css로 디자인 미리 완성

2. UI의 현재 상태를 저장할 state 하나 만듬

3. state에 따라서 UI가 어떻게 보일지 작성

 

그래서 이걸 토대로 tap을 만들어보자.

 

html css로 디자인 미리 완성

 

전체적인 <Container>

button을 모아놓은 <TapContainer>

content를 모아놓은 <TapCotents>

를 통해 디자인만 미리 만들어놓았다.

 

// 컴포넌트
function TabContent() {

  return (
    <Container>
      <TapContainer>
        <button>
          HTML
        </button>
        <button>
          CSS
        </button>
        <button>
          JS
        </button>
      </TapContainer>
      <TapContents>
      	<div>HTML content</div>
      	<div>CSS content</div>
      	<div>JS content</div>
      </TapContents>
    </Container>
  );
}

export default Detail;

let Container = styled.div`
  background: #f5f7f8;
  width: 800px;
  height: 200px;
  padding: 20px;
`;

let TapContainer = styled.div`
  button {
    height: 30px;
    min-width: 40px;
    margin-right: 10px;
    background-color: white; // 나중에 바꿈
  }
`;

let TapContents = styled.div`
  height: 100%;
  padding: 20px;
  border: 3px solid yellow;
`;

 

UI의 현재 상태를 저장할 state 하나 만듬

 

useState를 통해서 button을 구분할 tapButton을 만들고

button마다 다르게 content를 보이게 하려고 tapConent를 useState를 통해서 만들어놓았다.

  let [tapButton, setTapButton] = useState(0);
  let [tapContent, setTapContent] = useState([
    <div>HTML content</div>,
    <div>CSS content</div>,
    <div>JS content</div>,
  ]);

 

state에 따라서 UI가 어떻게 보일지 작성

 

버튼을 누르면 알맞은 <div> content가 보이도록 작성

      <TapContents>{tapContent[tapButton]}</TapContents>

 

+ 누른 버튼마다 색 다르게하기

// props로 tapButton을 내려준다.
<TapContainer tapButton={tapButton}>

// tapButton과 nth-child()를 통해서 버튼색을 달리해준다.
let TapContainer = styled.div`
  button {
    height: 30px;
    min-width: 40px;
    margin-right: 10px;
    background-color: white;
  }
  button: nth-child(${(props) => props.tapButton + 1}) {
    background: yellow;
  }
`;

완성코드

 

import { useParams } from "react-router-dom";
import { useEffect, useState } from "react";
import styled from "styled-components";

function Detail({ shoes }) {
  let { id } = useParams();
  return (
    <div className="shoes_item">
      {/* eslint-disable-next-line jsx-a11y/alt-text */}
      <img
        src={`https://codingapple1.github.io/shop/shoes${Number(id) + 1}.jpg`}
        width="33%"
      />
      <h4>{shoes[id].title}</h4>
      <p>{shoes[id].content}</p>
      <p>{shoes[id].price}</p>
      <TabContent />
    </div>
  );
}

function TabContent() {
  let [tapButton, setTapButton] = useState(0);
  let [tapContent, setTapContent] = useState([
    <div>HTML content</div>,
    <div>CSS content</div>,
    <div>JS content</div>,
  ]);
  return (
    <Container>
      <TapContainer tapButton={tapButton}>
        <button
          onClick={() => {
            setTapButton(0);
          }}
        >
          HTML
        </button>
        <button
          onClick={() => {
            setTapButton(1);
          }}
        >
          CSS
        </button>
        <button
          onClick={() => {
            setTapButton(2);
          }}
        >
          JS
        </button>
      </TapContainer>
      <TapContents>{tapContent[tapButton]}</TapContents>
    </Container>
  );
}

export default Detail;

let Container = styled.div`
  background: #f5f7f8;
  width: 800px;
  height: 200px;
  padding: 20px;
`;

let TapContainer = styled.div`
  button {
    height: 30px;
    min-width: 40px;
    margin-right: 10px;
    background-color: white; // 나중에 바꿈
  }
  button: nth-child(${(props) => props.tapButton + 1}) {
    background: yellow;
  }
`;

let TapContents = styled.div`
  height: 100%;
  padding: 20px;
  border: 3px solid yellow;
`;