diff --git a/components/atoms/basics.ts b/components/atoms/basics.ts index f13f6e5..8bec101 100644 --- 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` 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 index ad51edb..9071284 100644 --- 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(exData); + const [coupons, setCoupons] = useState([]); // 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 index 7702bba..d872363 100644 --- 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(exData); + const [popups, setPopups] = useState([]); // 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 new file mode 100644 index 0000000..2fbe10a --- /dev/null +++ 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 index 2b39882..f2eb226 100644 --- 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 ( { />
    - { if (userSessionData) { - openModal(); + logoutHandler(); } else { openModal(); } }} > - {userSessionData ? "로그인" : "로그아웃"} + {userSessionData ? "로그아웃" : "로그인"} 회원가입 - 마이페이지 - @@ -80,18 +81,16 @@ const Header = () => {
      - 대시보드 - 가게찾기 + 가게찾기 - 제휴가게 - + 제휴가게 - 학생관리 + 학생관리 팝업관리 @@ -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 index f4736a5..43f9a88 100644 --- 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}; diff --git a/components/styles/coupon/style.ts b/components/styles/coupon/style.ts index 624a7bf..fd9aa8d 100644 --- a/components/styles/coupon/style.ts +++ b/components/styles/coupon/style.ts @@ -3,10 +3,9 @@ import styled from "@emotion/styled"; // ------ Container Level ------ export const Container = styled(FlexTemplate)` - width: 100%; - + width: 80%; min-height: 80vh; - + margin: 0px auto; padding: 1% 5%; flex-flow: column nowrap; @@ -35,7 +34,7 @@ export const LabelBox = styled(GridTemplate)` grid-row: 1/2; grid-template-columns: repeat(14, 1fr); - column-gap: 10px; + column-gap: 5px; width: 100%; `; @@ -48,6 +47,8 @@ export const ListBox = styled(FlexTemplate)` border: 1px solid #f7f7f7; border-radius: 6px; + padding-top: 5px; + display: flex; flex-flow: column nowrap; align-items: flex-start; @@ -58,9 +59,14 @@ export const ListBox = styled(FlexTemplate)` export const ListElement = styled(GridTemplate)` width: 100%; min-height: 50px; - border: 1px solid black; + + column-gap: 5px; + + padding: 10px 0px; grid-template-columns: repeat(14, 1fr); + + border-top: 0.5px solid #f4f4f4; `; export const ListIndex = styled(FlexTemplate)` @@ -68,6 +74,8 @@ export const ListIndex = styled(FlexTemplate)` justify-content: center; align-items: center; + + color: #0e6eff; `; export const ListContent = styled(FlexTemplate)` @@ -77,7 +85,7 @@ export const ListContent = styled(FlexTemplate)` `; export const ListStore = styled(FlexTemplate)` - grid-column: 10 / 15; + grid-column: 10 / 14; justify-content: center; align-items: center; `; @@ -91,6 +99,13 @@ export const LabelElement = styled(FlexTemplate)` color: #afafaf; `; +export const DeleteElement = styled(FlexTemplate)` + grid-column: 14/15; + + justify-content: center; + align-items: center; +`; + export const CountLabel = styled(LabelElement)` grid-column: 1/4; `; @@ -98,7 +113,10 @@ export const ContentsLabel = styled(LabelElement)` grid-column: 4/10; `; export const InfoLabel = styled(LabelElement)` - grid-column: 10 / 15; + grid-column: 10 / 14; +`; +export const DeleteLabel = styled(LabelElement)` + grid-column: 14 / 15; `; // ------ Elements Level ------ @@ -139,3 +157,23 @@ export const CustomButton = styled.div` transition: all 1s ease; } `; + +export const InfoBox = styled.div` + display: flex; + width: 103px; + padding: 0px 3.9px; + justify-content: center; + align-items: center; + gap: 13px; + + border-radius: 3.9px; + background: var(--sub2, #0e6eff); + + color: var(--sub3, #dfff60); + font-family: Pretendard; + font-size: 15.6px; + font-style: normal; + font-weight: 600; + line-height: 25.043px; /* 160.532% */ + letter-spacing: -0.936px; +`; diff --git a/components/styles/popup/style.ts b/components/styles/popup/style.ts index 041710c..fd9aa8d 100644 --- a/components/styles/popup/style.ts +++ b/components/styles/popup/style.ts @@ -3,9 +3,9 @@ import styled from "@emotion/styled"; // ------ Container Level ------ export const Container = styled(FlexTemplate)` - width: 100%; + width: 80%; min-height: 80vh; - + margin: 0px auto; padding: 1% 5%; flex-flow: column nowrap; @@ -34,7 +34,7 @@ export const LabelBox = styled(GridTemplate)` grid-row: 1/2; grid-template-columns: repeat(14, 1fr); - column-gap: 10px; + column-gap: 5px; width: 100%; `; @@ -47,6 +47,8 @@ export const ListBox = styled(FlexTemplate)` border: 1px solid #f7f7f7; border-radius: 6px; + padding-top: 5px; + display: flex; flex-flow: column nowrap; align-items: flex-start; @@ -57,9 +59,14 @@ export const ListBox = styled(FlexTemplate)` export const ListElement = styled(GridTemplate)` width: 100%; min-height: 50px; - border: 1px solid black; + + column-gap: 5px; + + padding: 10px 0px; grid-template-columns: repeat(14, 1fr); + + border-top: 0.5px solid #f4f4f4; `; export const ListIndex = styled(FlexTemplate)` @@ -67,6 +74,8 @@ export const ListIndex = styled(FlexTemplate)` justify-content: center; align-items: center; + + color: #0e6eff; `; export const ListContent = styled(FlexTemplate)` @@ -76,7 +85,7 @@ export const ListContent = styled(FlexTemplate)` `; export const ListStore = styled(FlexTemplate)` - grid-column: 10 / 15; + grid-column: 10 / 14; justify-content: center; align-items: center; `; @@ -90,6 +99,13 @@ export const LabelElement = styled(FlexTemplate)` color: #afafaf; `; +export const DeleteElement = styled(FlexTemplate)` + grid-column: 14/15; + + justify-content: center; + align-items: center; +`; + export const CountLabel = styled(LabelElement)` grid-column: 1/4; `; @@ -97,7 +113,10 @@ export const ContentsLabel = styled(LabelElement)` grid-column: 4/10; `; export const InfoLabel = styled(LabelElement)` - grid-column: 10 / 15; + grid-column: 10 / 14; +`; +export const DeleteLabel = styled(LabelElement)` + grid-column: 14 / 15; `; // ------ Elements Level ------ @@ -138,3 +157,23 @@ export const CustomButton = styled.div` transition: all 1s ease; } `; + +export const InfoBox = styled.div` + display: flex; + width: 103px; + padding: 0px 3.9px; + justify-content: center; + align-items: center; + gap: 13px; + + border-radius: 3.9px; + background: var(--sub2, #0e6eff); + + color: var(--sub3, #dfff60); + font-family: Pretendard; + font-size: 15.6px; + font-style: normal; + font-weight: 600; + line-height: 25.043px; /* 160.532% */ + letter-spacing: -0.936px; +`; diff --git a/components/styles/user/second/style.ts b/components/styles/user/second/style.ts index 8e9bc28..5050cbf 100644 --- a/components/styles/user/second/style.ts +++ b/components/styles/user/second/style.ts @@ -46,6 +46,12 @@ export const AskTitle = styled.div` font-weight: 600; line-height: normal; letter-spacing: -1.26px; + + display: flex; + justify-content: center; + align-items: flex-start; + + margin-top: 5px; `; export const AskContents = styled.div` diff --git a/pages/api/StoreAPI.ts b/pages/api/StoreAPI.ts index e804449..a76af0f 100644 --- a/pages/api/StoreAPI.ts +++ b/pages/api/StoreAPI.ts @@ -3,7 +3,7 @@ import axios from "axios"; export const getStoreBase = async () => { try { - const response = await axiosInstance.get(`/store/search?pageSize=40`); + const response = await axiosInstance().get(`/store/search?pageSize=40`); return response.data; } catch (error) { if (axios.isAxiosError(error)) { @@ -27,7 +27,7 @@ export const getStoreWithFilter = async ({ pageNumber = 0, }: FilterProps) => { try { - const response = await axiosInstance.get( + const response = await axiosInstance().get( `/store/search?isPicked=${isPicked}${"&name=" + name}${ "&category=" + category }&pageSize=40${"&pageNumber=" + pageNumber}` @@ -43,7 +43,7 @@ export const getStoreWithFilter = async ({ export const postPickStore = async (storeId: number) => { try { - const response = await axiosInstance.post(`/store/pick`, { + const response = await axiosInstance().post(`/store/pick`, { storeId: storeId, }); return response.data; @@ -57,7 +57,7 @@ export const postPickStore = async (storeId: number) => { export const deletePickStore = async (storeId: number) => { try { - const response = await axiosInstance.delete(`/store/pick`, { + const response = await axiosInstance().delete(`/store/pick`, { data: { storeId: storeId }, }); return response.data; @@ -71,7 +71,7 @@ export const deletePickStore = async (storeId: number) => { export const getStoreInfo = async (storeId: number) => { try { - const response = await axiosInstance.get(`/store/details/${storeId}`); + const response = await axiosInstance().get(`/store/details/${storeId}`); return response.data; } catch (error) { if (axios.isAxiosError(error)) { diff --git a/pages/api/axiosInstance.ts b/pages/api/axiosInstance.ts index 70216e9..a129c31 100644 --- a/pages/api/axiosInstance.ts +++ b/pages/api/axiosInstance.ts @@ -1,18 +1,24 @@ import axios from "axios"; -const userSession = sessionStorage.getItem("userSession"); -let token: string = ""; -if (userSession) { - const parsedSession = JSON.parse(userSession); - token = parsedSession.user?.token || ""; -} else { - console.log("유저세션 없음"); -} +export const axiosInstance = () => { + const userSession = sessionStorage.getItem("userSession"); + let token: string = ""; -export const axiosInstance = axios.create({ - baseURL: process.env.NEXT_PUBLIC_BASE_API, - headers: { - "Content-Type": "application/json", - Authorization: `Bearer ${token}`, - }, -}); + if (userSession) { + console.log("usersession 있음"); + const parsedSession = JSON.parse(userSession); + token = parsedSession.user?.token || ""; + } else { + console.log("유저세션 없음"); + } + + console.log(token); + + return axios.create({ + baseURL: process.env.NEXT_PUBLIC_API_URL, + headers: { + "Content-Type": "application/json", + Authorization: `Bearer ${token}`, + }, + }); +}; diff --git a/pages/api/coupon.ts b/pages/api/coupon.ts index e69de29..ce7be2c 100644 --- a/pages/api/coupon.ts +++ b/pages/api/coupon.ts @@ -0,0 +1,74 @@ +import axios from "axios"; + +const apiBase = () => { + const userSession = sessionStorage.getItem("userSession"); + let token: string = ""; + if (userSession) { + const parsedSession = JSON.parse(userSession); + token = parsedSession.user?.token || ""; + } else { + console.log("유저세션 없음"); + } + + return axios.create({ + baseURL: process.env.NEXT_PUBLIC_API_URL, + timeout: 3000, + headers: { Authorization: `Bearer ${token}` }, + }); +}; + +interface CouponProps { + type: "COUPON"; + pageSize?: number; + pageNumber?: number; +} + +export const getCoupons = async ({ + type, + pageSize = 40, + pageNumber = 0, +}: CouponProps) => { + try { + const url = `${process.env.NEXT_PUBLIC_API_URL}${process.env.NEXT_PUBLIC_GET_COUPONS}?type=${type}&pageSize=${pageSize}&pageNumber=${pageNumber}`; + const response = await apiBase().get(url); + return response.data; + } catch (e) { + console.error(`Error 코드 : ${e}`); + } +}; + +// interface +interface EventProps { + storeId: number; + type: "COUPON" | "STAMP"; + name: string; + conditions: string[]; + discount: number; + quantity: number; + startDate?: string; + duration?: string; +} + +export const createCoupon = async ({ + storeId, + type, + name, + conditions, + discount, + quantity, +}: EventProps) => { + try { + const url = `${process.env.NEXT_PUBLIC_API_URL}${process.env.NEXT_PUBLIC_POST_COUPON}`; + const response = await apiBase().post(url, { + storeId, + type, + name, + conditions, + discount, + quantity, + }); + return response.data; + } catch (e) { + console.error(`Error 코드 : ${e}`); + } +}; diff --git a/pages/api/login.ts b/pages/api/login.ts index c65b0be..e7e5f02 100644 --- a/pages/api/login.ts +++ b/pages/api/login.ts @@ -79,3 +79,28 @@ export const CreateImage = async (file: File) => { throw error; } }; + +// 로그아웃 +export const Logout = async () => { + const userSession = sessionStorage.getItem("userSession"); + let token: string = ""; + if (userSession) { + const parsedSession = JSON.parse(userSession); + token = parsedSession.user?.token || ""; + } else { + console.log("유저세션 없음"); + } + try { + const response = await apiBase.post( + process.env.NEXT_PUBLIC_LOGOUT_ENDPOINT, + { + headers: { + Authorization: `Bearer ${token}`, + }, + } + ); + return response.data; + } catch (e) { + console.error(`에러코드 : ${e}`); + } +}; diff --git a/pages/api/others.ts b/pages/api/others.ts new file mode 100644 index 0000000..4489c6e --- /dev/null +++ b/pages/api/others.ts @@ -0,0 +1,34 @@ +import { axiosInstance } from "./axiosInstance"; + +interface FoodProps { + isPicked: boolean; + name: "string"; + category: "FOOD"; + pageSize: 40; + pageNumber: 0; +} + +// export const getFoods = async ({ +// type, +// pageSize = 40, +// pageNumber = 0, +// }: CouponProps) => { +// try { +// const url = `${process.env.NEXT_PUBLIC_API_URL}${process.env.NEXT_PUBLIC_GET_COUPONS}?isp=${type}&pageSize=${pageSize}&pageNumber=${pageNumber}`; +// const response = await axiosInstance().get(url); +// return response.data; +// } catch (e) { +// console.error(`Error 코드 : ${e}`); +// } +// }; + +export const getUnivs = async () => { + try { + const response = await axiosInstance().get( + `${process.env.NEXT_PUBLIC_GET_UNIV}` + ); + return response.data; + } catch (e) { + console.error(e); + } +}; diff --git a/pages/student/coupon/index.tsx b/pages/student/coupon/index.tsx index 942ff2d..676a703 100644 --- a/pages/student/coupon/index.tsx +++ b/pages/student/coupon/index.tsx @@ -1,15 +1,19 @@ import { useRouter } from "next/router"; import React from "react"; -import * as styles from "@/components/styles/coupon/style"; +import * as styles from "@/components/styles/popup/style"; import { css } from "@emotion/css"; import { useCouponData } from "@/components/hooks/useCouponData"; import Link from "next/link"; import EmptyComponent from "@/components/atoms/EmptyComponent"; +import { usePopupData } from "@/components/hooks/usePopupData"; +import { Checkbox } from "@mui/material"; +import { useUniv } from "@/components/hooks/useUniv"; const CouponAdminPage: React.FC = () => { const router = useRouter(); const { coupons } = useCouponData(); + const data = useUniv(); console.log(coupons); return ( @@ -27,6 +31,7 @@ const CouponAdminPage: React.FC = () => { 내용 정보제공 + 삭제 {coupons.length !== 0 ? ( @@ -34,7 +39,12 @@ const CouponAdminPage: React.FC = () => { {index + 1} {element.couponName} - {element.couponStore} + + {element.couponStore} + + + + )) ) : ( diff --git a/pages/student/coupon/register/Inputs.tsx b/pages/student/coupon/register/Inputs.tsx index 2833aa4..1f686be 100644 --- a/pages/student/coupon/register/Inputs.tsx +++ b/pages/student/coupon/register/Inputs.tsx @@ -1,8 +1,24 @@ -import React, { useMemo } from "react"; +import React, { useEffect, useMemo, useState } from "react"; import * as styles from "./Inputs.style"; import { css } from "@emotion/css"; -import { FilledInput, IconButton, InputAdornment } from "@mui/material"; +import { + Checkbox, + FilledInput, + IconButton, + InputAdornment, +} from "@mui/material"; import SearchTwoToneIcon from "@mui/icons-material/SearchTwoTone"; +import { createCoupon } from "@/pages/api/coupon"; +import CheckCircleIcon from "@mui/icons-material/CheckCircle"; +import CircleIcon from "@mui/icons-material/Circle"; +interface EventProps { + storeId: number; + type: "COUPON"; + name: string; + conditions: string[]; + discount: number; + quantity: number; +} const Inputs: React.FC = () => { const placeHolders = useMemo( @@ -15,87 +31,157 @@ const Inputs: React.FC = () => { ], [] ); + + const [formData, setFormData] = useState({ + storeId: 2, + type: "COUPON", + name: "", + conditions: [], + discount: 0, + quantity: 0, + }); + + const handleInputChange = (e: React.ChangeEvent) => { + const { name, value } = e.target; + setFormData({ ...formData, [name]: value }); + }; + + const handleSubmit = (e: React.FormEvent) => { + e.preventDefault(); + postData(); + }; + + useEffect(() => { + console.log(formData); + }, [formData]); + + const postData = async () => { + const result = await createCoupon({ + name: formData.name, + storeId: 1, + quantity: formData.quantity, + discount: 3, + type: "COUPON", + conditions: formData.conditions, + }); + + console.log(result); + }; + return ( - - - 1. 쿠폰정보 - - - - - +
      + + + 1. 쿠폰정보 + + + + + - - - 2. 쿠폰 발송 가게 - - - + + 2. 쿠폰 발송 가게 + + - - - - - } - /> - - - - - - - 3. 사용 조건 - - - - - + > + + + + + + } + /> + + + - - - 4. 쿠폰 수 설정 - - - - - - 선착순 n명 제한 - + + + 3. 사용 조건 + + { + let result = []; + result.push(e.target.value); + + setFormData((prev) => ({ ...prev, conditions: result })); + }} /> - + + + + + + 4. 쿠폰 수 설정 + + + + + } + checkedIcon={} + /> + 선착순 n명 제한 + + { + setFormData((prev) => ({ + ...prev, + quantity: Number(e.target.value), + })); + }} + /> + + + + + } + checkedIcon={} + /> - - - - 제한 인원 없음 - - - - 등록 - + 제한 인원 없음 + + + + + 등록 + + +
      ); }; diff --git a/pages/student/popup/index.tsx b/pages/student/popup/index.tsx index 6286c6d..ba6050e 100644 --- a/pages/student/popup/index.tsx +++ b/pages/student/popup/index.tsx @@ -1,34 +1,84 @@ -import * as styles from "@/components/styles/PopUp.styles"; +import { useRouter } from "next/router"; +import React from "react"; +import * as styles from "@/components/styles/popup/style"; +import { css } from "@emotion/css"; +import { useCouponData } from "@/components/hooks/useCouponData"; +import Link from "next/link"; +import EmptyComponent from "@/components/atoms/EmptyComponent"; +import { usePopupData } from "@/components/hooks/usePopupData"; +import { Checkbox } from "@mui/material"; -const PopUp = () => { +const PopupAdminPage: React.FC = () => { + const router = useRouter(); + + const { popups } = usePopupData(); + + console.log(popups); return ( - 팝업 관리 - - 학생들에게 보여줄 팝업을 관리해보세요. - - - - 총 1개 - 내용 - 정보 제공 - - - - 01 - 오늘만할인 -
      - 2주간/실시간 + + 팝업 관리 + + 학생들에게 보여줄 팝업을 관리해보세요. + + + + + + 총 {popups ? popups.length : 0}개 + + 내용 + 정보제공 + 삭제 + + + {popups.length !== 0 ? ( + popups.map((element, index) => ( + + {index + 1} + {element.content} + + + {element.endDate}/{element.reservation} + + + + + + + )) + ) : ( +
      +
      - - - - - 등록하기 - 삭제하기 - + )} +       +       +
      + + 등록하기 + + 삭제하기 +
      ); }; -export default PopUp; +export default PopupAdminPage; diff --git a/pages/user/form/index.tsx b/pages/user/form/index.tsx index 09d8a0e..840250a 100644 --- a/pages/user/form/index.tsx +++ b/pages/user/form/index.tsx @@ -1,17 +1,13 @@ import React, { useEffect, useState } from "react"; import * as phase from "@/components/styles/user/first/style"; import * as styles from "@/components/styles/user/second/style"; - -import { - Checkbox, - FilledInput, - InputAdornment, - OutlinedInput, - TextField, -} from "@mui/material"; -import { FlexBox } from "@/components/atoms/basics"; +import CheckCircleIcon from "@mui/icons-material/CheckCircle"; +import CircleIcon from "@mui/icons-material/Circle"; +import { Checkbox, FilledInput, TextField } from "@mui/material"; import SearchOutlinedIcon from "@mui/icons-material/SearchOutlined"; import { useRouter } from "next/router"; +import { css } from "@emotion/css"; +import styled from "@emotion/styled"; interface FormPageProps {} @@ -113,33 +109,54 @@ const FormPage: React.FC = () => { - + } + checkedIcon={} name={Unions.first} onChange={checkBoxInputHandler} /> - 총 학생회 + - + } + checkedIcon={} name={Unions.second} onChange={checkBoxInputHandler} /> - 단과대 학생회 + - + } + checkedIcon={} name={Unions.third} onChange={checkBoxInputHandler} /> - 과 학생회 + = () => { }; export default FormPage; + +const Label = styled.p` + font-size: 1rem; + font-weight: 500; + width: 9rem; +`;