From 7ba6413566dabcbb7ac496f080920d82a629718b Mon Sep 17 00:00:00 2001 From: dooohun Date: Sun, 29 Oct 2023 16:15:36 +0900 Subject: [PATCH 01/50] =?UTF-8?q?feat:=20=EC=82=AC=EC=A7=84=20=EC=97=85?= =?UTF-8?q?=EB=A1=9C=EB=93=9C=20=EB=B0=8F=20=EB=AF=B8=EB=A6=AC=EB=B3=B4?= =?UTF-8?q?=EA=B8=B0=20=EA=B8=B0=EB=8A=A5=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../view/PC/StoreRegistrationPC.module.scss | 14 +++- src/page/StoreRegistration/view/PC/index.tsx | 68 +++++++++++++++---- 2 files changed, 66 insertions(+), 16 deletions(-) diff --git a/src/page/StoreRegistration/view/PC/StoreRegistrationPC.module.scss b/src/page/StoreRegistration/view/PC/StoreRegistrationPC.module.scss index e3a4c839..5e64c375 100644 --- a/src/page/StoreRegistration/view/PC/StoreRegistrationPC.module.scss +++ b/src/page/StoreRegistration/view/PC/StoreRegistrationPC.module.scss @@ -77,7 +77,7 @@ align-items: center; gap: 16px; - &__label { + &__title { display: block; font-size: 18px; margin-bottom: 8px; @@ -92,6 +92,16 @@ height: 93px; border: 1px solid #d2dae2; padding: 53px 80px 54px; + cursor: pointer; + } + + &__upload-file { + display: none; + } + + &__main-menu { + width: 370px; + height: 202px; } &__cutlery-cross { @@ -104,7 +114,7 @@ position: relative; } - &__title { + &__text { text-align: center; font-size: 14px; display: block; diff --git a/src/page/StoreRegistration/view/PC/index.tsx b/src/page/StoreRegistration/view/PC/index.tsx index 98aa2c2e..f81f1d78 100644 --- a/src/page/StoreRegistration/view/PC/index.tsx +++ b/src/page/StoreRegistration/view/PC/index.tsx @@ -2,7 +2,7 @@ import { ReactComponent as Memo } from 'assets/svg/StoreRegistration/memo.svg'; import { ReactComponent as Logo } from 'assets/svg/auth/koin-logo.svg'; import { ReactComponent as Cutlery } from 'assets/svg/StoreRegistration/cutlery.svg'; -import { useEffect } from 'react'; +import { useEffect, useRef, useState } from 'react'; import useStepStore from 'store/useStepStore'; import Copyright from 'component/common/Copyright'; import CustomButton from 'page/Auth/Signup/component/CustomButton'; @@ -41,6 +41,23 @@ export default function StoreRegistrationPC() { setTrue: openConfirmPopup, setFalse: closeConfirmPopup, } = useBooleanState(false); + const [imgFile, setImgFile] = useState(''); + const imgRef = useRef(null); + + const saveImgFile = () => { + const file = imgRef.current?.files?.[0]; + const reader = new FileReader(); + + reader.onloadend = () => { + const { result } = reader; + if (typeof result === 'string') { + setImgFile(result); + } + }; + if (file) { + reader.readAsDataURL(file); + } + }; // step 1일 때 그리고 모바일에서 PC로 변경 될 때 카테고리 모달을 자동으로 켜줌 useEffect(() => { @@ -78,18 +95,37 @@ export default function StoreRegistrationPC() {
-
+
- 대표 이미지 -
- - 클릭하여 이미지를 등록해주세요. -
+ 대표 이미지 +
- 카테고리 + 카테고리
- +
@@ -105,9 +141,13 @@ export default function StoreRegistrationPC() {
- 가게명 + 가게명
- +
@@ -118,13 +158,13 @@ export default function StoreRegistrationPC() { isOpen={showSearchStore} onCancel={closeSearchStore} > - +
- 운영시간 + 운영시간
00:00 ~ 24:00 @@ -165,7 +205,7 @@ export default function StoreRegistrationPC() { />
-
+
From 68da4e845892cd4e0edc71f088d71245b3b18b6b Mon Sep 17 00:00:00 2001 From: dooohun Date: Tue, 31 Oct 2023 23:06:10 +0900 Subject: [PATCH 02/50] =?UTF-8?q?feat:=20=EB=AA=A8=EB=8B=AC=EC=9D=98=20?= =?UTF-8?q?=EC=A0=84=EC=97=AD=EC=83=81=ED=83=9C=EA=B4=80=EB=A6=AC=20?= =?UTF-8?q?=EB=B3=80=EC=88=98=20=EC=83=9D=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/store/modalStore.ts | 40 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 40 insertions(+) create mode 100644 src/store/modalStore.ts diff --git a/src/store/modalStore.ts b/src/store/modalStore.ts new file mode 100644 index 00000000..f11ce67c --- /dev/null +++ b/src/store/modalStore.ts @@ -0,0 +1,40 @@ +import { create } from 'zustand'; +import WEEK from 'utils/constant/week'; + +interface ModalStore { + categoryState: string | undefined, + searchStoreState: string | undefined, + openTimeState: { [key in typeof WEEK[number]]: string }, + closeTimeState: { [key in typeof WEEK[number]]: string }, + storeClosedState: { [key: string]: boolean }, + setCategoryState: (state: string) => void, + setSearchStoreState: (state: string) => void, + setOpenTimeState: (state: { [key in typeof WEEK[number]]: string }) => void, + setCloseTimeState: (state: { [key in typeof WEEK[number]]: string }) => void, + setStoreClosedState: (state: { [key : string]: boolean }) => void, +} + +const initialOperatingTime = { + 월: '00:00', + 화: '00:00', + 수: '00:00', + 목: '00:00', + 금: '00:00', + 토: '00:00', + 일: '00:00', +}; + +const useModalStore = create((set) => ({ + categoryState: undefined, + searchStoreState: undefined, + openTimeState: initialOperatingTime, + closeTimeState: initialOperatingTime, + storeClosedState: { '': false }, + setCategoryState: (state) => set({ categoryState: state }), + setSearchStoreState: (state) => set({ searchStoreState: state }), + setOpenTimeState: (state) => set(() => ({ openTimeState: state })), + setCloseTimeState: (state) => set(() => ({ closeTimeState: state })), + setStoreClosedState: (state) => set({ storeClosedState: state }), +})); + +export default useModalStore; From e889a87e85cc1903ee0753647fecbb76b0729c00 Mon Sep 17 00:00:00 2001 From: dooohun Date: Thu, 9 Nov 2023 17:28:00 +0900 Subject: [PATCH 03/50] =?UTF-8?q?refactor:=20=EC=83=81=EC=A0=90=20?= =?UTF-8?q?=ED=9C=B4=EB=AC=B4=EC=9D=BC=EC=9D=98=20=EC=B4=88=EA=B8=B0=20?= =?UTF-8?q?=EC=83=81=ED=83=9C=20=EA=B0=92=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/store/modalStore.ts | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/src/store/modalStore.ts b/src/store/modalStore.ts index f11ce67c..fdd577af 100644 --- a/src/store/modalStore.ts +++ b/src/store/modalStore.ts @@ -24,12 +24,22 @@ const initialOperatingTime = { 일: '00:00', }; +const initialStoreClosed = { + 월: false, + 화: false, + 수: false, + 목: false, + 금: false, + 토: false, + 일: false, +}; + const useModalStore = create((set) => ({ categoryState: undefined, searchStoreState: undefined, openTimeState: initialOperatingTime, closeTimeState: initialOperatingTime, - storeClosedState: { '': false }, + storeClosedState: initialStoreClosed, setCategoryState: (state) => set({ categoryState: state }), setSearchStoreState: (state) => set({ searchStoreState: state }), setOpenTimeState: (state) => set(() => ({ openTimeState: state })), From 034daf9c9745b56207ddb3033a50dd31348d6488 Mon Sep 17 00:00:00 2001 From: dooohun Date: Thu, 9 Nov 2023 17:33:34 +0900 Subject: [PATCH 04/50] =?UTF-8?q?feat:=20=EA=B0=80=EA=B2=8C=EB=AA=85?= =?UTF-8?q?=EC=9D=84=20=EC=A0=84=EC=97=AD=EB=B3=80=EC=88=98=EB=A1=9C=20?= =?UTF-8?q?=ED=95=A0=EB=8B=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../component/Modal/ConfirmStore/index.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/page/StoreRegistration/component/Modal/ConfirmStore/index.tsx b/src/page/StoreRegistration/component/Modal/ConfirmStore/index.tsx index e5058ee8..4ceca724 100644 --- a/src/page/StoreRegistration/component/Modal/ConfirmStore/index.tsx +++ b/src/page/StoreRegistration/component/Modal/ConfirmStore/index.tsx @@ -1,3 +1,4 @@ +import useModalStore from 'store/modalStore'; import styles from './ConfirmStore.module.scss'; interface ConfirmStoreProps { @@ -6,6 +7,7 @@ interface ConfirmStoreProps { } export default function ConfirmStore({ open, onCancel }: ConfirmStoreProps) { + const { setSearchStoreState } = useModalStore(); if (!open) return null; return (
@@ -19,7 +21,10 @@ export default function ConfirmStore({ open, onCancel }: ConfirmStoreProps) { From 2fd2b356d96486493e709ff59a096fcf1b5e89bb Mon Sep 17 00:00:00 2001 From: dooohun Date: Thu, 9 Nov 2023 17:34:01 +0900 Subject: [PATCH 05/50] =?UTF-8?q?feat:=20=EC=B9=B4=ED=85=8C=EA=B3=A0?= =?UTF-8?q?=EB=A6=AC=EB=AA=85=EC=9D=84=20=EC=A0=84=EC=97=AD=20=EB=B3=80?= =?UTF-8?q?=EC=88=98=EC=97=90=20=ED=95=A0=EB=8B=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../StoreRegistration/component/Modal/Category/index.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/page/StoreRegistration/component/Modal/Category/index.tsx b/src/page/StoreRegistration/component/Modal/Category/index.tsx index c954534b..c3151b1c 100644 --- a/src/page/StoreRegistration/component/Modal/Category/index.tsx +++ b/src/page/StoreRegistration/component/Modal/Category/index.tsx @@ -1,11 +1,14 @@ import useStoreCategory from 'query/storeCategory'; import { useState } from 'react'; import cn from 'utils/ts/className'; +import useModalStore from 'store/modalStore'; import styles from './Category.module.scss'; export default function Category() { const [selectedCategory, setSelectedCategory] = useState(''); const { categoryList } = useStoreCategory(); + const { setCategoryState } = useModalStore(); + return (
{categoryList?.shop_categories.filter((_, index) => index > 0).map((category) => ( @@ -15,7 +18,10 @@ export default function Category() { [styles['category__menu--selected']]: category.name === selectedCategory, })} type="button" - onClick={() => setSelectedCategory(category.name)} + onClick={() => { + setSelectedCategory(category.name); + setCategoryState(category.name); + }} key={category.id} > From 5833820fe0f1c5ad6e18c656e536e81f516c5c0e Mon Sep 17 00:00:00 2001 From: dooohun Date: Thu, 9 Nov 2023 17:37:39 +0900 Subject: [PATCH 06/50] =?UTF-8?q?feat:=20=EC=9A=B4=EC=98=81=20=EC=8B=9C?= =?UTF-8?q?=EA=B0=84=EA=B0=92=EC=9D=84=20=EC=A0=84=EC=97=AD=20=EC=83=81?= =?UTF-8?q?=ED=83=9C=EC=97=90=20=ED=95=A0=EB=8B=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Modal/OperateTimeMobile/index.tsx | 4 +- .../OperateTimePC/OperateTimePC.module.scss | 4 ++ .../component/Modal/OperateTimePC/index.tsx | 29 ++++++-- .../TimePicker/TimePicker.module.scss | 8 +++ .../component/TimePicker/index.tsx | 66 +++++++++++++++---- 5 files changed, 93 insertions(+), 18 deletions(-) diff --git a/src/page/StoreRegistration/component/Modal/OperateTimeMobile/index.tsx b/src/page/StoreRegistration/component/Modal/OperateTimeMobile/index.tsx index aaafaba0..e794528d 100644 --- a/src/page/StoreRegistration/component/Modal/OperateTimeMobile/index.tsx +++ b/src/page/StoreRegistration/component/Modal/OperateTimeMobile/index.tsx @@ -37,9 +37,9 @@ export default function OperateTimeMobile({ isOpen, closeModal }: OperateTimeMob {day} - + {' ~ '} - + diff --git a/src/page/StoreRegistration/component/Modal/OperateTimePC/OperateTimePC.module.scss b/src/page/StoreRegistration/component/Modal/OperateTimePC/OperateTimePC.module.scss index 75650607..5bfbcbce 100644 --- a/src/page/StoreRegistration/component/Modal/OperateTimePC/OperateTimePC.module.scss +++ b/src/page/StoreRegistration/component/Modal/OperateTimePC/OperateTimePC.module.scss @@ -18,6 +18,10 @@ justify-content: center; align-items: center; height: 100%; + + &--selected { + color: #c5c5c5; + } } &__checkbox { diff --git a/src/page/StoreRegistration/component/Modal/OperateTimePC/index.tsx b/src/page/StoreRegistration/component/Modal/OperateTimePC/index.tsx index 836142aa..5d8de4bf 100644 --- a/src/page/StoreRegistration/component/Modal/OperateTimePC/index.tsx +++ b/src/page/StoreRegistration/component/Modal/OperateTimePC/index.tsx @@ -1,8 +1,18 @@ import TimePicker from 'page/StoreRegistration/component/TimePicker'; import WEEK from 'utils/constant/week'; +import useModalStore from 'store/modalStore'; +import cn from 'utils/ts/className'; import styles from './OperateTimePC.module.scss'; export default function OperateTimePC() { + const { storeClosedState, setStoreClosedState } = useModalStore(); + + const handleChangeStoreClosed = (day: string) => { + setStoreClosedState({ + ...storeClosedState, + [day]: !storeClosedState[day], + }); + }; return ( @@ -16,12 +26,23 @@ export default function OperateTimePC() { {WEEK.map((day) => ( - + - ))} diff --git a/src/page/StoreRegistration/component/TimePicker/TimePicker.module.scss b/src/page/StoreRegistration/component/TimePicker/TimePicker.module.scss index 6c512712..13e2980a 100644 --- a/src/page/StoreRegistration/component/TimePicker/TimePicker.module.scss +++ b/src/page/StoreRegistration/component/TimePicker/TimePicker.module.scss @@ -14,6 +14,10 @@ &:focus { outline: none; } + + &--selected { + color: #c5c5c5; + } } &__minute { @@ -25,6 +29,10 @@ &:focus { outline: none; } + + &--selected { + color: #c5c5c5; + } } } diff --git a/src/page/StoreRegistration/component/TimePicker/index.tsx b/src/page/StoreRegistration/component/TimePicker/index.tsx index 1ef17201..0eab2416 100644 --- a/src/page/StoreRegistration/component/TimePicker/index.tsx +++ b/src/page/StoreRegistration/component/TimePicker/index.tsx @@ -1,18 +1,32 @@ +/* eslint-disable react-hooks/exhaustive-deps */ import { useState, useRef, useEffect, MouseEvent, } from 'react'; +import useModalStore from 'store/modalStore'; +import WEEK from 'utils/constant/week'; +import cn from 'utils/ts/className'; import styles from './TimePicker.module.scss'; +type Weekday = typeof WEEK[number]; + +interface TimerPickerProps { + operatingDay: Weekday; + isOpenTimePicker: boolean; +} + const hours: number[] = Array.from({ length: 24 }, (_, i) => i); const minutes: number[] = Array.from({ length: 12 }, (_, i) => i * 5); -export default function TimePicker() { +export default function TimePicker({ operatingDay, isOpenTimePicker } : TimerPickerProps) { const dropMenuRef = useRef(null); const [isOpen, setIsOpen] = useState(false); const [time, setTime] = useState({ hour: '00', minute: '00', }); + const { + openTimeState, closeTimeState, storeClosedState, setOpenTimeState, setCloseTimeState, + } = useModalStore(); useEffect(() => { const handleClickOutside = (e: Event) => { @@ -27,35 +41,63 @@ export default function TimePicker() { setIsOpen(!isOpen); } + function handleChangeOperateTime() { + if (isOpenTimePicker) { + setOpenTimeState({ + ...openTimeState, + [operatingDay]: `${time.hour}:${time.minute}`, + }); + } else { + setCloseTimeState({ + ...closeTimeState, + [operatingDay]: `${time.hour}:${time.minute}`, + }); + } + } + function handleClickTimeChangeButton(e: MouseEvent) { - const selectedTime = parseInt(e.currentTarget.value, 10); + const selectedTime = Number(e.currentTarget.value); const selectedId = e.currentTarget.id; - // 선택한 시간 또는 분을 텍스트로 업데이트 - setTime({ - ...time, - [selectedId]: selectedTime.toString().padStart(2, '0'), - }); + if (selectedId === 'hour') { + setTime({ + ...time, + hour: selectedTime.toString().padStart(2, '0'), + }); + } else if (selectedId === 'minute') { + setTime({ + ...time, + minute: selectedTime.toString().padStart(2, '0'), + }); + } } + useEffect(() => { + handleChangeOperateTime(); + }, [time, storeClosedState]); return (
- : - {isOpen && ( + {isOpen && !storeClosedState[operatingDay] && (
{hours.map((hour) => ( From b424831c2715c70626ec37711ae93842dbcefd15 Mon Sep 17 00:00:00 2001 From: dooohun Date: Thu, 9 Nov 2023 17:39:44 +0900 Subject: [PATCH 07/50] =?UTF-8?q?feat:=20=EC=A0=84=EC=97=AD=20=EB=B3=80?= =?UTF-8?q?=EC=88=98=EC=9D=B8=20=EA=B0=80=EA=B2=8C=20=EC=9A=B4=EC=98=81=20?= =?UTF-8?q?=EC=8B=9C=EA=B0=84=EC=9D=84=20=EC=B6=9C=EB=A0=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../view/PC/StoreRegistrationPC.module.scss | 2 +- src/page/StoreRegistration/view/PC/index.tsx | 50 ++++++++++++++++++- 2 files changed, 50 insertions(+), 2 deletions(-) diff --git a/src/page/StoreRegistration/view/PC/StoreRegistrationPC.module.scss b/src/page/StoreRegistration/view/PC/StoreRegistrationPC.module.scss index 5e64c375..9f4cb841 100644 --- a/src/page/StoreRegistration/view/PC/StoreRegistrationPC.module.scss +++ b/src/page/StoreRegistration/view/PC/StoreRegistrationPC.module.scss @@ -144,7 +144,7 @@ display: flex; align-items: center; width: 272px; - height: 48px; + height: auto; font-size: 16px; color: #858585; } diff --git a/src/page/StoreRegistration/view/PC/index.tsx b/src/page/StoreRegistration/view/PC/index.tsx index f81f1d78..f935dd2a 100644 --- a/src/page/StoreRegistration/view/PC/index.tsx +++ b/src/page/StoreRegistration/view/PC/index.tsx @@ -15,6 +15,8 @@ import ConfirmPopup from 'page/StoreRegistration/component/ConfirmPopup'; import useMediaQuery from 'utils/hooks/useMediaQuery'; import useBooleanState from 'utils/hooks/useBooleanState'; import CustomModal from 'component/common/CustomModal'; +import useModalStore from 'store/modalStore'; +import WEEK from 'utils/constant/week'; import styles from './StoreRegistrationPC.module.scss'; export default function StoreRegistrationPC() { @@ -59,6 +61,34 @@ export default function StoreRegistrationPC() { } }; + const { + categoryState, searchStoreState, openTimeState, closeTimeState, storeClosedState, + } = useModalStore(); + + type OperateTimeProps = { [key: string]: string }; + const [operateTimeState, setOperateTimeState] = useState({}); + // case1 + const closeDay = WEEK.filter((day) => storeClosedState[day] === true); + const openDay = WEEK.filter((day) => storeClosedState[day] === false)[0]; + let operatingTimeCase; + useEffect(() => { + setOperateTimeState((prevOperateTimeState) => ({ + ...prevOperateTimeState, + 휴일: `매주 ${WEEK.filter((day) => storeClosedState[day] === true).join('요일 ')}요일 정기 휴무`, + 시간: `${openTimeState[openDay]} ~ ${closeTimeState[openDay]}`, + })); + }, [openTimeState, closeTimeState]); + + WEEK.forEach((day) => { + operateTimeState[day] = storeClosedState[day] ? `매주 ${day} 정기 휴무` : `${openTimeState[day]} ~ ${closeTimeState[day]}`; + }); + + if (new Set(Object.values(openTimeState)).size > 2) { + operatingTimeCase = 2; + } else { + operatingTimeCase = 1; + } + // step 1일 때 그리고 모바일에서 PC로 변경 될 때 카테고리 모달을 자동으로 켜줌 useEffect(() => { if (!isMobile && step === 1) { @@ -124,6 +154,7 @@ export default function StoreRegistrationPC() { @@ -146,6 +177,7 @@ export default function StoreRegistrationPC() { @@ -167,7 +199,23 @@ export default function StoreRegistrationPC() { 운영시간
- 00:00 ~ 24:00 +
+ {operatingTimeCase === 1 ? ( + <> +
+ {closeDay.length === 0 ? '' : operateTimeState['휴일']} +
+
+ {operateTimeState['시간']} +
+ + ) : WEEK.map((day) => ( +
+ {storeClosedState[day] ? `${operateTimeState[day]}` : `${day} : ${operateTimeState[day]}`} +
+ ))} + +
From caba70895e254d83712d1e7ffd06e1e2de7aa7d0 Mon Sep 17 00:00:00 2001 From: dooohun Date: Sun, 12 Nov 2023 21:05:27 +0900 Subject: [PATCH 08/50] =?UTF-8?q?feat:=20=EC=83=81=EC=A0=90=20api=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/shop/index.ts | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/src/api/shop/index.ts b/src/api/shop/index.ts index f3e4a859..430cef6a 100644 --- a/src/api/shop/index.ts +++ b/src/api/shop/index.ts @@ -1,6 +1,8 @@ import { MyShopList, MyShopInfoRes, MyShopParam } from 'model/shopInfo/myShopInfo'; import { MenuInfoRes } from 'model/shopInfo/menuCategory'; +import { AllShopList } from 'model/shopInfo/allShopInfo'; import { accessClient } from 'api'; +import { OwnerShop } from 'model/shopInfo/ownerShop'; export const getMyShopList = async () => { const { data } = await accessClient.get('/owner/shops'); @@ -16,3 +18,10 @@ export const getMenuInfoList = async (param: MyShopParam) => { const { data } = await accessClient.get(`/owner/shops/${param.id}/menus`); return MenuInfoRes.parse(data); }; + +export const getAllShopList = async () => { + const { data } = await accessClient.get('/shops'); + return AllShopList.parse(data); +}; + +export const postRegisterShop = (data: OwnerShop) => accessClient.post('/owner/shops', data); From b68ab9c2ff2a0565e2b253d670e69bdec50cb167 Mon Sep 17 00:00:00 2001 From: dooohun Date: Sun, 12 Nov 2023 21:08:01 +0900 Subject: [PATCH 09/50] =?UTF-8?q?feat:=20=EA=B3=B5=EC=9A=A9=EB=AA=A8?= =?UTF-8?q?=EB=8B=AC=EC=97=90=20hasOverflow=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 스크롤 가능할 때 헤더가 따라오도록 sticky 속성 추가 - overflow 될 때 스크롤바 삭제 --- .../common/CustomModal/CustomModal.module.scss | 12 ++++++++++++ src/component/common/CustomModal/index.tsx | 12 ++++++++++-- 2 files changed, 22 insertions(+), 2 deletions(-) diff --git a/src/component/common/CustomModal/CustomModal.module.scss b/src/component/common/CustomModal/CustomModal.module.scss index 167edeb9..6ac5064c 100644 --- a/src/component/common/CustomModal/CustomModal.module.scss +++ b/src/component/common/CustomModal/CustomModal.module.scss @@ -16,8 +16,15 @@ align-items: center; width: 430px; background-color: #ffffff; + overflow: auto; + + &--selected { + overflow: visible; + } &__header { + position: sticky; + top: 0; display: flex; align-items: center; justify-content: space-between; @@ -25,6 +32,7 @@ height: 30px; background-color: #175c8e; padding: 24px 16px; + z-index: 3; } &__title { @@ -46,6 +54,10 @@ width: 366px; margin-bottom: 40px; } + + &::-webkit-scrollbar { + display: none; + } } .content { diff --git a/src/component/common/CustomModal/index.tsx b/src/component/common/CustomModal/index.tsx index 89fca10d..2861bc5f 100644 --- a/src/component/common/CustomModal/index.tsx +++ b/src/component/common/CustomModal/index.tsx @@ -1,6 +1,7 @@ import { ReactComponent as XClose } from 'assets/svg/StoreRegistration/close-x.svg'; import CustomButton from 'page/Auth/Signup/component/CustomButton'; import { createPortal } from 'react-dom'; +import cn from 'utils/ts/className'; import styles from './CustomModal.module.scss'; interface CustomModalProps { @@ -9,17 +10,24 @@ interface CustomModalProps { height: string; hasFooter: boolean; isOpen: boolean; + hasOverflow?: boolean; onCancel: () => void; children: React.ReactNode } export default function CustomModal({ - buttonText = '', title, height, hasFooter, isOpen, onCancel, children, + buttonText = '', title, height, hasFooter, isOpen, hasOverflow, onCancel, children, }: CustomModalProps) { if (!isOpen) return null; return createPortal(
-
+
{title} Date: Sun, 12 Nov 2023 21:09:25 +0900 Subject: [PATCH 10/50] =?UTF-8?q?feat:=20=EB=AA=A8=EB=93=A0=20=EC=9D=8C?= =?UTF-8?q?=EC=8B=9D=EC=A0=90=20=EC=83=81=EC=A0=90=20=EC=8A=A4=ED=82=A4?= =?UTF-8?q?=EB=A7=88=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/model/shopInfo/allShopInfo.ts | 28 ++++++++++++++++++++++++++++ 1 file changed, 28 insertions(+) create mode 100644 src/model/shopInfo/allShopInfo.ts diff --git a/src/model/shopInfo/allShopInfo.ts b/src/model/shopInfo/allShopInfo.ts new file mode 100644 index 00000000..94183fe6 --- /dev/null +++ b/src/model/shopInfo/allShopInfo.ts @@ -0,0 +1,28 @@ +import z from 'zod'; + +const Open = z.object({ + day_of_week: z.string(), + closed: z.boolean(), + open_time: z.string().nullable(), + close_time: z.string().nullable(), +}); + +export const Shop = z.object({ + id: z.number(), + name: z.string(), + phone: z.string(), + delivery: z.boolean(), + pay_bank: z.boolean(), + pay_card: z.boolean(), + open: z.array(Open), + category_ids: z.array(z.number()), +}); + +export type Shop = z.infer; + +export const AllShopList = z.object({ + count: z.number(), + shops: z.array(Shop), +}); + +export type AllShopList = z.infer; From 129a019b81ae86130895d483e22f8b8b19ce2080 Mon Sep 17 00:00:00 2001 From: dooohun Date: Sun, 12 Nov 2023 21:10:09 +0900 Subject: [PATCH 11/50] =?UTF-8?q?feat:=20=EC=83=81=EC=A0=90=20=EB=93=B1?= =?UTF-8?q?=EB=A1=9D=20=EC=8B=9C=20=ED=95=84=EC=9A=94=ED=95=9C=20=EC=82=AC?= =?UTF-8?q?=EC=9E=A5=EB=8B=98=20=EC=83=81=EC=A0=90=20=EC=8A=A4=ED=82=A4?= =?UTF-8?q?=EB=A7=88=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/model/shopInfo/ownerShop.ts | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 src/model/shopInfo/ownerShop.ts diff --git a/src/model/shopInfo/ownerShop.ts b/src/model/shopInfo/ownerShop.ts new file mode 100644 index 00000000..1a7fe023 --- /dev/null +++ b/src/model/shopInfo/ownerShop.ts @@ -0,0 +1,11 @@ +import z from 'zod'; +import { Shop } from './allShopInfo'; + +export const OwnerShop = Shop.omit({ id: true }).extend({ + address: z.string(), + description: z.string(), + delivery_price: z.string(), + image_urls: z.array(z.string()), +}); + +export type OwnerShop = z.infer; From 6eb455a5ecf312fd37ddfa0c3d04eb9825bcfa92 Mon Sep 17 00:00:00 2001 From: dooohun Date: Sun, 12 Nov 2023 21:11:36 +0900 Subject: [PATCH 12/50] =?UTF-8?q?feat:=20useAllShops=20=EC=BB=A4=EC=8A=A4?= =?UTF-8?q?=ED=85=80=20=ED=9B=85=EC=9D=84=20=EC=83=9D=EC=84=B1=ED=95=98?= =?UTF-8?q?=EC=97=AC=20=EB=AA=A8=EB=93=A0=20=EC=83=81=EC=A0=90=20=EB=AA=A9?= =?UTF-8?q?=EB=A1=9D=EC=9D=84=20=EA=B0=80=EC=A0=B8=EC=98=A4=EB=8A=94=20?= =?UTF-8?q?=EA=B8=B0=EB=8A=A5=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/query/shops.ts | 9 +++++++++ 1 file changed, 9 insertions(+) create mode 100644 src/query/shops.ts diff --git a/src/query/shops.ts b/src/query/shops.ts new file mode 100644 index 00000000..238dd073 --- /dev/null +++ b/src/query/shops.ts @@ -0,0 +1,9 @@ +import { useQuery } from '@tanstack/react-query'; +import { getAllShopList } from 'api/shop'; + +const useAllShops = () => { + const { data: shopList } = useQuery(['allshops'], getAllShopList); + return { shopList }; +}; + +export default useAllShops; From 7f5022b4f790f1695db006e42c8f730102def650 Mon Sep 17 00:00:00 2001 From: dooohun Date: Sun, 12 Nov 2023 21:12:25 +0900 Subject: [PATCH 13/50] =?UTF-8?q?chore:=20"import/prefer-default-export"?= =?UTF-8?q?=20=EA=B7=9C=EC=B9=99=EC=9D=84=20=EB=B9=84=ED=99=9C=EC=84=B1?= =?UTF-8?q?=ED=99=94=ED=95=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .eslintrc.json | 1 + 1 file changed, 1 insertion(+) diff --git a/.eslintrc.json b/.eslintrc.json index 8c50b063..4762015d 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -30,6 +30,7 @@ "react/jsx-props-no-spreading": "off", "react/require-default-props": "off", "@typescript-eslint/no-redeclare" : "off", + "import/prefer-default-export": "off", "no-restricted-imports": [ "error", { From 225910ff6d2379dbf5074f4e4b180ca2b8af8de7 Mon Sep 17 00:00:00 2001 From: dooohun Date: Sun, 12 Nov 2023 21:16:46 +0900 Subject: [PATCH 14/50] =?UTF-8?q?refactor:=20modalStore=EB=A5=BC=20?= =?UTF-8?q?=EC=A1=B0=EA=B1=B4=EC=97=90=20=EB=A7=9E=EA=B2=8C=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - categoryState를 배열로 수정 - 운영시간 값에 null 추가 --- src/store/modalStore.ts | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/src/store/modalStore.ts b/src/store/modalStore.ts index fdd577af..8ecaf55a 100644 --- a/src/store/modalStore.ts +++ b/src/store/modalStore.ts @@ -2,15 +2,15 @@ import { create } from 'zustand'; import WEEK from 'utils/constant/week'; interface ModalStore { - categoryState: string | undefined, - searchStoreState: string | undefined, - openTimeState: { [key in typeof WEEK[number]]: string }, - closeTimeState: { [key in typeof WEEK[number]]: string }, + categoryState: [string, number]; + searchStoreState: string, + openTimeState: { [key in typeof WEEK[number]]: string | null }, + closeTimeState: { [key in typeof WEEK[number]]: string | null }, storeClosedState: { [key: string]: boolean }, - setCategoryState: (state: string) => void, + setCategoryState: (state: [string, number]) => void, setSearchStoreState: (state: string) => void, - setOpenTimeState: (state: { [key in typeof WEEK[number]]: string }) => void, - setCloseTimeState: (state: { [key in typeof WEEK[number]]: string }) => void, + setOpenTimeState: (state: { [key in typeof WEEK[number]]: string | null }) => void, + setCloseTimeState: (state: { [key in typeof WEEK[number]]: string | null }) => void, setStoreClosedState: (state: { [key : string]: boolean }) => void, } @@ -35,8 +35,8 @@ const initialStoreClosed = { }; const useModalStore = create((set) => ({ - categoryState: undefined, - searchStoreState: undefined, + categoryState: ['', 0], + searchStoreState: '', openTimeState: initialOperatingTime, closeTimeState: initialOperatingTime, storeClosedState: initialStoreClosed, From 9045926289dff038a613c8f2c7c369a12012f209 Mon Sep 17 00:00:00 2001 From: dooohun Date: Sun, 12 Nov 2023 21:17:38 +0900 Subject: [PATCH 15/50] =?UTF-8?q?feat:=20=EC=9A=B4=EC=98=81=EC=8B=9C?= =?UTF-8?q?=EA=B0=84=20=EB=A1=9C=EC=A7=81=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../TimeSelection/TimeSelection.module.scss | 63 +++++++++++++++ .../component/Modal/TimeSelection/index.tsx | 44 ++++++++++ .../TimePicker/TimePicker.module.scss | 64 --------------- .../component/TimePicker/index.tsx | 80 +++++++------------ 4 files changed, 138 insertions(+), 113 deletions(-) create mode 100644 src/page/StoreRegistration/component/Modal/TimeSelection/TimeSelection.module.scss create mode 100644 src/page/StoreRegistration/component/Modal/TimeSelection/index.tsx diff --git a/src/page/StoreRegistration/component/Modal/TimeSelection/TimeSelection.module.scss b/src/page/StoreRegistration/component/Modal/TimeSelection/TimeSelection.module.scss new file mode 100644 index 00000000..943c9a1f --- /dev/null +++ b/src/page/StoreRegistration/component/Modal/TimeSelection/TimeSelection.module.scss @@ -0,0 +1,63 @@ +.content { + position: absolute; + display: flex; + border: 1px solid #111111; + width: 150px; + height: 230px; + z-index: 2; + top: 25px; + left: 50; + + &__hour-list { + display: flex; + flex-direction: column; + align-items: center; + width: 75px; + height: 230px; + overflow: scroll; + + &::-webkit-scrollbar { + display: none; + } + } + + &__hour-item { + text-align: center; + width: 100%; + padding: 10px; + background-color: #ffffff; + cursor: pointer; + + &:hover { + background-color: #175c8e; + color: #ffffff; + } + } + + &__minute-list { + display: flex; + flex-direction: column; + align-items: center; + width: 75px; + height: 230px; + list-style-type: none; + overflow: scroll; + + &::-webkit-scrollbar { + display: none; + } + } + + &__minute-item { + text-align: center; + width: 100%; + padding: 10px; + background-color: #ffffff; + cursor: pointer; + + &:hover { + background-color: #175c8e; + color: #ffffff; + } + } +} diff --git a/src/page/StoreRegistration/component/Modal/TimeSelection/index.tsx b/src/page/StoreRegistration/component/Modal/TimeSelection/index.tsx new file mode 100644 index 00000000..3c56fdb8 --- /dev/null +++ b/src/page/StoreRegistration/component/Modal/TimeSelection/index.tsx @@ -0,0 +1,44 @@ +import { MouseEvent } from 'react'; +import styles from './TimeSelection.module.scss'; + +const hours: number[] = Array.from({ length: 24 }, (_, i) => i); +const minutes: number[] = Array.from({ length: 12 }, (_, i) => i * 5); + +interface TimeSelectionProps { + handleClickTimeChangeButton: (e: MouseEvent) => void; +} + +export default function TimeSelection({ handleClickTimeChangeButton }: TimeSelectionProps) { + return ( +
+
+ {hours.map((hour) => ( + + ))} +
+
+ {minutes.map((minute) => ( + + ))} +
+
+ ); +} diff --git a/src/page/StoreRegistration/component/TimePicker/TimePicker.module.scss b/src/page/StoreRegistration/component/TimePicker/TimePicker.module.scss index 13e2980a..83655b17 100644 --- a/src/page/StoreRegistration/component/TimePicker/TimePicker.module.scss +++ b/src/page/StoreRegistration/component/TimePicker/TimePicker.module.scss @@ -35,67 +35,3 @@ } } } - -.content { - position: absolute; - display: flex; - border: 1px solid #111111; - width: 150px; - height: 230px; - z-index: 2; - top: 25px; - left: 50; - - &__hour-list { - display: flex; - flex-direction: column; - align-items: center; - width: 75px; - height: 230px; - overflow: scroll; - - &::-webkit-scrollbar { - display: none; - } - } - - &__hour-item { - text-align: center; - width: 100%; - padding: 10px; - background-color: #ffffff; - cursor: pointer; - - &:hover { - background-color: #175c8e; - color: #ffffff; - } - } - - &__minute-list { - display: flex; - flex-direction: column; - align-items: center; - width: 75px; - height: 230px; - list-style-type: none; - overflow: scroll; - - &::-webkit-scrollbar { - display: none; - } - } - - &__minute-item { - text-align: center; - width: 100%; - padding: 10px; - background-color: #ffffff; - cursor: pointer; - - &:hover { - background-color: #175c8e; - color: #ffffff; - } - } -} diff --git a/src/page/StoreRegistration/component/TimePicker/index.tsx b/src/page/StoreRegistration/component/TimePicker/index.tsx index 0eab2416..62bac2de 100644 --- a/src/page/StoreRegistration/component/TimePicker/index.tsx +++ b/src/page/StoreRegistration/component/TimePicker/index.tsx @@ -1,10 +1,11 @@ /* eslint-disable react-hooks/exhaustive-deps */ import { - useState, useRef, useEffect, MouseEvent, + useState, useRef, useEffect, MouseEvent, useCallback, } from 'react'; import useModalStore from 'store/modalStore'; import WEEK from 'utils/constant/week'; import cn from 'utils/ts/className'; +import TimeSelection from 'page/StoreRegistration/component/Modal/TimeSelection'; import styles from './TimePicker.module.scss'; type Weekday = typeof WEEK[number]; @@ -14,9 +15,6 @@ interface TimerPickerProps { isOpenTimePicker: boolean; } -const hours: number[] = Array.from({ length: 24 }, (_, i) => i); -const minutes: number[] = Array.from({ length: 12 }, (_, i) => i * 5); - export default function TimePicker({ operatingDay, isOpenTimePicker } : TimerPickerProps) { const dropMenuRef = useRef(null); const [isOpen, setIsOpen] = useState(false); @@ -55,26 +53,39 @@ export default function TimePicker({ operatingDay, isOpenTimePicker } : TimerPic } } - function handleClickTimeChangeButton(e: MouseEvent) { - const selectedTime = Number(e.currentTarget.value); - const selectedId = e.currentTarget.id; + const handleClickTimeChangeButton = useCallback( + (e: MouseEvent) => { + const selectedTime = Number(e.currentTarget.value); + const selectedId = e.currentTarget.id; - if (selectedId === 'hour') { - setTime({ - ...time, - hour: selectedTime.toString().padStart(2, '0'), - }); - } else if (selectedId === 'minute') { - setTime({ - ...time, - minute: selectedTime.toString().padStart(2, '0'), - }); - } - } + if (selectedId === 'hour') { + setTime((prevTime) => ({ + ...prevTime, + hour: selectedTime.toString().padStart(2, '0'), + })); + } else if (selectedId === 'minute') { + setTime((prevTime) => ({ + ...prevTime, + minute: selectedTime.toString().padStart(2, '0'), + })); + } + }, + [], + ); useEffect(() => { handleChangeOperateTime(); }, [time, storeClosedState]); + + useEffect(() => { + if (isOpenTimePicker) { + time.hour = openTimeState[operatingDay]?.slice(0, 2) || '00:00'; + time.minute = openTimeState[operatingDay]?.slice(3, 5) || '00:00'; + } else { + time.hour = closeTimeState[operatingDay]?.slice(0, 2) || '00:00'; + time.minute = closeTimeState[operatingDay]?.slice(3, 5) || '00:00'; + } + }, []); return (
- ))} -
-
- {minutes.map((minute) => ( - - ))} -
-
+ )}
); From 4465aacdd67120fdacba9e3e2979434c5be335bf Mon Sep 17 00:00:00 2001 From: dooohun Date: Sun, 12 Nov 2023 21:18:24 +0900 Subject: [PATCH 16/50] =?UTF-8?q?feat:=20=EC=B9=B4=ED=85=8C=EA=B3=A0?= =?UTF-8?q?=EB=A6=AC=20id=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/page/StoreRegistration/component/Modal/Category/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/page/StoreRegistration/component/Modal/Category/index.tsx b/src/page/StoreRegistration/component/Modal/Category/index.tsx index c3151b1c..c7b17131 100644 --- a/src/page/StoreRegistration/component/Modal/Category/index.tsx +++ b/src/page/StoreRegistration/component/Modal/Category/index.tsx @@ -20,7 +20,7 @@ export default function Category() { type="button" onClick={() => { setSelectedCategory(category.name); - setCategoryState(category.name); + setCategoryState([category.name, category.id]); }} key={category.id} > From 4fb5c2d0f3dbf49e4d56bbcf3129dce92082c730 Mon Sep 17 00:00:00 2001 From: dooohun Date: Sun, 12 Nov 2023 21:19:05 +0900 Subject: [PATCH 17/50] =?UTF-8?q?feat:=20=EA=B0=80=EA=B2=8C=20=EA=B2=80?= =?UTF-8?q?=EC=83=89=20=EA=B8=B0=EB=8A=A5=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Modal/SearchStore/SearchStore.module.scss | 23 +++- .../component/Modal/SearchStore/index.tsx | 115 ++++++++++++++---- 2 files changed, 109 insertions(+), 29 deletions(-) diff --git a/src/page/StoreRegistration/component/Modal/SearchStore/SearchStore.module.scss b/src/page/StoreRegistration/component/Modal/SearchStore/SearchStore.module.scss index d4c87bd8..168bdc3b 100644 --- a/src/page/StoreRegistration/component/Modal/SearchStore/SearchStore.module.scss +++ b/src/page/StoreRegistration/component/Modal/SearchStore/SearchStore.module.scss @@ -65,8 +65,27 @@ gap: 12px; } - &__text { + &__delivery { font-size: 12px; - color: #f7941e; + + &--selected { + color: #f7941e; + } + } + + &__pay-card { + font-size: 12px; + + &--selected { + color: #f7941e; + } + } + + &__pay-bank { + font-size: 12px; + + &--selected { + color: #f7941e; + } } } diff --git a/src/page/StoreRegistration/component/Modal/SearchStore/index.tsx b/src/page/StoreRegistration/component/Modal/SearchStore/index.tsx index 2d36953d..7b2afe7e 100644 --- a/src/page/StoreRegistration/component/Modal/SearchStore/index.tsx +++ b/src/page/StoreRegistration/component/Modal/SearchStore/index.tsx @@ -1,8 +1,9 @@ import { ReactComponent as Magnifier } from 'assets/svg/StoreRegistration/magnifier.svg'; import cn from 'utils/ts/className'; -import { useState } from 'react'; +import { ChangeEvent, useState } from 'react'; import useBooleanState from 'utils/hooks/useBooleanState'; import ConfirmStore from 'page/StoreRegistration/component/Modal/ConfirmStore'; +import useAllShops from 'query/shops'; import styles from './SearchStore.module.scss'; interface SearchStoreProps { @@ -11,45 +12,105 @@ interface SearchStoreProps { } export default function SearchStore({ open, onCancel }: SearchStoreProps) { - const [selectedStore, setSelectedStore] = useState(''); - const { value: showConfirmStore, setValue: setShowConfirmStore } = useBooleanState(false); + const [selectedStore, setSelectedStore] = useState({ + name: '', + phone: '', + }); + const { value: showConfirmStore, setValue: setConfirmStore } = useBooleanState(false); + const [searchText, setSearchText] = useState(''); - function toggleStore() { - setSelectedStore(selectedStore === '가장 맛있는 족발' ? ' ' : '가장 맛있는 족발'); + const { shopList } = useAllShops(); + + function handleClickStore(e: React.MouseEvent) { + const { value } = e.currentTarget; + const { name, phone } = JSON.parse(value); + if (!showConfirmStore) { + setSelectedStore({ + name, + phone, + }); + } else { + setSelectedStore({ + name: '', + phone: '', + }); + } + } + + function handleChangeSearchText(e: ChangeEvent) { + setSearchText(e.target.value); + } + + function toggleConfirmStore() { + setConfirmStore((prev) => !prev); } - function toggleModal() { - setShowConfirmStore((prev) => !prev); + let filteredShopList; + if (searchText === '') { + filteredShopList = shopList?.shops; + } else { + filteredShopList = shopList?.shops.filter(({ name }) => name.includes(searchText)); } if (!open) return null; return (
- +
- + {filteredShopList?.map((shop) => ( + + ))}
- +
); } From 9e3908b14d5a5b0c07ae2db9db6c2f2ff71b448e Mon Sep 17 00:00:00 2001 From: dooohun Date: Sun, 12 Nov 2023 21:20:25 +0900 Subject: [PATCH 18/50] =?UTF-8?q?feat:=20confirmPopup=EC=9D=84=20=ED=86=B5?= =?UTF-8?q?=ED=95=B4=20=EA=B0=92=20=EC=A0=84=EB=8B=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../component/ConfirmPopup/index.tsx | 12 +++--------- .../Modal/ConfirmStore/ConfirmStore.module.scss | 4 ++-- 2 files changed, 5 insertions(+), 11 deletions(-) diff --git a/src/page/StoreRegistration/component/ConfirmPopup/index.tsx b/src/page/StoreRegistration/component/ConfirmPopup/index.tsx index e0db05f5..3de5d1b2 100644 --- a/src/page/StoreRegistration/component/ConfirmPopup/index.tsx +++ b/src/page/StoreRegistration/component/ConfirmPopup/index.tsx @@ -1,5 +1,3 @@ -import { createPortal } from 'react-dom'; -import useStepStore from 'store/useStepStore'; import styles from './ConfirmPopup.module.scss'; interface ConfirmPopupProps { @@ -8,11 +6,9 @@ interface ConfirmPopupProps { } export default function ConfirmPopup({ isOpen, onCancel }: ConfirmPopupProps) { - const { setStep } = useStepStore(); - if (!isOpen) return null; - return createPortal( + return (
가게 정보를 저장하시겠습니까? @@ -27,15 +23,13 @@ export default function ConfirmPopup({ isOpen, onCancel }: ConfirmPopupProps) { 취소
-
, - document.body, +
); } diff --git a/src/page/StoreRegistration/component/Modal/ConfirmStore/ConfirmStore.module.scss b/src/page/StoreRegistration/component/Modal/ConfirmStore/ConfirmStore.module.scss index d4144d4a..437200b2 100644 --- a/src/page/StoreRegistration/component/Modal/ConfirmStore/ConfirmStore.module.scss +++ b/src/page/StoreRegistration/component/Modal/ConfirmStore/ConfirmStore.module.scss @@ -1,7 +1,6 @@ .container { - position: absolute; + position: sticky; bottom: 0; - left: 0; display: flex; justify-content: space-around; align-items: center; @@ -9,6 +8,7 @@ width: 100%; border-radius: 20px 20px 0 0; box-shadow: 0 -5px 10px #00000026; + background-color: #ffffff; &__title { font-size: 20px; From 018a6a258c6b04d9f84ce01413c2c803f3a93cea Mon Sep 17 00:00:00 2001 From: dooohun Date: Sun, 12 Nov 2023 21:21:35 +0900 Subject: [PATCH 19/50] =?UTF-8?q?feat:=20=EA=B0=80=EA=B2=8C=20=EA=B2=80?= =?UTF-8?q?=EC=83=89=EC=97=90=EC=84=9C=20=EC=84=A0=ED=83=9D=ED=95=9C=20?= =?UTF-8?q?=EA=B0=80=EA=B2=8C=20=EA=B0=92=EC=9C=BC=EB=A1=9C=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../component/Modal/ConfirmStore/index.tsx | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/src/page/StoreRegistration/component/Modal/ConfirmStore/index.tsx b/src/page/StoreRegistration/component/Modal/ConfirmStore/index.tsx index 4ceca724..a1f9de1d 100644 --- a/src/page/StoreRegistration/component/Modal/ConfirmStore/index.tsx +++ b/src/page/StoreRegistration/component/Modal/ConfirmStore/index.tsx @@ -1,28 +1,34 @@ import useModalStore from 'store/modalStore'; import styles from './ConfirmStore.module.scss'; +interface ShopInfo { + name: string; + phone: string; +} + interface ConfirmStoreProps { open: boolean; + selectedShop: ShopInfo; onCancel: () => void; } -export default function ConfirmStore({ open, onCancel }: ConfirmStoreProps) { +export default function ConfirmStore({ open, onCancel, selectedShop }: ConfirmStoreProps) { const { setSearchStoreState } = useModalStore(); if (!open) return null; return (
- 가장 맛있는 족발 + {selectedShop.name}
전화번호 - 041-523-5849 + {selectedShop.phone}
diff --git a/src/page/StoreRegistration/component/Modal/SearchStore/SearchStore.module.scss b/src/page/StoreRegistration/component/Modal/SearchShop/SearchShop.module.scss similarity index 100% rename from src/page/StoreRegistration/component/Modal/SearchStore/SearchStore.module.scss rename to src/page/StoreRegistration/component/Modal/SearchShop/SearchShop.module.scss diff --git a/src/page/StoreRegistration/component/Modal/SearchStore/index.tsx b/src/page/StoreRegistration/component/Modal/SearchShop/index.tsx similarity index 88% rename from src/page/StoreRegistration/component/Modal/SearchStore/index.tsx rename to src/page/StoreRegistration/component/Modal/SearchShop/index.tsx index dba0605b..30cdf0fc 100644 --- a/src/page/StoreRegistration/component/Modal/SearchStore/index.tsx +++ b/src/page/StoreRegistration/component/Modal/SearchShop/index.tsx @@ -1,17 +1,17 @@ -import { ReactComponent as Magnifier } from 'assets/svg/StoreRegistration/magnifier.svg'; +import { ReactComponent as Magnifier } from 'assets/svg/shopRegistration/magnifier.svg'; import cn from 'utils/ts/className'; import { ChangeEvent, useState } from 'react'; import useBooleanState from 'utils/hooks/useBooleanState'; -import ConfirmStore from 'page/StoreRegistration/component/Modal/ConfirmStore'; +import ConfirmShop from 'page/StoreRegistration/component/Modal/ConfirmShop'; import useAllShops from 'query/shops'; -import styles from './SearchStore.module.scss'; +import styles from './SearchShop.module.scss'; -interface SearchStoreProps { +interface SearchShopProps { open: boolean; onCancel: () => void; } -export default function SearchStore({ open, onCancel }: SearchStoreProps) { +export default function SearchShop({ open, onCancel }: SearchShopProps) { const [selectedStore, setSelectedStore] = useState({ name: '', phone: '', @@ -109,7 +109,7 @@ export default function SearchStore({ open, onCancel }: SearchStoreProps) { ))} - + ); } diff --git a/src/page/StoreRegistration/component/TimePicker/index.tsx b/src/page/StoreRegistration/component/TimePicker/index.tsx index 62bac2de..01892b75 100644 --- a/src/page/StoreRegistration/component/TimePicker/index.tsx +++ b/src/page/StoreRegistration/component/TimePicker/index.tsx @@ -23,7 +23,7 @@ export default function TimePicker({ operatingDay, isOpenTimePicker } : TimerPic minute: '00', }); const { - openTimeState, closeTimeState, storeClosedState, setOpenTimeState, setCloseTimeState, + openTimeState, closeTimeState, shopClosedState, setOpenTimeState, setCloseTimeState, } = useModalStore(); useEffect(() => { @@ -75,7 +75,7 @@ export default function TimePicker({ operatingDay, isOpenTimePicker } : TimerPic useEffect(() => { handleChangeOperateTime(); - }, [time, storeClosedState]); + }, [time, shopClosedState]); useEffect(() => { if (isOpenTimePicker) { @@ -92,7 +92,7 @@ export default function TimePicker({ operatingDay, isOpenTimePicker } : TimerPic type="button" className={cn({ [styles.container__hour]: true, - [styles['container__hour--selected']]: storeClosedState[operatingDay], + [styles['container__hour--selected']]: shopClosedState[operatingDay], })} onClick={toggleModal} > @@ -102,13 +102,13 @@ export default function TimePicker({ operatingDay, isOpenTimePicker } : TimerPic type="button" className={cn({ [styles.container__minute]: true, - [styles['container__minute--selected']]: storeClosedState[operatingDay], + [styles['container__minute--selected']]: shopClosedState[operatingDay], })} onClick={toggleModal} > {time.minute} - {isOpen && !storeClosedState[operatingDay] && ( + {isOpen && !shopClosedState[operatingDay] && ( )} diff --git a/src/page/StoreRegistration/index.tsx b/src/page/StoreRegistration/index.tsx index 0c192830..40e55ecb 100644 --- a/src/page/StoreRegistration/index.tsx +++ b/src/page/StoreRegistration/index.tsx @@ -1,13 +1,13 @@ import useMediaQuery from 'utils/hooks/useMediaQuery'; -import StoreRegistrationMobile from './view/Mobile'; -import StoreRegistrationPC from './view/PC'; +import ShopRegistrationMobile from './view/Mobile'; +import ShopRegistrationPC from './view/PC'; -export default function StoreRegistration() { +export default function ShopRegistration() { const { isMobile } = useMediaQuery(); return (
- {isMobile ? : } + {isMobile ? : }
); } diff --git a/src/page/StoreRegistration/view/Mobile/Main/index.tsx b/src/page/StoreRegistration/view/Mobile/Main/index.tsx index 358aa1ef..5d978dd6 100644 --- a/src/page/StoreRegistration/view/Mobile/Main/index.tsx +++ b/src/page/StoreRegistration/view/Mobile/Main/index.tsx @@ -1,4 +1,4 @@ -import { ReactComponent as EmptyImgIcon } from 'assets/svg/StoreRegistration/mobile-empty-img.svg'; +import { ReactComponent as EmptyImgIcon } from 'assets/svg/shopRegistration/mobile-empty-img.svg'; import useStepStore from 'store/useStepStore'; import styles from './Main.module.scss'; diff --git a/src/page/StoreRegistration/view/Mobile/StoreCategory/StoreCategory.module.scss b/src/page/StoreRegistration/view/Mobile/ShopCategory/ShopCategory.module.scss similarity index 100% rename from src/page/StoreRegistration/view/Mobile/StoreCategory/StoreCategory.module.scss rename to src/page/StoreRegistration/view/Mobile/ShopCategory/ShopCategory.module.scss diff --git a/src/page/StoreRegistration/view/Mobile/StoreCategory/index.tsx b/src/page/StoreRegistration/view/Mobile/ShopCategory/index.tsx similarity index 86% rename from src/page/StoreRegistration/view/Mobile/StoreCategory/index.tsx rename to src/page/StoreRegistration/view/Mobile/ShopCategory/index.tsx index 253232ec..62bbf143 100644 --- a/src/page/StoreRegistration/view/Mobile/StoreCategory/index.tsx +++ b/src/page/StoreRegistration/view/Mobile/ShopCategory/index.tsx @@ -1,13 +1,13 @@ import { useState } from 'react'; import useStepStore from 'store/useStepStore'; -import useStoreCategory from 'query/storeCategory'; +import useShopCategory from 'query/shopCategory'; import cn from 'utils/ts/className'; -import styles from './StoreCategory.module.scss'; +import styles from './ShopCategory.module.scss'; type Category = string; -export default function StoreCategory() { - const { categoryList } = useStoreCategory(); +export default function ShopCategory() { + const { categoryList } = useShopCategory(); const { increaseStep } = useStepStore(); const [selectedCategory, setSelectedCategory] = useState(null); diff --git a/src/page/StoreRegistration/view/Mobile/StoreConfirmation/StoreConfirmation.module.scss b/src/page/StoreRegistration/view/Mobile/ShopConfirmation/ShopConfirmation.module.scss similarity index 100% rename from src/page/StoreRegistration/view/Mobile/StoreConfirmation/StoreConfirmation.module.scss rename to src/page/StoreRegistration/view/Mobile/ShopConfirmation/ShopConfirmation.module.scss diff --git a/src/page/StoreRegistration/view/Mobile/StoreConfirmation/index.tsx b/src/page/StoreRegistration/view/Mobile/ShopConfirmation/index.tsx similarity index 96% rename from src/page/StoreRegistration/view/Mobile/StoreConfirmation/index.tsx rename to src/page/StoreRegistration/view/Mobile/ShopConfirmation/index.tsx index d5fe9273..7cc19d57 100644 --- a/src/page/StoreRegistration/view/Mobile/StoreConfirmation/index.tsx +++ b/src/page/StoreRegistration/view/Mobile/ShopConfirmation/index.tsx @@ -1,7 +1,7 @@ import useStepStore from 'store/useStepStore'; -import styles from './StoreConfirmation.module.scss'; +import styles from './ShopConfirmation.module.scss'; -export default function StoreConfirmation() { +export default function ShopConfirmation() { const { increaseStep } = useStepStore(); return ( diff --git a/src/page/StoreRegistration/view/Mobile/StoreEntry/StoreEntry.module.scss b/src/page/StoreRegistration/view/Mobile/ShopEntry/ShopEntry.module.scss similarity index 100% rename from src/page/StoreRegistration/view/Mobile/StoreEntry/StoreEntry.module.scss rename to src/page/StoreRegistration/view/Mobile/ShopEntry/ShopEntry.module.scss diff --git a/src/page/StoreRegistration/view/Mobile/StoreEntry/index.tsx b/src/page/StoreRegistration/view/Mobile/ShopEntry/index.tsx similarity index 79% rename from src/page/StoreRegistration/view/Mobile/StoreEntry/index.tsx rename to src/page/StoreRegistration/view/Mobile/ShopEntry/index.tsx index 043286a7..2dab6b92 100644 --- a/src/page/StoreRegistration/view/Mobile/StoreEntry/index.tsx +++ b/src/page/StoreRegistration/view/Mobile/ShopEntry/index.tsx @@ -1,8 +1,8 @@ -import { ReactComponent as Memo } from 'assets/svg/StoreRegistration/memo.svg'; +import { ReactComponent as Memo } from 'assets/svg/shopRegistration/memo.svg'; import useStepStore from 'store/useStepStore'; -import styles from './StoreEntry.module.scss'; +import styles from './ShopEntry.module.scss'; -export default function StoreEntry() { +export default function ShopEntry() { const { increaseStep } = useStepStore(); return (
diff --git a/src/page/StoreRegistration/view/Mobile/StoreRegistrationMobile.module.scss b/src/page/StoreRegistration/view/Mobile/ShopRegistrationMobile.module.scss similarity index 100% rename from src/page/StoreRegistration/view/Mobile/StoreRegistrationMobile.module.scss rename to src/page/StoreRegistration/view/Mobile/ShopRegistrationMobile.module.scss diff --git a/src/page/StoreRegistration/view/Mobile/index.tsx b/src/page/StoreRegistration/view/Mobile/index.tsx index 7136e729..4af32aad 100644 --- a/src/page/StoreRegistration/view/Mobile/index.tsx +++ b/src/page/StoreRegistration/view/Mobile/index.tsx @@ -5,26 +5,26 @@ import Complete from 'component/common/Auth/Complete'; import SubTitle from 'component/common/Auth/SubTitle'; import useStepStore from 'store/useStepStore'; import PROGRESS_TITLE from 'utils/constant/progress'; -import StoreEntry from 'page/StoreRegistration/view/Mobile/StoreEntry'; -import StoreCategory from 'page/StoreRegistration/view/Mobile/StoreCategory'; +import ShopEntry from 'page/StoreRegistration/view/Mobile/ShopEntry'; +import ShopCategory from 'page/StoreRegistration/view/Mobile/ShopCategory'; import Main from 'page/StoreRegistration/view/Mobile/Main'; import Sub from 'page/StoreRegistration/view/Mobile/Sub'; -import StoreConfirmation from 'page/StoreRegistration/view/Mobile/StoreConfirmation'; -import styles from './StoreRegistrationMobile.module.scss'; +import ShopConfirmation from 'page/StoreRegistration/view/Mobile/ShopConfirmation'; +import styles from './ShopRegistrationMobile.module.scss'; -export default function StoreRegistrationMobile() { +export default function ShopRegistrationMobile() { const { TOTAL_STEP, step, decreaseStep } = useStepStore(); return (
- {step === 0 && } + {step === 0 && } {step === 1 && ( <> - + )} {step === 2 && ( @@ -46,7 +46,7 @@ export default function StoreRegistrationMobile() {
- + )} {step === 5 && ( diff --git a/src/page/StoreRegistration/view/PC/StoreRegistrationPC.module.scss b/src/page/StoreRegistration/view/PC/ShopRegistrationPC.module.scss similarity index 100% rename from src/page/StoreRegistration/view/PC/StoreRegistrationPC.module.scss rename to src/page/StoreRegistration/view/PC/ShopRegistrationPC.module.scss diff --git a/src/page/StoreRegistration/view/PC/index.tsx b/src/page/StoreRegistration/view/PC/index.tsx index bf0c506e..ac443813 100644 --- a/src/page/StoreRegistration/view/PC/index.tsx +++ b/src/page/StoreRegistration/view/PC/index.tsx @@ -1,7 +1,7 @@ /* eslint-disable react-hooks/exhaustive-deps */ -import { ReactComponent as Memo } from 'assets/svg/StoreRegistration/memo.svg'; +import { ReactComponent as Memo } from 'assets/svg/shopRegistration/memo.svg'; import { ReactComponent as Logo } from 'assets/svg/auth/koin-logo.svg'; -import { ReactComponent as Cutlery } from 'assets/svg/StoreRegistration/cutlery.svg'; +import { ReactComponent as Cutlery } from 'assets/svg/shopRegistration/cutlery.svg'; import { useEffect, useMemo, useRef, useState, } from 'react'; @@ -11,7 +11,7 @@ import CustomButton from 'page/Auth/Signup/component/CustomButton'; import Complete from 'component/common/Auth/Complete'; import InputBox from 'page/StoreRegistration/component/InputBox'; import Category from 'page/StoreRegistration/component/Modal/Category'; -import SearchStore from 'page/StoreRegistration/component/Modal/SearchStore'; +import SearchShop from 'page/StoreRegistration/component/Modal/SearchShop'; import OperateTimePC from 'page/StoreRegistration/component/Modal/OperateTimePC'; import ConfirmPopup from 'page/StoreRegistration/component/ConfirmPopup'; import useMediaQuery from 'utils/hooks/useMediaQuery'; @@ -24,9 +24,9 @@ import { zodResolver } from '@hookform/resolvers/zod'; import { OwnerShop } from 'model/shopInfo/ownerShop'; import { useMutation } from '@tanstack/react-query'; import { postRegisterShop } from 'api/shop'; -import styles from './StoreRegistrationPC.module.scss'; +import styles from './ShopRegistrationPC.module.scss'; -export default function StoreRegistrationPC() { +export default function ShopRegistrationPC() { const { isMobile } = useMediaQuery(); const { step, setStep } = useStepStore(); const { @@ -70,11 +70,11 @@ export default function StoreRegistrationPC() { const { categoryState, - searchStoreState, - setSearchStoreState, + searchShopState: searchStoreState, + setSearchShopState: setSearchStoreState, openTimeState, closeTimeState, - storeClosedState, + shopClosedState: storeClosedState, } = useModalStore(); type OperateTimeProps = { [key: string]: string }; @@ -266,7 +266,7 @@ export default function StoreRegistrationPC() { isOpen={showSearchStore} onCancel={closeSearchStore} > - + diff --git a/src/query/shopCategory.ts b/src/query/shopCategory.ts new file mode 100644 index 00000000..f4eb260e --- /dev/null +++ b/src/query/shopCategory.ts @@ -0,0 +1,9 @@ +import { useQuery } from '@tanstack/react-query'; +import getShopCategory from 'api/category'; + +const useShopCategory = () => { + const { data: categoryList } = useQuery(['shopCategory'], getShopCategory); + return { categoryList }; +}; + +export default useShopCategory; diff --git a/src/query/storeCategory.ts b/src/query/storeCategory.ts deleted file mode 100644 index 2c8d6e56..00000000 --- a/src/query/storeCategory.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { useQuery } from '@tanstack/react-query'; -import getStoreCategory from 'api/category'; - -const useStoreCategory = () => { - const { data: categoryList } = useQuery(['storeCategory'], getStoreCategory); - return { categoryList }; -}; - -export default useStoreCategory; diff --git a/src/store/modalStore.ts b/src/store/modalStore.ts index 8ecaf55a..9f42c984 100644 --- a/src/store/modalStore.ts +++ b/src/store/modalStore.ts @@ -3,15 +3,15 @@ import WEEK from 'utils/constant/week'; interface ModalStore { categoryState: [string, number]; - searchStoreState: string, + searchShopState: string, openTimeState: { [key in typeof WEEK[number]]: string | null }, closeTimeState: { [key in typeof WEEK[number]]: string | null }, - storeClosedState: { [key: string]: boolean }, + shopClosedState: { [key: string]: boolean }, setCategoryState: (state: [string, number]) => void, - setSearchStoreState: (state: string) => void, + setSearchShopState: (state: string) => void, setOpenTimeState: (state: { [key in typeof WEEK[number]]: string | null }) => void, setCloseTimeState: (state: { [key in typeof WEEK[number]]: string | null }) => void, - setStoreClosedState: (state: { [key : string]: boolean }) => void, + setShopClosedState: (state: { [key : string]: boolean }) => void, } const initialOperatingTime = { @@ -24,7 +24,7 @@ const initialOperatingTime = { 일: '00:00', }; -const initialStoreClosed = { +const initialShopClosed = { 월: false, 화: false, 수: false, @@ -36,15 +36,15 @@ const initialStoreClosed = { const useModalStore = create((set) => ({ categoryState: ['', 0], - searchStoreState: '', + searchShopState: '', openTimeState: initialOperatingTime, closeTimeState: initialOperatingTime, - storeClosedState: initialStoreClosed, + shopClosedState: initialShopClosed, setCategoryState: (state) => set({ categoryState: state }), - setSearchStoreState: (state) => set({ searchStoreState: state }), + setSearchShopState: (state) => set({ searchShopState: state }), setOpenTimeState: (state) => set(() => ({ openTimeState: state })), setCloseTimeState: (state) => set(() => ({ closeTimeState: state })), - setStoreClosedState: (state) => set({ storeClosedState: state }), + setShopClosedState: (state) => set({ shopClosedState: state }), })); export default useModalStore; From fcaabb0c179be34c5ca839d43a79fe0f0bbc7438 Mon Sep 17 00:00:00 2001 From: dooohun Date: Thu, 16 Nov 2023 23:53:20 +0900 Subject: [PATCH 27/50] =?UTF-8?q?refactor:=20StoreRegistration=EC=9D=84=20?= =?UTF-8?q?ShopRegistration=EC=9C=BC=EB=A1=9C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.tsx | 4 ++-- .../component/ConfirmPopup/ConfirmPopup.module.scss | 0 .../component/ConfirmPopup/index.tsx | 0 .../component/InputBox/InputBox.module.scss | 0 .../component/InputBox/index.tsx | 0 .../component/Modal/Category/Category.module.scss | 0 .../component/Modal/Category/index.tsx | 0 .../Modal/ConfirmShop/ConfirmShop.module.scss | 0 .../component/Modal/ConfirmShop/index.tsx | 0 .../OperateTimeMobile/OperateTimeMobile.module.scss | 0 .../component/Modal/OperateTimeMobile/index.tsx | 2 +- .../Modal/OperateTimePC/OperateTimePC.module.scss | 0 .../component/Modal/OperateTimePC/index.tsx | 2 +- .../component/Modal/SearchShop/SearchShop.module.scss | 0 .../component/Modal/SearchShop/index.tsx | 2 +- .../Modal/TimeSelection/TimeSelection.module.scss | 0 .../component/Modal/TimeSelection/index.tsx | 0 .../component/TimePicker/TimePicker.module.scss | 0 .../component/TimePicker/index.tsx | 2 +- .../{StoreRegistration => ShopRegistration}/index.tsx | 0 .../view/Mobile/Main/Main.module.scss | 0 .../view/Mobile/Main/index.tsx | 0 .../view/Mobile/ShopCategory/ShopCategory.module.scss | 0 .../view/Mobile/ShopCategory/index.tsx | 0 .../ShopConfirmation/ShopConfirmation.module.scss | 0 .../view/Mobile/ShopConfirmation/index.tsx | 0 .../view/Mobile/ShopEntry/ShopEntry.module.scss | 0 .../view/Mobile/ShopEntry/index.tsx | 0 .../view/Mobile/ShopRegistrationMobile.module.scss | 0 .../view/Mobile/Sub/Sub.module.scss | 0 .../view/Mobile/Sub/index.tsx | 2 +- .../view/Mobile/index.tsx | 10 +++++----- .../view/PC/ShopRegistrationPC.module.scss | 0 .../view/PC/index.tsx | 10 +++++----- 34 files changed, 17 insertions(+), 17 deletions(-) rename src/page/{StoreRegistration => ShopRegistration}/component/ConfirmPopup/ConfirmPopup.module.scss (100%) rename src/page/{StoreRegistration => ShopRegistration}/component/ConfirmPopup/index.tsx (100%) rename src/page/{StoreRegistration => ShopRegistration}/component/InputBox/InputBox.module.scss (100%) rename src/page/{StoreRegistration => ShopRegistration}/component/InputBox/index.tsx (100%) rename src/page/{StoreRegistration => ShopRegistration}/component/Modal/Category/Category.module.scss (100%) rename src/page/{StoreRegistration => ShopRegistration}/component/Modal/Category/index.tsx (100%) rename src/page/{StoreRegistration => ShopRegistration}/component/Modal/ConfirmShop/ConfirmShop.module.scss (100%) rename src/page/{StoreRegistration => ShopRegistration}/component/Modal/ConfirmShop/index.tsx (100%) rename src/page/{StoreRegistration => ShopRegistration}/component/Modal/OperateTimeMobile/OperateTimeMobile.module.scss (100%) rename src/page/{StoreRegistration => ShopRegistration}/component/Modal/OperateTimeMobile/index.tsx (96%) rename src/page/{StoreRegistration => ShopRegistration}/component/Modal/OperateTimePC/OperateTimePC.module.scss (100%) rename src/page/{StoreRegistration => ShopRegistration}/component/Modal/OperateTimePC/index.tsx (95%) rename src/page/{StoreRegistration => ShopRegistration}/component/Modal/SearchShop/SearchShop.module.scss (100%) rename src/page/{StoreRegistration => ShopRegistration}/component/Modal/SearchShop/index.tsx (97%) rename src/page/{StoreRegistration => ShopRegistration}/component/Modal/TimeSelection/TimeSelection.module.scss (100%) rename src/page/{StoreRegistration => ShopRegistration}/component/Modal/TimeSelection/index.tsx (100%) rename src/page/{StoreRegistration => ShopRegistration}/component/TimePicker/TimePicker.module.scss (100%) rename src/page/{StoreRegistration => ShopRegistration}/component/TimePicker/index.tsx (97%) rename src/page/{StoreRegistration => ShopRegistration}/index.tsx (100%) rename src/page/{StoreRegistration => ShopRegistration}/view/Mobile/Main/Main.module.scss (100%) rename src/page/{StoreRegistration => ShopRegistration}/view/Mobile/Main/index.tsx (100%) rename src/page/{StoreRegistration => ShopRegistration}/view/Mobile/ShopCategory/ShopCategory.module.scss (100%) rename src/page/{StoreRegistration => ShopRegistration}/view/Mobile/ShopCategory/index.tsx (100%) rename src/page/{StoreRegistration => ShopRegistration}/view/Mobile/ShopConfirmation/ShopConfirmation.module.scss (100%) rename src/page/{StoreRegistration => ShopRegistration}/view/Mobile/ShopConfirmation/index.tsx (100%) rename src/page/{StoreRegistration => ShopRegistration}/view/Mobile/ShopEntry/ShopEntry.module.scss (100%) rename src/page/{StoreRegistration => ShopRegistration}/view/Mobile/ShopEntry/index.tsx (100%) rename src/page/{StoreRegistration => ShopRegistration}/view/Mobile/ShopRegistrationMobile.module.scss (100%) rename src/page/{StoreRegistration => ShopRegistration}/view/Mobile/Sub/Sub.module.scss (100%) rename src/page/{StoreRegistration => ShopRegistration}/view/Mobile/Sub/index.tsx (96%) rename src/page/{StoreRegistration => ShopRegistration}/view/Mobile/index.tsx (87%) rename src/page/{StoreRegistration => ShopRegistration}/view/PC/ShopRegistrationPC.module.scss (100%) rename src/page/{StoreRegistration => ShopRegistration}/view/PC/index.tsx (97%) diff --git a/src/App.tsx b/src/App.tsx index c2aad348..a64f084c 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -8,14 +8,14 @@ import CompleteChangePassword from 'page/Auth/FindPassword/CompleteChangePasswor import AuthLayout from 'layout/AuthLayout'; import MyStorePage from 'page/MyShopPage'; -import ShopRegistration from 'page/StoreRegistration'; +import ShopRegistration from 'page/ShopRegistration'; function App() { return ( }> } /> - } /> + } /> }> } /> diff --git a/src/page/StoreRegistration/component/ConfirmPopup/ConfirmPopup.module.scss b/src/page/ShopRegistration/component/ConfirmPopup/ConfirmPopup.module.scss similarity index 100% rename from src/page/StoreRegistration/component/ConfirmPopup/ConfirmPopup.module.scss rename to src/page/ShopRegistration/component/ConfirmPopup/ConfirmPopup.module.scss diff --git a/src/page/StoreRegistration/component/ConfirmPopup/index.tsx b/src/page/ShopRegistration/component/ConfirmPopup/index.tsx similarity index 100% rename from src/page/StoreRegistration/component/ConfirmPopup/index.tsx rename to src/page/ShopRegistration/component/ConfirmPopup/index.tsx diff --git a/src/page/StoreRegistration/component/InputBox/InputBox.module.scss b/src/page/ShopRegistration/component/InputBox/InputBox.module.scss similarity index 100% rename from src/page/StoreRegistration/component/InputBox/InputBox.module.scss rename to src/page/ShopRegistration/component/InputBox/InputBox.module.scss diff --git a/src/page/StoreRegistration/component/InputBox/index.tsx b/src/page/ShopRegistration/component/InputBox/index.tsx similarity index 100% rename from src/page/StoreRegistration/component/InputBox/index.tsx rename to src/page/ShopRegistration/component/InputBox/index.tsx diff --git a/src/page/StoreRegistration/component/Modal/Category/Category.module.scss b/src/page/ShopRegistration/component/Modal/Category/Category.module.scss similarity index 100% rename from src/page/StoreRegistration/component/Modal/Category/Category.module.scss rename to src/page/ShopRegistration/component/Modal/Category/Category.module.scss diff --git a/src/page/StoreRegistration/component/Modal/Category/index.tsx b/src/page/ShopRegistration/component/Modal/Category/index.tsx similarity index 100% rename from src/page/StoreRegistration/component/Modal/Category/index.tsx rename to src/page/ShopRegistration/component/Modal/Category/index.tsx diff --git a/src/page/StoreRegistration/component/Modal/ConfirmShop/ConfirmShop.module.scss b/src/page/ShopRegistration/component/Modal/ConfirmShop/ConfirmShop.module.scss similarity index 100% rename from src/page/StoreRegistration/component/Modal/ConfirmShop/ConfirmShop.module.scss rename to src/page/ShopRegistration/component/Modal/ConfirmShop/ConfirmShop.module.scss diff --git a/src/page/StoreRegistration/component/Modal/ConfirmShop/index.tsx b/src/page/ShopRegistration/component/Modal/ConfirmShop/index.tsx similarity index 100% rename from src/page/StoreRegistration/component/Modal/ConfirmShop/index.tsx rename to src/page/ShopRegistration/component/Modal/ConfirmShop/index.tsx diff --git a/src/page/StoreRegistration/component/Modal/OperateTimeMobile/OperateTimeMobile.module.scss b/src/page/ShopRegistration/component/Modal/OperateTimeMobile/OperateTimeMobile.module.scss similarity index 100% rename from src/page/StoreRegistration/component/Modal/OperateTimeMobile/OperateTimeMobile.module.scss rename to src/page/ShopRegistration/component/Modal/OperateTimeMobile/OperateTimeMobile.module.scss diff --git a/src/page/StoreRegistration/component/Modal/OperateTimeMobile/index.tsx b/src/page/ShopRegistration/component/Modal/OperateTimeMobile/index.tsx similarity index 96% rename from src/page/StoreRegistration/component/Modal/OperateTimeMobile/index.tsx rename to src/page/ShopRegistration/component/Modal/OperateTimeMobile/index.tsx index e794528d..51b8ef9a 100644 --- a/src/page/StoreRegistration/component/Modal/OperateTimeMobile/index.tsx +++ b/src/page/ShopRegistration/component/Modal/OperateTimeMobile/index.tsx @@ -1,7 +1,7 @@ import PreviousStep from 'component/common/Auth/PreviousStep'; import SubTitle from 'component/common/Auth/SubTitle'; import useStepStore from 'store/useStepStore'; -import TimePicker from 'page/StoreRegistration/component/TimePicker'; +import TimePicker from 'page/ShopRegistration/component/TimePicker'; import WEEK from 'utils/constant/week'; import { createPortal } from 'react-dom'; import styles from './OperateTimeMobile.module.scss'; diff --git a/src/page/StoreRegistration/component/Modal/OperateTimePC/OperateTimePC.module.scss b/src/page/ShopRegistration/component/Modal/OperateTimePC/OperateTimePC.module.scss similarity index 100% rename from src/page/StoreRegistration/component/Modal/OperateTimePC/OperateTimePC.module.scss rename to src/page/ShopRegistration/component/Modal/OperateTimePC/OperateTimePC.module.scss diff --git a/src/page/StoreRegistration/component/Modal/OperateTimePC/index.tsx b/src/page/ShopRegistration/component/Modal/OperateTimePC/index.tsx similarity index 95% rename from src/page/StoreRegistration/component/Modal/OperateTimePC/index.tsx rename to src/page/ShopRegistration/component/Modal/OperateTimePC/index.tsx index d7936648..946f1f65 100644 --- a/src/page/StoreRegistration/component/Modal/OperateTimePC/index.tsx +++ b/src/page/ShopRegistration/component/Modal/OperateTimePC/index.tsx @@ -1,4 +1,4 @@ -import TimePicker from 'page/StoreRegistration/component/TimePicker'; +import TimePicker from 'page/ShopRegistration/component/TimePicker'; import WEEK from 'utils/constant/week'; import useModalStore from 'store/modalStore'; import cn from 'utils/ts/className'; diff --git a/src/page/StoreRegistration/component/Modal/SearchShop/SearchShop.module.scss b/src/page/ShopRegistration/component/Modal/SearchShop/SearchShop.module.scss similarity index 100% rename from src/page/StoreRegistration/component/Modal/SearchShop/SearchShop.module.scss rename to src/page/ShopRegistration/component/Modal/SearchShop/SearchShop.module.scss diff --git a/src/page/StoreRegistration/component/Modal/SearchShop/index.tsx b/src/page/ShopRegistration/component/Modal/SearchShop/index.tsx similarity index 97% rename from src/page/StoreRegistration/component/Modal/SearchShop/index.tsx rename to src/page/ShopRegistration/component/Modal/SearchShop/index.tsx index 30cdf0fc..7096ab7f 100644 --- a/src/page/StoreRegistration/component/Modal/SearchShop/index.tsx +++ b/src/page/ShopRegistration/component/Modal/SearchShop/index.tsx @@ -2,7 +2,7 @@ import { ReactComponent as Magnifier } from 'assets/svg/shopRegistration/magnifi import cn from 'utils/ts/className'; import { ChangeEvent, useState } from 'react'; import useBooleanState from 'utils/hooks/useBooleanState'; -import ConfirmShop from 'page/StoreRegistration/component/Modal/ConfirmShop'; +import ConfirmShop from 'page/ShopRegistration/component/Modal/ConfirmShop'; import useAllShops from 'query/shops'; import styles from './SearchShop.module.scss'; diff --git a/src/page/StoreRegistration/component/Modal/TimeSelection/TimeSelection.module.scss b/src/page/ShopRegistration/component/Modal/TimeSelection/TimeSelection.module.scss similarity index 100% rename from src/page/StoreRegistration/component/Modal/TimeSelection/TimeSelection.module.scss rename to src/page/ShopRegistration/component/Modal/TimeSelection/TimeSelection.module.scss diff --git a/src/page/StoreRegistration/component/Modal/TimeSelection/index.tsx b/src/page/ShopRegistration/component/Modal/TimeSelection/index.tsx similarity index 100% rename from src/page/StoreRegistration/component/Modal/TimeSelection/index.tsx rename to src/page/ShopRegistration/component/Modal/TimeSelection/index.tsx diff --git a/src/page/StoreRegistration/component/TimePicker/TimePicker.module.scss b/src/page/ShopRegistration/component/TimePicker/TimePicker.module.scss similarity index 100% rename from src/page/StoreRegistration/component/TimePicker/TimePicker.module.scss rename to src/page/ShopRegistration/component/TimePicker/TimePicker.module.scss diff --git a/src/page/StoreRegistration/component/TimePicker/index.tsx b/src/page/ShopRegistration/component/TimePicker/index.tsx similarity index 97% rename from src/page/StoreRegistration/component/TimePicker/index.tsx rename to src/page/ShopRegistration/component/TimePicker/index.tsx index 01892b75..5ad9e049 100644 --- a/src/page/StoreRegistration/component/TimePicker/index.tsx +++ b/src/page/ShopRegistration/component/TimePicker/index.tsx @@ -5,7 +5,7 @@ import { import useModalStore from 'store/modalStore'; import WEEK from 'utils/constant/week'; import cn from 'utils/ts/className'; -import TimeSelection from 'page/StoreRegistration/component/Modal/TimeSelection'; +import TimeSelection from 'page/ShopRegistration/component/Modal/TimeSelection'; import styles from './TimePicker.module.scss'; type Weekday = typeof WEEK[number]; diff --git a/src/page/StoreRegistration/index.tsx b/src/page/ShopRegistration/index.tsx similarity index 100% rename from src/page/StoreRegistration/index.tsx rename to src/page/ShopRegistration/index.tsx diff --git a/src/page/StoreRegistration/view/Mobile/Main/Main.module.scss b/src/page/ShopRegistration/view/Mobile/Main/Main.module.scss similarity index 100% rename from src/page/StoreRegistration/view/Mobile/Main/Main.module.scss rename to src/page/ShopRegistration/view/Mobile/Main/Main.module.scss diff --git a/src/page/StoreRegistration/view/Mobile/Main/index.tsx b/src/page/ShopRegistration/view/Mobile/Main/index.tsx similarity index 100% rename from src/page/StoreRegistration/view/Mobile/Main/index.tsx rename to src/page/ShopRegistration/view/Mobile/Main/index.tsx diff --git a/src/page/StoreRegistration/view/Mobile/ShopCategory/ShopCategory.module.scss b/src/page/ShopRegistration/view/Mobile/ShopCategory/ShopCategory.module.scss similarity index 100% rename from src/page/StoreRegistration/view/Mobile/ShopCategory/ShopCategory.module.scss rename to src/page/ShopRegistration/view/Mobile/ShopCategory/ShopCategory.module.scss diff --git a/src/page/StoreRegistration/view/Mobile/ShopCategory/index.tsx b/src/page/ShopRegistration/view/Mobile/ShopCategory/index.tsx similarity index 100% rename from src/page/StoreRegistration/view/Mobile/ShopCategory/index.tsx rename to src/page/ShopRegistration/view/Mobile/ShopCategory/index.tsx diff --git a/src/page/StoreRegistration/view/Mobile/ShopConfirmation/ShopConfirmation.module.scss b/src/page/ShopRegistration/view/Mobile/ShopConfirmation/ShopConfirmation.module.scss similarity index 100% rename from src/page/StoreRegistration/view/Mobile/ShopConfirmation/ShopConfirmation.module.scss rename to src/page/ShopRegistration/view/Mobile/ShopConfirmation/ShopConfirmation.module.scss diff --git a/src/page/StoreRegistration/view/Mobile/ShopConfirmation/index.tsx b/src/page/ShopRegistration/view/Mobile/ShopConfirmation/index.tsx similarity index 100% rename from src/page/StoreRegistration/view/Mobile/ShopConfirmation/index.tsx rename to src/page/ShopRegistration/view/Mobile/ShopConfirmation/index.tsx diff --git a/src/page/StoreRegistration/view/Mobile/ShopEntry/ShopEntry.module.scss b/src/page/ShopRegistration/view/Mobile/ShopEntry/ShopEntry.module.scss similarity index 100% rename from src/page/StoreRegistration/view/Mobile/ShopEntry/ShopEntry.module.scss rename to src/page/ShopRegistration/view/Mobile/ShopEntry/ShopEntry.module.scss diff --git a/src/page/StoreRegistration/view/Mobile/ShopEntry/index.tsx b/src/page/ShopRegistration/view/Mobile/ShopEntry/index.tsx similarity index 100% rename from src/page/StoreRegistration/view/Mobile/ShopEntry/index.tsx rename to src/page/ShopRegistration/view/Mobile/ShopEntry/index.tsx diff --git a/src/page/StoreRegistration/view/Mobile/ShopRegistrationMobile.module.scss b/src/page/ShopRegistration/view/Mobile/ShopRegistrationMobile.module.scss similarity index 100% rename from src/page/StoreRegistration/view/Mobile/ShopRegistrationMobile.module.scss rename to src/page/ShopRegistration/view/Mobile/ShopRegistrationMobile.module.scss diff --git a/src/page/StoreRegistration/view/Mobile/Sub/Sub.module.scss b/src/page/ShopRegistration/view/Mobile/Sub/Sub.module.scss similarity index 100% rename from src/page/StoreRegistration/view/Mobile/Sub/Sub.module.scss rename to src/page/ShopRegistration/view/Mobile/Sub/Sub.module.scss diff --git a/src/page/StoreRegistration/view/Mobile/Sub/index.tsx b/src/page/ShopRegistration/view/Mobile/Sub/index.tsx similarity index 96% rename from src/page/StoreRegistration/view/Mobile/Sub/index.tsx rename to src/page/ShopRegistration/view/Mobile/Sub/index.tsx index 0bb7a178..90cffd00 100644 --- a/src/page/StoreRegistration/view/Mobile/Sub/index.tsx +++ b/src/page/ShopRegistration/view/Mobile/Sub/index.tsx @@ -1,5 +1,5 @@ /* eslint-disable jsx-a11y/label-has-associated-control */ -import OperateTimeMobile from 'page/StoreRegistration/component/Modal/OperateTimeMobile'; +import OperateTimeMobile from 'page/ShopRegistration/component/Modal/OperateTimeMobile'; import useBooleanState from 'utils/hooks/useBooleanState'; import useStepStore from 'store/useStepStore'; import styles from './Sub.module.scss'; diff --git a/src/page/StoreRegistration/view/Mobile/index.tsx b/src/page/ShopRegistration/view/Mobile/index.tsx similarity index 87% rename from src/page/StoreRegistration/view/Mobile/index.tsx rename to src/page/ShopRegistration/view/Mobile/index.tsx index 4af32aad..20af89a9 100644 --- a/src/page/StoreRegistration/view/Mobile/index.tsx +++ b/src/page/ShopRegistration/view/Mobile/index.tsx @@ -5,11 +5,11 @@ import Complete from 'component/common/Auth/Complete'; import SubTitle from 'component/common/Auth/SubTitle'; import useStepStore from 'store/useStepStore'; import PROGRESS_TITLE from 'utils/constant/progress'; -import ShopEntry from 'page/StoreRegistration/view/Mobile/ShopEntry'; -import ShopCategory from 'page/StoreRegistration/view/Mobile/ShopCategory'; -import Main from 'page/StoreRegistration/view/Mobile/Main'; -import Sub from 'page/StoreRegistration/view/Mobile/Sub'; -import ShopConfirmation from 'page/StoreRegistration/view/Mobile/ShopConfirmation'; +import ShopEntry from 'page/ShopRegistration/view/Mobile/ShopEntry'; +import ShopCategory from 'page/ShopRegistration/view/Mobile/ShopCategory'; +import Main from 'page/ShopRegistration/view/Mobile/Main'; +import Sub from 'page/ShopRegistration/view/Mobile/Sub'; +import ShopConfirmation from 'page/ShopRegistration/view/Mobile/ShopConfirmation'; import styles from './ShopRegistrationMobile.module.scss'; export default function ShopRegistrationMobile() { diff --git a/src/page/StoreRegistration/view/PC/ShopRegistrationPC.module.scss b/src/page/ShopRegistration/view/PC/ShopRegistrationPC.module.scss similarity index 100% rename from src/page/StoreRegistration/view/PC/ShopRegistrationPC.module.scss rename to src/page/ShopRegistration/view/PC/ShopRegistrationPC.module.scss diff --git a/src/page/StoreRegistration/view/PC/index.tsx b/src/page/ShopRegistration/view/PC/index.tsx similarity index 97% rename from src/page/StoreRegistration/view/PC/index.tsx rename to src/page/ShopRegistration/view/PC/index.tsx index ac443813..ca4ca264 100644 --- a/src/page/StoreRegistration/view/PC/index.tsx +++ b/src/page/ShopRegistration/view/PC/index.tsx @@ -9,11 +9,11 @@ import useStepStore from 'store/useStepStore'; import Copyright from 'component/common/Copyright'; import CustomButton from 'page/Auth/Signup/component/CustomButton'; import Complete from 'component/common/Auth/Complete'; -import InputBox from 'page/StoreRegistration/component/InputBox'; -import Category from 'page/StoreRegistration/component/Modal/Category'; -import SearchShop from 'page/StoreRegistration/component/Modal/SearchShop'; -import OperateTimePC from 'page/StoreRegistration/component/Modal/OperateTimePC'; -import ConfirmPopup from 'page/StoreRegistration/component/ConfirmPopup'; +import InputBox from 'page/ShopRegistration/component/InputBox'; +import Category from 'page/ShopRegistration/component/Modal/Category'; +import SearchShop from 'page/ShopRegistration/component/Modal/SearchShop'; +import OperateTimePC from 'page/ShopRegistration/component/Modal/OperateTimePC'; +import ConfirmPopup from 'page/ShopRegistration/component/ConfirmPopup'; import useMediaQuery from 'utils/hooks/useMediaQuery'; import useBooleanState from 'utils/hooks/useBooleanState'; import CustomModal from 'component/common/CustomModal'; From 47ed48d94946993aee0812d3d9d1334fc0e6f9a9 Mon Sep 17 00:00:00 2001 From: dooohun Date: Fri, 17 Nov 2023 00:00:42 +0900 Subject: [PATCH 28/50] =?UTF-8?q?refactor:=20=EA=B0=80=EA=B2=8C=20?= =?UTF-8?q?=EB=93=B1=EB=A1=9D=20path=EB=A5=BC=20=EC=9B=90=EB=9E=98=20?= =?UTF-8?q?=EC=83=81=ED=83=9C=EB=A1=9C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/App.tsx b/src/App.tsx index a64f084c..e1c9ff70 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -15,7 +15,7 @@ function App() { }> } /> - } /> + } /> }> } /> From 23a605b7468c07a3ba30fbe63bc149fc16059b5d Mon Sep 17 00:00:00 2001 From: dooohun Date: Fri, 17 Nov 2023 00:01:25 +0900 Subject: [PATCH 29/50] =?UTF-8?q?refactor:=20useState=EB=A1=9C=20filteredS?= =?UTF-8?q?hopList=20=EC=83=81=ED=83=9C=20=EA=B4=80=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ShopRegistration/component/Modal/SearchShop/index.tsx | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/src/page/ShopRegistration/component/Modal/SearchShop/index.tsx b/src/page/ShopRegistration/component/Modal/SearchShop/index.tsx index 7096ab7f..0028cadd 100644 --- a/src/page/ShopRegistration/component/Modal/SearchShop/index.tsx +++ b/src/page/ShopRegistration/component/Modal/SearchShop/index.tsx @@ -44,12 +44,8 @@ export default function SearchShop({ open, onCancel }: SearchShopProps) { setConfirmStore((prev) => !prev); } - let filteredShopList; - if (searchText === '') { - filteredShopList = shopList?.shops; - } else { - filteredShopList = shopList?.shops.filter(({ name }) => name.includes(searchText)); - } + const [filteredShopList, setFilteredShopList] = useState(shopList?.shops); + setFilteredShopList(shopList?.shops.filter((shop) => shop.name.includes(searchText))); if (!open) return null; return ( From 4437b7677dd6578c9f37020c061e4c28184ad924 Mon Sep 17 00:00:00 2001 From: dooohun Date: Fri, 17 Nov 2023 10:29:47 +0900 Subject: [PATCH 30/50] =?UTF-8?q?feat:=20enter=ED=82=A4=20=EB=88=84?= =?UTF-8?q?=EB=A5=B4=EA=B1=B0=EB=82=98=20=EA=B2=80=EC=83=89=20=EB=B2=84?= =?UTF-8?q?=ED=8A=BC=EC=9D=84=20=EB=88=84=EB=A5=B4=EB=A9=B4=20=EC=83=81?= =?UTF-8?q?=EC=A0=90=20=EB=A6=AC=EC=8A=A4=ED=8A=B8=20=ED=95=84=ED=84=B0?= =?UTF-8?q?=EB=A7=81=20=EB=90=98=EB=8A=94=20=EA=B8=B0=EB=8A=A5=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../component/Modal/SearchShop/index.tsx | 30 ++++++++++++++++--- 1 file changed, 26 insertions(+), 4 deletions(-) diff --git a/src/page/ShopRegistration/component/Modal/SearchShop/index.tsx b/src/page/ShopRegistration/component/Modal/SearchShop/index.tsx index 0028cadd..da1e7a31 100644 --- a/src/page/ShopRegistration/component/Modal/SearchShop/index.tsx +++ b/src/page/ShopRegistration/component/Modal/SearchShop/index.tsx @@ -1,6 +1,6 @@ import { ReactComponent as Magnifier } from 'assets/svg/shopRegistration/magnifier.svg'; import cn from 'utils/ts/className'; -import { ChangeEvent, useState } from 'react'; +import { ChangeEvent, useEffect, useState } from 'react'; import useBooleanState from 'utils/hooks/useBooleanState'; import ConfirmShop from 'page/ShopRegistration/component/Modal/ConfirmShop'; import useAllShops from 'query/shops'; @@ -36,16 +36,33 @@ export default function SearchShop({ open, onCancel }: SearchShopProps) { } } + const [filteredShopList, setFilteredShopList] = useState(shopList?.shops); + + function handleSearch() { + if (searchText !== '') { + setFilteredShopList(shopList?.shops.filter(({ name }) => name.includes(searchText))); + } + } + function handleChangeSearchText(e: ChangeEvent) { setSearchText(e.target.value); } + function handleKeyDown(e: React.KeyboardEvent) { + if (e.key === 'Enter') { + handleSearch(); + } + } + function toggleConfirmStore() { setConfirmStore((prev) => !prev); } - const [filteredShopList, setFilteredShopList] = useState(shopList?.shops); - setFilteredShopList(shopList?.shops.filter((shop) => shop.name.includes(searchText))); + useEffect(() => { + if (searchText === '') { + setFilteredShopList(shopList?.shops); + } + }, [searchText, shopList?.shops]); if (!open) return null; return ( @@ -56,9 +73,14 @@ export default function SearchShop({ open, onCancel }: SearchShopProps) { placeholder="상점 검색" value={searchText} onChange={handleChangeSearchText} + onKeyDown={handleKeyDown} className={styles.info__input} /> - + handleSearch()} + />
{filteredShopList?.map((shop) => ( From 80e49fc832fc15ce0d42cf731dfdaf734e0f2770 Mon Sep 17 00:00:00 2001 From: dooohun Date: Fri, 17 Nov 2023 10:54:25 +0900 Subject: [PATCH 31/50] =?UTF-8?q?feat:=20useAllShops=20=EC=97=90=EB=9F=AC?= =?UTF-8?q?=20=ED=95=B8=EB=93=A4=EB=A7=81=20=EA=B8=B0=EB=8A=A5=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ShopRegistration/component/Modal/SearchShop/index.tsx | 3 ++- src/query/shops.ts | 4 ++-- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/page/ShopRegistration/component/Modal/SearchShop/index.tsx b/src/page/ShopRegistration/component/Modal/SearchShop/index.tsx index da1e7a31..b87ced23 100644 --- a/src/page/ShopRegistration/component/Modal/SearchShop/index.tsx +++ b/src/page/ShopRegistration/component/Modal/SearchShop/index.tsx @@ -19,7 +19,7 @@ export default function SearchShop({ open, onCancel }: SearchShopProps) { const { value: showConfirmStore, setValue: setConfirmStore } = useBooleanState(false); const [searchText, setSearchText] = useState(''); - const { shopList } = useAllShops(); + const { shopList, isError } = useAllShops(); function handleClickStore(e: React.MouseEvent) { const { name, phone } = JSON.parse(e.currentTarget.value); @@ -83,6 +83,7 @@ export default function SearchShop({ open, onCancel }: SearchShopProps) { />
+ {isError &&
에러가 발생했습니다.
} {filteredShopList?.map((shop) => (
- + @@ -277,27 +225,27 @@ export default function ShopRegistrationPC() {
{ - 전부_같은_시간인가 && !휴일이_있는_날이_있는가 ? ( + isAllSameTime && !hasClosedDay ? (
- {operateTimeState['시간']} + {operateTimeState.time}
) : null } { - 특정_날만_휴일이고_전부_같은_시간인가 ? ( + isSpecificDayClosedAndAllSameTime ? (
-
{operateTimeState['시간']}
-
{operateTimeState['휴일']}
+
{operateTimeState.time}
+
{operateTimeState.holiday}
) : null } { - !전부_같은_시간인가 && !특정_날만_휴일이고_전부_같은_시간인가 ? ( + !isAllSameTime && !isSpecificDayClosedAndAllSameTime ? ( <> {WEEK.map((day) => (
- {storeClosedState[day] ? `${operateTimeState[day]}` : `${day} : ${operateTimeState[day]}`} + {shopClosedState[day] ? `${operateTimeState[day]}` : `${day} : ${operateTimeState[day]}`}
))} From 9b5ff4f4e18c3cb3f1675b3026f4ec28c494fb1b Mon Sep 17 00:00:00 2001 From: dooohun Date: Thu, 23 Nov 2023 15:56:33 +0900 Subject: [PATCH 39/50] =?UTF-8?q?refactor:=20useImageUpload=20=ED=9B=85=20?= =?UTF-8?q?=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/{page/ShopRegistration => utils}/hooks/useImageUpload.ts | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename src/{page/ShopRegistration => utils}/hooks/useImageUpload.ts (100%) diff --git a/src/page/ShopRegistration/hooks/useImageUpload.ts b/src/utils/hooks/useImageUpload.ts similarity index 100% rename from src/page/ShopRegistration/hooks/useImageUpload.ts rename to src/utils/hooks/useImageUpload.ts From 1fe134b891d58a5602e29c753d022943e007655b Mon Sep 17 00:00:00 2001 From: dooohun Date: Thu, 23 Nov 2023 16:03:25 +0900 Subject: [PATCH 40/50] =?UTF-8?q?refactor:=20OperateTimeProps=EB=A5=BC=20R?= =?UTF-8?q?ecord=20Type=EC=9C=BC=EB=A1=9C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/page/ShopRegistration/hooks/useOperateTimeState.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/page/ShopRegistration/hooks/useOperateTimeState.ts b/src/page/ShopRegistration/hooks/useOperateTimeState.ts index 01e57dae..888ac8d0 100644 --- a/src/page/ShopRegistration/hooks/useOperateTimeState.ts +++ b/src/page/ShopRegistration/hooks/useOperateTimeState.ts @@ -2,7 +2,7 @@ import { useEffect, useState } from 'react'; import useModalStore from 'store/modalStore'; import { WEEK } from 'utils/constant/week'; -type OperateTimeProps = { [key: string]: string }; +type OperateTimeProps = Record; export default function useOperateTimeState() { const { From bbce10ee28208b2910af04f58e20d69578bf53a3 Mon Sep 17 00:00:00 2001 From: dooohun Date: Thu, 23 Nov 2023 16:07:45 +0900 Subject: [PATCH 41/50] =?UTF-8?q?refactor:=20useImageUpload=EB=A5=BC=20uti?= =?UTF-8?q?ls/hooks=EB=A1=9C=20=EC=9D=B4=EB=8F=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/page/ShopRegistration/view/PC/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/page/ShopRegistration/view/PC/index.tsx b/src/page/ShopRegistration/view/PC/index.tsx index 78c06160..ab3ced51 100644 --- a/src/page/ShopRegistration/view/PC/index.tsx +++ b/src/page/ShopRegistration/view/PC/index.tsx @@ -22,7 +22,7 @@ import { zodResolver } from '@hookform/resolvers/zod'; import { OwnerShop } from 'model/shopInfo/ownerShop'; import { useMutation } from '@tanstack/react-query'; import { postShop } from 'api/shop'; -import useImageUpload from 'page/ShopRegistration/hooks/useImageUpload'; +import useImageUpload from 'utils/hooks/useImageUpload'; import CheckSameTime from 'page/ShopRegistration/hooks/CheckSameTime'; import useOperateTimeState from 'page/ShopRegistration/hooks/useOperateTimeState'; import styles from './ShopRegistrationPC.module.scss'; From 073da355e660a61633e609647e9defeccb940f82 Mon Sep 17 00:00:00 2001 From: dooohun Date: Thu, 23 Nov 2023 16:09:02 +0900 Subject: [PATCH 42/50] =?UTF-8?q?refactor:=20=EA=B8=B0=EC=A1=B4=EC=9D=98?= =?UTF-8?q?=20=EB=B3=B5=EC=9E=A1=ED=95=9C=20=ED=83=80=EC=9E=85=EC=9D=84Ope?= =?UTF-8?q?ratingTime=EC=9C=BC=EB=A1=9C=20=EC=A0=95=EC=9D=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/store/modalStore.ts | 22 ++++++++++++---------- 1 file changed, 12 insertions(+), 10 deletions(-) diff --git a/src/store/modalStore.ts b/src/store/modalStore.ts index dc5722b5..db155d39 100644 --- a/src/store/modalStore.ts +++ b/src/store/modalStore.ts @@ -1,20 +1,22 @@ import { create } from 'zustand'; import { WEEK } from 'utils/constant/week'; +type OperatingTime = { [key in typeof WEEK[number]]: string | null }; + interface ModalStore { categoryState: [string, number]; - searchShopState: string, - openTimeState: { [key in typeof WEEK[number]]: string | null }, - closeTimeState: { [key in typeof WEEK[number]]: string | null }, - shopClosedState: { [key: string]: boolean }, - setCategoryState: (state: [string, number]) => void, - setSearchShopState: (state: string) => void, - setOpenTimeState: (state: { [key in typeof WEEK[number]]: string | null }) => void, - setCloseTimeState: (state: { [key in typeof WEEK[number]]: string | null }) => void, - setShopClosedState: (state: { [key : string]: boolean }) => void, + searchShopState: string; + openTimeState: OperatingTime; + closeTimeState: OperatingTime; + shopClosedState: { [key: string]: boolean }; + setCategoryState: (state: [string, number]) => void; + setSearchShopState: (state: string) => void; + setOpenTimeState: (state: OperatingTime) => void; + setCloseTimeState: (state: OperatingTime) => void; + setShopClosedState: (state: { [key: string]: boolean }) => void; } -const initialOperatingTime = { +const initialOperatingTime: OperatingTime = { 월: '00:00', 화: '00:00', 수: '00:00', From 7aebeeef2c8d169fd628b2d739ad75524225150c Mon Sep 17 00:00:00 2001 From: dooohun Date: Thu, 23 Nov 2023 16:21:22 +0900 Subject: [PATCH 43/50] =?UTF-8?q?refactor:=20InputBoxProps=EB=A1=9C=20?= =?UTF-8?q?=ED=83=80=EC=9E=85=EB=AA=85=20=ED=86=B5=EC=9D=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/page/ShopRegistration/component/InputBox/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/page/ShopRegistration/component/InputBox/index.tsx b/src/page/ShopRegistration/component/InputBox/index.tsx index e5c4b18e..be7ef7ed 100644 --- a/src/page/ShopRegistration/component/InputBox/index.tsx +++ b/src/page/ShopRegistration/component/InputBox/index.tsx @@ -3,7 +3,7 @@ import { OwnerShop } from 'model/shopInfo/ownerShop'; import { HTMLInputTypeAttribute } from 'react'; import styles from './InputBox.module.scss'; -interface InputProps { +interface InputBoxProps { content: string; id: keyof OwnerShop register: UseFormRegister; @@ -12,7 +12,7 @@ interface InputProps { export default function InputBox({ content, id, register, inputType, -}: InputProps) { +}: InputBoxProps) { return (
{day} - + + {' ~ '} - + + + handleChangeStoreClosed(day)} + checked={storeClosedState[day]} + />
{day} @@ -39,8 +39,8 @@ export default function OperateTimePC() { handleChangeStoreClosed(day)} - checked={storeClosedState[day]} + onChange={() => handleChangeShopClosed(day)} + checked={shopClosedState[day]} />
@@ -39,7 +42,7 @@ export default function OperateTimePC() { handleChangeShopClosed(day)} + onChange={() => handleShopClosedChange(day)} checked={shopClosedState[day]} /> From bbdff9335f3e4cc4db3d01c1826530aa851a6534 Mon Sep 17 00:00:00 2001 From: dooohun Date: Fri, 24 Nov 2023 20:15:29 +0900 Subject: [PATCH 46/50] =?UTF-8?q?feat:=20=EC=A0=84=ED=99=94=EB=B2=88?= =?UTF-8?q?=ED=98=B8=20=EC=9E=85=EB=A0=A5=20=EC=8B=9C=20=ED=95=98=EC=9D=B4?= =?UTF-8?q?=ED=94=88=20=EC=9E=90=EB=8F=99=20=EC=9E=85=EB=A0=A5=20=EA=B8=B0?= =?UTF-8?q?=EB=8A=A5=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../component/InputBox/index.tsx | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) diff --git a/src/page/ShopRegistration/component/InputBox/index.tsx b/src/page/ShopRegistration/component/InputBox/index.tsx index be7ef7ed..b93b772c 100644 --- a/src/page/ShopRegistration/component/InputBox/index.tsx +++ b/src/page/ShopRegistration/component/InputBox/index.tsx @@ -1,6 +1,6 @@ import type { UseFormRegister } from 'react-hook-form'; import { OwnerShop } from 'model/shopInfo/ownerShop'; -import { HTMLInputTypeAttribute } from 'react'; +import { HTMLInputTypeAttribute, useState } from 'react'; import styles from './InputBox.module.scss'; interface InputBoxProps { @@ -10,9 +10,24 @@ interface InputBoxProps { inputType: HTMLInputTypeAttribute; } +function formatPhoneNumber(inputNumber: string) { + const phoneNumber = inputNumber.replace(/\D/g, ''); + + const formattedPhoneNumber = phoneNumber.replace(/(\d{3})(\d{4})(\d{4})/, '$1-$2-$3'); + + return formattedPhoneNumber; +} + export default function InputBox({ content, id, register, inputType, }: InputBoxProps) { + const [formattedPhoneNumber, setFormattedPhoneNumber] = useState(''); + + const handlePhoneChange = (e: React.ChangeEvent) => { + const inputNumber = e.target.value; + const formattedNumber = formatPhoneNumber(inputNumber); + setFormattedPhoneNumber(formattedNumber); + }; return ( ); From 28eb56bb31a5e2f0ee1fcccde0f95207c7530d10 Mon Sep 17 00:00:00 2001 From: dooohun Date: Fri, 24 Nov 2023 20:18:53 +0900 Subject: [PATCH 47/50] =?UTF-8?q?style:=20=EA=B0=80=EA=B2=8C=20=ED=99=95?= =?UTF-8?q?=EC=9D=B8=20=EB=AA=A8=EB=8B=AC=20=EC=9C=84=EC=B9=98=20=EA=B3=A0?= =?UTF-8?q?=EC=A0=95=ED=95=98=EB=8F=84=EB=A1=9D=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../component/Modal/SearchShop/SearchShop.module.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/page/ShopRegistration/component/Modal/SearchShop/SearchShop.module.scss b/src/page/ShopRegistration/component/Modal/SearchShop/SearchShop.module.scss index 347b741e..5111c3f6 100644 --- a/src/page/ShopRegistration/component/Modal/SearchShop/SearchShop.module.scss +++ b/src/page/ShopRegistration/component/Modal/SearchShop/SearchShop.module.scss @@ -36,6 +36,7 @@ flex-direction: column; width: calc(100% - 34px); margin: 0 18px 0 16px; + min-height: 530px; } .store { From 4018363a1b9d83749798a14fdc9414b9fca1cfb8 Mon Sep 17 00:00:00 2001 From: dooohun Date: Fri, 24 Nov 2023 20:19:45 +0900 Subject: [PATCH 48/50] =?UTF-8?q?feat:=20=EB=AA=A8=EB=8B=AC=20=EC=98=A4?= =?UTF-8?q?=EB=B2=84=EB=A0=88=EC=9D=B4=20=EC=8A=A4=ED=81=AC=EB=A1=A4=20?= =?UTF-8?q?=EC=A0=9C=EC=96=B4=20=EA=B8=B0=EB=8A=A5=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/component/common/CustomModal/index.tsx | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/src/component/common/CustomModal/index.tsx b/src/component/common/CustomModal/index.tsx index 3e17c00c..4da4d13b 100644 --- a/src/component/common/CustomModal/index.tsx +++ b/src/component/common/CustomModal/index.tsx @@ -2,6 +2,7 @@ import { ReactComponent as XClose } from 'assets/svg/shopRegistration/close-x.sv import CustomButton from 'page/Auth/Signup/component/CustomButton'; import { createPortal } from 'react-dom'; import cn from 'utils/ts/className'; +import { useEffect } from 'react'; import styles from './CustomModal.module.scss'; interface CustomModalProps { @@ -18,6 +19,22 @@ interface CustomModalProps { export default function CustomModal({ buttonText = '', title, height, hasFooter, isOpen, isOverflowVisible, onCancel, children, }: CustomModalProps) { + useEffect(() => { + if (isOpen) { + document.body.style.cssText = ` + position: fixed; + top: -${window.scrollY}px; + overflow-y: scroll; + width: 100%;`; + return () => { + const scrollY = document.body.style.top; + document.body.style.cssText = ''; + window.scrollTo(0, parseInt(scrollY || '0', 10) * -1); + }; + } + return undefined; + }, [isOpen]); + if (!isOpen) return null; return createPortal(
From 8e9ce227d7fc10e4d7ae154903bba22efeb852c8 Mon Sep 17 00:00:00 2001 From: dooohun Date: Fri, 24 Nov 2023 21:01:43 +0900 Subject: [PATCH 49/50] =?UTF-8?q?refactor:=20height=EB=A5=BC=20modalSize?= =?UTF-8?q?=EB=A1=9C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../CustomModal/CustomModal.module.scss | 63 +++++++++++++++---- src/component/common/CustomModal/index.tsx | 9 ++- src/page/ShopRegistration/view/PC/index.tsx | 6 +- 3 files changed, 58 insertions(+), 20 deletions(-) diff --git a/src/component/common/CustomModal/CustomModal.module.scss b/src/component/common/CustomModal/CustomModal.module.scss index 6ac5064c..5ecd8d2c 100644 --- a/src/component/common/CustomModal/CustomModal.module.scss +++ b/src/component/common/CustomModal/CustomModal.module.scss @@ -11,15 +11,58 @@ } .container { - display: flex; - flex-direction: column; - align-items: center; - width: 430px; - background-color: #ffffff; - overflow: auto; + &__small { + display: flex; + flex-direction: column; + align-items: center; + width: 430px; + height: 434px; + background-color: #ffffff; + overflow: auto; + + &--visible { + overflow: visible; + } - &--selected { - overflow: visible; + &::-webkit-scrollbar { + display: none; + } + } + + &__medium { + display: flex; + flex-direction: column; + align-items: center; + width: 430px; + height: 536px; + background-color: #ffffff; + overflow: auto; + + &--visible { + overflow: visible; + } + + &::-webkit-scrollbar { + display: none; + } + } + + &__large { + display: flex; + flex-direction: column; + align-items: center; + width: 430px; + height: 75vh; + background-color: #ffffff; + overflow: auto; + + &--visible { + overflow: visible; + } + + &::-webkit-scrollbar { + display: none; + } } &__header { @@ -54,10 +97,6 @@ width: 366px; margin-bottom: 40px; } - - &::-webkit-scrollbar { - display: none; - } } .content { diff --git a/src/component/common/CustomModal/index.tsx b/src/component/common/CustomModal/index.tsx index 4da4d13b..80d40c07 100644 --- a/src/component/common/CustomModal/index.tsx +++ b/src/component/common/CustomModal/index.tsx @@ -8,7 +8,7 @@ import styles from './CustomModal.module.scss'; interface CustomModalProps { buttonText?: string; title: string; - height: string; + modalSize: string; hasFooter: boolean; isOpen: boolean; isOverflowVisible: boolean; @@ -17,7 +17,7 @@ interface CustomModalProps { } export default function CustomModal({ - buttonText = '', title, height, hasFooter, isOpen, isOverflowVisible, onCancel, children, + buttonText = '', title, modalSize, hasFooter, isOpen, isOverflowVisible, onCancel, children, }: CustomModalProps) { useEffect(() => { if (isOpen) { @@ -40,10 +40,9 @@ export default function CustomModal({
{title} diff --git a/src/page/ShopRegistration/view/PC/index.tsx b/src/page/ShopRegistration/view/PC/index.tsx index ab3ced51..f553efb2 100644 --- a/src/page/ShopRegistration/view/PC/index.tsx +++ b/src/page/ShopRegistration/view/PC/index.tsx @@ -175,7 +175,7 @@ export default function ShopRegistrationPC() { Date: Tue, 28 Nov 2023 21:47:11 +0900 Subject: [PATCH 50/50] =?UTF-8?q?refactor:=20getShopList=EB=A5=BC=20?= =?UTF-8?q?=EC=9D=B8=EC=A6=9D=EC=9D=B4=20=ED=95=84=EC=9A=94=ED=95=98?= =?UTF-8?q?=EC=A7=80=20=EC=95=8A=EB=8A=94=20=EC=9A=94=EC=B2=AD=EC=9C=BC?= =?UTF-8?q?=EB=A1=9C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/shop/index.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/api/shop/index.ts b/src/api/shop/index.ts index e39f9acc..23629969 100644 --- a/src/api/shop/index.ts +++ b/src/api/shop/index.ts @@ -1,7 +1,7 @@ import { MyShopListRes, MyShopInfoRes, MyShopParam } from 'model/shopInfo/myShopInfo'; import { MenuInfoRes } from 'model/shopInfo/menuCategory'; import { ShopListRes } from 'model/shopInfo/allShopInfo'; -import { accessClient } from 'api'; +import { accessClient, client } from 'api'; import { OwnerShop } from 'model/shopInfo/ownerShop'; export const getMyShopList = async () => { @@ -20,7 +20,7 @@ export const getMenuInfoList = async (param: MyShopParam) => { }; export const getShopList = async () => { - const { data } = await accessClient.get('/shops'); + const { data } = await client.get('/shops'); return ShopListRes.parse(data); };