[#39] fix : 서브메뉴 디자인 변경 및 링크추가 (#40)

* style : 팝업 / 쿠폰 관리 삭제박스 추가 * fix : 헤더 디자인 수정 및 링크 추가
KUSITMS-Team-A · Nov 22, 2023 · b1e7f19 · b1e7f19
1 parent 1c61d3d
commit b1e7f19
Show file tree

Hide file tree

Showing 18 changed files with 650 additions and 202 deletions.
diff --git a/components/atoms/basics.ts b/components/atoms/basics.ts
@@ -1,4 +1,5 @@
 import styled from "@emotion/styled";
+import { Checkbox } from "@mui/material";
 
 interface HorizontalBox {
   column?: string;
@@ -22,7 +23,6 @@ export const FlexBox = styled.div<HorizontalBox>`
   flex-flow: ${(props) => (props?.column ? "column nowrap" : "row nowrap")};
 `;
 
-
 export const NumberBall = styled.div`
   width: 24px;
   height: 24px;
@@ -43,4 +43,3 @@ export const GridTemplate = styled.div`
 export const FlexTemplate = styled.div`
   display: flex;
 `;
-
diff --git a/components/hooks/useCouponData.ts b/components/hooks/useCouponData.ts
@@ -1,4 +1,5 @@
-import { useState } from "react";
+import { getCoupons } from "@/pages/api/coupon";
+import { useEffect, useState } from "react";
 
 interface CouponContent {
   couponName: string;
@@ -8,25 +9,38 @@ interface CouponContent {
 }
 
 export const useCouponData = () => {
-  const [coupons, setCoupons] = useState<CouponContent[]>(exData);
+  const [coupons, setCoupons] = useState<CouponContent[]>([]);
 
   // api 호출해서 초기화
+  useEffect(() => {
+    const fetchData = async () => {
+      const result = await getCoupons({
+        type: "COUPON",
+        pageNumber: 1,
+        pageSize: 5,
+      });
+
+      result && setCoupons(result.coupons);
+    };
+
+    fetchData();
+  }, []);
 
   return { coupons };
 };
 
-// 예시 데이터
-const exData: CouponContent[] = [
-  {
-    couponName: "엽떡 10000원 할인",
-    couponStore: "엽기 떡볶이",
-    couponCondition: ["10만원 이상 구매시", "4명 이상이 오면"],
-    couponQuantity: 50,
-  },
-  {
-    couponName: "소소 떡볶이 10000원 할인",
-    couponStore: "엽기 떡볶이",
-    couponCondition: ["10만원 이상 구매시", "4명 이상이 오면"],
-    couponQuantity: 50,
-  },
-];
+// // 예시 데이터
+// const exData: CouponContent[] = [
+//   {
+//     couponName: "엽떡 10000원 할인",
+//     couponStore: "엽기 떡볶이",
+//     couponCondition: ["10만원 이상 구매시", "4명 이상이 오면"],
+//     couponQuantity: 50,
+//   },
+//   {
+//     couponName: "소소 떡볶이 10000원 할인",
+//     couponStore: "엽기 떡볶이",
+//     couponCondition: ["10만원 이상 구매시", "4명 이상이 오면"],
+//     couponQuantity: 50,
+//   },
+// ];
diff --git a/components/hooks/usePopupData.ts b/components/hooks/usePopupData.ts
@@ -3,10 +3,10 @@ import { useEffect, useState } from "react";
 
 enum PopupPeriod {
   none,
-  aDay,
-  aWeek,
-  twoWeek,
-  aMonth,
+  aDay = "하루간",
+  aWeek = "1주간",
+  twoWeek = "2주간",
+  aMonth = "1달간",
 }
 
 interface Popup {
@@ -18,13 +18,14 @@ interface Popup {
 }
 
 export const usePopupData = () => {
-  const [popups, setPopups] = useState<Popup[]>(exData);
+  const [popups, setPopups] = useState<Popup[]>([]);
 
   // api 호출해서 초기화
   useEffect(() => {
     const fetchData = async () => {
       const data = await getPopups(0);
       console.log(data);
+      data && setPopups(data.content);
     };
 
     fetchData();
@@ -35,19 +36,19 @@ export const usePopupData = () => {
 
 // 예시 데이터
 
-const exData: Popup[] = [
-  {
-    title: "오늘만 배부른 최뚝배기 가게 5% 추가할인!",
-    contents: "내용",
-    period: PopupPeriod.twoWeek,
-    timing: true,
-    store: "최뚝배기",
-  },
-  {
-    title: "오늘만 배부른 최뚝배기 가게 5% 추가할인!",
-    contents: "내용",
-    period: PopupPeriod.twoWeek,
-    timing: true,
-    store: "최뚝배기",
-  },
-];
+// const exData: Popup[] = [
+//   {
+//     title: "오늘만 배부른 최뚝배기 가게 5% 추가할인!",
+//     contents: "내용",
+//     period: PopupPeriod.twoWeek,
+//     timing: true,
+//     store: "최뚝배기",
+//   },
+//   {
+//     title: "오늘만 배부른 최뚝배기 가게 5% 추가할인!",
+//     contents: "내용",
+//     period: PopupPeriod.twoWeek,
+//     timing: true,
+//     store: "최뚝배기",
+//   },
+// ];
diff --git a/components/hooks/useUniv.ts b/components/hooks/useUniv.ts
@@ -0,0 +1,17 @@
+import { getUnivs } from "@/pages/api/others";
+import { useEffect, useState } from "react";
+
+export const useUniv = async () => {
+  const [univ, setUniv] = useState();
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const result = await getUnivs();
+      setUniv(result);
+    };
+
+    fetchData();
+  }, []);
+
+  return { univ };
+};
diff --git a/components/organisms/Header.tsx b/components/organisms/Header.tsx
@@ -8,6 +8,7 @@ import { useRouter } from "next/router";
 import { useModal } from "../hooks/useModal";
 import { useSetRecoilState } from "recoil";
 import { initialState } from "@/state/user/user";
+import { Logout } from "@/pages/api/login";
 /*
 TODO:
 1. 로그인 - 세션스토리지 안에 로그인 여부에 따라서 다르게
@@ -27,7 +28,11 @@ const Header = () => {
   useEffect(() => {
     console.table(`USER SESSION DATA : ${userSessionData}`);
   }, [userSessionData]);
-  const logoutHandler = () => {
+
+  const logoutHandler = async () => {
+    console.log("logout");
+    const response = await Logout();
+    console.log(response);
     setLogout({
       logined: false,
       email: "",
@@ -37,7 +42,6 @@ const Header = () => {
     });
   };
 
-
   return (
     <HeaderFrame>
       <Logo
@@ -51,26 +55,23 @@ const Header = () => {
       />
       <UserMenu>
         <ul>
-
           <UpperMenuItem
             onClick={() => {
               if (userSessionData) {
-                openModal();
+                logoutHandler();
               } else {
                 openModal();
               }
             }}
           >
-            {userSessionData ? "로그인" : "로그아웃"}
+            {userSessionData ? "로그아웃" : "로그인"}
           </UpperMenuItem>
 
           <UpperMenuItem>
             <Link href="/user">회원가입</Link>
           </UpperMenuItem>
           <UpperMenuItem>
-
             <Link href="/mypage">마이페이지</Link>
-
           </UpperMenuItem>
           <UpperMenuItem>
             <NotificationsNoneOutlinedIcon />
@@ -80,18 +81,16 @@ const Header = () => {
       <DefaultMenu>
         <ul>
           <LowerMenuItem>
-
             <Link href="/dashboard">대시보드</Link>
           </LowerMenuItem>
           <LowerMenuItem>
-            <Link href="/">가게찾기</Link>
+            <Link href="/search">가게찾기</Link>
           </LowerMenuItem>
           <LowerMenuItem>
-            <Link href="/">제휴가게</Link>
-
+            <Link href="/contact">제휴가게</Link>
           </LowerMenuItem>
           <LowerMenuItem>
-            <Link href="/">학생관리</Link>
+            학생관리
             <SubDropdownMenu>
               <SubDropdownMenuItem>
                 <Link href="/student/popup">팝업관리</Link>
@@ -147,6 +146,8 @@ const SubDropdownMenu = styled.div`
   bottom: -3rem;
 
   visibility: hidden;
+  border-radius: 8px;
+  background: #f6f6f6;
 
   display: flex;
   flex-flow: column nowrap;
@@ -161,6 +162,8 @@ const SubDropdownMenuItem = styled.div`
   font-size: 0.7rem;
   width: 100px;
   height: 1.5rem;
+
+  padding: 3px 0px;
   &:hover {
     background-color: gray;
     color: white;
@@ -170,8 +173,9 @@ const SubDropdownMenuItem = styled.div`
 const LowerMenuItem = styled.li`
   position: relative;
 
-  color: #000;
+  color: var(--, #3d4149);
   text-align: center;
+  font-family: Pretendard;
   font-size: 16px;
   font-style: normal;
   font-weight: 400;

diff --git a/components/styles/PopUp.styles.tsx b/components/styles/PopUp.styles.tsx
@@ -69,6 +69,15 @@ export const TablePeriodTitle = styled.div`
   align-items: center;
 `;
 
+export const TableDeleteTitle = styled.div`
+  width: 35px;
+  border-radius: 6px;
+  background: #f7f7f7;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+`;
+
 export const PopUpsContainer = styled.div`
   border-radius: 6px;
   border: 1px solid #f7f7f7;
@@ -80,6 +89,19 @@ export const PopupContainer = styled.div`
   display: flex;
 `;
 
+export const DeleteBox = styled.div`
+  color: var(--, #3d4149);
+  font-size: 17px;
+  font-weight: 400;
+  line-height: 19.264px; /* 113.316% */
+  letter-spacing: -1.02px;
+  width: 35px;
+  display: flex;
+  align-items: center;
+  margin: 5px 8px;
+  border-bottom: 1px solid var(--g0, #f4f4f4);
+`;
+
 export const NumberBox = styled.div`
   width: 72px;
   color: ${COLORS.blue};