🌈 Design: 로그인 / 회원가입 / 오류 페이지 공통사항 마크업 (#26)

prgrms-web-devcourse-final-project · Nov 30, 2024 · 7010a4e · 7010a4e
1 parent 7a7ce00
commit 7010a4e
Show file tree

Hide file tree

Showing 10 changed files with 295 additions and 48 deletions.
diff --git a/router.jsx b/router.jsx
@@ -4,6 +4,7 @@ import ErrorPage from './src/pages/ErrorPage';
 import LoginPage from './src/pages/LoginPage';
 import RegisterPage from './src/pages/RegisterPage';
 import ComponentMuseum from './src/pages/ComponentMuseum';
+import FindAccountPage from './src/pages/FindAccountPage';
 
 export const routesConfig = [
     {
@@ -36,6 +37,10 @@ export const routesConfig = [
         path: '/register',
         element: <RegisterPage />,
     },
+    {
+        path: '/find-account',
+        element: <FindAccountPage />,
+    },
     {
         path: '/*',
         element: <ErrorPage />,

diff --git a/src/assets/stylesheets/layouts/_commons.scss b/src/assets/stylesheets/layouts/_commons.scss
@@ -50,7 +50,27 @@
     fill: currentColor;
 }
 
-/* 로그인, 회원가입 공통 레이아웃 요소 */
+/* 로그인, 회원가입, 오류 페이지 등의 공통 레이아웃 요소 */
+
+#error-message-container {
+    display: flex;
+    flex-flow: column nowrap;
+    justify-content: center;
+    align-items: center;
+    gap: 1.2rem;
+    margin-block: auto;
+    text-align: center;
+
+    > h1 {
+        font-family: var(--ff-dingbat);
+        font-size: var(--fnt-title-xl);
+    }
+
+    > p {
+        font-family: var(--ff-dingbat);
+        font-size: var(--fnt-title-md);
+    }
+}
 
 .service-container-wrapper {
     display: flex;
@@ -63,14 +83,69 @@
 }
 
 .service-container {
+    flex-shrink: 0;
     border-radius: 0 0 var(--rad-xl) var(--rad-xl);
     background-color: rgb(var(--clr-white));
     box-shadow: 0 -2.4rem 4.8rem 0.8rem rgb(var(--clr-alert) / 0.25);
     overflow: clip;
 }
 
 .service-logo-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
     height: 12rem;
+    background-color: pink;
+    color: rgb(var(--clr-white));
+
+    > h1 {
+        font-family: var(--ff-dingbat);
+        font-size: var(--fnt-title-lg);
+        text-align: center;
+    }
+}
+
+#button-service-go-back {
+    position: absolute;
+    inset-block-start: 0.8rem;
+    inset-inline-start: 0.8rem;
+    padding: 0.6rem;
+    border-radius: var(--rad-full);
+    background-color: rgb(var(--clr-text) / 0.75);
+    mix-blend-mode: overlay;
+
+    &:hover {
+        background-color: rgb(var(--clr-text));
+    }
+}
+
+.service-controls {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.button-service-control {
+    padding: 0.4rem 0.8rem;
+    border: 1px solid rgb(var(--clr-text) / 0.15);
+    border-radius: var(--rad-full);
+    background-color: rgb(var(--clr-white) / 0.5);
+    backdrop-filter: blur(0.4rem);
+    color: rgb(var(--clr-text) / 0.5);
+    font-size: var(--fnt-sm);
+    font-weight: 700;
+
+    &:hover {
+        border-color: rgb(var(--clr-alert) / 0.25);
+        background-color: rgb(var(--clr-alert) / 0.1);
+        color: rgb(var(--clr-alert) / 0.5);
+    }
+
+    &.drop-progress {
+        background-color: rgb(var(--clr-black));
+        color: rgb(vaR(--clr-text-on-tint));
+    }
 }
 
 .service-copyright {

diff --git a/src/assets/stylesheets/layouts/_footers.scss b/src/assets/stylesheets/layouts/_footers.scss
@@ -90,4 +90,12 @@
     font-weight: 200;
 }
 
+/* 반응형 쿼리 */
+
+@container main-container (max-width: 640px) {
+    .footer-company-informations {
+        flex-flow: column nowrap;
+    }
+}
+
 /* _footers.scss */
diff --git a/src/assets/stylesheets/pages/_registerPage.scss b/src/assets/stylesheets/pages/_registerPage.scss
@@ -15,6 +15,7 @@
     justify-content: center;
     align-items: flex-end;
     gap: 0.2rem;
+    padding-block: 1.2rem;
     padding-inline: 0.8rem;
 }
 
@@ -59,15 +60,12 @@
     transition: margin-inline-start 0.3s;
 
     > div {
-        padding: 1.2rem 0.8rem;
         width: 100%;
     }
 }
 
-.register-state-controls {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
+.register-state-container {
+    padding: 0.8rem;
 }
 
 #terms-of-service {
@@ -120,4 +118,10 @@
     }
 }
 
+#check-terms-confirmed {
+    display: flex;
+    justify-content: center;
+    margin-block-start: 0.8rem;
+}
+
 /* _registerPage.scss */
diff --git a/src/assets/stylesheets/style.css b/src/assets/stylesheets/style.css
@@ -742,7 +742,25 @@ a, a:visited {
   fill: currentColor;
 }
 
