React

[TIL/React] 2023/08/01

asdsasda

2023년 8월 1일4min read

새로운 프로젝트 🟠

짧은 '유사 번아웃'의 시기를 보내고 새로운 프로젝트에 착수했다.

'정육각'이라는 정육(精肉) 이커머스 사이트를 클론 코딩할 예정인데, 그간 스스로 학습한 내용을 적용하기에 적당하다고 판단했다. 이전에, 세상 웬만한 서비스들의 프로토타입은 게시판이라고 언급한 바 있다. 육류 판매 게시판일 뿐이라는 점을 인지하고 쫄지말자.

reference: https://www.jeongyookgak.com/index

현재까지는 기본적인 layout과 라우터에 관한 설정을 했다. 본 글에서는 전체적인 파일 구조를 어떻게 잡았는지 정리해놓는 것을 목표로 하겠다.

src/App.js 🟡

code

import React from "react";
import PageContainer from "./layout/common/PageContainer";
import { Routes, Route } from "react-router-dom";
import Home from "./pages/Home";
import Shopping from "./pages/Shopping";
import DeliveryInformation from "./pages/DeliveryInformation";
import Event from "./pages/Event";
import LogInPage from "./pages/LogInPage";
import SignUp from "./pages/SignUpPage";

function App() {
  return (
    <PageContainer>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/shop" element={<Shopping />} />
        <Route path="/delivery" element={<DeliveryInformation />} />
        <Route path="/event" element={<Event />} />
        <Route path="/login" element={<LogInPage />} />
        <Route path="/signup" element={<SignUp />} />
      </Routes>
    </PageContainer>
  );
}

export default App;

src/layout/common/PageContainer.js 🟡

code

import React from "react";
import { styled } from "styled-components";
import Header from "../header/Header";
import Footer from "../footer/Footer";

const Content = styled.div`
  min-height: 100vh;
  min-width: 100vw;
  flex-grow: 1;
`;

const PageContainer = ({ children }) => {
  return (
    <>
      <Header />
      <Content>{children}</Content>
      <Footer />
    </>
  );
};

export default PageContainer;

src/layout/header/Header.js 🟡

code

import React from "react";
import { styled } from "styled-components";
import { useNavigate } from "react-router-dom";
import { logo } from "../../images";
import MenuIcon from "@mui/icons-material/Menu";
import IconButton from "@mui/material/IconButton";
import CommonWrapper from "../../CommonWrapper";

const HeaderStyle = styled.div`
  background-color: black;
  width: 100%;
  height: 100px;
  position: sticky;
  top: 0;
  z-index: 999;
`;

const HeaderContentWrapper = styled.div`
  max-width: 1200px;
  display: flex;
  margin: 0 auto;
  height: 100%;
  padding: 0px 12px;
  /* @media (max-width: 900px) {
    display: none;
  } */
`;

const LogoContainer = styled.div`
  width: auto;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
`;

const Logo = styled.img`
  width: auto;
  height: 80px;
`;

const NavButtonContainer = styled.div`
  display: flex;
  align-items: center;
  column-gap: 40px;
  @media (max-width: 900px) {
    display: none;
  }
`;

const AuthenticationButtonContainer = styled.div`
  display: flex;
  align-items: center;
  column-gap: 40px;
  flex-grow: 1;
  justify-content: flex-end;
`;

const NavButton = styled.div`
  font-weight: bolder;
  color: white;
  cursor: pointer;
`;

const IconButtonWrapper = styled.div`
  @media (min-width: 900px) {
    display: none;
  }
`;

const AuthenticationButtonWrapper = styled.div`
  display: flex;
  column-gap: 40px;
  @media (max-width: 900px) {
    display: none;
  }
`;

