Skip to content

Commit b613586

Browse files
1223v1223v
committed
Fix: 동기 비동기 문제
1 parent 7beaf5c commit b613586

File tree

5 files changed

+159
-81
lines changed

5 files changed

+159
-81
lines changed

‎src/Atom/status.jsx

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -98,3 +98,51 @@ export const getUserSelector = selector({
9898
set(userState, newValue);
9999
},
100100
});
101+
102+
// export const waitorderState = atom({
103+
// key: "waitorderState",
104+
// default: [],
105+
// });
106+
107+
// export const selectWaitOrderState = selector({
108+
// key: "selectWaitOrderState",
109+
// get: ({ get }) => {
110+
// return get(waitorderState);
111+
// },
112+
113+
// set: ({ set }, newValue) => {
114+
// set(waitorderState, newValue);
115+
// },
116+
// });
117+
118+
// export const makeorderState = atom({
119+
// key: "makeorderState",
120+
// default: [],
121+
// });
122+
123+
// export const selectMakeOrderState = selector({
124+
// key: "selectMakeOrderState",
125+
// get: ({ get }) => {
126+
// return get(makeorderState);
127+
// },
128+
129+
// set: ({ set }, newValue) => {
130+
// set(makeorderState, newValue);
131+
// },
132+
// });
133+
134+
// export const completeorderState = atom({
135+
// key: "completeorderState",
136+
// default: [],
137+
// });
138+
139+
// export const selectCompleteOrderState = selector({
140+
// key: "selectCompleteOrderState",
141+
// get: ({ get }) => {
142+
// return get(completeorderState);
143+
// },
144+
145+
// set: ({ set }, newValue) => {
146+
// set(completeorderState, newValue);
147+
// },
148+
// });

‎src/pages/Home/Receipt/StatusReceipt/CompleteReceipt.jsx

Lines changed: 32 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ const CompleteReceipt = ({ orderProps, setStatus, setOrder, fetchData }) => {
66
const apiUrl = process.env.REACT_APP_API_ROOT;
77
// const setOrderSelect = useSetRecoilState(selectOrder);
88

9-
const handleComplete = () => {
9+
const handleComplete = async () => {
1010
const config = {
1111
withCredentials: true,
1212
};
@@ -15,24 +15,28 @@ const CompleteReceipt = ({ orderProps, setStatus, setOrder, fetchData }) => {
1515
orderId: orderProps.orderId,
1616
status: "PICKUP",
1717
};
18-
console.log(body);
1918

20-
axios
21-
.post(`${apiUrl}/api/v1/order/complete`, body, config)
22-
.then((res) => {
23-
console.log(res);
24-
if (res.data.success === true) {
25-
message.info("픽업완료 처리되었습니다.");
26-
// 데이터 다시 fetch
27-
fetchData();
28-
// select된 데이터 변경
29-
setStatus("null");
30-
setOrder(null);
31-
}
32-
})
33-
.catch((err) => console.log(err));
34-
};
19+
try {
20+
const res = await axios.post(
21+
`${apiUrl}/api/v1/order/complete`,
22+
body,
23+
config
24+
);
25+
console.log(res);
26+
if (res.data.success === true) {
27+
message.success("픽업완료 처리되었습니다.");
28+
29+
// fetchData가 완료될 때까지 기다립니다.
30+
await fetchData();
3531

32+
// fetchData가 완료된 후에 실행됩니다.
33+
setStatus("null");
34+
setOrder(null);
35+
}
36+
} catch (err) {
37+
console.log(err);
38+
}
39+
};
3640
return (
3741
<div>
3842
<div className="receiptHeader">
@@ -67,23 +71,28 @@ const CompleteReceipt = ({ orderProps, setStatus, setOrder, fetchData }) => {
6771
</div>
6872
<div className="receiptOption">
6973
{e.options.map((option) => (
70-
<span className="receipt-optiontext">└ {option}</span>
74+
<span
75+
className="receipt-optiontext"
76+
style={{
77+
color: option?.price !== 0 ? "#D82356" : undefined,
78+
fontWeight: "500",
79+
}}
80+
>
81+
└ ({option.category}) {option.name}
82+
</span>
7183
))}
7284
</div>
7385
</React.Fragment>
7486
))}
7587
<div className="receipt-divider" />
7688
<div className="receiptTextBox">
7789
<span className="receipt-text">결제수단</span>
78-
<span className="receipt-text">{orderProps?.payment}</span>
90+
<span className="receipt-text">{orderProps?.method}</span>
7991
</div>
8092
<div className="receiptTextBox">
8193
<span className="receipt-text">결제금액</span>
8294
<span className="receipt-text">
83-
{orderProps?.price
84-
.toString()
85-
.replace(/\B(?=(\d{3})+(?!\d))/g, ",")}
86-
원
95+
{orderProps?.price.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}원
8796
</span>
8897
</div>
8998
</div>

