Skip to content

Commit

Permalink
✨ Feat: 아이디/비밀번호 찾기 스타일 추가 #90
Browse files Browse the repository at this point in the history
  • Loading branch information
@gd06070
gd06070 committed Dec 19, 2024
1 parent b2e1ac3 commit 2aecb22
Show file tree
Hide file tree
Showing 5 changed files with 284 additions and 135 deletions.
86 changes: 86 additions & 0 deletions src/assets/stylesheets/pages/_findMyIdAndPassword.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,86 @@
.tab-menu {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 0 auto;

.tabs {
display: flex;
justify-content: space-between;
margin: 50px auto;
width: 40rem;
text-align: center;

.tab {
flex: 1;
padding: 10px 0;
cursor: pointer;
border-bottom: 0.2rem solid rgb(var(--clr-gray));
color: rgb(var(--clr-gray));
font-weight: 800;
font-size: var(--fnt-title-md);

&.active {
border-bottom: 0.2rem solid rgb(var(--clr-warn));
color: rgb(var(--clr-warn));
}
}
}

.form {
width: 24rem;
height: 20.5rem;
padding: 1.75rem;
background-color: rgb(var(--clr-white));
border: 0.05rem solid rgb(var(--clr-if-100));
border-radius: var(--rad-lg);
box-shadow: 0 0.4rem 2.4rem 0.05rem rgb(var(--clr-surface-20));

display: flex;
flex-direction: column;
align-items: center;
// justify-content: center;
gap: 1rem;

.form-group {
width: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;

label {
font-size: 14px;
color: rgb(var(--clr-text));
margin-bottom: 0.25rem;
}

input {
width: 100%;
height: 2.5rem;
padding: 0.5rem;
border: 0.05rem solid #ffdca9;
border-radius: var(--rad-sm);
background-color: #fff5e6;
}
}

.submit-button {
width: 9rem;
height: 3.25rem;
margin-top: 3.5rem;
padding: 0.5rem;
background-color: rgb(var(--clr-if-0));
border: none;
border-radius: var(--rad-lg);
font-size: var(--fnt-lg);
font-weight: 700;
color: rgb(var(--clr-text));
cursor: pointer;

&:hover {
background-color: rgb(var(--clr-if-20));
}
}
}
}
171 changes: 171 additions & 0 deletions src/assets/stylesheets/pages/_findResult.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,171 @@
.find-result {
overflow: hidden;
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
flex-wrap: nowrap;
gap: 3rem;
position: relative;
width: 100vw;
margin: 0 auto;

&-top-group {
display: flex;
flex-direction: column;
align-items: center;
flex-wrap: nowrap;
flex-shrink: 0;
gap: 1rem;
position: relative;
width: 14.5rem;
}

&-notification-text {
display: flex;
align-items: flex-start;
justify-content: center;
flex-shrink: 0;
position: relative;
width: 14.75rem;
height: 1.75rem;
color: rgb(var(--clr-gray));
font-size: var(--fnt-md);
font-weight: 800;
line-height: 0.85rem;
text-align: center;
}

&-wrapper {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
align-self: stretch;
flex-wrap: nowrap;
flex-shrink: 0;
gap: 0.5rem;
position: relative;
width: 100%;
height: 14rem;
padding: 2.5rem 21rem;
background: rgb(var(--clr-surface-40));
border-top: 0.1rem solid rgb(var(--clr-warn));

&-section {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex-wrap: nowrap;
flex-shrink: 0;
gap: 2rem;
position: relative;
width: 33.5rem;

p {
font-size: var(--fnt-md);
}
}

&-bottom-group {
&1 {
display: flex;
flex-direction: column;
align-items: center;
align-self: stretch;
flex-wrap: nowrap;
flex-shrink: 0;
gap: 0.2rem;
position: relative;
}

&2 {
flex-shrink: 0;
position: relative;
width: 34.5rem;
font-size: var(--fnt-title-md);
font-weight: 200;
line-height: 2rem;
text-align: left;
text-overflow: initial;
white-space: nowrap;
}
}
}
}

.check-result-text {
align-self: stretch;
flex-shrink: 0;
flex-basis: auto;
position: relative;
height: 3rem;
color: rgb(var(--clr-black));
font-size: var(--fnt-title-lg);
font-weight: 800;
line-height: 3rem;
text-align: center;
}

.split-text {
&1,
&2 {
position: relative;
color: rgb(var(--clr-text));
font-size: var(--fnt-title-md);
font-weight: 200;
line-height: 2rem;
text-align: left;
}
}

.found-info-text {
position: relative;
color: rgb(var(--clr-if-100));
font-size: var(--fnt-title-md);
font-weight: 800;
line-height: 2rem;
text-align: left;
}

