홈화면 배너 처리

src/entities/common/model/constant.ts

@@ -8,8 +8,12 @@ export const DEFAULT_PAGE_PARAM = {
 };
 
 export const FilterMotionVariants = {
-  hidden: {x: '100%'},
-  visible: {x: '0%'},
+  hidden: {
+    x: '100%'
+  },
+  visible: {
+    x: '0%'
+  },
 };
 export const FilterMotionDuration = {
   duration: 0.3
@@ -20,8 +24,12 @@ export const FilterMotionStyle = {
 };
 
 export const BottomSheetMotionVaiants = {
-  hidden: { y: '100%' },
-  visible: { y: '0%' },
+  hidden: { 
+    y: '100%' 
+  },
+  visible: { 
+    y: '0%' 
+  },
 };
 export const BottomSheetMotionDuration = {
   duration: 0.3

src/entities/common/model/store.ts

@@ -0,0 +1,26 @@
+import { lens } from '@dhmk/zustand-lens';
+import { SetStateAction } from 'react';
+import { BannerInfo } from './types';
+
+export interface BannerInfoState {
+  bannerInfo: BannerInfo;
+  setBannerInfo: (update: SetStateAction<Partial<BannerInfo>>) => void;
+};
+
+const initialState = {
+  bannerInfo: {} as BannerInfo,
+} as BannerInfoState;
+
+export const createBannerInfoStore = lens<BannerInfoState>((set, get) => ({
+  ...initialState,
+  setBannerInfo: (update) => {
+    set((state: BannerInfoState) => {
+      const newBannerInfo = typeof update === 'function' ? update(state.bannerInfo) : update;
+      return {
+        ...state,
+        bannerInfo: { ...state.bannerInfo, ...newBannerInfo },
+      };
+    });
+  },
+  
+}));

src/entities/common/model/types.ts

@@ -190,4 +190,7 @@ export interface EmptyTokenAddSendCodeResponse {
 
 export interface SectionArrowProps {
   isOpen?: boolean;
-};
+};
+export interface BannerInfo {
+  HomneBottomBanner: boolean;
+};

src/entities/home/ui/auth-reguster.tsx

@@ -2,6 +2,7 @@ import { IMAGE_ROOT } from '@/shared/constants/common';
 import { AuthRegisterProps } from '../model/types';
 import { motion } from 'framer-motion';
 import { useAppBridge } from '@/hooks/useAppBridge';
+import { BottomSheetMotionDuration, BottomSheetMotionVaiants } from '@/entities/common/model/constant';
 
 export const AuthRegister = ({
   setAuthRegisterOn,
@@ -18,11 +19,6 @@ export const AuthRegister = ({
     setAuthRegisterOn(false);
   };
   
-  const variants = {
-    hidden: { y: '100%' },
-    visible: { y: '0%' },
-  };
-
   return (
     <>
       { (authRegisterOn) && 
@@ -32,8 +28,8 @@ export const AuthRegister = ({
         className="bottomsheet"
         initial="hidden"
         animate={ (authRegisterOn)? 'visible': 'hidden' }
-        variants={ variants }
-        transition={{ duration: 0.5 }}
+        variants={ BottomSheetMotionVaiants }
+        transition={ BottomSheetMotionDuration }
       >
         <div className="bottomsheet-header">
           <div className="bottomsheet-title">

src/entities/home/ui/home-bottom-banner.tsx

@@ -1,20 +1,27 @@
 import moment from 'moment';
+import { motion } from 'framer-motion';
 import { IMAGE_ROOT } from '@/shared/constants/common';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { StorageKeys } from '@/shared/constants/local-storage';
 import { setLocalStorage } from '@/shared/lib/web-view-bridge';
 import { HomeBottomBannerProps } from '../model/types';
-import { motion } from 'framer-motion';
+import { useStore } from '@/shared/model/store';
+import { BottomSheetMotionDuration, BottomSheetMotionVaiants } from '@/entities/common/model/constant';
+import { useEffect, useState } from 'react';
 
 export const HomeBottomBanner = ({
   setBottomBannerOn,
   bottomBannerOn
 }: HomeBottomBannerProps) => {
   const { navigate } = useNavigate();
+  
+  const [isFirstOpen, setIsFirstOpen] = useState<boolean>(false);
 
   const onClickToClose = () => {
-    // close
     setBottomBannerOn(false);
+    useStore.getState().BannerStore.setBannerInfo({
+      HomneBottomBanner: true
+    });
   };
   const onClickToCloseDay = () => {
     // 오늘 날짜 기록
@@ -23,22 +30,28 @@ export const HomeBottomBanner = ({
     onClickToClose();
   };
 
-  const variants = {
-    hidden: { y: '100%' },
-    visible: { y: '0%' },
-  };
+  useEffect(() => {
+    let bannerInfo = useStore.getState().BannerStore.bannerInfo;
+    if(!!bannerInfo.HomneBottomBanner){
+      setIsFirstOpen(false);
+    }
+    else{
+      setIsFirstOpen(true);
+    }
+  }, [bottomBannerOn]);
+
 
   return (
     <>
-      {bottomBannerOn &&
+      {bottomBannerOn && isFirstOpen &&
         <div className="bg-dim"></div>
       }
       <motion.div 
         className="bottomsheet banner"
         initial="hidden"
-        animate={ (bottomBannerOn)? 'visible': 'hidden' }
-        variants={ variants }
-        transition={{ duration: 0.5 }}
+        animate={ (bottomBannerOn && isFirstOpen)? 'visible': 'hidden' }
+        variants={ BottomSheetMotionVaiants }
+        transition={ BottomSheetMotionDuration }
       >
         <div className="bottomsheet-content">
           <img 

src/entities/user/model/store.ts

@@ -1,26 +1,26 @@
 import { lens } from '@dhmk/zustand-lens';
 import { SetStateAction } from 'react';
-import { UserInfo } from '@/entities/user/model/types';
-import { StorageKeys } from '~/shared/constants/local-storage';
+import { UserInfo } from './types';
+import { StorageKeys } from '@/shared/constants/local-storage';
 
 export interface UserInfoState {
-  UserInfo: UserInfo;
+  userInfo: UserInfo;
   setUserInfo: (update: SetStateAction<Partial<UserInfo>>) => void;
   resetUserInfo: () => void;
-}
+};
 
 const initialState = {
-  UserInfo: {} as UserInfo,
+  userInfo: {} as UserInfo,
 } as UserInfoState;
 
 export const createUserInfoStore = lens<UserInfoState>((set, get) => ({
   ...initialState,
   setUserInfo: (update) => {
     set((state: UserInfoState) => {
-      const newUserInfo = typeof update === 'function' ? update(state.UserInfo) : update;
+      const newUserInfo = typeof update === 'function' ? update(state.userInfo) : update;
       return {
         ...state,
-        UserInfo: { ...state.UserInfo, ...newUserInfo },
+        userInfo: { ...state.userInfo, ...newUserInfo },
       };
     });
   },

src/entities/user/model/types.ts

@@ -21,7 +21,7 @@ export interface LoginResponse {
   available2FAMethod?: Array<string>;
   requires2FA?: boolean;
 };
-export interface UserInfo extends LoginResponse{
+export interface UserInfo extends LoginResponse {
 
 }
 export interface UserParams {

src/pages/home/home-page.tsx

@@ -10,7 +10,6 @@ import { useStore } from '@/shared/model/store';
 import { StorageKeys } from '@/shared/constants/local-storage';
 import { setLocalStorage, getLocalStorage } from '@/shared/lib/web-view-bridge';
 import { useAppBridge } from '@/hooks/useAppBridge';
-
 import { HeaderType } from '@/entities/common/model/types';
 import { 
 	useSetHeaderTitle,
@@ -156,6 +155,8 @@ export const HomePage = () => {
     
     checkBottomBannerOpen();
     checkAuthRegisterOpen();
+
+    
   }, []);
   
   const setBottomBannerEffect = (mode: boolean) => {

src/pages/transaction/billing/list-page.tsx

@@ -22,7 +22,7 @@ import {
 
 export const BillingListPage = () => {
 	const { navigate } = useNavigate();
-	const userInfo = useStore((state) => state.UserStore.UserInfo);
+	const userInfo = useStore((state) => state.UserStore.userInfo);
 
 	const [sortBy, setSortBy] = useState<SortByKeys>(SortByKeys.New);
 	const [listItems, setListItems] = useState({});

src/pages/transaction/escrow/list-page.tsx

@@ -22,7 +22,7 @@ import {
 
 export const EscrowListPage = () => {
 	const { navigate } = useNavigate();
-	const userInfo = useStore((state) => state.UserStore.UserInfo);
+	const userInfo = useStore((state) => state.UserStore.userInfo);
 
 	const [sortBy, setSortBy] = useState<SortByKeys>(SortByKeys.New);
 	const [listItems, setListItems] = useState({});

src/shared/model/store.ts

@@ -3,10 +3,12 @@ import { create } from 'zustand';
 import { devtools, persist } from 'zustand/middleware';
 import { immer } from 'zustand/middleware/immer';
 import { createUserInfoStore, UserInfoState } from '@/entities/user/model/store';
+import { createBannerInfoStore, BannerInfoState } from '@/entities/common/model/store';
 import { StorageKeys } from '@/shared/constants/local-storage';
 
 export type RootStore = {
   UserStore: UserInfoState;
+  BannerStore: BannerInfoState;
 };
 export const useStore = create<RootStore>()(
   devtools(
@@ -14,6 +16,7 @@ export const useStore = create<RootStore>()(
       immer(
         withLenses(() => ({
           UserStore: createUserInfoStore,
+          BannerStore: createBannerInfoStore,
         })),
       ),
       {

src/shared/ui/assets/css/style-fix.css

@@ -75,3 +75,6 @@ main {
 .tab-pane.sub {
   padding-bottom: unset !important;
 }
+.notice-box {
+  margin-top: 1rem;
+}

src/shared/ui/menu/index.tsx

@@ -15,7 +15,7 @@ export const Menu = ({
   setMenuOn
 }: MenuProps) => {
   const { navigate } = useNavigate();
-  const userInfo = useStore((state) => state.UserStore.UserInfo);
+  const userInfo = useStore((state) => state.UserStore.userInfo);
   
   const onClickToNavigate = (path: string) => {
     onClickToMenuClose();