Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feat: Home화면 구현 #6

Merged
merged 1 commit into from
Nov 13, 2023
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 38 additions & 0 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
@@ -15,6 +15,7 @@
"react-redux": "^8.1.3",
"react-router-dom": "^6.16.0",
"react-scripts": "5.0.1",
"recoil": "^0.7.7",
"redux": "^4.2.1",
"redux-promise": "^0.6.0",
"redux-thunk": "^2.4.2",
3 changes: 1 addition & 2 deletions src/App.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import { Route, Routes } from "react-router-dom";
import Footer from "../src/components/views/Footer/Footer";
import Header from "../src/components/views/Header/Header";
import Inventory from "../src/pages/Inventory/Inventory";
import Mypage from "../src/pages/Mypage/Mypage";
@@ -18,7 +17,7 @@ function App() {
<Route path="/Mypage" element={<Mypage />} />
</Routes>

<Footer />
{/* <Footer /> */}
</div>
);
}
8 changes: 8 additions & 0 deletions src/Atom/status.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import { atom } from "recoil";

const storeStatus = atom({
key: "storeStatus", // 전역적으로 고유한 값
default: false, // 초깃값
});

export default storeStatus;
Binary file removed src/assets/Designer.png
Binary file not shown.
2 changes: 1 addition & 1 deletion src/components/views/Header/Header.css
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
.header {
width: 73.75rem;
width: 100%;
height: 5.5rem;
background-color: #2e2d2d;
}
8 changes: 7 additions & 1 deletion src/components/views/Header/Header.jsx
Original file line number Diff line number Diff line change
@@ -1,11 +1,17 @@
import React from "react";
import { Col, Row } from "react-bootstrap";
import LOGO from "../../../assets/icons/Header/LOGO.svg"; //로고
import "./Header.css";

const Header = () => {
return (
<div className="header">
<img src={LOGO} className="LOGO" alt="LOGO" />
<Row>
<Col>
<img src={LOGO} className="LOGO" alt="LOGO" />
</Col>
<Col></Col>
</Row>
</div>
);
};
3 changes: 0 additions & 3 deletions src/components/views/NavBar/NavBar.css
Original file line number Diff line number Diff line change
@@ -16,9 +16,6 @@
flex-direction: column;
}

.navbarStore {
}

