Skip to content

Commit ddff50a

Browse files
MU-SoftwareMU-Software
committed
chore: 스타일을 Figma 스펙에 맞도록 수정
1 parent 1ee8b48 commit ddff50a

File tree

3 files changed

+148
-223
lines changed

3 files changed

+148
-223
lines changed

‎packages/shop/src/components/features/cart.tsx‎

Lines changed: 25 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,5 @@
1-
import { ExpandMore } from "@mui/icons-material";
2-
import {
3-
Accordion,
4-
AccordionActions,
5-
AccordionDetails,
6-
AccordionSummary,
7-
Backdrop,
8-
Button,
9-
CircularProgress,
10-
Divider,
11-
Stack,
12-
Typography,
13-
} from "@mui/material";
1+
import * as Common from "@frontend/common";
2+
import { Backdrop, Button, CircularProgress, Divider, Stack, Typography } from "@mui/material";
143
import { ErrorBoundary, Suspense } from "@suspensive/react";
154
import { useQueryClient } from "@tanstack/react-query";
165
import * as React from "react";
@@ -35,40 +24,35 @@ const CartItem: React.FC<{
3524
const removeFromCartStr = language === "ko" ? "장바구니에서 상품 삭제" : "Remove from Cart";
3625

3726
return (
38-
<Accordion>
39-
<AccordionSummary expandIcon={<ExpandMore />}>
40-
<Typography variant="h6" sx={{ width: "100%", flexShrink: 0 }}>
41-
{cartProdRel.product.name}
42-
</Typography>
43-
</AccordionSummary>
44-
<AccordionDetails>
45-
<Stack spacing={2} sx={{ width: "100%" }}>
46-
{cartProdRel.options.map((optionRel) => (
47-
<CommonComponents.OrderProductRelationOptionInput
48-
key={optionRel.product_option_group.id + (optionRel.product_option?.id || "")}
49-
optionRel={optionRel}
50-
disabled
51-
disabledReason={cannotModifyOptionsStr}
52-
/>
53-
))}
54-
</Stack>
55-
<br />
56-
<Divider />
57-
<br />
58-
<Typography variant="h6" sx={{ textAlign: "end" }}>
59-
{productPriceStr}: <CommonComponents.PriceDisplay price={cartProdRel.price} />
60-
</Typography>
61-
</AccordionDetails>
62-
<AccordionActions>
27+
<Common.Components.MDX.PrimaryStyledDetails
28+
summary={cartProdRel.product.name}
29+
actions={[
6330
<Button
6431
variant="contained"
6532
color="secondary"
6633
onClick={() => removeItemFromCartFunc(cartProdRel.id)}
6734
disabled={disabled}
6835
children={removeFromCartStr}
69-
/>
70-
</AccordionActions>
71-
</Accordion>
36+
/>,
37+
]}
38+
>
39+
<Stack spacing={2} sx={{ width: "100%" }}>
40+
{cartProdRel.options.map((optionRel) => (
41+
<CommonComponents.OrderProductRelationOptionInput
42+
key={optionRel.product_option_group.id + (optionRel.product_option?.id || "")}
43+
optionRel={optionRel}
44+
disabled
45+
disabledReason={cannotModifyOptionsStr}
46+
/>
47+
))}
48+
</Stack>
49+
<br />
50+
<Divider />
51+
<br />
52+
<Typography variant="h6" sx={{ textAlign: "end" }}>
53+
{productPriceStr}: <CommonComponents.PriceDisplay price={cartProdRel.price} />
54+
</Typography>
55+
</Common.Components.MDX.PrimaryStyledDetails>
7256
);
7357
};
7458

‎packages/shop/src/components/features/order.tsx‎

Lines changed: 68 additions & 93 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,5 @@
11
import * as Common from "@frontend/common";
2-
import { ExpandMore } from "@mui/icons-material";
3-
import {
4-
Accordion,
5-
AccordionActions,
6-
AccordionDetails,
7-
AccordionSummary,
8-
Button,
9-
CircularProgress,
10-
Divider,
11-
List,
12-
Stack,
13-
Typography,
14-
} from "@mui/material";
2+
import { Button, CircularProgress, Divider, Stack, Typography } from "@mui/material";
153
import { ErrorBoundary, Suspense } from "@suspensive/react";
164
import * as React from "react";
175
import * as R from "remeda";
@@ -92,42 +80,37 @@ const OrderProductRelationItem: React.FC<OrderProductRelationItemProps> = ({
9280
});
9381
};
9482

