[React] 카드앱 코딩

 

01  준비과정

App.js

index.js

index.css

 

 

 

02  설치

npm install styled-components react-router-dom

각 폴더에 파일 생성하기

 

 

 

03  App.js <BrowserRouter> 추가

App.js

 

 

 

04  Card.js  /  Collection.js  //  Detail.js   //  styledComp.js 기본코딩

 

Card.js

Collection.js

Detail.js

 

src

 

src/components

• src/components/styledComp.js

import styled from 'styled-components'

export const Menu = styled.div`
  position: sticky; top: 0;
  width: 100%; height: 100px;
  font-size: 18px;
  color: #FFFFFF;
  display: flex; 
  justify-content: center;
  align-items: center;  
`

export const Items = styled.div`
  display: flex;
  flex-wrap: wrap;
  width: 60%; margin: 0 auto;

  @media all and (max-width: 1500px){
    width: 80%;
  }
  @media all and (max-width: 1000px){
    width: 100%;
  }
`

export const Item = styled.div`
  cursor: pointer;
  width: 21%; height: 400px;
  margin: 2%;
  border-radius: 20px;
  color: #FFFFFF;
  background-color: #393939;
  overflow: hidden;
  &:hover{
    transform: translate(0, -20px);
  }
  @media all and (max-width: 800px){
    width: 46%;
  }
  @media all and (max-width: 500px){
    width: 98%;
  }
`
export const Image = styled.div`
  height: 250px; 
  background-image: url(${props => props.imagePath});
  background-repeat: no-repeat;
  @media all and (max-width: 500px){
    background-size: 100% 100%;
  }
`
export const Temp = styled.div`
  height: 250px; 
  background-color: ${props => props.color};
  background-repeat: no-repeat;
  background-size: cover;
  @media all and (max-width: 500px){
    background-size: 100% 100%;
  }
`

 

 

 

05  contents.js

/*
path: 라우팅 될 경로
imagePath: 카드에 표시될 이미지(또는 색상)
title: 카드 이름(제목)
character: 특징(설명문)
detail: 상세 페이지 들어가면 보여줄 내용 (커스텀요구)
*/
export const contents = [{
    path: "/red",
    imagePath: "red",
    title: "RED",
    character: "사과",
    detail: {}
},{
    path: "/yellow",
    imagePath: "yellow",
    title: "YELLOW",
    character: "바나나",
    detail: {}
},{
    path: "/blue",
    imagePath: "blue",
    title: "BLUE",
    character: "블루베리",
    detail: {}
}]

 

 

 

06  App.js   //  Collection.js

 

src

 

src/components

• src/components/App.js

import React from 'react'
import { BrowserRouter } from 'react-router-dom'
import Collection from './Collection'

const App = () => {
  return <BrowserRouter>
    <Collection />
  </BrowserRouter>
}

export default App

 

 

src

 

src/components

• src/components/Collection.js

import React from 'react'
import { Route, Switch } from 'react-router-dom'
import { Items, Menu } from './styledComp'
import Card from './Card'
import Detail from './Detail'
import { contents } from '../utilities/contents'

const Collection = () => {
    return <div>
        <Menu>
            <h2>색깔 카드 콜렉션</h2>
        </Menu>
        <Switch>
            {contents.map((content, idx) => {
            return <Route path={content.path} key={idx}>
            <Detail content={content.detail} />
            </Route>
            })}
            <Route path="/">
                <Items>
                    {contents.map((content, idx) => {
                        return <Card content={content} key={idx} />
                    })}
                </Items>
            </Route> 
        </Switch>
        </div>
}

export default Collection

 

 

 

07  Card.js

 

src

 

src/components

• src/components/Card.js

import React from 'react'
import { Link } from 'react-router-dom'
import { Item, Imgae, Temp } from './styledComp'

const Card = props => {
    const { content } = props
    return <Item>
        <Link to={content.path}>
            {/* <Imgae imagePath={content.imagePath}></Imgae> */}
            <Temp color={content.imagePath}></Temp>
        </Link>
        <h1 style={{textAlign:'center'}}>{content.title}</h1>
        <p style={{padding: 10}}>{content.character}</p>
    </Item>
}

export default Card

 

 

 

08  Detail 수정