SCBJ-7 · im-na0 · Jan 28, 2024 · Jan 27, 2024 · Jan 28, 2024 · Jan 28, 2024
diff --git a/index.html b/index.html
@@ -39,10 +39,11 @@
     });
   </script>
   <body>
-    <div id="modal-root"></div>
     <div id="root"></div>
+    <div id="modal-root"></div>
     <div id="overlay-root"></div>
     <div id="modalTwo-root"></div>
+    <div id="app-install-pop"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>
diff --git 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<IUserInfo | undefined> => {
+export const fetchUserInfo = async (): Promise<ProfileData> => {
   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/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/apis/useProfileApi.ts b/src/apis/useProfileApi.ts
diff --git 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
@@ -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(
     <AnimatePresence mode="wait">
-      {deferredPrompt && (
+      {isShow && (
         <>
           <S.BackDrop
             initial="hidden"
             animate="visible"
             exit="hidden"
+            onClick={() => SetIsShow(false)}
             variants={backdropVariants}
-            transition={{ duration: 0.5, delay: 1 }}
+            transition={{ duration: 0.5 }}
           />
           <S.A2HSContainer
             initial="hidden"
             animate="visible"
             exit="hidden"
             variants={modalVariants}
-            transition={{ duration: 0.5, delay: 1 }}
+            transition={{ duration: 0.5 }}
           >
             <S.CloseButton type="button" onClick={clearPrompt}>
               <S.CloseIcon />
@@ -60,7 +64,7 @@ const A2HS = () => {
         </>
       )}
     </AnimatePresence>,
-    modalRoot,
+    appRoot,
   );
 };
 

diff --git a/src/components/account/enterAccountInfo/EnterAccountInfo.tsx b/src/components/account/enterAccountInfo/EnterAccountInfo.tsx
@@ -2,24 +2,26 @@ 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";
+import { useUserInfoStore } from "@/store/store";
 
 const EnterAccountInfo = ({
   accountInfo,
   setAccountInfo,
 }: {
-  accountInfo: AccountProps;
-  setAccountInfo?: React.Dispatch<React.SetStateAction<AccountProps>>;
+  accountInfo: AccountData;
+  setAccountInfo?: React.Dispatch<React.SetStateAction<AccountData>>;
 }) => {
   usePreventLeave(true);
   const { pathname } = useLocation();
   const navigate = useNavigate();
+  const setUserInfo = useUserInfoStore((state) => state.setUserInfo);
   const { handleToast } = useToastConfig();
   const controls = useAnimation();
   const accountNumberRef = useRef<HTMLInputElement>(null);
@@ -88,7 +90,7 @@ const EnterAccountInfo = ({
     if (!handleErrorToast()) {
       return;
     }
-    const updatedInfo: AccountProps = {
+    const updatedInfo: AccountData = {
       accountNumber: newAccountNumber,
       bank: newBank,
     };
@@ -98,6 +100,7 @@ const EnterAccountInfo = ({
       try {
         await patchAccount(updatedInfo).then(() => {
           setAccountInfo(updatedInfo);
+          setUserInfo(updatedInfo);
           handleToast(false, ["계좌 등록이 완료되었습니다!"]);
 
           navigate(PATH.MANAGE_ACCOUNT, { replace: true });
@@ -114,81 +117,68 @@ const EnterAccountInfo = ({
       try {
         await patchAccount(updatedInfo).then(() => {
           handleToast(false, ["계좌 변경이 완료되었습니다"]);
-
+          setUserInfo(updatedInfo);
           navigate(PATH.MANAGE_ACCOUNT, { replace: true });
         });
       } catch (err) {
         handleToast(true, [<>계좌 변경 실패. 다시 시도해 주세요</>]);
       }
     }
 
-    /** 양도글 작성 일 때,
-     if (pathname === PATH.양도글작성 && setAccountInfo) {
-       로직 작성...
-       return;
-     }
-    */
-
     return;
   };
 
   return (
-    <>
-      <S.Header>
-        <UndoIcon onClick={() => navigate(-1)} />
-        <h1>계좌 등록</h1>
-      </S.Header>
-      <S.EnterAccountInfoContainer>
-        <h1>입금받을 계좌를 등록해주세요</h1>
-        <S.AccountNumberInput
-          ref={accountNumberRef}
-          value={newAccountNumber}
-          onChange={(e) => accountOnChange(e)}
-        />
-        <S.BankInput
-          $bank={newBank}
-          $showBankList={showBankList}
-          onClick={() => setShowBankList(true)}
-        >
-          {newBank ? newBank : "은행"}
-        </S.BankInput>
-
-        <S.BackgroundBlur
-          $isVisible={showBankList}
-          onClick={() => setShowBankList(false)}
-        />
-        <AnimatePresence>
-          <S.BankListBottomSheet controls={controls}>
-            <h2>은행</h2>
-            <S.BankListContainer>
-              {BANK_LIST.map((item) => {
-                return (
-                  <S.BankListWrapper htmlFor={item.name} key={item.name}>
-                    <input
-                      type="radio"
-                      name="bank"
-                      value={item.name}
-                      id={item.name}
-                      onChange={(e) => bankOnChange(e)}
-                      checked={item.name === accountInfo?.bank}
-                    />
-                    <img src={item.img} />
-                    {item.name}
-                  </S.BankListWrapper>
-                );
-              })}
-            </S.BankListContainer>
-          </S.BankListBottomSheet>
-        </AnimatePresence>
-        <S.SubmitButton
-          onClick={onSubmit}
-          $disabled={!accountValidation}
-          $showBankList={showBankList}
-        >
-          {buttonText}
-        </S.SubmitButton>
-      </S.EnterAccountInfoContainer>
-    </>
+    <S.EnterAccountInfoContainer>
+      <h1>입금받을 계좌를 등록해주세요</h1>
+      <S.AccountNumberInput
+        ref={accountNumberRef}
+        value={newAccountNumber}
+        onChange={(e) => accountOnChange(e)}
+      />
+      <S.BankInput
+        $bank={newBank}
+        $showBankList={showBankList}
+        onClick={() => setShowBankList(true)}
+      >
+        {newBank ? newBank : "은행"}
+      </S.BankInput>
+
+      <S.BackgroundBlur
+        $isVisible={showBankList}
+        onClick={() => setShowBankList(false)}
+      />
+      <AnimatePresence>
+        <S.BankListBottomSheet controls={controls}>
+          <h2>은행</h2>
+          <S.BankListContainer>
+            {BANK_LIST.map((item) => {
+              return (
+                <S.BankListWrapper htmlFor={item.name} key={item.name}>
+                  <input
+                    type="radio"
+                    name="bank"
+                    value={item.name}
+                    id={item.name}
+                    onChange={(e) => bankOnChange(e)}
+                    checked={item.name === accountInfo?.bank}
+                  />
+                  <img src={item.img} />
+                  {item.name}
+                </S.BankListWrapper>
+              );
+            })}
+          </S.BankListContainer>
+        </S.BankListBottomSheet>
+      </AnimatePresence>
+      <S.SubmitButton
+        onClick={onSubmit}
+        $disabled={!accountValidation}
+        $showBankList={showBankList}
+      >
+        {buttonText}
+      </S.SubmitButton>
+    </S.EnterAccountInfoContainer>
   );
 };