From 5ebf5c35fea1cf014602e7e84677661c5b09f065 Mon Sep 17 00:00:00 2001 From: taejun0 Date: Tue, 25 Feb 2025 18:40:34 +0900 Subject: [PATCH] =?UTF-8?q?design=20=EB=AA=A8=EB=8B=AC=20=EB=AA=A8?= =?UTF-8?q?=EC=85=98=20=EC=A0=81=EC=9A=A9=20=EB=B0=8F=20signup=20width=20?= =?UTF-8?q?=EC=A1=B0=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../common/choicemodal/ChoiceModal.jsx | 15 ++++++++++++++- .../FIlteringExplainModal.jsx | 15 ++++++++++++++- .../inputs/inputwithtitle/InputwithTitle.jsx | 1 + .../common/inputs/inputwithtitle/styled.js | 3 ++- src/components/common/signupmodal/LoginModal.jsx | 16 +++++++++++++++- .../common/signupmodal/SignupModal.jsx | 15 ++++++++++++++- src/components/common/signupmodal/styled.js | 2 +- .../layout/footer/mainfooter/styled.js | 2 +- src/pages/mainpage/MainPage.jsx | 16 ++++++++++++++-- src/pages/signuppage/styled.js | 4 ++-- 10 files changed, 78 insertions(+), 11 deletions(-) diff --git a/src/components/common/choicemodal/ChoiceModal.jsx b/src/components/common/choicemodal/ChoiceModal.jsx index b5553aa..3831074 100644 --- a/src/components/common/choicemodal/ChoiceModal.jsx +++ b/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 ( - + {onClose && } {type===1 &&} {type===2 &&} diff --git a/src/components/common/filteringexplainmodal/FIlteringExplainModal.jsx b/src/components/common/filteringexplainmodal/FIlteringExplainModal.jsx index 29305f2..4838e5a 100644 --- a/src/components/common/filteringexplainmodal/FIlteringExplainModal.jsx +++ b/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 ( - + diff --git a/src/components/common/inputs/inputwithtitle/InputwithTitle.jsx b/src/components/common/inputs/inputwithtitle/InputwithTitle.jsx index eaa73cb..e0272ab 100644 --- a/src/components/common/inputs/inputwithtitle/InputwithTitle.jsx +++ b/src/components/common/inputs/inputwithtitle/InputwithTitle.jsx @@ -25,6 +25,7 @@ export const InputwithTitle = ({ value={value} $errorMessage={errorMessage} $readOnly={readOnly} + $isNick={title} /> {(title === "비밀번호" || title === "비밀번호 확인") && ( <> diff --git a/src/components/common/inputs/inputwithtitle/styled.js b/src/components/common/inputs/inputwithtitle/styled.js index 59b7333..ad1f7f4 100644 --- a/src/components/common/inputs/inputwithtitle/styled.js +++ b/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}; diff --git a/src/components/common/signupmodal/LoginModal.jsx b/src/components/common/signupmodal/LoginModal.jsx index f7ca8c9..2db12cb 100644 --- a/src/components/common/signupmodal/LoginModal.jsx +++ b/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 ( - + 로그인 완료! diff --git a/src/components/common/signupmodal/SignupModal.jsx b/src/components/common/signupmodal/SignupModal.jsx index 15398c8..73edad8 100644 --- a/src/components/common/signupmodal/SignupModal.jsx +++ b/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 ( - + CARDO의 회원이 되신걸 diff --git a/src/components/common/signupmodal/styled.js b/src/components/common/signupmodal/styled.js index f50810e..8b44776 100644 --- a/src/components/common/signupmodal/styled.js +++ b/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; diff --git a/src/components/layout/footer/mainfooter/styled.js b/src/components/layout/footer/mainfooter/styled.js index 9ea9724..2f0a473 100644 --- a/src/components/layout/footer/mainfooter/styled.js +++ b/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; diff --git a/src/pages/mainpage/MainPage.jsx b/src/pages/mainpage/MainPage.jsx index 4ca9d4a..96b00fd 100644 --- a/src/pages/mainpage/MainPage.jsx +++ b/src/pages/mainpage/MainPage.jsx @@ -196,11 +196,23 @@ export const MainPage = () => { {isModalOpen2 && ( 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="새 카드 등록하기" diff --git a/src/pages/signuppage/styled.js b/src/pages/signuppage/styled.js index 499b529..806029c 100644 --- a/src/pages/signuppage/styled.js +++ b/src/pages/signuppage/styled.js @@ -19,7 +19,7 @@ export const SemiTitle = styled.div` export const Row = styled.div` display: flex; - width: 85%; + width: 100%; position: relative; `; @@ -27,7 +27,7 @@ export const IconBox = styled.div` display: flex; position: absolute; top: 0px; - right: -28px; + right: 7.5%; width: 52px; height: 52px; justify-content: center;