const Header = () => {
  const navigate = useNavigate();
  const goToHome = () => {
    navigate("/");
  };
  const goToShop = () => {
    navigate("/shop");
  };
  const goToDelivery = () => {
    navigate("/delivery");
  };
  const goToEvent = () => {
    navigate("/event");
  };
  const goToLogIn = () => {
    navigate("/login");
  };
  const goToSignUp = () => {
    navigate("/signup");
  };

  return (
    // header style
    <HeaderStyle>
      {/* header content wrapper */}
      <HeaderContentWrapper>
        {/* logo */}
        <LogoContainer>
          <Logo src={logo} onClick={goToHome} />
        </LogoContainer>
        {/* button */}

        {/* 1 */}
        <NavButtonContainer>
          <NavButton onClick={goToShop}>쇼핑하기</NavButton>
          <NavButton onClick={goToDelivery}>배송안내</NavButton>
          <NavButton onClick={goToEvent}>이벤트</NavButton>
        </NavButtonContainer>
        {/* 1 */}
        <AuthenticationButtonContainer>
          <CommonWrapper>
            <NavButton onClick={goToLogIn}>로그인</NavButton>
            <NavButton onClick={goToSignUp}>회원가입</NavButton>
          </CommonWrapper>
          <CommonWrapper isMobile={true}>
            <IconButton>
              <MenuIcon style={{ color: "white" }} fontSize={"large"} />
            </IconButton>
          </CommonWrapper>
        </AuthenticationButtonContainer>
      </HeaderContentWrapper>
    </HeaderStyle>
  );
};

export default Header;

src/layout/footer/Footer.js 🟡

code

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

const FooterStyle = styled.div`
  background-color: #f2f2f2;
  display: flex;
  height: 20vh;
  width: 100%;
  justify-content: space-around;
  margin: 0 auto;
  @media screen and (max-width: 900px) {
    flex-direction: column;
    align-items: flex-start;
    padding: 16px;
  }
`;

const FooterTextContainer = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
`;

const ScrollButtonContainer = styled.div`
  display: flex;
  align-items: center;
  column-gap: 40px;
`;

const ScrollButton = styled.p`
  font-weight: bolder;
`;

const Footer = ({ scrollClick }) => {
  return (
    <FooterStyle>
      {/* Text */}
      <FooterTextContainer>
        <p>JeongYookGak Clone</p>
        <p>Copyright © 2023 All rights reserved</p>
        <p>Powered By SITE123 - Create your own website</p>
      </FooterTextContainer>
      {/* Button */}
      <ScrollButtonContainer>
        <ScrollButton>
          Embark on a journey with us. Await the best service and encounters.
        </ScrollButton>
        {/* <ScrollButton onClick={() => scrollClick(1)}>AddTask</ScrollButton>
        <ScrollButton onClick={() => scrollClick(2)}>RecentTodo</ScrollButton>
        <ScrollButton onClick={() => scrollClick(3)}>MyTodo</ScrollButton> */}
      </ScrollButtonContainer>
    </FooterStyle>
  );
};

export default Footer;

푸터는 투두리스트에서 사용하던 양식을 가져와서 이상한 요소가 많다. 나중에 정리할 예정이다.

src/pages/Home.js 🟡

code

import React from "react";

const Home = () => {
  return (
    <>
      <div style={{ backgroundColor: "white", height: "1000px" }}></div>
      <div style={{ backgroundColor: "gray", height: "1000px" }}></div>
      <div style={{ backgroundColor: "white", height: "1000px" }}></div>
      <div style={{ backgroundColor: "gray", height: "1000px" }}></div>
    </>
  );
};

export default Home;

src/pages/Shopping.js 🟡

code

import React from "react";

const Shopping = () => {
  return (
    <div style={{ backgroundColor: "red", height: "1000px" }}>
      쇼핑하기 페이지
    </div>
  );
};

export default Shopping;

나머지 페이지는 생략

현재 모습 🟢

회고 🔵

고민과 문제를 혼동하지 마라. 고민은 마음속으로 괴로워하고 애를 태운다는 뜻이고, 문제는 해답 혹은 해결이 요구되는 상황을 의미한다. 고민이 어떤 문제에서 비롯된 것이라면 고민은 중지하고 문제를 해결하려는 쪽으로 방향을 바꾸어야 한다.

-세이노의 가르침 中