새로운 프로젝트 🟠
짧은 '유사 번아웃'의 시기를 보내고 새로운 프로젝트에 착수했다.
'정육각'이라는 정육(精肉) 이커머스 사이트를 클론 코딩할 예정인데, 그간 스스로 학습한 내용을 적용하기에 적당하다고 판단했다. 이전에, 세상 웬만한 서비스들의 프로토타입은 게시판이라고 언급한 바 있다. 육류 판매 게시판일 뿐이라는 점을 인지하고 쫄지말자.
reference: https://www.jeongyookgak.com/index
현재까지는 기본적인 layout과 라우터에 관한 설정을 했다. 본 글에서는 전체적인 파일 구조를 어떻게 잡았는지 정리해놓는 것을 목표로 하겠다.
src/App.js 🟡
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 🟡
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 🟡
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 🟡
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 🟡
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 🟡
import React from "react";
const Shopping = () => {
return (
<div style={{ backgroundColor: "red", height: "1000px" }}>
쇼핑하기 페이지
</div>
);
};
export default Shopping;
나머지 페이지는 생략
현재 모습 🟢
회고 🔵
고민과 문제를 혼동하지 마라. 고민은 마음속으로 괴로워하고 애를 태운다는 뜻이고, 문제는 해답 혹은 해결이 요구되는 상황을 의미한다. 고민이 어떤 문제에서 비롯된 것이라면 고민은 중지하고 문제를 해결하려는 쪽으로 방향을 바꾸어야 한다.
-세이노의 가르침 中