Merge pull request #42 from ssumai-kr/Feature-박수민

Refector: 메인화면 카드 스타일 수정 및 메인화면 상태관리 수정
eunji-0623 · Jul 17, 2024 · 14b7aeb · 14b7aeb
2 parents 7ea67d2 + 45699e4
commit 14b7aeb
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 13 deletions.
diff --git a/components/Lander/AllActivities.tsx b/components/Lander/AllActivities.tsx
@@ -53,11 +53,11 @@ export function AllActivity({
             </span>
           </div>
         </div>
-        <div className="h-[70px] t:h-[50px] m:h-[30px] m:w-[160px] font-sans text-[24px] m:text-[18px] font-[600] mt-[10px]">
+        <div className="h-[70px] t:h-[30px] m:h-[20px] m:w-[160px] font-sans text-[24px] m:text-[16px] font-[600] mt-[10px] overfolow-hidden t:truncate ... m:truncate ...">
           {title}
         </div>
-        <div className="font-sans text-[28px] text-[20px] font-[700] p:mt-[0px] mt-[15px]">
-          ₩ {price.toLocaleString()}{' '}
+        <div className="font-sans text-[28px] text-[20px] m:text-[18px] font-[700] p:mt-[0px] mt-[10px]">
+          ₩{price.toLocaleString()}{' '}
           <span className="font-sans text-[16px] font-[400]">/ 인</span>
         </div>
       </div>

diff --git a/components/Lander/BestActivities.tsx b/components/Lander/BestActivities.tsx
@@ -45,7 +45,7 @@ function BestActivity({
           {rating.toFixed(1)} ({reviewCount})
         </span>
       </div>
-      <div className="font-sans text-[30px] m:text-[18px] font-[700] absolute left-[20px] bottom-[74px] m:bottom-[50px] text-white">
+      <div className="font-sans w-[320px] h-[80px] m:w-[140px] m:h-[40px] text-[30px] m:text-[16px] font-[700] absolute left-[20px] bottom-[84px] m:bottom-[50px] text-white text-ellipsis overflow-hidden leading-normal m:truncate ...">
         {title}
       </div>
       <div className="font-sans text-[20px] m:text-[16px] font-[700] absolute left-[20px] bottom-[39px] m:bottom-[24px] text-white">

diff --git a/pages/_document.tsx b/pages/_document.tsx
@@ -7,6 +7,10 @@ export default function Document() {
       <Head>
         <title>GlobalNomad</title>
         <link rel="icon" href="/favicon.ico" />
+        <link
+          rel="stylesheet"
+          href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/variable/pretendardvariable.css"
+        ></link>
         <script
           type="text/javascript"
           src={`//dapi.kakao.com/v2/maps/sdk.js?appkey=${appKey}&libraries=services,clusterer,drawing &autoload=false`}

diff --git a/states/mainPageState.tsx b/states/mainPageState.tsx
@@ -1,36 +1,43 @@
-import { ActivityDetail } from '@/components/Lander/BestActivities.type';
-import { mainPageStateProps, mainPageKategorieStateProps, mainSearchValueStateProps } from '@/components/Lander/Main.type';
+import {
+  mainPageStateProps,
+  mainPageKategorieStateProps,
+  mainSearchValueStateProps,
+} from '@/components/Lander/Main.type';
 import { atom } from 'recoil';
 import { recoilPersist } from 'recoil-persist';
 
-const { persistAtom } = recoilPersist();
+const storage = typeof window !== 'undefined' ? sessionStorage : undefined;
+
+const { persistAtom } = recoilPersist({
+  key: 'sessionStorage', // 고유한 key 값
+  storage: storage,
+});
 
 export const mainPageState = atom<mainPageStateProps>({
   key: 'mainPageState',
-  default : {
+  default: {
     currentPage: 1,
     itemsPerPage: 8,
     selectedKategorie: '',
     selectedSorted: '',
     sortedName: '',
   },
   effects_UNSTABLE: [persistAtom],
-})
-
+});
 
 export const mainPageKategorieState = atom<mainPageKategorieStateProps>({
   key: 'mainPageKategorieState',
   default: {
     KategorieName: '',
   },
   effects_UNSTABLE: [persistAtom],
-})
+});
 
 export const mainSearchValueState = atom<mainSearchValueStateProps>({
   key: 'mainSearchValueState',
   default: {
     SearchValue: '',
     currentPage: 1,
     itemsPerPage: 16,
-  }
-})
+  },
+});