-/* 로그인, 회원가입 공통 레이아웃 요소 */
+/* 로그인, 회원가입, 오류 페이지 등의 공통 레이아웃 요소 */
+#error-message-container {
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: center;
+  align-items: center;
+  gap: 1.2rem;
+  margin-block: auto;
+  text-align: center;
+}
+#error-message-container > h1 {
+  font-family: var(--ff-dingbat);
+  font-size: var(--fnt-title-xl);
+}
+#error-message-container > p {
+  font-family: var(--ff-dingbat);
+  font-size: var(--fnt-title-md);
+}
+
 .service-container-wrapper {
   display: flex;
   flex-flow: column nowrap;
@@ -754,14 +772,66 @@ a, a:visited {
 }
 
 .service-container {
+  flex-shrink: 0;
   border-radius: 0 0 var(--rad-xl) var(--rad-xl);
   background-color: rgb(var(--clr-white));
   box-shadow: 0 -2.4rem 4.8rem 0.8rem rgb(var(--clr-alert)/0.25);
   overflow: clip;
 }
 
 .service-logo-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
   height: 12rem;
+  background-color: pink;
+  color: rgb(var(--clr-white));
+}
+.service-logo-container > h1 {
+  font-family: var(--ff-dingbat);
+  font-size: var(--fnt-title-lg);
+  text-align: center;
+}
+
+#button-service-go-back {
+  position: absolute;
+  inset-block-start: 0.8rem;
+  inset-inline-start: 0.8rem;
+  padding: 0.6rem;
+  border-radius: var(--rad-full);
+  background-color: rgb(var(--clr-text)/0.75);
+  mix-blend-mode: overlay;
+}
+#button-service-go-back:hover {
+  background-color: rgb(var(--clr-text));
+}
+
+.service-controls {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.button-service-control {
+  padding: 0.4rem 0.8rem;
+  border: 1px solid rgb(var(--clr-text)/0.15);
+  border-radius: var(--rad-full);
+  background-color: rgb(var(--clr-white)/0.5);
+  -webkit-backdrop-filter: blur(0.4rem);
+          backdrop-filter: blur(0.4rem);
+  color: rgb(var(--clr-text)/0.5);
+  font-size: var(--fnt-sm);
+  font-weight: 700;
+}
+.button-service-control:hover {
+  border-color: rgb(var(--clr-alert)/0.25);
+  background-color: rgb(var(--clr-alert)/0.1);
+  color: rgb(var(--clr-alert)/0.5);
+}
+.button-service-control.drop-progress {
+  background-color: rgb(var(--clr-black));
+  color: rgb(vaR(--clr-text-on-tint));
 }
 
 .service-copyright {
@@ -1058,6 +1128,12 @@ a, a:visited {
   font-weight: 200;
 }
 
+/* 반응형 쿼리 */
+@container main-container (max-width: 640px) {
+  .footer-company-informations {
+    flex-flow: column nowrap;
+  }
+}
 /* _footers.scss */
 /* _mainPage.scss */
 /* 반응형 쿼리 */
@@ -1079,6 +1155,7 @@ a, a:visited {
   justify-content: center;
   align-items: flex-end;
   gap: 0.2rem;
+  padding-block: 1.2rem;
   padding-inline: 0.8rem;
 }
 
@@ -1116,14 +1193,11 @@ a, a:visited {
   transition: margin-inline-start 0.3s;
 }
 #register-state-wrapper > div {
-  padding: 1.2rem 0.8rem;
   width: 100%;
 }
 
-.register-state-controls {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
+.register-state-container {
+  padding: 0.8rem;
 }
 
 #terms-of-service {
@@ -1163,6 +1237,12 @@ a, a:visited {
   content: "(" counter(numbs) ") ";
 }
 
+#check-terms-confirmed {
+  display: flex;
+  justify-content: center;
+  margin-block-start: 0.8rem;
+}
+
 /* _registerPage.scss */
 /* _loginPage.scss */
 #form-login {

diff --git a/src/components/layout/BaseLayout.jsx b/src/components/layout/BaseLayout.jsx
@@ -7,6 +7,7 @@ import AreaInfoPanel from './AreaInfoPanel';
 import Footer from './Footer';
 import MainModal from '../MainModal';
 import TotalSearch from './TotalSearch';
+import SettingMallangs from '../common/SettingMallangs';
 
 const BaseLayout = () => {
     const [currentPanelID, setCurrentPanel] = useState(0);
@@ -50,7 +51,7 @@ const BaseLayout = () => {
                 onShow={setCurrentPanel}
             >
                 <div style={{ padding: '.8rem' }}>
-                    그렇다... 내용을 슬롯으로 집어넣는 것이다
+                    <SettingMallangs />
                 </div>
             </MainModal>
         </>

diff --git a/src/pages/ErrorPage.jsx b/src/pages/ErrorPage.jsx
@@ -9,18 +9,13 @@ const ErrorPage = ({
     return (
         <section id="full-page-wrapper">
             <div className="service-container-wrapper">
-                <h1
-                    style={{
-                        fontFamily: 'var(--ff-dingbat)',
-                        fontSize: 'var(--fnt-title-xl)',
-                    }}
-                >
-                    {errorCode} ♤ ♧ † £ ¢
-                </h1>
+                <div id="error-message-container">
+                    <h1>¢ {errorCode} ♧</h1>
 
-                <p>{errorMessage}</p>
+                    <p>{errorMessage}</p>
 
-                <button onClick={() => navigate(-1)}>돌아가기</button>
+                    <button onClick={() => navigate(-1)}>돌아가기</button>
+                </div>
             </div>
         </section>
     );

diff --git a/src/pages/FindAccountPage.jsx b/src/pages/FindAccountPage.jsx
@@ -0,0 +1,11 @@
+const FindAccountPage = () => {
+    return (
+        <section id="full-page-wrapper">
+            <div className="service-container-wrapper">
+                나는 이곳에서 나의 계정을 되찾을 것이오
+            </div>
+        </section>
+    );
+};
+
+export default FindAccountPage;