.icon-group {
display: flex;
flex-direction: column;
11 changes: 8 additions & 3 deletions src/components/views/NavBar/NavBar.jsx
Original file line number Diff line number Diff line change
@@ -12,6 +12,11 @@ const NavBar = () => {
const currentPath = window.location.pathname; // 현재 경로 가져오기

const [Store, setStore] = useState(1); // 영업여부
const onClickHandler = (e) => {
setStore((prevStore) => {
setStore(!prevStore);
});
};

return (
<div className="navbar">
@@ -73,12 +78,12 @@ const NavBar = () => {
</Nav.Link>
</div>

<Nav.Link className="navbarStore">
<Nav.Link>
{Store ? (
<div className="icon-group">
<img
className="icon"
onClick={setStore(0)}
onClick={onClickHandler}
src={StoreOn}
alt="Open"
/>
@@ -88,7 +93,7 @@ const NavBar = () => {
<div className="icon-off">
<img
className="icon"
onClick={setStore(1)}
onClick={onClickHandler}
src={StoreOn}
alt="Close"
/>
7 changes: 7 additions & 0 deletions src/pages/Home/Complete.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import React from "react";

const Complete = () => {
return <div>Complete</div>;
};

export default Complete;
14 changes: 12 additions & 2 deletions src/pages/Home/Home.jsx
Original file line number Diff line number Diff line change
@@ -2,17 +2,27 @@ import React from "react";
import { Col, Row } from "react-bootstrap";
import NavBar from "../../components/views/NavBar/NavBar";
import MainHome from "./MainHome";
import Receipt from "./Receipt";

const Home = () => {
return (
<div>
<Row>
<Col xs={1}>
<Col
xs={1}
style={{ width: "8.875rem", height: "46.25rem", padding: "0" }}
>
<NavBar />
</Col>
<Col>
<Col style={{ padding: "0" }}>
<MainHome />
</Col>
<Col
xs={1}
style={{ width: "23.75rem", height: "44.875rem", padding: "0" }}
>
<Receipt />
</Col>
</Row>
</div>
);
10 changes: 10 additions & 0 deletions src/pages/Home/MainHome.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
.Box {
width: 100%; /* 너비 설정 */
height: 95%; /* 높이 설정 */
padding-top: 5%;
}

.status-header {
padding-left: 1%;
border-bottom: 8px solid #d82356;
}
73 changes: 59 additions & 14 deletions src/pages/Home/MainHome.jsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,9 @@
import React, { useState } from "react";
import { Button, Col, Container, Row } from "react-bootstrap";
import Complete from "./Complete";
import "./MainHome.css";
import Progress from "./Progress";
import Wait from "./Wait";

const MainHome = () => {
const [status, setStatus] = useState({
@@ -9,12 +13,9 @@ const MainHome = () => {
});

const onClickHandler = (e) => {
console.log(status);
const { name } = e.target;

// 현재 선택된 상태
const currentStatus = status[name];

if (!currentStatus) {
setStatus((prevStatus) => {
const updatedStatus = { ...prevStatus };
@@ -26,34 +27,78 @@ const MainHome = () => {
updatedStatus[key] = false;
}
}

return updatedStatus;
});
}
};

return (
<Container>
<Row>
<Container className="Box">
<Row className="status-header">
<Col>
<Button name="Wait" onClick={onClickHandler}>
대기중
<Button
name="Wait"
onClick={onClickHandler}
style={{
width: "100%",
borderRadius: "0.875rem",
backgroundColor: status.Wait ? "#d82356" : "#FFFFFF",
fontFamily: status.Wait ? "ExtraBold" : "SemiBold",
fontSize: "1.5625rem",
color: status.Wait ? "#FFFFFF" : "#838383",
border: "none",
}}
>
대기 4
</Button>
</Col>
<Col>
<Button name="Progress" onClick={onClickHandler}>
진행중
<Button
name="Progress"
onClick={onClickHandler}
style={{
width: "100%",
borderRadius: "0.875rem",
backgroundColor: status.Progress ? "#d82356" : "#FFFFFF",
fontFamily: status.Wait ? "ExtraBold" : "SemiBold",
fontSize: "1.5625rem",
color: status.Progress ? "#FFFFFF" : "#838383",
border: "none",
}}
>
제조중 2
</Button>
</Col>
<Col>
<Button name="Complete" onClick={onClickHandler}>
완료
<Button
name="Complete"
onClick={onClickHandler}
style={{
width: "100%",
borderRadius: "0.875rem",
backgroundColor: status.Complete ? "#d82356" : "#FFFFFF",
fontFamily: status.Wait ? "ExtraBold" : "SemiBold",
fontSize: "1.5625rem",
color: status.Complete ? "#FFFFFF" : "#838383",
border: "none",
}}
>
제조•픽업완료 3
</Button>
</Col>
</Row>
<Row>
<Col>1 of 1</Col>
<Col>2 of 2</Col>
<Col>
{status.Wait ? (
<Wait />
) : status.Progress ? (
<Progress />
) : status.Complete ? (
<Complete />
) : (
<div>ERROR</div>
)}
</Col>
</Row>
</Container>
);
7 changes: 7 additions & 0 deletions src/pages/Home/Progress.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import React from "react";

const Progress = () => {
return <div>Progress</div>;
};

export default Progress;
28 changes: 28 additions & 0 deletions src/pages/Home/Receipt.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
.rounded-rectangle {
width: 100%; /* 너비 설정 */
height: 97%; /* 높이 설정 */
background-color: #f5f5f5; /* 배경색 설정 */
border-radius: 20px; /* 모서리를 둥글게 만드는 값 */
text-align: center; /* 가운데 정렬 */
color: #000; /* 텍스트 색상 설정 */
font-size: 18px; /* 폰트 크기 설정 */
line-height: 100px; /* 수직 가운데 정렬을 위한 높이 설정 */
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
}

.Box {
width: 100%; /* 너비 설정 */
height: 100%; /* 높이 설정 */
padding-top: 5%;
padding-left: 0;
}

.top-font {
color: #000;
font-family: Pretendard;
font-size: 1.25rem;
font-style: normal;
font-weight: 700;
line-height: 130%; /* 1.625rem */
letter-spacing: -0.0125rem;
}
15 changes: 15 additions & 0 deletions src/pages/Home/Receipt.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import React from "react";
import { Container } from "react-bootstrap";
import "./Receipt.css";

const Receipt = () => {
return (
<Container className="Box">
<div className="rounded-rectangle">
<div className="top-font">주문번호 531</div>
</div>
</Container>
);
};

export default Receipt;
7 changes: 7 additions & 0 deletions src/pages/Home/Wait.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import React from "react";

const Wait = () => {
return <div>Wait</div>;
};

export default Wait;
2 changes: 1 addition & 1 deletion src/style/theme/theme.jsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
const theme = {
colors: {
MainColor: "#D82356",
HoverColor: "#3CB371",
SubColor: "#3CB371",
accent: "#e0234e",
},
fontSize: {