From 3d4c50a7ef5e61c2ccf3626474b9565297ec1251 Mon Sep 17 00:00:00 2001 From: MinGu Jeong Date: Wed, 3 Apr 2024 01:32:15 +0900 Subject: [PATCH 01/13] =?UTF-8?q?feat:=20=EC=98=81=EC=96=91=EC=82=AC?= =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=9D=BC=EC=9A=B0=ED=8C=85=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/App.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/App.tsx b/src/App.tsx index 38170254..54b1cebd 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -13,6 +13,7 @@ import PageNotFound from 'page/Error/PageNotFound'; import ModifyMenu from 'page/ModifyMenu'; import { Suspense } from 'react'; import Toast from 'component/common/Toast'; +import Coop from 'page/Coop'; function App() { return ( @@ -28,6 +29,7 @@ function App() { } /> } /> } /> + } /> }> } /> From 7f349ea601f7723624d9f1df45e4efcd77b15831 Mon Sep 17 00:00:00 2001 From: MinGu Jeong Date: Wed, 3 Apr 2024 01:33:16 +0900 Subject: [PATCH 02/13] =?UTF-8?q?feat:=20=EC=98=81=EC=96=91=EC=82=AC?= =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20API?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/coop/index.ts | 6 ++++++ src/model/Coop/index.ts | 17 +++++++++++++++++ src/query/coop.ts | 16 ++++++++++++++++ 3 files changed, 39 insertions(+) create mode 100644 src/api/coop/index.ts create mode 100644 src/model/Coop/index.ts create mode 100644 src/query/coop.ts diff --git a/src/api/coop/index.ts b/src/api/coop/index.ts new file mode 100644 index 00000000..050b08cc --- /dev/null +++ b/src/api/coop/index.ts @@ -0,0 +1,6 @@ +import { accessClient } from 'api'; + +export const getDining = async () => { + const { data } = await accessClient.get('/dinings'); + return data; +}; diff --git a/src/model/Coop/index.ts b/src/model/Coop/index.ts new file mode 100644 index 00000000..6028444e --- /dev/null +++ b/src/model/Coop/index.ts @@ -0,0 +1,17 @@ +import z from 'zod'; + +export type Menus = '아침' | '점심' | '저녁'; + +export const Dinings = z.object({ + date: z.string(), + id: z.number(), + kcal: z.number(), + menu: z.array(z.string()), + place: z.string(), + price_card: z.number(), + price_cash: z.number(), + type: z.string(), + updated_at: z.string(), +}); + +export type Dinings = z.infer; diff --git a/src/query/coop.ts b/src/query/coop.ts new file mode 100644 index 00000000..47939dd5 --- /dev/null +++ b/src/query/coop.ts @@ -0,0 +1,16 @@ +import { useQueryClient, useSuspenseQuery } from '@tanstack/react-query'; +import { getDining } from 'api/coop'; +import { Dinings } from 'model/Coop'; + +export const useGetDining = () => { + const queryClient = useQueryClient(); + const { data } = useSuspenseQuery( + { + queryKey: ['dining'], + queryFn: getDining, + }, + ); + return { + data, + }; +}; From ba52f271e6d71909d23a0aa022f4d2bd6e08a72f Mon Sep 17 00:00:00 2001 From: MinGu Jeong Date: Wed, 3 Apr 2024 01:33:42 +0900 Subject: [PATCH 03/13] =?UTF-8?q?feat:=20=EC=98=81=EC=96=91=EC=82=AC?= =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/component/common/Header/index.tsx | 2 +- src/page/Coop/Coop.module.scss | 42 +++++++++++++++ .../components/MenuCard/MenuCard.module.scss | 48 +++++++++++++++++ src/page/Coop/components/MenuCard/index.tsx | 44 ++++++++++++++++ .../components/MenuType/MenuType.module.scss | 34 ++++++++++++ src/page/Coop/components/MenuType/index.tsx | 52 +++++++++++++++++++ .../SoldoutToggle/SoldoutToggle.module.scss | 15 ++++++ .../Coop/components/SoldoutToggle/index.tsx | 17 ++++++ src/page/Coop/index.tsx | 15 ++++++ 9 files changed, 268 insertions(+), 1 deletion(-) create mode 100644 src/page/Coop/Coop.module.scss create mode 100644 src/page/Coop/components/MenuCard/MenuCard.module.scss create mode 100644 src/page/Coop/components/MenuCard/index.tsx create mode 100644 src/page/Coop/components/MenuType/MenuType.module.scss create mode 100644 src/page/Coop/components/MenuType/index.tsx create mode 100644 src/page/Coop/components/SoldoutToggle/SoldoutToggle.module.scss create mode 100644 src/page/Coop/components/SoldoutToggle/index.tsx create mode 100644 src/page/Coop/index.tsx diff --git a/src/component/common/Header/index.tsx b/src/component/common/Header/index.tsx index ba553a3a..e98a1d5f 100644 --- a/src/component/common/Header/index.tsx +++ b/src/component/common/Header/index.tsx @@ -89,7 +89,7 @@ function Header() { )} - {pathname === '/' ? ( + {pathname === '/' || pathname === '/coop' ? ( ) : (CATEGORY .flatMap((categoryValue) => categoryValue.submenu) diff --git a/src/page/Coop/Coop.module.scss b/src/page/Coop/Coop.module.scss new file mode 100644 index 00000000..e1772022 --- /dev/null +++ b/src/page/Coop/Coop.module.scss @@ -0,0 +1,42 @@ +.container { + display: flex; + flex-direction: column; + background-color: #f5f5f5; + width: 390px; + height: 100vh; +} + +.place { + &__container { + display: flex; + align-items: center; + gap: 8px; + margin-top: 24px; + margin-left: 24px; + } + + &__button--selected { + width: 60px; + height: 30px; + background-color: #175c8e; + color: #fff; + display: flex; + align-items: center; + justify-content: center; + border-radius: 999px; + cursor: pointer; + } + + &__button--unselected { + width: 60px; + height: 30px; + background-color: #fff; + color: #175c8e; + display: flex; + align-items: center; + justify-content: center; + border: solid 1px #175c8e; + border-radius: 999px; + cursor: pointer; + } +} diff --git a/src/page/Coop/components/MenuCard/MenuCard.module.scss b/src/page/Coop/components/MenuCard/MenuCard.module.scss new file mode 100644 index 00000000..be13b791 --- /dev/null +++ b/src/page/Coop/components/MenuCard/MenuCard.module.scss @@ -0,0 +1,48 @@ +.container { + display: flex; + flex-direction: column; +} + +.card { + display: flex; + flex-direction: column; + background-color: #fff; + + &__header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 1rem; + border-bottom: 1px solid #e0e0e0; + } + + &__title { + font-size: 18px; + font-weight: 500; + } + + &__content { + display: flex; + flex-direction: column; + font-size: 12px; + font-weight: 400; + line-height: 15px; + } + + &__image { + width: 150px; + } + + &__wrapper { + display: flex; + align-items: center; + justify-content: space-between; + padding: 12px; + } + + &__soldout { + color: #8e8e8e; + font-size: 13px; + font-weight: 400; + } +} diff --git a/src/page/Coop/components/MenuCard/index.tsx b/src/page/Coop/components/MenuCard/index.tsx new file mode 100644 index 00000000..baf8d3bc --- /dev/null +++ b/src/page/Coop/components/MenuCard/index.tsx @@ -0,0 +1,44 @@ +import { useGetDining } from 'query/coop'; +import { Menus } from 'model/Coop'; +import SoldoutToggle from 'page/Coop/components/SoldoutToggle'; +import styles from './MenuCard.module.scss'; + +interface MenuCardProps { + selectedMenuType: Menus; +} + +export default function MenuCard({ selectedMenuType }: MenuCardProps) { + const { data } = useGetDining(); + return ( +
+
+

{selectedMenuType}

+
+
+
+
+ A코너 +
+ 품절 + +
+
+
+
이미지공간
+
+ 피자 + 치킨 +
+
+ +
+ {data?.map((menu:any) => ( +
+

{menu.place}

+

{menu.menu.join(', ')}

+
+ ))} +
+
+ ); +} diff --git a/src/page/Coop/components/MenuType/MenuType.module.scss b/src/page/Coop/components/MenuType/MenuType.module.scss new file mode 100644 index 00000000..01475c7e --- /dev/null +++ b/src/page/Coop/components/MenuType/MenuType.module.scss @@ -0,0 +1,34 @@ +.place { + &__container { + display: flex; + align-items: center; + gap: 8px; + margin-top: 24px; + margin-left: 24px; + } + + &__button--selected { + width: 60px; + height: 30px; + background-color: #175c8e; + color: #fff; + display: flex; + align-items: center; + justify-content: center; + border-radius: 999px; + cursor: pointer; + } + + &__button--unselected { + width: 60px; + height: 30px; + background-color: #fff; + color: #175c8e; + display: flex; + align-items: center; + justify-content: center; + border: solid 1px #175c8e; + border-radius: 999px; + cursor: pointer; + } +} diff --git a/src/page/Coop/components/MenuType/index.tsx b/src/page/Coop/components/MenuType/index.tsx new file mode 100644 index 00000000..1c291adb --- /dev/null +++ b/src/page/Coop/components/MenuType/index.tsx @@ -0,0 +1,52 @@ +import { useState } from 'react'; +import cn from 'utils/ts/className'; +import { Menus } from 'model/Coop'; +import styles from './MenuType.module.scss'; + +interface MenuTypeProps { + selectedMenuType: Menus; + setSelectedMenuType: (menuType: Menus) => void; +} + +export default function MenuType({ selectedMenuType, setSelectedMenuType }: MenuTypeProps) { + return ( +
+ + + +
+ ); +} diff --git a/src/page/Coop/components/SoldoutToggle/SoldoutToggle.module.scss b/src/page/Coop/components/SoldoutToggle/SoldoutToggle.module.scss new file mode 100644 index 00000000..d4d44d08 --- /dev/null +++ b/src/page/Coop/components/SoldoutToggle/SoldoutToggle.module.scss @@ -0,0 +1,15 @@ +.toggleButton { + width: 46px; + height: 23px; + cursor: pointer; + + .background { + rx: 9.5; + stroke-width: 3; + } + + .circle { + r: 8; + fill: white; + } +} diff --git a/src/page/Coop/components/SoldoutToggle/index.tsx b/src/page/Coop/components/SoldoutToggle/index.tsx new file mode 100644 index 00000000..1e88fad8 --- /dev/null +++ b/src/page/Coop/components/SoldoutToggle/index.tsx @@ -0,0 +1,17 @@ +import { useState } from 'react'; +import styles from './SoldoutToggle.module.scss'; + +export default function SoldoutToggle() { + const [isActive, setIsActive] = useState(false); + + const toggleButton = () => { + setIsActive(!isActive); + }; + + return ( + + + + + ); +} diff --git a/src/page/Coop/index.tsx b/src/page/Coop/index.tsx new file mode 100644 index 00000000..c2627413 --- /dev/null +++ b/src/page/Coop/index.tsx @@ -0,0 +1,15 @@ +import { useState } from 'react'; +import { Menus } from 'model/Coop'; +import MenuCard from './components/MenuCard'; +import MenuType from './components/MenuType'; +import styles from './Coop.module.scss'; + +export default function Coop() { + const [selectedMenuType, setSelectedMenuType] = useState('아침'); + return ( +
+ + +
+ ); +} From ad1a062772e7572353ad39ed5bb9b8e2b1dbd559 Mon Sep 17 00:00:00 2001 From: MinGu Jeong Date: Thu, 4 Apr 2024 16:39:03 +0900 Subject: [PATCH 04/13] =?UTF-8?q?feat:=20=EC=B9=B4=EB=A9=94=EB=9D=BC=20?= =?UTF-8?q?=EC=95=84=EC=9D=B4=EC=BD=98=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/svg/coop/photo.svg | 8 ++++++++ 1 file changed, 8 insertions(+) create mode 100644 src/assets/svg/coop/photo.svg diff --git a/src/assets/svg/coop/photo.svg b/src/assets/svg/coop/photo.svg new file mode 100644 index 00000000..072b2982 --- /dev/null +++ b/src/assets/svg/coop/photo.svg @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file From 295946a27d6d62cad9e29f91270c4c98a3b7234d Mon Sep 17 00:00:00 2001 From: MinGu Jeong Date: Thu, 4 Apr 2024 16:39:36 +0900 Subject: [PATCH 05/13] =?UTF-8?q?feat:=20=EC=8B=9D=EB=8B=A8=20API=20?= =?UTF-8?q?=ED=83=80=EC=9E=85=20=EC=B6=94=EA=B0=80=EC=A0=95=EC=9D=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/model/Coop/index.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/model/Coop/index.ts b/src/model/Coop/index.ts index 6028444e..b675da84 100644 --- a/src/model/Coop/index.ts +++ b/src/model/Coop/index.ts @@ -12,6 +12,8 @@ export const Dinings = z.object({ price_cash: z.number(), type: z.string(), updated_at: z.string(), + sold_out: z.boolean(), + is_changed: z.boolean(), }); export type Dinings = z.infer; From 0e9ba67f556bd19f0f31bf7c8b06bc3013d76608 Mon Sep 17 00:00:00 2001 From: MinGu Jeong Date: Thu, 4 Apr 2024 16:40:03 +0900 Subject: [PATCH 06/13] =?UTF-8?q?feat:=20=EC=9B=B9=EC=97=90=EC=84=9C=20cen?= =?UTF-8?q?ter=20=EC=A0=95=EB=A0=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/page/Coop/Coop.module.scss | 9 ++++++++- src/page/Coop/index.tsx | 8 +++++--- 2 files changed, 13 insertions(+), 4 deletions(-) diff --git a/src/page/Coop/Coop.module.scss b/src/page/Coop/Coop.module.scss index e1772022..32e9f901 100644 --- a/src/page/Coop/Coop.module.scss +++ b/src/page/Coop/Coop.module.scss @@ -3,7 +3,14 @@ flex-direction: column; background-color: #f5f5f5; width: 390px; - height: 100vh; + min-height: 100vh; + height: 100%; +} + +.container-wrapper { + display: flex; + justify-content: center; + align-items: center; } .place { diff --git a/src/page/Coop/index.tsx b/src/page/Coop/index.tsx index c2627413..88a0e2e2 100644 --- a/src/page/Coop/index.tsx +++ b/src/page/Coop/index.tsx @@ -7,9 +7,11 @@ import styles from './Coop.module.scss'; export default function Coop() { const [selectedMenuType, setSelectedMenuType] = useState('아침'); return ( -
- - +
+
+ + +
); } From c55330c000b03c7836a96b6463ed2597633790be Mon Sep 17 00:00:00 2001 From: MinGu Jeong Date: Fri, 5 Apr 2024 03:46:15 +0900 Subject: [PATCH 07/13] =?UTF-8?q?feat:=20=ED=86=A0=EA=B8=80=EB=B2=84?= =?UTF-8?q?=ED=8A=BC=20=EB=B0=8F=20css=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/MenuCard/MenuCard.module.scss | 25 +++++++++++++++++-- .../components/MenuType/MenuType.module.scss | 4 +-- .../Coop/components/SoldoutToggle/index.tsx | 2 +- 3 files changed, 26 insertions(+), 5 deletions(-) diff --git a/src/page/Coop/components/MenuCard/MenuCard.module.scss b/src/page/Coop/components/MenuCard/MenuCard.module.scss index be13b791..561bd48c 100644 --- a/src/page/Coop/components/MenuCard/MenuCard.module.scss +++ b/src/page/Coop/components/MenuCard/MenuCard.module.scss @@ -7,13 +7,16 @@ display: flex; flex-direction: column; background-color: #fff; + margin: 10px 20px; + border-radius: 4px; + box-shadow: 0 1px 9px 1px rgb(0 0 0 / 6%); &__header { display: flex; justify-content: space-between; align-items: center; - padding: 1rem; border-bottom: 1px solid #e0e0e0; + padding: 10px; } &__title { @@ -27,17 +30,35 @@ font-size: 12px; font-weight: 400; line-height: 15px; + width: 150px; } &__image { width: 150px; + height: 100px; + flex-shrink: 0; + border-radius: 4px; + border: 1px solid #cacaca; + background: #fafafa; + display: flex; + align-items: center; + justify-content: center; + object-fit: scale-down; + } + + &__soldout-wrapper { + display: flex; + align-items: center; + justify-content: center; + gap: 8px; } &__wrapper { display: flex; align-items: center; - justify-content: space-between; + justify-content: center; padding: 12px; + gap: 40px; } &__soldout { diff --git a/src/page/Coop/components/MenuType/MenuType.module.scss b/src/page/Coop/components/MenuType/MenuType.module.scss index 01475c7e..bcd3bb0d 100644 --- a/src/page/Coop/components/MenuType/MenuType.module.scss +++ b/src/page/Coop/components/MenuType/MenuType.module.scss @@ -9,7 +9,7 @@ &__button--selected { width: 60px; - height: 30px; + height: 33px; background-color: #175c8e; color: #fff; display: flex; @@ -21,7 +21,7 @@ &__button--unselected { width: 60px; - height: 30px; + height: 33px; background-color: #fff; color: #175c8e; display: flex; diff --git a/src/page/Coop/components/SoldoutToggle/index.tsx b/src/page/Coop/components/SoldoutToggle/index.tsx index 1e88fad8..f7aab520 100644 --- a/src/page/Coop/components/SoldoutToggle/index.tsx +++ b/src/page/Coop/components/SoldoutToggle/index.tsx @@ -2,7 +2,7 @@ import { useState } from 'react'; import styles from './SoldoutToggle.module.scss'; export default function SoldoutToggle() { - const [isActive, setIsActive] = useState(false); + const [isActive, setIsActive] = useState(true); const toggleButton = () => { setIsActive(!isActive); From 1af670123076a12e656d39639b8abefd780df5b9 Mon Sep 17 00:00:00 2001 From: MinGu Jeong Date: Fri, 5 Apr 2024 03:46:40 +0900 Subject: [PATCH 08/13] =?UTF-8?q?feat:=20=EC=98=81=EC=96=91=EC=82=AC?= =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20?= =?UTF-8?q?=EC=97=85=EB=A1=9C=EB=93=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/coop/index.ts | 9 ++ src/model/Coop/index.ts | 14 ++++ src/page/Coop/components/MenuCard/index.tsx | 92 ++++++++++++++++----- src/query/coop.ts | 33 +++++++- 4 files changed, 125 insertions(+), 23 deletions(-) diff --git a/src/api/coop/index.ts b/src/api/coop/index.ts index 050b08cc..4791562f 100644 --- a/src/api/coop/index.ts +++ b/src/api/coop/index.ts @@ -1,6 +1,15 @@ import { accessClient } from 'api'; +import { DiningImages, SoldOut } from 'model/Coop'; export const getDining = async () => { const { data } = await accessClient.get('/dinings'); return data; }; + +export const uploadDiningImage = async (data: DiningImages) => { + await accessClient.patch('/coop/dining/image', data); +}; + +export const updateSoldOut = async (data: SoldOut) => { + await accessClient.patch('/coop/dining/soldout', data); +}; diff --git a/src/model/Coop/index.ts b/src/model/Coop/index.ts index b675da84..4ccdad2f 100644 --- a/src/model/Coop/index.ts +++ b/src/model/Coop/index.ts @@ -17,3 +17,17 @@ export const Dinings = z.object({ }); export type Dinings = z.infer; + +export const DiningImages = z.object({ + menuId: z.number(), + imageUrl: z.string(), +}); + +export type DiningImages = z.infer; + +export const SoldOut = z.object({ + menuId: z.number(), + soldOut: z.boolean(), +}); + +export type SoldOut = z.infer; diff --git a/src/page/Coop/components/MenuCard/index.tsx b/src/page/Coop/components/MenuCard/index.tsx index baf8d3bc..171ac43d 100644 --- a/src/page/Coop/components/MenuCard/index.tsx +++ b/src/page/Coop/components/MenuCard/index.tsx @@ -1,6 +1,8 @@ import { useGetDining } from 'query/coop'; -import { Menus } from 'model/Coop'; +import { Dinings, Menus } from 'model/Coop'; import SoldoutToggle from 'page/Coop/components/SoldoutToggle'; +import { ReactComponent as Photo } from 'assets/svg/coop/photo.svg'; +import { useRef, useState } from 'react'; import styles from './MenuCard.module.scss'; interface MenuCardProps { @@ -9,36 +11,88 @@ interface MenuCardProps { export default function MenuCard({ selectedMenuType }: MenuCardProps) { const { data } = useGetDining(); + const [selectedImages, setSelectedImages] = useState<{ [key: number]: string }>({}); + const fileInputRefs = useRef<{ [key: number]: HTMLInputElement | null }>({}); + + const handleImageChange = (menuId: number) => (event: React.ChangeEvent) => { + if (event.target.files && event.target.files[0]) { + const fileReader = new FileReader(); + fileReader.onload = (e) => { + setSelectedImages((prevImages) => ({ + ...prevImages, + [menuId]: e.target?.result as string, + })); + }; + fileReader.readAsDataURL(event.target.files[0]); + } + }; + + const handleImageClick = (menuId: number) => () => { + fileInputRefs.current[menuId]?.click(); + }; + + const getDiningType = (menuType: Menus) => { + switch (menuType) { + case '아침': + return 'BREAKFAST'; + case '점심': + return 'LUNCH'; + case '저녁': + return 'DINNER'; + default: + return ''; + } + }; + + const filteredData = data?.filter((menu:Dinings) => { + const diningType = getDiningType(selectedMenuType); + return menu.type === diningType && ['A코너', 'B코너', 'C코너'].includes(menu.place); + }); + return (
-
-

{selectedMenuType}

-
-
-
+ {filteredData?.map((menu: Dinings) => ( +
- A코너 -
+ {menu.place} +
품절
-
이미지공간
+
{ + if (event.key === 'Enter') handleImageClick(menu.id)(); + }} + role="button" + tabIndex={0} + > + {selectedImages[menu.id] ? ( + + ) : ( + + )} +
- 피자 - 치킨 + {menu.menu.map((item) => ( +
{item}
+ ))}
- + { + fileInputRefs.current[menu.id] = el; + }} + />
- {data?.map((menu:any) => ( -
-

{menu.place}

-

{menu.menu.join(', ')}

-
- ))} -
+ ))}
); } diff --git a/src/query/coop.ts b/src/query/coop.ts index 47939dd5..2a0fa2e5 100644 --- a/src/query/coop.ts +++ b/src/query/coop.ts @@ -1,9 +1,8 @@ -import { useQueryClient, useSuspenseQuery } from '@tanstack/react-query'; -import { getDining } from 'api/coop'; -import { Dinings } from 'model/Coop'; +import { useMutation, useQueryClient, useSuspenseQuery } from '@tanstack/react-query'; +import { getDining, updateSoldOut, uploadDiningImage } from 'api/coop'; +import { DiningImages, SoldOut } from 'model/Coop'; export const useGetDining = () => { - const queryClient = useQueryClient(); const { data } = useSuspenseQuery( { queryKey: ['dining'], @@ -14,3 +13,29 @@ export const useGetDining = () => { data, }; }; + +export const useUpdateSoldOut = () => { + const queryClient = useQueryClient(); + const { mutate: updateSoldOutMutation } = useMutation({ + mutationFn: (data: SoldOut) => updateSoldOut(data), + onSuccess: () => { + queryClient.invalidateQueries(); + }, + }); + return { + updateSoldOutMutation, + }; +}; + +export const useUploadDiningImage = () => { + const queryClient = useQueryClient(); + const { mutate: uploadDiningImageMutation } = useMutation({ + mutationFn: (data: DiningImages) => uploadDiningImage(data), + onSuccess: () => { + queryClient.invalidateQueries(); + }, + }); + return { + uploadDiningImageMutation, + }; +}; From e1e5bce2d8448b6754726d34ba4061746189ae4d Mon Sep 17 00:00:00 2001 From: MinGu Jeong Date: Fri, 5 Apr 2024 03:56:48 +0900 Subject: [PATCH 09/13] =?UTF-8?q?fix:=20lint=EC=97=90=EB=9F=AC=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 --- src/page/Coop/components/MenuType/index.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/page/Coop/components/MenuType/index.tsx b/src/page/Coop/components/MenuType/index.tsx index 1c291adb..75721d2f 100644 --- a/src/page/Coop/components/MenuType/index.tsx +++ b/src/page/Coop/components/MenuType/index.tsx @@ -1,4 +1,3 @@ -import { useState } from 'react'; import cn from 'utils/ts/className'; import { Menus } from 'model/Coop'; import styles from './MenuType.module.scss'; From c96ac57e70086a0bef995a171b49750c075face3 Mon Sep 17 00:00:00 2001 From: MinGu Jeong Date: Fri, 5 Apr 2024 22:24:56 +0900 Subject: [PATCH 10/13] =?UTF-8?q?refactor:=20=EB=A9=94=EB=89=B4=ED=83=80?= =?UTF-8?q?=EC=9E=85=20=EC=83=81=EC=88=98=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/model/Coop/index.ts | 8 ++++++++ src/page/Coop/components/MenuCard/index.tsx | 15 ++------------- 2 files changed, 10 insertions(+), 13 deletions(-) diff --git a/src/model/Coop/index.ts b/src/model/Coop/index.ts index 4ccdad2f..cab6b90d 100644 --- a/src/model/Coop/index.ts +++ b/src/model/Coop/index.ts @@ -2,6 +2,14 @@ import z from 'zod'; export type Menus = '아침' | '점심' | '저녁'; +export type DiningTypes = 'BREAKFAST' | 'LUNCH' | 'DINNER'; + +export const DINING_TYPES: Record = { + 아침: 'BREAKFAST', + 점심: 'LUNCH', + 저녁: 'DINNER', +}; + export const Dinings = z.object({ date: z.string(), id: z.number(), diff --git a/src/page/Coop/components/MenuCard/index.tsx b/src/page/Coop/components/MenuCard/index.tsx index 171ac43d..19a4a118 100644 --- a/src/page/Coop/components/MenuCard/index.tsx +++ b/src/page/Coop/components/MenuCard/index.tsx @@ -1,5 +1,5 @@ import { useGetDining } from 'query/coop'; -import { Dinings, Menus } from 'model/Coop'; +import { Dinings, Menus, DINING_TYPES } from 'model/Coop'; import SoldoutToggle from 'page/Coop/components/SoldoutToggle'; import { ReactComponent as Photo } from 'assets/svg/coop/photo.svg'; import { useRef, useState } from 'react'; @@ -31,18 +31,7 @@ export default function MenuCard({ selectedMenuType }: MenuCardProps) { fileInputRefs.current[menuId]?.click(); }; - const getDiningType = (menuType: Menus) => { - switch (menuType) { - case '아침': - return 'BREAKFAST'; - case '점심': - return 'LUNCH'; - case '저녁': - return 'DINNER'; - default: - return ''; - } - }; + const getDiningType = (menuType: Menus) => DINING_TYPES[menuType]; const filteredData = data?.filter((menu:Dinings) => { const diningType = getDiningType(selectedMenuType); From 1abbab28858a399dae2fe438bed422fd190c9592 Mon Sep 17 00:00:00 2001 From: MinGu Jeong Date: Fri, 5 Apr 2024 22:29:08 +0900 Subject: [PATCH 11/13] =?UTF-8?q?refactor:=20=EB=A9=94=EB=89=B4=ED=83=80?= =?UTF-8?q?=EC=9E=85=20BEM=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Coop/components/MenuType/MenuType.module.scss | 14 +++++++------- src/page/Coop/components/MenuType/index.tsx | 6 +++--- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/src/page/Coop/components/MenuType/MenuType.module.scss b/src/page/Coop/components/MenuType/MenuType.module.scss index bcd3bb0d..b9c5006c 100644 --- a/src/page/Coop/components/MenuType/MenuType.module.scss +++ b/src/page/Coop/components/MenuType/MenuType.module.scss @@ -7,27 +7,27 @@ margin-left: 24px; } - &__button--selected { + &__button { width: 60px; height: 33px; - background-color: #175c8e; - color: #fff; + background-color: #fff; + color: #175c8e; display: flex; align-items: center; justify-content: center; + border: solid 1px #175c8e; border-radius: 999px; cursor: pointer; } - &__button--unselected { + &__button--selected { width: 60px; height: 33px; - background-color: #fff; - color: #175c8e; + background-color: #175c8e; + color: #fff; display: flex; align-items: center; justify-content: center; - border: solid 1px #175c8e; border-radius: 999px; cursor: pointer; } diff --git a/src/page/Coop/components/MenuType/index.tsx b/src/page/Coop/components/MenuType/index.tsx index 75721d2f..92b07fff 100644 --- a/src/page/Coop/components/MenuType/index.tsx +++ b/src/page/Coop/components/MenuType/index.tsx @@ -13,7 +13,7 @@ export default function MenuType({ selectedMenuType, setSelectedMenuType }: Menu