feat: 회원정보 수정 320px (#289)

Author: goodsmell

src/pages/myPage/AccountDelete/AccountDelete.css

@@ -2,12 +2,13 @@ import axios from "axios";
 import Cookies from "js-cookie";
 
 import SmallOnOffBtn from "../../../components/button/RoundBtn_135_40";
-
+import useWindowDimensions from "@/hooks/useWindowDimensions";
 import { SERVER_URL } from "../../../constants/ServerURL";
 
-import "./AccountDelete.css";
+import "./AccountDelete.scss";
 
 const AccountDelete = ({ setIsAccountSuccessfullyDeleted }) => {
+  const { isSmallMobile, isMobile } = useWindowDimensions().widthConditions;
   const onClickDeleteAccountConfirm = async () => {
     try {
       await axios.delete(`${SERVER_URL}profile/deleteUser`, {
@@ -25,21 +26,26 @@ const AccountDelete = ({ setIsAccountSuccessfullyDeleted }) => {
 
   return (
     <div className="account-delete">
-      <h1>계정 삭제</h1>
-      <p className="p-medium-regular" id="title">
+      <p className={`${isSmallMobile ? "p-medium-bold" : "h4-bold"}`}>
+        계정 삭제
+      </p>
+      <p
+        className={`${isSmallMobile ? "p-xs-regular" : "p-medium-regular"}`}
+        id="title"
+      >
         잠깐! 정말 떠나실 건가요...?
       </p>
       <div className="delete-wrap">
         <p className="p-small-bold" id="check">
           아래 내용을 확인해주세요.
         </p>
-        <ul>
+        <ul className={`${isSmallMobile ? "p-12-regular" : "p-small-regular"}`}>
           <li>등록한 작품 및 구매한 작품에 대한 기록이 사라져요.</li>
           <li>프로필, 희망 대본 신청 내역이 모두 사라져요.</li>
           <li>구매 작품에 대한 문의사항 및 후기도 삭제돼요.</li>
         </ul>
       </div>
-      <div className="j-content-end" id="btn-wrap">
+      <div className=" j-content-end" id="btn-wrap">
         <SmallOnOffBtn onClick={onClickDeleteAccountConfirm} color="grey">
           계정 삭제하기
         </SmallOnOffBtn>

src/pages/myPage/AccountDelete/AccountDelete.jsx

@@ -0,0 +1,60 @@
+@use "../../../styles/_responsive.scss" as r;
+
+.account-delete {
+  width: 414px;
+
+  @include r.media-small-mobile {
+    width: 268px;
+  }
+}
+
+.account-delete p#title {
+  margin-top: 45px;
+  margin-bottom: 26px;
+
+  @include r.media-small-mobile {
+    margin-top: 10px;
+    margin-bottom: 30px;
+  }
+}
+
+.account-delete .delete-wrap {
+  padding-top: 26px;
+  padding-left: 27px;
+  padding-bottom: 45px;
+
+  border-radius: 20px;
+  border: 2px dashed var(--Main, #9591f2);
+
+  @include r.media-small-mobile {
+    padding-top: 20px;
+    padding-left: 20px;
+    padding-bottom: 25px;
+    padding-right: 16px;
+  }
+}
+
+.account-delete .delete-wrap p#check {
+  margin: 0;
+  margin-bottom: 35px;
+  @include r.media-small-mobile {
+    margin-bottom: 25px;
+  }
+}
+
+.account-delete .delete-wrap ul {
+  padding-left: 25px;
+  @include r.media-small-mobile {
+    padding-left: 15px;
+  }
+}
+
+.account-delete .delete-wrap li {
+  margin-bottom: 11px;
+  color: #000;
+}
+
+.account-delete div#btn-wrap {
+  gap: 0.94rem;
+  margin-top: 49px;
+}

src/pages/myPage/AccountDelete/AccountDelete.scss

@@ -4,25 +4,33 @@ import { useNavigate } from "react-router-dom";
 import AuthContext from "../../../contexts/AuthContext";
 
 import check from "../../../assets/image/myPage/check.svg";
-
+import useWindowDimensions from "@/hooks/useWindowDimensions";
 import "./AccountDeleteSuccess.scss";
 
 const AccountDeleteSuccess = () => {
   const navigate = useNavigate();
   const { logout } = useContext(AuthContext);
+  const { isSmallMobile, isMobile } = useWindowDimensions().widthConditions;
   return (
     <div className="delete-complete">
-      <h1>계정 삭제</h1>
+      <p className={`${isSmallMobile ? "p-medium-bold" : "h4-bold"}`}>
+        계정 삭제
+      </p>
       <div className="delete-complete-wrap">
-        <div className="delete-complete-box">
+        <div
+          className={`delete-complete-box ${
+            isSmallMobile ? "p-12-regular" : "p-small-regular"
+          }`}
+        >
           <p>계정 삭제가 완료되었습니다.</p>
           <p>그동안 포도상점을 이용해주셔서 진심으로 감사합니다.</p>
+
           <p>더욱 성장하는 포도상점이 되겠습니다.</p>
         </div>
         <img src={check} alt="check"></img>
       </div>
       <button
-        className="main-page-btn"
+        className={`main-page-btn p-large-bold`}
         onClick={() => {
           logout();
           navigate("/");

src/pages/myPage/AccountDelete/AccountDeleteSuccess.jsx

@@ -1,4 +1,5 @@
 @use "./../../../components/button/_mixins.scss" as m;
+@use "../../../styles/_responsive.scss" as r;
 
 .delete-complete .delete-complete-wrap {
   display: flex;
@@ -7,16 +8,27 @@
   position: relative;
 
   margin-top: 72px;
+
+  width: 414px;
+
+  @include r.media-small-mobile {
+    width: 268px;
+    margin-top: 69px;
+  }
 }
 
 .delete-complete .delete-complete-box {
-  padding: 2.69rem 1.69rem;
+  padding: 43px 27px 39px;
 
   width: 100%;
 
   box-sizing: border-box;
-  border-radius: 1.25rem;
+  border-radius: 20px;
   border: 2px dashed var(--Main, #9591f2);
+
+  @include r.media-small-mobile {
+    padding: 42px 42px;
+  }
 }
 
 .delete-complete .delete-complete-wrap img {
@@ -32,20 +44,15 @@
   text-align: center;
 
   color: #000;
-  text-align: center;
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: normal;
 }
 
 .delete-complete .main-page-btn {
   @include m.purple-btn;
 
-  margin-top: 2.5rem;
+  margin-top: 32px;
 
   width: 414px;
-  height: 3rem;
+  height: 48px;
 
   border: none;
   border-radius: 1.875rem;
@@ -55,10 +62,8 @@
 
   color: #fff;
 
-  /* H5/Bold */
-  font-family: "Noto Sans KR";
-  font-size: 1.25rem;
-  font-style: normal;
-  font-weight: 700;
-  line-height: 1.75rem; /* 140% */
+  @include r.media-small-mobile {
+    width: 268px;
+    margin-top: 60px;
+  }
 }

src/pages/myPage/AccountDelete/AccountDeleteSuccess.scss

@@ -17,8 +17,10 @@ const AccountInfoChange = () => {
   const [changeShowPermission, setChangeShowPermission] = useState(false);
 
   // 계정 삭제
-  const [isDeleteAccountBtnClicked, setIsDeleteAccountBtnClicked] = useState(false);
-  const [isAccountSuccessfullyDeleted, setIsAccountSuccessfullyDeleted] = useState(false);
+  const [isDeleteAccountBtnClicked, setIsDeleteAccountBtnClicked] =
+    useState(false);
+  const [isAccountSuccessfullyDeleted, setIsAccountSuccessfullyDeleted] =
+    useState(false);
 
   const { userNickname } = useContext(AuthContext);
 
@@ -30,16 +32,24 @@ const AccountInfoChange = () => {
           <div className="content-side-inside">
             {!changeShowPermission ? (
               /* 회원 정보 수정 진입 페이지 */
-              <AccountInfoChangeEnter setChangeShowPermission={setChangeShowPermission} />
+              <AccountInfoChangeEnter
+                setChangeShowPermission={setChangeShowPermission}
+              />
             ) : isAccountSuccessfullyDeleted ? (
               /* 계정 삭제 완료 페이지 */
               <AccountDeleteSuccess />
             ) : isDeleteAccountBtnClicked ? (
               /* 계정 삭제 페이지 */
-              <AccountDelete setIsAccountSuccessfullyDeleted={setIsAccountSuccessfullyDeleted} />
+              <AccountDelete
+                setIsAccountSuccessfullyDeleted={
+                  setIsAccountSuccessfullyDeleted
+                }
+              />
             ) : (
               // 회원 정보 수정 페이지
-              <AccountInfoChangeMain setIsDeleteAccountBtnClicked={setIsDeleteAccountBtnClicked} />
+              <AccountInfoChangeMain
+                setIsDeleteAccountBtnClicked={setIsDeleteAccountBtnClicked}
+              />
             )}
           </div>
         </div>

src/pages/myPage/AccountInfoChange.jsx

@@ -18,7 +18,7 @@ const AccountInfoChangeEnter = ({ setChangeShowPermission }) => {
   const [showPwValid, setShowPwValid] = useState(false);
 
   const {
-    widthConditions: { isMobile },
+    widthConditions: { isMobile, isSmallMobile },
   } = useWindowDimensions();
 
   const onClickInputBtn = async () => {
@@ -53,9 +53,16 @@ const AccountInfoChangeEnter = ({ setChangeShowPermission }) => {
     <EnterForm onSubmit={onClickInputBtn}>
       <div className="info-change-enter">
         {/* 진입 페이지 */}
-        <h1>회원 정보 수정</h1>
-        <h6>회원 정보 수정을 위해서 비밀번호를 다시 한 번 입력해주세요.</h6>
-        <div className="a-items-start" id="enter-input">
+        <h4 className={`${isSmallMobile ? "p-medium-bold" : "h4-bold"}`}>
+          회원 정보 수정
+        </h4>
+        <h6 className={`${isSmallMobile ? "p-xs-medium" : "p-medium-medium"}`}>
+          회원 정보 수정을 위해서 비밀번호를 다시 한 번 입력해주세요.
+        </h6>
+        <div
+          className={` a-items-start ${isSmallMobile ? "w-[280px]" : ""}`}
+          id="enter-input"
+        >
           <AuthPwInputField
             placeholder="비밀번호를 입력해주세요."
             value={typedPassword}
@@ -65,7 +72,13 @@ const AccountInfoChangeEnter = ({ setChangeShowPermission }) => {
             }}
             errorFlag={showPwValid && !pwValid}
             errorMessage="비밀번호가 일치하지 않습니다."
-            style={isMobile ? { width: "332px" } : {}}
+            style={
+              isMobile
+                ? { width: "332px" }
+                : isSmallMobile
+                ? { width: "224px", height: "48px" }
+                : { width: "414px" }
+            }
           ></AuthPwInputField>
           <button
             className="p-small-bold c-white t-align-center c-pointer"