From 592a2c68466af02b74509bd2bf753d82d05230ac Mon Sep 17 00:00:00 2001 From: LSJ Date: Sat, 25 May 2024 14:49:56 +0900 Subject: [PATCH] wip --- components/atoms/Icons/HeartLikeIcon.tsx | 2 +- components/atoms/InfoCard.tsx | 83 +++++++++++++++++++ components/atoms/RulletPicker.tsx | 4 +- components/organisms/CardColumnLayout.tsx | 2 +- components/organisms/InfoCardColumn.tsx | 29 +++++++ components/organisms/SearchLocation.tsx | 1 + .../organisms/sliders/ImageTileSlider.tsx | 8 +- .../services/studyVote/MapBottomNav.tsx | 12 +-- .../serviceConstants/pointSystemConstants.ts | 12 ++- constants/settingValue/pointSystem.ts | 40 --------- libs/study/getStudyVoteCnt.ts | 14 ++++ modals/aboutHeader/DateCalendarModal.tsx | 2 +- .../PointSystemsModalFee.tsx | 3 +- .../PointSystemsModalPoint.tsx | 2 +- modals/study/StudyAbsentModal.tsx | 2 +- modals/study/StudyAttendCheckModal.tsx | 6 +- modals/study/StudyChangeTimeModal.tsx | 2 +- modals/study/StudyInviteModal.tsx | 2 +- modals/study/StudyLightAbsentModal.tsx | 2 +- .../RequestPromotionRewardModal.tsx | 2 +- pageTemplates/home/HomeStudySection.tsx | 21 +++-- .../home/HomeStudyWaitingSection.tsx | 15 ---- .../home/studyController/StudyController.tsx | 19 +++-- .../profile/profileOverview/ProfileInfo.tsx | 2 +- pageTemplates/study/StudyOverView.tsx | 2 +- pageTemplates/study/StudyParticipants.tsx | 2 +- pageTemplates/study/StudyWaitingOverview.tsx | 17 ++-- pageTemplates/study/StudyWaitingPlaces.tsx | 64 ++++++++++++++ ...{StudyWaiter.tsx => StudyWaitingUsers.tsx} | 9 +- pages/study/[id]/[date]/index.tsx | 2 +- .../study/waiting/[location]/[date]/index.tsx | 21 +++-- pages/study/writing/place.tsx | 2 +- pages/test.tsx | 4 +- pages/vote.tsx | 35 ++++---- types/models/studyTypes/studyDetails.ts | 1 + 35 files changed, 306 insertions(+), 140 deletions(-) create mode 100644 components/atoms/InfoCard.tsx create mode 100644 components/organisms/InfoCardColumn.tsx delete mode 100644 constants/settingValue/pointSystem.ts create mode 100644 libs/study/getStudyVoteCnt.ts delete mode 100644 pageTemplates/home/HomeStudyWaitingSection.tsx create mode 100644 pageTemplates/study/StudyWaitingPlaces.tsx rename pageTemplates/study/{StudyWaiter.tsx => StudyWaitingUsers.tsx} (89%) diff --git a/components/atoms/Icons/HeartLikeIcon.tsx b/components/atoms/Icons/HeartLikeIcon.tsx index 7e307eded..41949926c 100644 --- a/components/atoms/Icons/HeartLikeIcon.tsx +++ b/components/atoms/Icons/HeartLikeIcon.tsx @@ -4,7 +4,7 @@ import { useEffect, useState } from "react"; import styled from "styled-components"; import { LIKE_HEART } from "../../../constants/keys/localStorage"; -import { POINT_SYSTEM_PLUS } from "../../../constants/settingValue/pointSystem"; +import { POINT_SYSTEM_PLUS } from "../../../constants/serviceConstants/pointSystemConstants"; import { useAdminPointMutation } from "../../../hooks/admin/mutation"; import { useCompleteToast, useErrorToast } from "../../../hooks/custom/CustomToast"; import { useInteractionMutation } from "../../../hooks/user/sub/interaction/mutations"; diff --git a/components/atoms/InfoCard.tsx b/components/atoms/InfoCard.tsx new file mode 100644 index 000000000..8eb86a274 --- /dev/null +++ b/components/atoms/InfoCard.tsx @@ -0,0 +1,83 @@ +import { Box, Flex } from "@chakra-ui/react"; +import styled from "styled-components"; + +import Avatar from "./Avatar"; + +export interface IInfoCard { + name: string; + image: string; + text: string; + leftComponent?: React.ReactNode; + rightComponent?: React.ReactNode; + badge?: React.ReactNode; +} + +export default function InfoCard({ + image, + text, + name, + leftComponent, + rightComponent, + badge, +}: IInfoCard) { + console.log(23, leftComponent, rightComponent); + return ( + + {leftComponent && {leftComponent}} + + + + {name} + {badge} + + + {text} + + + {rightComponent} + + ); +} + +const Button = styled.button` + display: inline-block; + margin-left: 4px; + padding: 0 4px; + color: var(--gray-600); +`; + +const CardContainer = styled.div` + display: flex; + align-items: center; + padding: 12px 16px; + border-bottom: var(--border-main); + line-height: 24px; + height: 72px; +`; + +const UserInfoContainer = styled.div` + margin-left: 12px; /* ml-3 */ +`; + +const UserNameBadgeContainer = styled.div` + display: flex; + align-items: center; + font-size: 14px; /* text-sm */ + font-weight: 600; /* font-semibold */ + > span:first-child { + margin-right: 6px; + } +`; + +const CommentText = styled.span` + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 1; + overflow: hidden; + color: var(--gray-600); /* text-gray-4 */ + font-size: 13px; +`; + +const RightComponentContainer = styled.div` + margin-left: auto; +`; diff --git a/components/atoms/RulletPicker.tsx b/components/atoms/RulletPicker.tsx index 54204ab2c..92e880121 100644 --- a/components/atoms/RulletPicker.tsx +++ b/components/atoms/RulletPicker.tsx @@ -99,7 +99,7 @@ const Container = styled.div` width: 100%; border-radius: var(--rounded-lg); /* rounded-lg */ background-color: var(--gray-200); /* bg-gray-8 */ - /* text-bg-2 */ + overflow-y: hidden; padding-top: 8px; /* py-2 */ padding-bottom: 8px; /* py-2 */ @@ -122,7 +122,7 @@ const Item = styled.div<{ isActive: boolean }>` font-weight: 600; /* font-semibold */ font-size: 16px; /* text-base */ height: ${ITEM_HEIGHT}px; - color: ${({ isActive }) => (isActive ? "#FFFFFF" : "var(--gray-200)")}; /* Conditional color */ + color: ${({ isActive }) => (isActive ? "#FFFFFF" : "var(--gray-600)")}; /* Conditional color */ `; const Highlight = styled.div` diff --git a/components/organisms/CardColumnLayout.tsx b/components/organisms/CardColumnLayout.tsx index f3dff1d94..2827168fe 100644 --- a/components/organisms/CardColumnLayout.tsx +++ b/components/organisms/CardColumnLayout.tsx @@ -21,7 +21,7 @@ export function CardColumnLayout({ cardDataArr, url, func }: ICardColumnLayout) ))} - + {/* */} ); } diff --git a/components/organisms/InfoCardColumn.tsx b/components/organisms/InfoCardColumn.tsx new file mode 100644 index 000000000..c460973c0 --- /dev/null +++ b/components/organisms/InfoCardColumn.tsx @@ -0,0 +1,29 @@ +import styled from "styled-components"; + +import InfoCard, { IInfoCard } from "../atoms/InfoCard"; + +interface IInfoCardColumn { + placeCardArr: IInfoCard[]; +} +export default function InfoCardColumn({ placeCardArr }: IInfoCardColumn) { + return ( + + {placeCardArr.map((userCard, idx) => ( + + ))} + + ); +} + +const Layout = styled.div` + background-color: white; + + border-radius: var(--rounded-lg); +`; diff --git a/components/organisms/SearchLocation.tsx b/components/organisms/SearchLocation.tsx index 2f6474bd9..a1b29b6ea 100644 --- a/components/organisms/SearchLocation.tsx +++ b/components/organisms/SearchLocation.tsx @@ -1,4 +1,5 @@ import { Box } from "@chakra-ui/react"; + import { KakaoLocationProps } from "../../types/externals/kakaoLocationSearch"; import { DispatchType } from "../../types/hooks/reactTypes"; import { Input } from "../atoms/Input"; diff --git a/components/organisms/sliders/ImageTileSlider.tsx b/components/organisms/sliders/ImageTileSlider.tsx index 46a1695d4..dcc69da24 100644 --- a/components/organisms/sliders/ImageTileSlider.tsx +++ b/components/organisms/sliders/ImageTileSlider.tsx @@ -51,7 +51,7 @@ function ImageTileSlider({ imageTileArr, size, aspect = 1, slidesPerView }: IIma ); } -const SlideItem = ({ +function SlideItem({ imageTile, size, aspect, @@ -59,8 +59,8 @@ const SlideItem = ({ imageTile: IImageTile; size: Size; aspect: number; -}) => ( - <> +}) { + return <> {imageTile?.text && {imageTile.text}} -); +} const Wrapper = styled.div<{ size: Size }>` display: flex; diff --git a/components/services/studyVote/MapBottomNav.tsx b/components/services/studyVote/MapBottomNav.tsx index 9a051dfdb..e8545c5d1 100644 --- a/components/services/studyVote/MapBottomNav.tsx +++ b/components/services/studyVote/MapBottomNav.tsx @@ -7,7 +7,8 @@ import { useQueryClient } from "react-query"; import { useRecoilValue, useSetRecoilState } from "recoil"; import styled from "styled-components"; -import { STUDY_VOTE } from "../../../constants/keys/queryKeys"; +import { STUDY_VOTE, STUDY_VOTE_CNT } from "../../../constants/keys/queryKeys"; +import { PointSystemProp } from "../../../constants/serviceConstants/pointSystemConstants"; import { useToast, useTypeToast } from "../../../hooks/custom/CustomToast"; import { useStudyParticipationMutation } from "../../../hooks/study/mutations"; import { usePointSystemMutation } from "../../../hooks/user/mutations"; @@ -26,7 +27,7 @@ import StudyVoteTimeRulletDrawer from "./StudyVoteTimeRulletDrawer"; interface IMapBottomNav { myVote: IStudyVote; - voteScore: number; + voteScore: PointSystemProp; setMyVote: DispatchType; morePlaces: string[]; } @@ -101,7 +102,9 @@ function MapBottomNav({ morePlaces, myVote, voteScore, setMyVote }: IMapBottomNa const handleSuccess = () => { queryClient.refetchQueries([STUDY_VOTE, date, convertLocationLangTo(location, "kr")]); - + queryClient.refetchQueries([ + [STUDY_VOTE_CNT, location, dayjs(date).startOf("month"), dayjs(date).endOf("month")], + ]); if (myPrevVotePoint) { getPoint({ message: "스터디 투표 취소", @@ -110,8 +113,7 @@ function MapBottomNav({ morePlaces, myVote, voteScore, setMyVote }: IMapBottomNa } if (studyDateStatus === "not passed" && voteScore) { getPoint({ - value: voteScore, - message: "스터디 투표", + ...voteScore, sub: date, }); toast("success", `투표 완료! ${!myStudy ? "포인트가 적립되었습니다." : ""}`); diff --git a/constants/serviceConstants/pointSystemConstants.ts b/constants/serviceConstants/pointSystemConstants.ts index 75a7185d1..8a327b1ce 100644 --- a/constants/serviceConstants/pointSystemConstants.ts +++ b/constants/serviceConstants/pointSystemConstants.ts @@ -1,12 +1,18 @@ import { IButtonCardProps } from "../../components/molecules/cards/ButtonCard"; +export interface PointSystemProp { + value: number; + message: string; +} + export const POINT_SYSTEM_PLUS = { STUDY_ATTEND_CHECK: { value: 5, message: "스터디 출석" }, STUDY_PRIVATE_ATTEND: { value: 2, message: "개인 스터디 인증" }, STUDY_VOTE: { - first: { value: 10, message: "스터디 투표" }, - second: { value: 5, message: "스터디 투표" }, - third: { value: 2, message: "스터디 투표" }, + basic: { value: 5, message: "스터디 투표" }, + first: { value: 10, message: "스터디 첫번째 투표" }, + second: { value: 5, message: "스터디 두번째 투표" }, + third: { value: 2, message: "스터디 세번째 투표" }, }, STUDY_INVITE: { value: 2, message: "친구 초대 보너스" }, DAILY_ATTEND: { value: 3, message: "일일 출석" }, diff --git a/constants/settingValue/pointSystem.ts b/constants/settingValue/pointSystem.ts deleted file mode 100644 index 4e1a4cade..000000000 --- a/constants/settingValue/pointSystem.ts +++ /dev/null @@ -1,40 +0,0 @@ -export const POINT_SYSTEM_PLUS = { - STUDY_ATTEND: { value: 5, message: "스터디 출석" }, - STUDY_PRIVATE_ATTEND: { value: 2, message: "개인 스터디 인증" }, - STUDY_VOTE: { - first: { value: 10, message: "스터디 투표" }, - second: { value: 5, message: "스터디 투표" }, - third: { value: 2, message: "스터디 투표" }, - }, - STUDY_INVITE: { value: 2, message: "친구 초대 보너스" }, - DAILY_ATTEND: { value: 3, message: "일일 출석" }, - PROMOTION: { value: 100, message: "홍보 리워드" }, - LIKE: { value: 2, message: "좋아요" }, -}; - -export const POINT_SYSTEM_DEPOSIT = { - STUDY_TIME_CHANGE: { - value: -100, - message: "스터디 시작 이후 시간 변경", - }, - STUDY_PRIVATE_ABSENT: { - value: -100, - message: "개인 스터디 미 인증", - }, - STUDY_ATTEND_LATE: { - value: -100, - message: "스터디 지각", - }, - STUDY_ABSENT_BEFORE: { - value: -300, - message: "당일 불참(스터디 시작 이전)", - }, - STUDY_ABSENT_AFTER: { - value: -600, - message: "당일 불참(스터디 시작 이후)", - }, - STUDY_MONTH_CALCULATE: { - value: -1000, - message: "스터디 한달 정산", - }, -}; diff --git a/libs/study/getStudyVoteCnt.ts b/libs/study/getStudyVoteCnt.ts new file mode 100644 index 000000000..3116fe883 --- /dev/null +++ b/libs/study/getStudyVoteCnt.ts @@ -0,0 +1,14 @@ +import { IParticipation } from "../../types/models/studyTypes/studyDetails"; + +export const getStudyVoteCnt = (studyVoteData: IParticipation[], filterUid?: string) => { + const temp = new Set(); + + studyVoteData?.forEach((par) => { + if (par.place.brand === "자유 신청") return; + par?.attendences.forEach((who) => { + if (who?.user.uid === filterUid) return; + temp.add(who.user.uid); + }); + }); + return temp.size; +}; diff --git a/modals/aboutHeader/DateCalendarModal.tsx b/modals/aboutHeader/DateCalendarModal.tsx index c6a6568de..d65339bf0 100644 --- a/modals/aboutHeader/DateCalendarModal.tsx +++ b/modals/aboutHeader/DateCalendarModal.tsx @@ -1,8 +1,8 @@ import "swiper/css"; import dayjs, { Dayjs } from "dayjs"; -import { useSession } from "next-auth/react"; import { useRouter, useSearchParams } from "next/navigation"; +import { useSession } from "next-auth/react"; import { useState } from "react"; import { useSetRecoilState } from "recoil"; import { Swiper, SwiperSlide } from "swiper/react"; diff --git a/modals/aboutHeader/pointSystemsModal/PointSystemsModalFee.tsx b/modals/aboutHeader/pointSystemsModal/PointSystemsModalFee.tsx index 0e3ee3f44..3715e5357 100644 --- a/modals/aboutHeader/pointSystemsModal/PointSystemsModalFee.tsx +++ b/modals/aboutHeader/pointSystemsModal/PointSystemsModalFee.tsx @@ -1,7 +1,8 @@ import { ListItem, UnorderedList } from "@chakra-ui/react"; import styled from "styled-components"; -import { POINT_SYSTEM_DEPOSIT } from "../../../constants/settingValue/pointSystem"; +import { POINT_SYSTEM_DEPOSIT } from "../../../constants/serviceConstants/pointSystemConstants"; + function PointSystemsModalFee() { return ( diff --git a/modals/aboutHeader/pointSystemsModal/PointSystemsModalPoint.tsx b/modals/aboutHeader/pointSystemsModal/PointSystemsModalPoint.tsx index 053738998..59acc7138 100644 --- a/modals/aboutHeader/pointSystemsModal/PointSystemsModalPoint.tsx +++ b/modals/aboutHeader/pointSystemsModal/PointSystemsModalPoint.tsx @@ -1,7 +1,7 @@ import { ListItem, UnorderedList } from "@chakra-ui/react"; import styled from "styled-components"; -import { POINT_SYSTEM_PLUS } from "../../../constants/settingValue/pointSystem"; +import { POINT_SYSTEM_PLUS } from "../../../constants/serviceConstants/pointSystemConstants"; function PointSystemsModalPoint() { return ( diff --git a/modals/study/StudyAbsentModal.tsx b/modals/study/StudyAbsentModal.tsx index ee56d0cfa..be3def91e 100644 --- a/modals/study/StudyAbsentModal.tsx +++ b/modals/study/StudyAbsentModal.tsx @@ -8,8 +8,8 @@ import { useRecoilValue } from "recoil"; import styled from "styled-components"; import { STUDY_VOTE } from "../../constants/keys/queryKeys"; +import { POINT_SYSTEM_DEPOSIT } from "../../constants/serviceConstants/pointSystemConstants"; import { PLACE_TO_LOCATION } from "../../constants/serviceConstants/studyConstants/studyLocationConstants"; -import { POINT_SYSTEM_DEPOSIT } from "../../constants/settingValue/pointSystem"; import { useToast, useTypeToast } from "../../hooks/custom/CustomToast"; import { useStudyAbsentMutation } from "../../hooks/study/mutations"; import { usePointSystemMutation } from "../../hooks/user/mutations"; diff --git a/modals/study/StudyAttendCheckModal.tsx b/modals/study/StudyAttendCheckModal.tsx index bd0598b82..ab8c04c4d 100644 --- a/modals/study/StudyAttendCheckModal.tsx +++ b/modals/study/StudyAttendCheckModal.tsx @@ -13,8 +13,10 @@ import ScreenOverlay from "../../components/atoms/ScreenOverlay"; import Spinner from "../../components/atoms/Spinner"; import ImageUploadInput from "../../components/molecules/ImageUploadInput"; import { STUDY_VOTE } from "../../constants/keys/queryKeys"; -import { POINT_SYSTEM_PLUS } from "../../constants/serviceConstants/pointSystemConstants"; -import { POINT_SYSTEM_DEPOSIT } from "../../constants/settingValue/pointSystem"; +import { + POINT_SYSTEM_DEPOSIT, + POINT_SYSTEM_PLUS, +} from "../../constants/serviceConstants/pointSystemConstants"; import { useToast, useTypeToast } from "../../hooks/custom/CustomToast"; import { useImageUploadMutation } from "../../hooks/image/mutations"; import { useStudyAttendCheckMutation } from "../../hooks/study/mutations"; diff --git a/modals/study/StudyChangeTimeModal.tsx b/modals/study/StudyChangeTimeModal.tsx index 183c5d1dd..eaafa20df 100644 --- a/modals/study/StudyChangeTimeModal.tsx +++ b/modals/study/StudyChangeTimeModal.tsx @@ -7,9 +7,9 @@ import { useRecoilValue } from "recoil"; import RulletPickerTwo from "../../components/molecules/picker/RulletPickerTwo"; import { STUDY_VOTE } from "../../constants/keys/queryKeys"; +import { POINT_SYSTEM_DEPOSIT } from "../../constants/serviceConstants/pointSystemConstants"; import { PLACE_TO_LOCATION } from "../../constants/serviceConstants/studyConstants/studyLocationConstants"; import { STUDY_VOTE_HOUR_ARR } from "../../constants/serviceConstants/studyConstants/studyTimeConstant"; -import { POINT_SYSTEM_DEPOSIT } from "../../constants/settingValue/pointSystem"; import { useToast, useTypeToast } from "../../hooks/custom/CustomToast"; import { useStudyParticipationMutation } from "../../hooks/study/mutations"; import { usePointSystemMutation } from "../../hooks/user/mutations"; diff --git a/modals/study/StudyInviteModal.tsx b/modals/study/StudyInviteModal.tsx index a4239131c..802006173 100644 --- a/modals/study/StudyInviteModal.tsx +++ b/modals/study/StudyInviteModal.tsx @@ -1,6 +1,6 @@ import { Button } from "@chakra-ui/react"; -import { useSession } from "next-auth/react"; import { useRouter } from "next/router"; +import { useSession } from "next-auth/react"; import { useEffect, useState } from "react"; import styled from "styled-components"; diff --git a/modals/study/StudyLightAbsentModal.tsx b/modals/study/StudyLightAbsentModal.tsx index 4d36110fa..bc9e37621 100644 --- a/modals/study/StudyLightAbsentModal.tsx +++ b/modals/study/StudyLightAbsentModal.tsx @@ -1,8 +1,8 @@ import dayjs from "dayjs"; import { useRouter } from "next/router"; +import { POINT_SYSTEM_DEPOSIT } from "../../constants/serviceConstants/pointSystemConstants"; import { PLACE_TO_NAME } from "../../constants/serviceConstants/studyConstants/studyCafeNameConstants"; -import { POINT_SYSTEM_DEPOSIT } from "../../constants/settingValue/pointSystem"; import { useCompleteToast, useErrorToast } from "../../hooks/custom/CustomToast"; import { useStudyAbsentMutation } from "../../hooks/study/mutations"; import { usePointSystemMutation } from "../../hooks/user/mutations"; diff --git a/modals/userRequest/RequestPromotionRewardModal.tsx b/modals/userRequest/RequestPromotionRewardModal.tsx index 2af3c8817..16605ee4f 100644 --- a/modals/userRequest/RequestPromotionRewardModal.tsx +++ b/modals/userRequest/RequestPromotionRewardModal.tsx @@ -6,7 +6,7 @@ import styled from "styled-components"; import { CopyBtn } from "../../components/atoms/Icons/CopyIcon"; import { PROMOTION_TEXT,PromotionComponent } from "../../constants/contentsText/Private"; -import { POINT_SYSTEM_PLUS } from "../../constants/settingValue/pointSystem"; +import { POINT_SYSTEM_PLUS } from "../../constants/serviceConstants/pointSystemConstants"; import { useCompleteToast, useErrorToast } from "../../hooks/custom/CustomToast"; import { usePointSystemMutation } from "../../hooks/user/mutations"; import { useUserRequestMutation } from "../../hooks/user/sub/request/mutations"; diff --git a/pageTemplates/home/HomeStudySection.tsx b/pageTemplates/home/HomeStudySection.tsx index 87c9d43d5..0c457fc6c 100644 --- a/pageTemplates/home/HomeStudySection.tsx +++ b/pageTemplates/home/HomeStudySection.tsx @@ -1,8 +1,8 @@ import { ThemeTypings } from "@chakra-ui/react"; import dayjs from "dayjs"; import { AnimatePresence, motion, PanInfo } from "framer-motion"; -import { useSession } from "next-auth/react"; import { useRouter, useSearchParams } from "next/navigation"; +import { useSession } from "next-auth/react"; import { useEffect, useState } from "react"; import { useRecoilValue, useSetRecoilState } from "recoil"; import styled from "styled-components"; @@ -59,23 +59,25 @@ export default function HomeStudySection() { setStudyCardColData(null); return; } - console.log("initial", studyVoteData, studyDateStatus); + const sortedData = sortStudyVoteData(studyVoteData, studyDateStatus !== "not passed"); - console.log("sortedData", sortedData); - const waiting = getWaitingSpaceProps(studyVoteData); + + const waiting = studyDateStatus === "not passed" && getWaitingSpaceProps(studyVoteData); + const cardList = setStudyDataToCardCol( sortedData, date as string, session?.user.uid, - waiting.map((obj) => obj.user), + studyDateStatus === "not passed" ? waiting.map((obj) => obj.user) : null, `${locationEn}/${date}`, ); - console.log("cardList", cardList); + setStudyCardColData(cardList.slice(0, 3)); setSortedStudyCardList(cardList); const myStudy = getMyStudy(studyVoteData, myUid); + setMyStudy(myStudy); - console.log("whw"); + if (date === dayjsToStr(dayjs())) { const myInfo = myStudy?.attendences.find((who) => who.user.uid === myUid); if (myInfo) { @@ -86,6 +88,7 @@ export default function HomeStudySection() { } } } + if (getStudyConfimCondition(studyDateStatus, studyVoteData[1].status)) { decideStudyResult(); } @@ -169,6 +172,7 @@ export const setStudyDataToCardCol = ( ): IPostThumbnailCard[] => { const privateStudy = studyData.find((par) => par.place.brand === "자유 신청"); const filteredData = studyData.filter((par) => par.place.brand !== "자유 신청"); + const isNotPassed = !privateStudy; if (privateStudy) filteredData.splice(2, 0, privateStudy); @@ -188,7 +192,7 @@ export const setStudyDataToCardCol = ( data.status === "pending" && data.attendences.some((who) => who.user.uid === uid) && "GOOD", })); - if (!privateStudy) { + if (isNotPassed) { cardColData.unshift({ title: "스터디 대기소", subtitle: "스터디", @@ -201,7 +205,6 @@ export const setStudyDataToCardCol = ( }, badge: { text: "", colorScheme: "mintTheme" }, type: "study", - statusText: "good", }); } diff --git a/pageTemplates/home/HomeStudyWaitingSection.tsx b/pageTemplates/home/HomeStudyWaitingSection.tsx deleted file mode 100644 index c3ce4897c..000000000 --- a/pageTemplates/home/HomeStudyWaitingSection.tsx +++ /dev/null @@ -1,15 +0,0 @@ - -interface HomeStudyWaitingSectionProps{ - -} - -function HomeStudyWaitingSection({}:HomeStudyWaitingSectionProps){ - - return ( - <> - - - ); -} - -export default HomeStudyWaitingSection diff --git a/pageTemplates/home/studyController/StudyController.tsx b/pageTemplates/home/studyController/StudyController.tsx index b909a8e14..58821641d 100644 --- a/pageTemplates/home/studyController/StudyController.tsx +++ b/pageTemplates/home/studyController/StudyController.tsx @@ -8,11 +8,12 @@ import styled from "styled-components"; import PointCircleText from "../../../components/atoms/PointCircleText"; import Slide from "../../../components/layouts/PageSlide"; import WeekSlideCalendar from "../../../components/molecules/WeekSlideCalendar"; -import { useStudyDailyVoteCntQuery } from "../../../hooks/study/queries"; +import { useStudyDailyVoteCntQuery, useStudyVoteQuery } from "../../../hooks/study/queries"; +import { getStudyVoteCnt } from "../../../libs/study/getStudyVoteCnt"; import DateCalendarModal from "../../../modals/aboutHeader/DateCalendarModal"; import StudyAttendCheckModal from "../../../modals/study/StudyAttendCheckModal"; import { studyDateStatusState } from "../../../recoils/studyRecoils"; -import { ActiveLocation } from "../../../types/services/locationTypes"; +import { ActiveLocation, LocationEn } from "../../../types/services/locationTypes"; import { convertLocationLangTo } from "../../../utils/convertUtils/convertDatas"; import { dayjsToStr } from "../../../utils/dateTimeUtils"; import StudyControllerVoteButton from "./StudyControllerVoteButton"; @@ -36,6 +37,7 @@ function StudyController() { const newSearchParams = new URLSearchParams(searchParams); const date = searchParams.get("date"); const location = searchParams.get("location"); + const locationKr = convertLocationLangTo(location as LocationEn, "kr"); const [selectedDate, setSelectedDate] = useState(); const [modalType, setModalType] = useState(null); @@ -44,6 +46,10 @@ function StudyController() { const selectedDateDayjs = dayjs(selectedDate); + const { data: studyVoteData } = useStudyVoteQuery(date as string, locationKr, { + enabled: !!date && !!location, + }); + const { data: voteCntArr } = useStudyDailyVoteCntQuery( convertLocationLangTo(location as ActiveLocation, "kr"), selectedDateDayjs.startOf("month"), @@ -53,10 +59,6 @@ function StudyController() { }, ); - const todayVoterCnt = voteCntArr?.find( - (item) => dayjsToStr(dayjs(item.date)) === selectedDate, - )?.value; - useEffect(() => { setSelectedDate(date); }, [date]); @@ -109,7 +111,10 @@ function StudyController() { func={onClick} /> - + )} diff --git a/pageTemplates/profile/profileOverview/ProfileInfo.tsx b/pageTemplates/profile/profileOverview/ProfileInfo.tsx index 63401b6dd..08fbde0cf 100644 --- a/pageTemplates/profile/profileOverview/ProfileInfo.tsx +++ b/pageTemplates/profile/profileOverview/ProfileInfo.tsx @@ -6,7 +6,7 @@ import Avatar from "../../../components/atoms/Avatar"; import UserBadge from "../../../components/atoms/badges/UserBadge"; import { LIKE_HEART } from "../../../constants/keys/localStorage"; import { NOTICE_HEART_LOG } from "../../../constants/keys/queryKeys"; -import { POINT_SYSTEM_PLUS } from "../../../constants/settingValue/pointSystem"; +import { POINT_SYSTEM_PLUS } from "../../../constants/serviceConstants/pointSystemConstants"; import { USER_ROLE } from "../../../constants/settingValue/role"; import { useAdminPointMutation } from "../../../hooks/admin/mutation"; import { useResetQueryData } from "../../../hooks/custom/CustomHooks"; diff --git a/pageTemplates/study/StudyOverView.tsx b/pageTemplates/study/StudyOverView.tsx index 2197a73f9..0fa168766 100644 --- a/pageTemplates/study/StudyOverView.tsx +++ b/pageTemplates/study/StudyOverView.tsx @@ -1,8 +1,8 @@ import { Box, Button, Flex } from "@chakra-ui/react"; import { useState } from "react"; import styled from "styled-components"; -import InfoBox, { InfoBoxProp } from "../../components/molecules/InfoBox"; +import InfoBox, { InfoBoxProp } from "../../components/molecules/InfoBox"; import VoteMap from "../../components/organisms/VoteMap"; import { IMapOptions, IMarkerOptions } from "../../types/externals/naverMapTypes"; diff --git a/pageTemplates/study/StudyParticipants.tsx b/pageTemplates/study/StudyParticipants.tsx index 54a516946..b869002e1 100644 --- a/pageTemplates/study/StudyParticipants.tsx +++ b/pageTemplates/study/StudyParticipants.tsx @@ -1,7 +1,7 @@ import { Box, Flex } from "@chakra-ui/react"; import dayjs from "dayjs"; -import { useSession } from "next-auth/react"; import Image from "next/image"; +import { useSession } from "next-auth/react"; import { useState } from "react"; import Slide from "../../components/layouts/PageSlide"; diff --git a/pageTemplates/study/StudyWaitingOverview.tsx b/pageTemplates/study/StudyWaitingOverview.tsx index 1bc8f057d..98d8ce134 100644 --- a/pageTemplates/study/StudyWaitingOverview.tsx +++ b/pageTemplates/study/StudyWaitingOverview.tsx @@ -1,5 +1,6 @@ -import { Box } from "@chakra-ui/react"; +import { Box, Button } from "@chakra-ui/react"; import styled from "styled-components"; + import InfoBox, { InfoBoxProp } from "../../components/molecules/InfoBox"; interface StudyWaitingOverviewProps { title: string; @@ -8,7 +9,7 @@ interface StudyWaitingOverviewProps { function StudyWaitingOverview({ title }: StudyWaitingOverviewProps) { const infos: InfoBoxProp[] = [ { - text: "대기소입니다", + text: "오후 11시에 스터디 결과가 발표됩니다.", icon: , }, { @@ -19,21 +20,21 @@ function StudyWaitingOverview({ title }: StudyWaitingOverviewProps) { return ( - {title}2 - + + ); } const OverviewWrapper = styled.div` + display: flex; padding: 16px 16px; padding-bottom: 12px; background-color: white; `; -const Title = styled.span` - font-weight: bold; - font-size: 18px; -`; + export default StudyWaitingOverview; diff --git a/pageTemplates/study/StudyWaitingPlaces.tsx b/pageTemplates/study/StudyWaitingPlaces.tsx new file mode 100644 index 000000000..e72201ad7 --- /dev/null +++ b/pageTemplates/study/StudyWaitingPlaces.tsx @@ -0,0 +1,64 @@ +import { Box, Flex } from "@chakra-ui/react"; + +import { IInfoCard } from "../../components/atoms/InfoCard"; +import InfoCardColumn from "../../components/organisms/InfoCardColumn"; +import { IParticipation } from "../../types/models/studyTypes/studyDetails"; + +interface StudyWaitingPlacesProps { + studyWaitingPlaces: IParticipation[]; +} + +function StudyWaitingPlaces({ studyWaitingPlaces }: StudyWaitingPlacesProps) { + const placeCardArr: IInfoCard[] = studyWaitingPlaces.map((par, idx) => { + const place = par.place; + + return { + image: place.image, + name: place.brand, + text: place.branch, + leftComponent: + idx < 8 ? ( + + ) : ( + + ), + rightComponent: ( + + {par.attendences.length}명 신청중 + + ), + }; + }); + console.log(studyWaitingPlaces); + return ( + <> + {placeCardArr.length ? ( + + ) : ( + + + 현재 참여중인 멤버가 없습니다. +
+ 지금 신청하면{" "} + + 10 POINT + {" "} + 추가 획득! + + + )} + + ); +} + +export default StudyWaitingPlaces; diff --git a/pageTemplates/study/StudyWaiter.tsx b/pageTemplates/study/StudyWaitingUsers.tsx similarity index 89% rename from pageTemplates/study/StudyWaiter.tsx rename to pageTemplates/study/StudyWaitingUsers.tsx index c3bf62ae8..cf4268b47 100644 --- a/pageTemplates/study/StudyWaiter.tsx +++ b/pageTemplates/study/StudyWaitingUsers.tsx @@ -1,13 +1,14 @@ import { Box, Flex } from "@chakra-ui/react"; + import { IProfileCommentCard } from "../../components/molecules/cards/ProfileCommentCard"; import ProfileCardColumn from "../../components/organisms/ProfileCardColumn"; import { StudyWaitingUser } from "../../types/models/studyTypes/studyInterActions"; -interface StudyWaiterProps { +interface StudyWaitingUsersProps { studyWaitingUsers: StudyWaitingUser[]; } -function StudyWaiter({ studyWaitingUsers }: StudyWaiterProps) { +function StudyWaitingUsers({ studyWaitingUsers }: StudyWaitingUsersProps) { const userCardArr: IProfileCommentCard[] = studyWaitingUsers.map((par, idx) => { return { user: par.user, @@ -28,7 +29,7 @@ function StudyWaiter({ studyWaitingUsers }: StudyWaiterProps) { ), }; }); - + console.log(studyWaitingUsers); return ( <> {userCardArr.length ? ( @@ -57,4 +58,4 @@ function StudyWaiter({ studyWaitingUsers }: StudyWaiterProps) { ); } -export default StudyWaiter; +export default StudyWaitingUsers; diff --git a/pages/study/[id]/[date]/index.tsx b/pages/study/[id]/[date]/index.tsx index a1a701a3a..09085cdaf 100644 --- a/pages/study/[id]/[date]/index.tsx +++ b/pages/study/[id]/[date]/index.tsx @@ -1,5 +1,5 @@ -import { useSession } from "next-auth/react"; import { useParams } from "next/navigation"; +import { useSession } from "next-auth/react"; import { useEffect } from "react"; import { useRecoilState, useSetRecoilState } from "recoil"; import styled from "styled-components"; diff --git a/pages/study/waiting/[location]/[date]/index.tsx b/pages/study/waiting/[location]/[date]/index.tsx index 3a12c919e..663d7b932 100644 --- a/pages/study/waiting/[location]/[date]/index.tsx +++ b/pages/study/waiting/[location]/[date]/index.tsx @@ -10,12 +10,14 @@ import TabNav, { ITabNavOptions } from "../../../../../components/molecules/navs import { useStudyVoteQuery } from "../../../../../hooks/study/queries"; import { getStudyDateStatus } from "../../../../../libs/study/date/getStudyDateStatus"; import { getMyStudy } from "../../../../../libs/study/getMyStudy"; +import { sortStudyVoteData } from "../../../../../libs/study/sortStudyVoteData"; import { getWaitingSpaceProps } from "../../../../../pageTemplates/home/HomeStudySection"; import StudyCover from "../../../../../pageTemplates/study/StudyCover"; import StudyDateBar from "../../../../../pageTemplates/study/StudyDateBar"; import StudyHeader from "../../../../../pageTemplates/study/StudyHeader"; -import StudyWaiter from "../../../../../pageTemplates/study/StudyWaiter"; import StudyWaitingOverview from "../../../../../pageTemplates/study/StudyWaitingOverview"; +import StudyWaitingPlaces from "../../../../../pageTemplates/study/StudyWaitingPlaces"; +import StudyWaitingUsers from "../../../../../pageTemplates/study/StudyWaitingUsers"; import { myStudyState, studyDateStatusState } from "../../../../../recoils/studyRecoils"; import { ActiveLocation } from "../../../../../types/services/locationTypes"; import { convertLocationLangTo } from "../../../../../utils/convertUtils/convertDatas"; @@ -46,8 +48,8 @@ export default function Page() { }, [studyAll]); const studyWaitingUsers = studyAll && getWaitingSpaceProps(studyAll); - - console.log("wait", studyWaitingUsers); + const sortedStudyPlaces = studyAll && sortStudyVoteData(studyAll, false); + console.log("wait", studyAll, studyWaitingUsers, sortedStudyPlaces); const [category, setCategory] = useState("참여 멤버"); @@ -71,10 +73,8 @@ export default function Page() { /> @@ -92,9 +92,12 @@ export default function Page() { }} /> + {category === "참여 멤버" ? ( + + ) : ( + + )} - - {/* */} )} diff --git a/pages/study/writing/place.tsx b/pages/study/writing/place.tsx index 43d719fb9..47300a9eb 100644 --- a/pages/study/writing/place.tsx +++ b/pages/study/writing/place.tsx @@ -1,6 +1,6 @@ import { Box } from "@chakra-ui/react"; -import { useSession } from "next-auth/react"; import { useRouter } from "next/router"; +import { useSession } from "next-auth/react"; import { useState } from "react"; import { useRecoilState } from "recoil"; import styled from "styled-components"; diff --git a/pages/test.tsx b/pages/test.tsx index f0cff8f60..dec8929f1 100644 --- a/pages/test.tsx +++ b/pages/test.tsx @@ -60,7 +60,7 @@ const send = async () => { console.log("Push Sent..."); }; -const Test = () => { +function Test() { useEffect(() => { if ("serviceWorker" in navigator) { send().catch((err) => console.error(err)); @@ -76,6 +76,6 @@ const Test = () => {

); -}; +} export default Test; diff --git a/pages/vote.tsx b/pages/vote.tsx index 9e1f759ad..b883ffbad 100644 --- a/pages/vote.tsx +++ b/pages/vote.tsx @@ -11,10 +11,15 @@ import VoteMap from "../components/organisms/VoteMap"; import VoteMapController from "../components/organisms/VoteMapController"; import MapBottomNav from "../components/services/studyVote/MapBottomNav"; import { STUDY_PREFERENCE_LOCAL } from "../constants/keys/queryKeys"; +import { + POINT_SYSTEM_PLUS, + PointSystemProp, +} from "../constants/serviceConstants/pointSystemConstants"; import { STUDY_DISTANCE } from "../constants/serviceConstants/studyConstants/studyDistanceConstants"; import { PLACE_TO_LOCATION } from "../constants/serviceConstants/studyConstants/studyLocationConstants"; import { useToast } from "../hooks/custom/CustomToast"; import { useStudyPreferenceQuery, useStudyVoteQuery } from "../hooks/study/queries"; +import { getStudyVoteCnt } from "../libs/study/getStudyVoteCnt"; import { getStudyVoteIcon } from "../libs/study/getStudyVoteIcon"; import { getVoteLocationCenterDot, getVoteLocationMaxBound } from "../libs/study/getStudyVoteMap"; import StudyPresetModal from "../modals/userRequest/StudyPresetModal"; @@ -51,7 +56,7 @@ export default function StudyVoteMap() { }>(); const [myVote, setMyVote] = useState(); const [precision, setPrecision] = useState<0 | 1 | 2>(1); - const [voteScore, setVoteScore] = useState(2); + const [voteScore, setVoteScore] = useState(); const [markersOptions, setMarkersOptions] = useState(); const [subSecond, setSubSecond] = useState(); const [morePlaces, setMorePlaces] = useState(); @@ -61,7 +66,7 @@ export default function StudyVoteMap() { const studyDateStatus = useRecoilValue(studyDateStatusState); - const subPlacePoint = myVote?.subPlace?.length || 0; + const subPlacePoint = myVote?.subPlace?.length > 5 ? 5 : myVote?.subPlace?.length || 0; const { data: studyVoteData } = useStudyVoteQuery(date, location, { enabled: !!location && !!date, @@ -166,10 +171,10 @@ export default function StudyVoteMap() { ...old, subPlace: precision === 0 ? [] : precision === 2 ? [...sub1, ...sub2] : [...sub1], })); - setVoteScore((old) => old + getPlaceVoteRankScore(place, studyVoteData, data.user.uid)); + setVoteScore(getPlaceVoteRankScore(studyVoteData, data.user.uid)); } else { setMyVote((old) => ({ ...old, subPlace: [] })); - setVoteScore(2); + setVoteScore(null); } }, [myVote?.place, precision]); @@ -194,7 +199,7 @@ export default function StudyVoteMap() {
현재 획득 포인트
-
+ {voteScore + subPlacePoint} POINT
+
+ {voteScore.value + subPlacePoint} POINT
 @@ -216,7 +221,7 @@ export default function StudyVoteMap() { @@ -263,19 +268,19 @@ const getRecommendations = (placeId: string, targetDistance: number): string[] = return Array.from(placesAtDistance); }; -export const getPlaceVoteRankScore = (placeId: string, voteData: IParticipation[], uid: string) => { - const mainVoteAttCnt = voteData - .find((par) => par.place._id === placeId) - ?.attendences.filter((att) => att.user.uid !== uid).length; - switch (mainVoteAttCnt) { +export const getPlaceVoteRankScore = (voteData: IParticipation[], uid: string): PointSystemProp => { + const voteCnt = getStudyVoteCnt(voteData, uid); + + switch (voteCnt) { case 0: - return 10; + return POINT_SYSTEM_PLUS.STUDY_VOTE.first; case 1: - return 5; + return POINT_SYSTEM_PLUS.STUDY_VOTE.second; case 2: - return 2; + return POINT_SYSTEM_PLUS.STUDY_VOTE.third; + default: + return POINT_SYSTEM_PLUS.STUDY_VOTE.basic; } - return 0; }; export const getMapOptions = (location: ActiveLocation): IMapOptions | undefined => { diff --git a/types/models/studyTypes/studyDetails.ts b/types/models/studyTypes/studyDetails.ts index b263e611a..2e999f368 100644 --- a/types/models/studyTypes/studyDetails.ts +++ b/types/models/studyTypes/studyDetails.ts @@ -24,6 +24,7 @@ export interface IAttendance { start: Dayjs; end: Dayjs; }; + createdAt: string; imageUrl?: string; arrived?: Date; firstChoice: boolean;