Merge pull request #239 from BCSDLab/feature/#227/unify-owner-koin

[주변상점] 사장님 뷰 코인과 똑같이 변경, 이벤트 추가, 수정 진입점 추가

src/api/shop/index.ts

@@ -1,4 +1,6 @@
-import { MyShopListRes, MyShopInfoRes, MyShopParam } from 'model/shopInfo/myShopInfo';
+import {
+  MyShopListRes, MyShopInfoRes, MyShopParam, EventListParam, StoreEventResponse,
+} from 'model/shopInfo/myShopInfo';
 import { MonoMenu, MenuInfoRes } from 'model/shopInfo/menuCategory';
 import { ShopListRes } from 'model/shopInfo/allShopInfo';
 import { accessClient, client } from 'api';
@@ -41,4 +43,10 @@ export const putShop = (id: number, data: OwnerShop) => accessClient.put(`/owner
 
 export const deleteMenu = (menuId:number) => accessClient.delete(`/owner/shops/menus/${menuId}`);
 
+export const getStoreEventList = async (param : EventListParam) => {
+  const { data } = await accessClient.get<StoreEventResponse>(`/owner/shops/${param.id}/event`);
+  return StoreEventResponse.parse(data);
+};
 export const addEvent = (id: string, eventInfo: EventInfo) => accessClient.post(`owner/shops/${id}/event`, eventInfo);
+
+export const deleteEvent = (shopId: number, eventId:number) => accessClient.delete(`owner/shops/${shopId}/events/${eventId}`);

src/component/common/Modal/ImageModal/ImageModal.module.scss

@@ -0,0 +1,108 @@
+@use "src/utils/styles/mediaQuery" as media;
+
+.background {
+  position: fixed;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0 0 0 / 70%);
+  z-index: 21;
+}
+
+.image {
+  max-width: 574px;
+  max-height: 100%;
+  position: fixed;
+  margin: auto;
+
+  @include media.media-breakpoint-down(mobile) {
+    & {
+      max-width: calc(100% - 68px);
+      max-height: calc(100% - 100px);
+    }
+  }
+}
+
+.arrow-button {
+  width: 60px;
+  height: 60px;
+  outline: none;
+  border: 0;
+  z-index: 23;
+  background-size: 24px 24px;
+  background-position: 50% 50%;
+  background-repeat: no-repeat;
+  background-color: #252525;
+  border-radius: 50%;
+  box-sizing: border-box;
+  position: fixed;
+  top: calc((100vh - 60px) / 2);
+  cursor: pointer;
+
+  &:hover {
+    background-color: #f7941e;
+  }
+
+  @include media.media-breakpoint-down(mobile) {
+    & {
+      width: 24px;
+      height: 24px;
+      background-color: transparent;
+      top: calc((100vh - 24px) / 2);
+    }
+
+    &:hover {
+      background-color: transparent;
+    }
+  }
+
+  &--next {
+    background-image: url("https://static.koreatech.in/assets/img/next-arrow.png");
+    right: 50px;
+
+    @include media.media-breakpoint-down(mobile) {
+      right: 10px;
+    }
+  }
+
+  &--prev {
+    background-image: url("https://static.koreatech.in/assets/img/prev-arrow.png");
+    left: 50px;
+
+    @include media.media-breakpoint-down(mobile) {
+      left: 10px;
+    }
+  }
+}
+
+.close {
+  border: 0;
+  outline: 0;
+  position: fixed;
+  background-color: rgba(0 0 0 / 0%);
+  top: 33px;
+  right: 62px;
+  width: 33px;
+  height: 41px;
+  cursor: pointer;
+  background-image: url("https://static.koreatech.in/assets/img/close.png");
+
+  @include media.media-breakpoint-down(mobile) {
+    & {
+      top: 20px;
+      right: 20px;
+      width: 24px;
+      height: 24px;
+      background-size: 24px;
+      background-color: transparent;
+    }
+
+    &:hover {
+      background-color: transparent;
+    }
+  }
+}

src/component/common/Modal/ImageModal/hooks/useModalKeyboardEvent.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+
+interface KeyboardEventProps {
+  onClose: () => void
+  onChangeImageIndex: (move: number) => void
+}
+
+function useModalKeyboardEvent({ onClose, onChangeImageIndex }: KeyboardEventProps) {
+  React.useEffect(() => {
+    function pressKey(event: KeyboardEvent) {
+      if (event.code === 'Escape') {
+        onClose();
+      } else if (event.code === 'ArrowLeft') {
+        onChangeImageIndex(-1);
+      } else if (event.code === 'ArrowRight') {
+        onChangeImageIndex(1);
+      }
+    }
+    window.addEventListener('keydown', pressKey, true);
+    return () => {
+      window.removeEventListener('keydown', pressKey, true);
+    };
+  }, [onClose, onChangeImageIndex]);
+}
+
+export default useModalKeyboardEvent;