Merge branch 'master' of https://github.com/eunji-0623/GlobalNomad in…

…to Feature-박수민
ssumai-kr · Jul 25, 2024 · 4d008be · 4d008be
2 parents 9f3eaa5 + 6e04c6d
commit 4d008be
Show file tree

Hide file tree

Showing 13 changed files with 72 additions and 26 deletions.
diff --git a/components/ActivityDetails/ActivityDetails.tsx b/components/ActivityDetails/ActivityDetails.tsx
@@ -22,12 +22,11 @@ import {
 import Spinner from '../Spinner/Spinner';
 import { userState } from '@/states/userState';
 import { useRecoilValue } from 'recoil';
-import Head from 'next/head';
-import { ShareButton } from '../ ShareButton/ShareButton';
 import { ActivityDetailsPageMeta } from '../MetaData/MetaData';
 import useDeleteActivity from '@/hooks/myActivity/useDeleteActivity';
 import { usePopup } from '@/hooks/usePopup';
 import { darkModeState } from '@/states/themeState';
+import { ShareButton } from '../ShareButton/ShareButton';
 
 export default function ActivityDetails({ id }: ActivityDetailsProps) {
   const router = useRouter();
@@ -113,7 +112,7 @@ export default function ActivityDetails({ id }: ActivityDetailsProps) {
 
   const paginatedReviews = reviewData?.reviews || [];
   const isAuthor = activityData?.userId === userData?.id;
-  const currentUrl = location.href;
+  const currentUrl = typeof window !== 'undefined' ? window.location.href : '';
 
   return (
     <>
@@ -205,18 +204,17 @@ export default function ActivityDetails({ id }: ActivityDetailsProps) {
           />
         )}
         <div className="flex gap-4 m:block m:relative">
-          <div className="max-w-[800px] mb-20 ipad-pro:w-[725px] t:w-full m:w-fit m:px-[24px]">
+          <div className="mb-20 ipad-pro:w-[725px] t:w-full m:w-full m:px-[24px]">
             <div className="border-t-2 border-var-gray3 dark:border-var-dark4 border-solid pt-10 m:pt-6" />
             <div className="flex flex-col gap-4">
               <p className="text-nomad-black dark:text-var-gray2 font-bold text-xl">
                 체험 설명
               </p>
               <textarea
-                className="h-[200px] resize-none custom-scrollbar dark:bg-var-dark1 dark:text-var-gray2 "
+                className="h-[200px] resize-none custom-scrollbar dark:bg-var-dark1 dark:text-var-gray2"
                 disabled
-              >
-                {activityData?.description}
-              </textarea>
+                value={activityData?.description || ''}
+              />
             </div>
             <div className="border-t-2 border-var-gray3 dark:border-var-dark4 border-solid my-10 m:my-6" />
             {activityData && <Map address={activityData.address} />}

diff --git a/components/Lander/BestActivities.tsx b/components/Lander/BestActivities.tsx
@@ -11,7 +11,7 @@ import {
 import { useQuery } from '@tanstack/react-query';
 import { getActivityList } from '@/pages/api/activities/apiactivities';
 import { useRouter } from 'next/router';
-import { ShareButton } from '../ ShareButton/ShareButton';
+import { ShareButton } from '../ShareButton/ShareButton';
 import { BestsSlide, BestsSlideTsize } from './BestActivitiesSlide';
 
 function BestActivity({

diff --git a/components/Lander/BestActivitiesSlide.tsx b/components/Lander/BestActivitiesSlide.tsx
@@ -1,7 +1,7 @@
 import { ActivityDetail, BestActivityProps } from './BestActivities.type';
 import Image from 'next/image';
 import StarImg from '@/public/icon/Star.svg';
-import { ShareButton } from '../ ShareButton/ShareButton';
+import { ShareButton } from '../ShareButton/ShareButton';
 import { useRouter } from 'next/router';
 import { useState } from 'react';
 import {

diff --git a/components/MyPageInput/MyPageInput.tsx b/components/MyPageInput/MyPageInput.tsx
@@ -99,7 +99,7 @@ export default function MyPageInput() {
   }
 
   return (
-    <div className="flex flex-col w-[792px] h-[564px] t:w-[429px] t:h-[556px] m:w-full m:h-full m:pb-[150px] m:px-[16px] ">
+    <div className="flex flex-col w-[792px] t:w-[429px] m:w-full m:pb-[150px] m:px-[16px] pb-14">
       <form
         className="flex flex-col gap-[24px] t:gap-[16px]"
         onSubmit={handleSubmit(onSubmit)}

diff --git a/components/ReservationListCard/ReservationListCard.tsx b/components/ReservationListCard/ReservationListCard.tsx
@@ -53,7 +53,7 @@ const ReservationListCard = ({ reservationData }: ReservationCardProps) => {
 
   return (
     <div className="h-[204px] relative flex rounded-3xl shadow-card dark:shadow-none overflow-hidden t:h-[156px] m:h-[128px]">
-      <div className="min-w-[204px] h-[204px] relative t:min-w-[156px] t:h-[156px] m:min-w-[110px] m:h-[128px]">
+      <div className="min-w-[204px] h-[204px] overflow-hidden relative t:min-w-[156px] t:h-[156px] m:min-w-[110px] m:h-[128px]">
         <Link
           href={`/activity-details/${reservationData.activity.id}`}
           className="text-[20px] font-bold mt-[8px] hover:underline"
@@ -81,7 +81,7 @@ const ReservationListCard = ({ reservationData }: ReservationCardProps) => {
         <p className="mt-[12px] text-[18px] t:text-[14px] t:mt-[5px] m:text-[12px] m:mt-[0] m:py-[2px] ">
           {reservationData.date}&nbsp;&nbsp;·&nbsp;&nbsp;
           {reservationData.startTime}~{reservationData.endTime}
-          &nbsp;&nbsp;·&nbsp;&nbsp;{reservationData.headCount}명
+          &nbsp;&nbsp;·&nbsp;{reservationData.headCount}명
         </p>
         <div className="w-full flex justify-between mt-[16px] h-[40px] items-center t:mt-[11px] m:mt-[0]">
           <p className="font-medium text-[24px] t:text-[20px] m:text-[16px]">

diff --git a/components/ ShareButton/ShareButton.tsx → components/ShareButton/ShareButton.tsx b/components/ ShareButton/ShareButton.tsx → components/ShareButton/ShareButton.tsx
diff --git a/hooks/useAuthRedirect.ts b/hooks/useAuthRedirect.ts
@@ -7,7 +7,9 @@ export default function useAuthRedirect() {
   const router = useRouter();
 
   useEffect(() => {
-    const refreshToken = localStorage.getItem('refreshToken');
+    const refreshToken =
+      localStorage.getItem('refreshToken') ||
+      sessionStorage.getItem('refreshToken');
     if (!refreshToken) {
       router.push('/login');
     }

diff --git a/hooks/useLogin.ts b/hooks/useLogin.ts
@@ -7,7 +7,11 @@ import { LoginAccess } from '@/pages/api/auth/auth';
 import INSTANCE_URL from '@/pages/api/instance';
 import useLoginState from './useLoginState';
 
-export default function useLogin() {
+interface useLoginProps {
+  isAutoLogin: boolean;
+}
+
+export default function useLogin({ isAutoLogin }: useLoginProps) {
   const { setIsLoggedIn } = useLoginState();
   const { openPopup } = usePopup();
   const postLoginMutation: UseMutationResult<
@@ -37,8 +41,13 @@ export default function useLogin() {
         `Bearer ${accessToken}`;
 
       setIsLoggedIn(true);
-      localStorage.setItem('refreshToken', refreshToken);
-      localStorage.setItem('userId', user.id);
+      if (isAutoLogin) {
+        localStorage.setItem('refreshToken', refreshToken);
+        localStorage.setItem('userId', user.id);
+      } else {
+        sessionStorage.setItem('refreshToken', refreshToken);
+        sessionStorage.setItem('userId', user.id);
+      }
     },
   });
 

diff --git a/hooks/useLogout.ts b/hooks/useLogout.ts
@@ -16,6 +16,8 @@ export default function useLogout() {
     setUserData(userDefaultState);
     localStorage.removeItem('refreshToken');
     localStorage.removeItem('userId');
+    sessionStorage.removeItem('refreshToken');
+    sessionStorage.removeItem('userId');
     setIsLoggedIn(false);
     route.push('/');
   };

diff --git a/hooks/useSilentRefresh.ts b/hooks/useSilentRefresh.ts
@@ -7,15 +7,23 @@ export default function SilentRefresh() {
   const { setIsLoggedIn } = useLoginState();
 
   useEffect(() => {
-    const refreshToken =
+    const refreshTokenInLocal =
       typeof window !== 'undefined'
         ? localStorage.getItem('refreshToken')
         : null;
-    if (refreshToken && !refreshed) {
+    if (refreshTokenInLocal && !refreshed) {
       apiRefreshToken(setIsLoggedIn).then(() => setRefreshed(!refreshed));
     }
 
-    if (!refreshToken) setIsLoggedIn(false);
+    const refreshTokenInSession =
+      typeof window !== 'undefined'
+        ? sessionStorage.getItem('refreshToken')
+        : null;
+    if (refreshTokenInSession && !refreshed) {
+      apiRefreshToken(setIsLoggedIn).then(() => setRefreshed(!refreshed));
+    }
+
+    if (!refreshTokenInLocal && !refreshTokenInSession) setIsLoggedIn(false);
   }, [refreshed]);
 
   return null;

diff --git a/hooks/useUserData.ts b/hooks/useUserData.ts
@@ -22,8 +22,13 @@ export const useUserData = () => {
   }, [userResponseData]);
 
   useEffect(() => {
-    const userId = localStorage.getItem('userId') || '';
-    if (userId) setUserId(userId);
+    let storedUserId = localStorage.getItem('userId') || '';
+    if (!storedUserId) {
+      storedUserId = sessionStorage.getItem('userId') || '';
+    }
+    if (storedUserId) {
+      setUserId(storedUserId);
+    }
   }, [userId]);
 
   return { userData, isLoading };

diff --git a/pages/api/auth/auth.ts b/pages/api/auth/auth.ts
@@ -12,7 +12,11 @@ export const LoginAccess = async (body: LoginBody): Promise<LoginResponse> => {
 export const apiRefreshToken = async (
   setIsLoggedIn: SetterOrUpdater<boolean>
 ): Promise<LoginResponse | void> => {
-  const currentrefreshToken = localStorage.getItem('refreshToken');
+  let currentrefreshToken = localStorage.getItem('refreshToken');
+  if (!currentrefreshToken) {
+    currentrefreshToken = sessionStorage.getItem('refreshToken');
+  }
+
   INSTANCE_URL.defaults.headers.common['Authorization'] =
     `Bearer ${currentrefreshToken}`;
 
@@ -23,7 +27,14 @@ export const apiRefreshToken = async (
     INSTANCE_URL.defaults.headers.common['Authorization'] =
       `Bearer ${accessToken}`;
 
-    localStorage.setItem('refreshToken', refreshToken);
+    if (localStorage.getItem('refreshToken')) {
+      localStorage.setItem('refreshToken', refreshToken);
+    }
+
+    if (sessionStorage.getItem('refreshToken')) {
+      sessionStorage.setItem('refreshToken', refreshToken);
+    }
+
     setIsLoggedIn(true);
 
     setTimeout(apiRefreshToken, JWT_EXPIRY_TIME - 60000);

diff --git a/pages/login.tsx b/pages/login.tsx
@@ -6,7 +6,7 @@ import { loginValidation } from '@/components/AuthInputBox/validation';
 import Link from 'next/link';
 import { PrimaryButton } from '@/components/Button/Button';
 import useLogin from '@/hooks/useLogin';
-import { useEffect, useMemo } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import useLoginState from '@/hooks/useLoginState';
 import { useRouter } from 'next/router';
 import { GetServerSideProps } from 'next';
@@ -30,7 +30,8 @@ export const getServerSideProps: GetServerSideProps = async () => {
 };
 
 export default function LoginPage({ OGTitle, OGUrl }: SSRMetaProps) {
-  const { postLoginMutation, isLoading } = useLogin();
+  const [isChecked, setIsChecked] = useState<boolean>(false);
+  const { postLoginMutation, isLoading } = useLogin({ isAutoLogin: isChecked });
   const { isLoggedIn } = useLoginState();
   const [darkMode, setDarkMode] = useRecoilState(darkModeState);
   const router = useRouter();
@@ -47,6 +48,10 @@ export default function LoginPage({ OGTitle, OGUrl }: SSRMetaProps) {
 
   const handleKeyDown = useEnterSubmit(handleSubmit(onSubmit));
 
+  const handleCheckboxChange = () => {
+    setIsChecked(!isChecked);
+  };
+
   const { email, password } = watch();
   const isNotError = !errors.email && !errors.password;
   const isFormFilled = !!email && !!password;
@@ -94,6 +99,12 @@ export default function LoginPage({ OGTitle, OGUrl }: SSRMetaProps) {
             errors={errors}
             eyeIconActive={true}
           />
+          <AuthInputBox
+            type="checkbox"
+            placeholder="자동 로그인"
+            name="agreement"
+            handleChange={handleCheckboxChange}
+          />
           <PrimaryButton
             size="large"
             style={IsAllFieldsValid ? 'enabled' : 'disabled'}