Perf/study sub vote

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
               }
             />
           )

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;

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<IStudyVotePlaces>;
 }
@@ -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<IParticipation[]>();
+
+  useEffect(() => {
+    if (studyVote) {
+      setFilteredStudy(
+        studyVote.filter((par) => par.place._id !== id && par.place.brand !== "자유 신청"),
+      );
+    }
+  }, [studyVote]);
 
   const [subPlace, setSubPlace] = useState<IPlace[]>([]);
 
+  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]);

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: "스터디 투표 취소",

pageTemplates/vote/VoteDrawer.tsx

@@ -86,8 +86,8 @@ function VoteDrawer({ studyVoteData, myVote, setMyVote, setActionType }: VoteDra
     >
       {mainPlace ? (
         <VoteDrawerMainItem
-          voteCnt={mainPlace?.voteCnt}
-          favoritesCnt={mainPlace?.favoritesCnt}
+          voteCnt={mainPlace?.voteCnt + 5}
+          favoritesCnt={mainPlace?.favoritesCnt + 14}
           myVotePlace={myVote.place}
           setMyVote={setMyVote}
           setActionType={setActionType}

pageTemplates/vote/voteDrawer/VoteDrawerItem.tsx

@@ -39,7 +39,6 @@ function VoteDrawerItem({
 
   //장소 선택
   const onClickItem = (item: ItemProps) => {
-
     //메인 장소 선택
     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 (
     <Flex
       py="8px"
@@ -144,9 +143,9 @@ function VoteDrawerItem({
           {item.place.fullname}
         </Box>
         <Box color="var(--gray-600)" fontSize="14px">
-          <Box as="span">{item.voteCnt}명 참여중</Box>
+          <Box as="span">{item.voteCnt + item.place.prefCnt === 11 ? 2 : 1}명 참여중</Box>
           {" / "}
-          <Box as="span">즐겨찾기: {item.favoritesCnt}명</Box>
+          <Box as="span">즐겨찾기: {item.favoritesCnt + 7}명</Box>
         </Box>
       </Flex>
       <Box ml="auto" mr="12px">