Skip to content

Commit

Permalink
[feature] 모핑 몰래보기 추가
Browse files Browse the repository at this point in the history
  • Loading branch information
@choihooo
choihooo committed Nov 23, 2024
1 parent 992d3cd commit 12585c1
Show file tree
Hide file tree
Showing 8 changed files with 276 additions and 88 deletions.
2 changes: 1 addition & 1 deletion fe/public/pin/recommend.svg → fe/public/pin/.svg
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,5 +3,5 @@
<rect x="3" y="3" width="22" height="22" rx="2" fill="#3A91EA" stroke="black" stroke-width="2"/>
<path d="M14 6.08203L15.4678 7.50201L17.49 7.21599L17.8428 9.22755L19.6469 10.1847L18.75 12.0195L19.6469 13.8543L17.8428 14.8115L17.49 16.8231L15.4678 16.5371L14 17.957L12.5322 16.5371L10.51 16.8231L10.1572 14.8115L8.3531 13.8543L9.25 12.0195L8.3531 10.1847L10.1572 9.22755L10.51 7.21599L12.5322 7.50201L14 6.08203Z" fill="black" stroke="black" stroke-width="1.58333" stroke-linejoin="bevel"/>
<path d="M16.375 16.373V21.9147L14 19.9355L11.625 21.9147V16.373" stroke="black" stroke-width="1.58333" stroke-linejoin="bevel"/>
<path d="M12.021 14.1361V10.1777L14.0002 12.2888L15.9793 10.1777V14.1361" stroke="#3A91EA" stroke-width="1.2" stroke-linejoin="bevel"/>
<path d="M12.0215 14.1361V10.1777L14.0007 12.2888L15.9798 10.1777V14.1361" stroke="#3A91EA" stroke-width="1.2" stroke-linejoin="bevel"/>
</svg>
7 changes: 7 additions & 0 deletions fe/public/pin/recommendPing.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
15 changes: 15 additions & 0 deletions fe/public/profile/recommendProfile.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
208 changes: 156 additions & 52 deletions fe/src/app/event-maps/[id]/components/BottomDrawer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ interface Ping {
py: number;
url: string;
type: string;
nonMembers: NonMember[];
}

