Merge pull request #84 from capstone-maru/feat/mobile-layout

feat: apply mobile-layout

package.json

@@ -9,6 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@react-hook/media-query": "^1.1.1",
     "@stomp/stompjs": "^7.0.0",
     "@tanstack/react-query": "^5.25.0",
     "@tanstack/react-query-devtools": "^5.25.0",

src/app/globals.scss

@@ -7,6 +7,10 @@ body {
   min-height: 100dvh;
   min-width: 90rem;
   max-width: 100dvw;
+
+  @media (max-width: 768px) {
+    min-width: 390px;
+  }
 }
 
 * {
@@ -29,6 +33,11 @@ main {
   margin-top: 4.5rem;
   display: flex;
   justify-content: center;
+
+  @media (max-width: 768px) {
+    justify-content: flex-start;
+    main: 100vw;
+  }
 }
 
 a {

src/app/layout.tsx

@@ -5,7 +5,6 @@ import './globals.scss';
 
 import {
   AuthProvider,
-  InitialzationProvider,
   RecoilRootProvider,
   StyledComponentsRegistry,
   TanstackQueryProvider,
@@ -40,10 +39,10 @@ export default function RootLayout({
             <StyledComponentsRegistry>
               <NavigationBar />
               <AuthProvider>
-                <InitialzationProvider>
-                  <main>{children}</main>
+                <main>
+                  {children}
                   <FloatingChatting />
-                </InitialzationProvider>
+                </main>
                 <ToastProvider />
               </AuthProvider>
             </StyledComponentsRegistry>

src/app/page.tsx

@@ -1,10 +1,21 @@
 'use client';
 
 import { LandingPage, MainPage } from './pages';
+import { MobileLandingPage, MobileMainPage } from './pages/mobile';
 
 import { useAuthIsLogin } from '@/features/auth';
+import { useIsMobile } from '@/shared/mobile';
 
 export default function Home() {
   const isLogin = useAuthIsLogin();
-  return <>{isLogin ? <MainPage /> : <LandingPage />}</>;
+  const isMobile = useIsMobile();
+  return (
+    <>
+      {isLogin ? (
+        <>{isMobile ? <MobileMainPage /> : <MainPage />}</>
+      ) : (
+        <>{isMobile ? <MobileLandingPage /> : <LandingPage />}</>
+      )}
+    </>
+  );
 }

src/app/pages/mobile/index.ts

@@ -0,0 +1,8 @@
+export * from './mobile-landing-page';
+export * from './mobile-main-page';
+export * from './mobile-profile-page';
+export * from './mobile-user-input-page';
+export * from './mobile-setting-page';
+export * from './mobile-shared-posts-page';
+export * from './mobile-writing-post-page';
+export * from './mobile-shared-post-page';

src/app/pages/mobile/mobile-landing-page.tsx

@@ -0,0 +1,110 @@
+'use client';
+
+import styled from 'styled-components';
+
+const styles = {
+  container: styled.div`
+    display: flex;
+    width: 100vw;
+    height: 47.8125rem;
+    padding-bottom: 2rem;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+  `,
+  img: styled.img`
+    width: 24.375rem;
+    height: 27.125rem;
+    flex-shrink: 0;
+    object-fit: contain;
+  `,
+  description: styled.div`
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1.75rem;
+    width: 100%;
+    flex-shrink: 0;
+
+    h1 {
+      color: #000;
+
+      font-family: 'Noto Sans KR';
+      font-size: 2rem;
+      font-style: normal;
+      font-weight: 700;
+      line-height: normal;
+    }
+    p {
+      color: #000;
+
+      text-align: center;
+      font-family: 'Noto Sans KR';
+      font-size: 1.5rem;
+      font-style: normal;
+      font-weight: 500;
+      line-height: normal;
+    }
+  `,
+  loginButtons: styled.div`
+    display: flex;
+    flex-direction: column;
+    gap: 0.6875rem;
+
+    button {
+      all: unset;
+      cursor: pointer;
+      display: flex;
+      justify-content: center;
+    }
+
+    img {
+      width: 16.5625rem;
+      height: 2.6875rem;
+      flex-shrink: 0;
+      border-radius: 8px;
+      object-fit: cover;
+    }
+  `,
+  section2: styled.div`
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1rem;
+    align-self: stretch;
+  `,
+  section3: styled.div`
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 1rem;
+  `,
+};
+
+export function MobileLandingPage() {
+  return (
+    <styles.container>
+      <styles.img alt="Brazuca Date Night" src="/landing-page-image.png" />
+      <styles.description>
+        <h1>공동주거생활의 A to Z</h1>
+        <p>
+          마루에서 여러분만을 위한
+          <br /> 메이트를 만나보세요
+        </p>
+      </styles.description>
+      <styles.loginButtons>
+        <a
+          href={`${process.env.NEXT_PUBLIC_API_URL}/oauth2/authorize/kakao?redirect_uri=${process.env.NEXT_PUBLIC_CLIENT_URL}/login`}
+        >
+          <img alt="kakao" src="/kakao-login.png" />
+        </a>
+        <a
+          href={`${process.env.NEXT_PUBLIC_API_URL}/oauth2/authorize/naver?redirect_uri=${process.env.NEXT_PUBLIC_CLIENT_URL}/login`}
+        >
+          <img alt="naver" src="/naver-login.png" />
+        </a>
+      </styles.loginButtons>
+    </styles.container>
+  );
+}

src/app/pages/mobile/mobile-main-page.tsx

@@ -0,0 +1,150 @@
+'use client';
+
+import Link from 'next/link';
+import { useEffect, useState } from 'react';
+import styled from 'styled-components';
+
+import { UserCard } from '@/components/main-page';
+import { useAuthValue } from '@/features/auth';
+import { getGeolocation } from '@/features/geocoding';
+import { useRecommendationMate } from '@/features/recommendation';
+
+const styles = {
+  container: styled.div`
+    display: flex;
+    width: 100vw;
+    min-width: 390px;
+    padding-bottom: 2rem;
+    flex-direction: column;
+    align-items: center;
+  `,
+  map: styled.div`
+    width: 100%;
+    height: 50dvh;
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+
+    p {
+      color: #000;
+      font-family: 'Noto Sans KR';
+      font-size: 1.25rem;
+      font-style: normal;
+      font-weight: 700;
+      line-height: normal;
+    }
+
+    p[class~='caption'] {
+      color: #19191980;
+      font-family: 'Noto Sans KR';
+      font-size: 1rem;
+      font-style: normal;
+      font-weight: 400;
+      line-height: normal;
+    }
+  `,
+  mateRecommendationContainer: styled.div`
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+
+    margin-bottom: 2.5rem;
+  `,
+  mateRecommendationTitle: styled.div`
+    display: flex;
+    padding: 2rem 1.5rem;
+    justify-content: flex-start;
+    align-items: center;
+    align-self: stretch;
+
+    h1 {
+      color: #000;
+
+      font-family: 'Noto Sans KR';
+      font-size: 1.1875rem;
+      font-style: normal;
+      font-weight: 700;
+      line-height: normal;
+    }
+  `,
+  mateRecommendationRow: styled.div`
+    display: flex;
+    width: 100%;
+    padding: 0 1.5rem;
+    justify-content: space-between;
+    align-items: center;
+    gap: 1rem;
+  `,
+  mateRecommendation: styled.div`
+    display: flex;
+    width: 100%;
+    padding: 0.5rem 1rem;
+    align-items: center;
+    gap: 1rem 0.5rem;
+    flex-shrink: 0;
+    overflow-x: auto;
+    flex-wrap: wrap;
+  `,
+};
+
+export function MobileMainPage() {
+  const auth = useAuthValue();
+
+  const { data: recommendationMates } = useRecommendationMate({
+    memberId: auth?.user?.memberId ?? 'undefined',
+    cardType: 'mate',
+    enabled: auth?.accessToken != null && false,
+  });
+
+  const [map, setMap] = useState<naver.maps.Map | null>(null);
+
+  useEffect(() => {
+    getGeolocation({
+      onSuccess: position => {
+        const center = new naver.maps.LatLng(
+          position.coords.latitude,
+          position.coords.longitude,
+        );
+
+        setMap(
+          new naver.maps.Map('map', {
+            center,
+            disableKineticPan: false,
+            scrollWheel: false,
+          }),
+        );
+      },
+      onError: error => {
+        console.error(error);
+      },
+    });
+  }, []);
+
+  return (
+    <styles.container>
+      <styles.map id="map">
+        {map == null && (
+          <>
+            <p>지도를 불러오는 중입니다.</p>
+            <p className="caption">(위치 권한이 필요합니다)</p>
+          </>
+        )}
+      </styles.map>
+      <styles.mateRecommendationContainer>
+        <styles.mateRecommendationTitle>
+          <h1>{auth?.user?.name}님의 추천 메이트</h1>
+        </styles.mateRecommendationTitle>
+        <styles.mateRecommendation>
+          {recommendationMates?.map(({ name, similarity, userId }) => (
+            <Link key={userId} href={`/profile/${userId}`}>
+              <UserCard name={name} percentage={Math.floor(similarity * 100)} />
+            </Link>
+          ))}
+        </styles.mateRecommendation>
+      </styles.mateRecommendationContainer>
+    </styles.container>
+  );
+}