Skip to content

Commit

Permalink
[리팩토링] 메뉴 추가 페이지 컴포넌트 분할 및 에러 분기 추가 (#351)
Browse files Browse the repository at this point in the history 
* refactor: 불필요한 조건부 렌더링 수정

* feat: mutation 에러 처리 관련 로직 추가

* refactor: lint warnning 제거

* refactor: type으로 변경

* refactor: import ordering 수정

* refactor: e.preventDefault 기능 추가

* refactor: priceInput PriceDisplay 기능 분할

* refactor: 불필요한  CSS 제거 및 내용 추가

* docs: 프리티어ignore 리스트 추가

* refactor: 불필요한 코드 제거

* refactor:  lint 에러 수정

* refactor: 불필요한 줄바꿈 제거

* refactor: 함수 네이밍 오타 수정

* refactor: 잘못된 이벤트 제거 및 addMenuMutation onError 추가
  • Loading branch information
@daepan
daepan authored Jun 17, 2024
1 parent 4073f48 commit cab9c6c
Show file tree
Hide file tree
Showing 17 changed files with 554 additions and 620 deletions.
1 change: 1 addition & 0 deletions .gitignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@ lerna-debug.log*
.env.development.local
.env.test.local
.env.production.local
.prettierrc

npm-debug.log*
yarn-debug.log*
Expand Down
23 changes: 12 additions & 11 deletions src/page/AddMenu/components/MenuName/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,17 +13,16 @@ export default function MenuName({ isComplete }: MenuNameProps) {
const { name, setName } = useAddMenuStore();
const { menuError } = useErrorMessageStore();

const handleNameChange = (e : React.ChangeEvent<HTMLInputElement>) => {
const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
e.preventDefault();
setName(e.target.value);
};

return (
<div>
{isMobile ? (
<div className={styles.mobile__container}>
<div className={styles.mobile__caption}>
메뉴명
</div>
<div className={styles.mobile__caption}>메뉴명</div>
{isComplete ? (
<span className={styles['mobile__name-text']}>{name}</span>
) : (
Expand All @@ -33,17 +32,17 @@ export default function MenuName({ isComplete }: MenuNameProps) {
[styles['mobile__name-input--error']]: menuError,
})}
placeholder="예) 불족발 + 막국수 저녁 SET"
onChange={handleNameChange}
onChange={(e) => handleNameChange(e)}
value={name}
/>
)}
{menuError && <span className={styles['error-message']}>{menuError}</span>}
{menuError && (
<span className={styles['error-message']}>{menuError}</span>
)}
</div>
) : (
<div className={styles.container}>
<div className={styles.caption}>
메뉴명
</div>
<div className={styles.caption}>메뉴명</div>
{isComplete ? (
<span className={styles['name-text']}>{name}</span>
) : (
Expand All @@ -53,11 +52,13 @@ export default function MenuName({ isComplete }: MenuNameProps) {
[styles['name-input--error']]: menuError,
})}
placeholder="예) 불족발 + 막국수 저녁 SET"
onChange={handleNameChange}
onChange={(e) => handleNameChange(e)}
value={name}
/>
)}
{menuError && <span className={styles['error-message']}>{menuError}</span>}
{menuError && (
<span className={styles['error-message']}>{menuError}</span>
)}
</div>
)}
</div>
Expand Down
320 changes: 0 additions & 320 deletions src/page/AddMenu/components/MenuPrice/MenuPrice.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,328 +4,8 @@
margin-top: 16px;
margin-bottom: 24px;
}

&__header {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}

&__header-title {
color: #175c8e;
font-size: 15px;
font-weight: 500;

&--complete {
color: #175c8e;
font-size: 15px;
font-weight: 500;
margin-bottom: 12px;
}
}

&__header-condition {
display: flex;
justify-content: center;
align-items: center;
gap: 9px;

&__text {
color: #a1a1a1;
text-align: right;
font-size: 14px;
font-weight: 400;
}

&__button {
background-color: white;
display: flex;
justify-content: center;
align-items: center;
}

&__icon {
width: 16px;
height: 16px;

&:hover {
cursor: pointer;
}
}
}

