Merge branch 'dev' into feat/#49

@types/Contract.d.ts

@@ -6,10 +6,9 @@ export type ContractListInfo = {
 };
 
 type Benefit = {
-  amount: number;
   benfitId: number;
   content: string;
-  type: "FIX" | "RATE" | "MENU";
+  condition: string;
 };
 
 export type ContractInfo = {
@@ -25,4 +24,5 @@ export type ContractInfo = {
   storeId: number;
   storeName: string;
   visitInfo: object;
+  address: string;
 };

components/StoreInfo.tsx

@@ -3,13 +3,16 @@ import styled from "@emotion/styled";
 import EditIcon from "@/assets/svg/Edit.svg";
 import { useEffect, useState } from "react";
 import { getStoreInfo } from "@/pages/api/StoreAPI";
-import { StoreDetailInfo } from "@/@types/Store";
+import { StoreDetailInfo, businessHour } from "@/@types/Store";
+import SmallDropDown from "@/assets/svg/SmallDropDown.svg";
+import SmallDropTop from "@/assets/svg/SmallDropTop.svg";
 
 interface SInfo {
   storeId: number;
 }
 
 const StoreInfo = ({ storeId }: SInfo) => {
+  const [isdrop, setIsDrop] = useState<boolean>(false);
   const [data, setData] = useState<StoreDetailInfo>({
     address: "",
     businessHours: [],
@@ -31,11 +34,56 @@ const StoreInfo = ({ storeId }: SInfo) => {
     });
   }, []);
 
+  function getTodayBusinessHours(today: string): businessHour | undefined {
+    return data.businessHours.find((hours) => hours.dayOfWeek === today);
+  }
+
+  // 현재 날짜를 기반으로 요일을 얻어온다. (예: 일요일 → '일')
+  const today: string = new Date().toLocaleDateString("ko-KR", {
+    weekday: "short",
+  });
+
+  // 오늘 요일에 해당하는 운영 시간을 얻어온다.
+  const todayBusinessHours: businessHour | undefined =
+    getTodayBusinessHours(today);
+
+  const handleOnClickDropDown = () => {
+    setIsDrop(!isdrop);
+  };
+
   return (
     <Container>
       <InfoListBox>
         <InfoTypeBox>영업 시간</InfoTypeBox>
-        <InfoDescriptionBox>09:00</InfoDescriptionBox>
+        <TimeContainer>
+          <TodayContainer>
+            {data.businessHours.length !== 0 && (
+              <InfoDescriptionBox>
+                오늘
+                {" " +
+                  todayBusinessHours?.openingTime +
+                  " ~ " +
+                  todayBusinessHours?.closingTime}
+              </InfoDescriptionBox>
+            )}
+            {data.businessHours.length === 0 ? (
+              ""
+            ) : (
+              <DropdownBox onClick={handleOnClickDropDown}>
+                {isdrop ? <SmallDropTop /> : <SmallDropDown />}
+              </DropdownBox>
+            )}
+          </TodayContainer>
+          {isdrop &&
+            data.businessHours.map((el: businessHour, idx: number) => {
+              return (
+                <InfoDescriptionBox key={idx}>
+                  {el.dayOfWeek + " " + el.openingTime + " ~ " + el.closingTime}
+                </InfoDescriptionBox>
+              );
+            })}
+          {}
+        </TimeContainer>
       </InfoListBox>
       <InfoListBox>
         <InfoTypeBox>가게 번호</InfoTypeBox>
@@ -91,6 +139,7 @@ const InfoTypeBox = styled.div`
   align-items: center;
   gap: 10px;
   width: 80px;
+  height: 22px;
 `;
 
 const InfoDescriptionBox = styled.div`
@@ -101,6 +150,8 @@ const InfoDescriptionBox = styled.div`
   font-weight: 400;
   line-height: 19.264px; /* 137.598% */
   letter-spacing: -0.84px;
+  display: flex;
+  align-items: center;
 `;
 
 const ContactBox = styled.div`
@@ -156,4 +207,19 @@ const EditTxt = styled.div`
   margin-right: 5px;
 `;
 
+const TimeContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+const TodayContainer = styled.div`
+  display: flex;
+`;
+
+const DropdownBox = styled.div`
+  display: flex;
+  align-items: center;
+  margin-left: 10px;
+`;
+
 export default StoreInfo;

components/hooks/useCouponData.ts

@@ -1,6 +1,8 @@
+
 import { getCoupons } from "@/pages/api/coupon";
 import { useEffect, useState } from "react";
 
+
 interface CouponContent {
   couponName: string;
   couponStore: string;
@@ -10,6 +12,7 @@ interface CouponContent {
 }
 
 export const useCouponData = () => {
+
   const [coupons, setCoupons] = useState<CouponContent[]>([]);
 
   // api 호출해서 초기화
@@ -27,21 +30,7 @@ export const useCouponData = () => {
     fetchData();
   }, []);
 
+
   return { coupons };
 };
 
-// // 예시 데이터
-// const exData: CouponContent[] = [
-//   {
-//     couponName: "엽떡 10000원 할인",
-//     couponStore: "엽기 떡볶이",
-//     couponCondition: ["10만원 이상 구매시", "4명 이상이 오면"],
-//     couponQuantity: 50,
-//   },
-//   {
-//     couponName: "소소 떡볶이 10000원 할인",
-//     couponStore: "엽기 떡볶이",
-//     couponCondition: ["10만원 이상 구매시", "4명 이상이 오면"],
-//     couponQuantity: 50,
-//   },
-// ];

components/hooks/usePopupData.ts

@@ -1,14 +1,6 @@
 import { getPopups } from "@/pages/api/popup";
 import { useEffect, useState } from "react";
 
-// enum PopupPeriod {
-//   none,
-
-//   aDay = "하루간",
-//   aWeek = "1주간",
-//   twoWeek = "2주간",
-//   aMonth = "1달간",
-// }
 
 interface Popup {
   title: string;
@@ -19,6 +11,7 @@ interface Popup {
 }
 
 export const usePopupData = () => {
+
   const [popups, setPopups] = useState<Popup[]>([]);
 
   // api 호출해서 초기화
@@ -28,10 +21,12 @@ export const usePopupData = () => {
       console.log(data);
 
       data && setPopups(data.content);
+
     };
 
     fetchData();
   }, []);
 
   return { popups };
 };
+

components/organisms/Header.tsx

@@ -7,10 +7,12 @@ import { useRouter } from "next/router";
 import { useModal } from "../hooks/useModal";
 import { useRecoilState } from "recoil";
 import { initialState } from "@/state/user/user";
+
 import { Logout } from "@/pages/api/login";
 import { Box, Button, Modal } from "@mui/material";
 import { css } from "@emotion/css";
 
+
 const Header = () => {
   const [modalOpen, setModalOpen] = useState(false);
   const handleOpen = () => {
@@ -23,6 +25,7 @@ const Header = () => {
   const router = useRouter();
   const { openModal } = useModal();
   const [userSessionData, setUserSessionData] = useState<string | null>(null);
+
   const [logData, setLogData] = useRecoilState(initialState);
 
   useEffect(() => {
@@ -34,11 +37,13 @@ const Header = () => {
   }, [userSessionData]);
 
   const logoutHandler = async () => {
+
     console.log("logout합니다");
     const result = await Logout();
     console.log(result);
 
     setLogData({
+
       logined: false,
       email: "",
       type: "",
@@ -115,14 +120,18 @@ const Header = () => {
           <UpperMenuItem
             onClick={() => {
               if (userSessionData) {
+
                 setModalOpen(true);
                 logoutHandler();
+
               } else {
                 openModal();
               }
             }}
           >
+
             {userSessionData ? "로그아웃" : "로그인"}
+
           </UpperMenuItem>
 
           <UpperMenuItem>
@@ -149,6 +158,7 @@ const Header = () => {
           </LowerMenuItem>
           <LowerMenuItem>
             학생관리
+
             <SubDropdownMenu>
               <SubDropdownMenuItem>
                 <Link href="/student/popup">팝업관리</Link>
@@ -240,6 +250,7 @@ const SubDropdownMenuItem = styled.div`
   width: 100px;
   height: 1.5rem;
 
+
   padding: 3px 0px;
 
   &:hover {
@@ -251,6 +262,7 @@ const SubDropdownMenuItem = styled.div`
 const LowerMenuItem = styled.li`
   position: relative;
 
+
   color: var(--, #3d4149);
   text-align: center;
   font-family: Pretendard;

components/organisms/Modal.tsx

@@ -18,7 +18,9 @@ const LoginModal: React.FC<ModalProps> = () => {
   const [isOpen, setIsOpen] = useRecoilState(modalState);
 
   const { closeModal } = useModal();
+
   const router = useRouter();
+
   const [email, setEmail] = useState<string>("");
   const [password, setPassword] = useState<string>("");
   const setLoginedUserState = useSetRecoilState(initialState);

components/styles/Contact.styles.tsx

@@ -2,10 +2,11 @@ import { COLORS } from "@/styles/colors";
 import styled from "@emotion/styled";
 
 export const Container = styled.div`
-  width: 920px;
+  width: 1050px;
   display: flex;
   flex-direction: column;
   margin: auto;
+  padding-bottom: 100px;
 `;
 
 export const TopBox = styled.div`
@@ -115,8 +116,8 @@ export const MainBox = styled.div`
 `;
 
 export const StoreContainer = styled.div`
-  width: 216px;
-  height: 179px;
+  width: 250px;
+  height: 200px;
   border-radius: 10px;
   padding: 17px;
   border-radius: 5px;
@@ -157,8 +158,6 @@ export const StoreNameBox = styled.div`
   text-align: center;
   font-size: 25px;
   font-weight: 600;
-  line-height: 19.264px; /* 77.055% */
-  letter-spacing: -1.5px;
 `;
 
 export const BenefitBox = styled.div`
@@ -173,10 +172,10 @@ export const ConditionBox = styled.div`
   font-weight: 400;
   line-height: 25.043px; /* 160.532% */
   letter-spacing: -0.936px;
+  margin-right: 7px;
 `;
 
 export const PercentBox = styled.div`
-  margin-left: 7px;
   display: inline-flex;
   padding: 0px 3.9px;
   justify-content: center;

next.config.js

@@ -1,5 +1,26 @@
 const nextConfig = {
   reactStrictMode: true,
+  async headers() {
+    return [
+      {
+        // matching all API routes
+        source: "/api/:path*",
+        headers: [
+          { key: "Access-Control-Allow-Credentials", value: "true" },
+          { key: "Access-Control-Allow-Origin", value: "*" },
+          {
+            key: "Access-Control-Allow-Methods",
+            value: "GET,OPTIONS,PATCH,DELETE,POST,PUT",
+          },
+          {
+            key: "Access-Control-Allow-Headers",
+            value:
+              "X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version",
+          },
+        ],
+      },
+    ];
+  },
 
   webpack(config, options) {
     config.module.rules.push({