diff --git a/package.json b/package.json index 7705ef6e..6fcd93a4 100644 --- a/package.json +++ b/package.json @@ -48,6 +48,7 @@ "react-d3-radar": "^1.0.0-rc6", "react-dom": "18.2.0", "react-infinite-scroll-component": "^6.1.0", + "react-responsive-carousel": "^3.2.23", "react-scroll-horizontal": "^1.6.6", "react-slick": "^0.29.0", "react-spinner": "^0.2.7", @@ -74,7 +75,7 @@ "@types/graphql": "^14.5.0", "@types/jest": "^29.2.4", "@types/react-beautiful-dnd": "^13.1.3", - "@types/react-slick": "^0.23.10", + "@types/react-slick": "^0.23.12", "@typescript-eslint/parser": "^5.43.0", "autoprefixer": "^10.4.13", "babel-plugin-styled-components": "^2.1.4", diff --git a/public/mockServiceWorker.js b/public/mockServiceWorker.js index 0f24d515..51d85eee 100644 --- a/public/mockServiceWorker.js +++ b/public/mockServiceWorker.js @@ -2,7 +2,7 @@ /* tslint:disable */ /** - * Mock Service Worker (1.3.1). + * Mock Service Worker (1.3.2). * @see https://github.com/mswjs/msw * - Please do NOT modify this file. * - Please do NOT serve this file on production. diff --git a/src/assets/data/emptyCategories.ts b/src/assets/data/emptyCategories.ts deleted file mode 100644 index 6de6ad50..00000000 --- a/src/assets/data/emptyCategories.ts +++ /dev/null @@ -1,30 +0,0 @@ -import { FORUM } from "@/constants"; - -const categories = [ - { - type: FORUM.COMMON.TYPE, - name: FORUM.COMMON.NAME, - }, - { - type: FORUM.NOTICE.TYPE, - name: FORUM.NOTICE.NAME, - }, - { - type: FORUM.PROJECT.TYPE, - name: FORUM.PROJECT.NAME, - }, - { - type: FORUM.CODE_REVIEW.TYPE, - name: FORUM.CODE_REVIEW.NAME, - }, - { - type: FORUM.LOST.TYPE, - name: FORUM.LOST.NAME, - }, - { - type: FORUM.FOUND.TYPE, - name: FORUM.FOUND.NAME, - }, -]; - -export default categories; diff --git a/src/assets/data/emptyTimetable.ts b/src/assets/data/emptyTimetable.ts deleted file mode 100644 index 3e7f04ed..00000000 --- a/src/assets/data/emptyTimetable.ts +++ /dev/null @@ -1,104 +0,0 @@ -import { ITimetable } from "@/interfaces"; - -const emptyTimetable: ITimetable = { - SUNDAY: [ - { - period: "", - subject: "", - startTime: { - hour: 0, - minute: 0, - }, - endTime: { - hour: 24, - minute: 0, - }, - }, - ], - FRIDAY: [ - { - period: "", - subject: "", - startTime: { - hour: 0, - minute: 0, - }, - endTime: { - hour: 24, - minute: 0, - }, - }, - ], - SATURDAY: [ - { - period: "", - subject: "", - startTime: { - hour: 0, - minute: 0, - }, - endTime: { - hour: 24, - minute: 0, - }, - }, - ], - TUESDAY: [ - { - period: "", - subject: "", - startTime: { - hour: 0, - minute: 0, - }, - endTime: { - hour: 24, - minute: 0, - }, - }, - ], - THURSDAY: [ - { - period: "", - subject: "", - startTime: { - hour: 0, - minute: 0, - }, - endTime: { - hour: 24, - minute: 0, - }, - }, - ], - MONDAY: [ - { - period: "", - subject: "", - startTime: { - hour: 0, - minute: 0, - }, - endTime: { - hour: 24, - minute: 0, - }, - }, - ], - WEDNESDAY: [ - { - period: "", - subject: "", - startTime: { - hour: 0, - minute: 0, - }, - endTime: { - hour: 24, - minute: 0, - }, - }, - ], -}; - -export default emptyTimetable; diff --git a/src/assets/data/index.ts b/src/assets/data/index.ts index f03fb369..da19dc45 100644 --- a/src/assets/data/index.ts +++ b/src/assets/data/index.ts @@ -1,6 +1,3 @@ -export { default as emptyCategories } from "./emptyCategories"; export { default as emptyClassInfo } from "./emptyClassInfo"; export { default as emptyClassLevel } from "./emptyClassLevel"; -export { default as emptyTimetable } from "./emptyTimetable"; -export { default as emptyInputPost } from "./emptyInputPost"; export { default as emptyMealList } from "./emptyMealList"; diff --git a/src/assets/images/test_small_banner.png b/src/assets/images/banner/banner1.png similarity index 100% rename from src/assets/images/test_small_banner.png rename to src/assets/images/banner/banner1.png diff --git a/src/assets/images/banner/banner2.png b/src/assets/images/banner/banner2.png new file mode 100644 index 00000000..32f98789 Binary files /dev/null and b/src/assets/images/banner/banner2.png differ diff --git a/src/assets/images/banner/banner3.png b/src/assets/images/banner/banner3.png new file mode 100644 index 00000000..49fc7d43 Binary files /dev/null and b/src/assets/images/banner/banner3.png differ diff --git a/src/assets/images/banner/banner4.svg b/src/assets/images/banner/banner4.svg new file mode 100644 index 00000000..3b146d9a --- /dev/null +++ b/src/assets/images/banner/banner4.svg @@ -0,0 +1,79 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/images/index.ts b/src/assets/images/index.ts index 7bbb6150..5b400b57 100644 --- a/src/assets/images/index.ts +++ b/src/assets/images/index.ts @@ -3,5 +3,11 @@ export { default as loading } from "./loading.gif"; export { default as defaultProfile } from "./profile_default.png"; export { default as QR } from "./QR.png"; export { default as TestBanner } from "./test_banner.png"; -export { default as TestSmallBanner } from "./test_small_banner.png"; export { default as PageNotFound } from "./page_not_found.png"; + +export { default as Banner1Image } from "./banner/banner1.png"; +export { default as Banner2Image } from "./banner/banner2.png"; +export { default as Banner3Image } from "./banner/banner3.png"; +export { default as Banner4Image } from "./banner/banner4.svg"; +export { default as Banner5Image } from "./banner/banner2.png"; +export { default as Banner6Image } from "./banner/banner3.png"; diff --git a/src/components/atoms/Select.tsx b/src/components/atoms/Select.tsx index 8a8083eb..149c44a1 100644 --- a/src/components/atoms/Select.tsx +++ b/src/components/atoms/Select.tsx @@ -1,7 +1,7 @@ import React from "react"; import styled, { css } from "styled-components"; import { color, font } from "@/styles"; -import { Arrow } from "@/assets/icons"; +import Arrow from "@/assets/icons/Arrow"; interface ISelectProps { options: string[]; diff --git a/src/components/common/Aside/InfomationBox.tsx b/src/components/common/Aside/InfomationBox.tsx index db9f32a2..2ac2a877 100644 --- a/src/components/common/Aside/InfomationBox.tsx +++ b/src/components/common/Aside/InfomationBox.tsx @@ -56,7 +56,6 @@ const InfomationBox = ({ user, isLogined }: IInfomationBoxProps) => { )} - {!isLogined && 로그인이 필요해요} ); }; @@ -140,8 +139,4 @@ const InfomationButton = styled.button` } `; -const LoginText = styled.span` - ${font.context}; -`; - export default InfomationBox; diff --git a/src/components/common/Aside/JoinCheckBox.tsx b/src/components/common/Aside/JoinCheckBox.tsx index 2ea685c2..14ac7d73 100644 --- a/src/components/common/Aside/JoinCheckBox.tsx +++ b/src/components/common/Aside/JoinCheckBox.tsx @@ -3,7 +3,8 @@ import { color, font } from "@/styles"; import useAside from "@/hooks/useAside"; const JoinCheckBox = () => { - const { asideInfo } = useAside(); + const { asideInfo, handlePopupOpenClick } = useAside(); + return ( {asideInfo.room && ( @@ -13,11 +14,16 @@ const JoinCheckBox = () => { {asideInfo.room.yearSemester.semester}학기 - {asideInfo.room.dormitoryType}동 {asideInfo.room.roomNumber} + {asideInfo.room.dormitoryType}동 {asideInfo.room.roomNumber}호 )} - + + {asideInfo.room && asideInfo.isCheckin ? "입사 완료" : "입사 체크"} + ); }; @@ -56,10 +62,6 @@ const Date = styled.span` const RoomNumber = styled.span` ${font.H5}; - - &:after { - content: "호"; - } `; const CheckButton = styled.button` @@ -70,16 +72,8 @@ const CheckButton = styled.button` color: ${color.white}; ${font.btn3}; - &:after { - content: "입사 체크"; - } - &:disabled { background-color: ${color.content}; - - &:after { - content: "입사 완료"; - } } `; diff --git a/src/components/common/Aside/index.tsx b/src/components/common/Aside/index.tsx index 4366721b..f2682cda 100644 --- a/src/components/common/Aside/index.tsx +++ b/src/components/common/Aside/index.tsx @@ -1,6 +1,7 @@ import styled from "styled-components"; import useUser from "@/hooks/useUser"; import { Row } from "@/components/Flex"; +import { font } from "@/styles"; import InfomationBox from "./InfomationBox"; import MeisterBox from "./MeisterBox"; import JoinCheckBox from "./JoinCheckBox"; @@ -10,15 +11,15 @@ const Aside = () => { return ( - - - {isLogined && ( + {isLogined && ( + + - )} - + + )} ); }; diff --git a/src/components/common/Header/Navigation.tsx b/src/components/common/Header/Navigation.tsx index 44f515ea..6e706797 100644 --- a/src/components/common/Header/Navigation.tsx +++ b/src/components/common/Header/Navigation.tsx @@ -23,6 +23,7 @@ const NavigationList = styled.ul` const NavigationListItem = styled(Link)` font-size: ${font.H6}; + font-weight: 600; color: ${color.black}; cursor: pointer; white-space: pre-wrap; diff --git a/src/components/common/Header/assets/data/navigationList.ts b/src/components/common/Header/assets/data/navigationList.ts index 991c7db5..66f0f5a8 100644 --- a/src/components/common/Header/assets/data/navigationList.ts +++ b/src/components/common/Header/assets/data/navigationList.ts @@ -11,24 +11,24 @@ const navigationList = [ }, { id: 3, + name: "🎋 대나무숲", + href: "/bamboo", + }, + { + id: 4, name: "🕐 시간표", href: "/timetable", }, { - id: 4, + id: 5, name: "🍚 급식", href: "/meal", }, { - id: 5, + id: 6, name: "🗓️ 캘린더", href: "/calendar", }, - { - id: 6, - name: "🚪 입사 체크", - href: "/checkin", - }, { id: 7, name: "☕️ 베르실 예약", diff --git a/src/hooks/useAside.ts b/src/hooks/useAside.ts index 379020bd..5aeeee2d 100644 --- a/src/hooks/useAside.ts +++ b/src/hooks/useAside.ts @@ -2,13 +2,16 @@ import httpClient from "@/apis/httpClient"; import Storage from "@/storage"; import { KEY } from "@/constants"; import { asideStore } from "@/store/aside.store"; -import { useQuery } from "@tanstack/react-query"; +import { useQuery, useQueryClient } from "@tanstack/react-query"; import React from "react"; import { useRecoilState } from "recoil"; import { TOKEN } from "@/storage/constants"; +import useWindow from "./useWindow"; const useAside = () => { + const queryClient = useQueryClient(); const [asideInfo, setAsideInfo] = useRecoilState(asideStore); + const { isWindow } = useWindow(); const { data: asideRes, isSuccess } = useQuery( [KEY.ASIDE], @@ -21,9 +24,40 @@ const useAside = () => { { enabled: !!Storage.getItem(TOKEN.ACCESS) }, ); + function openCenteredWindow( + url: string, + title: string, + w: number, + h: number, + ) { + const left = (window.innerWidth - w) / 2; + const top = (window.innerHeight - h) / 2; + + const features = `width=${w},height=${h},left=${left},top=${top},resizable=yes,scrollbars=yes,status=yes`; + const newWindow = window.open(url, title, features); + + if (newWindow) { + newWindow.focus(); + window.addEventListener("focus", () => { + queryClient.invalidateQueries([KEY.ASIDE]); + }); + } + } + const handlePopupOpenClick = () => { + if (isWindow) + openCenteredWindow( + `https://team-insert.github.io/bssm-checkin/join.html?authorization=${Storage.getItem( + TOKEN.ACCESS, + )}`, + "Centered Window", + 600, + 400, + ); + }; + React.useEffect(() => { if (isSuccess) { - const { ranking, room, meisterResAndAvgAndMax1, isCheckIn } = asideRes; + const { ranking, room, meisterResAndAvgAndMax1, checkInRes } = asideRes; const { score, positivePoint, negativePoint } = meisterResAndAvgAndMax1.meister; setAsideInfo({ @@ -32,12 +66,12 @@ const useAside = () => { negativePoint, ranking, room, - isCheckIn, + isCheckin: checkInRes, }); } }, [setAsideInfo, asideRes]); - return { asideInfo, setAsideInfo }; + return { asideInfo, setAsideInfo, handlePopupOpenClick }; }; export default useAside; diff --git a/src/hooks/useTimetableBar.ts b/src/hooks/useTimetableBar.ts deleted file mode 100644 index 8467994c..00000000 --- a/src/hooks/useTimetableBar.ts +++ /dev/null @@ -1,70 +0,0 @@ -import React from "react"; -// import useDate from "@/hooks/useDate"; -import useWindow from "./useWindow"; - -const useTimetableBar = () => { - // const date = useDate(); - const [nowDate, setNowDate] = React.useState(""); - const [isScrollBox, setIsScrollBox] = React.useState(false); - const { isWindow } = useWindow(); - - const scrollRef = React.useRef(null); - const intervalRef = React.useRef(null); - - const 현재시간과동기화 = () => { - // const HMSDate = date.getHMSDate(); - // setNowDate(HMSDate); - if (scrollRef.current) { - const { scrollWidth } = scrollRef.current; - // const classProgress = date.getDiffTimeProgress() * scrollWidth; - // scrollRef.current.scrollLeft = classProgress; - } - }; - - const handleTimetableBarScroll = () => { - if (scrollRef.current) { - const { scrollWidth } = scrollRef.current; - // const classProgress = date.getDiffTimeProgress() * scrollWidth; - - // const 사용자가스크롤했다면 = - // Math.abs(classProgress - scrollRef.current.scrollLeft) > 1; - // if (사용자가스크롤했다면) setIsScrollBox(true); - } - }; - - const synchronizeCurrentTime = () => { - if (intervalRef.current && isScrollBox) return; - if (isWindow) - intervalRef.current = window.setInterval(현재시간과동기화, 1000); - }; - - const handleTimetableButtonClick = () => { - synchronizeCurrentTime(); - setIsScrollBox(false); - }; - - React.useEffect(() => { - if (isScrollBox && isWindow) { - window.clearInterval(intervalRef.current as number); - intervalRef.current = null; - } - }, [isScrollBox]); - - React.useEffect(() => { - synchronizeCurrentTime(); - return () => { - clearInterval(intervalRef.current as number); - }; - // eslint-disable-next-line - }, []); - - return { - scrollRef, - isScrollBox, - nowDate, - handleTimetableBarScroll, - handleTimetableButtonClick, - }; -}; - -export default useTimetableBar; diff --git a/src/hooks/useUser.tsx b/src/hooks/useUser.tsx index 31cf13a5..bb1ce382 100644 --- a/src/hooks/useUser.tsx +++ b/src/hooks/useUser.tsx @@ -1,5 +1,4 @@ import React from "react"; -import { useRouter } from "next/navigation"; import { useQuery } from "@tanstack/react-query"; import { useRecoilState } from "recoil"; import httpClient, { HttpClient } from "@/apis/httpClient/httpClient"; @@ -14,21 +13,17 @@ import { isAxiosError } from "axios"; import LoginModal from "@/components/common/Modal/LoginModal"; import { TOKEN } from "@/storage/constants"; import ROLE from "@/constants/role.constant"; +import { useDidMountEffect } from "./useDidMountEffect"; -interface UseUserOptions { - authorizedPage?: boolean; -} - -const useUser = (options?: UseUserOptions) => { +const useUser = () => { const [user, setUser] = useRecoilState(userStore); - const router = useRouter(); - const { openModal, visible } = useModal(); + const { openModal } = useModal(); const { data: userInfo, remove, - isLoading, error, + isSuccess, refetch, } = useQuery( [KEY.USER], @@ -63,13 +58,13 @@ const useUser = (options?: UseUserOptions) => { if (userInfo) setUser(userInfo); }, [setUser, userInfo]); - React.useEffect(() => { - if (!isLoading && !userInfo && !visible) { - openModal({ + useDidMountEffect(() => { + if (isSuccess && !userInfo) { + return openModal({ component: , }); } - }, [options, userInfo, isLoading, router, visible, openModal]); + }, [isSuccess]); return { user, diff --git a/src/interfaces/aside.interface.ts b/src/interfaces/aside.interface.ts index da381bca..15691ba6 100644 --- a/src/interfaces/aside.interface.ts +++ b/src/interfaces/aside.interface.ts @@ -11,5 +11,5 @@ export default interface IAside { }; dormitoryType: string; }; - isCheckIn: false; + isCheckin: false; } diff --git a/src/provider/layoutProvider.helper.tsx b/src/provider/layoutProvider.helper.tsx index fdeff24f..1b6e3472 100644 --- a/src/provider/layoutProvider.helper.tsx +++ b/src/provider/layoutProvider.helper.tsx @@ -1,22 +1,11 @@ -import { Aside, Footer, Header, Modal } from "@/components/common"; +import { Footer, Header, Modal } from "@/components/common"; import { GlobalStyle, flex } from "@/styles"; import React from "react"; import { ToastContainer, toast } from "react-toastify"; import styled from "styled-components"; import "react-toastify/dist/ReactToastify.css"; -import useWindow from "@/hooks/useWindow"; -import { ROUTER } from "@/constants"; const LayoutProvider = ({ children }: React.PropsWithChildren) => { - const { isWindow } = useWindow(); - const routerName = isWindow ? window.location.pathname : ""; - const dontNeedAsidePage: Array = [ - ROUTER.LOGIN, - ROUTER.CALENDER, - ROUTER.MEISTER, - ]; - const isNeedAsidePage = !dontNeedAsidePage.includes(routerName); - return ( <> @@ -24,10 +13,7 @@ const LayoutProvider = ({ children }: React.PropsWithChildren) => {
-
- {children} - {isNeedAsidePage &&
+
{children}