Fix: 첫페이지 모바일뷰 (#101)

* 모바일 뷰 작업 1차(/user, /participant, /vote/detail) * fix: prettier error * Fix: document is undefined error * Style: 출발 위치 깃발 아이콘 크기 조정 * Style: 장소 추천 높이 통일 * Feat: 푸터 링크 추가 외 2건 * Fix: 투표 페이지 data 전달 방식 변경, 선택 오류 수정, Feat: focus 시 refetch 막기 * Fix: login before page 모바일뷰
moidot · Aug 1, 2024 · 4774d72 · 4774d72
1 parent 560e4d3
commit 4774d72
Show file tree

Hide file tree

Showing 7 changed files with 60 additions and 13 deletions.
diff --git a/src/components/common/button/google/GoogleButton.tsx b/src/components/common/button/google/GoogleButton.tsx
@@ -6,13 +6,24 @@ const GoogleLoginButton = () => {
   const CLIENT_ID = process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID;
   const REDIRECT_URI = process.env.NEXT_PUBLIC_GOOGLE_REDIRECT_URI;
   const LINK = `https://accounts.google.com/o/oauth2/v2/auth?client_id=${CLIENT_ID}&redirect_uri=${REDIRECT_URI}&response_type=code&scope=email%20profile%20openid&access_type=offline`;
+  let clientWidth: any;
+
+  if (typeof document !== 'undefined') {
+    clientWidth = document.documentElement.clientWidth;
+  }
 
   function googleLogin() {
     router.push(LINK);
   }
   return (
-    <div onClick={googleLogin}>
-      <GoogleLogin />
+    <div onClick={googleLogin} className="mx-auto">
+      {clientWidth && clientWidth <= 480 ? (
+        <svg width="330" height="50" viewBox="0 0 590 70">
+          <GoogleLogin />
+        </svg>
+      ) : (
+        <GoogleLogin />
+      )}
     </div>
   );
 };

diff --git a/src/components/common/button/kakao/KakaoButton.tsx b/src/components/common/button/kakao/KakaoButton.tsx
@@ -6,13 +6,24 @@ const KakaoLoginButton = () => {
   const REST_API_KEY = 'da98b670c28171c6bae91e1f6fa272c3';
   const REDIRECT_URI = process.env.NEXT_PUBLIC_KAKAO_REDIRECT_URI;
   const LINK = `https://kauth.kakao.com/oauth/authorize?client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}&response_type=code`;
+  let clientWidth: any;
+
+  if (typeof document !== 'undefined') {
+    clientWidth = document.documentElement.clientWidth;
+  }
 
   function kakaoLogin() {
     router.push(LINK);
   }
   return (
-    <div onClick={kakaoLogin}>
-      <KakaoLogin />
+    <div onClick={kakaoLogin} className="mx-auto">
+      {clientWidth && clientWidth <= 480 ? (
+        <svg width="330" height="50" viewBox="0 0 590 70">
+          <KakaoLogin />
+        </svg>
+      ) : (
+        <KakaoLogin />
+      )}
     </div>
   );
 };

diff --git a/src/components/common/button/naver/NaverButton.tsx b/src/components/common/button/naver/NaverButton.tsx
@@ -6,13 +6,24 @@ const NaverLoginButton = () => {
   const CLIENT_ID = process.env.NEXT_PUBLIC_NAVER_CLIENT_ID;
   const REDIRECT_URI = process.env.NEXT_PUBLIC_NAVER_REDIRECT_URI;
   const LINK = `https://nid.naver.com/oauth2.0/authorize?response_type=code&client_id=${CLIENT_ID}&state=STATE_STRING&redirect_uri=${REDIRECT_URI}`;
+  let clientWidth: any;
+
+  if (typeof document !== 'undefined') {
+    clientWidth = document.documentElement.clientWidth;
+  }
 
   function naverLogin() {
     router.push(LINK);
   }
   return (
     <div onClick={naverLogin}>
-      <NaverLogin />
+      {clientWidth && clientWidth <= 480 ? (
+        <svg width="330" height="50" viewBox="0 0 590 70">
+          <NaverLogin />
+        </svg>
+      ) : (
+        <NaverLogin />
+      )}
     </div>
   );
 };

diff --git a/src/components/home/Home1.tsx b/src/components/home/Home1.tsx
@@ -5,18 +5,32 @@ import GoogleLoginButton from '../common/button/google/GoogleButton';
 import NaverLoginButton from '../common/button/naver/NaverButton';
 
 const Home1 = () => {
+  let clientWidth: any;
+
+  if (typeof document !== 'undefined') {
+    clientWidth = document.documentElement.clientWidth;
+  }
+
   return (
-    <div className="flex flex-col items-center justify-center gap-[60px] mt-[100px]">
+    <div className="w-screen flex flex-col items-center justify-center gap-[60px] tablets:mt-[100px]">
       {/* part1 : logo 및 소셜로그인 */}
-      <LogoComponent />
-      <div className="flex flex-col gap-3">
+      {clientWidth && clientWidth <= 480 ? (
+        <svg width="300" height="300" viewBox="0 0 400 150">
+          <LogoComponent />
+        </svg>
+      ) : (
+        <LogoComponent />
+      )}
+
+      <div className="flex flex-col tablets:gap-3">
         <GoogleLoginButton />
         <KakaoLoginButton />
         <NaverLoginButton />
       </div>
-      <div className="flex flex-col items-center justify-center w-[585px] h-[137px] bg-light_orange rounded-2xl gap-8">
+      {/* <LogoComponent /> */}
+      <div className="flex flex-col items-center justify-center w-screen desktop:w-[585px] h-[137px] bg-light_orange rounded-2xl gap-8">
         <div className="font-Pretendard text-main_orange text-b2 font-bold">왜 소셜로그인으로 로그인하나요?</div>
-        <div className="font-Pretendard text-font_gray text-b3 font-regular text-center">
+        <div className="font-Pretendard text-font_gray text-b3 font-regular text-center p-1">
           모이닷은 여러분들의 모임관리가 수월하도록 장소 조율 내역을 저장하기 때문에 소셜로그인이 필요합니다. 히스토리
           저장 외의 목적으로 개인정보를 수집하지 않습니다.
         </div>

diff --git a/src/components/home/Home2.tsx b/src/components/home/Home2.tsx
@@ -7,7 +7,7 @@ const Home2 = () => {
   return (
     <>
       {/* part2 : 모이닷 소개 */}
-      <div className="bg-light_orange w-screen mt-20">
+      <div className="bg-light_orange w-screen mt-20 overflow-scroll">
         <div className="flex flex-col items-center justify-center p-8">
           <div className="flex flex-col items-center justify-center gap-4">
             <Talk1 />

diff --git a/src/components/home/Home3.tsx b/src/components/home/Home3.tsx
@@ -28,7 +28,7 @@ export const swipeList: ISwipeList[] = [
 ];
 const Home3 = () => {
   return (
-    <div className="flex flex-col justify-center items-center mt-[100px]">
+    <div className="w-screen flex flex-col justify-center items-center mt-[100px] overflow-hidden">
       <SwipeText />
       <div className="carousel rounded-box">
         <div className="carousel-item">

diff --git a/src/pages/participant/myInfo/index.tsx b/src/pages/participant/myInfo/index.tsx
@@ -48,7 +48,7 @@ const MyInfoUpdatePage = () => {
         const geocoder = new window.kakao.maps.services.Geocoder();
 
         geocoder.addressSearch(userData.address, function (result: any, status: any) {
-          // 정상적으로 검색이 완료됐으면
+          // 정상적으로 검색이 완료된 경우
           if (status === window.kakao.maps.services.Status.OK) {
             setLocation({ location: userData.address, lng: result[0].x, lat: result[0].y });
           }