Skip to content

Commit

Permalink
upgrade groupStudy and chore
Browse files Browse the repository at this point in the history
  • Loading branch information
@SeungJL
SeungJL committed Nov 21, 2024
1 parent 6d4845e commit 2ef5f2c
Show file tree
Hide file tree
Showing 18 changed files with 250 additions and 130 deletions.
14 changes: 10 additions & 4 deletions components/Icons/PopOverIcon.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,17 +14,23 @@ interface IPopoverIcon {
text: string;
size?: "xs" | "md";
marginDir?: "left" | "right";
isMint?: boolean;
}

export function PopOverIcon({ title, text, size = "md", marginDir = "left" }: IPopoverIcon) {

export function PopOverIcon({
title,
text,
size = "md",
marginDir = "left",
isMint,
}: IPopoverIcon) {
return (
<Popover>
<PopoverTrigger>
<IconWrapper>
<i
className={`fa-light fa-question-circle fa-${size}`}
style={{ color: "var(--gray-500)" }}
className={`fa-regular fa-question-circle fa-${size}`}
style={{ color: isMint ? "var(--color-mint)" : "var(--gray-500)" }}
/>
</IconWrapper>
</PopoverTrigger>
Expand Down
11 changes: 9 additions & 2 deletions components/atoms/InfoCol.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,10 @@ export interface InfoColOptions {
interface InfoColProps {
optionsArr: InfoColOptions[];
isMint?: boolean;
isBig?: boolean;
}

function InfoCol({ optionsArr, isMint }: InfoColProps) {
function InfoCol({ optionsArr, isMint, isBig }: InfoColProps) {
return (
<Flex
direction="column"
Expand All @@ -22,7 +23,13 @@ function InfoCol({ optionsArr, isMint }: InfoColProps) {
bg="rgba(97,106,97,0.04)"
>
{optionsArr.map(({ left, right }, idx) => (
<Flex key={idx} justify="space-between" fontSize="11px" my={1}>
<Flex
key={idx}
justify="space-between"
fontSize="11px"
py={isBig ? 2 : 1}
borderBottom={isBig && idx !== optionsArr.length - 1 ? "var(--border-main)" : null}
>
<Box color="gray.600">{left}</Box>
<Box color={isMint ? "mint" : "gray.800"} fontWeight="medium">
{right}
Expand Down
2 changes: 1 addition & 1 deletion components/skeleton/StudyThumbnailCardSkeleton.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { Box, Flex, Skeleton } from "@chakra-ui/react";

export function StudyThumbnailCardSkeleton({ type }: { type: "home" | "drawer" }) {
export function StudyThumbnailCardSkeleton() {
return (
<Box h="88px" mb={3} borderBottom="var(--border)">
<Flex pr={3} bg="white" justify="space-between">
Expand Down
2 changes: 1 addition & 1 deletion constants/keys/localStorage.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ export const GATHER_INTRO_MODAL = "gatherIntro";
export const USER_GUIDE_POP_UP = "userGuidePopUp";
export const SUGGEST_POP_UP = "suggestPopUp";
export const STUDY_SPACE_POP_UP = "studyPopUp";
export const ATTEND_POP_UP = "attendRecordPopUp2" + dayjs().startOf("week").day();
export const ATTEND_POP_UP = "attendRecordPopUp3" + dayjs().startOf("week").day();
export const PROMOTION_POP_UP = "promotionPopUp";
export const DAILY_CHECK_POP_UP = "attendCheckPopUp";
export const FAQ_POP_UP = "faqPopUp";
Expand Down
256 changes: 163 additions & 93 deletions modals/pop-up/LastWeekAttendPopUp.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
import { Box, Flex } from "@chakra-ui/react";
import { Box, Button, Flex } from "@chakra-ui/react";
import dayjs from "dayjs";
import { useRouter } from "next/navigation";
import { useState } from "react";
import styled from "styled-components";

import Avatar from "../../components/atoms/Avatar";
import UserBadge from "../../components/atoms/badges/UserBadge";
import InfoCol from "../../components/atoms/InfoCol";
import InfoCol, { InfoColOptions } from "../../components/atoms/InfoCol";
import InfoColSkeleton from "../../components/atoms/InfoColSkeleton";
import ProgressMark from "../../components/molecules/ProgressMark";
import { USER_ROLE } from "../../constants/settingValue/role";
import { usePointSystemLogQuery, useUserInfoQuery } from "../../hooks/user/queries";
import { useNoticeActiveLogQuery } from "../../hooks/user/sub/interaction/queries";
import { IModal } from "../../types/components/modalTypes";
import { dayjsToStr } from "../../utils/dateTimeUtils";
import { IFooterOptions, ModalLayout } from "../Modals";
Expand All @@ -20,12 +20,12 @@ function LastWeekAttendPopUp({ setIsModal }: IModal) {
const { data: userInfo } = useUserInfoQuery();

const { data } = usePointSystemLogQuery("score");
const [isPenaltyModal, setIsPenaltyModal] = useState(false);

const filteredData = data?.filter(
(obj) =>
dayjsToStr(dayjs(obj.timestamp).startOf("month")) === dayjsToStr(dayjs().startOf("month")),
);
const { data: noticeLogs } = useNoticeActiveLogQuery("like");

const scoreObj = filteredData?.reduce(
(acc, cur) => {
Expand All @@ -44,7 +44,7 @@ function LastWeekAttendPopUp({ setIsModal }: IModal) {
{ study: 0, gather: 0, group: 0 },
);

const totalScore = scoreObj?.study + scoreObj?.gather;
const totalScore = scoreObj?.study + scoreObj?.gather + scoreObj?.group;

const footerOptions: IFooterOptions = {
main: {},
Expand All @@ -55,107 +55,177 @@ function LastWeekAttendPopUp({ setIsModal }: IModal) {
isFull: true,
};

const likeCnt = noticeLogs?.filter((item) =>
dayjs(item.createdAt).isAfter(dayjs().startOf("month")),
).length;
const monthScore = userInfo?.monthScore;

const optionArr: InfoColOptions[] = [
{
left: "20점 이상",
right: "열활멤버 추가 포인트",
},
{
left: "10점 이상",
right: "월간 참여 조건 충족",
},
{
left: "5점 ~ 9점",
right: "보증금 500원 차감",
},
{
left: "2점 ~ 4점",
right: "보증금 1000원 차감",
},
{
left: "0점",
right: "보증금 1000원 차감 및 활동 경고",
},
];
return (
<ModalLayout
title={`${dayjs().month() + 1}월 활동 점수표`}
footerOptions={footerOptions}
setIsModal={setIsModal}
>
<Flex align="center">
<Avatar
userId={userInfo._id}
image={userInfo?.profileImage}
uid={userInfo?.uid}
avatar={userInfo?.avatar}
size="mds"
/>
<>
<ModalLayout
title={`${dayjs().month() + 1}월 활동 점수표`}
footerOptions={footerOptions}
setIsModal={setIsModal}
>
<Flex align="center">
<Avatar
userId={userInfo._id}
image={userInfo?.profileImage}
uid={userInfo?.uid}
avatar={userInfo?.avatar}
size="mds"
/>

<Box ml={2} lineHeight="16px" fontSize="12px" fontWeight="semibold" color="var(--gray-800)">
{userInfo?.name} ({USER_ROLE?.[userInfo?.role]})
</Box>
<Box ml="auto">
<UserBadge uid={userInfo?.uid} score={userInfo?.score} />
</Box>
</Flex>
<Box my={3} h="1px" bg="gray.100" />
<Message>
{totalScore >= 0 &&
(dayjs(userInfo?.registerDate).diff(dayjs(), "month") === 0 ? (
<div>
🎉신규 가입을 환영해요🎉
<br />
앞으로 열심히 활동해봐요~!
</div>
) : totalScore >= 30 ? (
<Box>
🏆당신은 열활멤버이시군요!!🏆 <br />
다음 정산때 추가 포인트를 획득합니다 !!
</Box>
) : totalScore >= 10 ? (
<div>
🎉잘 하고 있어요!!🎉
<br />
월간 최소 점수를 달성했습니다 !!
</div>
) : (
<div>
🍒이번 달도 파이팅🍒
<br />
같이 열심히 활동해요!
</div>
))}
</Message>
<Box
ml={2}
lineHeight="16px"
fontSize="12px"
fontWeight="semibold"
color="var(--gray-800)"
>
{userInfo?.name} ({USER_ROLE?.[userInfo?.role]})
</Box>
<Box ml="auto">
<UserBadge uid={userInfo?.uid} score={userInfo?.score} />
</Box>
</Flex>
<Box my={3} h="1px" bg="gray.100" />

<Box mb={3}>
<ProgressMark value={userInfo?.monthScore} />
</Box>
<Box mb={3}>
<ProgressMark value={userInfo?.monthScore} />
</Box>

{scoreObj ? (
<InfoCol
optionsArr={[
{
left: "이번 달 스터디 점수",
right: `${scoreObj.study} 점`,
},
{
left: "이번 달 소모임 점수",
right: `${scoreObj.group} 점`,
},
{
left: "이번 달 번개 점수",
right: `${scoreObj.gather} 점`,
},
{
left: "기타 추가 점수",
right: `${
userInfo.monthScore - scoreObj?.study - scoreObj.gather - scoreObj.group
} 점`,
},
]}
/>
) : (
<InfoColSkeleton
leftArr={[
"이번 달 동아리 점수",
"이번 달 스터디 점수",
"이번 달 모임 점수",
"이번 달에 받은 좋아요",
]}
/>
{scoreObj ? (
<InfoCol
optionsArr={[
{
left: "이번 달 스터디 점수",
right: `${scoreObj.study} 점`,
},
{
left: "이번 달 소모임 점수",
right: `${scoreObj.group} 점`,
},
{
left: "이번 달 번개 점수",
right: `${scoreObj.gather} 점`,
},
{
left: "기타 추가 점수",
right: `${userInfo.monthScore - totalScore} 점`,
},
]}
/>
) : (
<InfoColSkeleton
leftArr={[
"이번 달 동아리 점수",
"이번 달 스터디 점수",
"이번 달 모임 점수",
"이번 달에 받은 좋아요",
]}
/>
)}
<Button
variant="unstyled"
bg="gray.800"
borderRadius="20px"
color="white"
px={3}
fontSize="10px"
mx="auto"
py={2}
w="max-content"
mt={3}
onClick={() => setIsPenaltyModal(true)}
>
동아리 활동 규정
</Button>
<Message>
{totalScore >= 0 &&
(dayjs(userInfo?.registerDate).diff(dayjs(), "month") === 0 ? (
<div>
🎉About에 오신 것을 진심으로 환영해요🎉
<br />
앞으로 같이 즐겁게 활동해봐요~!
</div>
) : monthScore >= 20 ? (
<Box>
🏆 열정적인 활동가시군요! 🏆 <br />
다음 정산 때 추가 포인트를 획득할 예정이에요.
<br /> 앞으로도 멋진 활동 기대할게요! 💪✨
</Box>
) : monthScore >= 10 ? (
<div>
🎉잘하고 있어요!!🎉
<br />
월간 목표 점수를 달성했습니다!
<br /> 계속해서 좋은 활동 이어나가 봐요! 😊
</div>
) : dayjs().date() <= 15 ? (
<div>
🍒이번 달도 파이팅🍒
<br />
이번 달 활동 점수 미리 미리 채우기!
</div>
) : monthScore < 2 ? (
<div>
⚠️ 활동 점수가 많이 부족합니다! ⚠️
<br />
월말 정산 때 벌금과 경고 조치가 있을 수 있으니,
<br /> 꼭 활동에 미리 참여해 주시면 감사합니다!
</div>
) : monthScore < 5 ? (
<div>
⚠️ 활동 점수가 조금 부족해요! ⚠️
<br />
월말 정산 때 벌금이 발생할 수 있으니 <br /> 조금만 더 분발해 주세요!
</div>
) : (
<div>
🍒 최소 활동 점수가 조금 부족해요. 🍒
<br />
월말 정산 시 벌금이 발생할 수 있으니,
<br /> 조금만 더 파이팅 해봐요!
</div>
))}
</Message>
</ModalLayout>
{isPenaltyModal && (
<ModalLayout title="동아리 활동 규정" footerOptions={{}} setIsModal={setIsPenaltyModal}>
<InfoCol optionsArr={optionArr} isMint isBig />
</ModalLayout>
)}
</ModalLayout>
</>
);
}

const Message = styled.div`
margin-bottom: 12px;
margin-top: 12px;
padding: 12px 16px;
min-height: 48px;
border-radius: 8px;
color: var(--gray-600);
border: 1px solid var(--gray-100);
font-size: 11px;
font-weight: medium;
background-color: var(--gray-100);
Expand Down
Loading

0 comments on commit 2ef5f2c

Please sign in to comment.