Skip to content

Commit

Permalink
Merge remote-tracking branch 'origin/develop' into feature/#212
Browse files Browse the repository at this point in the history
  • Loading branch information
@hanagertrudeKim
hanagertrudeKim committed Mar 28, 2024
2 parents c36d074 + 86f2883 commit 52961b5
Show file tree
Hide file tree
Showing 14 changed files with 68 additions and 267 deletions.
7 changes: 2 additions & 5 deletions src/component/common/Header/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@ import useMediaQuery from 'utils/hooks/useMediaQuery';
import { createPortal } from 'react-dom';
import { postLogout } from 'api/auth';
import useUserStore from 'store/user';
import useStepStore from 'store/useStepStore';
import styles from './Header.module.scss';
import useMobileSidebar from './hooks/useMobileSidebar';
import useMegaMenu from './hooks/useMegaMenu';
Expand Down Expand Up @@ -37,15 +36,13 @@ function Header() {
} = useMobileSidebar(pathname, isMobile);
const isMain = true;
const { user, removeUser } = useUserStore();
const setStep = useStepStore((state) => state.setStep);

const logout = () => {
postLogout()
.then(() => {
sessionStorage.removeItem('access_token');
localStorage.removeItem('refresh_token');
removeUser();
setStep(0);
});
};

