Merge branch 'main' of https://github.com/jae-hun-e/LocoMoco into ref…

…actor/#208/infowindow-to-bottomsheet

public/manifest.json

@@ -13,7 +13,7 @@
       "src": "/icon-192x192.png",
       "sizes": "192x192",
       "type": "image/png",
-      "purpose": "maskable"
+      "purpose": "any"
     },
     {
       "src": "/icon-256x256.png",

src/app/(auth)/redirect/[method]/page.tsx

@@ -60,7 +60,7 @@ const Redirect = ({ params: { method } }: { params: { method: string } }) => {
   }, [code, method, router]);
 
   return (
-    <div className="flex h-svh flex-col justify-center">
+    <div className="flex flex-col justify-center body-height">
       <p className="">Redirecting...</p>
       <ProgressBar />
     </div>

src/app/(auth)/signin/page.tsx

@@ -18,7 +18,7 @@ const Signin = () => {
   }, [router]);
 
   return (
-    <section className="mx-auto flex h-svh flex-col items-center justify-center gap-3">
+    <section className="mx-auto flex flex-col items-center justify-center gap-3 body-height">
       <div className="mb-5 text-3xl font-bold">LocoMoco</div>
       <Link
         href={`https://github.com/login/oauth/authorize?client_id=${process.env.NEXT_PUBLIC_GITHUB_CLIENT_ID}`}

src/app/(home)/_components/BottomSheet.tsx

@@ -36,8 +36,8 @@ const BottomSheet = ({ children, open, setOpen }: BottomSheetProps) => {
           목록보기
         </Button>
       </DrawerTrigger>
-      <DrawerContent className="none-overlay z-30 flex h-[70svh] flex-col gap-0 overflow-y-auto rounded-t-xl p-0 outline-none">
-        <div className="overflow-y-auto px-20pxr pb-50pxr scrollbar-hide">{children}</div>
+      <DrawerContent className="none-overlay z-10 flex h-[70svh] flex-col gap-0 overflow-y-auto rounded-t-xl p-0 outline-none">
+        <div className="overflow-y-auto px-20pxr pb-64pxr scrollbar-hide">{children}</div>
       </DrawerContent>
     </Drawer>
   );

src/app/(home)/_components/HomeMapContent.tsx

@@ -9,6 +9,7 @@ import useCreatedPositionInfo from '@/store/useCreatedPositionInfo';
 import useSearchInputValueStore from '@/store/useSearchValueStore';
 import { MGCSummary } from '@/types/MGCList';
 import createPositionMarker from '../../../../public/create-position-marker.png';
+import currentLocationMarker from '../../../../public/current-location-marker.png';
 import MGCCreateBottomSheet from './MGCCreateBottomSheet';
 import SearchBarFilter from './SearchBarFilter';
 import ThunderModal from './ThunderModal/ThunderModal';
@@ -69,7 +70,7 @@ const HomeMapContent = ({ data, handleMarkerClick, openBottomSheetAndUpdate }: H
   }, [changeCenter, location.coordinates, location.loaded, updateSearchValueAddress]);
   return (
     <>
-      <section className="absolute z-20 flex w-full flex-col items-center">
+      <section className="absolute z-40 flex w-full flex-col items-center">
         <SearchBarFilter />
       </section>
       <ClustererProvider>
@@ -82,6 +83,8 @@ const HomeMapContent = ({ data, handleMarkerClick, openBottomSheetAndUpdate }: H
       <Marker
         latitude={currentCoordinates.latitude}
         longitude={currentCoordinates.longitude}
+        markerSrc={currentLocationMarker.src}
+        markerSize={{ width: 40, height: 40 }}
       />
       <Marker
         latitude={createdPositionInfo.latitude}

src/app/(home)/_components/HomeMapFooter .tsx

@@ -14,7 +14,7 @@ const HomeMapFooter = ({ open, setOpen, MGCDataList }: HomeMapFooterProps) => {
     <>
       <div
         id="mgc-create-btn"
-        className="absolute bottom-0 right-24pxr z-40"
+        className="absolute bottom-15pxr right-24pxr z-30"
       >
         <CreateBtn />
       </div>

src/app/(home)/page.tsx

@@ -31,6 +31,19 @@ const Home = () => {
     }
   }, [data]);
 
+  useEffect(() => {
+    if ('serviceWorker' in navigator) {
+      navigator.serviceWorker
+        .register('/sw.js')
+        .then((registration) => {
+          console.log('Service Worker registered with scope:', registration.scope);
+        })
+        .catch((error) => {
+          console.error('Service Worker registration failed:', error);
+        });
+    }
+  }, []);
+
   const timerRef = useRef<NodeJS.Timeout | null>(null);
 
   const handleMouseUp = () => {

src/app/_components/A2HS.tsx

@@ -0,0 +1,13 @@
+import useA2HS from '@/hooks/useA2HS';
+
+const A2HS = () => {
+  const { deferredPrompt, installApp, clearPrompt } = useA2HS();
+
+  return deferredPrompt ? (
+    <div>
+      <button onClick={clearPrompt}>취소</button>
+      <button onClick={installApp}>홈 화면에 추가</button>
+    </div>
+  ) : null;
+};
+export default A2HS;

src/app/_components/CreateBtn.tsx

@@ -2,10 +2,12 @@ import React, { useState } from 'react';
 import { Button } from '@/components/ui/button';
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
+import useA2HS from '@/hooks/useA2HS';
 import { useThunderModalStore } from '@/store/thunderModalStore';
 import { getItem } from '@/utils/storage';
 import { LockKeyhole, Plus } from 'lucide-react';
 import { useRouter } from 'next/navigation';
+import A2HS from './A2HS';
 
 const CreateBtn = () => {
   let token: string | undefined;
@@ -14,7 +16,7 @@ const CreateBtn = () => {
   const router = useRouter();
   const [isCreateBtnOpen, setIsCreateBtnOpen] = useState(false);
   const { toggleModal } = useThunderModalStore();
-
+  const { installApp } = useA2HS();
   const handleCreateClick = (type: 'thunder' | 'normal') => {
     if (type === 'thunder') {
       toggleModal();
@@ -75,6 +77,13 @@ const CreateBtn = () => {
             >
               모각코
             </Button>
+            <Button
+              className="cursor-pointer"
+              onClick={installApp}
+            >
+              앱 설치
+            </Button>
+            <A2HS />
           </div>
         </PopoverContent>
       )}

src/app/_components/Map/ClustererProvider.tsx

@@ -22,6 +22,20 @@ const ClustererProvider = ({ minLevel, children }: ClustererProps) => {
         minLevel: minLevel ?? 6, // 클러스터 할 최소 지도 레벨
         disableClickZoom: true, // 클러스터 마커를 클릭했을 때 지도가 확대되지 않도록 설정한다
         // disableClickZoom: false, // 클러스터 마커를 클릭했을 때 지도가 확대되도록 설정한다
+        styles: [
+          {
+            width: '45px',
+            height: '45px',
+            background: '#FFB600',
+            borderRadius: '50%',
+            color: 'white',
+            textAlign: 'center',
+            fontWeight: 'bold',
+            fontSize: '0.75rem',
+            lineHeight: '46px',
+            boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.3)',
+          },
+        ],
       };
       const clusterer = mapService.createMarkerClusterer(clustererOption);
 

src/app/_components/Map/MapViewer.tsx

@@ -8,7 +8,7 @@ interface MapViewerProps {
 
 const MapViewer = forwardRef(
   ({ width, height, children }: MapViewerProps, mapRef: ForwardedRef<HTMLDivElement>) => {
-    const heightVariant = height ? `h-${height}` : 'map-height';
+    const heightVariant = height ? `h-${height}` : 'body-height';
     const widthVariant = width ? `w-${width}` : 'w-full';
 
     return (

src/app/_components/Map/Markers.tsx

@@ -1,6 +1,7 @@
 import { useCallback, useContext, useEffect } from 'react';
 import useKakaoMapService from '@/libs/kakaoMapWrapper';
 import { MGCSummary } from '@/types/MGCList';
+import createdMarker from '../../../../public/created-mgc-marker.png';
 import { clustererContext } from './ClustererProvider';
 import { MapContext } from './MapProvider';
 
@@ -22,9 +23,8 @@ const Markers = ({ mapMGCData, onMarkerClick, onClustererClick }: MarkersProps)
 
   const setMarker = useCallback(() => {
     const markersInfo: MakerInfo[] = [];
-    // TODO: 임시 아이콘 추후에 변경해야함 [24.04.21]
-    const imageSrc = 'https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/markerStar.png';
-    const imageSize = mapService.createSize(24, 35);
+    const imageSrc = createdMarker.src;
+    const imageSize = mapService.createSize(34, 39);
     const markerImage = mapService.createMarkerImage(imageSrc, imageSize);
 
     clusterer?.clear();

src/app/_components/NavBar.tsx

@@ -1,24 +1,50 @@
+'use client';
+
 import { routes } from '@/constants/routeURL';
-import { MapIcon, MessageCircleIcon, SearchIcon, UserRoundIcon } from 'lucide-react';
+import { cn } from '@/libs/utils';
 import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import ChatIcon from '../../../public/chat.svg';
+import MapIcon from '../../../public/map.svg';
+import MypageIcon from '../../../public/mypage.svg';
+import SearchIcon from '../../../public/search-icon.svg';
 
 const Navbar = () => {
+  const pathname = usePathname();
+  const css = 'flex flex-col items-center gap-3pxr';
+
   return (
     <div
       id="navbar"
-      className="fixed bottom-0 z-40 flex h-50pxr w-full items-center justify-around bg-layer-1"
+      className="fixed bottom-0 z-20 flex h-64pxr w-full items-center justify-around bg-layer-1"
     >
-      <Link href={routes.chat}>
-        <MessageCircleIcon />
+      <Link
+        href={routes.home}
+        className={cn(css, pathname === routes.home && 'text-main-1')}
+      >
+        <MapIcon />
+        <span className="text-xs">주변</span>
       </Link>
-      <Link href={routes.search}>
+      <Link
+        href={routes.search}
+        className={cn(css, pathname === routes.search && 'text-main-1')}
+      >
         <SearchIcon />
+        <span className="text-xs">검색</span>
       </Link>
-      <Link href={routes.home}>
-        <MapIcon />
+      <Link
+        href={routes.chat}
+        className={cn(css, pathname === routes.chat && 'text-main-1')}
+      >
+        <ChatIcon />
+        <span className="text-xs">채팅</span>
       </Link>
-      <Link href={routes.mypage}>
-        <UserRoundIcon />
+      <Link
+        href={routes.mypage}
+        className={cn(css, pathname === routes.mypage && 'text-main-1')}
+      >
+        <MypageIcon />
+        <span className="text-xs">MY</span>
       </Link>
     </div>
   );

src/app/_stories/Nanbar.stories.tsx

@@ -0,0 +1,62 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Navbar from '../_components/NavBar';
+
+const meta: Meta<typeof Navbar> = {
+  title: 'Components/Navbar',
+  component: Navbar,
+  parameters: {
+    nextjs: {
+      appDirectory: true,
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div className="h-50pxr">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const 지도_페이지: Story = {};
+
+지도_페이지.parameters = {
+  nextjs: {
+    navigation: {
+      pathname: '/',
+    },
+  },
+};
+
+export const 검색_페이지: Story = {};
+
+검색_페이지.parameters = {
+  nextjs: {
+    navigation: {
+      pathname: '/search',
+    },
+  },
+};
+
+export const 채팅_페이지: Story = {};
+
+채팅_페이지.parameters = {
+  nextjs: {
+    navigation: {
+      pathname: '/chat',
+    },
+  },
+};
+
+export const 마이페이지: Story = {};
+
+마이페이지.parameters = {
+  nextjs: {
+    navigation: {
+      pathname: '/mypage',
+    },
+  },
+};

src/app/chat/[mgcId]/page.tsx

@@ -114,10 +114,11 @@ const ChatRoom = ({ params: { mgcId } }: { params: { mgcId: string } }) => {
     });
     const { participants } = mgcDetail;
     if (participants.length > 1) {
-      const sender = participants.filter((e) => e === myId)[0];
+      const sender = participants.filter((e) => e.userId.toString() === myId)[0];
+      console.log(participants, myId);
       sendPush({
         data: {
-          image: sender.profileImage.path,
+          image: sender.profileImage ? sender.profileImage.path : undefined,
           title: `${sender.nickname}의 메세지`,
           body: text,
           click_action: window.location.href,

src/app/chat/_components/ChatInput.tsx

@@ -16,7 +16,7 @@ const ChatInput = forwardRef(({ sendMessage }: Props, inputRef: Ref<HTMLTextArea
   };
 
   return (
-    <div className="fixed bottom-50pxr z-50 flex w-[calc(100%-2.5rem)] flex-col justify-between gap-1 bg-layer-1">
+    <div className="fixed bottom-64pxr z-50 flex w-[calc(100%-2.5rem)] flex-col justify-between gap-1 bg-layer-1">
       <Textarea
         ref={inputRef}
         onKeyDown={handleNewLine}

src/app/chat/_components/Messages.tsx

@@ -14,7 +14,7 @@ const myId = typeof window !== 'undefined' ? getItem(localStorage, 'userId') : n
 
 const Messages = ({ talks }: Props) => {
   return (
-    <div className="flex h-[calc(100vh-288px)] flex-col gap-1">
+    <div className="flex h-[calc(100vh-292px)] flex-col gap-1">
       <NotMessage>
         {talks && talks?.length !== 0 && format(talks[0].createdAt, 'yyyy-MM-dd-E', { locale: ko })}
       </NotMessage>