feat: 메인 지도, 바텀시트 추가

apps/web/package.json

@@ -21,9 +21,11 @@
     "@repo/api-client": "workspace:*",
     "@tanstack/react-query": "^5.64.0",
     "@tanstack/react-query-devtools": "^5.64.0",
+    "mapbox-gl": "^3.18.1",
     "next": "15.4.10",
     "react": "18.2.0",
-    "react-dom": "18.2.0"
+    "react-dom": "18.2.0",
+    "react-map-gl": "^8.1.0"
   },
   "devDependencies": {
     "@netlify/plugin-nextjs": "^5.15.3",

apps/web/src/app/map/mockData.ts

@@ -0,0 +1,206 @@
+import type { AlbumWithPhotosResponse, PhotoListResponse } from '@repo/api-client';
+import type { Album, AlbumDetailData } from '@/types/album.type';
+import type { MapPin } from '@/types/map.type';
+
+const center = { latitude: 37.5665, longitude: 126.978 };
+
+const photoListResponseMock: PhotoListResponse = {
+  albums: [
+    {
+      id: 1,
+      title: '한강 라이딩',
+      photoCount: 5,
+      thumbnailUrl: 'https://picsum.photos/id/1018/300/300',
+      photos: [
+        {
+          id: 101,
+          url: 'https://picsum.photos/id/1018/300/300',
+          location: {
+            latitude: center.latitude + 0.003,
+            longitude: center.longitude + 0.008,
+          },
+        },
+        {
+          id: 102,
+          url: 'https://picsum.photos/id/1020/300/300',
+          location: {
+            latitude: center.latitude + 0.006,
+            longitude: center.longitude + 0.004,
+          },
+        },
+        {
+          id: 103,
+          url: 'https://picsum.photos/id/1024/300/300',
+          location: {
+            latitude: center.latitude - 0.004,
+            longitude: center.longitude + 0.002,
+          },
+        },
+        {
+          id: 104,
+          url: 'https://picsum.photos/id/1027/300/300',
+          location: {
+            latitude: center.latitude - 0.002,
+            longitude: center.longitude - 0.006,
+          },
+        },
+        {
+          id: 105,
+          url: 'https://picsum.photos/id/1035/300/300',
+          location: {
+            latitude: center.latitude + 0.004,
+            longitude: center.longitude - 0.004,
+          },
+        },
+      ],
+    },
+    {
+      id: 2,
+      title: '카페 투어',
+      photoCount: 4,
+      thumbnailUrl: 'https://picsum.photos/id/1043/300/300',
+      photos: [
+        {
+          id: 201,
+          url: 'https://picsum.photos/id/1043/300/300',
+          location: {
+            latitude: center.latitude + 0.012,
+            longitude: center.longitude - 0.002,
+          },
+        },
+        {
+          id: 202,
+          url: 'https://picsum.photos/id/1050/300/300',
+          location: {
+            latitude: center.latitude + 0.009,
+            longitude: center.longitude - 0.007,
+          },
+        },
+        {
+          id: 203,
+          url: 'https://picsum.photos/id/1052/300/300',
+          location: {
+            latitude: center.latitude + 0.007,
+            longitude: center.longitude - 0.011,
+          },
+        },
+        {
+          id: 204,
+          url: 'https://picsum.photos/id/1060/300/300',
+          location: {
+            latitude: center.latitude + 0.011,
+            longitude: center.longitude - 0.009,
+          },
+        },
+      ],
+    },
+    {
+      id: 3,
+      title: '야경 산책',
+      photoCount: 6,
+      thumbnailUrl: 'https://picsum.photos/id/1063/300/300',
+      photos: [
+        {
+          id: 301,
+          url: 'https://picsum.photos/id/1063/300/300',
+          location: {
+            latitude: center.latitude - 0.008,
+            longitude: center.longitude + 0.01,
+          },
+        },
+        {
+          id: 302,
+          url: 'https://picsum.photos/id/1067/300/300',
+          location: {
+            latitude: center.latitude - 0.01,
+            longitude: center.longitude + 0.014,
+          },
+        },
+        {
+          id: 303,
+          url: 'https://picsum.photos/id/1070/300/300',
+          location: {
+            latitude: center.latitude - 0.012,
+            longitude: center.longitude + 0.008,
+          },
+        },
+        {
+          id: 304,
+          url: 'https://picsum.photos/id/1074/300/300',
+          location: {
+            latitude: center.latitude - 0.006,
+            longitude: center.longitude + 0.004,
+          },
+        },
+        {
+          id: 305,
+          url: 'https://picsum.photos/id/1080/300/300',
+          location: {
+            latitude: center.latitude - 0.009,
+            longitude: center.longitude + 0.001,
+          },
+        },
+        {
+          id: 306,
+          url: 'https://picsum.photos/id/1084/300/300',
+          location: {
+            latitude: center.latitude - 0.004,
+            longitude: center.longitude + 0.013,
+          },
+        },
+      ],
+    },
+  ],
+};
+
+const safeAlbums: AlbumWithPhotosResponse[] = photoListResponseMock.albums ?? [];
+
+export const albumList: Album[] = safeAlbums.map((album) => {
+  const photoList = (album.photos ?? [])
+    .filter((photo) => Boolean(photo?.url))
+    .map((photo) => ({
+      photoId: String(photo.id ?? ''),
+      src: photo.url ?? '',
+    }));
+
+  return {
+    id: album.id ?? 0,
+    title: album.title ?? '알 수 없는 앨범',
+    photoList,
+    photoCount: album.photoCount ?? photoList.length,
+  };
+});
+
+export const albumDetailById = safeAlbums.reduce<Record<number, AlbumDetailData>>(
+  (acc, album) => {
+    const albumId = album.id ?? 0;
+    acc[albumId] = {
+      id: albumId,
+      title: album.title ?? '알 수 없는 앨범',
+      photos: (album.photos ?? []).map((photo) => ({
+        id: photo.id ?? 0,
+        url: photo.url ?? '',
+      })),
+    };
+    return acc;
+  },
+  {},
+);
+
+export const mapPins: MapPin[] = safeAlbums.flatMap((album) => {
+  const albumId = album.id ?? 0;
+  return (album.photos ?? [])
+    .filter((photo) => {
+      const latitude = photo?.location?.latitude;
+      const longitude = photo?.location?.longitude;
+      return typeof latitude === 'number' && typeof longitude === 'number';
+    })
+    .map((photo) => ({
+      id: photo.id ?? 0,
+      albumId,
+      latitude: photo.location?.latitude ?? center.latitude,
+      longitude: photo.location?.longitude ?? center.longitude,
+      imageUrl: photo.url ?? album.thumbnailUrl ?? 'https://picsum.photos/200/200',
+      imageCount: 1,
+    }));
+});

apps/web/src/app/map/page.styles.ts

@@ -0,0 +1,14 @@
+import styled from '@emotion/styled';
+
+export const Wrapper = styled.div`
+  width: 100%;
+  height: 100vh;
+  position: relative;
+`;
+
+export const HeaderContainer = styled.div`
+  width: 100%;
+  position: absolute;
+  top: 0;
+  z-index: 10;
+`;

apps/web/src/app/map/page.tsx

@@ -0,0 +1,86 @@
+'use client';
+import { ExploreHeader, MenuHeader } from '@/components/header';
+import MapView from '@/components/map/MapView';
+import * as S from './page.styles';
+import { useEffect, useState } from 'react';
+import { getCurrentPosition } from '@/utils/getCurrentPosition';
+import { LocationState } from '@/types/map.type';
+import BottomSheet from '@/components/bottomSheet/BottomSheet';
+import { SheetContext } from '@/components/bottomSheet/_context/SheetContext';
+import { albumDetailById, albumList, mapPins } from './mockData';
+
+export default function MapPage() {
+  const [viewState, setViewState] = useState<LocationState | null>(null);
+  const [sheetContext, setSheetContext] = useState<SheetContext>({
+    type: 'home',
+  });
+
+  useEffect(() => {
+    const init = async () => {
+      try {
+        const pos = await getCurrentPosition();
+
+        setViewState({
+          latitude: pos.coords.latitude,
+          longitude: pos.coords.longitude,
+          zoom: 14,
+        });
+      } catch (err) {
+        console.log(err);
+        setViewState({
+          latitude: 37.5665,
+          longitude: 126.978,
+          zoom: 12,
+        });
+      }
+    };
+
+    init();
+  }, []);
+
+  const selectedAlbumId =
+    sheetContext.type === 'albumDetail' ? sheetContext.albumId : null;
+  const selectedAlbumTitle =
+    selectedAlbumId !== null ? albumDetailById[selectedAlbumId]?.title : undefined;
+
+  const handleSelectAlbum = (albumId: number) => {
+    setSheetContext({ type: 'albumDetail', albumId });
+  };
+
+  const handleCloseAlbumDetail = () => {
+    setSheetContext({ type: 'albumList' });
+  };
+
+  return (
+    <S.Wrapper>
+      <S.HeaderContainer>
+        {sheetContext.type === 'albumDetail' ? (
+          <MenuHeader
+            title={selectedAlbumTitle ?? '앨범'}
+            onClickBack={handleCloseAlbumDetail}
+          />
+        ) : (
+          <ExploreHeader
+            title="서울특별시 마포구"
+            onClickProfile={() => {}}
+            onClickExplore={() => {}}
+          />
+        )}
+      </S.HeaderContainer>
+      {viewState && (
+        <MapView
+          locationState={viewState}
+          pins={mapPins}
+          selectedAlbumId={selectedAlbumId}
+        />
+      )}
+      <BottomSheet
+        context={sheetContext}
+        albums={albumList}
+        albumDetailById={albumDetailById}
+        onChangeContext={setSheetContext}
+        onSelectAlbum={handleSelectAlbum}
+      />
+    </S.Wrapper>
+  );
+}

apps/web/src/app/photo/_contexts/PhotoContext.tsx

@@ -1,6 +1,13 @@
 'use client';
 
-import { createContext, useCallback, useContext, useMemo, useState, type ReactNode } from 'react';
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+  useState,
+  type ReactNode,
+} from 'react';
 import type { SelectedPhoto } from '../add/_types/photo';
 
 interface PhotoContextValue {

apps/web/src/app/photo/add/_hooks/usePhotoSelect.ts

@@ -35,7 +35,9 @@ export const usePhotoSelect = (options?: UsePhotoSelectOptions): UsePhotoSelectR
         setIsLoading(true);
         const photoPromises = Array.from(files).map((file) => fileToSelectedPhoto(file));
         const results = await Promise.all(photoPromises);
-        const newPhotos = results.filter((photo): photo is SelectedPhoto => photo !== null);
+        const newPhotos = results.filter(
+          (photo): photo is SelectedPhoto => photo !== null,
+        );
 
         options?.onPhotosSelected?.(newPhotos);
         setIsLoading(false);

apps/web/src/app/photo/add/_utils/extractGpsFromExif.ts

@@ -85,7 +85,7 @@ const findGpsIfdPointer = (
   dataView: DataView,
   tiffOffset: number,
   ifdOffset: number,
-  littleEndian: boolean
+  littleEndian: boolean,
 ): number | null => {
   const entries = dataView.getUint16(tiffOffset + ifdOffset, littleEndian);
 
@@ -106,7 +106,7 @@ const parseGpsIfd = (
   dataView: DataView,
   tiffOffset: number,
   gpsIfdOffset: number,
-  littleEndian: boolean
+  littleEndian: boolean,
 ): GpsCoordinates | null => {
   const entries = dataView.getUint16(tiffOffset + gpsIfdOffset, littleEndian);
 
@@ -154,7 +154,7 @@ const parseGpsIfd = (
 const parseGpsCoordinate = (
   dataView: DataView,
   offset: number,
-  littleEndian: boolean
+  littleEndian: boolean,
 ): number => {
   // GPS 좌표는 도/분/초 형식의 RATIONAL 3개로 저장됨
   const degrees = readRational(dataView, offset, littleEndian);
@@ -164,7 +164,11 @@ const parseGpsCoordinate = (
   return degrees + minutes / 60 + seconds / 3600;
 };
 
-const readRational = (dataView: DataView, offset: number, littleEndian: boolean): number => {
+const readRational = (
+  dataView: DataView,
+  offset: number,
+  littleEndian: boolean,
+): number => {
   const numerator = dataView.getUint32(offset, littleEndian);
   const denominator = dataView.getUint32(offset + 4, littleEndian);