From 3d8eeb40d3eac6b181ed876290f20a15f2735548 Mon Sep 17 00:00:00 2001 From: SuJin Date: Thu, 23 Nov 2023 02:42:27 +0900 Subject: [PATCH 01/10] Release test 0.0.1 (#41) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: 기본 컴포넌트 생성 * feat: 지도 구현 * Update README.md * Update README.md * Update README.md * feat: marker 이미지 추가 * feat: only icon marker 디자인 완료 * feat: name marker 디자인 완료 * refactor: 지도에 보이는 방식 변경 * feat: 업체 리스트 디자인 완료 하트 상태 useState로 관리 * Create pull_request_template.md * feat: 검색창 구현 * feat: 픽한업체 디자인 * refactor: 겹치는 코드 분리 size 인수로 받는 함수 만들어서 그 사이즈에 맞게 이미지 코드 반환 * feat: 필터 디자인 완료 * feat: 스크롤바 디자인 * style: store list 디자인 변경사항 반영 * style: 이름 마커 디자인 수정 * feat: 라우터 설정 * feat: 가게 정보 디자인 완료 * style: heart -> :+1: 으로 디자인 변경 * fix: 지도 안뜨는 문제 해결 * refact: 공통 컴포넌트 분리 (필터, 검색창) * refact: 이름 마커 컴포넌트 공통으로 리팩토링 * refact: children props 넘겨주는 방식 변경 * refact: icon marker 코드 하나로 분리 * chore: 해당하는 마커만 지도에 띄우기 * fix: 우선 error는 안뜨도록 수정 * fix: 같은 매장 여러번 클릭할 수 있도록 수정 * fix: 기본값 설정 * docs: PR template update 체크리스트 추가 * [#17] feat: 헤더 #17 (#21) * feat : 화면 구현 * feat : 헤더 구현 * style : 알림 아이콘 추가 * [#3] feat: 제휴가게 페이지 (#13) * feat: component 구성 * style: 타이틀 디자인 구현 완성 * style: 필터, 검색, 버튼 디자인 완료 * style: store 컴포넌트 디자인 완료 * style: 변경된 디자인 반영 * feat: 가게 검색 모달 창 디자인 완료 * feat: 공통 버튼 컴포넌트 분리 * feat: [제휴가게 조회] 컴포넌트 구성 * style: [제휴가게 조회] 화면 디자인 완료 * feat: 스탬프 모달 완성 * feat: 조건 박스 추가 * refact: modal 폴더 생성 * feat: 제휴 종료 모달 완성 * fix: 버튼 스타일링 변경 * refact: && 연산자로 변경 * [#22] feat: 가게 찾기 페이지 API 연결 (#25) * fix: img 오류 수정 * feat: api data 형식 추가 및 적용 * feat: 가게 전체 조회 api 연결 * style: 제목 div 깨짐 수정 * feat: map type filter 설정 * feat: filter API 설정 * feat: 위도 경도 연결 * refact: 전체 필터용으로 api 방식 수정 * feat: 픽한업체 필터 설정 * feat: 검색어 필터 연결 /contact 부분 props 수정 필요 * feat: storeInfo와 filter 예외처리 storeInfo가 열려있는 상태로 filter를 누르면 지도 내용이 누른 filter를 반영하도록 변경 * chore: 사용안하는 코드 삭제 * feat: 픽한 업체 API 연결 * feat: 가게 상세 정보 조회 API 연결 * fix: 선택한 가게 기본값 설정 * feat: 이름 마커 zindex 설정 * feat: 맨 위 데이터 "이름 마커" 로 뜨는 조건 * style: 디자인적 요소 수정 cursor 포인터로, 도보 시간 0분으로 안뜨도록, 픽한 업체 글자 눌렀을때도 클릭 되도록 * [#24] feat : 팝업관리, 쿠폰관리, 마이페이지, 대시보드 화면 구현 (#29) * feat : 화면 구현 * feat : 헤더 구현 * feat : 로그인 모달 구현 * feat : 회원가입 화면 구현 * style : header 알림 아이콘 추가 * style : 로그인 모달 세부 디자인 수정 * feat : api 설정 및 부분 연동 * feat : 로그인 액세스토큰 세션 스토리지에 저장 * feat : 대시보드 레이아웃 잡기 * feat : 첫번째 박스 구현 * feat : 두번째 박스 구현 * feat : 대시보드 화면 완성 * feat : 쿠폰관리 리스트 화면 구현 * feat : 팝업관리 화면 구현 * feat : popup api 연동 * feat : 쿠폰 등록 화면 구현 * feat : 비었을때 보여줄 컴포넌트 삽입 * feat : 팝업등록 화면 구현 * feat : 마이페이지 화면 구현 * feat : 팝업관리 화면 구현, 일부 api 연동 * [#16] feat: 팝업관리 페이지 디자인 구현 (#31) * feat: 가게 검색 모달 창 디자인 완료 * feat: 스탬프 모달 완성 * feat: 조건 박스 추가 * refact: modal 폴더 생성 * feat: 컴포넌트 구성 * feat: 팝업 관리 페이지 디자인 완료 * feat: 환경 설정 package json 수정, base api 수정 * [#28] feat: 제휴가게 API 연결 (#37) * fix: icon 에러 수정 * feat: 제휴가게리스트 API 연결 * feat: 라우터 연결 * fix: img 오류 수정 * feat: 제휴가게 상세 API 연결 * feat: modal api 연결 및 디자인 수정 * style: checkbox 적용 * [#39] fix : 서브메뉴 디자인 변경 및 링크추가 (#40) * style : 팝업 / 쿠폰 관리 삭제박스 추가 * fix : 헤더 디자인 수정 및 링크 추가 --------- Co-authored-by: Ethan Lim --- components/atoms/basics.ts | 3 +- components/hooks/useCouponData.ts | 52 +++-- components/hooks/usePopupData.ts | 51 +++-- components/hooks/useUniv.ts | 17 ++ components/organisms/Header.tsx | 37 +++- components/styles/PopUp.styles.tsx | 25 +++ components/styles/coupon/style.ts | 65 +++++- components/styles/popup/style.ts | 65 +++++- components/styles/user/second/style.ts | 7 + pages/api/StoreAPI.ts | 20 +- pages/api/axiosInstance.ts | 38 ++-- pages/api/coupon.ts | 74 +++++++ pages/api/login.ts | 26 +++ pages/api/others.ts | 34 ++++ pages/student/coupon/index.tsx | 22 ++- pages/student/coupon/register/Inputs.tsx | 241 ++++++++++++++++------- pages/student/popup/index.tsx | 106 +++++++--- pages/user/form/index.tsx | 59 ++++-- 18 files changed, 747 insertions(+), 195 deletions(-) create mode 100644 components/hooks/useUniv.ts create mode 100644 pages/api/others.ts diff --git a/components/atoms/basics.ts b/components/atoms/basics.ts index f13f6e5..3b4e8fb 100644 --- a/components/atoms/basics.ts +++ b/components/atoms/basics.ts @@ -1,5 +1,7 @@ import styled from "@emotion/styled"; +import { Checkbox } from "@mui/material"; + interface HorizontalBox { column?: string; } @@ -22,7 +24,6 @@ export const FlexBox = styled.div` flex-flow: ${(props) => (props?.column ? "column nowrap" : "row nowrap")}; `; - export const NumberBall = styled.div` width: 24px; height: 24px; diff --git a/components/hooks/useCouponData.ts b/components/hooks/useCouponData.ts index ad51edb..02a8dce 100644 --- a/components/hooks/useCouponData.ts +++ b/components/hooks/useCouponData.ts @@ -1,4 +1,7 @@ -import { useState } from "react"; + +import { getCoupons } from "@/pages/api/coupon"; +import { useEffect, useState } from "react"; + interface CouponContent { couponName: string; @@ -8,25 +11,40 @@ 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..20e91b3 100644 --- a/components/hooks/usePopupData.ts +++ b/components/hooks/usePopupData.ts @@ -3,10 +3,12 @@ import { useEffect, useState } from "react"; enum PopupPeriod { none, - aDay, - aWeek, - twoWeek, - aMonth, + + aDay = "하루간", + aWeek = "1주간", + twoWeek = "2주간", + aMonth = "1달간", + } interface Popup { @@ -18,13 +20,18 @@ 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 +42,21 @@ 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..40882a2 100644 --- a/components/organisms/Header.tsx +++ b/components/organisms/Header.tsx @@ -8,6 +8,9 @@ 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 +30,12 @@ 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: "", @@ -55,13 +63,16 @@ const Header = () => { { if (userSessionData) { - openModal(); + logoutHandler(); + } else { openModal(); } }} > - {userSessionData ? "로그인" : "로그아웃"} + + {userSessionData ? "로그아웃" : "로그인"} + @@ -84,14 +95,14 @@ const Header = () => { 대시보드 - 가게찾기 + 가게찾기 - 제휴가게 - + 제휴가게 - 학생관리 + 학생관리 + 팝업관리 @@ -148,6 +159,9 @@ const SubDropdownMenu = styled.div` visibility: hidden; + border-radius: 8px; + background: #f6f6f6; + display: flex; flex-flow: column nowrap; `; @@ -161,6 +175,10 @@ const SubDropdownMenuItem = styled.div` font-size: 0.7rem; width: 100px; height: 1.5rem; + + + padding: 3px 0px; + &:hover { background-color: gray; color: white; @@ -170,8 +188,11 @@ 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..f61f030 100644 --- a/components/styles/PopUp.styles.tsx +++ b/components/styles/PopUp.styles.tsx @@ -69,6 +69,17 @@ 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 +91,20 @@ 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..ce15012 100644 --- a/components/styles/coupon/style.ts +++ b/components/styles/coupon/style.ts @@ -3,9 +3,10 @@ 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%; @@ -35,7 +36,8 @@ 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 +50,10 @@ 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 +64,16 @@ 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 +81,10 @@ export const ListIndex = styled(FlexTemplate)` justify-content: center; align-items: center; + + + color: #0e6eff; + `; export const ListContent = styled(FlexTemplate)` @@ -77,7 +94,9 @@ 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 +110,15 @@ 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 +126,12 @@ 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 +172,25 @@ 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..b1d8bf2 100644 --- a/components/styles/popup/style.ts +++ b/components/styles/popup/style.ts @@ -3,8 +3,10 @@ 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%; @@ -34,7 +36,9 @@ 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 +51,10 @@ 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 +65,16 @@ 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 +82,9 @@ export const ListIndex = styled(FlexTemplate)` justify-content: center; align-items: center; + + color: #0e6eff; + `; export const ListContent = styled(FlexTemplate)` @@ -76,7 +94,9 @@ 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 +110,15 @@ 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 +126,12 @@ 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 +172,24 @@ 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..8808ee1 100644 --- a/components/styles/user/second/style.ts +++ b/components/styles/user/second/style.ts @@ -46,6 +46,13 @@ 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..8c74469 100644 --- a/pages/api/StoreAPI.ts +++ b/pages/api/StoreAPI.ts @@ -3,7 +3,9 @@ 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 +29,9 @@ 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 +47,9 @@ 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 +63,9 @@ 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 +79,9 @@ 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..d0631d1 100644 --- a/pages/api/axiosInstance.ts +++ b/pages/api/axiosInstance.ts @@ -1,18 +1,26 @@ 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 = axios.create({ - baseURL: process.env.NEXT_PUBLIC_BASE_API, - headers: { - "Content-Type": "application/json", - Authorization: `Bearer ${token}`, - }, -}); +export const axiosInstance = () => { + const userSession = sessionStorage.getItem("userSession"); + let token: string = ""; + + 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..722dfb7 100644 --- a/pages/api/login.ts +++ b/pages/api/login.ts @@ -79,3 +79,29 @@ 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..4a51ab0 100644 --- a/pages/student/coupon/index.tsx +++ b/pages/student/coupon/index.tsx @@ -1,16 +1,24 @@ 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 +35,9 @@ const CouponAdminPage: React.FC = () => { 내용 정보제공 + + 삭제 + {coupons.length !== 0 ? ( @@ -34,7 +45,14 @@ 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..6cf7736 100644 --- a/pages/student/coupon/register/Inputs.tsx +++ b/pages/student/coupon/register/Inputs.tsx @@ -1,8 +1,25 @@ -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 +32,159 @@ 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. 쿠폰정보 - - - - - - - - - 2. 쿠폰 발송 가게 - - - - - - - - } - /> - + + + 1. 쿠폰정보 + + + + + + + + + 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..6b5b5e2 100644 --- a/pages/student/popup/index.tsx +++ b/pages/student/popup/index.tsx @@ -1,34 +1,88 @@ -import * as styles from "@/components/styles/PopUp.styles"; -const PopUp = () => { +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 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..356a8d4 100644 --- a/pages/user/form/index.tsx +++ b/pages/user/form/index.tsx @@ -2,16 +2,14 @@ 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 +111,58 @@ 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; +`; + From 62cb9f305377b79feedd83e057bd8ff056d8d06d Mon Sep 17 00:00:00 2001 From: Ethan Lim Date: Thu, 23 Nov 2023 03:13:13 +0900 Subject: [PATCH 02/10] =?UTF-8?q?fix=20:=20=ED=83=80=EC=9E=85=20=EC=98=A4?= =?UTF-8?q?=EB=A5=98=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/hooks/usePopupData.ts | 47 ++++++------------------- pages/api/ContractAPI.ts | 4 +-- pages/api/login.ts | 42 ++++++++++++---------- pages/dashboard/BarChart.tsx | 2 +- pages/dashboard/PieCharts.tsx | 4 +-- pages/student/popup/index.tsx | 6 +--- pages/student/popup/register/Inputs.tsx | 2 +- pages/user/auth/index.tsx | 8 +++-- pages/user/form/index.tsx | 11 ++---- pages/user/index.tsx | 21 +++++------ 10 files changed, 61 insertions(+), 86 deletions(-) diff --git a/components/hooks/usePopupData.ts b/components/hooks/usePopupData.ts index 20e91b3..973509a 100644 --- a/components/hooks/usePopupData.ts +++ b/components/hooks/usePopupData.ts @@ -1,29 +1,26 @@ import { getPopups } from "@/pages/api/popup"; import { useEffect, useState } from "react"; -enum PopupPeriod { - none, +// enum PopupPeriod { +// none, - aDay = "하루간", - aWeek = "1주간", - twoWeek = "2주간", - aMonth = "1달간", - -} +// aDay = "하루간", +// aWeek = "1주간", +// twoWeek = "2주간", +// aMonth = "1달간", +// } interface Popup { title: string; - contents: string; - period: PopupPeriod; - timing: Date | boolean; - store: string; + content: string; + endData: string; + reservation: string; + storeId: number; } export const usePopupData = () => { - const [popups, setPopups] = useState([]); - // api 호출해서 초기화 useEffect(() => { const fetchData = async () => { @@ -31,7 +28,6 @@ export const usePopupData = () => { console.log(data); data && setPopups(data.content); - }; fetchData(); @@ -39,24 +35,3 @@ export const usePopupData = () => { return { popups }; }; - -// 예시 데이터 - - -// const exData: Popup[] = [ -// { -// title: "오늘만 배부른 최뚝배기 가게 5% 추가할인!", -// contents: "내용", -// period: PopupPeriod.twoWeek, -// timing: true, -// store: "최뚝배기", -// }, -// { -// title: "오늘만 배부른 최뚝배기 가게 5% 추가할인!", -// contents: "내용", -// period: PopupPeriod.twoWeek, -// timing: true, -// store: "최뚝배기", -// }, -// ]; - diff --git a/pages/api/ContractAPI.ts b/pages/api/ContractAPI.ts index e1c2e7d..0f27c7c 100644 --- a/pages/api/ContractAPI.ts +++ b/pages/api/ContractAPI.ts @@ -9,7 +9,7 @@ export const getContractBase = async ({ pageNumber = 0, }: FilterProps) => { try { - const response = await axiosInstance.get( + const response = await axiosInstance().get( `/contract?isPicked=${isPicked}&name=${name}&category=${category}&pageSize=40&pageNumber=${pageNumber}` ); return response.data; @@ -23,7 +23,7 @@ export const getContractBase = async ({ export const getContractInfo = async (id: number) => { try { - const response = await axiosInstance.get(`/contract/details/${id}`); + const response = await axiosInstance().get(`/contract/details/${id}`); return response.data; } catch (error) { if (axios.isAxiosError(error)) { diff --git a/pages/api/login.ts b/pages/api/login.ts index 722dfb7..f27926c 100644 --- a/pages/api/login.ts +++ b/pages/api/login.ts @@ -22,8 +22,10 @@ interface SignUpProps { // 로그인 export const login = async ({ email, password }: LoginProps) => { try { - const loginEndpoint = process.env.NEXT_PUBLIC_LOGIN_ENDPOINT; - const response = await apiBase.post(loginEndpoint, { email, password }); + const response = await apiBase.post( + `${process.env.NEXT_PUBLIC_LOGIN_ENDPOINT}`, + { email, password } + ); const accessToken = response.headers.authorization; console.log("로그인 성공:", accessToken); @@ -44,14 +46,16 @@ export const SignUp = async ({ proofImageUrl, }: SignUpProps) => { try { - const signUpEndpoint = process.env.NEXT_PUBLIC_SIGNUP_ENDPOINT; - const response = await apiBase.post(signUpEndpoint, { - email, - password, - type, - typeName, - proofImageUrl, - }); + const response = await apiBase.post( + `${process.env.NEXT_PUBLIC_SIGNUP_ENDPOINT}`, + { + email, + password, + type, + typeName, + proofImageUrl, + } + ); return response.data; } catch (error) { @@ -63,15 +67,18 @@ export const SignUp = async ({ // 이미지 업로드 (회원가입 전에) export const CreateImage = async (file: File) => { try { - const createImageEndpoint = process.env.NEXT_PUBLIC_CREATE_IMAGE_ENDPOINT; const formData = new FormData(); formData.append("file", file); - const response = await apiBase.post(createImageEndpoint, formData, { - headers: { - "Content-Type": "multipart/form-data", - }, - }); + const response = await apiBase.post( + `${process.env.NEXT_PUBLIC_CREATE_IMAGE_ENDPOINT}`, + formData, + { + headers: { + "Content-Type": "multipart/form-data", + }, + } + ); return response.data; } catch (error) { @@ -92,7 +99,7 @@ export const Logout = async () => { } try { const response = await apiBase.post( - process.env.NEXT_PUBLIC_LOGOUT_ENDPOINT, + `${process.env.NEXT_PUBLIC_LOGOUT_ENDPOINT}`, { headers: { Authorization: `Bearer ${token}`, @@ -104,4 +111,3 @@ export const Logout = async () => { console.error(`에러코드 : ${e}`); } }; - diff --git a/pages/dashboard/BarChart.tsx b/pages/dashboard/BarChart.tsx index d41456e..1db8c32 100644 --- a/pages/dashboard/BarChart.tsx +++ b/pages/dashboard/BarChart.tsx @@ -5,7 +5,7 @@ import { Bar, ResponsiveContainer, BarChart, XAxis } from "recharts"; interface DataProps { title: string; data: Array; - color: string; + color?: string; } interface ChartElement { diff --git a/pages/dashboard/PieCharts.tsx b/pages/dashboard/PieCharts.tsx index d12d5bf..4a93b1f 100644 --- a/pages/dashboard/PieCharts.tsx +++ b/pages/dashboard/PieCharts.tsx @@ -15,7 +15,7 @@ const data01 = [ const SecondBox: React.FC = () => { const [activeIndex, setActiveIndex] = useState(0); - const onPieEnter = (_, index) => { + const onPieEnter = (_: any, index: any) => { setActiveIndex(index); }; @@ -46,7 +46,7 @@ const SecondBox: React.FC = () => { ); }; -const renderActiveShape = (props) => { +const renderActiveShape = (props: any) => { const RADIAN = Math.PI / 180; const { cx, diff --git a/pages/student/popup/index.tsx b/pages/student/popup/index.tsx index 6b5b5e2..9eed27e 100644 --- a/pages/student/popup/index.tsx +++ b/pages/student/popup/index.tsx @@ -1,4 +1,3 @@ - import { useRouter } from "next/router"; import React from "react"; import * as styles from "@/components/styles/popup/style"; @@ -40,7 +39,7 @@ const PopupAdminPage: React.FC = () => { {element.content} - {element.endDate}/{element.reservation} + {element.content}/{element.reservation} @@ -78,11 +77,8 @@ const PopupAdminPage: React.FC = () => { 삭제하기
- ); }; - export default PopupAdminPage; - diff --git a/pages/student/popup/register/Inputs.tsx b/pages/student/popup/register/Inputs.tsx index 7953666..9e956e5 100644 --- a/pages/student/popup/register/Inputs.tsx +++ b/pages/student/popup/register/Inputs.tsx @@ -169,7 +169,7 @@ const Inputs: React.FC = () => { { + onChange={(newValue: any) => { let date = `${newValue.$y}-${newValue.$M}-${newValue.$D} ${newValue.$H}:${newValue.$m}`; console.log(date); setFormData((prev) => ({ diff --git a/pages/user/auth/index.tsx b/pages/user/auth/index.tsx index d194527..4603bd5 100644 --- a/pages/user/auth/index.tsx +++ b/pages/user/auth/index.tsx @@ -23,7 +23,7 @@ const AuthPage: React.FC = () => { const [proofImage, setProofImage] = useState(null); // input file changes - const handleFileInput = (e) => { + const handleFileInput = (e: any) => { const file = e.target.files[0]; console.log(file); setProofImage(file); @@ -31,7 +31,11 @@ const AuthPage: React.FC = () => { const registerImage = async () => { try { - const response = await CreateImage(proofImage); + let response: any = ""; + if (proofImage) { + response = await CreateImage(proofImage); + } + setProofImage(response); } catch (err) { console.error(err); diff --git a/pages/user/form/index.tsx b/pages/user/form/index.tsx index 356a8d4..917209f 100644 --- a/pages/user/form/index.tsx +++ b/pages/user/form/index.tsx @@ -10,7 +10,6 @@ import { useRouter } from "next/router"; import { css } from "@emotion/css"; import styled from "@emotion/styled"; - interface FormPageProps {} enum Unions { @@ -54,7 +53,7 @@ const FormPage: React.FC = () => { const checkBoxInputHandler = (e: React.ChangeEvent) => { const { name, checked } = e.target; - setFormData((prev) => ({ + setFormData((prev: any) => ({ ...prev, [name]: checked, })); @@ -63,7 +62,7 @@ const FormPage: React.FC = () => { const InputHandler = (e: React.ChangeEvent) => { const { value, name } = e.target; - setFormData((prev) => ({ + setFormData((prev: any) => ({ ...prev, [name]: value, })); @@ -111,7 +110,6 @@ const FormPage: React.FC = () => { - = () => { onChange={checkBoxInputHandler} /> - - = () => { onChange={checkBoxInputHandler} /> - = () => { export default FormPage; - const Label = styled.p` font-size: 1rem; font-weight: 500; width: 9rem; `; - diff --git a/pages/user/index.tsx b/pages/user/index.tsx index 86b8cb3..eefbfad 100644 --- a/pages/user/index.tsx +++ b/pages/user/index.tsx @@ -10,11 +10,11 @@ interface UserProps { } interface CheckBoxValid { - first?: boolean; - second?: boolean; - third?: boolean; - fourth?: boolean; - fifth?: boolean; + first: boolean; + second: boolean; + third: boolean; + fourth: boolean; + fifth: boolean; } const UserPage: React.FC = () => { @@ -82,7 +82,7 @@ const UserPage: React.FC = () => { ) => { + onChange={(e: React.ChangeEvent) => { const { checked } = e.target; checked ? setChecked({ @@ -93,6 +93,7 @@ const UserPage: React.FC = () => { fifth: true, }) : setChecked({ + first: true, second: true, third: true, fourth: true, @@ -106,7 +107,7 @@ const UserPage: React.FC = () => { 회원 서비스 이용약관 (필수) @@ -114,7 +115,7 @@ const UserPage: React.FC = () => { 개인정보 수집 및 이용동의 (필수) @@ -122,7 +123,7 @@ const UserPage: React.FC = () => { 개인정보의 제3자 제공 동의 (선택) @@ -130,7 +131,7 @@ const UserPage: React.FC = () => { 마케팅 수신 동의 (선택) From 0cda39c45b5a76dca0609a227042c3b6a0e35e51 Mon Sep 17 00:00:00 2001 From: SuJin Date: Thu, 23 Nov 2023 03:29:08 +0900 Subject: [PATCH 03/10] =?UTF-8?q?fix:=20error=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/StoreInfo.tsx | 2 +- components/organisms/Header.tsx | 13 +------------ 2 files changed, 2 insertions(+), 13 deletions(-) diff --git a/components/StoreInfo.tsx b/components/StoreInfo.tsx index 376e847..b4e127a 100644 --- a/components/StoreInfo.tsx +++ b/components/StoreInfo.tsx @@ -54,7 +54,7 @@ const StoreInfo = ({ storeId }: SInfo) => { 전화 컨택 가이드 - 🙂 안녕하세요, 건국대학교 예술대학 학생회 ‘다빈치' 입니다. 건국대 상권 + 🙂 안녕하세요, 건국대학교 예술대학 학생회 다빈치 입니다. 건국대 상권 활성화를 위한 제휴 사업을 제한하고자 합니다. diff --git a/components/organisms/Header.tsx b/components/organisms/Header.tsx index 40882a2..7a9ca82 100644 --- a/components/organisms/Header.tsx +++ b/components/organisms/Header.tsx @@ -19,7 +19,7 @@ TODO: const Header = () => { const router = useRouter(); const { openModal } = useModal(); - const [userSessionData, setUserSessionData] = useState(); + const [userSessionData, setUserSessionData] = useState(null); const setLogout = useSetRecoilState(initialState); @@ -45,7 +45,6 @@ const Header = () => { }); }; - return ( { />
    - { if (userSessionData) { logoutHandler(); - } else { openModal(); } }} > - {userSessionData ? "로그아웃" : "로그인"} - 회원가입 - 마이페이지 - @@ -91,7 +84,6 @@ const Header = () => {
      - 대시보드 @@ -102,7 +94,6 @@ const Header = () => { 학생관리 - 팝업관리 @@ -176,7 +167,6 @@ const SubDropdownMenuItem = styled.div` width: 100px; height: 1.5rem; - padding: 3px 0px; &:hover { @@ -188,7 +178,6 @@ const SubDropdownMenuItem = styled.div` const LowerMenuItem = styled.li` position: relative; - color: var(--, #3d4149); text-align: center; font-family: Pretendard; From 43a7b8002e9315c75f59ee929ba8908ecf3f5dd8 Mon Sep 17 00:00:00 2001 From: Ethan Lim Date: Thu, 23 Nov 2023 03:29:23 +0900 Subject: [PATCH 04/10] =?UTF-8?q?fix=20:=20=ED=83=80=EC=9E=85=20=EC=98=A4?= =?UTF-8?q?=EB=A5=98=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/atoms/modalState.tsx | 18 +++++------------- components/organisms/Header.tsx | 11 ----------- components/organisms/Modal.tsx | 6 +++--- pages/student/coupon/register/Inputs.tsx | 5 +---- pages/user/auth/index.tsx | 3 --- 5 files changed, 9 insertions(+), 34 deletions(-) diff --git a/components/atoms/modalState.tsx b/components/atoms/modalState.tsx index 5751344..9e72bbf 100644 --- a/components/atoms/modalState.tsx +++ b/components/atoms/modalState.tsx @@ -1,16 +1,8 @@ import { atom } from "recoil"; +const modalState = atom({ + key: "modalState", + default: false, +}); -if (!global._recoilAtoms) { - global._recoilAtoms = {}; -} - -export const modalState = - global._recoilAtoms.modalState || - atom({ - key: "modalState", - default: false, - }); - -global._recoilAtoms.modalState = modalState; - +export default modalState; diff --git a/components/organisms/Header.tsx b/components/organisms/Header.tsx index 40882a2..2b5c3c9 100644 --- a/components/organisms/Header.tsx +++ b/components/organisms/Header.tsx @@ -45,7 +45,6 @@ const Header = () => { }); }; - return ( { />
        - { if (userSessionData) { logoutHandler(); - } else { openModal(); } }} > - {userSessionData ? "로그아웃" : "로그인"} - 회원가입 - 마이페이지 - @@ -91,7 +84,6 @@ const Header = () => {
          - 대시보드 @@ -102,7 +94,6 @@ const Header = () => { 학생관리 - 팝업관리 @@ -176,7 +167,6 @@ const SubDropdownMenuItem = styled.div` width: 100px; height: 1.5rem; - padding: 3px 0px; &:hover { @@ -188,7 +178,6 @@ const SubDropdownMenuItem = styled.div` const LowerMenuItem = styled.li` position: relative; - color: var(--, #3d4149); text-align: center; font-family: Pretendard; diff --git a/components/organisms/Modal.tsx b/components/organisms/Modal.tsx index 40cc254..f955964 100644 --- a/components/organisms/Modal.tsx +++ b/components/organisms/Modal.tsx @@ -2,7 +2,7 @@ import React, { useEffect, useState } from "react"; import styled from "@emotion/styled"; import { Button, Checkbox, TextField, keyframes } from "@mui/material"; import { useRecoilState, useSetRecoilState } from "recoil"; -import { modalState } from "../atoms/modalState"; +import modalState from "../atoms/modalState"; import { useModal } from "../hooks/useModal"; import Logo from "@/components/atoms/Logo.svg"; import ModalCloseButton from "@/components/atoms/ModalCloseBtn.svg"; @@ -18,8 +18,8 @@ const LoginModal: React.FC = () => { const { closeModal } = useModal(); - const [email, setEmail] = useState(); - const [password, setPassword] = useState(); + const [email, setEmail] = useState(""); + const [password, setPassword] = useState(""); const setLoginedUserState = useSetRecoilState(initialState); const handleLogin = async (email: string, password: string) => { diff --git a/pages/student/coupon/register/Inputs.tsx b/pages/student/coupon/register/Inputs.tsx index 6cf7736..c3dfcb8 100644 --- a/pages/student/coupon/register/Inputs.tsx +++ b/pages/student/coupon/register/Inputs.tsx @@ -1,4 +1,3 @@ - import React, { useEffect, useMemo, useState } from "react"; import * as styles from "./Inputs.style"; import { css } from "@emotion/css"; @@ -33,7 +32,6 @@ const Inputs: React.FC = () => { [] ); - const [formData, setFormData] = useState({ storeId: 2, type: "COUPON", @@ -133,7 +131,7 @@ const Inputs: React.FC = () => { placeholder={placeHolders[3]} name="condition" onChange={(e) => { - let result = []; + let result: any = []; result.push(e.target.value); setFormData((prev) => ({ ...prev, conditions: result })); @@ -184,7 +182,6 @@ const Inputs: React.FC = () => { - ); }; diff --git a/pages/user/auth/index.tsx b/pages/user/auth/index.tsx index 4603bd5..68c10f2 100644 --- a/pages/user/auth/index.tsx +++ b/pages/user/auth/index.tsx @@ -1,8 +1,6 @@ import * as phase from "@/components/styles/user/first/style"; import * as styles from "@/components/styles/user/third/style"; import { CreateImage, SignUp } from "@/pages/api/login"; -import { Button, Checkbox, TextField } from "@mui/material"; -import axios from "axios"; import Head from "next/head"; import { useRouter } from "next/router"; import React, { useState } from "react"; @@ -17,7 +15,6 @@ const AuthPage: React.FC = () => { // states const [email, setEmail] = useState(""); - const [phone, setPhone] = useState(""); const [password, setPassword] = useState(""); const [passwordConfirm, setPasswordConfirm] = useState(""); const [proofImage, setProofImage] = useState(null); From 031ce3fbf483d3b3fcc4c89fdfb4ef20a0815e5c Mon Sep 17 00:00:00 2001 From: SuJin Date: Thu, 23 Nov 2023 03:33:48 +0900 Subject: [PATCH 05/10] fix: modal error --- components/hooks/useModal.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/hooks/useModal.ts b/components/hooks/useModal.ts index e863fd0..c394af6 100644 --- a/components/hooks/useModal.ts +++ b/components/hooks/useModal.ts @@ -1,5 +1,5 @@ import { useSetRecoilState } from "recoil"; -import { modalState } from "../atoms/modalState"; +import modalState from "../atoms/modalState"; export const useModal = () => { const setModalOpen = useSetRecoilState(modalState); From 5e934b9a7f828a1eabdd2341773736f6706baa27 Mon Sep 17 00:00:00 2001 From: SuJin Date: Thu, 23 Nov 2023 03:37:18 +0900 Subject: [PATCH 06/10] fix: npm run build error --- package-lock.json | 16 ++++++++++++++++ package.json | 1 + 2 files changed, 17 insertions(+) diff --git a/package-lock.json b/package-lock.json index fbf838c..d59ed64 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,6 +16,7 @@ "@mui/x-date-pickers": "^6.18.1", "@svgr/webpack": "^8.1.0", "axios": "^1.5.1", + "date-fns": "^2.30.0", "dayjs": "^1.11.10", "next": "latest", "react": "latest", @@ -4062,6 +4063,21 @@ "integrity": "sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==", "dev": true }, + "node_modules/date-fns": { + "version": "2.30.0", + "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz", + "integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==", + "dependencies": { + "@babel/runtime": "^7.21.0" + }, + "engines": { + "node": ">=0.11" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/date-fns" + } + }, "node_modules/dayjs": { "version": "1.11.10", "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.10.tgz", diff --git a/package.json b/package.json index d64d59a..e4600b3 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ "@mui/x-date-pickers": "^6.18.1", "@svgr/webpack": "^8.1.0", "axios": "^1.5.1", + "date-fns": "^2.30.0", "dayjs": "^1.11.10", "next": "latest", "react": "latest", From be4daf98fb69ef6ad7f02bdbadf3621641bcafd6 Mon Sep 17 00:00:00 2001 From: SuJin Date: Thu, 23 Nov 2023 03:52:36 +0900 Subject: [PATCH 07/10] =?UTF-8?q?fix:=20build=20error=20=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../styles/CInputs.style.ts | 0 .../styles}/Inputs.style.ts | 0 .../styles}/SecondBox.styles.ts | 0 pages/apply/form/index.tsx | 0 pages/apply/index.tsx | 85 ------------------- pages/dashboard/BarChart.tsx | 2 +- pages/dashboard/FifthBox.tsx | 0 pages/dashboard/FourthBox.tsx | 0 pages/dashboard/ListChart.tsx | 2 +- pages/dashboard/PieCharts.tsx | 2 +- pages/dashboard/StackCharts.tsx | 2 +- pages/student/coupon/register/Inputs.tsx | 2 +- 12 files changed, 5 insertions(+), 90 deletions(-) rename pages/student/coupon/register/Inputs.style.ts => components/styles/CInputs.style.ts (100%) rename {pages/student/popup/register => components/styles}/Inputs.style.ts (100%) rename {pages/dashboard => components/styles}/SecondBox.styles.ts (100%) delete mode 100644 pages/apply/form/index.tsx delete mode 100644 pages/apply/index.tsx delete mode 100644 pages/dashboard/FifthBox.tsx delete mode 100644 pages/dashboard/FourthBox.tsx diff --git a/pages/student/coupon/register/Inputs.style.ts b/components/styles/CInputs.style.ts similarity index 100% rename from pages/student/coupon/register/Inputs.style.ts rename to components/styles/CInputs.style.ts diff --git a/pages/student/popup/register/Inputs.style.ts b/components/styles/Inputs.style.ts similarity index 100% rename from pages/student/popup/register/Inputs.style.ts rename to components/styles/Inputs.style.ts diff --git a/pages/dashboard/SecondBox.styles.ts b/components/styles/SecondBox.styles.ts similarity index 100% rename from pages/dashboard/SecondBox.styles.ts rename to components/styles/SecondBox.styles.ts diff --git a/pages/apply/form/index.tsx b/pages/apply/form/index.tsx deleted file mode 100644 index e69de29..0000000 diff --git a/pages/apply/index.tsx b/pages/apply/index.tsx deleted file mode 100644 index 7f5788d..0000000 --- a/pages/apply/index.tsx +++ /dev/null @@ -1,85 +0,0 @@ -import * as styles from "@/components/styles/apply-list/style"; -import Head from "next/head"; -import MySvg from "@/components/atoms/ApplyListIcon.svg"; - -export default function ApplyList() { - return ( - <> - - 제휴제안서 리스트 - - - - 제안서 작성 - - 컨텍 전 제안서 - 사장님이 검토 중인 제안서 - - - {StoreInfo.map((element, index) => { - return ( - -
          - -

          {element.category}

          -
          -
          -

          {element.title}

          -

          {element.description}

          -

          {element.address}

          -

          {element.distance}

          -
          -           - ); - })} -           - 추가하기 -           - - ); -} - -const StoreInfo = [ - { - title: "냠냠돈까스", - description: "아메리칸 브런치, 잉글리쉬 브런치, 인도커리 브런치 등", - address: "서울특별시 성동구 청계천로 474", - distance: 176, - category: "음식점", - }, - { - title: "냠냠돈까스", - description: "아메리칸 브런치, 잉글리쉬 브런치, 인도커리 브런치 등", - address: "서울특별시 성동구 청계천로 474", - distance: 176, - category: "음식점", - }, - { - title: "냠냠돈까스", - description: "아메리칸 브런치, 잉글리쉬 브런치, 인도커리 브런치 등", - address: "서울특별시 성동구 청계천로 474", - distance: 176, - category: "음식점", - }, - { - title: "냠냠돈까스", - description: "아메리칸 브런치, 잉글리쉬 브런치, 인도커리 브런치 등", - address: "서울특별시 성동구 청계천로 474", - distance: 176, - category: "음식점", - }, - { - title: "냠냠돈까스", - description: "아메리칸 브런치, 잉글리쉬 브런치, 인도커리 브런치 등", - address: "서울특별시 성동구 청계천로 474", - distance: 176, - category: "음식점", - }, - { - title: "냠냠돈까스", - description: "아메리칸 브런치, 잉글리쉬 브런치, 인도커리 브런치 등", - address: "서울특별시 성동구 청계천로 474", - distance: 176, - category: "음식점", - }, -]; diff --git a/pages/dashboard/BarChart.tsx b/pages/dashboard/BarChart.tsx index 1db8c32..143a302 100644 --- a/pages/dashboard/BarChart.tsx +++ b/pages/dashboard/BarChart.tsx @@ -1,5 +1,5 @@ import React from "react"; -import * as ChartStyles from "./SecondBox.styles"; +import * as ChartStyles from "../../components/styles/SecondBox.styles"; import { Bar, ResponsiveContainer, BarChart, XAxis } from "recharts"; interface DataProps { diff --git a/pages/dashboard/FifthBox.tsx b/pages/dashboard/FifthBox.tsx deleted file mode 100644 index e69de29..0000000 diff --git a/pages/dashboard/FourthBox.tsx b/pages/dashboard/FourthBox.tsx deleted file mode 100644 index e69de29..0000000 diff --git a/pages/dashboard/ListChart.tsx b/pages/dashboard/ListChart.tsx index c6fefd0..29ff009 100644 --- a/pages/dashboard/ListChart.tsx +++ b/pages/dashboard/ListChart.tsx @@ -1,6 +1,6 @@ import React from "react"; import styled from "@emotion/styled"; -import * as containerStyle from "./SecondBox.styles"; +import * as containerStyle from "../../components/styles/SecondBox.styles"; import { css } from "@emotion/css"; import { NumberBall } from "@/components/atoms/basics"; diff --git a/pages/dashboard/PieCharts.tsx b/pages/dashboard/PieCharts.tsx index 4a93b1f..f8f8702 100644 --- a/pages/dashboard/PieCharts.tsx +++ b/pages/dashboard/PieCharts.tsx @@ -1,5 +1,5 @@ import { ReactNode, useState } from "react"; -import * as styles from "./SecondBox.styles"; +import * as styles from "../../components/styles/SecondBox.styles"; import { Pie, PieChart, ResponsiveContainer, Sector, Tooltip } from "recharts"; interface SecondBoxProps { children?: ReactNode; diff --git a/pages/dashboard/StackCharts.tsx b/pages/dashboard/StackCharts.tsx index 3f46019..a63aae5 100644 --- a/pages/dashboard/StackCharts.tsx +++ b/pages/dashboard/StackCharts.tsx @@ -10,7 +10,7 @@ interface ThirdBoxProps { children?: ReactNode; } -import * as styles from "./SecondBox.styles"; +import * as styles from "../../components/styles/SecondBox.styles"; const ThirdBox: React.FC = () => { return ( diff --git a/pages/student/coupon/register/Inputs.tsx b/pages/student/coupon/register/Inputs.tsx index c3dfcb8..619712a 100644 --- a/pages/student/coupon/register/Inputs.tsx +++ b/pages/student/coupon/register/Inputs.tsx @@ -1,5 +1,5 @@ import React, { useEffect, useMemo, useState } from "react"; -import * as styles from "./Inputs.style"; +import * as styles from "../../../../components/styles/CInputs.style"; import { css } from "@emotion/css"; import { Checkbox, From 91efb0bb8d0d83e334e50ff5b91fd46de03a29b4 Mon Sep 17 00:00:00 2001 From: SuJin Date: Thu, 23 Nov 2023 03:56:22 +0900 Subject: [PATCH 08/10] =?UTF-8?q?fix:=20=EC=9C=84=EC=B9=98=20=EC=97=90?= =?UTF-8?q?=EB=9F=AC=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages/student/popup/register/Inputs.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pages/student/popup/register/Inputs.tsx b/pages/student/popup/register/Inputs.tsx index 9e956e5..0b573b1 100644 --- a/pages/student/popup/register/Inputs.tsx +++ b/pages/student/popup/register/Inputs.tsx @@ -1,5 +1,5 @@ import React, { useEffect, useMemo, useState } from "react"; -import * as styles from "./Inputs.style"; +import * as styles from "@/components/styles/Inputs.style"; import { css } from "@emotion/css"; import { FilledInput, IconButton, InputAdornment } from "@mui/material"; import SearchTwoToneIcon from "@mui/icons-material/SearchTwoTone"; From 858f3684119ade22ec9414da5fedbad19a75f3be Mon Sep 17 00:00:00 2001 From: Ethan Lim Date: Thu, 23 Nov 2023 06:21:38 +0900 Subject: [PATCH 09/10] =?UTF-8?q?feat=20:=20=EA=B0=80=EA=B2=8C=20=EB=8C=80?= =?UTF-8?q?=EC=8B=9C=EB=B3=B4=EB=93=9C=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/atoms/ChartBackground.svg | 6 +- components/styles/dashboardDetail/style.ts | 114 ++++++++++++++ pages/dashboard/BackgroundedChart.tsx | 98 ++++++++++++ pages/dashboard/ComposedChart.tsx | 125 ++++++++++++++++ pages/dashboard/FirstChart.tsx | 49 ++++++ pages/dashboard/ListChart.tsx | 2 +- pages/dashboard/OneStackChart.tsx | 110 ++++++++++++++ pages/dashboard/PieCharts.tsx | 3 +- pages/dashboard/StackCharts.tsx | 2 +- pages/dashboard/[store].tsx | 166 +++++++++++++++++++++ pages/dashboard/index.tsx | 14 +- 11 files changed, 680 insertions(+), 9 deletions(-) create mode 100644 components/styles/dashboardDetail/style.ts create mode 100644 pages/dashboard/BackgroundedChart.tsx create mode 100644 pages/dashboard/ComposedChart.tsx create mode 100644 pages/dashboard/FirstChart.tsx create mode 100644 pages/dashboard/OneStackChart.tsx create mode 100644 pages/dashboard/[store].tsx diff --git a/components/atoms/ChartBackground.svg b/components/atoms/ChartBackground.svg index 373882b..65fafaa 100644 --- a/components/atoms/ChartBackground.svg +++ b/components/atoms/ChartBackground.svg @@ -1,4 +1,4 @@ - - - + + + diff --git a/components/styles/dashboardDetail/style.ts b/components/styles/dashboardDetail/style.ts new file mode 100644 index 0000000..1f934ba --- /dev/null +++ b/components/styles/dashboardDetail/style.ts @@ -0,0 +1,114 @@ +import { FlexTemplate, GridTemplate } from "@/components/atoms/basics"; +import styled from "@emotion/styled"; + +export const Container = styled(FlexTemplate)` + flex-flow: column nowrap; + + padding-top: 1rem; + width: 80%; + margin: 0px auto; + + row-gap: 3rem; +`; + +export const UpperContainer = styled(FlexTemplate)` + flex-flow: column nowrap; + + row-gap: 10px; +`; + +export const LowerContainer = styled(GridTemplate)` + width: 100%; + min-height: 100vh; + + grid-template-columns: repeat(6, 1fr); + grid-template-rows: repeat(6, minmax(auto, 1fr)); + + row-gap: 15px; + column-gap: 15px; +`; +// ----- Layers ------ +export const FirstBox = styled(FlexTemplate)` + grid-column: 1/3; + grid-row: 1/2; + + height: 100%; + width: 100%; + padding: 10px; +`; +export const SecondBox = styled(FlexTemplate)` + grid-column: 3/5; + grid-row: 1/2; + padding: 10px; +`; +export const ThirdBox = styled(FlexTemplate)` + grid-column: 5/7; + grid-row: 1/2; + border: 1px solid var(--g0, #f4f4f4); + padding: 10px; +`; + +export const FourthBox = styled(FlexTemplate)` + grid-column: 1/4; + grid-row: 2/4; + border: 1px solid var(--g0, #f4f4f4); + padding: 10px; + + justify-content: center; + align-items: center; +`; +export const FifthBox = styled(FlexTemplate)` + grid-column: 4/7; + grid-row: 2/4; + border: 1px solid var(--g0, #f4f4f4); + padding: 10px; +`; + +export const SixthBox = styled(FlexTemplate)` + grid-column: 1/4; + grid-row: 4/7; + border: 1px solid var(--g0, #f4f4f4); + padding: 10px; +`; +export const SeventhBox = styled(FlexTemplate)` + grid-column: 4/7; + grid-row: 4/7; + border: 1px solid var(--g0, #f4f4f4); + padding: 10px; +`; + +// ----- Box Level ------ +export const IndexBtnBox = styled(FlexTemplate)` + column-gap: 10px; +`; + +// ------ element Level ------ +export const Title = styled.p` + color: var(--, #1c1c1e); + font-family: Pretendard Variable; + font-size: 28px; + font-style: normal; + font-weight: 600; + + margin-bottom: 20px; +`; + +export const SubTitle = styled.p` + color: #676767; + font-family: Pretendard Variable; + font-size: 15px; + font-style: normal; + font-weight: 500; + + margin-bottom: 15px; +`; + +export const IndexButton = styled(FlexTemplate)` + border: 1px solid var(--g1, #c6c6c6); + width: 113px; + height: 37px; + padding: 5.827px 20.977px; + + justify-content: center; + align-items: center; +`; diff --git a/pages/dashboard/BackgroundedChart.tsx b/pages/dashboard/BackgroundedChart.tsx new file mode 100644 index 0000000..a61e272 --- /dev/null +++ b/pages/dashboard/BackgroundedChart.tsx @@ -0,0 +1,98 @@ +import { FlexTemplate } from "@/components/atoms/basics"; +import styled from "@emotion/styled"; +import { Bar, BarChart, ResponsiveContainer, XAxis } from "recharts"; +interface ChartProps { + title: string; + color?: string; + data: Array; +} + +interface Data { + name: string; + uv: number; + pv: number; + amt: number; +} + +const BackgroundedChart: React.FC = ({ + title, + color = "#8884d8", + data, +}) => { + return ( + + + + {title} + + + + + + + + + + + + ); +}; + +export default BackgroundedChart; + +const Container = styled(FlexTemplate)` + height: 100%; + width: 100%; + position: relative; +`; + +const LayerBox = styled(FlexTemplate)` + position: absolute; + z-index: 10; + + width: 565px; + height: 347px; + + flex-flow: column nowrap; + align-items: center; + justify-content: center; + width: 100%; +`; + +const LayerTitleBox = styled(FlexTemplate)` + width: 100%; + + justify-content: center; +`; + +const ChartTitle = styled.p` + width: 50%; + text-align: center; + padding-bottom: 1rem; + padding-top: 1rem; + font-weight: 500; + font-size: 1.5rem; + border-bottom: 2px solid black; +`; +const ChartBox = styled(FlexTemplate)` + width: 100%; + height: 80%; + + padding-top: 10px; +`; + +const Title = styled.p` + color: #676767; + font-family: Pretendard Variable; + font-size: 1rem; + font-style: normal; + font-weight: 500; +`; + +const Contents = styled.p` + color: #000; + font-family: Pretendard Variable; + font-size: 1.7rem; + font-style: normal; + font-weight: bolder; +`; diff --git a/pages/dashboard/ComposedChart.tsx b/pages/dashboard/ComposedChart.tsx new file mode 100644 index 0000000..cbdb92c --- /dev/null +++ b/pages/dashboard/ComposedChart.tsx @@ -0,0 +1,125 @@ +import { FlexTemplate } from "@/components/atoms/basics"; +import styled from "@emotion/styled"; +import { + Area, + AreaChart, + CartesianGrid, + Legend, + Line, + LineChart, + ResponsiveContainer, + Tooltip, +} from "recharts"; + +interface ChartProps { + title: string; +} + +const ComposedChart: React.FC = ({ title }) => { + return ( + + + {title} + + + + + + + + + + + + + + + ); +}; + +export default ComposedChart; + +const Container = styled(FlexTemplate)` + width: 100%; + height: 100%; + + flex-flow: column nowrap; +`; +const Title = styled.p` + width: 100%; + color: #676767; + font-family: Pretendard Variable; + font-size: 1.5rem; + font-style: normal; + font-weight: 500; +`; + +const UpperBox = styled(FlexTemplate)` + height: 10%; +`; + +const ContentBox = styled(FlexTemplate)` + height: 90%; + justify-content: center; + align-items: center; +`; + +const data = [ + { + name: "Page A", + uv: 800, + pv: 2400, + amt: 600, + }, + { + name: "Page B", + uv: 1000, + pv: 1398, + amt: 990, + }, + { + name: "Page C", + uv: 1230, + pv: 9800, + amt: 1100, + }, + { + name: "Page D", + uv: 2500, + pv: 3908, + amt: 1250, + }, + { + name: "Page E", + uv: 1600, + pv: 4800, + amt: 1300, + }, + { + name: "Page F", + uv: 1700, + pv: 3800, + amt: 1600, + }, + { + name: "Page G", + uv: 3490, + pv: 4300, + amt: 2100, + }, +]; diff --git a/pages/dashboard/FirstChart.tsx b/pages/dashboard/FirstChart.tsx new file mode 100644 index 0000000..20f62aa --- /dev/null +++ b/pages/dashboard/FirstChart.tsx @@ -0,0 +1,49 @@ +import { FlexTemplate } from "@/components/atoms/basics"; +import styled from "@emotion/styled"; + +interface ChartProps { + title: string; + content: string; +} + +const FirstChart: React.FC = ({ title, content }) => { + return ( + + {title} + {content} + + ); +}; + +export default FirstChart; + +const Container = styled(FlexTemplate)` + width: 95%; + height: 90%; + padding: 3%; + + margin: 0px auto; + border-bottom: 2px solid black; + + flex-flow: column nowrap; + justify-content: flex-start; + align-items: flex-start; + + row-gap: 25px; +`; + +const Title = styled.p` + color: #676767; + font-family: Pretendard Variable; + font-size: 1.5rem; + font-style: normal; + font-weight: 500; +`; + +const Contents = styled.p` + color: #000; + font-family: Pretendard Variable; + font-size: 1.7rem; + font-style: normal; + font-weight: bolder; +`; diff --git a/pages/dashboard/ListChart.tsx b/pages/dashboard/ListChart.tsx index 29ff009..df2cfb1 100644 --- a/pages/dashboard/ListChart.tsx +++ b/pages/dashboard/ListChart.tsx @@ -37,7 +37,7 @@ const ListChart: React.FC = ({ title, contents }) => { `} key={index} > - {index} + {index + 1} {element} ); diff --git a/pages/dashboard/OneStackChart.tsx b/pages/dashboard/OneStackChart.tsx new file mode 100644 index 0000000..c99691e --- /dev/null +++ b/pages/dashboard/OneStackChart.tsx @@ -0,0 +1,110 @@ +import { FlexTemplate } from "@/components/atoms/basics"; +import styled from "@emotion/styled"; +import { + Area, + AreaChart, + CartesianGrid, + Line, + LineChart, + ResponsiveContainer, + Tooltip, +} from "recharts"; + +interface ChartProps { + title: string; +} + +const OneStackChart: React.FC = ({ title }) => { + return ( + + + {title} + + + + + + + + + + ); +}; + +export default OneStackChart; + +const Container = styled(FlexTemplate)` + width: 100%; + height: 100%; + + flex-flow: column nowrap; +`; +const Title = styled.p` + width: 100%; + color: #676767; + font-family: Pretendard Variable; + font-size: 1.5rem; + font-style: normal; + font-weight: 500; +`; + +const UpperBox = styled(FlexTemplate)` + height: 10%; +`; + +const ContentBox = styled(FlexTemplate)` + height: 100%; + width: 100%; + justify-content: center; + align-items: center; +`; + +const data = [ + { + name: "Page A", + uv: 800, + pv: 2400, + amt: 2400, + }, + { + name: "Page B", + uv: 1400, + pv: 1398, + amt: 2210, + }, + { + name: "Page C", + uv: 700, + pv: 9800, + amt: 2290, + }, + { + name: "Page D", + uv: 1100, + pv: 3908, + amt: 2000, + }, + { + name: "Page E", + uv: 1890, + pv: 4800, + amt: 2181, + }, + { + name: "Page F", + uv: 3000, + pv: 3800, + amt: 2500, + }, + { + name: "Page G", + uv: 5000, + pv: 4300, + amt: 2100, + }, +]; diff --git a/pages/dashboard/PieCharts.tsx b/pages/dashboard/PieCharts.tsx index f8f8702..5545b27 100644 --- a/pages/dashboard/PieCharts.tsx +++ b/pages/dashboard/PieCharts.tsx @@ -93,13 +93,14 @@ const renderActiveShape = (props: any) => { innerRadius={outerRadius + 6} outerRadius={outerRadius + 10} fill={fill} + color="#0E6EFF" /> - + = 0 ? 1 : -1) * 12} y={ey} diff --git a/pages/dashboard/StackCharts.tsx b/pages/dashboard/StackCharts.tsx index a63aae5..893e9de 100644 --- a/pages/dashboard/StackCharts.tsx +++ b/pages/dashboard/StackCharts.tsx @@ -39,7 +39,7 @@ const ThirdBox: React.FC = () => { type="monotone" dataKey="uv" stroke="#8884d8" - fill="#8884d8" + fill="#0E6EFF" /> diff --git a/pages/dashboard/[store].tsx b/pages/dashboard/[store].tsx new file mode 100644 index 0000000..7656f46 --- /dev/null +++ b/pages/dashboard/[store].tsx @@ -0,0 +1,166 @@ +import { useRouter } from "next/router"; +import { useEffect, useState } from "react"; +import * as styles from "@/components/styles/dashboardDetail/style"; +import useDateRange from "@/components/hooks/useDateRange"; +import FirstChart from "./FirstChart"; +import ComposedChart from "./ComposedChart"; +import OneStackChart from "./OneStackChart"; +import BackgroundedChart from "./BackgroundedChart"; +import FirstLayerChart from "./FirstLayerChart"; + +interface dateProps { + startDate: string; + endDate: string; +} + +const StorePage = () => { + const router = useRouter(); + const { store } = router.query; + + const [date, setDate] = useState(); + const { dateRange, calculateDateRange } = useDateRange(); + + useEffect(() => { + calculateDateRange(1, "month"); + }, []); + + return ( + + + {store}의 대시보드 + + {dateRange?.startDate} ~ {dateRange?.endDate}기준입니다 + + + 최근 7일 + 최근 14일 + 이번 달 + 지난 달 + 올해 + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; + +export default StorePage; + +const data = [ + { + name: "월요일", + uv: 200, + pv: 2400, + amt: 2400, + }, + { + name: "화요일", + uv: 1000, + pv: 1398, + amt: 2210, + }, + { + name: "수요일", + uv: 1400, + pv: 9800, + amt: 2290, + }, + { + name: "목요일", + uv: 1200, + pv: 3908, + amt: 2000, + }, + { + name: "금요일", + uv: 800, + pv: 4800, + amt: 2181, + }, + { + name: "토요일", + uv: 1500, + pv: 3800, + amt: 2500, + }, + { + name: "일요일", + uv: 1700, + pv: 4300, + amt: 2100, + }, +]; + +const data2 = [ + { + name: "경영", + uv: 4000, + pv: 2400, + amt: 2400, + }, + { + name: "경제", + uv: 3000, + pv: 1398, + amt: 2210, + }, + { + name: "컴공", + uv: 2000, + pv: 9800, + amt: 2290, + }, + { + name: "신소재", + uv: 2780, + pv: 3908, + amt: 2000, + }, + { + name: "법학", + uv: 1890, + pv: 4800, + amt: 2181, + }, + { + name: "영어영문", + uv: 2390, + pv: 3800, + amt: 2500, + }, + { + name: "철학", + uv: 3490, + pv: 4300, + amt: 2100, + }, +]; diff --git a/pages/dashboard/index.tsx b/pages/dashboard/index.tsx index 9edeee0..035a7c8 100644 --- a/pages/dashboard/index.tsx +++ b/pages/dashboard/index.tsx @@ -82,7 +82,7 @@ const DashBoardPage: React.FC = () => { - + @@ -107,10 +107,18 @@ const DashBoardPage: React.FC = () => { - + - + From bb359e0bcb70440809e23e6a02edc753e77f483e Mon Sep 17 00:00:00 2001 From: Ethan Lim Date: Thu, 23 Nov 2023 06:38:31 +0900 Subject: [PATCH 10/10] =?UTF-8?q?style=20:=20=EB=8C=80=EC=8B=9C=EB=B3=B4?= =?UTF-8?q?=EB=93=9C=20=EA=B0=80=EA=B2=8C=20=EB=A9=94=EB=89=B4=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages/dashboard/[store].tsx | 2 +- pages/dashboard/index.tsx | 11 ++++++++--- pages/user/index.tsx | 13 ++++++++++++- 3 files changed, 21 insertions(+), 5 deletions(-) diff --git a/pages/dashboard/[store].tsx b/pages/dashboard/[store].tsx index 7656f46..8345be8 100644 --- a/pages/dashboard/[store].tsx +++ b/pages/dashboard/[store].tsx @@ -50,7 +50,7 @@ const StorePage = () => { - + diff --git a/pages/dashboard/index.tsx b/pages/dashboard/index.tsx index 035a7c8..932aa71 100644 --- a/pages/dashboard/index.tsx +++ b/pages/dashboard/index.tsx @@ -9,6 +9,7 @@ import StackCharts from "./StackCharts"; import ListChart from "./ListChart"; import { useDashBoardData } from "@/components/hooks/useDashBoardData"; import BarChart from "./BarChart"; +import Filter from "@/components/organisms/Filter"; interface DashBoardProps {} interface DateState { @@ -25,6 +26,10 @@ const DashBoardPage: React.FC = () => { const { dateRange, calculateDateRange } = useDateRange(); const barChartData = useDashBoardData({ selection: 1 }).data; const barChartData2 = useDashBoardData({ selection: 2 }).data; + const [contentFilter, setContentFilter] = useState< + "NONE" | "FOOD" | "CAFE" | "BEAUTY" | "CULTURE" | "ETC" + >("FOOD"); + const [dateFilter, setDateFilter] = useState({ dates: dates.aWeek, }); @@ -55,15 +60,15 @@ const DashBoardPage: React.FC = () => { - + {/* 전체 음식점 카페 미용 문화 기타 - - + */} + 최근 7일 최근 14일 diff --git a/pages/user/index.tsx b/pages/user/index.tsx index eefbfad..8cde615 100644 --- a/pages/user/index.tsx +++ b/pages/user/index.tsx @@ -3,7 +3,8 @@ import { Checkbox } from "@mui/material"; import Head from "next/head"; import { useRouter } from "next/router"; import { useEffect, useState } from "react"; - +import CheckCircleIcon from "@mui/icons-material/CheckCircle"; +import CircleIcon from "@mui/icons-material/Circle"; interface UserProps { name?: string; isLogin?: boolean; @@ -82,6 +83,8 @@ const UserPage: React.FC = () => { } + checkedIcon={} onChange={(e: React.ChangeEvent) => { const { checked } = e.target; checked @@ -105,6 +108,8 @@ const UserPage: React.FC = () => { } + checkedIcon={} checked={checked.second} name="second" onChange={checkBoxHandler} @@ -113,6 +118,8 @@ const UserPage: React.FC = () => { } + checkedIcon={} name="third" checked={checked.third} onChange={checkBoxHandler} @@ -121,6 +128,8 @@ const UserPage: React.FC = () => { } + checkedIcon={} name="fourth" checked={checked.fourth} onChange={checkBoxHandler} @@ -129,6 +138,8 @@ const UserPage: React.FC = () => { } + checkedIcon={} name="fifth" checked={checked.fifth} onChange={checkBoxHandler}