From 31a1d1c7f7317ff51fe861cd35aaf1cfe5dc5f94 Mon Sep 17 00:00:00 2001 From: Park Nayoung <139189221+im-na0@users.noreply.github.com> Date: Sun, 28 Jan 2024 03:51:06 +0900 Subject: [PATCH 01/12] =?UTF-8?q?feat:=20=ED=88=B4=ED=8C=81=201=EC=9D=BC?= =?UTF-8?q?=20=EB=8F=99=EC=95=88=20=EC=88=A8=EA=B9=80=EC=B2=98=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../layout/navBottom/NavBottom.style.ts | 2 +- src/components/layout/navBottom/NavBottom.tsx | 10 +++++---- src/hooks/common/useTooltip.ts | 21 ++++++++++++++++++ src/utils/a2hs.ts | 5 ----- src/utils/tooltip.ts | 22 +++++++++++++++++++ 5 files changed, 50 insertions(+), 10 deletions(-) create mode 100644 src/hooks/common/useTooltip.ts create mode 100644 src/utils/tooltip.ts diff --git a/src/components/layout/navBottom/NavBottom.style.ts b/src/components/layout/navBottom/NavBottom.style.ts index c16a078f..486b92f7 100644 --- a/src/components/layout/navBottom/NavBottom.style.ts +++ b/src/components/layout/navBottom/NavBottom.style.ts @@ -13,7 +13,7 @@ export const BottomNavContainer = styled.section<{ $isMobile: boolean }>` bottom: 0; width: 100%; max-width: 768px; - z-index: 10; + z-index: 1; height: ${({ $isMobile }) => ($isMobile ? "78px" : "60px")}; justify-content: center; align-items: flex-start; diff --git a/src/components/layout/navBottom/NavBottom.tsx b/src/components/layout/navBottom/NavBottom.tsx index 628aeb7e..6ea90ca3 100644 --- a/src/components/layout/navBottom/NavBottom.tsx +++ b/src/components/layout/navBottom/NavBottom.tsx @@ -2,12 +2,12 @@ import { PATH } from "@/constants/path"; import { useLocation } from "react-router-dom"; import * as S from "./NavBottom.style"; import { isMobile } from "@/utils/isMobile"; -import { useState } from "react"; import ToolTip from "./toolTip/ToolTip"; +import useTooltip from "@/hooks/common/useTooltip"; const BottomNav = () => { const isMobileDevice = isMobile(); - const [isToolTipOn, setIsToolTipOn] = useState(true); + const { isToolTipVisible, hideTooltipForWeek } = useTooltip(); const { pathname } = useLocation(); const navList = [ @@ -39,8 +39,10 @@ const BottomNav = () => { return ( - {isToolTipOn && ( - 숙박권을 판매해보세요. + {isToolTipVisible && ( + + 숙박권을 판매해보세요. + )} {navList.map((item) => { diff --git a/src/hooks/common/useTooltip.ts b/src/hooks/common/useTooltip.ts new file mode 100644 index 00000000..e77ed6a4 --- /dev/null +++ b/src/hooks/common/useTooltip.ts @@ -0,0 +1,21 @@ +import { useState, useEffect } from "react"; +import { tooltip } from "@utils/tooltip"; + +const useTooltip = () => { + const [isToolTipVisible, setIsToolTipVisible] = useState(true); + + useEffect(() => { + if (tooltip.isValidateHideTooltip) { + setIsToolTipVisible(false); + } + }, []); + + const hideTooltipForWeek = () => { + tooltip.setHideTooltip(); + setIsToolTipVisible(false); + }; + + return { isToolTipVisible, hideTooltipForWeek }; +}; + +export default useTooltip; diff --git a/src/utils/a2hs.ts b/src/utils/a2hs.ts index e504033d..f81f9991 100644 --- a/src/utils/a2hs.ts +++ b/src/utils/a2hs.ts @@ -1,18 +1,14 @@ export class a2hs { - // localStorage 키값 private static HIDE_INSTALL_A2HS = "hide_install_a2hs"; - // localStorage 값 가져오기 static get hideInstallA2HS() { return localStorage.getItem(this.HIDE_INSTALL_A2HS); } - // localStorage에 저장된 값이 현재 시간보다 큰 경우 (숨겨야 하는 경우) true 반환 static get isValidateHideInstallA2HS() { return Number(a2hs.hideInstallA2HS) > Date.now(); } - // 일주일 후 기준으로 localStorage 값 설정 static setHideInstallA2HS() { const currentAfterWeek = String( new Date().setDate(new Date().getDate() + 7), @@ -20,7 +16,6 @@ export class a2hs { localStorage.setItem(this.HIDE_INSTALL_A2HS, currentAfterWeek); } - // localStorage에 설정된 값이 현재 시간보다 작을 때 (보여야 하는 경우) localStorage 값 제거 static clear() { localStorage.removeItem(this.HIDE_INSTALL_A2HS); } diff --git a/src/utils/tooltip.ts b/src/utils/tooltip.ts new file mode 100644 index 00000000..3988741f --- /dev/null +++ b/src/utils/tooltip.ts @@ -0,0 +1,22 @@ +export class tooltip { + private static HIDE_TOOLTIP = "hide_tooltip"; + + static get hideTooltip() { + return localStorage.getItem(this.HIDE_TOOLTIP); + } + + static get isValidateHideTooltip() { + return Number(tooltip.hideTooltip) > Date.now(); + } + + static setHideTooltip() { + const currentAfterWeek = String( + new Date().setDate(new Date().getDate() + 1), + ); + localStorage.setItem(this.HIDE_TOOLTIP, currentAfterWeek); + } + + static clear() { + localStorage.removeItem(this.HIDE_TOOLTIP); + } +} From 90bdaa9f8b13d57bfe4318675b0ffa9f26f8f0c7 Mon Sep 17 00:00:00 2001 From: Park Nayoung <139189221+im-na0@users.noreply.github.com> Date: Sun, 28 Jan 2024 13:56:25 +0900 Subject: [PATCH 02/12] =?UTF-8?q?design:=20a2hs=20css=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 3 ++- src/components/A2HS/A2HS.style.ts | 16 +++++++++------- src/components/A2HS/A2HS.tsx | 18 +++++++++++------- 3 files changed, 22 insertions(+), 15 deletions(-) diff --git a/index.html b/index.html index 82a12a44..30153d88 100644 --- a/index.html +++ b/index.html @@ -39,10 +39,11 @@ }); -
+
+
diff --git a/src/components/A2HS/A2HS.style.ts b/src/components/A2HS/A2HS.style.ts index 558554ef..06469178 100644 --- a/src/components/A2HS/A2HS.style.ts +++ b/src/components/A2HS/A2HS.style.ts @@ -14,7 +14,7 @@ export const BackDrop = styled(motion.div)` height: 100%; background-color: rgba(0, 0, 0, 0.45); transition: opacity 0.5s ease; - z-index: 3; + z-index: 11; `; export const A2HSContainer = styled(motion.div)` @@ -27,16 +27,16 @@ export const A2HSContainer = styled(motion.div)` left: 50%; width: 90%; max-width: 518px; - bottom: 60px; + bottom: 0px; background-color: ${({ theme }) => theme.color.white}; - padding: 2.5rem 1.25rem; - gap: 1.2rem; + padding: 4rem 1.25rem 3rem; + gap: 1.5rem; box-shadow: 0px -2px 5px rgba(0, 0, 0, 0.2); border-radius: 28px 28px 0px 0px; - z-index: 3; + z-index: 12; transform: translateX(-50%); @@ -96,6 +96,8 @@ export const ButtonWrapper = styled.div` align-items: center; width: 100%; + + margin-top: 1rem; `; export const Message = styled.span` @@ -112,10 +114,10 @@ const Button = styled.button` ${({ theme }) => theme.typo.button2}; - width: 60%; + width: 70%; @media (max-width: ${breakpoints.tablet}) { - width: 80%; + width: 90%; } @media (max-width: ${breakpoints.mobile}) { diff --git a/src/components/A2HS/A2HS.tsx b/src/components/A2HS/A2HS.tsx index 9a9813d4..cf4c0bab 100644 --- a/src/components/A2HS/A2HS.tsx +++ b/src/components/A2HS/A2HS.tsx @@ -3,41 +3,45 @@ import useA2HS from "@hooks/common/useA2HS"; import IcPercentHotelSrc from "@assets/icons/ic_percent_hotel-app.png"; import * as S from "./A2HS.style"; import { AnimatePresence } from "framer-motion"; +import { useState } from "react"; const A2HS = () => { const { deferredPrompt, install, clearPrompt } = useA2HS(); - const modalRoot = document.getElementById("modal-root"); + const appRoot = document.getElementById("app-install-pop"); + const [isShow, SetIsShow] = useState(true); const backdropVariants = { hidden: { opacity: 0 }, visible: { opacity: 1 }, + exit: { opacity: 0 }, }; const modalVariants = { hidden: { y: "100vh", x: "50", opacity: 0 }, visible: { y: 0, x: "50", opacity: 1 }, - exit: { y: "100vh", x: "50", opacity: 0 }, + exit: { y: "-100", x: "50", opacity: 0 }, }; - if (!deferredPrompt || !modalRoot) return null; + if (!deferredPrompt || !appRoot) return null; return ReactDOM.createPortal( - {deferredPrompt && ( + {isShow && ( <> SetIsShow(false)} variants={backdropVariants} - transition={{ duration: 0.5, delay: 1 }} + transition={{ duration: 0.5 }} /> @@ -60,7 +64,7 @@ const A2HS = () => { )} , - modalRoot, + appRoot, ); }; From b5c6ca85af925cc747ef9f77e47c7fbffe377348 Mon Sep 17 00:00:00 2001 From: Park Nayoung <139189221+im-na0@users.noreply.github.com> Date: Sun, 28 Jan 2024 13:57:18 +0900 Subject: [PATCH 03/12] =?UTF-8?q?refactor:=20account=20=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=20=EB=A6=AC=EC=95=A1=ED=8A=B8=EC=BF=BC=EB=A6=AC=20?= =?UTF-8?q?=EC=82=AC=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../manage/manageAccount/ManageAccount.tsx | 50 +++++-------------- src/types/account.ts | 4 -- .../profile.ts} | 5 ++ src/types/userInfo.ts | 9 ---- 4 files changed, 18 insertions(+), 50 deletions(-) delete mode 100644 src/types/account.ts rename src/{pages/myPage/manage/manageProfile/ManageProfile.type.ts => types/profile.ts} (65%) delete mode 100644 src/types/userInfo.ts diff --git a/src/pages/myPage/manage/manageAccount/ManageAccount.tsx b/src/pages/myPage/manage/manageAccount/ManageAccount.tsx index 5373201f..79f7551a 100644 --- a/src/pages/myPage/manage/manageAccount/ManageAccount.tsx +++ b/src/pages/myPage/manage/manageAccount/ManageAccount.tsx @@ -1,44 +1,16 @@ import RegisterAccount from "../registerAccount/RegisterAccount"; -import useProfileApi from "@apis/useProfileApi"; -import type { ProfileData } from "../manageProfile/ManageProfile.type"; -import { useEffect, useState } from "react"; -import type { AccountProps } from "@type/account"; + +import { useEffect } from "react"; import AccountInfo from "../accountInfo/AccountInfo"; -import { END_POINTS } from "@constants/api"; import { useNavigate, useSearchParams } from "react-router-dom"; import { PATH } from "@constants/path"; import useToastConfig from "@hooks/common/useToastConfig"; +import { useAccountQuery } from "@/hooks/api/useMyPageQuery"; const ManageAccount = () => { const navigate = useNavigate(); const [search] = useSearchParams(); - const { getProfileData } = useProfileApi(); const { handleToast } = useToastConfig(); - const [data, setData] = useState(); - const noPrevAccount = !data?.accountNumber && !data?.bank; - const [accountInfo, setAccountInfo] = useState({ - accountNumber: data?.accountNumber, - bank: data?.bank, - }); - const [isLoading, setIsLoading] = useState(true); - - const fetchData = async () => { - setIsLoading(true); - try { - const res = await getProfileData(END_POINTS.USER_INFO); - if (!res.linkedToYanolja) { - handleToast(true, [<>잘못된 접근 방식입니다]); - navigate(PATH.SETTING, { replace: true }); - return; - } - setData(res); - setAccountInfo({ accountNumber: res.accountNumber, bank: res.bank }); - } catch (error) { - console.log(error); - } finally { - setIsLoading(false); - } - }; useEffect(() => { if ( @@ -50,18 +22,22 @@ const ManageAccount = () => { if (search.get("step") && search.get("step") !== "first") { navigate(PATH.MANAGE_ACCOUNT, { replace: true }); } - - fetchData(); - // eslint-disable-next-line }, [search]); - if (isLoading) return
Loading...
; + const { data } = useAccountQuery(); + + const noPrevAccount = + !data?.accountData.accountNumber && !data.accountData.bank; - if (!data) return
Data fetching Error
; + if (!data.rawData.linkedToYanolja) { + handleToast(true, [<>잘못된 접근 방식입니다]); + navigate(PATH.SETTING, { replace: true }); + return null; + } if (noPrevAccount) return ; - return ; + return ; }; export default ManageAccount; diff --git a/src/types/account.ts b/src/types/account.ts deleted file mode 100644 index bfeb0462..00000000 --- a/src/types/account.ts +++ /dev/null @@ -1,4 +0,0 @@ -export interface AccountProps { - accountNumber: string | undefined; - bank: string | undefined; -} diff --git a/src/pages/myPage/manage/manageProfile/ManageProfile.type.ts b/src/types/profile.ts similarity index 65% rename from src/pages/myPage/manage/manageProfile/ManageProfile.type.ts rename to src/types/profile.ts index 168dd13b..388335bb 100644 --- a/src/pages/myPage/manage/manageProfile/ManageProfile.type.ts +++ b/src/types/profile.ts @@ -1,3 +1,8 @@ +export interface AccountData { + accountNumber: string | undefined; + bank: string | undefined; +} + export interface ProfileData { accountNumber: string | undefined; bank: string | undefined; diff --git a/src/types/userInfo.ts b/src/types/userInfo.ts deleted file mode 100644 index a06f9ed8..00000000 --- a/src/types/userInfo.ts +++ /dev/null @@ -1,9 +0,0 @@ -export interface IUserInfo { - id: string; - email: string; - name: string; - phone: string; - accountNumber: string | null; - bank: string | null; - linkedToYanolja: boolean; -} From 4b5abb1f7671c4442584db68b73a11b3093e3f83 Mon Sep 17 00:00:00 2001 From: Park Nayoung <139189221+im-na0@users.noreply.github.com> Date: Sun, 28 Jan 2024 13:57:46 +0900 Subject: [PATCH 04/12] =?UTF-8?q?design:=20=EC=95=BC=EB=86=80=EC=9E=90=20?= =?UTF-8?q?=EC=97=B0=EB=8F=99=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=83=89=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../IntroPage/IntroPage.style.ts | 11 ++--- .../IntroPage/IntroPage.tsx | 40 +++++++++++++++++-- 2 files changed, 43 insertions(+), 8 deletions(-) diff --git a/src/pages/connectYanoljaPage/IntroPage/IntroPage.style.ts b/src/pages/connectYanoljaPage/IntroPage/IntroPage.style.ts index a255cc5c..cad4c93b 100644 --- a/src/pages/connectYanoljaPage/IntroPage/IntroPage.style.ts +++ b/src/pages/connectYanoljaPage/IntroPage/IntroPage.style.ts @@ -1,15 +1,16 @@ import { hexToRgba } from "@utils/hexTorgba"; import { breakpoints } from "@styles/theme"; import styled, { DefaultTheme } from "styled-components"; +import { motion } from "framer-motion"; export const PageContainer = styled.div` width: 100%; - height: 100%; + height: 100vh; - background-color: ${({ theme }) => theme.color.black}; + background-color: ${({ theme }) => theme.color.white}; `; -export const MainWrapper = styled.div` +export const MainWrapper = styled(motion.div)` display: flex; flex-direction: column; align-items: center; @@ -73,9 +74,9 @@ export const XIcon = styled.div` } `; -export const Title = styled.p` +export const Title = styled(motion.p)` ${({ theme }) => theme.typo.title4}; - color: ${({ theme }) => theme.color.percentOrange}; + color: ${({ theme }) => theme.color.greyScale1}; line-height: 1.8; `; diff --git a/src/pages/connectYanoljaPage/IntroPage/IntroPage.tsx b/src/pages/connectYanoljaPage/IntroPage/IntroPage.tsx index d9d897c1..339ccab0 100644 --- a/src/pages/connectYanoljaPage/IntroPage/IntroPage.tsx +++ b/src/pages/connectYanoljaPage/IntroPage/IntroPage.tsx @@ -1,5 +1,5 @@ import XIcon from "@assets/icons/ic_x.png"; -import PercentHotelLogo from "@assets/logos/Percent-hotel_logo.png"; +import PercentHotelLogo from "@assets/logos/Percent-hotel_logo_b.png"; import YanoljaLogo from "@assets/logos/Yanolja_CI.png"; import { PATH } from "@constants/path"; import { useNavigate } from "react-router-dom"; @@ -9,9 +9,43 @@ import * as S from "./IntroPage.style.ts"; const IntroPage = () => { const navigate = useNavigate(); + const containerVariants = { + hidden: { + opacity: 0, + y: -30, + }, + visible: { + opacity: 1, + y: 0, + transition: { + delay: 0.3, + duration: 0.7, + }, + }, + }; + + const titleVariants = { + hidden: { + opacity: 0, + y: -10, + }, + visible: { + opacity: 1, + y: 0, + transition: { + delay: 0.4, + duration: 0.7, + }, + }, + }; + return ( - + 퍼센트호텔 로고 @@ -21,7 +55,7 @@ const IntroPage = () => { 야놀자 로고 - + 야놀자 계정 연동하고
쉽고 빠르게 거래하기 From 4c45131b224a9da63ff8ceb108f9106a4d80f285 Mon Sep 17 00:00:00 2001 From: Park Nayoung <139189221+im-na0@users.noreply.github.com> Date: Sun, 28 Jan 2024 14:03:06 +0900 Subject: [PATCH 05/12] =?UTF-8?q?refactor:=20=EC=BD=94=EB=93=9C=20?= =?UTF-8?q?=EC=A0=95=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/apis/patchAccount.ts | 4 +- .../enterAccountInfo/EnterAccountInfo.tsx | 116 +++++++++--------- src/components/layout/Layout.tsx | 23 ++-- src/hooks/api/useMyPageQuery.ts | 28 +++++ .../myPage/manage/accountInfo/AccountInfo.tsx | 6 +- src/pages/searchPage/Search.tsx | 3 +- .../components/filterModal/FilterModal.tsx | 75 ++++++----- .../components/searchNav/SearchNav.tsx | 34 +++-- 8 files changed, 167 insertions(+), 122 deletions(-) create mode 100644 src/hooks/api/useMyPageQuery.ts diff --git a/src/apis/patchAccount.ts b/src/apis/patchAccount.ts index 07d181f8..2936c6d0 100644 --- a/src/apis/patchAccount.ts +++ b/src/apis/patchAccount.ts @@ -1,8 +1,8 @@ import { END_POINTS } from "@constants/api"; -import type { AccountProps } from "@type/account"; +import type { AccountData } from "@type/profile"; import { axiosInstance } from "./axiosInstance"; -export const patchAccount = async (accountData: AccountProps) => { +export const patchAccount = async (accountData: AccountData) => { const { data } = await axiosInstance.patch(END_POINTS.ACCOUNT, accountData); return data.data; diff --git a/src/components/account/enterAccountInfo/EnterAccountInfo.tsx b/src/components/account/enterAccountInfo/EnterAccountInfo.tsx index 9a534445..a78b4baa 100644 --- a/src/components/account/enterAccountInfo/EnterAccountInfo.tsx +++ b/src/components/account/enterAccountInfo/EnterAccountInfo.tsx @@ -2,20 +2,20 @@ import { useEffect, useRef, useState } from "react"; import * as S from "./EnterAccountInfo.style"; import { BANK_LIST } from "@/constants/bank"; import { AnimatePresence, useAnimation } from "framer-motion"; -import type { AccountProps } from "@type/account"; + import { useLocation, useNavigate } from "react-router-dom"; import { PATH } from "@/constants/path"; import useToastConfig from "@hooks/common/useToastConfig"; import usePreventLeave from "@hooks/common/usePreventLeave"; import { patchAccount } from "@apis/patchAccount"; -import { UndoIcon } from "@components/layout/header/HeaderTop.style"; +import type { AccountData } from "@type/profile"; const EnterAccountInfo = ({ accountInfo, setAccountInfo, }: { - accountInfo: AccountProps; - setAccountInfo?: React.Dispatch>; + accountInfo: AccountData; + setAccountInfo?: React.Dispatch>; }) => { usePreventLeave(true); const { pathname } = useLocation(); @@ -88,7 +88,7 @@ const EnterAccountInfo = ({ if (!handleErrorToast()) { return; } - const updatedInfo: AccountProps = { + const updatedInfo: AccountData = { accountNumber: newAccountNumber, bank: newBank, }; @@ -133,62 +133,56 @@ const EnterAccountInfo = ({ }; return ( - <> - - navigate(-1)} /> -

계좌 등록

- - -

입금받을 계좌를 등록해주세요

- accountOnChange(e)} - /> - setShowBankList(true)} - > - {newBank ? newBank : "은행"} - - - setShowBankList(false)} - /> - - -

은행

- - {BANK_LIST.map((item) => { - return ( - - bankOnChange(e)} - checked={item.name === accountInfo?.bank} - /> - - {item.name} - - ); - })} - - - - - {buttonText} - - - + +

입금받을 계좌를 등록해주세요

+ accountOnChange(e)} + /> + setShowBankList(true)} + > + {newBank ? newBank : "은행"} + + + setShowBankList(false)} + /> + + +

은행

+ + {BANK_LIST.map((item) => { + return ( + + bankOnChange(e)} + checked={item.name === accountInfo?.bank} + /> + + {item.name} + + ); + })} + + + + + {buttonText} + + ); }; diff --git a/src/components/layout/Layout.tsx b/src/components/layout/Layout.tsx index eecdf9a3..a8389050 100644 --- a/src/components/layout/Layout.tsx +++ b/src/components/layout/Layout.tsx @@ -3,8 +3,8 @@ import Header from "./header/HeaderTop"; import * as S from "./Layout.style"; import BottomNav from "./navBottom/NavBottom"; import A2HS from "../A2HS/A2HS"; -import { useLocation } from "react-router-dom"; -import { PATH } from "@/constants/path"; +import { isMobile } from "@/utils/isMobile"; + interface ChildrenProps { children: React.ReactNode; isHeaderOn: boolean; @@ -12,16 +12,25 @@ interface ChildrenProps { } const Layout = ({ children, isHeaderOn, isBottomNavOn }: ChildrenProps) => { - const { pathname } = useLocation(); + const isMobileDevice = isMobile(); return ( - {isHeaderOn &&
} - + {isHeaderOn && ( + <> +
+ + + )} {children} - {pathname === PATH.ROOT && } - {isBottomNavOn && } + + {isBottomNavOn && ( + <> + + + + )} ); diff --git a/src/hooks/api/useMyPageQuery.ts b/src/hooks/api/useMyPageQuery.ts new file mode 100644 index 00000000..931eda7a --- /dev/null +++ b/src/hooks/api/useMyPageQuery.ts @@ -0,0 +1,28 @@ +import { useSuspenseQuery } from "@tanstack/react-query"; +import { END_POINTS } from "@/constants/api"; +import useProfileApi from "@/apis/useProfileApi"; +import type { AccountData, ProfileData } from "@/types/profile"; + +interface AccountQueryProps { + accountData: AccountData; + rawData: ProfileData; +} + +export const useAccountQuery = () => { + const { getProfileData } = useProfileApi(); + + const accountQuery = useSuspenseQuery({ + queryKey: ["myProfile"], + queryFn: async () => await getProfileData(END_POINTS.USER_INFO), + refetchOnWindowFocus: false, + refetchOnReconnect: false, + refetchInterval: false, + select: (res) => { + const accountData = { accountNumber: res.accountNumber, bank: res.bank }; + const rawData = res; + return { accountData, rawData }; + }, + }); + + return accountQuery; +}; diff --git a/src/pages/myPage/manage/accountInfo/AccountInfo.tsx b/src/pages/myPage/manage/accountInfo/AccountInfo.tsx index 307fb856..8c276f5d 100644 --- a/src/pages/myPage/manage/accountInfo/AccountInfo.tsx +++ b/src/pages/myPage/manage/accountInfo/AccountInfo.tsx @@ -1,15 +1,15 @@ import { useNavigate } from "react-router-dom"; -import { ProfileData } from "../manageProfile/ManageProfile.type"; + import * as S from "./AccountInfo.style"; import { PATH } from "@constants/path"; -import type { AccountProps } from "@type/account"; +import type { ProfileData, AccountData } from "@/type/profile"; const AccountInfo = ({ data, accountInfo, }: { data: ProfileData; - accountInfo: AccountProps; + accountInfo: AccountData; }) => { const { bank, accountNumber, name } = data; const navigate = useNavigate(); diff --git a/src/pages/searchPage/Search.tsx b/src/pages/searchPage/Search.tsx index 00b76657..9bf226f6 100644 --- a/src/pages/searchPage/Search.tsx +++ b/src/pages/searchPage/Search.tsx @@ -41,6 +41,8 @@ const Search = () => { pageParam, pageSize, ), + refetchOnMount: false, + refetchOnWindowFocus: false, initialPageParam: 0, getNextPageParam: (lastPage) => { const lastData = lastPage?.content; @@ -94,7 +96,6 @@ const Search = () => { - {isLoading && } {!isLoading && data && !data?.pages?.[0]?.content?.length && ( diff --git a/src/pages/searchPage/components/filterModal/FilterModal.tsx b/src/pages/searchPage/components/filterModal/FilterModal.tsx index 6dd69b9e..9efa9204 100644 --- a/src/pages/searchPage/components/filterModal/FilterModal.tsx +++ b/src/pages/searchPage/components/filterModal/FilterModal.tsx @@ -1,6 +1,7 @@ import { useSearchFilterInfoStore } from "@store/store"; import * as S from "./FilterModal.style"; import { forwardRef } from "react"; +import { AnimatePresence } from "framer-motion"; interface FilterModalProps { setIsModalOpen: React.Dispatch>; @@ -47,37 +48,51 @@ const FilterModal = forwardRef( setIsModalOpen(false); }; + const modalVariants = { + hidden: { y: "100vh", opacity: 0 }, + visible: { y: 0, opacity: 1, transition: { duration: 0.5 } }, + exit: { y: "100vh", opacity: 0, transition: { duration: 0.2 } }, + }; + return ( - - - -
- 정렬 -
- -
- - {navList.map(({ id, name }) => ( - registerFilter(e, name)} - className={searchInfo.sorted === name ? "active" : ""} - > - {id === 1 ? ( - <> - {name}{" "} - - - ) : ( - name - )} - - ))} - - + + + + +
+ 정렬 +
+ +
+ + {navList.map(({ id, name }) => ( + registerFilter(e, name)} + className={searchInfo.sorted === name ? "active" : ""} + > + {id === 1 ? ( + <> + {name}{" "} + + + ) : ( + name + )} + + ))} + + + ); }, ); diff --git a/src/pages/searchPage/components/searchNav/SearchNav.tsx b/src/pages/searchPage/components/searchNav/SearchNav.tsx index 85ebc12d..6baaec73 100644 --- a/src/pages/searchPage/components/searchNav/SearchNav.tsx +++ b/src/pages/searchPage/components/searchNav/SearchNav.tsx @@ -37,24 +37,22 @@ const SeachNav = () => { }; return ( - <> - - - - {navList.map(({ id, label, name }) => ( - handleCellClick(label)} - className={isActive[label] ? "active" : ""} - > - {name} - - ))} - - - - - + + + + {navList.map(({ id, label, name }) => ( + handleCellClick(label)} + className={isActive[label] ? "active" : ""} + > + {name} + + ))} + + + + ); }; From ce3f37718768956565e0cf6bd9a86571959d4588 Mon Sep 17 00:00:00 2001 From: Park Nayoung <139189221+im-na0@users.noreply.github.com> Date: Sun, 28 Jan 2024 14:03:18 +0900 Subject: [PATCH 06/12] =?UTF-8?q?chore:=20=EB=B6=88=ED=95=84=EC=9A=94?= =?UTF-8?q?=ED=95=9C=20=20=EC=BD=A4=EB=A7=88=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/routes/router.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/routes/router.tsx b/src/routes/router.tsx index ce7e1691..bd5db882 100644 --- a/src/routes/router.tsx +++ b/src/routes/router.tsx @@ -289,7 +289,7 @@ const routes = createBrowserRouter([ }> - , + From 0daaba00e86ff99146be0eba1a20aff28988d8c0 Mon Sep 17 00:00:00 2001 From: Park Nayoung <139189221+im-na0@users.noreply.github.com> Date: Sun, 28 Jan 2024 14:03:37 +0900 Subject: [PATCH 07/12] =?UTF-8?q?design:=20body=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/styles/globalStyle.ts | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/src/styles/globalStyle.ts b/src/styles/globalStyle.ts index 196873b4..4ca66018 100644 --- a/src/styles/globalStyle.ts +++ b/src/styles/globalStyle.ts @@ -4,8 +4,7 @@ export const GlobalStyle = createGlobalStyle` *{margin:0;padding:0;font:inherit;color:inherit;} *, :after, :before {box-sizing:border-box;} :root {-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;text-size-adjust:100%;cursor:default;line-height:1.2;overflow-wrap:break-word;word-break:break-word;tab-size:4;} - html, body {height:100%;background-color: ${({ theme }) => - theme.color.greyScale6};} + html, body {height:100%;} img, svg {display: block;max-width:100%;} button {background:none;border:0;cursor:pointer;} a {text-decoration:none} @@ -14,4 +13,11 @@ export const GlobalStyle = createGlobalStyle` box-sizing: border-box; font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif; } + + body { + background-color: ${({ theme }) => theme.color.greyScale6}; + letter-spacing: -.3px; + overflow-y: auto; + overflow-x: hidden; + } `; From 57ff6b1833a2e14707ca1c791d8b476e80c9f16a Mon Sep 17 00:00:00 2001 From: Park Nayoung <139189221+im-na0@users.noreply.github.com> Date: Sun, 28 Jan 2024 14:09:23 +0900 Subject: [PATCH 08/12] =?UTF-8?q?design:=20css=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/layout/Layout.tsx | 14 ++------------ src/components/layout/navBottom/NavBottom.tsx | 10 ++++++---- .../myPage/manage/accountInfo/AccountInfo.style.ts | 2 ++ .../myPage/manage/accountInfo/AccountInfo.tsx | 2 +- .../transferWritingPage/TransferWriting.style.ts | 2 ++ 5 files changed, 13 insertions(+), 17 deletions(-) diff --git a/src/components/layout/Layout.tsx b/src/components/layout/Layout.tsx index a8389050..c6b43e11 100644 --- a/src/components/layout/Layout.tsx +++ b/src/components/layout/Layout.tsx @@ -17,20 +17,10 @@ const Layout = ({ children, isHeaderOn, isBottomNavOn }: ChildrenProps) => { return ( - {isHeaderOn && ( - <> -
- - - )} + {isHeaderOn &&
} {children} - {isBottomNavOn && ( - <> - - - - )} + {isBottomNavOn && } ); diff --git a/src/components/layout/navBottom/NavBottom.tsx b/src/components/layout/navBottom/NavBottom.tsx index 6ea90ca3..a6636ec8 100644 --- a/src/components/layout/navBottom/NavBottom.tsx +++ b/src/components/layout/navBottom/NavBottom.tsx @@ -1,12 +1,14 @@ import { PATH } from "@/constants/path"; import { useLocation } from "react-router-dom"; import * as S from "./NavBottom.style"; -import { isMobile } from "@/utils/isMobile"; import ToolTip from "./toolTip/ToolTip"; import useTooltip from "@/hooks/common/useTooltip"; -const BottomNav = () => { - const isMobileDevice = isMobile(); +interface BottomNavProps { + isMobile: boolean; +} + +const BottomNav = ({ isMobile }: BottomNavProps) => { const { isToolTipVisible, hideTooltipForWeek } = useTooltip(); const { pathname } = useLocation(); @@ -38,7 +40,7 @@ const BottomNav = () => { ]; return ( - + {isToolTipVisible && ( 숙박권을 판매해보세요. diff --git a/src/pages/myPage/manage/accountInfo/AccountInfo.style.ts b/src/pages/myPage/manage/accountInfo/AccountInfo.style.ts index b9c57d21..b49f58f0 100644 --- a/src/pages/myPage/manage/accountInfo/AccountInfo.style.ts +++ b/src/pages/myPage/manage/accountInfo/AccountInfo.style.ts @@ -12,6 +12,8 @@ export const AccountInfoWrapper = styled.div` ${({ theme }) => theme.typo.body4} color: ${({ theme }) => theme.color.black}; + padding-top: 1.25rem; + div { height: 33px; line-height: 33px; diff --git a/src/pages/myPage/manage/accountInfo/AccountInfo.tsx b/src/pages/myPage/manage/accountInfo/AccountInfo.tsx index 8c276f5d..0b9b40d5 100644 --- a/src/pages/myPage/manage/accountInfo/AccountInfo.tsx +++ b/src/pages/myPage/manage/accountInfo/AccountInfo.tsx @@ -2,7 +2,7 @@ import { useNavigate } from "react-router-dom"; import * as S from "./AccountInfo.style"; import { PATH } from "@constants/path"; -import type { ProfileData, AccountData } from "@/type/profile"; +import type { ProfileData, AccountData } from "@type/profile"; const AccountInfo = ({ data, diff --git a/src/pages/transferWritingPage/TransferWriting.style.ts b/src/pages/transferWritingPage/TransferWriting.style.ts index c26b1e94..944b6331 100644 --- a/src/pages/transferWritingPage/TransferWriting.style.ts +++ b/src/pages/transferWritingPage/TransferWriting.style.ts @@ -11,6 +11,8 @@ export const Subtitle = styled.p` position: sticky; top: 56px; + + z-index: 1; `; export const TransferItemList = styled.div` From f65f7c99ffe30e228c5572dfede3b7614a362906 Mon Sep 17 00:00:00 2001 From: Park Nayoung <139189221+im-na0@users.noreply.github.com> Date: Sun, 28 Jan 2024 15:43:39 +0900 Subject: [PATCH 09/12] =?UTF-8?q?refactor:=20=EC=9C=A0=EC=A0=80=EC=A0=95?= =?UTF-8?q?=EB=B3=B4=20=EC=A1=B0=ED=9A=8C=20=ED=9B=85=20=EB=B3=B4=EC=99=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/apis/fetchUserInfo.ts | 19 ++++-- src/apis/useProfileApi.ts | 26 -------- src/constants/api.ts | 2 + ...{useMyPageQuery.ts => useUserInfoQuery.ts} | 19 ++++-- src/store/store.ts | 59 +++---------------- src/types/profile.ts | 10 ++-- 6 files changed, 46 insertions(+), 89 deletions(-) delete mode 100644 src/apis/useProfileApi.ts rename src/hooks/api/{useMyPageQuery.ts => useUserInfoQuery.ts} (62%) diff --git a/src/apis/fetchUserInfo.ts b/src/apis/fetchUserInfo.ts index e6a19232..2ca7e791 100644 --- a/src/apis/fetchUserInfo.ts +++ b/src/apis/fetchUserInfo.ts @@ -1,9 +1,20 @@ -import { IUserInfo } from "./../types/userInfo"; +import { ProfileData } from "@type/profile"; import { axiosInstance } from "@apis/axiosInstance"; import { END_POINTS } from "@/constants/api"; -// 유저 정보를 불러오는 api입니다. -export const fetchUserInfo = async (): Promise => { +export const fetchUserInfo = async (): Promise => { const { data } = await axiosInstance.get(END_POINTS.USER_INFO); - return data.data as IUserInfo; + return data.data; +}; + +export const changeName = async (name: string) => { + const res = await axiosInstance.patch(END_POINTS.CHANGE_NAME, { name }); + return res; +}; + +export const changeNumber = async (number: string) => { + const res = await axiosInstance.patch(END_POINTS.CHANGE_NUMBER, { + phone: number, + }); + return res; }; diff --git a/src/apis/useProfileApi.ts b/src/apis/useProfileApi.ts deleted file mode 100644 index 01e2dca3..00000000 --- a/src/apis/useProfileApi.ts +++ /dev/null @@ -1,26 +0,0 @@ -import { axiosInstance } from "./axiosInstance"; - -const useProfileApi = () => { - const getProfileData = async (endPoint: string) => { - const apiURL = `${endPoint}`; - const { data } = await axiosInstance.get(apiURL); - - return data.data; - }; - - const changeName = async (endPoint: string, name: string) => { - const apiURL = `${endPoint}`; - const res = await axiosInstance.patch(apiURL, { name }); - return res; - }; - - const changeNumber = async (endPoint: string, number: string) => { - const apiURL = `${endPoint}`; - const res = await axiosInstance.patch(apiURL, { phone: number }); - return res; - }; - - return { getProfileData, changeName, changeNumber }; -}; - -export default useProfileApi; diff --git a/src/constants/api.ts b/src/constants/api.ts index 5c54d666..fb7bc510 100644 --- a/src/constants/api.ts +++ b/src/constants/api.ts @@ -28,6 +28,8 @@ export const END_POINTS = { STOCK: (productId: string) => `/v1/products/${productId}/stock`, NEW_TOKEN: "/v1/token/refresh", SEARCH: "/v1/products/search", + CHANGE_NAME: "/v1/members/name", + CHANGE_NUMBER: "/v1/members/phone", } as const; export const STATUS_CODE = { diff --git a/src/hooks/api/useMyPageQuery.ts b/src/hooks/api/useUserInfoQuery.ts similarity index 62% rename from src/hooks/api/useMyPageQuery.ts rename to src/hooks/api/useUserInfoQuery.ts index 931eda7a..dd693a75 100644 --- a/src/hooks/api/useMyPageQuery.ts +++ b/src/hooks/api/useUserInfoQuery.ts @@ -1,6 +1,6 @@ import { useSuspenseQuery } from "@tanstack/react-query"; -import { END_POINTS } from "@/constants/api"; -import useProfileApi from "@/apis/useProfileApi"; + +import { fetchUserInfo } from "@/apis/fetchUserInfo"; import type { AccountData, ProfileData } from "@/types/profile"; interface AccountQueryProps { @@ -9,11 +9,9 @@ interface AccountQueryProps { } export const useAccountQuery = () => { - const { getProfileData } = useProfileApi(); - const accountQuery = useSuspenseQuery({ queryKey: ["myProfile"], - queryFn: async () => await getProfileData(END_POINTS.USER_INFO), + queryFn: async () => await fetchUserInfo(), refetchOnWindowFocus: false, refetchOnReconnect: false, refetchInterval: false, @@ -26,3 +24,14 @@ export const useAccountQuery = () => { return accountQuery; }; + +export const useUserInfoQuery = () => { + const userInfoQuery = useSuspenseQuery({ + queryKey: ["userInfo"], + queryFn: async () => await fetchUserInfo(), + refetchOnWindowFocus: false, + refetchOnReconnect: false, + refetchInterval: false, + }); + return userInfoQuery; +}; diff --git a/src/store/store.ts b/src/store/store.ts index 96ba0840..5216cc1f 100644 --- a/src/store/store.ts +++ b/src/store/store.ts @@ -1,28 +1,9 @@ -import type { ReactNode } from "react"; -import { IReservation } from "@/types/reservationList"; - -import { create } from "zustand"; // create로 zustand를 불러옵니다. +import { create } from "zustand"; import { persist } from "zustand/middleware"; -import type { MemberResponse } from "@type/login"; import { ISearchFilterInfo } from "@/types/searchFilterInfo"; - -/* - zustand 사용법: - 기본적으로 storeState 타입을 만들고, 이걸 - create(() => ({ ...storeState })) - 식으로 쓰면 됩니다! -*/ - -/* - storeState는 보통 아래처럼 구성합니다. - { - 데이터, - 데이터 조작 set함수1, - 데이터 조작 set함수2, - 데이터 조작 set함수3, - ... - } -*/ +import type { ProfileData } from "@/types/profile"; +import type { ReactNode } from "react"; +import type { IReservation } from "@/types/reservationList"; // 예약내역 선택 아이템 전역상태 타입 interface ReservationState { @@ -62,43 +43,21 @@ export const useSelectedItemStore = create( ), ); -// 유저정보 전역상태 interface UserState { - userInfo: MemberResponse | null; - setUserInfo: (userInfo: MemberResponse) => void; + userInfo: ProfileData | null; + setUserInfo: (userInfo: Partial) => void; } -// 유저정보 전역상태 store export const useUserInfoStore = create((set) => ({ userInfo: null, setUserInfo: (updatedInfo) => set((state) => ({ - userInfo: { - ...state.userInfo, - ...updatedInfo, - }, + userInfo: state.userInfo + ? { ...state.userInfo, ...updatedInfo } + : (updatedInfo as ProfileData), })), })); -// export const useUserInfoStore = create((set) => ({ -// userInfo: { -// id: 0, -// email: "", -// name: "", -// phone: "", -// accountNumber: "", -// bank: "", -// linkedToYanolja: false, -// }, -// setUserInfo: (updatedInfo) => -// set((state) => ({ -// userInfo: { -// ...state.userInfo, -// ...updatedInfo, -// }, -// })), -// })); - export type configType = { isShow: boolean; isError: boolean; diff --git a/src/types/profile.ts b/src/types/profile.ts index 388335bb..80f5e933 100644 --- a/src/types/profile.ts +++ b/src/types/profile.ts @@ -1,11 +1,13 @@ +import { Nullable } from "./nullable"; + export interface AccountData { - accountNumber: string | undefined; - bank: string | undefined; + accountNumber: Nullable; + bank: Nullable; } export interface ProfileData { - accountNumber: string | undefined; - bank: string | undefined; + accountNumber: Nullable; + bank: Nullable; email: string; id: number; linkedToYanolja: boolean; From a7ebcdc756c045e3932e6a853a78098fd9bba12f Mon Sep 17 00:00:00 2001 From: Park Nayoung <139189221+im-na0@users.noreply.github.com> Date: Sun, 28 Jan 2024 15:44:09 +0900 Subject: [PATCH 10/12] =?UTF-8?q?refactor:=20regex=20=EC=83=81=EC=88=98?= =?UTF-8?q?=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/constants/regex.ts | 2 ++ src/hooks/common/useLoadUserInfo.ts | 12 ++++++------ src/types/login.ts | 13 ++----------- 3 files changed, 10 insertions(+), 17 deletions(-) diff --git a/src/constants/regex.ts b/src/constants/regex.ts index 4a099f06..c3bf3578 100644 --- a/src/constants/regex.ts +++ b/src/constants/regex.ts @@ -2,3 +2,5 @@ export const EMAIL_REGEX = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; export const PHONE_NUMBER_REGEX = /^01[0-9]-\d{3,4}-\d{4}$/; + +export const KOREAN_REGEX = /^[ㄱ-ㅎ가-힣ㅏ-ㅣ]+$/; diff --git a/src/hooks/common/useLoadUserInfo.ts b/src/hooks/common/useLoadUserInfo.ts index 9875a9b9..f5af0444 100644 --- a/src/hooks/common/useLoadUserInfo.ts +++ b/src/hooks/common/useLoadUserInfo.ts @@ -1,21 +1,21 @@ -import useProfileApi from "@apis/useProfileApi"; +import { fetchUserInfo } from "@/apis/fetchUserInfo"; import { useUserInfoStore } from "@store/store"; import { useEffect } from "react"; export const useLoadUserInfo = (isShow: boolean) => { const userInfo = useUserInfoStore((state) => state.userInfo); const setUserInfo = useUserInfoStore((state) => state.setUserInfo); - const { getProfileData } = useProfileApi(); - useEffect(() => { - const fetchUserInfo = async () => { + console.log(); + const getUserInfo = async () => { if (isShow && userInfo === null) { - const response = await getProfileData("/v1/members"); + const response = await fetchUserInfo(); + console.log(response); setUserInfo(response); } }; - fetchUserInfo(); + getUserInfo(); // eslint-disable-next-line react-hooks/exhaustive-deps }, [isShow, userInfo]); diff --git a/src/types/login.ts b/src/types/login.ts index ac7665eb..690ca73a 100644 --- a/src/types/login.ts +++ b/src/types/login.ts @@ -1,15 +1,6 @@ -export interface MemberResponse { - id: number; - email: string; - name: string; - phone: string; - accountNumber: string; - bank: string; - linkedToYanolja: boolean; -} - +import type { ProfileData } from "./profile"; export interface LoginData { - memberResponse: MemberResponse; + memberResponse: ProfileData; tokenResponse: { accessToken: string; refreshToken: string; From bdf07df0344f120eb2fbd46f98711081a17e89e0 Mon Sep 17 00:00:00 2001 From: Park Nayoung <139189221+im-na0@users.noreply.github.com> Date: Sun, 28 Jan 2024 15:44:50 +0900 Subject: [PATCH 11/12] =?UTF-8?q?refactor:=20=EC=84=A4=EC=A0=95=20?= =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20?= =?UTF-8?q?=EC=83=81=ED=83=9C=20=EB=B0=9B=EB=8F=84=EB=A1=9D=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../enterAccountInfo/EnterAccountInfo.tsx | 12 ++---- src/pages/myPage/MyPage.tsx | 32 ++++----------- src/pages/myPage/info/Info.tsx | 10 +++-- src/pages/myPage/manage/Manage.tsx | 24 ++--------- .../manage/manageAccount/ManageAccount.tsx | 3 +- .../myPage/manage/manageName/ManageName.tsx | 10 ++--- .../managePhoneNumber/ManagePhoneNumber.tsx | 8 ++-- .../manageProfile/ManageProfile.style.ts | 4 +- .../manage/manageProfile/ManageProfile.tsx | 41 ++++--------------- .../transferWritingPage/TransferWriting.tsx | 1 - 10 files changed, 45 insertions(+), 100 deletions(-) diff --git a/src/components/account/enterAccountInfo/EnterAccountInfo.tsx b/src/components/account/enterAccountInfo/EnterAccountInfo.tsx index a78b4baa..cb352802 100644 --- a/src/components/account/enterAccountInfo/EnterAccountInfo.tsx +++ b/src/components/account/enterAccountInfo/EnterAccountInfo.tsx @@ -9,6 +9,7 @@ import useToastConfig from "@hooks/common/useToastConfig"; import usePreventLeave from "@hooks/common/usePreventLeave"; import { patchAccount } from "@apis/patchAccount"; import type { AccountData } from "@type/profile"; +import { useUserInfoStore } from "@/store/store"; const EnterAccountInfo = ({ accountInfo, @@ -20,6 +21,7 @@ const EnterAccountInfo = ({ usePreventLeave(true); const { pathname } = useLocation(); const navigate = useNavigate(); + const setUserInfo = useUserInfoStore((state) => state.setUserInfo); const { handleToast } = useToastConfig(); const controls = useAnimation(); const accountNumberRef = useRef(null); @@ -98,6 +100,7 @@ const EnterAccountInfo = ({ try { await patchAccount(updatedInfo).then(() => { setAccountInfo(updatedInfo); + setUserInfo(updatedInfo); handleToast(false, ["계좌 등록이 완료되었습니다!"]); navigate(PATH.MANAGE_ACCOUNT, { replace: true }); @@ -114,7 +117,7 @@ const EnterAccountInfo = ({ try { await patchAccount(updatedInfo).then(() => { handleToast(false, ["계좌 변경이 완료되었습니다"]); - + setUserInfo(updatedInfo); navigate(PATH.MANAGE_ACCOUNT, { replace: true }); }); } catch (err) { @@ -122,13 +125,6 @@ const EnterAccountInfo = ({ } } - /** 양도글 작성 일 때, - if (pathname === PATH.양도글작성 && setAccountInfo) { - 로직 작성... - return; - } - */ - return; }; diff --git a/src/pages/myPage/MyPage.tsx b/src/pages/myPage/MyPage.tsx index 0d4b1e47..9b5db458 100644 --- a/src/pages/myPage/MyPage.tsx +++ b/src/pages/myPage/MyPage.tsx @@ -2,32 +2,16 @@ import { Outlet, useNavigate } from "react-router-dom"; import MyPageNav from "./components/myPageNav/MyPageNav"; import * as S from "./MyPage.style"; -import useProfileApi from "@apis/useProfileApi"; -import { useEffect, useState } from "react"; -import { ProfileData } from "./manage/manageProfile/ManageProfile.type"; -import { END_POINTS } from "@constants/api"; import { PATH } from "@constants/path"; +import { useLoadUserInfo } from "@/hooks/common/useLoadUserInfo"; +import useAuthStore from "@/store/authStore"; const MyPage = () => { const navigate = useNavigate(); - // FIXME: 전역상태로 야놀자 연동 여부 확인하도록 수정 - const { getProfileData } = useProfileApi(); - const [userProfile, setUserProfile] = useState(); - const isConnected = userProfile?.linkedToYanolja; + const userInfo = useLoadUserInfo(true); + const isLoggedIn = useAuthStore((state) => state.isLoggedIn); + const isConnected = userInfo?.linkedToYanolja; localStorage.setItem("isConnected", JSON.stringify(isConnected)); - const fetchUserProfile = async () => { - try { - const res = await getProfileData(END_POINTS.USER_INFO); - setUserProfile(res); - } catch (err) { - console.log(err); - } - }; - - useEffect(() => { - fetchUserProfile(); - // eslint-disable-next-line - }, []); const connectToYanolja = () => { navigate(PATH.YANOLJA_ACCOUNT); @@ -36,12 +20,12 @@ const MyPage = () => { return ( - {userProfile ? ( -

{userProfile.email} 님

+ {isLoggedIn && userInfo ? ( +

{userInfo.email} 님

) : (

로그인 후 판매글을 작성해보세요

)} - {!userProfile ? ( + {!userInfo ? ( ) : isConnected ? ( 야놀자와 연동된 계정입니다 diff --git a/src/pages/myPage/info/Info.tsx b/src/pages/myPage/info/Info.tsx index 26c98407..f3dcc955 100644 --- a/src/pages/myPage/info/Info.tsx +++ b/src/pages/myPage/info/Info.tsx @@ -5,18 +5,21 @@ import { PATH } from "@constants/path"; import { logout } from "@apis/logout"; import useToastConfig from "@hooks/common/useToastConfig"; import useAuthStore from "@/store/authStore"; +import { ACCESS_TOKEN, REFRESH_TOKEN } from "@/constants/api"; const Info = () => { const navigate = useNavigate(); const { handleToast } = useToastConfig(); const [showLogoutModal, setShowLogoutModal] = useState(false); + const isLoggedIn = useAuthStore((state) => state.isLoggedIn); const setIsLoggedIn = useAuthStore((state) => state.setIsLoggedIn); const infoList = [ { name: "문의하기", handler: () => alert("문의하기") }, - { name: "로그아웃", handler: () => setShowLogoutModal(true) }, + isLoggedIn + ? { name: "로그아웃", handler: () => setShowLogoutModal(true) } + : { name: "로그인", handler: () => navigate(PATH.LOGIN) }, ]; - const logoutCancelHandler = () => { setShowLogoutModal(false); }; @@ -24,7 +27,8 @@ const Info = () => { const logoutConfirmHandler = async () => { try { await logout(); - localStorage.clear(); + localStorage.removeItem(ACCESS_TOKEN); + localStorage.removeItem(REFRESH_TOKEN); setIsLoggedIn(false); navigate(PATH.ROOT); } catch (err) { diff --git a/src/pages/myPage/manage/Manage.tsx b/src/pages/myPage/manage/Manage.tsx index 2ec7d576..cacad31b 100644 --- a/src/pages/myPage/manage/Manage.tsx +++ b/src/pages/myPage/manage/Manage.tsx @@ -1,40 +1,22 @@ import { PATH } from "@constants/path"; import * as S from "./Manage.style"; import rightArrow from "@assets/icons/RightArrow.svg"; -import useProfileApi from "@apis/useProfileApi"; -import { useEffect, useState } from "react"; -import type { ProfileData } from "./manageProfile/ManageProfile.type"; -import { END_POINTS } from "@constants/api"; +import { useLoadUserInfo } from "@/hooks/common/useLoadUserInfo"; const Manage = () => { const manageList = [ { path: PATH.MANAGE_PROFILE, name: "프로필 변경" }, { path: PATH.MANAGE_ACCOUNT, name: "정산 계좌 관리" }, ]; - // FIXME: 전역 상태로 야놀자 연동여부를 체크하도록 변경 - const { getProfileData } = useProfileApi(); - const [userProfile, setUserProfile] = useState(); - const fetchUserProfile = async () => { - try { - const res = await getProfileData(END_POINTS.USER_INFO); - setUserProfile(res); - } catch (err) { - console.log(err); - } - }; - - useEffect(() => { - fetchUserProfile(); - // eslint-disable-next-line - }, []); + const userInfo = useLoadUserInfo(true); return (

관리

{manageList.map((item, index) => { const hideAccountManage = - index === 1 && userProfile?.linkedToYanolja === false; + index === 1 && userInfo?.linkedToYanolja === false; return ( diff --git a/src/pages/myPage/manage/manageAccount/ManageAccount.tsx b/src/pages/myPage/manage/manageAccount/ManageAccount.tsx index 79f7551a..2e5f4f60 100644 --- a/src/pages/myPage/manage/manageAccount/ManageAccount.tsx +++ b/src/pages/myPage/manage/manageAccount/ManageAccount.tsx @@ -5,7 +5,7 @@ import AccountInfo from "../accountInfo/AccountInfo"; import { useNavigate, useSearchParams } from "react-router-dom"; import { PATH } from "@constants/path"; import useToastConfig from "@hooks/common/useToastConfig"; -import { useAccountQuery } from "@/hooks/api/useMyPageQuery"; +import { useAccountQuery } from "@/hooks/api/useUserInfoQuery"; const ManageAccount = () => { const navigate = useNavigate(); @@ -22,6 +22,7 @@ const ManageAccount = () => { if (search.get("step") && search.get("step") !== "first") { navigate(PATH.MANAGE_ACCOUNT, { replace: true }); } + // eslint-disable-next-line react-hooks/exhaustive-deps }, [search]); const { data } = useAccountQuery(); diff --git a/src/pages/myPage/manage/manageName/ManageName.tsx b/src/pages/myPage/manage/manageName/ManageName.tsx index 5d547668..57928956 100644 --- a/src/pages/myPage/manage/manageName/ManageName.tsx +++ b/src/pages/myPage/manage/manageName/ManageName.tsx @@ -1,8 +1,8 @@ import { useRef, useState } from "react"; import * as S from "./ManageName.style"; -// import Toast from "@/components/toast/Toast"; -import useProfileApi from "@/apis/useProfileApi"; import useToastConfig from "@hooks/common/useToastConfig"; +import { changeName } from "@/apis/fetchUserInfo"; +import { KOREAN_REGEX } from "@/constants/regex"; const ManageName = ({ prevName, @@ -14,8 +14,6 @@ const ManageName = ({ const [name, setName] = useState(prevName); const [isChanging, setIsChanging] = useState(false); const inputRef = useRef(null); - const koreanRegex = /^[ㄱ-ㅎ가-힣ㅏ-ㅣ]+$/; - const { changeName } = useProfileApi(); const { handleToast } = useToastConfig(); const nameChangeHandler = (event: React.ChangeEvent) => { @@ -32,7 +30,7 @@ const ManageName = ({ setIsChanging(false); if (prevName === name) return; try { - await changeName("/v1/members/name", name).then(() => { + await changeName(name).then(() => { handleToast(true, [<>이름이 성공적으로 변경되었습니다!]); }); } catch (err) { @@ -50,7 +48,7 @@ const ManageName = ({ }; } - if (!koreanRegex.test(name)) { + if (!KOREAN_REGEX.test(name)) { return { helpMessage: "이름은 한글로만 입력해 주세요", state: "onError", diff --git a/src/pages/myPage/manage/managePhoneNumber/ManagePhoneNumber.tsx b/src/pages/myPage/manage/managePhoneNumber/ManagePhoneNumber.tsx index 728918af..34348578 100644 --- a/src/pages/myPage/manage/managePhoneNumber/ManagePhoneNumber.tsx +++ b/src/pages/myPage/manage/managePhoneNumber/ManagePhoneNumber.tsx @@ -1,7 +1,8 @@ import { useRef, useState } from "react"; import * as S from "./ManagePhoneNumber.style"; -import useProfileApi from "@/apis/useProfileApi"; import useToastConfig from "@hooks/common/useToastConfig"; +import { changeNumber } from "@/apis/fetchUserInfo"; +import { useUserInfoStore } from "@/store/store"; const ManagePhoneNumber = ({ prevPhoneNumber, @@ -11,8 +12,8 @@ const ManagePhoneNumber = ({ const [phoneNumber, setPhoneNumber] = useState(prevPhoneNumber); const [isChanging, setIsChanging] = useState(false); const inputRef = useRef(null); - const { changeNumber } = useProfileApi(); const { handleToast } = useToastConfig(); + const setUserInfo = useUserInfoStore((state) => state.setUserInfo); const phoneNumberChangeHandler = ( event: React.ChangeEvent, @@ -30,7 +31,8 @@ const ManagePhoneNumber = ({ setIsChanging(false); if (prevPhoneNumber === phoneNumber) return; try { - await changeNumber("/v1/members/phone", phoneNumber).then(() => { + await changeNumber(phoneNumber).then(() => { + setUserInfo({ phone: phoneNumber }); handleToast(true, [<>전화번호가 성공적으로 변경되었습니다!]); }); } catch (err) { diff --git a/src/pages/myPage/manage/manageProfile/ManageProfile.style.ts b/src/pages/myPage/manage/manageProfile/ManageProfile.style.ts index 02d7760f..b0f30a96 100644 --- a/src/pages/myPage/manage/manageProfile/ManageProfile.style.ts +++ b/src/pages/myPage/manage/manageProfile/ManageProfile.style.ts @@ -1,7 +1,7 @@ import styled from "styled-components"; export const ManageContainer = styled.div` - padding: 32px 20px; + padding-top: 56px; h1 { ${({ theme }) => theme.typo.body2} @@ -12,6 +12,8 @@ export const ManageContainer = styled.div` `; export const ManageInfoWrapper = styled.div` + padding: 1.25rem; + ${({ theme }) => theme.typo.body4} color: ${({ theme }) => theme.color.black}; diff --git a/src/pages/myPage/manage/manageProfile/ManageProfile.tsx b/src/pages/myPage/manage/manageProfile/ManageProfile.tsx index bf6b8a5d..02578f1e 100644 --- a/src/pages/myPage/manage/manageProfile/ManageProfile.tsx +++ b/src/pages/myPage/manage/manageProfile/ManageProfile.tsx @@ -2,46 +2,23 @@ import ManageEmail from "../manageEmail/ManageEmail"; import ManageName from "../manageName/ManageName"; import ManagePhoneNumber from "../managePhoneNumber/ManagePhoneNumber"; import * as S from "./ManageProfile.style"; -import useProfileApi from "@/apis/useProfileApi"; -import type { ProfileData } from "./ManageProfile.type"; -import { useEffect, useState } from "react"; -import { END_POINTS } from "@constants/api"; -const ManageProfile = () => { - const { getProfileData } = useProfileApi(); - const [userProfile, setUserProfile] = useState(); - const [isLoading, setIsLoading] = useState(true); - - const fetchUserProfile = async () => { - try { - const res = await getProfileData(END_POINTS.USER_INFO); - setUserProfile(res); - } catch (err) { - console.log(err); - } finally { - setIsLoading(false); - } - }; - - useEffect(() => { - fetchUserProfile(); - // eslint-disable-next-line - }, []); +import { useUserInfoQuery } from "@/hooks/api/useUserInfoQuery"; - if (isLoading) return
Loading...
; - - if (!userProfile) return
Data Fetching Error
; +const ManageProfile = () => { + const { data: userInfo } = useUserInfoQuery(); + if (!userInfo) throw new Error("계정을 찾을 수 없습니다"); return ( -

나의 계정

- +

나의 계정

+ - + ); diff --git a/src/pages/transferWritingPage/TransferWriting.tsx b/src/pages/transferWritingPage/TransferWriting.tsx index ce922327..1b9f32a8 100644 --- a/src/pages/transferWritingPage/TransferWriting.tsx +++ b/src/pages/transferWritingPage/TransferWriting.tsx @@ -15,7 +15,6 @@ import { ResponseError } from "@/components/error/Error"; const TransferWriting = () => { const { handleToast } = useToastConfig(); - // FIXME: 유저 정보 전역으로 관리 const { data: userData, isLoading } = useQuery({ queryKey: ["UserInfo"], queryFn: fetchUserInfo, From 2b2474521690bc2b198e361515474dc87cb16301 Mon Sep 17 00:00:00 2001 From: Park Nayoung <139189221+im-na0@users.noreply.github.com> Date: Sun, 28 Jan 2024 15:50:43 +0900 Subject: [PATCH 12/12] =?UTF-8?q?fix:=20=EB=B9=8C=EB=93=9C=20=EC=97=90?= =?UTF-8?q?=EB=9F=AC=20=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../myPage/manage/registerAccount/RegisterAccount.tsx | 8 ++++---- .../components/filterModal/FilterModal.style.ts | 3 ++- .../accountSection/AccountSection.tsx | 4 ++-- 3 files changed, 8 insertions(+), 7 deletions(-) diff --git a/src/pages/myPage/manage/registerAccount/RegisterAccount.tsx b/src/pages/myPage/manage/registerAccount/RegisterAccount.tsx index 4f446b4f..a658d2f3 100644 --- a/src/pages/myPage/manage/registerAccount/RegisterAccount.tsx +++ b/src/pages/myPage/manage/registerAccount/RegisterAccount.tsx @@ -3,16 +3,16 @@ import * as S from "./RegisterAccount.style"; import { useNavigate, useSearchParams } from "react-router-dom"; import TermsAgreement from "@/components/account/termsAgreement/TermsAgreement"; import EnterAccountInfo from "@/components/account/enterAccountInfo/EnterAccountInfo"; -import type { AccountProps } from "@/types/account"; import { PATH } from "@constants/path"; +import type { AccountData } from "@/types/profile"; const RegisterAccount = () => { const navigate = useNavigate(); const [step, setStep] = useState("first"); const [path, setPath] = useSearchParams(); - const [accountInfo, setAccountInfo] = useState({ - accountNumber: undefined, - bank: undefined, + const [accountInfo, setAccountInfo] = useState({ + accountNumber: null, + bank: null, }); const handleStep = (step: string) => { diff --git a/src/pages/searchPage/components/filterModal/FilterModal.style.ts b/src/pages/searchPage/components/filterModal/FilterModal.style.ts index 8ca219c6..f757e19c 100644 --- a/src/pages/searchPage/components/filterModal/FilterModal.style.ts +++ b/src/pages/searchPage/components/filterModal/FilterModal.style.ts @@ -1,6 +1,7 @@ import styled from "styled-components"; import CloseButton from "@assets/icons/ic_close-button.svg?react"; import WarningIcon from "@assets/icons/ic_warning.svg?react"; +import { motion } from "framer-motion"; export const ModalContainer = styled.div` display: flex; @@ -15,7 +16,7 @@ export const ModalContainer = styled.div` z-index: 11; `; -export const ModalContent = styled.div` +export const ModalContent = styled(motion.div)` max-width: 768px; min-width: 360px; width: 100%; diff --git a/src/pages/transferWritingPricePage/accountSection/AccountSection.tsx b/src/pages/transferWritingPricePage/accountSection/AccountSection.tsx index f7a17c43..df2848e7 100644 --- a/src/pages/transferWritingPricePage/accountSection/AccountSection.tsx +++ b/src/pages/transferWritingPricePage/accountSection/AccountSection.tsx @@ -1,10 +1,10 @@ -import { IUserInfo } from "@/types/userInfo"; +import type { ProfileData } from "@/types/profile"; import * as S from "./AccountSection.style"; interface AccountProps { bank: string | null; accountNumber: string | null; - userInfo?: IUserInfo; + userInfo?: ProfileData; onSetAccount: React.Dispatch>; }