.main-redirect-button {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: nowrap;
flex-shrink: 0;
gap: 0.5rem;
position: relative;
width: 10rem;
padding: 0.5rem 1rem;
background: rgb(var(--clr-if-0));
overflow: hidden;
border-radius: var(--rad-lg);

#main-redirect {
flex-shrink: 0;
flex-basis: auto;
position: relative;
height: 1rem;
color: rgb(var(--clr-text));
font-size: var(--fnt-xl);
font-weight: 700;
line-height: 1rem;
text-align: left;
white-space: nowrap;
}

&:hover {
background-color: rgb(var(--clr-if-40));
}
}

.not-found-text {
position: relative;
color: rgb(var(--clr-text));
font-size: var(--fnt-title-md);
font-weight: 200;
line-height: 2rem;
text-align: center;
}
62 changes: 27 additions & 35 deletions src/assets/stylesheets/style.scss
View file
Original file line number Diff line number Diff line change
@@ -1,60 +1,52 @@
@use 'sass:list';
@use 'sass:math';
@use "sass:list";
@use "sass:math";

// 0. Reset
@import 'vendors/normalize';
@import "vendors/normalize";

// 1. Base
@import 'base/default' // Default
@import "base/default" // Default
;

// 2. Abstracts
@import 'abstracts/variables',
@import "abstracts/variables",
// Global Variables
'abstracts/functions',
"abstracts/functions",
// SASS Functions
'abstracts/keyframes' // Animations
"abstracts/keyframes" // Animations
;

// 3. Helpers
@import 'helpers/utils';
@import "helpers/utils";

// 4. Themes
@import 'themes/defaultColor' // Default Color
@import "themes/defaultColor" // Default Color
;

// 5. Layouts
@import 'layouts/commons',
@import "layouts/commons",
// Commons
'layouts/headers',
"layouts/headers",
// Headers
'layouts/footers',
"layouts/footers",
// Footers
'layouts/mainPage' // Main Page Layout
"layouts/mainPage" // Main Page Layout
;

// 6. Pages
@import 'pages/registerPage', 'pages/loginPage', 'pages/myPage',
'pages/mallangMap', 'pages/userProfile', 'pages/placeInfo',
'pages/missingReport', 'pages/rescueInfo', 'pages/threadPlace',
'pages/threadMissingReport';
@import "pages/registerPage", "pages/loginPage", "pages/myPage", "pages/mallangMap", "pages/userProfile",
"pages/placeInfo", "pages/missingReport", "pages/rescueInfo", "pages/threadPlace", "pages/threadMissingReport",
"pages/findMyIdAndPassword", "pages/findResult";

// 7. Components
@import 'components/buttons', 'components/formElements', 'components/spinLoader',
'components/customAlert', 'components/emptyList',
'components/dropDownSelector', 'components/starRating',
'components/notificationCard', 'components/userProfileCard',
'components/areaInfoPanel', 'components/mainModalCover',
'components/signatureImage', 'components/mainModal',
'components/mallangsItem', 'components/threadItem', 'components/articleItem',
'components/replyItem', 'components/reviewItem', 'components/chatRoomItem',
'components/chatItem', 'components/modalFormInput',
'components/markerCategory', 'components/settingMallangs',
'components/searchUserLocation', 'components/userLocationMap',
'components/totalSearch', 'components/threadRescue',
'components/completeButton', 'components/genderSelector',
'components/toggleButton', 'components/infoText', 'components/typeSelector',
'components/birthdaySelector', 'components/asteriskText',
'components/inputAddress', 'components/discoverySituation',
'components/dateTime', 'components/imageGallery', 'components/singleInput',
'components/multipleImageUploader';
@import "components/buttons", "components/formElements", "components/spinLoader", "components/customAlert",
"components/emptyList", "components/dropDownSelector", "components/starRating", "components/notificationCard",
"components/userProfileCard", "components/areaInfoPanel", "components/mainModalCover", "components/signatureImage",
"components/mainModal", "components/mallangsItem", "components/threadItem", "components/articleItem",
"components/replyItem", "components/reviewItem", "components/chatRoomItem", "components/chatItem",
"components/modalFormInput", "components/markerCategory", "components/settingMallangs",
"components/searchUserLocation", "components/userLocationMap", "components/totalSearch", "components/threadRescue",
"components/completeButton", "components/genderSelector", "components/toggleButton", "components/infoText",
"components/typeSelector", "components/birthdaySelector", "components/asteriskText", "components/inputAddress",
"components/discoverySituation", "components/dateTime", "components/imageGallery", "components/singleInput",
"components/multipleImageUploader";
50 changes: 0 additions & 50 deletions src/pages/findId.jsx
View file

This file was deleted.

Loading

0 comments on commit 2aecb22

Please sign in to comment.