From 8456c5edcc54dde6fa01d0dfe90b11d80f8b1ddb Mon Sep 17 00:00:00 2001 From: parkseyoung Date: Thu, 24 Oct 2024 15:18:35 +0900 Subject: [PATCH 1/2] =?UTF-8?q?feat:=20setting=20UX/UI=20=EA=B5=AC?= =?UTF-8?q?=ED=98=84=ED=95=98=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/containers/ChangePass.jsx | 8 +++ src/containers/SettingForm.jsx | 31 +++++++- src/containers/styles/ChangePass.scss | 22 ++++-- src/containers/styles/Community.scss | 1 + src/containers/styles/SettingForm.scss | 99 ++++++++++++++++++++++---- src/containers/styles/SignupForm.scss | 37 +++++++++- 6 files changed, 178 insertions(+), 20 deletions(-) diff --git a/src/containers/ChangePass.jsx b/src/containers/ChangePass.jsx index 6d1b538..51d5a36 100644 --- a/src/containers/ChangePass.jsx +++ b/src/containers/ChangePass.jsx @@ -1,7 +1,9 @@ import Sidebar from "./SideForm"; import Button from "../component/Button"; import Input from "../component/Input"; +import Search from "../component/Search"; import "./styles/ChangePass.scss"; +import Logo from "../image/logo_black.png"; const ChangePass = () => { return ( @@ -10,7 +12,13 @@ const ChangePass = () => {
+
+ +
+
+

비밀번호 변경

+ + +
+ +
+ ); diff --git a/src/containers/styles/ChangePass.scss b/src/containers/styles/ChangePass.scss index 905de73..facdbe6 100644 --- a/src/containers/styles/ChangePass.scss +++ b/src/containers/styles/ChangePass.scss @@ -17,10 +17,14 @@ } .content-wrapper { - width: 80%; - display: flex; - flex-direction: column; - + h3 { + text-align: center; + margin: 20px 0; // 위아래 여백 추가 + } + .settinglogo { + width: 300px; + height: 300px; + } .password-area { display: flex; flex-direction: column; @@ -52,10 +56,18 @@ width: 100%; height: calc(7.15 * 100% / 8); + h3 { + margin: 15px 0; // 모바일에서는 여백 줄임 + font-size: 18px; // 모바일에서 폰트 크기 조정 + } + .search-area { height: calc(100% / 8); } - + .settinglogo { + width: 150px; + height: 150px; + } .password-area { height: calc(7 * 100% / 7); } diff --git a/src/containers/styles/Community.scss b/src/containers/styles/Community.scss index b9ac0c1..89a5efb 100644 --- a/src/containers/styles/Community.scss +++ b/src/containers/styles/Community.scss @@ -16,6 +16,7 @@ max-width: 950px; margin: 0 auto; overflow-y: auto; + overflow-x: hidden; @media (max-width: 767px) { padding: 10px; max-width: 100%; diff --git a/src/containers/styles/SettingForm.scss b/src/containers/styles/SettingForm.scss index 659a7f3..a20dbe4 100644 --- a/src/containers/styles/SettingForm.scss +++ b/src/containers/styles/SettingForm.scss @@ -21,15 +21,7 @@ display: flex; flex-direction: column; - .search-area { - height: calc(100% / 16); - background-color: none; - padding: 10px; - display: flex; - align-items: center; - } - - .setting-area { + .signup-area { display: flex; flex-direction: column; justify-content: center; @@ -40,10 +32,90 @@ height: calc(9 * 100% / 10); background-color: #fdfcfc; padding: 20px; + .custom-button { + width: 300px !important; // !important를 사용하여 강제 적용 + height: 95px !important; + background-color: #4267b2; + color: white; + font-size: 15px; + + &:hover { + background-color: #365899; + } + + @media (max-width: 767px) { + width: 250px !important; + height: 40px !important; + font-size: 13px; + } + } + .button-group { + display: flex; + gap: 20px; + width: 100%; + max-width: 400px; + justify-content: center; + margin: 10px 0; + + .action-button { + flex: 1; + padding: 12px 20px; + background-color: white; + color: #3d3d3d; + border: solid 1.5px; + border-radius: 8px; + cursor: pointer; + font-size: 14px; + transition: background-color 0.2s; + + &:hover { + background-color: rgb(231, 231, 231); + } + } + } + + .Withdrawal { + color: #666; + text-decoration: underline; + cursor: pointer; + font-size: 13px; + margin-top: 10px; + + &:hover { + color: #333; + } + } + + @media (max-width: 767px) { + gap: 10px; + + .button-group { + gap: 10px; + max-width: 300px; + + .action-button { + padding: 10px 15px; + font-size: 13px; + } + } + + :global(.custom-button) { + width: 300px; + height: 34px; + font-size: 14px; + } + + .Withdrawal { + font-size: 13px; + } + } + } + + .re-login { + text-decoration: underline; } } - // Media query for screens smaller than 768px @media (max-width: 767px) { flex-direction: column; @@ -61,8 +133,11 @@ height: calc(100% / 8); } - .setting-area { - height: calc(7 * 100% / 8); + .signup-area { + height: calc(7 * 100% / 7); + } + .re-login { + font-size: 13px; } } } diff --git a/src/containers/styles/SignupForm.scss b/src/containers/styles/SignupForm.scss index 6520c27..67da99f 100644 --- a/src/containers/styles/SignupForm.scss +++ b/src/containers/styles/SignupForm.scss @@ -32,16 +32,51 @@ height: calc(9 * 100% / 10); background-color: #fdfcfc; padding: 20px; + + .button-group { + display: flex; + gap: 20px; + width: 100%; + max-width: 400px; + justify-content: center; + margin: 10px 0; + + .action-button { + flex: 1; + padding: 12px 20px; + background-color: white; + color: #3d3d3d; + border: solid 1.5px; + border-radius: 8px; + cursor: pointer; + font-size: 14px; + transition: background-color 0.2s; + + &:hover { + background-color: rgb(231, 231, 231); + } + } + } + @media (max-width: 767px) { gap: 10px; + + .button-group { + gap: 10px; + + .action-button { + padding: 10px 15px; + font-size: 13px; + } + } } } + .re-login { text-decoration: underline; } } - // Media query for screens smaller than 768px @media (max-width: 767px) { flex-direction: column; From 4afeb341b7767c5fc071d72a2357e7b05a4a8704 Mon Sep 17 00:00:00 2001 From: parkseyoung Date: Thu, 24 Oct 2024 15:35:56 +0900 Subject: [PATCH 2/2] =?UTF-8?q?style:=20=EC=95=84=EC=9D=B4=EB=94=94=20disa?= =?UTF-8?q?ble?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/containers/SettingForm.jsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/containers/SettingForm.jsx b/src/containers/SettingForm.jsx index 9f22ae1..5c501c6 100644 --- a/src/containers/SettingForm.jsx +++ b/src/containers/SettingForm.jsx @@ -12,6 +12,7 @@ const SettingForm = () => { const handleChangePassword = () => { navigate("/setting/changepassword"); }; + return (
@@ -25,7 +26,12 @@ const SettingForm = () => {

마이페이지

- +