Expand Down Expand Up @@ -155,7 +152,7 @@ function Header() {
key={subMenu.title}
>
<Link to={subMenu.link}>
{subMenu.title}
{subMenu.title === '가게정보' && subMenu.title}
</Link>
</li>
))}
Expand Down Expand Up @@ -238,7 +235,7 @@ function Header() {
{panelMenuList?.map((menu) => (
<li className={styles.megamenu__menu} key={menu.title}>
<Link className={styles.megamenu__link} to={menu.link}>
{menu.title}
{menu.title === '가게정보' && menu.title}
</Link>
</li>
))}
Expand Down
2 changes: 1 addition & 1 deletion src/page/AddMenu/components/MenuName/MenuName.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
&__container {
margin-top: 5px;
width: 100%;
margin-bottom: 24px;
}

&__caption {
Expand All @@ -18,7 +19,6 @@
border: 0.5px solid #898a8d;
padding: 8px;
box-sizing: border-box;
margin-bottom: 24px;

&::placeholder {
color: #a1a1a1;
Expand Down
1 change: 1 addition & 0 deletions src/page/AddMenu/components/MenuName/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ export default function MenuName({ isComplete }: MenuNameProps) {
value={name}
/>
)}
{menuError && <span className={styles['error-message']}>{menuError}</span>}
</div>
) : (
<div className={styles.container}>
Expand Down
5 changes: 3 additions & 2 deletions src/page/AddMenu/components/MenuPrice/MenuPrice.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -220,6 +220,7 @@
display: flex;
gap: 16px;
align-items: center;
width: 100%;

&__size-input {
box-sizing: border-box;
Expand Down Expand Up @@ -252,15 +253,15 @@
&__price-input-box {
position: relative;
box-sizing: border-box;
width: 335px;
width: 100%;
height: 62px;
border: 0.5px solid #858585;
}

&__price-input {
text-align: right;
box-sizing: border-box;
width: 303px;
width: 98%;
height: 60px;
padding: 16px;
color: #252525;
Expand Down
246 changes: 34 additions & 212 deletions src/page/AddMenu/components/MenuPrice/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,5 @@
import useMediaQuery from 'utils/hooks/useMediaQuery';
import useAddMenuStore from 'store/addMenu';
import { ReactComponent as PlusIcon } from 'assets/svg/main/plus.svg';
import { ReactComponent as DeleteIcon } from 'assets/svg/addmenu/delete-icon.svg';
import { ReactComponent as MobileDeleteIcon } from 'assets/svg/addmenu/mobile-delete-icon.svg';
import { ReactComponent as MobileCheckCircleIcon } from 'assets/svg/addmenu/mobile-single-menu-check.svg';
import { ReactComponent as CheckCircleIcon } from 'assets/svg/addmenu/single-menu-check.svg';
import { ReactComponent as MobilePlusIcon } from 'assets/svg/addmenu/mobile-plus-icon.svg';
import { ReactComponent as SelectedCheck } from 'assets/svg/addmenu/selected-check.svg';
import { ReactComponent as MobileselectedCheck } from 'assets/svg/addmenu/mobile-single-menu-check-selected.svg';
import styles from './MenuPrice.module.scss';

interface MenuPriceProps {
Expand All @@ -18,37 +10,11 @@ export default function MenuPrice({ isComplete }:MenuPriceProps) {
const { isMobile } = useMediaQuery();
const {
optionPrices,
setOptionPrices,
isSingle,
setIsSingle,
singlePrice,
setSinglePrice,
resetOptionPrice,
} = useAddMenuStore();

const updatePriceInput = (index: number, field: string, newValue: string | number) => {
const updatedOptionPrices = (optionPrices || []).map(
(price, idx) => (index === idx ? { ...price, [field]: newValue } : price),
);
setOptionPrices(updatedOptionPrices);
};

const addPriceInput = () => {
const newId = (optionPrices || []).length;
if (!isSingle) {
setOptionPrices([...(optionPrices || []), { id: newId, option: '', price: 0 }]);
} else {
setIsSingle(false);
}
};

const deletePriceInput = (index: number) => {
setOptionPrices((optionPrices || []).filter((_, idx) => idx !== index));
};
const handleIsSingleMenu = () => {
setIsSingle(!isSingle);
resetOptionPrice();
};
return (
<div>
{isMobile ? (
Expand All @@ -58,116 +24,34 @@ export default function MenuPrice({ isComplete }:MenuPriceProps) {
<div className={styles.mobile__header}>
<div className={styles['mobile__header-title--complete']}>가격</div>
</div>
{isSingle ? (
<div className={styles['mobile__price-info-text-box']}>
<div className={styles['mobile__price-info-text']}>
<div className={styles['mobile__price-info-text__price']}>
{singlePrice}
원
</div>
<div className={styles['mobile__price-info-text-box']}>
<div className={styles['mobile__price-info-text']}>
<div className={styles['mobile__price-info-text__price']}>
{singlePrice}
원
</div>
</div>
)
: (optionPrices || []).map((input) => (
<div key={input.id} className={styles['mobile__price-info-text-box']}>
<div className={styles['mobile__price-info-text']}>
<div className={styles['mobile__price-info-text__size']}>
{input.option}
</div>
<div>
/
</div>
<div className={styles['mobile__price-info-text__price']}>
{input.price}
원
</div>
</div>
</div>
))}
</div>
</>
) : (
<>
<div className={styles.mobile__header}>
<div className={styles['mobile__header-title']}>가격</div>
<div className={styles['mobile__header-condition']}>
<div className={styles['mobile__header-condition__text']}>단일메뉴</div>
<button
type="button"
className={styles['mobile__header-condition__button']}
onClick={handleIsSingleMenu}
>
{isSingle ? (
<MobileselectedCheck className={styles['mobile__header__condition-icon']} />
) : (
<MobileCheckCircleIcon className={styles['mobile__header-condition__icon']} />
)}
</button>
</div>
</div>
{isSingle
? (
<div className={styles['mobile__price-info-input-box']}>
<div className={styles['mobile__price-info-inputs']}>
<input
className={styles['mobile__price-info-inputs__size-input--disabled']}
placeholder={isSingle ? '' : '예) 소 (1~2 인분)'}
disabled={isSingle}
/>
<div className={styles['mobile__price-info-inputs__price-input-box']}>
<input
type="number"
className={styles['mobile__price-info-inputs__price-input']}
value={singlePrice === 0 || singlePrice === null ? '' : singlePrice}
onChange={(e) => setSinglePrice(e.target.value === '' ? 0 : Number(e.target.value))}
/>
<p className={styles['mobile__price-info-inputs__price-input-won']}>원</p>
</div>
</div>
<button
type="button"
className={styles['mobile__cancle-button']}
>
<MobileDeleteIcon className={styles['mobile__cancle-icon']} />
</button>
</div>
)
: (optionPrices || []).map((input) => (
<div key={input.id} className={styles['mobile__price-info-input-box']}>
<div className={styles['mobile__price-info-inputs']}>
<input
className={styles['mobile__price-info-inputs__size-input']}
placeholder={isSingle ? '' : '예) 소 (1~2 인분)'}
value={input.option}
onChange={(e) => updatePriceInput(input.id, 'option', e.target.value)}
disabled={isSingle}
/>
<div className={styles['mobile__price-info-inputs__price-input-box']}>
<input
type="number"
className={styles['mobile__price-info-inputs__price-input']}
value={input.price === 0 ? '' : input.price}
onChange={(e) => updatePriceInput(input.id, 'price', e.target.value)}
/>
<p className={styles['mobile__price-info-inputs__price-input-won']}>원</p>
</div>
</div>
<button
type="button"
className={styles['mobile__cancle-button']}
onClick={() => deletePriceInput(input.id)}
>
<MobileDeleteIcon className={styles['mobile__cancle-icon']} />
</button>
<div className={styles['mobile__price-info-input-box']}>
<div className={styles['mobile__price-info-inputs']}>

<div className={styles['mobile__price-info-inputs__price-input-box']}>
<input
type="number"
className={styles['mobile__price-info-inputs__price-input']}
value={singlePrice === 0 || singlePrice === null ? '' : singlePrice}
onChange={(e) => setSinglePrice(e.target.value === '' ? 0 : Number(e.target.value))}
/>
<p className={styles['mobile__price-info-inputs__price-input-won']}>원</p>
</div>
))}
<button
type="button"
className={styles['mobile__add-price-button']}
onClick={addPriceInput}
>
<MobilePlusIcon className={styles['mobile__add-price-button__icon']} />
<span className={styles['mobile__add-price-button__text']}>가격 추가</span>
</button>
</div>
</div>
</>
)}
</div>
Expand Down Expand Up @@ -209,85 +93,23 @@ export default function MenuPrice({ isComplete }:MenuPriceProps) {
<>
<div className={styles.header}>
<div className={styles.header__title}>가격</div>
<div className={styles.header__condition}>
<div className={styles['header__condition-text']}>단일메뉴</div>
<button
type="button"
className={styles['header__condition-button']}
onClick={handleIsSingleMenu}
>
{isSingle ? (
<SelectedCheck className={styles['header__condition-icon']} />
) : (
<CheckCircleIcon className={styles['header__condition-icon']} />
)}
</button>
</div>

</div>
{isSingle
? (
<div className={styles['price-info-input-box']}>
<div className={styles['price-info-inputs']}>
<input
className={styles['price-info-inputs__size-input--disabled']}
placeholder={isSingle ? '' : '예) 소 (1~2 인분)'}
disabled={isSingle}
/>
<div className={styles['price-info-inputs__price-input-box']}>
<input
type="number"
className={styles['price-info-inputs__price-input']}
value={singlePrice === 0 || singlePrice === null ? '' : singlePrice}
onChange={(e) => setSinglePrice(e.target.value === '' ? 0 : Number(e.target.value))}
/>
<p className={styles['price-info-inputs__price-input-won']}>원</p>
</div>
</div>
<button
type="button"
className={styles['cancle-button']}
>
<DeleteIcon className={styles['cancle-button__icon']} />
</button>
</div>
)
: (optionPrices || []).map((input) => (
<div key={input.id} className={styles['price-info-input-box']}>
<div className={styles['price-info-inputs']}>
<input
className={styles['price-info-inputs__size-input']}
placeholder={isSingle ? '' : '예) 소 (1~2 인분)'}
value={input.option}
onChange={(e) => updatePriceInput(input.id, 'option', e.target.value)}
disabled={isSingle}
/>
<div className={styles['price-info-inputs__price-input-box']}>
<input
type="number"
className={styles['price-info-inputs__price-input']}
value={input.price === 0 ? '' : input.price}
onChange={(e) => updatePriceInput(input.id, 'price', e.target.value)}
/>
<p className={styles['price-info-inputs__price-input-won']}>원</p>
</div>
</div>
<button
type="button"
className={styles['cancle-button']}
onClick={() => deletePriceInput(input.id)}
>
<DeleteIcon className={styles['cancle-button__icon']} />
</button>

<div className={styles['price-info-input-box']}>
<div className={styles['price-info-inputs']}>
<div className={styles['price-info-inputs__price-input-box']}>
<input
type="number"
className={styles['price-info-inputs__price-input']}
value={singlePrice === 0 || singlePrice === null ? '' : singlePrice}
onChange={(e) => setSinglePrice(e.target.value === '' ? 0 : Number(e.target.value))}
/>
<p className={styles['price-info-inputs__price-input-won']}>원</p>
</div>
))}
<button
type="button"
className={styles['add-price-button']}
onClick={addPriceInput}
>
<PlusIcon className={styles['add-price-button__icon']} />
<div className={styles['add-price-button__text']}>가격 추가</div>
</button>
</div>

</div>
</>
)}
</div>
Expand Down
Loading

0 comments on commit 52961b5

Please sign in to comment.