6. NavDetail 제작하기

시작

이전에 포스팅에서 pcategory 값에 따라 NavDetail을 보여주게끔 하는 NavDetail을 작성하겠다고 생각했고 그것을 구현하려고 합니다.

 

오류해결

이전 Nav.js 코드에서 항상 NavDetail 컴포넌트가 보이도록 했는데 pcategory에 값이 있을때만 나오도록 수정했습니다.

Nav.js

import React , {useState} from "react";
import styled ,{css} from "styled-components";

/*nav바 밑에 요소 불러오기 */
import NavDetail from "./NavDetail";


export default function Nav(){

    const [pcategory , setPcategory] = useState(null)

    const clickPcategory = (pcategory) => {
        setPcategory(pcategory)
    }
    
    const ContainerSelected = {
        background : '#e8dc8a',
        borderRadius : '24px'
    }
    
    

    return(
        <Positioner>
            <WhiteBackground>
                <NavContents>
                    <Spacer />
                    <Container 
                        style={pcategory === 'best' ? {background : ContainerSelected.background , borderRadius : ContainerSelected.borderRadius} : {}} 
                        onClick={()=>clickPcategory('best')}>
                        <P>추천상품</P>
                    </Container>

                    <Container 
                        style={pcategory === 'dog' ? {background : ContainerSelected.background , borderRadius : ContainerSelected.borderRadius} : {}} 
                        onClick={()=>clickPcategory('dog')}>
                        <P>강아지</P>
                    </Container>

                    <Container 
                        style={pcategory === 'cat' ? {background : ContainerSelected.background , borderRadius : ContainerSelected.borderRadius} : {}} 
                        onClick={()=>clickPcategory('cat')}>
                        <P>고양이</P>
                    </Container>
                    
                    <Container 
                        style={pcategory === '고라니' ? {background : ContainerSelected.background , borderRadius : ContainerSelected.borderRadius} : {}} 
                        onClick={()=>clickPcategory('고라니')}>
                        <P>고라니</P>
                    </Container>
                </NavContents>
                
                /*수정한 부분*/
                {pcategory ? <NavDetail pcategory={pcategory} /> : <> </>}
            </WhiteBackground>
        </Positioner>

    )
}

const Positioner = styled.div`
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 100px;
    left : calc(50vw - 600px);
    width: 1200px;
    height: 0px;
    z-index:99;

`;

// 회색 배경
const WhiteBackground = styled.div`
    width: 100%;
    height: 50px;
    
    flex-direction: row;
    align-items: center;
    background: #ffffff;

`
// Nav 콘텐츠
const NavContents = styled.div`
    width: 1200px;
    height: 30px;
    display : inline-grid;
    flex-direction: row;
    align-items: right;

    grid-template-columns: 220px 150px 150px 150px 150px;

`

const Container = styled.button`
    background: #ffffff;
    border: 0px;
    font-size : 1rem;

    text-align: center;


    &:hover{
        background-color: #e8dc8a;
        border-radius : 24px;
    }

`

const P = styled.p`
font-family : 'tway';

`

const Spacer = styled.div`

`

 

디자인 변경

 

전체적인 배경색을 수정했습니다.

background : #e2e2e2;

 

Global.js

import { createGlobalStyle } from 'styled-components';
import tway from '../font/tway.ttf'

const GlobalStyle = createGlobalStyle`
    @font-face {
        font-family: 'tway';
        src: url(${tway}) format('truetype');
    }
    
    body{
        background-color: #e2e2e2;
    }
    
`

export default GlobalStyle

 

Nav.js에 버튼들을 시각적으로 가시성을 확보할 수 있게 수정했습니다.

 

Nav.js

import React , {useState} from "react";
import styled ,{css} from "styled-components";

/*nav바 밑에 요소 불러오기 */
import NavDetail from "./NavDetail";


export default function Nav(){

    const [pcategory , setPcategory] = useState(null)

    const clickPcategory = (pcategory) => {
        setPcategory(pcategory)
    }
    
    const ContainerSelected = {
        background : '#ffffff',
        border : '0px',
        borderRadius : '24px',
        boxShadow: '-10px -10px 15px rgba(255,255,255,0.5), 10px 10px 15px rgba(70,70,70,0.12)'
    }
    
    

    return(
        <Positioner>
            <WhiteBackground>
                <NavContents>
                    <Spacer />
                    <Container 
                        style={pcategory === 'best' ? 
                        {background : ContainerSelected.background , borderRadius : ContainerSelected.borderRadius , boxShadow : ContainerSelected.boxShadow , border : ContainerSelected.border} : {}} 
                        onClick={()=>clickPcategory('best')}>
                        <P>추천상품</P>
                    </Container>

                    <Container 
                        style={pcategory === 'dog' ? 
                        {background : ContainerSelected.background , borderRadius : ContainerSelected.borderRadius , boxShadow : ContainerSelected.boxShadow , border : ContainerSelected.border} : {}} 
                        onClick={()=>clickPcategory('dog')}>
                        <P>강아지</P>
                    </Container>

                    <Container 
                        style={pcategory === 'cat' ? 
                        {background : ContainerSelected.background , borderRadius : ContainerSelected.borderRadius , boxShadow : ContainerSelected.boxShadow , border : ContainerSelected.border} : {}} 
                        onClick={()=>clickPcategory('cat')}>
                        <P>고양이</P>
                    </Container>
                    
                    <Container 
                        style={pcategory === '고라니' ?
                        {background : ContainerSelected.background , borderRadius : ContainerSelected.borderRadius , boxShadow : ContainerSelected.boxShadow , border : ContainerSelected.border} : {}} 
                        onClick={()=>clickPcategory('고라니')}>
                        <P>고라니</P>
                    </Container>
                </NavContents>
                
                {pcategory ? <NavDetail pcategory={pcategory} /> : <> </>}
            </WhiteBackground>
        </Positioner>

    )
}