83+
const actionButtons = (
84+
<>
85+
<Button variant="contained" fullWidth onClick={patchOneItemOptions} disabled={patchOptionBtnDisabled}>
86+
옵션 수정
87+
</Button>
88+
<Button variant="contained" fullWidth onClick={refundOneItem} disabled={refundBtnDisabled}>
89+
{refundBtnText}
90+
</Button>
91+
</>
92+
);
93+
9594
return (
96-
<Accordion key={prodRel.id}>
97-
<AccordionSummary expandIcon={<ExpandMore />}>{prodRel.product.name}</AccordionSummary>
98-
<AccordionDetails>
99-
<form
100-
ref={formRef}
101-
onSubmit={(e) => {
102-
e.preventDefault();
103-
patchOneItemOptions();
104-
}}
105-
>
106-
<Stack spacing={2} sx={{ width: "100%" }}>
107-
{prodRel.options.map((optionRel) => (
108-
<CommonComponents.OrderProductRelationOptionInput
109-
key={optionRel.product_option_group.id + (optionRel.product_option?.id || "")}
110-
optionRel={optionRel}
111-
disabled={isPending}
112-
/>
113-
))}
114-
</Stack>
115-
</form>
116-
</AccordionDetails>
117-
<AccordionActions>
118-
<Button
119-
variant="contained"
120-
sx={{ width: "100%" }}
121-
onClick={patchOneItemOptions}
122-
disabled={patchOptionBtnDisabled}
123-
>
124-
옵션 수정
125-
</Button>
126-
<Button variant="contained" sx={{ width: "100%" }} onClick={refundOneItem} disabled={refundBtnDisabled}>
127-
{refundBtnText}
128-
</Button>
129-
</AccordionActions>
130-
</Accordion>
95+
<Common.Components.MDX.PrimaryStyledDetails key={prodRel.id} summary={prodRel.product.name} actions={actionButtons}>
96+
<form
97+
ref={formRef}
98+
onSubmit={(e) => {
99+
e.preventDefault();
100+
patchOneItemOptions();
101+
}}
102+
>
103+
<Stack spacing={2} sx={{ width: "100%" }}>
104+
{prodRel.options.map((optionRel) => (
105+
<CommonComponents.OrderProductRelationOptionInput
106+
key={optionRel.product_option_group.id + (optionRel.product_option?.id || "")}
107+
optionRel={optionRel}
108+
disabled={isPending}
109+
/>
110+
))}
111+
</Stack>
112+
</form>
113+
</Common.Components.MDX.PrimaryStyledDetails>
131114
);
132115
};
133116

@@ -154,45 +137,43 @@ const OrderItem: React.FC<{ order: ShopSchemas.Order; disabled?: boolean }> = ({
154137
? "주문 전체 환불됨"
155138
: order.not_fully_refundable_reason;
156139

140+
const actionButtons = (
141+
<>
142+
<Button variant="contained" fullWidth onClick={openReceipt} disabled={receipyBtnDisabled}>
143+
영수증
144+
</Button>
145+
<Button variant="contained" fullWidth onClick={refundOrder} disabled={refundBtnDisabled}>
146+
{btnText}
147+
</Button>
148+
</>
149+
);
150+
157151
return (
158-
<Accordion>
159-
<AccordionSummary expandIcon={<ExpandMore />}>
160-
<Typography variant="h6">{order.name}</Typography>
161-
</AccordionSummary>
162-
<AccordionDetails>
163-
<Divider />
164-
<br />
165-
<Typography variant="body1">
166-
주문 결제 금액 : <CommonComponents.PriceDisplay price={order.current_paid_price} />
167-
</Typography>
168-
<Typography variant="body1">상태: {PaymentHistoryStatusTranslated[order.current_status]}</Typography>
169-
<br />
170-
<Divider />
171-
<br />
172-
<Typography variant="body1">주문 상품 목록</Typography>
173-
<br />
174-
{order.products.map((prodRel) => (
175-
<OrderProductRelationItem
176-
key={prodRel.id}
177-
order={order}
178-
prodRel={prodRel}
179-
isPending={isPending}
180-
oneItemRefundMutation={oneItemRefundMutation}
181-
optionsOfOneItemInOrderPatchMutation={optionsOfOneItemInOrderPatchMutation}
182-
/>
183-
))}
184-
<br />
185-
<Divider />
186-
</AccordionDetails>
187-
<AccordionActions>
188-
<Button variant="contained" sx={{ width: "100%" }} onClick={openReceipt} disabled={receipyBtnDisabled}>
189-
영수증
190-
</Button>
191-
<Button variant="contained" sx={{ width: "100%" }} onClick={refundOrder} disabled={refundBtnDisabled}>
192-
{btnText}
193-
</Button>
194-
</AccordionActions>
195-
</Accordion>
152+
<Common.Components.MDX.PrimaryStyledDetails summary={order.name} actions={actionButtons}>
153+
<Divider />
154+
<br />
155+
<Typography variant="body1">
156+
주문 결제 금액 : <CommonComponents.PriceDisplay price={order.current_paid_price} />
157+
</Typography>
158+
<Typography variant="body1">상태: {PaymentHistoryStatusTranslated[order.current_status]}</Typography>
159+
<br />
160+
<Divider />
161+
<br />
162+
<Typography variant="body1">주문 상품 목록</Typography>
163+
<br />
164+
{order.products.map((prodRel) => (
165+
<OrderProductRelationItem
166+
key={prodRel.id}
167+
order={order}
168+
prodRel={prodRel}
169+
isPending={isPending}
170+
oneItemRefundMutation={oneItemRefundMutation}
171+
optionsOfOneItemInOrderPatchMutation={optionsOfOneItemInOrderPatchMutation}
172+
/>
173+
))}
174+
<br />
175+
<Divider />
176+
</Common.Components.MDX.PrimaryStyledDetails>
196177
);
197178
};
198179

@@ -201,13 +182,7 @@ export const OrderList: React.FC = () => {
201182
const shopAPIClient = ShopHooks.useShopClient();
202183
const { data } = ShopHooks.useOrders(shopAPIClient);
203184

204-
return (
205-
<List>
206-
{data.map((item) => (
207-
<OrderItem key={item.id} order={item} />
208-
))}
209-
</List>
210-
);
185+
return data.map((item) => <OrderItem key={item.id} order={item} />);
211186
};
212187

213188
return (

0 commit comments

Comments
 (0)