[Fix] (#43) QA 추천 활동중 로그인 (#44)

* fix: 새로운 추천 시작 시 이전 활동 선택사항이 그대로 남아있음 해결 * fix: 추천 로딩 화면 수정 - 홈으로 왔을때, 로그인 상태라면 home으로 이동 - 버튼 없애기 - 텍스트 레이아웃 수정 - 추천 카드 글자수 제한 적용 (... 표시) * fix: QA 반영 * fix: QA 반영 * fix: 웹뷰 높이 고정 해제
KUSITMS-30th-TEAM-C · Nov 28, 2024 · 68ab997 · 68ab997
1 parent 2b9fbfc
commit 68ab997
Show file tree

Hide file tree

Showing 12 changed files with 66 additions and 27 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -25,6 +25,7 @@
     "react-kakao-maps-sdk": "^1.1.27",
     "swiper": "^11.1.15",
     "tailwind-merge": "^2.5.3",
+    "tailwind-scrollbar-hide": "^1.1.7",
     "zustand": "^5.0.0"
   },
   "devDependencies": {

diff --git a/src/app/activity/page.tsx b/src/app/activity/page.tsx
@@ -81,7 +81,6 @@ export default function ActivityPage() {
     }
 
     if (!startTime) {
-      // 새로운 타이머 시작
       startTime = now.toString()
       localStorage.setItem('startTime', startTime)
     }
@@ -96,18 +95,18 @@ export default function ActivityPage() {
       const remainingTimeMsRm = spareTimeMs - elapsedRm
 
       if (remainingTimeMsRm <= 0) {
-        // 시간이 다 되었을 때 처리
         setIsTimeUp(true)
-        setElapsedTime(Math.ceil(elapsed / 60000)) // 경과 시간을 분 단위로 저장
+        setElapsedTime(Math.ceil(elapsed / 60000))
         if (intervalId.current !== null) {
           clearInterval(intervalId.current)
           intervalId.current = null
         }
-      } else {
-        // 남은 시간 로그 (디버깅 용도)
-        const remainingSeconds = Math.ceil(remainingTimeMsRm / 1000)
-        console.log(`남은 시간: ${remainingSeconds}초`)
       }
+      // else {
+      //   // 남은 시간 로그 (디버깅 용도)
+      //   const remainingSeconds = Math.ceil(remainingTimeMsRm / 1000)
+      //   console.log(`남은 시간: ${remainingSeconds}초`)
+      // }
     }
 
     if (elapsed >= spareTimeMs) {
@@ -205,8 +204,6 @@ export default function ActivityPage() {
     }
   }
 
-  console.log('id', activityId)
-
   return (
     <>
       {isTimeUp ? (
@@ -274,7 +271,7 @@ export default function ActivityPage() {
             </h3>
           </div>
           <Image
-            src={`/gif/${selectedActivityData?.keyword.category || 'NATURE'}_ing.gif`}
+            src={`/gif/${selectedActivityData?.keyword.category}_ing.gif`}
             alt={selectedActivityData?.title || '활동 이미지'}
             width={390}
             height={390}

diff --git a/src/app/home/sg-activity/components/ChoiceSuggestions.tsx b/src/app/home/sg-activity/components/ChoiceSuggestions.tsx
@@ -38,12 +38,13 @@ export default function ChoiceSuggestion({
   setSeletedActivity,
   setActivityLink,
   setPostActivityType,
+  isSuggestLoading,
+  setIsSuggestLoading,
 }: ChoiceSuggestionProps) {
   const { userInfo } = useUserInfo()
   const { nickname } = userInfo
   const { spareTime, activityType, keywords, address } = useActivityStore()
   const [responseData, setResponseData] = useState<ActivityData[]>()
-  const [isloading, setIsLoading] = useState(true)
   const activeType = getActiveType(activityType)
   const postData = {
     spareTime: parseInt(spareTime, 10),
@@ -67,7 +68,7 @@ export default function ChoiceSuggestion({
     const fetchData = async () => {
       console.log('보내는 데이터 확인', postData)
       try {
-        setIsLoading(true)
+        setIsSuggestLoading(true)
 
         const accessToken = Cookies.get('accessToken')
 
@@ -98,7 +99,7 @@ export default function ChoiceSuggestion({
       } catch (error) {
         console.error('Error sending POST request:', error)
       } finally {
-        setIsLoading(false)
+        setIsSuggestLoading(false)
       }
     }
 
@@ -122,11 +123,11 @@ export default function ChoiceSuggestion({
 
   return (
     <div>
-      {isloading ? (
+      {isSuggestLoading ? (
         <SuggestionWait nickname={nickname} keywords={keywords} />
       ) : (
         <>
-          <div>
+          <div className="max-w-390">
             <section className="w-342 mx-auto mt-50 text-center">
               <h1 className="font-semibold text-20">
                 조각조각이 {nickname} 님에게
@@ -161,10 +162,10 @@ export default function ChoiceSuggestion({
                           className="mt-10"
                         />
                         <div className="w-270 mx-auto">
-                          <p className="text-16 text-primary_foundation-30">
+                          <p className="text-16 text-primary_foundation-30 line-clamp-1">
                             {cardData.content}
                           </p>
-                          <h3 className="font-semibold text-24 text-primary_foundation-5 w-260">
+                          <h3 className="font-semibold text-24 text-primary_foundation-5 w-260 line-clamp-2">
                             {cardData.title}
                           </h3>
                         </div>
@@ -173,7 +174,7 @@ export default function ChoiceSuggestion({
                   ))}
               </Swiper>
 
-              <div className="custom-pagination relative flex justify-center mt-20 z-10" />
+              <div className="custom-pagination relative flex justify-center z-10 mt-30" />
             </section>
           </div>
           <img

diff --git a/src/app/home/sg-activity/components/SuggestionWait.tsx b/src/app/home/sg-activity/components/SuggestionWait.tsx
@@ -45,7 +45,7 @@ export default function SuggestionWait({
       <Image
         src="/gif/suggest_waiting.gif"
         alt="suggest_waiting"
-        width={390}
+        width={388}
         height={390}
         unoptimized
         priority
@@ -55,7 +55,7 @@ export default function SuggestionWait({
       <Image
         src="/images/bg-suggestchoice.png"
         alt="suggestchoice_background"
-        width={390}
+        width={388}
         height={304}
         className="absolute bottom-0 transform -translate-x-1/2"
       />

diff --git a/src/app/home/sg-activity/page.tsx b/src/app/home/sg-activity/page.tsx
@@ -24,7 +24,7 @@ export default function SuggestActivity() {
   const [selectedActivity, setSeletedActivity] = useState<ActivityData>()
   const [activityLink, setActivityLink] = useState('')
   const [postActivityType, setPostActivityType] = useState('')
-  const { spareTime, setSpareTime, address } = useActivityStore()
+  const { spareTime, setSpareTime, address, reset } = useActivityStore()
   const router = useRouter()
 
   const handleBack = () => {
@@ -76,6 +76,7 @@ export default function SuggestActivity() {
             'selectedActivity',
             JSON.stringify(seletedActivityData),
           )
+          reset()
           router.push('/activity')
         }
         nextStep = step + 1
@@ -132,6 +133,7 @@ export default function SuggestActivity() {
           <If condition={step === 5}>
             <ChoiceSuggestion
               setError={setError}
+              isSuggestLoading={isSuggestLoading}
               setIsSuggestLoading={setIsSuggestLoading}
               setText={setText}
               setSeletedActivity={setSeletedActivity}

diff --git a/src/app/home/sg-activity/types/types.ts b/src/app/home/sg-activity/types/types.ts
@@ -6,6 +6,7 @@ export interface SetErrorProps {
 }
 
 export interface ChoiceSuggestionProps {
+  isSuggestLoading: boolean
   setIsSuggestLoading: Dispatch<SetStateAction<boolean>>
   setError: Dispatch<SetStateAction<boolean>>
   setText: Dispatch<SetStateAction<string>>

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -4,6 +4,7 @@ import { GlobalErrorBoundary } from '@/react-utils/ErrorBoundary'
 import { Suspense } from 'react'
 import { QueryProvider } from '@/lib'
 import { cn } from '@/util'
+import MobileWrapper from '@/components/MobileWrapper/MobileWrapper'
 import { pretendard, wavvepado } from '../../public/fonts'
 
 export const metadata: Metadata = {
@@ -21,7 +22,9 @@ export default function RootLayout({
       <body className={cn(pretendard.variable, wavvepado.variable)}>
         <GlobalErrorBoundary renderFallback={<div>에러가 발생했어요 !</div>}>
           <Suspense fallback={<div>로딩 중입니다...</div>}>
-            <QueryProvider>{children}</QueryProvider>
+            <QueryProvider>
+              <MobileWrapper>{children}</MobileWrapper>
+            </QueryProvider>
           </Suspense>
         </GlobalErrorBoundary>
       </body>

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,6 +1,7 @@
 'use client'
 
 import { useEffect, useState } from 'react'
+import { useRouter } from 'next/navigation'
 import { motion } from 'framer-motion'
 import Image from 'next/image'
 import SplashLogoNew from '@/components/Icons/SplashLogoNew'
@@ -10,8 +11,14 @@ import OauthBtn from '@/components/Oauth/OauthBtn'
 export default function Home() {
   const [isSplash, setIsSplash] = useState(true)
   const [logoColor, setlogoColor] = useState('white')
+  const { push } = useRouter()
 
   useEffect(() => {
+    const userInfo = localStorage.getItem('userInfo')
+    if (userInfo) {
+      push('/home')
+    }
+
     const timer = setTimeout(() => {
       setIsSplash(false)
     }, 1200)
@@ -27,7 +34,7 @@ export default function Home() {
   }, [])
 
   return (
-    <div className="flex justify-center items-center h-screen">
+    <div className="flex justify-center items-center">
       <motion.div
         className="relative w-full h-full bg-primary_foundation-100"
         initial={{ opacity: 1 }}

diff --git a/src/components/MobileWrapper/MobileWrapper.tsx b/src/components/MobileWrapper/MobileWrapper.tsx
@@ -0,0 +1,17 @@
+import { ReactNode } from 'react'
+import SplashLogoNew from '../Icons/SplashLogoNew'
+
+export default function MobileWrapper({ children }: { children: ReactNode }) {
+  return (
+    <div className="flex justify-center h-[100vh]">
+      <aside className="hidden min-w-380 mr-[5%] min-[800px]:block">
+        <div className="flex flex-col h-full justify-center items-center">
+          <SplashLogoNew className="my-auto" />
+        </div>
+      </aside>
+      <div className="relative flex flex-col min-w-390 border-1 overflow-y-auto scrollbar-hide overflow-x-hidden">
+        {children}
+      </div>
+    </div>
+  )
+}
diff --git a/src/components/ui/HomeHeader.tsx b/src/components/ui/HomeHeader.tsx
@@ -18,13 +18,17 @@ export default function HomeHeader({ children, title }: HomeHeaderProps) {
     <div className="flex w-full flex-col">
       <header
         className={cn(
-          'fixed z-10 max-w-[600px] w-full font-semibold flex items-center justify-between py-10 h-52 px-24 transition-colors duration-300 font-wavvepado bg-white',
+          'fixed z-10 max-w-[388px] w-full font-semibold flex items-center justify-between py-10 h-52 px-24 transition-colors duration-300 font-wavvepado bg-white',
         )}
       >
-        <div className="flex gap-12 items-center h-32">
+        <button
+          className="flex gap-12 items-center h-32"
+          type="button"
+          onClick={() => push('/home')}
+        >
           <Logo />
           <span className="text-20 pt-3">{title}</span>
-        </div>
+        </button>
         <button
           type="button"
           onClick={() => push('/mypage')}

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -81,6 +81,6 @@ const config: Config = {
       '300': '300%',
     },
   },
-  plugins: [],
+  plugins: [require('tailwind-scrollbar-hide')],
 }
 export default config