diff --git a/assets/MainLogo.tsx b/assets/MainLogo.tsx index 183f8ad6a..ef8803099 100644 --- a/assets/MainLogo.tsx +++ b/assets/MainLogo.tsx @@ -1,915 +1,32 @@ function MainLogo() { return ( - + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + diff --git a/components/molecules/ProgressMark.tsx b/components/molecules/ProgressMark.tsx new file mode 100644 index 000000000..08c8edcd7 --- /dev/null +++ b/components/molecules/ProgressMark.tsx @@ -0,0 +1,45 @@ +import { Box, Flex, Progress } from "@chakra-ui/react"; + +interface ProgressMarkProps { + value: number; +} + +function ProgressMark({ value }: ProgressMarkProps) { + const isMax = value >= 30; + + return ( + + {!isMax ? ( + + + 경고 + + 추가 점수 + + ) : ( + + + + )} + + + + + + + + + 0 + 10 + 30 + + + ); +} + +export default ProgressMark; diff --git a/components/molecules/navs/IconButtonNav.tsx b/components/molecules/navs/IconButtonNav.tsx index 65510e8fe..928c12449 100644 --- a/components/molecules/navs/IconButtonNav.tsx +++ b/components/molecules/navs/IconButtonNav.tsx @@ -17,7 +17,7 @@ export default function IconButtonNav({ iconList }: IIconButtonNav) { return ( {iconList.map((icon, idx) => ( - + {icon?.link ? ( )} {children} diff --git a/modals/aboutHeader/dailyCheckModal/DailyCheckModal.tsx b/modals/aboutHeader/dailyCheckModal/DailyCheckModal.tsx index 9af04ffa4..97b008c15 100644 --- a/modals/aboutHeader/dailyCheckModal/DailyCheckModal.tsx +++ b/modals/aboutHeader/dailyCheckModal/DailyCheckModal.tsx @@ -57,6 +57,7 @@ function DailyCheckModal({ setIsModal }: IModal) { }, }); const { mutate: getPoint } = usePointSystemMutation("point"); + const { mutate: getScore } = usePointSystemMutation("score"); const { mutate: sendRequest } = useUserRequestMutation(); const winDistribution = getDistributionArr(DAILY_CHECK_WIN_LIST, DISTRIBUTION_SIZE); @@ -92,7 +93,7 @@ function DailyCheckModal({ setIsModal }: IModal) { }; sendRequest(data); } - getPoint(POINT_SYSTEM_PLUS.DAILY_ATTEND); + getScore(POINT_SYSTEM_PLUS.DAILY_ATTEND); toast("success", "출석체크 완료 !"); }; @@ -107,7 +108,7 @@ function DailyCheckModal({ setIsModal }: IModal) { return ( - 매일 출석체크로 5 point를 얻을 수 있고, 운이 좋으면 + 매일 출석체크로 2 SCORE을 얻을 수 있고, 확률적으로 랜덤 이벤트 선물도 받을 수 있어요! diff --git a/modals/aboutHeader/pointSystemsModal/PointSystemsModal.tsx b/modals/aboutHeader/pointSystemsModal/PointSystemsModal.tsx index fa93f8632..11a9c143f 100644 --- a/modals/aboutHeader/pointSystemsModal/PointSystemsModal.tsx +++ b/modals/aboutHeader/pointSystemsModal/PointSystemsModal.tsx @@ -1,10 +1,11 @@ +import { Box } from "@chakra-ui/react"; import { useState } from "react"; import styled from "styled-components"; +import CheckList from "../../../components/atoms/CheckList"; import TabNav, { ITabNavOptions } from "../../../components/molecules/navs/TabNav"; import { IModal } from "../../../types/components/modalTypes"; import { IFooterOptions, ModalLayout } from "../../Modals"; -import PointSystemsModalFee from "./PointSystemsModalFee"; import PointSystemsModalPoint from "./PointSystemsModalPoint"; function PointSystemsModal({ setIsModal }: IModal) { @@ -16,34 +17,50 @@ function PointSystemsModal({ setIsModal }: IModal) { const tabNavOptions: ITabNavOptions[] = [ { - text: "ABOUT 포인트", + text: "포인트 가이드", func: () => setIsFirst(true), flex: 1, }, { - text: "스터디 벌금", + text: "서비스 소개", func: () => setIsFirst(false), flex: 1, }, ]; + const ACTIVE_CONTENTS = [ + "오후 11시에 스터디 결과가 발표됩니다. 투표 순서대로 몇배의 추가 포인트를 획득하니 먼저 투표해주세요!", + "친구 초대 또는 단톡방에 스터디 공유를 통해 더 빠른 인원 모집을 할 수 있습니다.", + "스터디 매칭에 실패한 경우 자유 스터디로 오픈 또는 개인 스터디로 전환이 가능합니다.", + "관심있는 모임이나 소그룹에 참여해 보세요! 또는 직접 개설하고 지원금을 받을 수도 있습니다!", + "더 자세한 설명은 마이페이지의 '자주 묻는 질문'에 가 보시면 종류별 많은 정보가 있습니다!", + ]; + return ( - - {isFirst ? : } + + + {isFirst ? ( + + ) : ( + + + + )} + ); } const Wrapper = styled.div` - height: 100%; + height: 288px; margin-top: var(--gap-2); `; diff --git a/modals/aboutHeader/pointSystemsModal/PointSystemsModalPoint.tsx b/modals/aboutHeader/pointSystemsModal/PointSystemsModalPoint.tsx index 59acc7138..15e3b6ff3 100644 --- a/modals/aboutHeader/pointSystemsModal/PointSystemsModalPoint.tsx +++ b/modals/aboutHeader/pointSystemsModal/PointSystemsModalPoint.tsx @@ -1,4 +1,4 @@ -import { ListItem, UnorderedList } from "@chakra-ui/react"; +import { Box, ListItem, UnorderedList } from "@chakra-ui/react"; import styled from "styled-components"; import { POINT_SYSTEM_PLUS } from "../../../constants/serviceConstants/pointSystemConstants"; @@ -7,43 +7,45 @@ function PointSystemsModalPoint() { return ( <> - - 스터디 투표 - - - 0~20 POINT - 스터디 출석 - - 5 POINT - - - 에타 홍보 - - {POINT_SYSTEM_PLUS.PROMOTION.value} POINT + 5 포인트 일일 출석 - - {POINT_SYSTEM_PLUS.DAILY_ATTEND.value} POINT + {POINT_SYSTEM_PLUS.DAILY_ATTEND.value} 포인트 + + + 모임 참여 + 10 포인트 + + + 스터디 투표 + + 2~20 포인트 좋아요 - - {POINT_SYSTEM_PLUS.LIKE.value} POINT + {POINT_SYSTEM_PLUS.LIKE.value} 포인트 - 이벤트 - 10 POINT + 에타 홍보 + + {POINT_SYSTEM_PLUS.PROMOTION.value} 포인트 - 이외에도 다양한 방식으로 획득이 가능합니다. + + + 출석과 모임 + + 은 포인트와 동아리 점수 모두 획득 !! + 포인트는 스토어에서 사용이 가능합니다. + 그 외에도 다양한 곳에서 포인트 획득이 가능합니다. ); @@ -75,9 +77,9 @@ const Name = styled.span` margin-bottom: var(--gap-3); `; -const Point = styled.span` +const Point = styled.span<{ isDoublePoint?: boolean }>` margin-top: var(--gap-2); - color: var(--color-mint); + color: ${(props) => (!props.isDoublePoint ? "var(--color-mint)" : "var(--color-orange)")}; `; export default PointSystemsModalPoint; diff --git a/modals/gather/gatherParticipateModal/GatherParticipateModalParticipate.tsx b/modals/gather/gatherParticipateModal/GatherParticipateModalParticipate.tsx index b685e1f61..7d08ac2ba 100644 --- a/modals/gather/gatherParticipateModal/GatherParticipateModalParticipate.tsx +++ b/modals/gather/gatherParticipateModal/GatherParticipateModalParticipate.tsx @@ -1,9 +1,11 @@ import { useRouter } from "next/router"; import { GATHER_CONTENT } from "../../../constants/keys/queryKeys"; +import { POINT_SYSTEM_PLUS } from "../../../constants/serviceConstants/pointSystemConstants"; import { useResetQueryData } from "../../../hooks/custom/CustomHooks"; import { useCompleteToast, useErrorToast } from "../../../hooks/custom/CustomToast"; import { useGatherParticipationMutation } from "../../../hooks/gather/mutations"; +import { usePointSystemMutation } from "../../../hooks/user/mutations"; import { IModal } from "../../../types/components/modalTypes"; import { ModalBodyNavTwo } from "../../Modals"; @@ -15,11 +17,14 @@ function GatherParticipateModalParticipate({ setIsModal }: IModal) { const gatherId = +router.query.id; const resetQueryData = useResetQueryData(); + + const { mutate: getScore } = usePointSystemMutation("score"); + const { mutate: participate } = useGatherParticipationMutation("post", gatherId, { onSuccess() { resetQueryData([GATHER_CONTENT]); - - completeToast("free", "참여 완료!"); + getScore(POINT_SYSTEM_PLUS.GATHER_ATTEND); + completeToast("free", "참여가 완료되었습니다. 5 SCORE 획득 !"); }, onError: errorToast, }); diff --git a/modals/pop-up/LastWeekAttendPopUp.tsx b/modals/pop-up/LastWeekAttendPopUp.tsx index 7dd754095..aa7b54af5 100644 --- a/modals/pop-up/LastWeekAttendPopUp.tsx +++ b/modals/pop-up/LastWeekAttendPopUp.tsx @@ -1,199 +1,165 @@ +import { Box, Flex } from "@chakra-ui/react"; import dayjs from "dayjs"; +import { useRouter } from "next/navigation"; import styled from "styled-components"; -import { PopOverIcon } from "../../components/atoms/Icons/PopOverIcon"; -import ProfileIcon from "../../components/atoms/Profile/ProfileIcon"; +import Avatar from "../../components/atoms/Avatar"; +import UserBadge from "../../components/atoms/badges/UserBadge"; import Skeleton from "../../components/atoms/skeleton/Skeleton"; -import { BADGE_SCORE_MAPPINGS } from "../../constants/serviceConstants/badgeConstants"; +import ProgressMark from "../../components/molecules/ProgressMark"; import { USER_ROLE } from "../../constants/settingValue/role"; -import { IStudyRecord, useAdminStudyRecordQuery } from "../../hooks/admin/quries"; -import { useUserInfoQuery } from "../../hooks/user/queries"; -import PointScoreBar from "../../pageTemplates/point/pointScore/PointScoreBar"; +import { usePointSystemLogQuery, useUserInfoQuery } from "../../hooks/user/queries"; import { IModal } from "../../types/components/modalTypes"; -import { getNextBadge, getUserBadge } from "../../utils/convertUtils/convertDatas"; +import { dayjsToStr } from "../../utils/dateTimeUtils"; import { IFooterOptions, ModalLayout } from "../Modals"; function LastWeekAttendPopUp({ setIsModal }: IModal) { - const lastWeekFirstDay = dayjs().day(1).subtract(1, "week").startOf("date"); - const lastWeekLastDay = dayjs().day(0).startOf("date"); - + const router = useRouter(); const { data: userInfo } = useUserInfoQuery(); - const { data: attendRecord, isLoading } = useAdminStudyRecordQuery( - dayjs().month() !== lastWeekFirstDay.month() - ? dayjs().date(1).startOf("date") - : lastWeekFirstDay, - lastWeekLastDay, - undefined, - userInfo?.location, - userInfo?.uid, - { - enabled: !!userInfo, - }, - ); - - const recordValue: IStudyRecord = - attendRecord && Object.keys(attendRecord).length !== 0 - ? Object.values(attendRecord)[0] - : { vote: 0, attend: 0, monthAcc: 0 }; + const { data } = usePointSystemLogQuery("score"); - const today = dayjs(); - const firstDayOfMonth = today.startOf("month"); - const differenceInDays = today.diff(firstDayOfMonth, "day"); - const weekNumber = Math.floor(differenceInDays / 7) + 1; - - const badge = getUserBadge(userInfo?.score, userInfo?.uid); - const nextBadge = getNextBadge(badge); + const filteredData = data?.filter( + (obj) => + dayjsToStr(dayjs(obj.timestamp).startOf("month")) === dayjsToStr(dayjs().startOf("month")), + ); - const getBadgePoint = () => { - for (const [badgeName, minScore] of Object.entries(BADGE_SCORE_MAPPINGS)) { - if (badgeName === nextBadge) { - return { - nextBadgePoint: minScore, - badgeGap: 20, - }; + const scoreObj = filteredData?.reduce( + (acc, cur) => { + const value = cur.meta.value; + if (cur.message.includes("모임")) { + return { ...acc, gather: acc.gather + value }; } - } - }; - - const nextBadgePoint = getBadgePoint(); - - const nextAvatar = { - 10: "병아리", - 30: "고양이", - 50: "토끼", - 70: "호돌", - 90: "거북", - 110: "피그", - 130: "개굴", - 150: "찍찍", - 170: "햄스터", - 190: "냥이", - 210: "햄찌", - 230: "샤크", - }; - - function LayoutSkeleton() { - return ( - - - {weekNumber}주차 스터디 투표 + if (cur.message.includes("스터디")) { + return { ...acc, study: acc.study + value }; + } + return acc; + }, + { study: 0, gather: 0 }, + ); - - temp - - - - {weekNumber}주차 스터디 출석 - - temp - - - - 이번 달 누적 스터디 참여 - - temp - - - - 다음 참여 정산일 - - temp - - - - 보유 보증금 - - temp - - - - ); - } + const totalScore = scoreObj?.study + scoreObj?.gather; const footerOptions: IFooterOptions = { main: {}, + sub: { + text: "기록 보러 가기", + func: () => router.push("/user/score"), + }, isFull: true, }; return ( - - - {nextBadge ? ( - - {nextBadge} 달성시 +10 포인트, {nextAvatar[String(nextBadgePoint)]} 아바타 해금! - - ) : ( - 킹왕짱 - )} - - - + + + + + {userInfo?.name} ({USER_ROLE?.[userInfo?.role]}) - - - - - + + + + + + + + - {!isLoading ? ( + {scoreObj ? ( - {weekNumber}주차 스터디 투표 - {recordValue.vote || 0} 회 + 이번 달 동아리 점수 + {totalScore} 점 + + + 이번 달 스터디 점수 + {scoreObj.study} 점 - {weekNumber}주차 스터디 출석 - {recordValue.attend} 회 + 이번 달 모임 점수 + {scoreObj.gather} 점
- 이번 달 스터디 점수 - + 이번 달에 받은 좋아요
- {Math.floor(recordValue.monthAcc) || 0} 점 + 2 개 + + + ) : ( + + + 이번 달 동아리 점수 + + 2 + - 다음 참여 정산일 - {dayjs().add(1, "month").month() + 1}월 1일 + 이번 달 스터디 점수 + + 2 + - 보유 보증금 - {userInfo?.deposit}원 + 이번 달 모임 점수 + + 2 + + + + 이번 달에 받은 좋아요 + + + 2 + - ) : ( - )} + - {dayjs(userInfo?.registerDate).diff(dayjs(), "month") === 0 ? ( -
- 🎉신규 가입을 환영해요🎉 -
- 앞으로 열심히 활동해봐요~! -
- ) : recordValue?.monthAcc < 1 ? ( -
- 이번 달에 아직 스터디에 참여하지 않았어요. -
{-dayjs().add(1, "month").date(1).diff(dayjs(), "day")}일 뒤에 경고를 받습니다. -
- ) : ( -
- 🎉잘 하고 있어요🎉 -
- 이번주도 열심히 파이팅~! -
- )} + {totalScore >= 0 && + (dayjs(userInfo?.registerDate).diff(dayjs(), "month") === 0 ? ( +
+ 🎉신규 가입을 환영해요🎉 +
+ 앞으로 열심히 활동해봐요~! +
+ ) : totalScore >= 30 ? ( + + 🏆당신은 열활멤버이시군요!!🏆
+ 다음 정산때 추가 포인트를 획득합니다 !! + + ) : true ? ( +
+ 이번 달에 아직 스터디에 참여하지 않았어요. +
{-dayjs().add(1, "month").date(1).diff(dayjs(), "day")}일 뒤에 경고를 받습니다. +
+ ) : ( +
+ 🎉잘 하고 있어요🎉 +
+ 이번주도 열심히 파이팅~! +
+ ))} ); @@ -201,35 +167,11 @@ function LastWeekAttendPopUp({ setIsModal }: IModal) { const Message = styled.div` padding: var(--gap-2) var(--gap-3); - + min-height: 58px; border-radius: var(--rounded); background-color: var(--gray-100); `; -const ProfileWrapper = styled.div` - padding: 8px 0; - display: flex; - align-items: center; - justify-content: space-between; - border-bottom: var(--border); - > span:first-child { - font-weight: 500; - font-size: 16px; - } -`; - -const ScoreBarWrapper = styled.div` - padding: var(--gap-2) 0; - border-bottom: var(--border); - display: flex; - flex-direction: column; - > span { - font-size: 12px; - color: var(--gray-600); - margin-left: auto; - } -`; - const Container = styled.div` padding: var(--gap-3) 0; display: flex; @@ -243,22 +185,6 @@ const Info = styled.div` flex-direction: column; `; -const SkeletonText = styled.div` - width: 60px; -`; - -const ImageWrapper = styled.div` - margin-left: auto; - display: flex; - flex-direction: column; - justify-content: flex-start; - align-items: center; - > span { - display: inline-block; - margin-top: var(--gap-1); - } -`; - const Item = styled.div` display: flex; justify-content: space-between; diff --git a/pageTemplates/gather/detail/GatherBottomNav.tsx b/pageTemplates/gather/detail/GatherBottomNav.tsx index 3859d7cbe..730ae1752 100644 --- a/pageTemplates/gather/detail/GatherBottomNav.tsx +++ b/pageTemplates/gather/detail/GatherBottomNav.tsx @@ -6,9 +6,11 @@ import styled from "styled-components"; import Slide from "../../../components/layouts/PageSlide"; import { GATHER_CONTENT } from "../../../constants/keys/queryKeys"; +import { POINT_SYSTEM_PLUS } from "../../../constants/serviceConstants/pointSystemConstants"; import { useResetQueryData } from "../../../hooks/custom/CustomHooks"; import { useCompleteToast, useErrorToast } from "../../../hooks/custom/CustomToast"; import { useGatherParticipationMutation } from "../../../hooks/gather/mutations"; +import { usePointSystemMutation } from "../../../hooks/user/mutations"; import GatherExpireModal from "../../../modals/gather/gatherExpireModal/GatherExpireModal"; import GatherParticipateModal from "../../../modals/gather/gatherParticipateModal/GatherParticipateModal"; import { GatherStatus, IGather } from "../../../types/models/gatherTypes/gatherTypes"; @@ -33,8 +35,13 @@ function GatherBottomNav({ data }: IGatherBottomNav) { const gatherId = +router.query.id; const resetQueryData = useResetQueryData(); + + const { mutate: getScore } = usePointSystemMutation("score"); + const { mutate: cancel } = useGatherParticipationMutation("delete", gatherId, { onSuccess() { + const score = POINT_SYSTEM_PLUS.GATHER_ATTEND; + getScore({ ...score, value: -score.value, message: "모임 참여 취소" }); completeToast("free", "참여 신청이 취소되었습니다.", true); resetQueryData([GATHER_CONTENT]); }, diff --git a/pageTemplates/gather/detail/GatherParticipation.tsx b/pageTemplates/gather/detail/GatherParticipation.tsx index f726a9321..386112f0f 100644 --- a/pageTemplates/gather/detail/GatherParticipation.tsx +++ b/pageTemplates/gather/detail/GatherParticipation.tsx @@ -49,7 +49,7 @@ function GatherParticipation({ data }: IGatherParticipation) { ) : ( <> - + )} diff --git a/pageTemplates/home/homeHeader/HomeHeader.tsx b/pageTemplates/home/homeHeader/HomeHeader.tsx index 353dd062f..dd5b3dfd4 100644 --- a/pageTemplates/home/homeHeader/HomeHeader.tsx +++ b/pageTemplates/home/homeHeader/HomeHeader.tsx @@ -17,7 +17,7 @@ import { import { useNoticeActiveLogQuery } from "../../../hooks/user/sub/interaction/queries"; import DailyCheckModal from "../../../modals/aboutHeader/dailyCheckModal/DailyCheckModal"; import PointSystemsModal from "../../../modals/aboutHeader/pointSystemsModal/PointSystemsModal"; -import StudyRuleModal from "../../../modals/aboutHeader/studyRuleModal/StudyRuleModal"; +import LastWeekAttendPopUp from "../../../modals/pop-up/LastWeekAttendPopUp"; import { slideDirectionState } from "../../../recoils/navigationRecoils"; import { renderHomeHeaderState } from "../../../recoils/renderRecoils"; import { transferShowDailyCheckState } from "../../../recoils/transferRecoils"; @@ -63,12 +63,12 @@ function HomeHeader() { const generateIconBtnArr = () => { const arr = [ { - icon: , - func: () => setModalType("rule"), + icon: , + func: () => setModalType("pointGuide"), }, { - icon: , - func: () => setModalType("pointGuide"), + icon: , + func: () => setModalType("rule"), }, { icon: ( @@ -111,15 +111,15 @@ function HomeHeader() { - + )} - {modalType === "pointGuide" && setModalType(null)} />} + {modalType === "pointGuide" && setModalType(null)} />} {modalType === "dailyCheck" && setModalType(null)} />} - {modalType === "rule" && setModalType(null)} />} + {modalType === "rule" && setModalType(null)} />} ); } diff --git a/pages/admin/index.tsx b/pages/admin/index.tsx index 2eed60352..526f306fb 100644 --- a/pages/admin/index.tsx +++ b/pages/admin/index.tsx @@ -1,6 +1,6 @@ import axios from "axios"; -import { useSession } from "next-auth/react"; import { useRouter } from "next/router"; +import { useSession } from "next-auth/react"; import styled from "styled-components"; import Header from "../../components/layouts/Header"; diff --git a/pages/point/scoreLog.tsx b/pages/point/scoreLog.tsx deleted file mode 100644 index 5f8fa3e57..000000000 --- a/pages/point/scoreLog.tsx +++ /dev/null @@ -1,133 +0,0 @@ -import dayjs from "dayjs"; -import styled from "styled-components"; - -import { MainLoading } from "../../components/atoms/loaders/MainLoading"; -import Header from "../../components/layouts/Header"; -import { usePointSystemLogQuery, usePointSystemQuery } from "../../hooks/user/queries"; - -function ScoreLog() { - const { data: score } = usePointSystemQuery("score"); - const { data: scoreLog, isLoading } = usePointSystemLogQuery("score"); - - const filterLog = scoreLog?.filter((item) => item.meta.value); - - return ( - <> -
- - - 내 점수 - - {score}점 - - - - 날짜 - 내용 - 점수 - - <> - {!isLoading ? ( - filterLog.map((item, idx) => { - const value = item?.meta.value; - return ( - - {dayjs(item.timestamp).format("M.DD")} - {item.message} - - {value > 0 && "+"} - {value} 점 - - - ); - }) - ) : ( - - )} - - - - - ); -} - -const Layout = styled.div` - margin: 0 var(--gap-4); - margin-top: var(--gap-5); - font-weight: 600; -`; - -const LogHeader = styled.header` - height: 40px; - display: flex; - justify-content: space-between; - align-items: center; - border-bottom: var(--border); - font-size: 13px; - > span { - text-align: center; - } - > span:first-child { - color: var(--gray-800); - } - > span:last-child { - padding-left: var(--gap-1); - } -`; - -const MyPoint = styled.div` - padding: 0 var(--gap-2); - display: flex; - justify-content: space-around; - padding: 0 var(--gap-3); - align-items: center; - width: 160px; - height: 40px; - border-radius: var(--rounded-lg); - border: var(--border-mint); - color: var(--gray-700); - font-size: 14px; - > span:first-child { - flex: 1; - } - > span:last-child { - flex: 1; - text-align: end; - font-size: 15px; - color: var(--gray-800); - font-weight: 700; - } -`; - -const Container = styled.div` - margin-top: var(--gap-5); - display: flex; - flex-direction: column; -`; -const Item = styled.div` - color: var(--gray-800); - height: 40px; - display: flex; - justify-content: space-between; - align-items: center; - border-bottom: var(--border); - font-size: 12px; -`; - -const Date = styled.span` - color: var(--gray-600); - margin-right: var(--gap-4); - width: 54px; - text-align: center; -`; - -const Content = styled.span` - flex: 1; -`; - -const Point = styled.span<{ isMinus?: boolean }>` - width: 64px; - text-align: center; - color: ${(props) => (props.isMinus ? "var(--color-red)" : "var(--gray-800)")}; -`; -export default ScoreLog; diff --git a/pages/study/waiting/[location]/[date]/index.tsx b/pages/study/waiting/[location]/[date]/index.tsx index 1ae37a1f8..cc7e8f231 100644 --- a/pages/study/waiting/[location]/[date]/index.tsx +++ b/pages/study/waiting/[location]/[date]/index.tsx @@ -1,7 +1,7 @@ import { Box, Flex } from "@chakra-ui/react"; import dayjs from "dayjs"; -import { useSession } from "next-auth/react"; import { useParams } from "next/navigation"; +import { useSession } from "next-auth/react"; import { useEffect, useState } from "react"; import { useSetRecoilState } from "recoil"; import styled from "styled-components"; diff --git a/pages/study/writing/complete.tsx b/pages/study/writing/complete.tsx index 8f6f61c02..639c83b68 100644 --- a/pages/study/writing/complete.tsx +++ b/pages/study/writing/complete.tsx @@ -1,5 +1,4 @@ import dayjs from "dayjs"; - import { useRouter } from "next/router"; import { useSession } from "next-auth/react"; import { useRecoilValue } from "recoil"; diff --git a/pages/user/score.tsx b/pages/user/score.tsx new file mode 100644 index 000000000..02ce8cd5f --- /dev/null +++ b/pages/user/score.tsx @@ -0,0 +1,79 @@ +import { Box } from "@chakra-ui/react"; +import dayjs from "dayjs"; +import styled from "styled-components"; + +import { MainLoading } from "../../components/atoms/loaders/MainLoading"; +import Header from "../../components/layouts/Header"; +import Slide from "../../components/layouts/PageSlide"; +import SummaryTable from "../../components/organisms/tables/SummaryTable"; +import { usePointSystemLogQuery, usePointSystemQuery } from "../../hooks/user/queries"; + +function ScoreLog() { + const { data: point } = usePointSystemQuery("score"); + const { data: pointLog } = usePointSystemLogQuery("score"); + + const filterLog = pointLog?.filter((item) => item.meta.value); + + const headerInfos = ["날짜", "내용", "점수"]; + const tableInfosArr = filterLog?.map((log) => [ + dayjs(log.timestamp).format("M.DD"), + log.message, + log.meta.value + "", + ]); + + return ( + <> +
+ {point ? ( + + + + 내 점수 + + {point} 점 + + + {pointLog && ( + + )} + + + + ) : ( + + )} + + ); +} + +const Layout = styled.div` + margin: 0 var(--gap-4); + margin-top: var(--gap-5); + font-weight: 600; +`; + +const MyPoint = styled.div` + padding: 0 var(--gap-2); + display: flex; + justify-content: space-around; + align-items: center; + width: 160px; + height: 40px; + border-radius: var(--rounded-lg); + border: var(--border-mint); + color: var(--gray-700); + font-size: 14px; + margin-bottom: 20px; + > span:first-child { + flex: 1; + } + > span:last-child { + flex: 1; + text-align: end; + font-size: 15px; + color: var(--gray-800); + font-weight: 700; + } +`; + +export default ScoreLog;