Merge pull request #44 from Project-Unifest/feature/booth-opening-time

LGTM
Project-Unifest · Sep 22, 2024 · f2a4486 · f2a4486 · github-actions · Sep 22, 2024
2 parents 5cf667d + 37afd75
commit f2a4486
Show file tree

Hide file tree

Showing 13 changed files with 280 additions and 0 deletions.
diff --git a/app/globals.css b/app/globals.css
@@ -1,3 +1,13 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@layer utilities {
+  /* Tailwind에서 시계 아이콘 숨기기 */
+  .no-calendar-indicator::-webkit-calendar-picker-indicator {
+    display: none;
+  }
+  .no-calendar-indicator::-moz-focus-inner {
+    border: 0;
+  }
+}
diff --git a/mocks/api/constants/booths.ts b/mocks/api/constants/booths.ts
@@ -15,8 +15,12 @@ export const booths: Booth[] = [
     longitude: 0.0,
     menus: [],
     enabled: true,
+    openTime: null,
+    closeTime: null,
   },
   {
+    openTime: null,
+    closeTime: null,
     id: 1,
     name: "부동산학관 부스",
     category: "FOOD",
@@ -56,6 +60,8 @@ export const booths: Booth[] = [
     enabled: false,
   },
   {
+    openTime: null,
+    closeTime: null,
     id: 2,
     name: "공대주점",
     category: "BAR",
@@ -112,6 +118,8 @@ export const booths: Booth[] = [
     enabled: true,
   },
   {
+    openTime: null,
+    closeTime: null,
     id: 3,
     name: "생명대 화장실",
     category: "TOILET",
@@ -126,6 +134,8 @@ export const booths: Booth[] = [
     enabled: true,
   },
   {
+    openTime: null,
+    closeTime: null,
     id: 4,
     name: "법학관 의무실",
     category: "MEDICAL",
@@ -141,6 +151,8 @@ export const booths: Booth[] = [
     enabled: true,
   },
   {
+    openTime: null,
+    closeTime: null,
     id: 5,
     name: "유니페스",
     category: "EVENT",
@@ -155,6 +167,8 @@ export const booths: Booth[] = [
     enabled: true,
   },
   {
+    openTime: null,
+    closeTime: null,
     id: 6,
     name: "일감호 보트",
     category: "EVENT",

diff --git a/mocks/api/constants/members.ts b/mocks/api/constants/members.ts
@@ -5,6 +5,8 @@ export const member: Member = {
   email: "[email protected]",
   booths: [
     {
+      openTime: null,
+      closeTime: null,
       id: 0,
       name: "주점주점주점주점주점주점주점주점주점주점주점주점주점주점주점주점주점주점주점주점주점주점주점주점주점주점주점주점주점주점주점주점주점주점주점주점주점주점주점주점주점주점주점",
       category: "BAR",
@@ -20,6 +22,8 @@ export const member: Member = {
       enabled: true,
     },
     {
+      openTime: null,
+      closeTime: null,
       id: 1,
       name: "부동산학관 부스",
       category: "FOOD",
@@ -59,6 +63,8 @@ export const member: Member = {
       enabled: false,
     },
     {
+      openTime: null,
+      closeTime: null,
       id: 2,
       name: "공대주점",
       category: "BAR",
@@ -115,6 +121,8 @@ export const member: Member = {
       enabled: true,
     },
     {
+      openTime: null,
+      closeTime: null,
       id: 3,
       name: "생명대 화장실",
       category: "TOILET",
@@ -129,6 +137,8 @@ export const member: Member = {
       enabled: true,
     },
     {
+      openTime: null,
+      closeTime: null,
       id: 4,
       name: "법학관 의무실",
       category: "MEDICAL",
@@ -144,6 +154,8 @@ export const member: Member = {
       enabled: true,
     },
     {
+      openTime: null,
+      closeTime: null,
       id: 5,
       name: "유니페스",
       category: "EVENT",
@@ -158,6 +170,8 @@ export const member: Member = {
       enabled: true,
     },
     {
+      openTime: null,
+      closeTime: null,
       id: 6,
       name: "일감호 보트",
       category: "EVENT",

diff --git a/src/features/booth/api/addBooth.ts b/src/features/booth/api/addBooth.ts
@@ -30,6 +30,8 @@ interface BoothForCreate {
   menus: ProductForCreate[];
   enabled?: boolean;
   festivalId: number;
+  openTime: null | string;
+  closeTime: null | string;
 }
 // TODO add body
 export const addBooth = async (accessToken: string, booth: Booth) => {

diff --git a/src/features/booth/index.ts b/src/features/booth/index.ts
@@ -1,6 +1,7 @@
 export { EditImageBox as BoothEditImageBox } from "./ui/EditImageBox";
 export { EditMenuBox as BoothEditMenuBox } from "./ui/EditMenuBox";
 export { EditTextBox as BoothEditTextBox } from "./ui/EditTextBox";
+export { BoothTimeForm } from "./ui/BoothTimeForm";
 
 export { DeleteButton as BoothDeleteButton } from "./ui/DeleteButton";
 export { EditButton as BoothEditButton } from "./ui/EditButton";

diff --git a/src/features/booth/ui/BoothTimeForm.tsx b/src/features/booth/ui/BoothTimeForm.tsx
@@ -0,0 +1,109 @@
+import { Button } from "@/src/shared/ui/button";
+import React, { useRef, useState } from "react";
+
+interface BoothTimeProps {
+  openTime: string | null;
+  closeTime: string | null;
+  editOpenTime: (openTime: string) => void;
+  editCloseTime: (closeTime: string) => void;
+  changeOpenTimeInForm: (openTime: string | null) => void;
+  changeCloseTimeInForm: (openTime: string | null) => void;
+  resetBoothTime: () => void;
+}
+
+export function BoothTimeForm({
+  openTime,
+  closeTime,
+  editCloseTime,
+  editOpenTime,
+  changeOpenTimeInForm,
+  changeCloseTimeInForm,
+  resetBoothTime,
+}: BoothTimeProps) {
+  const openTimeInputRef = useRef<HTMLInputElement | null>(null);
+  const closeTimeInputRef = useRef<HTMLInputElement | null>(null);
+
+  // 인풋 태그를 클릭했을 때 focus 이벤트를 트리거
+  const handleInputClick = (
+    ref: React.MutableRefObject<HTMLInputElement | null>,
+  ) => {
+    if (ref.current) {
+      ref.current.showPicker(); // 시간 선택 창을 강제로 엶
+    }
+  };
+
+  const convertToHHMM = (time: string): string => {
+    // 문자열을 ':'로 분할하여 [hours, minutes, seconds] 배열을 얻음
+    const [hours, minutes] = time.split(":");
+
+    // 'hh:mm' 형식으로 리턴
+    return `${hours}:${minutes}`;
+  };
+  const convertToHHMMSS = (time: string): string => {
+    const [hours, minutes] = time.split(":");
+
+    // 'hh:mm:ss' 형식으로 리턴
+    return `${hours}:${minutes}:00`;
+  };
+
+  const convertedOpenTime = openTime ? convertToHHMM(openTime) : "00:00";
+  const convertedCloseTime = closeTime ? convertToHHMM(closeTime) : "00:00";
+
+  return (
+    <>
+      {!!openTime && !!closeTime ? (
+        <>
+          <div className="flex flex-row items-center justify-center gap-[20px] pt-[12px]">
+            <h1 className="text-[16px] font-semibold">시작 시간</h1>
+            <input
+              className="no-calendar-indicator rounded-[12px] border px-[60px] py-[7px] text-[16px] font-bold"
+              aria-label="Time"
+              type="time"
+              ref={openTimeInputRef}
+              onChange={(e) => {
+                if (e.target.value) {
+                  editOpenTime(convertToHHMMSS(e.target.value));
+                  changeOpenTimeInForm(convertToHHMMSS(e.target.value));
+                }
+              }}
+              onClick={() => handleInputClick(openTimeInputRef)} // 클릭 시 시간 선택 창 열림
+              value={convertedOpenTime}
+            />
+          </div>
+          <div className="flex flex-row items-center justify-center gap-[20px]">
+            <h1 className="text-[16px] font-semibold">종료 시간</h1>
+            <input
+              className="no-calendar-indicator rounded-[12px] border px-[60px] py-[7px] text-[16px] font-bold"
+              aria-label="Time"
+              type="time"
+              ref={closeTimeInputRef}
+              onChange={(e) => {
+                if (e.target.value) {
+                  editCloseTime(convertToHHMMSS(e.target.value));
+                  changeCloseTimeInForm(convertToHHMMSS(e.target.value));
+                }
+              }}
+              onClick={() => handleInputClick(closeTimeInputRef)} // 클릭 시 시간 선택 창 열림
+              value={convertedCloseTime}
+            />
+          </div>
+        </>
+      ) : (
+        <>
+          <Button
+            type="button"
+            className="w-full"
+            onClick={() => {
+              editOpenTime("13:00:00");
+              editCloseTime("18:00:00");
+              changeOpenTimeInForm("13:00:00");
+              changeCloseTimeInForm("18:00:00");
+            }}
+          >
+            운영시간 추가하기
+          </Button>
+        </>
+      )}
+    </>
+  );
+}
diff --git a/src/shared/lib/types.ts b/src/shared/lib/types.ts
@@ -21,6 +21,8 @@ export interface Booth {
   longitude: number;
   menus: Product[];
   enabled?: boolean;
+  openTime: string | null;
+  closeTime: string | null;
   waitingEnabled?: boolean;
 }
 

diff --git a/src/shared/model/store/booth-details-draft-store.ts b/src/shared/model/store/booth-details-draft-store.ts
@@ -23,6 +23,9 @@ export type BoothDetailsDraftActions = {
   editDescription: (newDescription: string) => void;
   editPosition: (newPosition: Position) => void;
   editThumbnail: (url: string) => void;
+  editOpenTime: (openTime: string) => void;
+  editCloseTime: (closeTime: string) => void;
+  resetBoothTime: () => void;
   reset: () => void;
   addMenuItem: () => void;
   editMenuItem: (id: number, menuProp: Partial<Product>) => void;
@@ -47,6 +50,8 @@ export const defaultInitState = {
   location: "",
   latitude: CampusPosition.latitude,
   longitude: CampusPosition.longitude,
+  openTime: null,
+  closeTime: null,
   menus: [],
 } satisfies Omit<BoothDetailsDraftState, "id">;
 
@@ -73,6 +78,16 @@ export const createBoothDetailsDraftStore =
               })),
             editThumbnail: (url) =>
               set((state) => ({ ...state, thumbnail: url })),
+            editOpenTime: (openTime) =>
+              set((state) => ({ ...state, openTime })),
+            editCloseTime: (closeTime) =>
+              set((state) => ({ ...state, closeTime })),
+            resetBoothTime: () =>
+              set((state) => ({
+                ...state,
+                openTime: null,
+                closeTime: null,
+              })),
             reset: () => set((state) => ({ ...state, ...defaultInitState })),
             addMenuItem: () =>
               set((state) => ({
@@ -121,7 +136,16 @@ export const createBoothDetailsDraftStore =
             })),
           editThumbnail: (url) =>
             set((state) => ({ ...state, thumbnail: url })),
+          editOpenTime: (openTime) => set((state) => ({ ...state, openTime })),
+          editCloseTime: (closeTime) =>
+            set((state) => ({ ...state, closeTime })),
           reset: () => set((state) => ({ ...state, ...defaultInitState })),
+          resetBoothTime: () =>
+            set((state) => ({
+              ...state,
+              openTime: null,
+              closeTime: null,
+            })),
           addMenuItem: () =>
             set((state) => ({
               ...state,

diff --git a/src/shared/model/store/booth-draft-store.ts b/src/shared/model/store/booth-draft-store.ts
@@ -35,6 +35,8 @@ export const defaultInitState = {
   latitude: CampusPosition.latitude,
   longitude: CampusPosition.longitude,
   menus: [],
+  openTime: null,
+  closeTime: null,
 } satisfies BoothDraftState;
 
 export const createBoothDraftStore =

diff --git a/src/shared/model/store/booth-edit-store.ts b/src/shared/model/store/booth-edit-store.ts
@@ -28,6 +28,9 @@ export type BoothDraftActions = {
   editDescription: (newDescription: string) => void;
   editPosition: (newPosition: Position) => void;
   editThumbnail: (url: string) => void;
+  editOpenTime: (openTime: string) => void;
+  editCloseTime: (closeTime: string) => void;
+  resetBoothTime: () => void;
   reset: () => void;
   addMenuItem: () => void;
   editMenuItem: (id: number, menuProp: Partial<Product>) => void;
@@ -51,6 +54,8 @@ export const defaultInitState = {
   location: "",
   latitude: CampusPosition.latitude,
   longitude: CampusPosition.longitude,
+  openTime: null,
+  closeTime: null,
   menus: [],
 } satisfies Omit<BoothEditState, "id">;
 
@@ -75,6 +80,16 @@ export const createBoothEditStore =
               })),
             editThumbnail: (url) =>
               set((state) => ({ ...state, thumbnail: url })),
+            editOpenTime: (openTime) =>
+              set((state) => ({ ...state, openTime })),
+            editCloseTime: (closeTime) =>
+              set((state) => ({ ...state, closeTime })),
+            resetBoothTime: () =>
+              set((state) => ({
+                ...state,
+                openTime: null,
+                closeTime: null,
+              })),
             reset: () => set((state) => ({ ...state, ...defaultInitState })),
             addMenuItem: () =>
               set((state) => ({
@@ -121,6 +136,15 @@ export const createBoothEditStore =
             })),
           editThumbnail: (url) =>
             set((state) => ({ ...state, thumbnail: url })),
+          editOpenTime: (openTime) => set((state) => ({ ...state, openTime })),
+          editCloseTime: (closeTime) =>
+            set((state) => ({ ...state, closeTime })),
+          resetBoothTime: () =>
+            set((state) => ({
+              ...state,
+              openTime: null,
+              closeTime: null,
+            })),
           reset: () => set((state) => ({ ...state, ...defaultInitState })),
           addMenuItem: () =>
             set((state) => ({