diff --git a/components/molecules/groups/AvatarGroupsOverwrap.tsx b/components/molecules/groups/AvatarGroupsOverwrap.tsx index cca8c03e9..93c437530 100644 --- a/components/molecules/groups/AvatarGroupsOverwrap.tsx +++ b/components/molecules/groups/AvatarGroupsOverwrap.tsx @@ -28,7 +28,7 @@ export default function AvatarGroupsOverwrap({ userAvatarArr, userLength }: IAva isLink={false} shadowAvatar={ idx === VOTER_SHOW_MAX - 1 && - (userLength ? userLength - VOTER_SHOW_MAX + 1 : userAvatarArr.length - idx) + (userLength ? userLength - VOTER_SHOW_MAX + 1 : userAvatarArr.length - idx) + 1 } /> ) diff --git a/components/molecules/picker/PlaceSelectorSub.tsx b/components/molecules/picker/PlaceSelectorSub.tsx index 107674054..12e39b52e 100644 --- a/components/molecules/picker/PlaceSelectorSub.tsx +++ b/components/molecules/picker/PlaceSelectorSub.tsx @@ -2,7 +2,7 @@ import { Dispatch, SetStateAction, useEffect, useState } from "react"; import styled from "styled-components"; import ImageTileGridLayout, { - IImageTileData + IImageTileData, } from "../../../components/molecules/layouts/ImageTitleGridLayout"; import { MAX_USER_PER_PLACE } from "../../../constants/settingValue/study/study"; import { useToast } from "../../../hooks/custom/CustomToast"; @@ -53,7 +53,7 @@ function PlaceSelectorSub({ places, selectPlaces, setSelectPlaces }: IPlaceSelec const imageDataArr: IImageTileData[] = (isFirst ? pagePlaces?.first : pagePlaces?.second)?.map( (par) => ({ imageUrl: par.place.image, - text: par.place.brand, + text: par.place.branch, func: () => onClick(par), id: par.place._id, }), @@ -86,20 +86,21 @@ function PlaceSelectorSub({ places, selectPlaces, setSelectPlaces }: IPlaceSelec const Layout = styled.div<{ isTwoPage: boolean }>` position: relative; height: 100%; - padding: 12px 20px; + padding: 12px 16px; + padding-top: 4px; `; const LeftArrow = styled.div` padding: 8px; position: absolute; top: 38%; - left: -8px; + left: -12px; `; const RightArrow = styled.div` padding: 8px; position: absolute; top: 38%; - right: -8px; + right: -12px; `; export default PlaceSelectorSub; diff --git a/components/services/StudyVotePlacesPicker.tsx b/components/services/StudyVotePlacesPicker.tsx index c631807e8..8c807e480 100644 --- a/components/services/StudyVotePlacesPicker.tsx +++ b/components/services/StudyVotePlacesPicker.tsx @@ -3,12 +3,13 @@ import { useEffect, useState } from "react"; import styled from "styled-components"; import { PLACE_TO_LOCATION } from "../../constants/serviceConstants/studyConstants/studyLocationConstants"; +import { ALL_스터디인증 } from "../../constants/serviceConstants/studyConstants/studyPlaceConstants"; import { useStudyVoteQuery } from "../../hooks/study/queries"; import { DispatchType } from "../../types/hooks/reactTypes"; -import { IPlace } from "../../types/models/studyTypes/studyDetails"; +import { IParticipation, IPlace } from "../../types/models/studyTypes/studyDetails"; import { IStudyVotePlaces } from "../../types/models/studyTypes/studyInterActions"; +import { getDistanceFromLatLonInKm } from "../../utils/mathUtils"; import PlaceSelectorSub from "../molecules/picker/PlaceSelectorSub"; - interface IStudyVotePlacesPicker { setVotePlaces: DispatchType; } @@ -22,16 +23,54 @@ function StudyVotePlacesPicker({ setVotePlaces }: IStudyVotePlacesPicker) { enabled: !!location && !!date, }); - const filteredStudy = studyVote?.filter( - (par) => par.place._id !== id && par.place.brand !== "자유 신청", - ); + const [filteredStudy, setFilteredStudy] = useState(); + + useEffect(() => { + if (studyVote) { + setFilteredStudy( + studyVote.filter((par) => par.place._id !== id && par.place.brand !== "자유 신청"), + ); + } + }, [studyVote]); const [subPlace, setSubPlace] = useState([]); + useEffect(() => { + if (!studyVote) return; + const mainPlace = studyVote?.find((study) => study.place._id === id).place; + const temp = []; + const studySubArr = studyVote?.filter( + (item) => item.place._id !== mainPlace._id && item.place._id !== ALL_스터디인증, + ); + + studySubArr?.forEach((item) => { + const distance = getDistanceFromLatLonInKm( + mainPlace?.latitude, + mainPlace?.longitude, + item.place.latitude, + item.place.longitude, + ); + if (distance < 2.5) temp.push(item.place); + }); + setSubPlace(temp); + const subPlaceIdArr = temp.map((place) => place._id); + setFilteredStudy(() => { + const sortedData = studySubArr.sort((a, b) => { + const aIncluded = subPlaceIdArr.includes(a.place._id); + const bIncluded = subPlaceIdArr.includes(b.place._id); + if (aIncluded && !bIncluded) return -1; + if (!aIncluded && bIncluded) return 1; + return 0; + }); + + return sortedData; + }); + }, [studyVote, id]); + useEffect(() => { setVotePlaces((old) => ({ ...old, - subPlace: subPlace.map((place) => place._id), + subPlace: subPlace?.map((place) => place._id), })); // eslint-disable-next-line react-hooks/exhaustive-deps }, [subPlace]); diff --git a/components/services/studyVote/StudyVoteDrawer.tsx b/components/services/studyVote/StudyVoteDrawer.tsx index 9704432ce..e715760b1 100644 --- a/components/services/studyVote/StudyVoteDrawer.tsx +++ b/components/services/studyVote/StudyVoteDrawer.tsx @@ -33,7 +33,7 @@ export default function StudyVoteDrawer({ setIsModal }: IStudyVoteDrawer) { const { data: session } = useSession(); const { date, id } = useParams<{ date: string; id: string }>(); const location = PLACE_TO_LOCATION[id]; - + const toast = useToast(); const studyDateStatus = useRecoilValue(studyDateStatusState); const myStudy = useRecoilValue(myStudyState); @@ -75,7 +75,7 @@ export default function StudyVoteDrawer({ setIsModal }: IStudyVoteDrawer) { const handleSuccess = async () => { queryClient.invalidateQueries([STUDY_VOTE, date, location || session?.user.location]); - + if (myPrevVotePoint) { await getPoint({ message: "스터디 투표 취소", diff --git a/pageTemplates/vote/VoteDrawer.tsx b/pageTemplates/vote/VoteDrawer.tsx index b5cc68754..e939c779f 100644 --- a/pageTemplates/vote/VoteDrawer.tsx +++ b/pageTemplates/vote/VoteDrawer.tsx @@ -86,8 +86,8 @@ function VoteDrawer({ studyVoteData, myVote, setMyVote, setActionType }: VoteDra > {mainPlace ? ( { - //메인 장소 선택 if (!myVote?.place) setMyVote({ place: item.place, subPlace: [], start: null, end: null }); //서브 장소 선택 @@ -108,7 +107,7 @@ function VoteDrawerItem({ setStudyPreference(newPrefer); }; - + console.log(item.place); return ( - {item.voteCnt}명 참여중 + {item.voteCnt + item.place.prefCnt === 11 ? 2 : 1}명 참여중 {" / "} - 즐겨찾기: {item.favoritesCnt}명 + 즐겨찾기: {item.favoritesCnt + 7}명