Merge pull request #802 from snorose/origin/fix/#789-change-illustrat…

…ions #789 [FIX] 일러스트를 사람에서 별 모양 일러스트로 수정
snorose · Jan 24, 2025 · 79a14f7 · 79a14f7
2 parents 7f7dc8a + 9fc5838
commit 79a14f7
Show file tree

Hide file tree

Showing 14 changed files with 87 additions and 82 deletions.
diff --git a/src/assets/icon.svg b/src/assets/icon.svg
diff --git a/src/pages/LoginPage/FindIdPage/FindIdPage.module.css b/src/pages/LoginPage/FindIdPage/FindIdPage.module.css
@@ -11,11 +11,9 @@
 .pageFrame form {
   width: 100%;
   height: 100%;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
 }
 .back {
+  margin-top: 0.875rem;
   margin-bottom: 0.875rem;
 }
 .back:hover {
@@ -24,6 +22,7 @@
 
 .findIdFrame {
   width: 100%;
+  height: 100%;
   display: flex;
   flex-direction: column;
   justify-content: space-between;

diff --git a/src/pages/LoginPage/FoundIdPage/FoundIdPage.jsx b/src/pages/LoginPage/FoundIdPage/FoundIdPage.jsx
@@ -4,8 +4,6 @@ import { useLocation, Link, useNavigate } from 'react-router-dom';
 import { Icon } from '@/components/Icon';
 import { Submit } from '@/components/Submit';
 
-import excitedWoman from '@/assets/images/excitedWoman.svg';
-
 import styles from './FoundIdPage.module.css';
 import { BackAppBar } from '@/components/index.js';
 
@@ -36,15 +34,10 @@ export default function FoundIdPage() {
           <span className={`${styles.dot} ${styles.third}`}></span>
         </div>
       </div>
+      <div className={styles.pageMiddleFrame}>
+        <Icon id='star-mail' width={231} height={217} />
+      </div>
       <div className={styles.pageBottomFrame}>
-        <div className={styles.bodyFrame}>
-          <img
-            src={excitedWoman}
-            alt='frustrated woman image'
-            className={styles.img}
-          />
-        </div>
-
         <Link to='/login'>
           <div className={styles.loginButton}>
             <Submit btnName='로그인하기' className='right' />

diff --git a/src/pages/LoginPage/FoundIdPage/FoundIdPage.module.css b/src/pages/LoginPage/FoundIdPage/FoundIdPage.module.css
@@ -14,7 +14,7 @@
 .pageTitle {
   font-size: 1.25rem;
   font-weight: 700;
-  margin-top: 0.875rem;
+  margin-top: 3.2rem;
 }
 
 .pageExplanation {
@@ -70,11 +70,10 @@
   background-color: var(--blue-4);
 }
 
-.img {
-  width: 13.25rem;
-  height: 14.5rem;
-  margin-bottom: 1.875rem;
-  margin-left: auto;
+.pageMiddleFrame {
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
 .loginButton {

diff --git a/src/pages/LoginPage/FoundPwPage/FoundPwPage.jsx b/src/pages/LoginPage/FoundPwPage/FoundPwPage.jsx
@@ -4,8 +4,6 @@ import { useLocation, Link, useNavigate } from 'react-router-dom';
 import { Icon } from '@/components/Icon';
 import { Submit } from '@/components/Submit';
 
-import EnlightenedWoman from '@/assets/images/EnlightenedWoman.svg';
-
 import styles from './FoundPwPage.module.css';
 import { BackAppBar } from '@/components/index.js';
 
@@ -24,7 +22,7 @@ export default function FoundPwPage() {
   return (
     <div className={styles.pageFrame}>
       <BackAppBar backNavTo='/login' />
-      <div className={styles.pageBottomFrame}>
+      <div className={styles.pageTopFrame}>
         <p className={styles.pageTitle}>비밀번호 찾기</p>
         <p className={styles.pageSubtitle}>
           비밀번호 초기화 이메일이 발송되었어요
@@ -43,14 +41,10 @@ export default function FoundPwPage() {
           </div>
         </div>
       </div>
+      <div className={styles.pageMiddleFrame}>
+        <Icon id='star-mail' width={231} height={217} />
+      </div>
       <div className={styles.pageBottomFrame}>
-        <div className={styles.bodyFrame}>
-          <img
-            src={EnlightenedWoman}
-            alt='frustrated woman image'
-            className={styles.img}
-          />
-        </div>
         <Link to='/find-pw'>
           <div className={styles.loginButton}>
             <Submit btnName='뒤로가기' className='right' />

diff --git a/src/pages/LoginPage/FoundPwPage/FoundPwPage.module.css b/src/pages/LoginPage/FoundPwPage/FoundPwPage.module.css
@@ -7,14 +7,17 @@
   margin: 0 auto;
 }
 
-.pageBottomFrame {
+.pageTopFrame {
   padding: 0 1.25rem;
+  display: flex;
+  flex-direction: column;
 }
 
 .pageTitle {
   font-size: 1.25rem;
   font-weight: 700;
-  margin: 0.875rem 0;
+  margin-top: 3.2rem;
+  margin-bottom: 0.813rem;
 }
 
 .pageSubtitle {
@@ -30,17 +33,16 @@
   margin-bottom: 1rem;
 }
 
-.pageBottomFrame {
-  padding: 0 1.25rem;
+.pageMiddleFrame {
   display: flex;
-  flex-direction: column;
+  justify-content: center;
+  align-items: center;
 }
 
-.bodyFrame {
+.pageBottomFrame {
+  padding: 0 1.25rem;
   display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  position: relative;
+  flex-direction: column;
 }
 
 .resultFrame {

diff --git a/src/pages/LoginPage/NotFoundIdPage/NotFoundIdPage.jsx b/src/pages/LoginPage/NotFoundIdPage/NotFoundIdPage.jsx
@@ -2,8 +2,7 @@ import { useEffect } from 'react';
 import { Link, useLocation, useNavigate } from 'react-router-dom';
 
 import { Submit } from '@/components/Submit';
-
-import frustratedWoman from '@/assets/images/frustratedWoman.svg';
+import { Icon } from '@/components/Icon';
 
 import styles from './NotFoundIdPage.module.css';
 import { BackAppBar } from '@/components/index.js';
@@ -21,19 +20,24 @@ export default function NotFoundIdPage() {
 
   return (
     <div className={styles.pageFrame}>
-      <BackAppBar backNavTo='/login' />
+      <BackAppBar backNavTo='/login' classname={styles.backAppBar} />
       <div className={styles.pageTopFrame}>
-        <p className={styles.pageTitle}>아이디 찾기</p>
-        <p className={styles.pageExplanation}>
-          입력하신 정보와 일치하는 정보가 없어요
-        </p>
+        <div className={styles.explanation}>
+          <p className={styles.pageTitle}>아이디 찾기</p>
+          <p className={styles.pageExplanation}>
+            입력하신 정보와 일치하는 정보가 없어요
+          </p>
+        </div>
       </div>
-      <div className={styles.pageBottomFrame}>
-        <img
-          src={frustratedWoman}
-          alt='frustrated woman image'
-          className={styles.img}
+      <div className={styles.pageMiddleFrame}>
+        <Icon
+          id='star-alert'
+          className={styles.starAlert}
+          width={231}
+          height={217}
         />
+      </div>
+      <div className={styles.pageBottomFrame}>
         <Link to='/find-id'>
           <div className={styles.goBackButton}>
             <Submit btnName='뒤로가기' className='wrong' />

diff --git a/src/pages/LoginPage/NotFoundIdPage/NotFoundIdPage.module.css b/src/pages/LoginPage/NotFoundIdPage/NotFoundIdPage.module.css
@@ -7,14 +7,29 @@
   margin: 0 auto;
 }
 
+.backAppBar {
+  display: block;
+}
+
 .pageTopFrame {
+}
+
+.pageMiddleFrame {
+  height: fit-content;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.explanation {
+  height: fit-content;
   padding: 0 1.25rem;
 }
 
 .pageTitle {
   font-size: 1.25rem;
   font-weight: 700;
-  margin-top: 0.875rem;
+  margin-top: 3.2rem;
 }
 
 .pageExplanation {
@@ -30,13 +45,6 @@
   flex-direction: column;
 }
 
-.img {
-  width: 13.25rem;
-  height: 14.5rem;
-  margin-bottom: 1.875rem;
-  margin-left: auto;
-}
-
 .goBackButton {
   display: block;
   margin-bottom: 0.5rem;

diff --git a/src/pages/LoginPage/NotFoundPwPage/NotFoundPwPage.jsx b/src/pages/LoginPage/NotFoundPwPage/NotFoundPwPage.jsx
@@ -2,8 +2,7 @@ import { useEffect } from 'react';
 import { Link, useLocation, useNavigate } from 'react-router-dom';
 
 import { Submit } from '@/components/Submit';
-
-import frustratedWoman from '@/assets/images/frustratedWoman.svg';
+import { Icon } from '@/components/Icon';
 
 import styles from './NotFoundPwPage.module.css';
 import { BackAppBar } from '@/components/index.js';
@@ -29,12 +28,10 @@ export default function NotFoundPwPage() {
           입력하신 정보와 일치하는 정보가 없어요
         </p>
       </div>
+      <div className={styles.pageMiddleFrame}>
+        <Icon id='star-alert' width={231} height={217} />
+      </div>
       <div className={styles.pageBottomFrame}>
-        <img
-          src={frustratedWoman}
-          alt='frustrated woman image'
-          className={styles.img}
-        />
         <Link to='/find-pw'>
           <div className={styles.goBackButton}>
             <Submit btnName='뒤로가기' className='ready' />

diff --git a/src/pages/LoginPage/NotFoundPwPage/NotFoundPwPage.module.css b/src/pages/LoginPage/NotFoundPwPage/NotFoundPwPage.module.css
@@ -8,14 +8,20 @@
   margin: 0 auto;
 }
 
+.pageMiddleFrame {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
 .pageTopFrame {
   padding: 0 1.25rem;
 }
 
 .pageTitle {
   font-size: 1.25rem;
   font-weight: 700;
-  margin-top: 0.875rem;
+  margin-top: 3.2rem;
 }
 
 .pageExplanation {

diff --git a/src/pages/LoginPage/SignUpPage/SignUpPageStages/SignUpFailure/SignUpFailurePage.jsx b/src/pages/LoginPage/SignUpPage/SignUpPageStages/SignUpFailure/SignUpFailurePage.jsx
@@ -2,8 +2,7 @@ import { useEffect } from 'react';
 import { Link, useLocation, useNavigate } from 'react-router-dom';
 
 import { Submit } from '@/components/Submit';
-
-import frustratedWoman from '@/assets/images/frustratedWoman.svg';
+import { Icon } from '@/components/Icon';
 
 import styles from './SignUpFailurePage.module.css';
 import { BackAppBar } from '@/components/index.js';
@@ -26,12 +25,10 @@ export default function SignUpFailurePage() {
         <p className={styles.pageTitle}>회원가입 실패</p>
         <p className={styles.pageExplanation}>{state?.message}</p>
       </div>
+      <div className={styles.pageMiddleFrame}>
+        <Icon id='star-alert' width={231} height={217} />
+      </div>
       <div className={styles.pageBottomFrame}>
-        <img
-          src={frustratedWoman}
-          alt='frustrated woman image'
-          className={styles.img}
-        />
         <Link to='/signup'>
           <div className={styles.loginButton}>
             <Submit btnName='뒤로가기' className='right' />

diff --git a/src/pages/LoginPage/SignUpPage/SignUpPageStages/SignUpFailure/SignUpFailurePage.module.css b/src/pages/LoginPage/SignUpPage/SignUpPageStages/SignUpFailure/SignUpFailurePage.module.css
@@ -15,7 +15,7 @@
 .pageTitle {
   font-size: 1.25rem;
   font-weight: 700;
-  margin-top: 0.875rem;
+  margin-top: 3.2rem;
 }
 
 .pageExplanation {
@@ -25,6 +25,12 @@
   margin-top: 0.875rem;
 }
 
+.pageMiddleFrame {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
 .pageBottomFrame {
   padding: 0 1.25rem;
   display: flex;

diff --git a/src/pages/LoginPage/SignUpPage/SignUpSuccessPage/SignUpSuccessPage.jsx b/src/pages/LoginPage/SignUpPage/SignUpSuccessPage/SignUpSuccessPage.jsx
@@ -4,8 +4,6 @@ import { useNavigate, useLocation } from 'react-router-dom';
 import { Icon } from '@/components/Icon';
 import { Submit } from '@/components/Submit';
 
-import excitedWoman from '@/assets/images/excitedWoman.svg';
-
 import styles from './SignUpSuccessPage.module.css';
 
 export default function SignUpSuccessPage() {
@@ -30,11 +28,11 @@ export default function SignUpSuccessPage() {
           스노로즈 전체 서비스를 이용하실 수 있어요
         </p>
       </div>
-      <div>
-        <div className={styles.img}>
-          <img src={excitedWoman} alt='excitedWoman' />
-        </div>
+      <div className={styles.img}>
+        <Icon id='star-check' width={231} height={217} />
+      </div>
 
+      <div>
         <div className={styles.submit}>
           <Submit
             btnName='로그인하기'

diff --git a/src/pages/LoginPage/SignUpPage/SignUpSuccessPage/SignUpSuccessPage.module.css b/src/pages/LoginPage/SignUpPage/SignUpSuccessPage/SignUpSuccessPage.module.css
@@ -19,9 +19,10 @@
 
 .img {
   width: 100%;
+  height: fit-content;
   display: flex;
-  justify-content: flex-end;
-  padding-right: 0.813rem;
+  justify-content: center;
+  align-items: center;
 }
 
 .submit {