[2022.07.25] BreadCrumb 브레드크럼 만들기

오류1: link를 이용해서 연결하자 오류가 뜸 (app.jsx에서 만들어진 route안에 route로 중복들어가져서인지 오류가 났다.)

해결: useNavigate 를 사용하여 해결함

 

오류2: 현재 페이지에 글씨 색을 변경하고 싶었으나 조건문에서 오류가 생김

해결: props로 해당 조건에 맞는 값을 전달받아 addClass되게 설정

오류3: 1,2,3depth중 필요없는 값을 props에 쓰지 않아도 이미 태그가 만들어져서 자리를 차지함, before로 준 이미지까지 같이 보이는 오류가 생김 

해결: 삼항연산자를 통해 undefined일 경우 display 스타일을 설정함 + 조건오류에서 {twoDepth} x=>twoDepth o 로 변경하여 해결

<p className={linkActive==='twoDepth'?'subTwoDepth active':'subTwoDepth'} onClick={gotwoDepth} 
style={{display:twoDepth===undefined?'none':'inline-block'}}>

 

▼ 전체 BreadCrumb.jsx의 코드

import React from 'react';
import styled from 'styled-components';
import { useNavigate } from 'react-router-dom';
import splite from '../../../img/zetaplan_splite.png';

const BreadCrumb = ({ oneDepth,twoDepth,threeDepth,oneDepthLink,twoDepthLink,threeDepthLink,linkActive})=> 
{
  const navigate = useNavigate();
  const goHome = () => {
    navigate('/main');
  };
  const goOneDepth = () => {
    navigate(`${oneDepthLink}`);
  };
  const gotwoDepth = () => {
    navigate(`${twoDepthLink}`);
  };
  const gothreeDepth = () => {
    navigate(`${threeDepthLink}`);
  };
  
  return (
    <SubBreadcrumb>
      <p onClick={goHome}>HOME</p>
      <p className={linkActive==='oneDepth'?'subOneDepth active':'subOneDepth'} onClick={goOneDepth} style={{display:oneDepth===undefined?'none':'inline-block'}}>
        {oneDepth}
      </p>
      <p className={linkActive==='twoDepth'?'subTwoDepth active':'subTwoDepth'} onClick={gotwoDepth} style={{display:twoDepth===undefined?'none':'inline-block'}}>
        {twoDepth}
      </p>
      <p className={linkActive==='threeDepth'?'subThreeDepth active':'subThreeDepth'} onClick={gothreeDepth} style={{display:threeDepth===undefined?'none':'inline-block'}}>
        {threeDepth}
      </p>
    </SubBreadcrumb>
  );
};

export default BreadCrumb;

const SubBreadcrumb= styled.div`
    position: absolute;
    top:2rem;
    right:5rem;
    color: #fff;
    font-size:2.5rem;
    font-weight:700;
    p{
      display:inline-block;
      margin-left:2rem;
      cursor: pointer;
      color:#fff;
      &:hover{
        color:#007ACC;
      };
      &::before{
        content:'';
        display:inline-block;
        background:url(${splite}) no-repeat -236px -221px;
        background-size: 599px 280px;
        width: 8px;
        height: 13px;
        margin-right: 2rem;
      };
      &:first-child::before{
        display:none;
      };
    };
    p.active{
      color:#007ACC;
    };
    @media all and  (min-width: 768px) and (max-width: 1023px){
     &{
      font-size: 3.5rem;
      };
    };
    @media all and (min-width: 501px)  and (max-width: 767px){
      &{
        right: 3rem;
        top: 1rem;
        font-size: 5.5rem;
      };
    };
      @media all and (max-width: 500px){
        &{
          right: 2rem;
          top: 0rem;
          font-size: 5.5rem;
          p{
            margin-left:1.5rem;
            &::before{
              margin-right:1.5rem;
            };
          };
        };
  };
`

 

▼ BreadCrumb컴포넌트를 연결하는 jsx 코드(SubBanner)

import BreadCrumb from './BreadCrumb';
..
 <BreadCrumb oneDepth={oneDepth} twoDepth={twoDepth} 
 threeDepth={threeDepth} oneDepthLink={oneDepthLink} twoDepthLink={twoDepthLink} 
 threeDepthLink={threeDepthLink} linkActive={linkActive}/>
 ..

 

▼ 실제 화면에 보이게 작성하는 jsx코드(각각 pages)

/*one,two,three중 사용하는것만 택해서 작성(Depth+DepthLink는 세트)*/
  const oneDepth='소식 · 자료';
  const oneDepthLink='/zeta';
  const twoDepth='소식';
  const twoDepthLink='/zeta-people';
  const threeDepth='NEWS';
  const threeDepthLink='/zeta-ci';
  /*메뉴 색상 지정(oneDepth,twoDepth,threeDepth 중 택1)*/
  const linkActive='threeDepth';

  return (
    <div className='ztNetWorkBox'>
      {/*one,two,three중 사용하지 않는건 지우기+linkActive={linkActive}는 지우면 안됨*/}
      <SubBanner title={title} img={subBg} oneDepth={oneDepth} oneDepthLink={oneDepthLink} 
      twoDepth={twoDepth} twoDepthLink={twoDepthLink} threeDepth={threeDepth} 
      threeDepthLink={threeDepthLink} linkActive={linkActive}/>