[#45] feat : 개별 대시보드 개발 및 전체대시보드 색상 수정 (#46)

* Release test 0.0.1 (#41)

* 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 -> 👍 으로 디자인 변경

* 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 <studentlimsoo@gmail.com>

* fix : 타입 오류 수정

* fix: error 수정

* fix : 타입 오류 수정

* fix: modal error

* fix: npm run build error

* fix: build error 해결

* fix: 위치 에러 수정

* feat : 가게 대시보드 구현

---------

Co-authored-by: SuJin <kimsujin001127@gmail.com>

components/StoreInfo.tsx

@@ -54,7 +54,7 @@ const StoreInfo = ({ storeId }: SInfo) => {
       <ContactBox>
         <ContactTitleBox>전화 컨택 가이드</ContactTitleBox>
         <ContactContentBox>
-          🙂 안녕하세요, 건국대학교 예술대학 학생회 ‘다빈치' 입니다. 건국대 상권
+          🙂 안녕하세요, 건국대학교 예술대학 학생회 다빈치 입니다. 건국대 상권
           활성화를 위한 제휴 사업을 제한하고자 합니다.
         </ContactContentBox>
         <EditBox>

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;

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);

components/hooks/usePopupData.ts

@@ -1,29 +1,19 @@
 import { getPopups } from "@/pages/api/popup";
 import { useEffect, useState } from "react";
 
-enum PopupPeriod {
-  none,
-
-  aDay = "하루간",
-  aWeek = "1주간",
-  twoWeek = "2주간",
-  aMonth = "1달간",
-
-}
 
 interface Popup {
   title: string;
-  contents: string;
-  period: PopupPeriod;
-  timing: Date | boolean;
-  store: string;
+  content: string;
+  endData: string;
+  reservation: string;
+  storeId: number;
 }
 
 export const usePopupData = () => {
 
   const [popups, setPopups] = useState<Popup[]>([]);
 
-
   // api 호출해서 초기화
   useEffect(() => {
     const fetchData = async () => {
@@ -40,23 +30,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: "최뚝배기",
-//   },
-// ];
-

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<string | null>(null);
 
   const setLogout = useSetRecoilState(initialState);
 
@@ -45,7 +45,6 @@ const Header = () => {
     });
   };
 
-
   return (
     <HeaderFrame>
       <Logo
@@ -59,7 +58,6 @@ const Header = () => {
       />
       <UserMenu>
         <ul>
-
           <UpperMenuItem
             onClick={() => {
               if (userSessionData) {
@@ -79,9 +77,7 @@ const Header = () => {
             <Link href="/user">회원가입</Link>
           </UpperMenuItem>
           <UpperMenuItem>
-
             <Link href="/mypage">마이페이지</Link>
-
           </UpperMenuItem>
           <UpperMenuItem>
             <NotificationsNoneOutlinedIcon />
@@ -91,7 +87,6 @@ const Header = () => {
       <DefaultMenu>
         <ul>
           <LowerMenuItem>
-
             <Link href="/dashboard">대시보드</Link>
           </LowerMenuItem>
           <LowerMenuItem>

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<ModalProps> = () => {
 
   const { closeModal } = useModal();
 
-  const [email, setEmail] = useState<string>();
-  const [password, setPassword] = useState<string>();
+  const [email, setEmail] = useState<string>("");
+  const [password, setPassword] = useState<string>("");
   const setLoginedUserState = useSetRecoilState(initialState);
 
   const handleLogin = async (email: string, password: string) => {

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;
+`;

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",

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)) {