const Positioner = styled.div`
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 100px;
    left : calc(50vw - 600px);
    width: 1200px;
    height: 0px;
    z-index:99;

`;


const WhiteBackground = styled.div`
    width: 100%;
    height: 50px;
    
    flex-direction: row;
    align-items: center;
    

`
// Nav 콘텐츠
const NavContents = styled.div`
    width: 1200px;
    height: 30px;
    display : inline-grid;
    flex-direction: row;
    align-items: right;

    grid-template-columns: 220px 150px 150px 150px 150px;

`

const Container = styled.button`

    width : 120px;

    background-color: #e2e2e2;

    border: 0px;
    font-size : 1rem;   
    text-align: center;



    &:hover{
        background-color: #f1e87c;
        border-radius : 24px;
    }

`

const P = styled.p`
font-family : 'tway';

`

const Spacer = styled.div`

`

 

NavDetail.js

Nav에서 버튼들을 클릭하면 각 상세 카테고리가 나오는 컴포넌트입니다.

pcategory가 존재할때 해당 컴포넌트가 노출 됩니다.

import React from "react";
import styled from "styled-components";

/*json파일 불로어기*/
import pcategoryList from "../../JSON/pcategory.json"

function ButtonList({item,pcategory}){
    
    /*item은 json데이터 */
    /*pcategory는 props데이터*/

    return(
        <>

        {pcategory === item.type
        ?
        <>
        <Button>
            {item.name}
        </Button>
        </>
        :
        <>
        </>
        }
        
        </>
    )
}


export default function NavDetail(props){

    /* props Nav -> NavDetail -> ButtonList */
    const pcategory = props.pcategory

    return(
        <Positioner>
            <WhiteBackground>
                <NavDetailContents>
                    <Spacer />
                    {pcategoryList.pcategory.map((item)=>
                    <ButtonList item={item} id={item.id} pcategory={pcategory} />)}
                </NavDetailContents>
            </WhiteBackground>
        </Positioner>
    )
}


const Positioner = styled.div`
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 150px;
    left : calc(50vw - 600px);
    width: 1200px;
    height: 0px;
    z-index:99;

`;

// 회색 배경
const WhiteBackground = styled.div`
    width: 100%;
    height: 50px;
    
    flex-direction: row;
    align-items: center;    

`
// NavDetail 콘텐츠
const NavDetailContents = styled.div`
    width: 1200px;
    height: 30px;
    display : inline-grid;
    flex-direction: row;
    align-items: right;

    grid-template-columns: 220px repeat(10,100px);


`

const Button = styled.button`
width: 90px;
height: 40px;

border-radius: 20px;
box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.1);

border: 0px;
background-color: #FFFFFF;

font-family : 'tway';

`

const Spacer = styled.div`
width: 300px;
`

 

pcategory.json

{
    "pcategory" :[
        {
            "id" : 0,
            "type" : "dog",
            "category" : "dog-food",
            "name" : "사료"
        },
        {
            "id" : 1,
            "type" : "dog",
            "category" : "dog-snack",
            "name" : "간식"
        },
        {
            "id" : 2,
            "type" : "dog",
            "category" : "dog-tool",
            "name" : "애견용품"
        },
        {
            "id" : 3,
            "type" : "cat",
            "category" : "cat-food",
            "name" : "사료"
        },
        {
            "id" : 4,
            "type" : "cat",
            "category" : "cat-snack",
            "name" : "간식"

        },
        {
            "id" : 5,
            "type" : "cat",
            "category" : "cat-tool",
            "name" : "애묘용품"
        },
        {
            "id" : 6,
            "type" : "고라니",
            "category" : "고라니-food",
            "name" : "사료"
        },
        {
            "id" : 7,
            "type" : "고라니",
            "category" : "고라니-snack",
            "name" : "간식"
        },
        {
            "id" : 8,
            "type" : "고라니",
            "category" : "고라니-tool",
            "name" : "고라니"
        }

    ]
}

위에 json파일을 이용해 제작했습니다.

props를 받아 해당하는 값이 일치하는 카테고리만 나오도록 구성했습니다.

 

마무리

다음에는 NavDetail 값에 따라 상품이 렌더링이 되는 컴포넌트를 제작하겠습니다.

 

https://github.com/yundevingV/furry

GitHub - yundevingV/furry

소스코드는 여기 참고해주시면 되겠습니다