From 4b9418b5babb53315de6b6542e558a296cb76092 Mon Sep 17 00:00:00 2001
From: novice1993 <novice1993@gmail.com>
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 (
+ <Container>
+ <UpperBar>
+ <Title>{titleText}</Title>
+ <CloseBtn>✕</CloseBtn>
+ </UpperBar>
+ <SearchBox />
+ </Container>
+ );
+};
+
+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 <Container></Container>;
+};
+
+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 (
<Container>
- {isLoggedIn ?
- <LoginHeader onLogoutClick={handleLogout} /> : // 로그아웃 버튼 클릭 핸들러 추가
+ {isLoggedIn ? (
+ <LoginHeader onLogoutClick={handleLogout} /> // 로그아웃 버튼 클릭 핸들러 추가
+ ) : (
<LogoutHeader onLoginClick={openOAuthModal} />
- }
+ )}
<Main>
+ <CompareChartSection />
<LeftSection></LeftSection>
<CentralSection></CentralSection>
<RightSection></RightSection>
</Main>
- {isOAuthModalOpen && <OAuthLoginModal
- onClose={closeOAuthModal}
- onEmailLoginClick={openEmailLoginModal}
- onEmailSignupClick={openEmailSignupModal}
- />}
- {isEmailLoginModalOpen &&
- <EmailLoginModal
+ {isOAuthModalOpen && (
+ <OAuthLoginModal
+ onClose={closeOAuthModal}
+ onEmailLoginClick={openEmailLoginModal}
+ onEmailSignupClick={openEmailSignupModal}
+ />
+ )}
+ {isEmailLoginModalOpen && (
+ <EmailLoginModal
onClose={closeEmailLoginModal}
- onLogin={handleLogin} // 추가된 prop
+ onLogin={handleLogin} // 추가된 prop
/>
- }
-
- {isEmailSignupModalOpen &&
- <EmailSignupModal
- onClose={closeEmailSignupModal}
+ )}
+
+ {isEmailSignupModalOpen && (
+ <EmailSignupModal
+ onClose={closeEmailSignupModal}
onRequestVerification={openEmailVerificationModal} // 추가된 prop
/>
- }
-
- {isEmailVerificationModalOpen &&
- <EmailVerificationModal
+ )}
+
+ {isEmailVerificationModalOpen && (
+ <EmailVerificationModal
onClose={closeEmailVerificationModal}
- onNextStep={openPasswordSettingModal} // 추가된 prop
+ onNextStep={openPasswordSettingModal} // 추가된 prop
/>
- }
-
- {isPasswordSettingModalOpen &&
- <PasswordSettingModal onClose={() => { handleLogin(); closePasswordSettingModal(); }} />
- }
-
+ )}
+
+ {isPasswordSettingModalOpen && (
+ <PasswordSettingModal
+ onClose={() => {
+ handleLogin();
+ closePasswordSettingModal();
+ }}
+ />
+ )}
</Container>
);
};
From 445c23669838264e3fac0306456a3f0a9b28542f Mon Sep 17 00:00:00 2001
From: novice1993 <novice1993@gmail.com>
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;