&__price-info-input-box {
margin-top: 10px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 4px;
}

&__price-info-inputs {
display: flex;
width: 100%;
align-items: center;
gap: 8px;

&__size-input {
width: 100%;
height: 35px;
border: 0.5px solid #898a8d;
padding: 8px;
box-sizing: border-box;

&--disabled {
width: 100%;
height: 35px;
border: 0.5px solid #898a8d;
background-color: #898a8d;
padding: 8px;
box-sizing: border-box;
}

&::placeholder {
color: #a1a1a1;
font-size: 13px;
font-weight: 400;
}
}

&__price-input-box {
position: relative;
width: 100%;
}

&__price-input {
width: 100%;
height: 35px;
border: 0.5px solid #898a8d;
padding: 8px;
box-sizing: border-box;
}

&__price-input-won {
box-sizing: border-box;
position: absolute;
right: 8px;
top: 32%;
color: #a1a1a1;
font-size: 13px;
font-weight: 400;
}
}

&__cancle-button {
background-color: white;
}

&__cancle-icon {
width: 16px;
height: 16px;
margin-left: 4px;

&:hover {
cursor: pointer;
}
}

&__add-price-button {
display: flex;
margin-top: 16px;
gap: 8px;
background-color: white;

&__icon {
width: 12px;
height: 12px;
}

&__text {
color: #f7941e;
font-size: 13px;
font-weight: 700;
}

&:hover {
cursor: pointer;
}
}

&__price-info-text {
display: flex;
align-items: center;
gap: 10px;
font-size: 15px;
font-weight: 500;
}
}

.container {
margin-top: 32px;
}

.header {
display: flex;
justify-content: space-between;
align-items: center;
height: 36px;

&__title {
color: #175c8e;
font-size: 24px;
font-weight: 500;
}

&__condition {
display: flex;
justify-content: center;
align-items: center;
gap: 17.5px;
}

&__condition-button {
background-color: white;
}

&__condition-text {
color: #a1a1a1;
text-align: right;
font-size: 20px;
font-weight: 400;

&:hover {
cursor: pointer;
}
}

&__condition-icon {
width: 21px;
height: 21px;

&:hover {
cursor: pointer;
}
}
}

.price-info-input-box {
margin-top: 24px;
display: flex;
gap: 16px;
align-items: center;
}

.price-info-inputs {
display: flex;
gap: 16px;
align-items: center;
width: 100%;

&__size-input {
box-sizing: border-box;
width: 335px;
height: 62px;
border: 0.5px solid #858585;
padding: 16px;
color: #252525;
font-size: 20px;
font-weight: 500;
outline: none;

&--disabled {
box-sizing: border-box;
width: 335px;
height: 62px;
border: 0.5px solid #858585;
padding: 16px;
background-color: #898a8d;
outline: none;
}

&::placeholder {
color: #a1a1a1;
font-size: 20px;
font-weight: 400;
}
}

&__price-input-box {
position: relative;
box-sizing: border-box;
width: 100%;
height: 62px;
border: 0.5px solid #858585;
}

&__price-input {
text-align: right;
box-sizing: border-box;
width: 95%;
height: 60px;
padding: 16px;
color: #252525;
font-size: 20px;
font-weight: 500;
border: 0;
outline: none;
}

&__price-input-won {
position: absolute;
top: 32%;
right: 10px;
color: #a1a1a1;
font-size: 20px;
font-weight: 400;
}
}

.cancle-button {
width: 24px;
height: 24px;
background-color: white;

&__icon {
width: 24px;
height: 24px;

&:hover {
cursor: pointer;
}
}
}

.add-price-button {
display: flex;
align-items: center;
margin-top: 16px;
gap: 8px;
height: 28px;
background-color: white;

&__icon {
width: 24px;
height: 24px;
}

&__text {
display: flex;
align-items: center;
color: #f7941e;
font-size: 20px;
font-weight: 700;
}

&:hover {
cursor: pointer;
}
}

.price-info-text {
display: flex;
align-items: center;
gap: 10px;
font-size: 20px;
font-weight: 500;
}
Loading

0 comments on commit cab9c6c

Please sign in to comment.