From 4b9418b5babb53315de6b6542e558a296cb76092 Mon Sep 17 00:00:00 2001 From: novice1993 Date: Sat, 2 Sep 2023 00:30:40 +0900 Subject: [PATCH 1/2] =?UTF-8?q?[Feat]=20=EC=A2=8C=EC=B8=A1=20=EB=B9=84?= =?UTF-8?q?=EA=B5=90=EC=B0=A8=ED=8A=B8=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=20=EB=A0=88=EC=9D=B4=EC=95=84=EC=9B=83=20=EC=9D=BC?= =?UTF-8?q?=EB=B6=80=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 좌측 비교차트 컴포넌트 상단 제목 레이아웃 구현 Issues #13 --- .../components/CompareChartSection/Index.tsx | 57 ++++++++++++ .../CompareChartSection/SearchBox.tsx | 15 +++ client/src/page/MainPage.tsx | 93 +++++++++++-------- 3 files changed, 125 insertions(+), 40 deletions(-) create mode 100644 client/src/components/CompareChartSection/Index.tsx create mode 100644 client/src/components/CompareChartSection/SearchBox.tsx diff --git a/client/src/components/CompareChartSection/Index.tsx b/client/src/components/CompareChartSection/Index.tsx new file mode 100644 index 00000000..099251b3 --- /dev/null +++ b/client/src/components/CompareChartSection/Index.tsx @@ -0,0 +1,57 @@ +import { styled } from "styled-components"; + +import SearchBox from "./SearchBox"; + +const titleText: string = "비교차트"; + +const CompareChartSection = () => { + return ( + + + {titleText} + ✕ + + + + ); +}; + +export default CompareChartSection; + +const Container = styled.div` + position: fixed; + left: 0px; + transition: 0.3s left ease-in-out; + + min-width: 248px; + height: 100%; + border: 1px solid black; +`; + +const UpperBar = styled.div` + position: relative; + width: 100%; + height: 43px; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-bottom: 1px solid darkgray; +`; + +const Title = styled.h2` + font-size: 17px; + font-weight: 500; +`; + +const CloseBtn = styled.button` + position: absolute; + right: 10px; + width: 28px; + height: 95%; + border: none; + font-size: 17px; + font-weight: 500; + color: #525252; + background-color: #ffff; +`; diff --git a/client/src/components/CompareChartSection/SearchBox.tsx b/client/src/components/CompareChartSection/SearchBox.tsx new file mode 100644 index 00000000..2abe9477 --- /dev/null +++ b/client/src/components/CompareChartSection/SearchBox.tsx @@ -0,0 +1,15 @@ +import { styled } from "styled-components"; + +const SearchBox = () => { + return ; +}; + +export default SearchBox; + +const Container = styled.div` + width: 100%; + height: 39px; + padding-left: 12px; + padding-right: 12px; + border-bottom: 1px solid darkgray; +`; diff --git a/client/src/page/MainPage.tsx b/client/src/page/MainPage.tsx index 65d20768..88177026 100644 --- a/client/src/page/MainPage.tsx +++ b/client/src/page/MainPage.tsx @@ -1,12 +1,15 @@ -import { useState, useCallback } from 'react'; +import { useState, useCallback } from "react"; import styled from "styled-components"; import LogoutHeader from "../components/Headers/LogoutHeader"; import LoginHeader from "../components/Headers/LoginHeader"; import OAuthLoginModal from "../components/Logins/OAuthLogin"; import EmailLoginModal from "../components/Logins/EmailLogin"; import EmailSignupModal from "../components/Signups/EmailSignup"; -import EmailVerificationModal from '../components/Signups/EmailCertify'; -import PasswordSettingModal from '../components/Signups/Password'; +import EmailVerificationModal from "../components/Signups/EmailCertify"; +import PasswordSettingModal from "../components/Signups/Password"; + +// 왼쪽 비교차트 +import CompareChartSection from "../components/CompareChartSection/Index"; const MainPage = () => { const [isOAuthModalOpen, setOAuthModalOpen] = useState(false); @@ -22,8 +25,8 @@ const MainPage = () => { }, []); const openEmailLoginModal = useCallback(() => { - setOAuthModalOpen(false); - setEmailLoginModalOpen(true); + setOAuthModalOpen(false); + setEmailLoginModalOpen(true); }, []); const closeEmailLoginModal = useCallback(() => { @@ -31,15 +34,16 @@ const MainPage = () => { }, []); const openEmailSignupModal = useCallback(() => { - setOAuthModalOpen(false); - setEmailSignupModalOpen(true); + setOAuthModalOpen(false); + setEmailSignupModalOpen(true); }, []); const closeEmailSignupModal = useCallback(() => { setEmailSignupModalOpen(false); }, []); - const [isEmailVerificationModalOpen, setEmailVerificationModalOpen] = useState(false); + const [isEmailVerificationModalOpen, setEmailVerificationModalOpen] = + useState(false); const openEmailVerificationModal = useCallback(() => { setEmailSignupModalOpen(false); // 이메일 회원가입 모달 닫기 @@ -50,21 +54,22 @@ const MainPage = () => { setEmailVerificationModalOpen(false); }, []); - const [isPasswordSettingModalOpen, setPasswordSettingModalOpen] = useState(false); + const [isPasswordSettingModalOpen, setPasswordSettingModalOpen] = + useState(false); const openPasswordSettingModal = useCallback(() => { - setEmailVerificationModalOpen(false); // 이메일 인증 모달 닫기 - setPasswordSettingModalOpen(true); // 비밀번호 설정 모달 열기 + setEmailVerificationModalOpen(false); // 이메일 인증 모달 닫기 + setPasswordSettingModalOpen(true); // 비밀번호 설정 모달 열기 }, []); const closePasswordSettingModal = useCallback(() => { setPasswordSettingModalOpen(false); }, []); - const [isLoggedIn, setIsLoggedIn] = useState(false); // 로그인 상태 관리 + const [isLoggedIn, setIsLoggedIn] = useState(false); // 로그인 상태 관리 const handleLogin = () => { - setIsLoggedIn(true); + setIsLoggedIn(true); }; const handleLogout = () => { @@ -73,45 +78,53 @@ const MainPage = () => { return ( - {isLoggedIn ? - : // 로그아웃 버튼 클릭 핸들러 추가 + {isLoggedIn ? ( + // 로그아웃 버튼 클릭 핸들러 추가 + ) : ( - } + )}
+
- {isOAuthModalOpen && } - {isEmailLoginModalOpen && - + )} + {isEmailLoginModalOpen && ( + - } - - {isEmailSignupModalOpen && - - } - - {isEmailVerificationModalOpen && - - } - - {isPasswordSettingModalOpen && - { handleLogin(); closePasswordSettingModal(); }} /> - } - + )} + + {isPasswordSettingModalOpen && ( + { + handleLogin(); + closePasswordSettingModal(); + }} + /> + )} ); }; From 445c23669838264e3fac0306456a3f0a9b28542f Mon Sep 17 00:00:00 2001 From: novice1993 Date: Sat, 2 Sep 2023 18:50:30 +0900 Subject: [PATCH 2/2] =?UTF-8?q?[Design]=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=20=EC=9C=84=EC=B9=98=20=EC=A1=B0=EC=A0=95=EC=9D=84=20?= =?UTF-8?q?=EC=9C=84=ED=95=9C=20CSS=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 비교차트 관련 컴포넌트 위치 조정을 위한 CSS 수정 Issues #13 --- client/src/components/CompareChartSection/Index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/src/components/CompareChartSection/Index.tsx b/client/src/components/CompareChartSection/Index.tsx index a0edc357..07a87e6c 100644 --- a/client/src/components/CompareChartSection/Index.tsx +++ b/client/src/components/CompareChartSection/Index.tsx @@ -22,7 +22,7 @@ export default CompareChartSection; const Container = styled.div` position: fixed; - left: 0px; + left: -300px; transition: 0.3s left ease-in-out; display: flex; flex-direction: column;