🚀 Deploy

src/components/common/choicemodal/ChoiceModal.jsx

@@ -1,17 +1,30 @@
 import * as S from "./styled";
 
+import { motion } from "framer-motion";
+
 import modalX from "/images/apply/modalX.svg";
 import ApplySuccess from "/images/ApplySuccess.svg";
 import tryStart from "/images/tryStart.svg";
 
+const modalVariants = {
+  hidden: { y: "100%", opacity: 0 },
+  visible: { y: 0, opacity: 1, transition: { duration: 0.6, ease: "easeOut" } },
+  exit: { y: "100%", opacity: 0, transition: { duration: 0.3, ease: "easeIn" } },
+};
+
 export const ChoiceModal = ({ type, onClose, ContentTitle, ContentSemiTitle, ContentContent, LeftOnClick, LeftContent, RightOnClick, RightContent}) => {
   return (
     <S.Wrapper
+      as={motion.div}
+      initial="hidden"
+      animate="visible"
+      exit="exit"
+      variants={modalVariants}
       $height={type}
     >
       <S.TouchWrap />
       <S.ModalContent>
-        <S.Icon24 src={modalX} onClick={onClose}/>  
+        {onClose && <S.Icon24 src={modalX} onClick={onClose}/>  }
 
         {type===1 &&<S.thinkEmoji src={ApplySuccess}/>}
         {type===2 &&<S.thinkEmoji src={tryStart}/>}

src/components/common/filteringexplainmodal/FIlteringExplainModal.jsx

@@ -3,10 +3,23 @@ import * as S from "./styled";
 import modalX from "/images/apply/modalX.svg";
 import thinkman from "/images/apply/thinkman.svg";
 import { OneButton } from "../buttons/OneButton";
+import { motion } from "framer-motion";
+
+const modalVariants = {
+  hidden: { y: "100%", opacity: 0 },
+  visible: { y: 0, opacity: 1, transition: { duration: 0.6, ease: "easeOut" } },
+  exit: { y: "100%", opacity: 0, transition: { duration: 0.3, ease: "easeIn" } },
+};
 
 export const FilteringExplainModal = ({ onClose }) => {
   return (
-    <S.Wrapper>
+    <S.Wrapper
+      as={motion.div}
+      initial="hidden"
+      animate="visible"
+      exit="exit"
+      variants={modalVariants}
+    >
       <S.CloseBack onClick={onClose}/>
 
       <S.ModalContent>

src/components/common/inputs/inputwithtitle/InputwithTitle.jsx

@@ -25,6 +25,7 @@ export const InputwithTitle = ({
         value={value}
         $errorMessage={errorMessage}
         $readOnly={readOnly}
+        $isNick={title}
       />
       {(title === "비밀번호" || title === "비밀번호 확인") && (
         <>

src/components/common/inputs/inputwithtitle/styled.js

@@ -28,7 +28,8 @@ export const ConTitle = styled.div`
 
 export const Container = styled.input`
   display: flex;
-  width: 85%;
+  width: ${({ $isNick }) => ($isNick === "닉네임" ? "calc(85% - 60px)" : "85%")};
+  margin-right: ${({ $isNick }) => ($isNick === "닉네임" ? "60px" : "0")};
   height: 3.25rem; /* 52px */
   border-radius: 10px;
   border: 1px solid ${({ theme, $errorMessage }) => $errorMessage ? theme.colors.red : theme.colors.black};

src/components/common/signupmodal/LoginModal.jsx

@@ -2,11 +2,25 @@ import * as S from "./styled";
 import useCustomNavigate from "@hooks/useCustomNavigate";
 import image from "/images/signup/check.svg";
 
+import { motion } from "framer-motion";
+
+const modalVariants = {
+  hidden: { y: "100%", opacity: 0 },
+  visible: { y: 0, opacity: 1, transition: { duration: 0.6, ease: "easeOut" } },
+  exit: { y: "100%", opacity: 0, transition: { duration: 0.3, ease: "easeIn" } },
+};
+
 export const LoginModal = () => {
   const { goToPage } = useCustomNavigate();
 
   return (
-    <S.Wrapper>
+    <S.Wrapper
+      as={motion.div}
+      initial="hidden"
+      animate="visible"
+      exit="exit"
+      variants={modalVariants}
+    >
       <S.Images src={image} />
       <S.NoticeBox>
         <S.Notice>로그인 완료!</S.Notice>

src/components/common/signupmodal/SignupModal.jsx

@@ -1,11 +1,24 @@
 import * as S from "./styled";
 import useCustomNavigate from "@hooks/useCustomNavigate";
 import image from "/images/signup/check.svg";
+import { motion } from "framer-motion";
+
+const modalVariants = {
+  hidden: { y: "100%", opacity: 0 },
+  visible: { y: 0, opacity: 1, transition: { duration: 0.6, ease: "easeOut" } },
+  exit: { y: "100%", opacity: 0, transition: { duration: 0.3, ease: "easeIn" } },
+};
 
 export const SignupModal = () => {
   const { goToPage } = useCustomNavigate();
   return (
-    <S.Wrapper>
+    <S.Wrapper
+      as={motion.div}
+      initial="hidden"
+      animate="visible"
+      exit="exit"
+      variants={modalVariants}
+    >
       <S.Images src={image} />
       <S.NoticeBox>
         <S.Notice>CARDO의 회원이 되신걸</S.Notice>

src/components/common/signupmodal/styled.js

@@ -36,7 +36,7 @@ export const Container = styled.div`
   display: flex;
   justify-content: center;
   align-items: center;
-  width: 20.75rem;
+  width: 85%;
   height: 4rem;
 
   position: absolute;

src/components/layout/footer/mainfooter/styled.js

@@ -1,7 +1,7 @@
 import styled from "styled-components";
 
 export const Wrapper = styled.div`
-  position: relative;
+  position: fixed;
   width: 100%;
   height: 100px;
   left: 0;

src/pages/mainpage/MainPage.jsx

@@ -196,11 +196,23 @@ export const MainPage = () => {
       {isModalOpen2 && (
         <ChoiceModal
           type={4}
-          onClose={() => setIsModalOpen2(false)}
+          onClose={() => {
+            if (window.location.pathname === "/main") {
+              window.location.reload(); // ✅ 강제 새로고침
+            } else {
+              goToPage("/main"); // ✅ 다른 페이지라면 main으로 이동
+            }
+          }}
           ContentTitle={"현재 진행 중인 경험을 그만두시겠어요?"}
           ContentSemiTitle={"이 경험을 종료하면 다시 선택할 수 없어요."}
           ContentContent={["'취소'를 원하시면 팝업창을 닫아주세요!"]}
-          LeftOnClick={() => setIsModalOpen2(false)}
+          LeftOnClick={() => {
+            if (window.location.pathname === "/main") {
+              window.location.reload(); // ✅ 강제 새로고침
+            } else {
+              goToPage("/main"); // ✅ 다른 페이지라면 main으로 이동
+            }
+          }}
           LeftContent="메인으로"
           RightOnClick={() => goToPage("/apply")}
           RightContent="새 카드 등록하기"

src/pages/signuppage/styled.js

@@ -19,15 +19,15 @@ export const SemiTitle = styled.div`
 
 export const Row = styled.div`
   display: flex;
-  width: 85%;
+  width: 100%;
   position: relative;
 `;
 
 export const IconBox = styled.div`
   display: flex;
   position: absolute;
   top: 0px;
-  right: -28px;
+  right: 7.5%;
   width: 52px;
   height: 52px;
   justify-content: center;