YAPP-Github · H0ngJu · Jan 29, 2026 · Jan 24, 2026 · Jan 24, 2026 · Jan 24, 2026
@@ -1,5 +1,5 @@
 import { defineConfig, globalIgnores } from 'eslint/config';
-import nextVitals from 'eslint-config-next/core-web-vitals';
+import nextVitals from 'eslint-config-next/core-web-vitals.js';
 import nextTs from 'eslint-config-next/typescript';
 import testingLibrary from 'eslint-plugin-testing-library';
 import jestDom from 'eslint-plugin-jest-dom';

@@ -1,6 +1,7 @@
 import type { NextConfig } from 'next';
 
-const API_BASE_URL = process.env.NEXT_PUBLIC_API_BASE_URL || 'https://develop-api.lokit.co.kr';
+const API_BASE_URL =
+  process.env.NEXT_PUBLIC_API_BASE_URL || 'https://develop-api.lokit.co.kr';
 
 const nextConfig: NextConfig = {
   turbopack: {

@@ -21,10 +21,12 @@
     "@repo/api-client": "workspace:*",
     "@tanstack/react-query": "^5.64.0",
     "@tanstack/react-query-devtools": "^5.64.0",
+    "mapbox-gl": "^3.18.1",
     "framer-motion": "^12.29.0",
     "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",

@@ -0,0 +1,7 @@
+export const DEFAULT_LOCATION = {
+  latitude: 37.5665,
+  longitude: 126.978,
+  zoom: 12,
+} as const;
+
+export const DEFAULT_ZOOM = 14;
@@ -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;
+`;
@@ -0,0 +1,108 @@
+'use client';
+import { ExploreHeader, MenuHeader } from '@/components/header';
+import MapView from '@/components/map/MapView';
+import * as S from './page.styles';
+import { useEffect, useMemo, useState } from 'react';
+import { getCurrentPosition } from '@/utils/getCurrentPosition';
+import { LocationState } from '@/types/map.type';
+import BottomSheet from '@/components/bottomSheet/BottomSheet';
+import { SHEET_CONTEXT_TYPE, SheetContext } from '@/components/bottomSheet/constants';
+import { DEFAULT_LOCATION, DEFAULT_ZOOM } from './constants';
+import { useSelectableAlbums } from '@/hooks/queries/useSelectableAlbums';
+import { useAlbumPhotos } from '@/hooks/queries/useAlbumPhotos';
+import { useMapPhotos } from '@/hooks/queries/useMapPhotos';
+import type { AlbumDetailData } from '@/types/album.type';
+
+const calculateBbox = (viewState: LocationState): string => {
+  const offset = 0.05;
+  const west = viewState.longitude - offset;
+  const south = viewState.latitude - offset;
+  const east = viewState.longitude + offset;
+  const north = viewState.latitude + offset;
+  return `${west},${south},${east},${north}`;
+};
+
+export default function MapPage() {
+  const [viewState, setViewState] = useState<LocationState | null>(null);
+  const [sheetContext, setSheetContext] = useState<SheetContext>({
+    type: SHEET_CONTEXT_TYPE.HOME,
+  });
+
+  const selectedAlbumId =
+    sheetContext.type === SHEET_CONTEXT_TYPE.ALBUM_DETAIL ? sheetContext.albumId : null;
+
+  const { albumList } = useSelectableAlbums();
+  const { albumDetail } = useAlbumPhotos(selectedAlbumId);
+  const { mapPins } = useMapPhotos({
+    zoom: viewState?.zoom ?? DEFAULT_ZOOM,
+    bbox: viewState ? calculateBbox(viewState) : '',
+    albumId: selectedAlbumId,
+  });
+
+  const albumDetailById = useMemo<Record<number, AlbumDetailData>>(() => {
+    if (!albumDetail) return {};
+    return { [albumDetail.id]: albumDetail };
+  }, [albumDetail]);
+
+  useEffect(() => {
+    const init = async () => {
+      try {
+        const pos = await getCurrentPosition();
+
+        setViewState({
+          latitude: pos.coords.latitude,
+          longitude: pos.coords.longitude,
+          zoom: DEFAULT_ZOOM,
+        });
+      } catch (err) {
+        console.log(err);
+        setViewState(DEFAULT_LOCATION);
+      }
+    };
+
+    init();
+  }, []);
+
+  const selectedAlbumTitle = albumDetail?.title;
+
+  const handleSelectAlbum = (albumId: number) => {
+    setSheetContext({ type: SHEET_CONTEXT_TYPE.ALBUM_DETAIL, albumId });
+  };
+
+  const handleCloseAlbumDetail = () => {
+    setSheetContext({ type: SHEET_CONTEXT_TYPE.ALBUM_LIST });
+  };
+
+  return (
+    <S.Wrapper>
+      <S.HeaderContainer>
+        {sheetContext.type === SHEET_CONTEXT_TYPE.ALBUM_DETAIL ? (
+          <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>
+  );
+}
@@ -33,7 +33,7 @@ const usePhotoData = ({ photoId, albumIdFromQuery }: UsePhotoDataProps) => {
 
     if (selectableAlbums?.albums && photoDetail?.albumName) {
       const matchedAlbum = selectableAlbums.albums.find(
-        (album) => album.title === photoDetail.albumName
+        (album) => album.title === photoDetail.albumName,
       );
       return matchedAlbum?.id;
     }

@@ -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';
 
 export interface PhotoRect {

@@ -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);

@@ -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);
 

@@ -11,7 +11,10 @@ import { extractGpsFromExif } from './extractGpsFromExif';
  */
 export const fileToSelectedPhoto = async (file: File): Promise<SelectedPhoto | null> => {
   try {
-    const [dataUrl, gps] = await Promise.all([readFileAsDataUrl(file), extractGpsFromExif(file)]);
+    const [dataUrl, gps] = await Promise.all([
+      readFileAsDataUrl(file),
+      extractGpsFromExif(file),
+    ]);
 
     if (!dataUrl) {
       return null;
@@ -46,7 +49,7 @@ const readFileAsDataUrl = (file: File): Promise<string | null> => {
 };
 
 const getImageDimensions = (
-  dataUrl: string
+  dataUrl: string,
 ): Promise<{ width: number; height: number } | null> => {
   return new Promise((resolve) => {
     const img = new Image();

@@ -5,12 +5,12 @@ import TextButton from '@/components/buttons/textButton/TextButton';
 import Input from '@/components/input/Input';
 import { INPUT_TYPE } from '@/components/input/Input.constants';
 import AlbumListContainer from '@/components/album-list-container/AlbumListContainer';
-import { Album } from '@/types/album.type';
+import { SelectableAlbum } from '@/types/album.type';
 import * as S from './AlbumSelectOverlay.styles';
 
 interface AlbumSelectOverlayProps {
   isOpen: boolean;
-  albums: Album[];
+  albums: SelectableAlbum[];
   isLoading: boolean;
   selectedAlbumId: string | null;
   searchQuery: string;

@@ -2,6 +2,7 @@
 
 import { useMemo, useState } from 'react';
 import { useGetSelectableAlbums } from '@repo/api-client';
+import type { SelectableAlbum } from '@/types/album.type';
 
 // TODO: 사용자 컨텍스트에서 가져오도록 수정
 const TEMP_USER_ID = 1;
@@ -19,24 +20,25 @@ const useAlbumModal = () => {
 
   const { data, isLoading } = useGetSelectableAlbums({ userId: TEMP_USER_ID });
 
-  const filteredAlbums = useMemo(
+  const filteredAlbums: SelectableAlbum[] = useMemo(
     () =>
       (data?.albums ?? [])
-        .filter((album): album is typeof album & { id: number; title: string } =>
-          album.id !== undefined && album.title !== undefined
+        .filter(
+          (album): album is typeof album & { id: number; title: string } =>
+            album.id !== undefined && album.title !== undefined,
         )
         .filter((album) =>
           searchQuery
             ? album.title.toLowerCase().includes(searchQuery.toLowerCase())
-            : true
+            : true,
         )
         .map((album) => ({
           id: String(album.id),
           title: album.title,
           thumbnail: album.thumbnailUrl ?? '',
           photoCount: album.photoCount ?? 0,
         })),
-    [data?.albums, searchQuery]
+    [data?.albums, searchQuery],
   );
 
   const openModal = () => {

@@ -9,7 +9,9 @@ const DEBOUNCE_DELAY = 100;
 
 const useLocationModal = () => {
   const [selectedLocation, setSelectedLocation] = useState<PlaceResponse | null>(null);
-  const [tempSelectedLocationId, setTempSelectedLocationId] = useState<string | null>(null);
+  const [tempSelectedLocationId, setTempSelectedLocationId] = useState<string | null>(
+    null,
+  );
   const [searchQuery, setSearchQuery] = useState('');
   const [isOpen, setIsOpen] = useState(false);
 
@@ -25,7 +27,9 @@ const useLocationModal = () => {
 
   const openModal = () => {
     setTempSelectedLocationId(
-      selectedLocation ? `${selectedLocation.longitude}-${selectedLocation.latitude}` : null
+      selectedLocation
+        ? `${selectedLocation.longitude}-${selectedLocation.latitude}`
+        : null,
     );
     setSearchQuery('');
     setIsOpen(true);
@@ -38,7 +42,7 @@ const useLocationModal = () => {
   const submitLocation = () => {
     if (tempSelectedLocationId && locations.length > 0) {
       const location = locations.find(
-        (l) => `${l.longitude}-${l.latitude}` === tempSelectedLocationId
+        (l) => `${l.longitude}-${l.latitude}` === tempSelectedLocationId,
       );
       if (location) {
         setSelectedLocation(location);

@@ -11,7 +11,7 @@ interface AddressResponse {
 
 const fetchAddress = async (
   latitude: number,
-  longitude: number
+  longitude: number,
 ): Promise<AddressResponse> => {
   const url = buildUrlWithQueryParams(`/api${API_URL.LOCATION.ADDRESS}`, {
     latitude,