‎src/pages/Home/Receipt/StatusReceipt/PendingReceipt.jsx

Lines changed: 32 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ const PendingReceipt = ({ orderProps, setStatus, setOrder, fetchData }) => {
5252
});
5353
};
5454

55-
const handleMake = (e) => {
55+
const handleMake = async (e) => {
5656
const config = {
5757
withCredentials: true,
5858
};
@@ -62,24 +62,27 @@ const PendingReceipt = ({ orderProps, setStatus, setOrder, fetchData }) => {
6262
status: "MAKE",
6363
time: parseInt(e.target.innerText.split("분")[0]),
6464
};
65-
console.log(body);
6665

67-
axios
68-
.post(`${apiUrl}/api/v1/order/complete`, body, config)
69-
.then((res) => {
70-
console.log(res);
71-
if (res.status === 200) {
72-
alert("접수되었습니다.");
73-
setReceiveModal((prev) => !prev);
74-
// 데이터 다시 fetch
75-
fetchData();
76-
// select된 데이터 변경
77-
// 클릭 시 스타일 변화
78-
setStatus("null");
79-
setOrder(null);
80-
}
81-
})
82-
.catch((err) => console.log(err));
66+
try {
67+
const res = await axios.post(
68+
`${apiUrl}/api/v1/order/complete`,
69+
body,
70+
config
71+
);
72+
console.log(res);
73+
if (res.status === 200) {
74+
message.success("접수되었습니다.");
75+
setReceiveModal((prev) => !prev);
76+
// 데이터 다시 fetch
77+
await fetchData();
78+
// select된 데이터 변경
79+
// 클릭 시 스타일 변화
80+
setStatus("null");
81+
setOrder(null);
82+
}
83+
} catch (err) {
84+
console.log(err);
85+
}
8386
};
8487

8588
return (
@@ -156,23 +159,28 @@ const PendingReceipt = ({ orderProps, setStatus, setOrder, fetchData }) => {
156159
</div>
157160
<div className="receiptOption">
158161
{e.options.map((option) => (
159-
<span className="receipt-optiontext">└ {option}</span>
162+
<span
163+
className="receipt-optiontext"
164+
style={{
165+
color: option?.price !== 0 ? "#D82356" : undefined,
166+
fontWeight: "500",
167+
}}
168+
>
169+
└ ({option.category}) {option.name}
170+
</span>
160171
))}
161172
</div>
162173
</React.Fragment>
163174
))}
164175
<div className="receipt-divider" />
165176
<div className="receiptTextBox">
166177
<span className="receipt-text">결제수단</span>
167-
<span className="receipt-text">{orderProps?.payment}</span>
178+
<span className="receipt-text">{orderProps?.method}</span>
168179
</div>
169180
<div className="receiptTextBox">
170181
<span className="receipt-text">결제금액</span>
171182
<span className="receipt-text">
172-
{orderProps?.price
173-
.toString()
174-
.replace(/\B(?=(\d{3})+(?!\d))/g, ",")}
175-
원
183+
{orderProps?.price.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}원
176184
</span>
177185
</div>
178186

‎src/pages/Home/Receipt/StatusReceipt/ProgressReceipt.jsx

