Skip to content

Commit fd3a749

Browse files
ehdrms2034ehdrms2034
committed
상품 관리 (등록/수정) axios 연동
1 parent c6584a8 commit fd3a749

8 files changed

Lines changed: 235 additions & 54 deletions

File tree

‎laundry_owner/frontend/src/src/components/Common/Background.scss‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,3 +7,8 @@
77
overflow: auto;
88
}
99

10+
.defaultSpaceBetween{
11+
display: flex;
12+
flex-direction : row;
13+
justify-content: space-between;
14+
}

‎laundry_owner/frontend/src/src/components/Common/CustomButton.js‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,11 @@ const CustomButton = ({type, onClick, className, value}) => {
1313
_type = 'button';
1414

1515
return (
16-
<input type={_type} onClick={onClick} value={value} className={cx('customButtonDefault', className)}/>
16+
<input type={_type}
17+
onClick={onClick}
18+
value={value}
19+
className={cx('customButtonDefault', className)}
20+
/>
1721
)
1822
};
1923

‎laundry_owner/frontend/src/src/components/ProductRegistrationView/RegisterItemForm.js‎

Lines changed: 29 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -8,16 +8,27 @@ import CustomButton from "../Common/CustomButton";
88

99
const cx = className.bind(style);
1010

11-
const RegisterItemForm = ({}) => {
11+
const RegisterItemForm = ({
12+
price, material, name, information, mode,
13+
setPrice, setMaterial, setName, setInformation,
14+
registerItem, openRegistrationForm
15+
}) => {
16+
17+
1218
return (
13-
<form className={cx('registerItemForm-form')}>
19+
<form
20+
className={cx('registerItemForm-form')}
21+
action={"#"}
22+
onSubmit={() => registerItem(mode, name, material, price, information)}
23+
>
1424
<div className={cx('registerItemForm-leftPage')}>
1525
<div className={cx('registerItemForm-registerRow')}>
1626
<Typography variant={"h6"}> 제품 이름 </Typography>
1727
<Select
1828
style={{width: "50%"}}
19-
value={'와이셔츠'}
29+
value={name}
2030
defaultValue={'와이셔츠'}
31+
onChange={(e) => setName(e.target.value)}
2132
>
2233
<MenuItem value={'와이셔츠'}> 와이셔츠</MenuItem>
2334
<MenuItem value={'청바지'}> 청바지</MenuItem>
@@ -27,23 +38,34 @@ const RegisterItemForm = ({}) => {
2738
<Typography variant={"h6"}> 제품 소재 </Typography>
2839
<Select
2940
style={{width: "50%"}}
30-
value={'와이셔츠'}
41+
value={material}
3142
defaultValue={'와이셔츠'}
43+
onChange={(e) => setMaterial(e.target.value)}
3244
>
3345
<MenuItem value={'와이셔츠'}> 와이셔츠</MenuItem>
3446
<MenuItem value={'청바지'}> 청바지</MenuItem>
3547
</Select>
3648
</div>
3749
<div className={cx('registerItemForm-registerRow')}>
3850
<Typography variant={"h6"}> 제품 가격 </Typography>
39-
<CustomInput className={cx('registerItemForm-priceInput')}/>
51+
<CustomInput
52+
className={cx('registerItemForm-priceInput')}
53+
value={price}
54+
onChangeEvent={setPrice}
55+
required={true}
56+
/>
4057
</div>
4158
</div>
4259
<div className={cx('registerItemForm-rightPage')}>
4360
<Typography variant={"h6"}> 제품 특이사항 </Typography>
44-
<textarea className={cx('registerItemForm-etcText')}/>
61+
<textarea
62+
className={cx('registerItemForm-etcText')}
63+
value={information}
64+
onChange={(e) => setInformation(e.target.value)}
65+
required={true}
66+
/>
4567
<CustomButton
46-
type={'submmit'}
68+
type={'submit'}
4769
value={'제출하기'}
4870
className={cx('registerItemForm-submitBtn')}
4971
/>

‎laundry_owner/frontend/src/src/components/ProductRegistrationView/RegisteredItemList.js‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import React from "react";
2+
import HorizontalScrollView from "./HorizontalScrollView";
3+
import RegisteredItemView from "./RegisteredItemView";
4+
import DefaultMainBody from "../Common/DefaultMainBody";
5+
6+
const RegisteredItemList = ({items,openRegistrationForm}) => {
7+
8+
let index = 0;
9+
10+
return(
11+
<HorizontalScrollView>
12+
{
13+
items.map(item => (
14+
<RegisteredItemView
15+
key={index++}
16+
name={item.category}
17+
material={item.material}
18+
price={item.price}
19+
openRegistrationForm = {openRegistrationForm}
20+
/>
21+
))
22+
}
23+
</HorizontalScrollView>
24+
)
25+
};
26+
27+
export default RegisteredItemList;

‎laundry_owner/frontend/src/src/components/ProductRegistrationView/RegisteredItemView.js‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import style from './RegisterdItemView.scss';
44
import className from 'classnames';
55
import {makeStyles} from "@material-ui/core/styles";
66
import {Typography} from "@material-ui/core";
7+
import {MODE} from "../../pages/ProductRegistrationView";
78

89
const customStyle = makeStyles({
910
card: {
@@ -28,21 +29,26 @@ const customStyle = makeStyles({
2829

2930
const cx = className.bind(style);
3031

31-
const RegisteredItemView = ({}) => {
32+
const RegisteredItemView = ({name,material,price,id,openRegistrationForm}) => {
3233
const customClasses = customStyle();
3334

3435
return (
3536
<GridListTile style={{height: '275px'}}>
3637
<Card variant={"outlined"} className={customClasses.card}>
3738
<CardContent className={customClasses.cardContent}>
3839
<div className={cx('registeredItemView-img')}/>
39-
<Typography>상품명</Typography>
40+
<Typography>{name}</Typography>
4041
<div className={cx('registeredItemView-data')}>
41-
<Typography>소재명 : XXXX </Typography>
42-
<Typography>가격 : 3,000 원</Typography>
42+
<Typography>소재명 : {material} </Typography>
43+
<Typography>가격 : {price} 원</Typography>
4344
</div>
4445
<div className={cx('registeredItemView-dataModify')}>
45-
<Typography variant={"button"} className={customClasses.cardButton}>수정하기</Typography>
46+
<Typography
47+
variant={"button"}
48+
className={customClasses.cardButton}
49+
onClick={()=>openRegistrationForm(MODE.MODIFY)}
50+
>
51+
수정하기</Typography>
4652
<Typography variant={"button"} className={customClasses.cardButton}>삭제하기</Typography>
4753
</div>
4854
</CardContent>

‎laundry_owner/frontend/src/src/pages/HourlySalesView.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ class HourlySalesView extends React.Component {
1616
return (
1717
<div className={cx('defaultBackground')}>
1818
<DefaultHeader title={"통계"}/>
19-
<DefaultMainBody menuIndex={4}>
19+
<DefaultMainBody menuIndex={5}>
2020
<HourlySalesChart/>
2121
<AnalysisTable/>
2222
</DefaultMainBody>

‎laundry_owner/frontend/src/src/pages/OrderView.js‎

Lines changed: 11 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -7,19 +7,18 @@ import OrderTable from "../components/OrderView/OrderTable";
77

88
const cx = className.bind(style);
99

10-
class OrderView extends React.Component {
10+
const OrderView = ({}) => {
1111

12-
render() {
13-
return (
14-
<div className={cx('defaultBackground')}>
15-
<DefaultHeader title={"주문관리"}/>
16-
<DefaultMainBody>
17-
<OrderTable/>
18-
</DefaultMainBody>
19-
</div>
20-
)
21-
}
2212

23-
}
13+
return (
14+
<div className={cx('defaultBackground')}>
15+
<DefaultHeader title={"주문관리"}/>
16+
<DefaultMainBody menuIndex={0}>
17+
<OrderTable/>
18+
</DefaultMainBody>
19+
</div>
20+
)
21+
22+
};
2423

2524
export default OrderView;

‎laundry_owner/frontend/src/src/pages/ProductRegistrationView.js‎

Lines changed: 146 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,165 @@
1-
import React from "react";
1+
import React, {useEffect, useState} from "react";
2+
import {Typography} from "@material-ui/core";
3+
import style from '../components/Common/Background.scss';
4+
import axios from 'axios';
5+
import className from "classnames/bind";
26
import DefaultHeader from "../components/Header/DefaultHeader";
37
import DefaultMainBody from "../components/Common/DefaultMainBody";
4-
import className from "classnames/bind";
5-
import style from '../components/Common/Background.scss';
6-
import HorizontalScrollView from "../components/ProductRegistrationView/HorizontalScrollView";
7-
import RegisteredItemView from "../components/ProductRegistrationView/RegisteredItemView";
8-
import {Typography} from "@material-ui/core";
98
import RegisterItemForm from "../components/ProductRegistrationView/RegisterItemForm";
9+
import {useSelector} from "react-redux";
10+
import EndPoint from "../config/EndPoint";
11+
import RegisteredItemList from "../components/ProductRegistrationView/RegisteredItemList";
1012

1113
const cx = className.bind(style);
1214

13-
class ProductRegistrationView extends React.Component {
15+
export const MODE = {
16+
REGISTRATION : 0x01,
17+
MODIFY: 0x02,
18+
};
19+
20+
const ProductRegistrationView = ({}) => {
21+
22+
const profile = useSelector(state => state.profile, []);
23+
24+
const [items, setItems] = useState([]);
25+
const [showForm, setShowForm] = useState(false);
26+
27+
const [mode, setMode] = useState(MODE.REGISTRATION);
28+
const [name, setName] = useState('와이셔츠');
29+
const [material, setMaterial] = useState('와이셔츠');
30+
const [price, setPrice] = useState('');
31+
const [information, setInformation] = useState('');
32+
33+
34+
const initInput = () => {
35+
setMode(MODE.REGISTRATION);
36+
setName('와이셔츠');
37+
setMaterial('와이셔츠');
38+
setPrice('');
39+
setInformation('');
40+
setShowForm(false);
41+
};
42+
43+
const registerItem = (mode, name, material, price, information) => {
44+
const parsedPrice = parseInt(price, 10);
45+
const item = {
46+
category: name,
47+
material,
48+
price: parsedPrice,
49+
information,
50+
image: '0'
51+
};
1452

15-
render() {
53+
if (mode === MODE.REGISTRATION) {
54+
requestRegisterItem(item);
55+
}else{
56+
requestModifyItem(item);
57+
}
58+
};
1659

60+
const requestRegisterItem = (item) => {
61+
axios.post(`${EndPoint.logicServer}/mylaundry/item_info/${profile.shopId}`, {
62+
item
63+
})
64+
.then(response => {
65+
if (response.data.response !== 'success') {
66+
alert('상품의 정보를 확인해 주세요.');
67+
console.log(response.data);
68+
return;
69+
}
70+
alert('상품이 올바르게 등록됐습니다.');
71+
initInput();
72+
})
73+
.catch(err => {
74+
console.log(err);
75+
});
76+
};
1777

18-
return (
19-
<div className={cx('defaultBackground')}>
20-
<DefaultHeader title={"제품 등록"}/>
21-
<DefaultMainBody menuIndex={2}>
78+
const requestModifyItem = (item) => {
79+
80+
};
81+
82+
const openRegistrationForm = (mode) => {
83+
setShowForm(true);
84+
setMode(mode);
85+
};
86+
87+
const getItems = () => {
88+
const url = `${EndPoint.logicServer}/mylaundry/item_info/${profile.shopId}`;
89+
axios.get(url)
90+
.then(response => {
91+
if (response.data.response !== 'success') {
92+
console.log(response.data);
93+
alert('서버에서 아이템 리스트를 받는 중 오류가 발생했습니다.');
94+
return;
95+
}
96+
const data = response.data.data;
97+
setItems(data);
98+
})
99+
.catch(err => {
100+
alert('서버와의 통신중 오류가 발생했습니다.');
101+
102+
})
103+
};
104+
105+
useEffect(() => {
106+
setTimeout(getItems,100);
107+
}, []);
108+
109+
110+
return (
111+
<div className={cx('defaultBackground')}>
112+
<DefaultHeader title={"제품 등록"}/>
113+
<DefaultMainBody menuIndex={2}>
114+
<div className={cx('defaultSpaceBetween')}>
22115
<Typography
23116
variant={"h6"}
24117
gutterBottom>
25118
등록된 제품
26119
</Typography>
27-
<HorizontalScrollView>
28-
<RegisteredItemView/>
29-
<RegisteredItemView/>
30-
<RegisteredItemView/>
31-
</HorizontalScrollView>
32-
33120
<Typography
34-
style={{marginTop: '25px'}}
35-
variant={"h6"}
36-
gutterBottom>
37-
제품 등록/수정
121+
variant={"button"}
122+
style={{cursor: "pointer", color: "#333333"}}
123+
onClick={() => openRegistrationForm(MODE.REGISTRATION)}
124+
>
125+
상품 등록하기
38126
</Typography>
39-
<RegisterItemForm/>
40-
</DefaultMainBody>
41-
</div>
42-
)
43-
}
44-
}
127+
</div>
128+
<RegisteredItemList
129+
items={items}
130+
openRegistrationForm={openRegistrationForm}
131+
/>
132+
133+
{showForm ? (
134+
<div>
135+
<Typography
136+
style={{marginTop: '25px'}}
137+
variant={"h6"}
138+
gutterBottom>
139+
{mode === MODE.REGISTRATION ?
140+
("상품 등록") : ("상품 수정")
141+
}
142+
</Typography>
143+
< RegisterItemForm
144+
mode={mode}
145+
price={price}
146+
material={material}
147+
name={name}
148+
information={information}
149+
setPrice={setPrice}
150+
setMaterial={setMaterial}
151+
setName={setName}
152+
setInformation={setInformation}
153+
registerItem={registerItem}
154+
/>
155+
</div>
156+
) : null}
157+
158+
</DefaultMainBody>
159+
</div>
160+
)
161+
162+
};
45163

46164

47165
export default ProductRegistrationView;

0 commit comments

Comments
 (0)