diff --git a/src/entities/common/model/constant.ts b/src/entities/common/model/constant.ts index 01e899e..0318fff 100644 --- a/src/entities/common/model/constant.ts +++ b/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 diff --git a/src/entities/common/model/store.ts b/src/entities/common/model/store.ts new file mode 100644 index 0000000..6086bc0 --- /dev/null +++ b/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>) => void; +}; + +const initialState = { + bannerInfo: {} as BannerInfo, +} as BannerInfoState; + +export const createBannerInfoStore = lens((set, get) => ({ + ...initialState, + setBannerInfo: (update) => { + set((state: BannerInfoState) => { + const newBannerInfo = typeof update === 'function' ? update(state.bannerInfo) : update; + return { + ...state, + bannerInfo: { ...state.bannerInfo, ...newBannerInfo }, + }; + }); + }, + +})); diff --git a/src/entities/common/model/types.ts b/src/entities/common/model/types.ts index 8bc7307..9a88859 100644 --- a/src/entities/common/model/types.ts +++ b/src/entities/common/model/types.ts @@ -190,4 +190,7 @@ export interface EmptyTokenAddSendCodeResponse { export interface SectionArrowProps { isOpen?: boolean; -}; \ No newline at end of file +}; +export interface BannerInfo { + HomneBottomBanner: boolean; +}; diff --git a/src/entities/home/ui/auth-reguster.tsx b/src/entities/home/ui/auth-reguster.tsx index eaeeb9a..9ff2ed8 100644 --- a/src/entities/home/ui/auth-reguster.tsx +++ b/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 } >
diff --git a/src/entities/home/ui/home-bottom-banner.tsx b/src/entities/home/ui/home-bottom-banner.tsx index 64870d8..2cfcd13 100644 --- a/src/entities/home/ui/home-bottom-banner.tsx +++ b/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(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 &&
}
>) => void; resetUserInfo: () => void; -} +}; const initialState = { - UserInfo: {} as UserInfo, + userInfo: {} as UserInfo, } as UserInfoState; export const createUserInfoStore = lens((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 }, }; }); }, diff --git a/src/entities/user/model/types.ts b/src/entities/user/model/types.ts index b0f08bc..66d3a79 100644 --- a/src/entities/user/model/types.ts +++ b/src/entities/user/model/types.ts @@ -21,7 +21,7 @@ export interface LoginResponse { available2FAMethod?: Array; requires2FA?: boolean; }; -export interface UserInfo extends LoginResponse{ +export interface UserInfo extends LoginResponse { } export interface UserParams { diff --git a/src/pages/home/home-page.tsx b/src/pages/home/home-page.tsx index 4ed6e4e..6de0250 100644 --- a/src/pages/home/home-page.tsx +++ b/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) => { diff --git a/src/pages/transaction/billing/list-page.tsx b/src/pages/transaction/billing/list-page.tsx index 5e70602..277e74d 100644 --- a/src/pages/transaction/billing/list-page.tsx +++ b/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.New); const [listItems, setListItems] = useState({}); diff --git a/src/pages/transaction/escrow/list-page.tsx b/src/pages/transaction/escrow/list-page.tsx index 89288f3..fe345bc 100644 --- a/src/pages/transaction/escrow/list-page.tsx +++ b/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.New); const [listItems, setListItems] = useState({}); diff --git a/src/shared/model/store.ts b/src/shared/model/store.ts index 0d6445b..ca57464 100644 --- a/src/shared/model/store.ts +++ b/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()( devtools( @@ -14,6 +16,7 @@ export const useStore = create()( immer( withLenses(() => ({ UserStore: createUserInfoStore, + BannerStore: createBannerInfoStore, })), ), { diff --git a/src/shared/ui/assets/css/style-fix.css b/src/shared/ui/assets/css/style-fix.css index 03eac0f..4268767 100644 --- a/src/shared/ui/assets/css/style-fix.css +++ b/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; +} \ No newline at end of file diff --git a/src/shared/ui/menu/index.tsx b/src/shared/ui/menu/index.tsx index ea611a1..cdba423 100644 --- a/src/shared/ui/menu/index.tsx +++ b/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();