Lines changed: 31 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ const ProgressReceipt = ({ orderProps, setStatus, setOrder, fetchData }) => {
77
// const setOrderSelect = useSetRecoilState(selectOrder);
88
// const { orderNum, time, phone, foodies, payment, price } = orderProps;
99

10-
const handleComplete = () => {
10+
const handleComplete = async () => {
1111
const config = {
1212
withCredentials: true,
1313
};
@@ -16,24 +16,26 @@ const ProgressReceipt = ({ orderProps, setStatus, setOrder, fetchData }) => {
1616
orderId: orderProps.orderId,
1717
status: "COMPLETE",
1818
};
19-
console.log(body);
19+
try {
20+
const res = await axios.post(
21+
`${apiUrl}/api/v1/order/complete`,
22+
body,
23+
config
24+
);
25+
console.log(res);
26+
if (res.data.success === true) {
27+
message.success("제조완료 처리되었습니다.");
2028

21-
axios
22-
.post(`${apiUrl}/api/v1/order/complete`, body, config)
23-
.then((res) => {
24-
console.log(res);
25-
if (res.data.success === true) {
26-
message.info("제조완료 처리되었습니다.");
27-
// 데이터 다시 fetch
28-
fetchData();
29-
// select된 데이터 변경
30-
setStatus("null");
31-
setOrder(null);
32-
}
33-
})
34-
.catch((err) => {
35-
console.log(err);
36-
});
29+
// fetchData가 완료될 때까지 기다립니다.
30+
await fetchData();
31+
32+
// fetchData가 완료된 후에 실행됩니다.
33+
setStatus("null");
34+
setOrder(null);
35+
}
36+
} catch (err) {
37+
console.log(err);
38+
}
3739
};
3840

3941
return (
@@ -70,23 +72,28 @@ const ProgressReceipt = ({ orderProps, setStatus, setOrder, fetchData }) => {
7072
</div>
7173
<div className="receiptOption">
7274
{e.options.map((option) => (
73-
<span className="receipt-optiontext">└ {option}</span>
75+
<span
76+
className="receipt-optiontext"
77+
style={{
78+
color: option?.price !== 0 ? "#D82356" : undefined,
79+
fontWeight: "500",
80+
}}
81+
>
82+
└ ({option.category}) {option.name}
83+
</span>
7484
))}
7585
</div>
7686
</React.Fragment>
7787
))}
7888
<div className="receipt-divider" />
7989
<div className="receiptTextBox">
8090
<span className="receipt-text">결제수단</span>
81-
<span className="receipt-text">{orderProps?.payment}</span>
91+
<span className="receipt-text">{orderProps?.method}</span>
8292
</div>
8393
<div className="receiptTextBox">
8494
<span className="receipt-text">결제금액</span>
8595
<span className="receipt-text">
86-
{orderProps?.price
87-
.toString()
88-
.replace(/\B(?=(\d{3})+(?!\d))/g, ",")}
89-
원
96+
{orderProps?.price.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}원
9097
</span>
9198
</div>
9299
</div>

‎src/pages/Home/StatusHome/Wait.jsx

Lines changed: 16 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,9 @@ import "./DetailHome.css";
1010

1111
const Wait = ({ orderInfo }) => {
1212
const Mp = EffectSound(MP, 1);
13-
const setOrderSelect = useSetRecoilState(selectOrder);
13+
1414
const setStatusSelect = useSetRecoilState(selectStatus);
15+
const [orderSelect, setOrderSelect] = useRecoilState(selectOrder);
1516
const [orderTotal, setorderTotal] = useRecoilState(selectTotal);
1617
const [playSound, setplaySound] = useRecoilState(soundState);
1718
const [selectedOrderId, setSelectedOrderId] = useState(null);
@@ -21,18 +22,23 @@ const Wait = ({ orderInfo }) => {
2122
: orderInfo?.orders;
2223

2324
useEffect(() => {
24-
const firstOrder = sortedOrders?.length > 0 ? sortedOrders[0] : null;
25-
setOrderSelect(firstOrder);
26-
setSelectedOrderId(firstOrder?.idx || null);
25+
if (orderSelect === null) {
26+
const firstOrder = sortedOrders?.length > 0 ? sortedOrders[0] : null;
27+
setOrderSelect(firstOrder);
28+
setSelectedOrderId(firstOrder?.idx || null);
2729

28-
if (firstOrder !== null) {
29-
setStatusSelect("pending");
30-
} else {
31-
setStatusSelect("null");
32-
setOrderSelect(null);
30+
if (firstOrder !== null) {
31+
setStatusSelect("pending");
32+
} else {
33+
setStatusSelect("null");
34+
setOrderSelect(null);
35+
}
3336
}
3437

35-
if (playSound && orderInfo?.orders?.length >= orderTotal) {
38+
/**
39+
* 주문 들어올 시 소리 재생
40+
*/
41+
if (playSound && orderInfo?.orders?.length > orderTotal) {
3642
console.log("소리 재생");
3743
Mp.play();
3844
setorderTotal(orderInfo?.orders?.length);

0 commit comments

Comments
 (0)