Merge pull request #115 from capstone-maru/dev

release: v0.11.1
capstone-maru · May 30, 2024 · 572b1a5 · 572b1a5
2 parents 4b5476f + 11488e9
commit 572b1a5
Show file tree

Hide file tree

Showing 13 changed files with 869 additions and 427 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -52,7 +52,7 @@
       }
     ],
     "no-empty-pattern": ["warn", { "allowObjectPatternsAsParameters": true }],
-    "@typescript-eslint/no-unused-vars": "error",
+    "@typescript-eslint/no-unused-vars": "warn",
     "@typescript-eslint/no-floating-promises": "off",
     "@typescript-eslint/explicit-function-return-type": "off",
     "@typescript-eslint/no-empty-function": ["off", {}],

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "maru",
-  "version": "0.10.1",
+  "version": "0.11.1",
   "private": true,
   "scripts": {
     "dev": "next dev",
@@ -14,7 +14,7 @@
     "@tanstack/react-query": "^5.25.0",
     "@tanstack/react-query-devtools": "^5.25.0",
     "axios": "^1.6.7",
-    "next": "14.1.1",
+    "next": "14.2.3",
     "react": "^18",
     "react-dom": "^18",
     "react-redux": "^9.1.0",

diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
@@ -0,0 +1,5 @@
+import { ErrorPage } from './pages';
+
+export default function NotFoundPage() {
+  return <ErrorPage />;
+}
diff --git a/src/app/pages/main-page.tsx b/src/app/pages/main-page.tsx
@@ -1,13 +1,15 @@
 'use client';
 
 import Link from 'next/link';
+import { useRouter } from 'next/navigation';
 import { useEffect, useRef, useState } from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
 import styled from 'styled-components';
 
-import { CircularButton } from '@/components';
+import { CircularButton, CircularProfileImage } from '@/components';
 import { UserCard } from '@/components/main-page';
 import { useAuthValue } from '@/features/auth';
-import { getGeolocation } from '@/features/geocoding';
+import { fromAddrToCoord, getGeolocation } from '@/features/geocoding';
 import { useRecommendMates } from '@/features/profile';
 
 const styles = {
@@ -97,6 +99,36 @@ const styles = {
   `,
 };
 
+function Marker({
+  nickname,
+  profileImage,
+  score,
+}: {
+  score: number;
+  profileImage: string;
+  nickname: string;
+}) {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        gap: '0.75rem',
+        scale: 0.75,
+      }}
+    >
+      <CircularProfileImage
+        diameter={100}
+        percentage={score}
+        url={profileImage}
+        hideScore={false}
+      />
+      <p>{nickname}</p>
+    </div>
+  );
+}
+
 export function MainPage() {
   const auth = useAuthValue();
 
@@ -109,6 +141,8 @@ export function MainPage() {
 
   const scrollRef = useRef<HTMLDivElement>(null);
 
+  const router = useRouter();
+
   const handleScrollRight = () => {
     if (scrollRef.current !== null) {
       scrollRef.current.scrollBy({ left: 300, behavior: 'smooth' });
@@ -143,6 +177,85 @@ export function MainPage() {
     });
   }, []);
 
+  const [createdMarkers, setCreatedMarkers] = useState<naver.maps.Marker[]>([]);
+
+  useEffect(() => {
+    if (map == null) return;
+
+    recommendationMates?.data.forEach(mate => {
+      fromAddrToCoord({ query: mate.location }).then(res => {
+        const address = res.shift();
+        if (address == null) return;
+
+        const spot = new naver.maps.LatLng(+address.y, +address.x);
+        const marker = new naver.maps.Marker({
+          position: spot,
+          map,
+          icon: {
+            content: renderToStaticMarkup(
+              <Marker
+                nickname={mate.nickname}
+                profileImage={mate.profileImageUrl}
+                score={mate.score}
+              />,
+            ),
+          },
+        });
+
+        marker.addListener('click', () => {
+          router.push(`/profile/${mate.memberId}`);
+        });
+
+        setCreatedMarkers(prev => prev.concat(marker));
+      });
+    });
+  }, [map, recommendationMates?.data, router]);
+
+  useEffect(() => {
+    if (map == null) return () => {};
+
+    const showMarker = (
+      targetMap: naver.maps.Map,
+      marker: naver.maps.Marker,
+    ) => {
+      if (marker.getMap() != null) return;
+      marker.setMap(targetMap);
+    };
+
+    const hideMarker = (marker: naver.maps.Marker) => {
+      if (marker.getMap() == null) return;
+      marker.setMap(null);
+    };
+
+    const updateMarkers = (
+      targetMap: naver.maps.Map | null,
+      markers: naver.maps.Marker[],
+    ) => {
+      if (targetMap == null) return;
+
+      const mapBounds = targetMap.getBounds();
+      let marker: naver.maps.Marker, position;
+
+      for (let i = 0; i < markers.length; i += 1) {
+        marker = markers[i];
+        position = marker.getPosition();
+
+        if (mapBounds.hasPoint(position)) {
+          showMarker(targetMap, marker);
+        } else {
+          hideMarker(marker);
+        }
+      }
+    };
+
+    const MoveEventListner = naver.maps.Event.addListener(map, 'idle', () => {
+      updateMarkers(map, createdMarkers);
+    });
+    return () => {
+      naver.maps.Event.removeListener(MoveEventListner);
+    };
+  }, [createdMarkers, map]);
+
   return (
     <styles.container>
       <styles.map id="map">
@@ -174,13 +287,17 @@ export function MainPage() {
                     nickname,
                     location,
                     profileImageUrl,
+                    options,
                   }) => (
                     <Link href={`/profile/${memberId}`} key={memberId}>
                       <UserCard
                         name={nickname}
                         percentage={score}
                         profileImage={profileImageUrl}
                         location={location}
+                        smoking={options.smoking}
+                        roomSharingOption={options.roomSharingOption}
+                        mateAge={options.mateAge}
                         hideScore={false}
                       />
                     </Link>

diff --git a/src/app/pages/mobile/mobile-main-page.tsx b/src/app/pages/mobile/mobile-main-page.tsx
@@ -1,12 +1,15 @@
 'use client';
 
 import Link from 'next/link';
+import { useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
 import styled from 'styled-components';
 
+import { CircularProfileImage } from '@/components';
 import { UserCard } from '@/components/main-page';
 import { useAuthValue } from '@/features/auth';
-import { getGeolocation } from '@/features/geocoding';
+import { fromAddrToCoord, getGeolocation } from '@/features/geocoding';
 import { useRecommendMates } from '@/features/profile';
 
 const styles = {
@@ -103,6 +106,36 @@ const styles = {
   `,
 };
 
+function Marker({
+  nickname,
+  profileImage,
+  score,
+}: {
+  score: number;
+  profileImage: string;
+  nickname: string;
+}) {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        gap: '0.75rem',
+        scale: 0.75,
+      }}
+    >
+      <CircularProfileImage
+        diameter={100}
+        percentage={score}
+        url={profileImage}
+        hideScore={false}
+      />
+      <p>{nickname}</p>
+    </div>
+  );
+}
+
 export function MobileMainPage() {
   const auth = useAuthValue();
 
@@ -113,6 +146,8 @@ export function MobileMainPage() {
 
   const [map, setMap] = useState<naver.maps.Map | null>(null);
 
+  const router = useRouter();
+
   useEffect(() => {
     getGeolocation({
       onSuccess: position => {
@@ -135,6 +170,85 @@ export function MobileMainPage() {
     });
   }, []);
 
+  const [createdMarkers, setCreatedMarkers] = useState<naver.maps.Marker[]>([]);
+
+  useEffect(() => {
+    if (map == null) return;
+
+    recommendationMates?.data.forEach(mate => {
+      fromAddrToCoord({ query: mate.location }).then(res => {
+        const address = res.shift();
+        if (address == null) return;
+
+        const spot = new naver.maps.LatLng(+address.y, +address.x);
+        const marker = new naver.maps.Marker({
+          position: spot,
+          map,
+          icon: {
+            content: renderToStaticMarkup(
+              <Marker
+                nickname={mate.nickname}
+                profileImage={mate.profileImageUrl}
+                score={mate.score}
+              />,
+            ),
+          },
+        });
+
+        marker.addListener('click', () => {
+          router.push(`/profile/${mate.memberId}`);
+        });
+
+        setCreatedMarkers(prev => prev.concat(marker));
+      });
+    });
+  }, [map, recommendationMates?.data, router]);
+
+  useEffect(() => {
+    if (map == null) return () => {};
+
+    const showMarker = (
+      targetMap: naver.maps.Map,
+      marker: naver.maps.Marker,
+    ) => {
+      if (marker.getMap() != null) return;
+      marker.setMap(targetMap);
+    };
+
+    const hideMarker = (marker: naver.maps.Marker) => {
+      if (marker.getMap() == null) return;
+      marker.setMap(null);
+    };
+
+    const updateMarkers = (
+      targetMap: naver.maps.Map | null,
+      markers: naver.maps.Marker[],
+    ) => {
+      if (targetMap == null) return;
+
+      const mapBounds = targetMap.getBounds();
+      let marker: naver.maps.Marker, position;
+
+      for (let i = 0; i < markers.length; i += 1) {
+        marker = markers[i];
+        position = marker.getPosition();
+
+        if (mapBounds.hasPoint(position)) {
+          showMarker(targetMap, marker);
+        } else {
+          hideMarker(marker);
+        }
+      }
+    };
+
+    const MoveEventListner = naver.maps.Event.addListener(map, 'idle', () => {
+      updateMarkers(map, createdMarkers);
+    });
+    return () => {
+      naver.maps.Event.removeListener(MoveEventListner);
+    };
+  }, [createdMarkers, map]);
+
   return (
     <styles.container>
       <styles.map id="map">
@@ -153,13 +267,23 @@ export function MobileMainPage() {
         recommendationMates.data.length > 0 ? (
           <styles.mateRecommendation>
             {recommendationMates.data.map(
-              ({ memberId, score, nickname, location, profileImageUrl }) => (
+              ({
+                memberId,
+                score,
+                nickname,
+                location,
+                profileImageUrl,
+                options,
+              }) => (
                 <Link href={`/profile/${memberId}`} key={memberId}>
                   <UserCard
                     name={nickname}
                     percentage={score}
                     profileImage={profileImageUrl}
                     location={location}
+                    smoking={options.smoking}
+                    roomSharingOption={options.roomSharingOption}
+                    mateAge={options.mateAge}
                     hideScore={false}
                   />
                 </Link>