[React/Node] 마켓컬리 클론코딩 2 - 메인페이지1

• 메인페이지 - 상단 헤더 부분 (로고, 검색창, 메뉴 등)

 

 

• 구조

 

<App.js>

import './App.css';
import { BrowserRouter, Route, Routes } from "react-router-dom";

import Home from "./pages/Home";

const App = () => {
    return(
        <BrowserRouter>
            <Routes>
                <Route path="/" element={<Home/>}/>
            </Routes>
        </BrowserRouter>
    );
}

export default App;

 

<pages/Home.jsx>

import React from "react";
import Footer from "../components/Footer";
import Header from "../components/Header";
import Main from "../components/Main";
import SectionTitle from "../components/SectionTitle";

const Home = () => {
    return(
        <>
            <Header/>
            <Main>
                <SectionTitle/>
            </Main>
            <Footer/>
        </>
    );
};

export default Home;

 

<components/Main.jsx>

import React from "react";

const Main = ({ children }) => {
    return (
    <main id="main" role="main">
        {children}
    </main>
    );
};

export default Main;

 

<components/Header.jsx>

import React from "react";
import img from "../images/imgidx.js";
import "../css/headerCss.css";

const Header = () => {
    return(
        <header id="header">
            <div className="header_top">
                <div className="user">
                    <div className="user_join">
                        <a href="/user/join">회원가입</a>
                    </div>
                    <div className="user_login">
                        <a href="/user/login">로그인</a>
                    </div>
                    <div className="costomer_service">
                        <a href="/user/service">고객센터</a>
                    </div>
                </div>
            </div>
            <div className="header_middle">
                <div className="logo">
                    <a href="/"><img src={img.kurly}/></a>
                </div>
                <div className="search">
                    <input type="text" placeholder="검색어를 입력해주세요" />
                    <img src={img.search}/>
                </div>
                <div className="myitem_info">
                    <div className="delivery_address">
                        <a href="/mypage/mysetting/address"><img src={img.location}/></a>
                    </div>
                    <div className="dibs">
                        <a href="/mypage/myitem/dips"><img src={img.dips}/></a>
                    </div>
                    <div className="shopping_cart">
                        <a href="/mypage/myitem/cart"><img src={img.cart}/></a>
                    </div>
                </div>
            </div>
            <div className="header_bottom">
                <div className="main_menu">
                    <ul>
                        <li className="menu"><a href="/menu/category"><img src={img.category}/>카테고리</a>
                            <ul className="category"> {/*나중에 템플릿화하기+db활용*/}
                                <li><a href="/menu/category/vegetable"><img src={img.vege} width="25" height="25"/>  채소</a></li>
                                <li><a href="/menu/category/fruit"><img src={img.fruit} width="25" height="25"/>  과일</a></li>
                                <li><a href="/menu/category/fisheries"><img src={img.fish} width="25" height="25"/>  수산</a></li>
                                <li><a href="/menu/category/drink"><img src={img.drink} width="25" height="25"/>  음료</a></li>
                                <li><a href="/menu/category/meal_kit"><img src={img.meal} width="25" height="25"/>  밀키트</a></li>
                            </ul>
                        </li>
                        <li className="menu"><a href="/menu/new_item">신상품</a></li>
                        <li className="menu"><a href="/menu/best_item">베스트</a></li>
                        <li className="menu"><a href="/menu/frugal_shop">알뜰쇼핑</a></li>
                        <li className="menu"><a href="/menu/sale">특가/혜택</a></li>
                    </ul>
                </div>
            </div>
        </header>
    );
};

export default Header;

 

• 진행 상황

일단 하드코딩 느낌으로 웹 상단이 완성되었다. 아직은 웹 사이즈 등의 변화에 대응하지 못하는 정적인 사이트이기에 이 부분의 수정이 필요하고, 앞으로 이미지 파일의 사용이 많아질 것으로 보이기 때문에 지금같은 방식말고 이미지를 컴포넌트화(?) 시킬 방법을 찾아야할 것 같다.

 

 

https://memo-code.tistory.com/36

마켓컬리 클론코딩 3 - 메인페이지2