Skip to content

Commit

Permalink
wip
Browse files Browse the repository at this point in the history
  • Loading branch information
SeungJL committed Oct 12, 2024
1 parent 238bcac commit 5ea825f
Show file tree
Hide file tree
Showing 14 changed files with 232 additions and 167 deletions.
2 changes: 1 addition & 1 deletion components/Icons/CircleIcons.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ export const CheckCircleIcon = () => (
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
<g clip-path="url(#clip0_2105_2224)">
<path
fill-rule="evenodd"
fillRule="evenodd"
clipRule="evenodd"
d="M8.6 5.1L5.8 7.9C5.7 8 5.6 8.05 5.45 8.05C5.3 8.05 5.2 8 5.1 7.9L3.4 6.2C3.2 6 3.2 5.7 3.4 5.5C3.6 5.3 3.9 5.3 4.1 5.5L5.45 6.85L7.9 4.4C8.1 4.2 8.4 4.2 8.6 4.4C8.8 4.6 8.8 4.9 8.6 5.1Z"
fill="white"
Expand Down
4 changes: 2 additions & 2 deletions components/Icons/SolidIcons.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
export const CalendarCheckIcon = () => (
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
<path
fill-rule="evenodd"
fillRule="evenodd"
clipRule="evenodd"
d="M13.3391 8.679L8.68579 13.3323C8.52952 13.4886 8.3176 13.5763 8.09663 13.5763C7.87566 13.5763 7.66373 13.4886 7.50746 13.3323L4.66079 10.4848C4.58342 10.4075 4.52205 10.3156 4.48018 10.2145C4.4383 10.1134 4.41675 10.0051 4.41675 9.89567C4.41675 9.78625 4.4383 9.6779 4.48018 9.57682C4.52205 9.47573 4.58342 9.38387 4.66079 9.3065C4.73816 9.22913 4.83002 9.16776 4.9311 9.12589C5.03219 9.08401 5.14054 9.06246 5.24996 9.06246C5.35938 9.06246 5.46772 9.08401 5.56881 9.12589C5.6699 9.16776 5.76176 9.22913 5.83913 9.3065L8.09663 11.564L12.1608 7.50067C12.2382 7.4233 12.33 7.36193 12.4311 7.32005C12.5322 7.27818 12.6405 7.25663 12.75 7.25663C12.8594 7.25663 12.9677 7.27818 13.0688 7.32005C13.1699 7.36193 13.2618 7.4233 13.3391 7.50067C13.4165 7.57804 13.4779 7.66989 13.5197 7.77098C13.5616 7.87207 13.5832 7.98042 13.5832 8.08984C13.5832 8.19926 13.5616 8.3076 13.5197 8.40869C13.4779 8.50978 13.4165 8.60163 13.3391 8.679ZM15.4166 2.33317H14.0583V1.49984C14.0583 1.27882 13.9705 1.06686 13.8142 0.910582C13.6579 0.754301 13.446 0.666504 13.225 0.666504C13.0039 0.666504 12.792 0.754301 12.6357 0.910582C12.4794 1.06686 12.3916 1.27882 12.3916 1.49984V2.33317H5.60829V1.49984C5.60829 1.27882 5.5205 1.06686 5.36421 0.910582C5.20793 0.754301 4.99597 0.666504 4.77496 0.666504C4.55395 0.666504 4.34198 0.754301 4.1857 0.910582C4.02942 1.06686 3.94163 1.27882 3.94163 1.49984V2.33317H2.58329C2.14127 2.33317 1.71734 2.50877 1.40478 2.82133C1.09222 3.13389 0.916626 3.55781 0.916626 3.99984V16.8332C0.916626 17.2752 1.09222 17.6991 1.40478 18.0117C1.71734 18.3242 2.14127 18.4998 2.58329 18.4998H15.4166C15.8587 18.4998 16.2826 18.3242 16.5951 18.0117C16.9077 17.6991 17.0833 17.2752 17.0833 16.8332V3.99984C17.0833 3.55781 16.9077 3.13389 16.5951 2.82133C16.2826 2.50877 15.8587 2.33317 15.4166 2.33317Z"
fill="#A0AEC0"
Expand All @@ -21,7 +21,7 @@ export const NoticeIcon = () => (
export const ClockIcon = () => (
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
<path
fill-rule="evenodd"
fillRule="evenodd"
clipRule="evenodd"
d="M9.83333 8.80083C9.83333 8.82833 9.82 8.8525 9.8175 8.87917C9.8128 8.93561 9.80133 8.99129 9.78333 9.045C9.75317 9.14465 9.70392 9.23748 9.63833 9.31833C9.60167 9.3625 9.56333 9.40167 9.51833 9.43833C9.4975 9.455 9.485 9.47917 9.4625 9.49417L5.52417 12.1192C5.34026 12.2371 5.11738 12.2782 4.90353 12.2334C4.68967 12.1887 4.50194 12.0617 4.38077 11.8799C4.2596 11.6981 4.21468 11.476 4.25568 11.2614C4.29669 11.0468 4.42033 10.8568 4.6 10.7325L8.16667 8.355V4.46333C8.16667 4.24232 8.25446 4.03036 8.41074 3.87408C8.56702 3.7178 8.77899 3.63 9 3.63C9.22101 3.63 9.43297 3.7178 9.58926 3.87408C9.74554 4.03036 9.83333 4.24232 9.83333 4.46333V8.80083V8.80083ZM9 0.25C4.1675 0.25 0.25 4.1675 0.25 9C0.25 13.8325 4.1675 17.75 9 17.75C13.8325 17.75 17.75 13.8325 17.75 9C17.75 4.1675 13.8325 0.25 9 0.25Z"
fill="#424242"
Expand Down
29 changes: 20 additions & 9 deletions components/atoms/Select.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,8 @@ interface ISelect {
setValue: DispatchType<string> | DispatchType<ActiveLocation>;
isBorder?: boolean;
type?: "location";
size: "sm" | "lg";
size: "sm" | "md" | "lg";
isEllipse?: boolean;
isFullSize?: boolean;
isActive?: boolean;
}
Expand All @@ -25,6 +26,7 @@ export default function Select({
type,
size = "sm",
isFullSize,
isEllipse,
isActive = true,
}: ISelect) {
const [value, setValue] = useState(defaultValue);
Expand All @@ -48,7 +50,9 @@ export default function Select({
const adjustWidth = () => {
if (selectRef.current) {
const textLength = selectRef.current.selectedOptions[0].text.length;
selectRef.current.style.width = `${textLength * 6.5 + 44}px`;

const addSize = size === "sm" ? 44 : size === "md" ? 60 : 0;
selectRef.current.style.width = `${textLength * 6.5 + addSize}px`;
}
};

Expand All @@ -60,32 +64,39 @@ export default function Select({
pr={size === "lg" && 4}
align="center"
fontSize={size === "sm" ? "12px" : "12px"}
pointerEvents="none"
>
<i
className={`fa-solid fa-chevron-down fa-${size === "sm" ? "xs" : "lg"}`}
className={`fa-solid fa-chevron-down fa-${size === "sm" ? "xs" : size === "md" ? "sm" : "lg"}`}
style={{ color: "var(--color-mint)" }}
/>
</Flex>
}
ref={selectRef}
focusBorderColor="#00c2b3"
size={size === "sm" ? "xs" : "lg"}
size={size === "sm" ? "xs" : size === "md" ? "md" : "lg"}
color="primary"
value={value}
onChange={onChange}
borderRadius={size === "sm" ? "9999px" : "12px"}
borderRadius={size === "sm" ? "9999px" : size === "md" ? "20px" : "12px"}
border={!isBorder ? "none" : undefined}
borderColor="var(--gray-200)"
bgColor="white"
fontSize={size === "sm" ? "11px" : "13px"}
fontWeight={500}
fontSize={size === "sm" || size === "md" ? "11px" : "13px"}
outline={size === "md" ? "1px solid var(--gray-100)" : undefined}
fontWeight={size === "sm" ? 500 : 600}
isDisabled={!isActive}
height={size === "sm" ? "24px" : "52px"}
height={size === "sm" ? "24px" : size === "md" ? "32px" : "52px"}
width={!isFullSize ? "max-content" : "100%"}
sx={{
paddingInlineStart: size === "sm" ? "8px" : "20px", // padding-left
paddingInlineStart: size === "sm" ? "8px" : size === "md" ? "16px" : "20px", // padding-left
paddingInlineEnd: "20px", // padding-right (아이콘 오른쪽에 여유 공간)
}}
_focus={{
outline: "var(--border)",
border: "var(--border)",
boxShadow: "none",
}}
>
{options.map((option) => (
<option key={option} value={option}>
Expand Down
1 change: 1 addition & 0 deletions components/molecules/groups/ButtonGroups.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@ export default function ButtonGroups({
rounded={isEllipse ? "2xl" : "md"}
leftIcon={buttonOptions?.icon}
fontSize="11px"
border={size === "sm" ? "1px solid var(--gray-100)" : undefined}
// _focus={{
// outline: "none",
// boxShadow: "none",
Expand Down
83 changes: 48 additions & 35 deletions constants/serviceConstants/studyConstants/studyVoteMapConstants.ts
Original file line number Diff line number Diff line change
@@ -1,42 +1,55 @@
import { ActiveLocation } from "../../../types/services/locationTypes";

export const VOTE_LOCATION_CENTER_DOT: {
export const LOCATION_CENTER_DOT: {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
[key in ActiveLocation]: any;
[key in ActiveLocation]: { latitude: number; longitude: number };
} = {
수원: new naver.maps.LatLng(37.278992, 127.025727),
안양: new naver.maps.LatLng(37.388896, 126.950088),
양천: new naver.maps.LatLng(37.527588, 126.896441),
강남: new naver.maps.LatLng(37.503744, 127.048898),
동대문: new naver.maps.LatLng(37.58452, 127.041047),
인천: new naver.maps.LatLng(37.58452, 127.041047),
수원: { latitude: 37.278992, longitude: 127.025727 },
안양: { latitude: 37.388896, longitude: 126.950088 },
양천: { latitude: 37.527588, longitude: 126.896441 },
강남: { latitude: 37.503744, longitude: 127.048898 },
동대문: { latitude: 37.58452, longitude: 127.041047 },
인천: { latitude: 37.428334, longitude: 126.674935 },
};
export const VOTE_LOCATION_MAX_BOUND: {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
[key in ActiveLocation]: any;
// export const VOTE_LOCATION_CENTER_DOT: {
// // eslint-disable-next-line @typescript-eslint/no-explicit-any
// [key in ActiveLocation]: any;
// } = {
// 수원: new naver.maps.LatLng(37.278992, 127.025727),
// 안양: new naver.maps.LatLng(37.388896, 126.950088),
// 양천: new naver.maps.LatLng(37.527588, 126.896441),
// 강남: new naver.maps.LatLng(37.503744, 127.048898),
// 동대문: new naver.maps.LatLng(37.58452, 127.041047),
// 인천: new naver.maps.LatLng(37.58452, 127.041047),
// };
export const LOCATION_MAX_BOUNDARY: {
[key in ActiveLocation]: {
southwest: { latitude: number; longitude: number };
northeast: { latitude: number; longitude: number };
};
} = {
수원: new naver.maps.LatLngBounds(
new naver.maps.LatLng(37.22711, 126.955637),
new naver.maps.LatLng(37.357058, 127.142965),
),
안양: new naver.maps.LatLngBounds(
new naver.maps.LatLng(37.451075, 126.888074),
new naver.maps.LatLng(37.357058, 127.142965),
),
양천: new naver.maps.LatLngBounds(
new naver.maps.LatLng(37.553289, 126.819398),
new naver.maps.LatLng(37.482753, 126.941598),
),
강남: new naver.maps.LatLngBounds(
new naver.maps.LatLng(37.532565, 126.991213),
new naver.maps.LatLng(37.468873, 127.107285),
),
동대문: new naver.maps.LatLngBounds(
new naver.maps.LatLng(37.557579, 126.989614),
new naver.maps.LatLng(37.638954, 127.106856),
),
인천: new naver.maps.LatLngBounds(
new naver.maps.LatLng(37.557579, 126.989614),
new naver.maps.LatLng(37.638954, 127.106856),
),
수원: {
southwest: { latitude: 37.22711, longitude: 126.955637 },
northeast: { latitude: 37.357058, longitude: 127.142965 },
},
안양: {
southwest: { latitude: 37.451075, longitude: 126.888074 },
northeast: { latitude: 37.357058, longitude: 127.142965 },
},
양천: {
southwest: { latitude: 37.553289, longitude: 126.819398 },
northeast: { latitude: 37.482753, longitude: 126.941598 },
},
강남: {
southwest: { latitude: 37.532565, longitude: 126.991213 },
northeast: { latitude: 37.468873, longitude: 127.107285 },
},
동대문: {
southwest: { latitude: 37.557579, longitude: 126.989614 },
northeast: { latitude: 37.638954, longitude: 127.106856 },
},
인천: {
southwest: { latitude: 37.584965, longitude: 126.580845 },
northeast: { latitude: 37.341746, longitude: 126.803871 },
},
};
12 changes: 0 additions & 12 deletions hooks/realtime/mutations.ts
Original file line number Diff line number Diff line change
Expand Up @@ -30,15 +30,3 @@ export const useRealTimeAttendMutation = (
}),
options,
);
export const useRealTimeDirectAttendMutation = (
options?: MutationOptions<RealTimeBasicAttendanceProps | FormData, CollectionProps>,
) =>
useMutation<CollectionProps, AxiosError, RealTimeBasicAttendanceProps | FormData>(
(param) =>
requestServer<RealTimeBasicAttendanceProps | FormData, CollectionProps>({
method: "post",
url: `realtime/directAttendance`,
body: param,
}),
options,
);
2 changes: 1 addition & 1 deletion modals/pop-up/LocationRegisterPopUp.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ function LocationRegisterPopUp({ setIsModal }: LocationRegisterPopUp) {
};

return (
<ModalLayout title="활동 장소 등록" footerOptions={footerOptions} setIsModal={setIsModal}>
<ModalLayout title="활동 장소 등록" footerOptions={footerOptions} setIsModal={setIsModal}>
<ModalSubtitle>주로 활동하는 장소를 입력해 주세요! 이후에도 변경이 가능합니다.</ModalSubtitle>
<Box h="228px">
<SearchLocation placeInfo={placeInfo} setPlaceInfo={setPlaceInfo} isSmall={true} />
Expand Down
5 changes: 2 additions & 3 deletions pageTemplates/studyPage/StudyInfoDrawer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -120,7 +120,6 @@ function StudyInFoDrawer({ detailInfo, setDetailInfo }: StudyInFoDrawerProps) {

const onClickStudyVote = (voteTime: IStudyVoteTime) => {
// if (myStudy || myRealStudy) {
// console.log(2224);
// setVoteTime(voteTime);
// setIsAlertModal(true);
// return;
Expand All @@ -145,7 +144,7 @@ function StudyInFoDrawer({ detailInfo, setDetailInfo }: StudyInFoDrawerProps) {
// });
// }
};
console.log(24, detailInfo);


const status = detailInfo.memberStatus;

Expand Down Expand Up @@ -195,7 +194,7 @@ function StudyInFoDrawer({ detailInfo, setDetailInfo }: StudyInFoDrawerProps) {
),
children: (
<Link
href={`/study/${detailInfo.id}/${dayjsToStr(dayjs())}?private=${detailInfo.isPrivate ? "on" : "off"}`}
href={`/study/${detailInfo.id}/${dayjsToStr(dayjs())}?location=${location}`}
>
자세히 보기
</Link>
Expand Down
81 changes: 53 additions & 28 deletions pageTemplates/studyPage/StudyMapTopNav.tsx
Original file line number Diff line number Diff line change
@@ -1,22 +1,38 @@
import { Flex } from "@chakra-ui/react";
import { Box, Flex } from "@chakra-ui/react";
import { useRouter, useSearchParams } from "next/navigation";
import { useState } from "react";
import CurrentLocationBtn from "../../components/atoms/CurrentLocationBtn";
import Select from "../../components/atoms/Select";
import ButtonGroups, { ButtonOptionsProps } from "../../components/molecules/groups/ButtonGroups";
import { LOCATION_OPEN } from "../../constants/location";
import { useToast } from "../../hooks/custom/CustomToast";
import { DispatchBoolean, DispatchType } from "../../types/hooks/reactTypes";
import { ActiveLocation } from "../../types/services/locationTypes";

type LocationFilterType = "현재 위치" | "활동 장소" | "내 투표 장소";
type LocationFilterType = "현재 위치" | "활동 장소" | "스터디 장소";

const FILTER_TYPE_ARR = ["현재 위치", "주 활동 장소", "내 투표 장소"] as LocationFilterType[];
const FILTER_TYPE_ARR = ["활동 장소"] as LocationFilterType[];

const FILTER_TO_PARAM: Record<LocationFilterType, string> = {
"현재 위치": "currentPlace",
"활동 장소": "mainPlace",
"내 투표 장소": "votePlace",
"활동 장소": "mainPlace",
"스터디 장소": "votePlace",
};

interface StudyMapTopNavProps {}
interface StudyMapTopNavProps {
hasMainLocation: boolean;
location: ActiveLocation;
setLocation: DispatchType<ActiveLocation>;
setIsLocationFetch: DispatchBoolean;
}

function StudyMapTopNav({}: StudyMapTopNavProps) {
function StudyMapTopNav({
setIsLocationFetch,
location,
setLocation,
hasMainLocation,
}: StudyMapTopNavProps) {
const toast = useToast();
const router = useRouter();
const searchParams = useSearchParams();
const newSearchParams = new URLSearchParams(searchParams);
Expand All @@ -26,35 +42,44 @@ function StudyMapTopNav({}: StudyMapTopNavProps) {
// const myRealStudy = useRecoilValue(myRealStudyInfoState);

const handleNavButton = (type: LocationFilterType) => {
// if (type==="주 활동 장소"&& !mainLocation) {
// toast("warning", "등록된 활동 장소가 없습니다.");
// return;
// }
// if (type === "내 투표 장소" &&) {
// if (!myStudy && !myRealStudy) {
// toast("warning", "참여중인 장소가 없습니다.");
// return;
// }
// }
// setLocationFilterType(type);
// newSearchParams.set("category", FILTER_TO_PARAM[type]);
// router.replace(`/vote?${newSearchParams.toString()}`);
// };
if (type === "활동 장소" && !hasMainLocation) {
toast("warning", "등록된 활동 장소가 없습니다.");
return;
}
if (type === "현재 위치") {
setIsLocationFetch(true);
}

setLocationFilterType(type);
newSearchParams.set("category", FILTER_TO_PARAM[type]);
router.replace(`/studyPage?${newSearchParams.toString()}`);
};

const realButtonOptionsArr: ButtonOptionsProps[] = FILTER_TYPE_ARR.map((type) => ({
text: type,
func: () => handleNavButton(type),
}));

return (
<Flex w="100%" justify="space-between" p={5} position="absolute" top="0" left="0" zIndex={10}>
<CurrentLocationBtn onClick={() => setLocationFilterType("현재 위치")} />
<ButtonGroups
buttonOptionsArr={realButtonOptionsArr}
size="sm"
isEllipse
currentValue={locationFilterType}
/>
<CurrentLocationBtn onClick={() => handleNavButton("현재 위치")} />
<Flex>
<ButtonGroups
buttonOptionsArr={realButtonOptionsArr}
size="sm"
isEllipse
currentValue={locationFilterType}
/>
<Box ml={2}>
<Select
options={LOCATION_OPEN}
defaultValue={location}
setValue={setLocation}
type="location"
size="md"
/>
</Box>
</Flex>
</Flex>
);
}
Expand Down
Loading

0 comments on commit 5ea825f

Please sign in to comment.