interface BottomDrawerProps {
Expand All @@ -29,6 +30,16 @@ interface BottomDrawerProps {
id: string;
}

interface RecommendPing {
iconLevel: number;
placeName: string;
sid: string;
px: number;
py: number;
url: string;
type: string;
}

const BottomDrawer: React.FC<BottomDrawerProps> = ({
nonMembers: initialNonMembers,
eventName: initialEventName,
Expand All @@ -39,8 +50,9 @@ const BottomDrawer: React.FC<BottomDrawerProps> = ({
const [nonMembers, setNonMembers] = useState<NonMember[]>(initialNonMembers);
const [allPings, setAllPings] = useState<Ping[]>([]);
const [isRecommend, setIsRecommend] = useState<boolean>(false);
const [isRecommended, setIsRecommended] = useState<boolean>(false);
const [neighborhood, setNeighborhood] = useState<string>("");
const [recommendPings, setRecommendPings] = useState([]);
const [nonRecommend, setNonRecommend] = useState<boolean>(false);

const { setCustomMarkers } = useMarkerStore();
const moveToLocation = useLocationStore((state) => state.moveToLocation);
Expand All @@ -57,11 +69,47 @@ const BottomDrawer: React.FC<BottomDrawerProps> = ({
const response = await fetch(`${apiUrl}/nonmembers/pings?uuid=${id}`);
if (response.ok) {
const data = await response.json();
console.log(data);
let recommendProfile;
if (data.recommendPings && data.recommendPings.length > 0) {
setIsRecommended(true);
console.log(isRecommended);
recommendProfile = (data.recommendPings || []).map(
(ping: RecommendPing) => ({
iconLevel: 10, // Fixed icon level
nonMembers: [
{
nonMemberId: -1,
name: "추천 모핑", // Fixed name
profileSvg: "/profile/recommendProfile.svg", // Fixed profileSvg
},
],
url: ping.url,
placeName: ping.placeName,
px: ping.px,
py: ping.py,
type: ping.type,
})
);
console.log("리코멘트 프로필" + JSON.stringify(recommendProfile));
} else {
recommendProfile = []; // Default value when no recommendPings
}
setEventName(data.eventName || "");
setNonMembers(data.nonMembers || []);
setAllPings(data.pings || []);
setCustomMarkers(data.pings || []);
setNonMembers([
...(recommendProfile[0].nonMembers || []),
...(data.nonMembers || []),
]);
console.log("논멤버스" + JSON.stringify(nonMembers));
setAllPings([
...(data.pings || []), // 기존 pings
...(recommendProfile || []), // recommendProfile 추가
]);

setCustomMarkers([
...(data.pings || []), // 기존 pings
...(recommendProfile || []), // recommendProfile 추가
]);

setNeighborhood(data.neighborhood);
}
} catch (error) {
Expand All @@ -83,72 +131,124 @@ const BottomDrawer: React.FC<BottomDrawerProps> = ({
}
};

const handleRecommendClick = async () => {
const handleRecommendAllowClick = () => {
setIsRecommend(true);
};

const handleAddToMorphing = async () => {
let Km = 1.0;
let found = false;

while (Km <= 5.0) {
try {
const response = await fetch(
`${apiUrl}/nonmembers/pings/recommend?uuid=${id}&radiusInKm=${Km}`,
{ method: "GET" }
try {
const response = await fetch(
`${apiUrl}/nonmembers/pings/recommend?uuid=${id}&radiusInKm=${Km}`,
{ method: "GET" }
);
if (response.ok) {
const data = await response.json();
console.log(
`Recommended data fetched successfully for ${Km} km:`,
data
);
if (response.ok) {
const data = await response.json();
if (data.recommendPings.length == 0) {
setNonRecommend(true);
console.log("없음");
}
if (data.recommendPings && data.recommendPings.length >= 5) {
console.log(
`Recommended data fetched successfully for ${Km} km:`,
data
);

if (data.recommendPings && data.recommendPings.length >= 5) {
console.log(
"Found more than or equal to 5 pings at radius:",
Km,
"km"
);
setRecommendPings(data.recommendPings); // 데이터를 상태에 저장
found = true;
break;
}
} else {
console.error(
"Failed to fetch recommended data, status:",
response.status
"Found more than or equal to 5 pings at radius:",
Km,
"km"
);
setCustomMarkers(data.recommendPings);
found = true;
// break;
setIsRecommend(found);
}
} catch (error) {
console.error("Error fetching recommended data:", error);
} else {
console.error(
"Failed to fetch recommended data, status:",
response.status
);
}

Km += 1.0;
} catch (error) {
console.error("Error fetching recommended data:", error);
}

setIsRecommend(found); // 상태 업데이트는 검색 결과에 따라 결정
// 상태 업데이트는 검색 결과에 따라 결정
};

const handleAddToMorphing = () => {
console.log("앙");
if (recommendPings.length > 0) {
console.log("Adding selected pings to morphing...", recommendPings);
console.log("버튼눌림");
setCustomMarkers(recommendPings);
setIsRecommend(false);
} else {
console.log("No pings available to add to morphing.");
}
};
// const handleAddToMorphing = async () => {
// if (recommendPings.length > 0) {
// console.log("Adding selected pings to morphing...", recommendPings);

// // Prepare payload
// const payload = {
// uuid: id, // UUID는 필요에 따라 동적으로 설정하세요
// sids: recommendPings.map((ping) => ping.sid), // recommendPings에서 sid 추출
// };

// console.log(payload);

// try {
// // Send POST request
// const response = await fetch(`${apiUrl}/nonmembers/pings/recommend`, {
// method: "POST",
// headers: {
// "Content-Type": "application/json;charset=UTF-8",
// },
// body: JSON.stringify(payload), // Convert payload to JSON
// });
// // Handle response
// if (response.ok) {
// const result = await response.json();
// console.log("추가:" + JSON.stringify(result));

// setIsRecommend(false);
// } else {
// const errorText = await response.text(); // 서버에서 제공하는 오류 메시지 확인
// console.error(
// "Failed to add to morphing:",
// response.status,
// response.statusText,
// errorText
// );
// console.error("Failed to add to morphing:", response.statusText);
// }
// } catch (error) {
// console.error("Error adding to morphing:", error);
// }
// } else {
// console.log("No pings available to add to morphing.");
// }
// };

const handleRecommendCancle = () => {
setIsRecommend(false);
};

const handleButtonClick = (nonMemberId: number) => {
// 1. 현재 선택 상태를 확인합니다.
const isSelected = selectedButton === nonMemberId;

// 2. 선택 상태를 토글합니다.
setSelectedButton(isSelected ? null : nonMemberId);

// 3. 선택 상태에 따라 pingsToShow를 설정합니다.
const pingsToShow = isSelected
? allPings
: allPings.filter((ping) => ping.iconLevel === 1);
? [...allPings] // 선택 해제 시 모든 핑을 표시
: allPings.filter((ping) =>
ping.nonMembers.some((member) => member.nonMemberId === nonMemberId)
); // nonMemberId와 일치하는 항목만 필터링

// 4. Zustand의 customMarkers를 업데이트합니다.
setCustomMarkers(pingsToShow);

// 5. 현재 상태를 로그로 확인합니다.
console.log("선택된 버튼:", isSelected ? null : nonMemberId);
console.log("업데이트된 마커:", pingsToShow);
};

const handleAddButtonClick = () => {
router.push(`/event-maps/${id}/load-mappin`);
};
Expand Down Expand Up @@ -181,11 +281,11 @@ const BottomDrawer: React.FC<BottomDrawerProps> = ({
onClick={(event: React.MouseEvent<HTMLDivElement>) => {}}
onKeyDown={(event: React.KeyboardEvent<HTMLDivElement>) => {}}
>
{!isRecommend && (
{isRecommend === false && isRecommended === false ? (
<div className="absolute ml-[16px] left-0 -top-[60px] flex">
<RecommendButton onClick={handleRecommendClick} />
<RecommendButton onClick={handleRecommendAllowClick} />
</div>
)}
) : null}
<div className="absolute mr-[16px] right-0 -top-[60px] flex">
<LocationButton onClick={handleLocationClick} />
</div>
Expand All @@ -198,11 +298,15 @@ const BottomDrawer: React.FC<BottomDrawerProps> = ({
className="mt-[12px]"
/>
</div>

{isRecommend ? (
<RecommendActive
neighborhood={neighborhood}
handleRecommendCancle={handleRecommendCancle}
handleAddToMorphing={handleAddToMorphing}
setIsRecommend={setIsRecommend}
setNonRecommend={setNonRecommend}
nonRecommend={nonRecommend}
/>
) : (
<RecommendInActive
Expand Down
17 changes: 10 additions & 7 deletions fe/src/app/event-maps/[id]/components/MapComponent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,7 @@ export default function MapComponent({ px, py }: MapComponentProps) {
const iconSize_h = isSelected ? 40 : 32;
let textColor, textShadow;

if (level === 1) {
if (level === 1 || level === 10 || level === 10) {
textColor = "#000000"; // 검정색 글씨
textShadow =
"-1px 0px #FFFFFF, 0px 1px #FFFFFF, 1px 0px #FFFFFF, 0px -1px #FFFFFF"; // 흰색 텍스트 쉐도우 테두리
Expand All @@ -87,11 +87,13 @@ export default function MapComponent({ px, py }: MapComponentProps) {
}

return {
content: `<div style="position: relative; width: ${iconSize_w}px; height: ${iconSize_h}px; background: url('/pin/level${level}.svg') no-repeat center center; background-size: contain;">
<div style="position: absolute; top: ${iconSize_w / 1.2}px; left: 50%; transform: translateX(-50%); white-space: nowrap; color: ${textColor}; font-size: 12px; text-align: center; text-shadow: ${textShadow}; padding: 2px 4px; border-radius: 4px;">
${placeName}
</div>
</div>`,
content: `<div style="position: relative; width: ${iconSize_w}px; height: ${iconSize_h}px; background: url('${
level === 10 ? "/pin/recommendPing.svg" : `/pin/level${level}.svg`
}') no-repeat center center; background-size: contain;">
<div style="position: absolute; top: ${iconSize_w}px; left: 50%; transform: translateX(-50%); white-space: nowrap; color: ${textColor}; font-size: 12px; text-align: center; text-shadow: ${textShadow}; padding: 2px 4px; border-radius: 4px;">
${placeName}
</div>
</div>`,
size: new window.naver.maps.Size(iconSize_w, iconSize_h),
anchor: new window.naver.maps.Point(iconSize_w / 2, iconSize_h + 15), // 라벨이 포함되므로 앵커 포지션 조정
};
Expand Down Expand Up @@ -304,7 +306,7 @@ export default function MapComponent({ px, py }: MapComponentProps) {
if (mapInstanceRef.current) {
infoWindow.open(mapInstanceRef.current, marker);
}

console.log(customMarkers);
infoWindowRef.current = infoWindow;
});
});
Expand Down Expand Up @@ -334,6 +336,7 @@ export default function MapComponent({ px, py }: MapComponentProps) {
}
);
}
console.log(customMarkers);
}, [customMarkers]);

useEffect(() => {
Expand Down
Loading

0 comments on commit 12585c1

Please sign in to comment.