Merge branch 'dev-client' of github.com:codestates-seb/seb45_main_008…

… into dev-client#14/chartGraph
codestates-seb · Sep 6, 2023 · ff755ca · ff755ca
2 parents e5b4a5e + 168f8e5
commit ff755ca
Show file tree

Hide file tree

Showing 16 changed files with 570 additions and 311 deletions.
diff --git a/client/src/components/Headers/LoginHeader.tsx b/client/src/components/Headers/LoginHeader.tsx
@@ -3,18 +3,23 @@ import styled from 'styled-components';
 import StockHolmLogo from "../../asset/images/StockHolmLogo.png";
 import SampleProfile from "../../asset/images/ProfileSample.png"; 
 import AlarmImage from "../../asset/images/alarm.png"; 
+import { useNavigate } from "react-router-dom";  // 페이지 이동을 위한 훅 가져오기
 
+// 로그인 상태일 때의 헤더 컴포넌트
 const LoginHeader: React.FC<LoginHeaderProps> = ({ onLogoutClick }) => {
-  const [searchValue, setSearchValue] = useState<string>('');
+  const [searchValue, setSearchValue] = useState<string>('');  // 검색어 상태
+  const navigate = useNavigate();  // 페이지 이동 함수
 
+  // 검색어 입력 처리 함수
   const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setSearchValue(event.target.value);
   };
 
   const logoutText = "로그아웃";
 
+  // 로고 클릭 처리 함수
   const handleLogoClick = () => {
-    console.log("Logo clicked");
+    navigate("/");  // 메인 페이지로 이동
   };
 
   return (
@@ -25,50 +30,54 @@ const LoginHeader: React.FC<LoginHeaderProps> = ({ onLogoutClick }) => {
       <SearchBar value={searchValue} onChange={handleSearchChange} />
       <UserActions>
         <NotificationButton> 
-          <img src={AlarmImage} alt="Notification" /> 
+          <img src={AlarmImage} alt="Notification" />  // 알림 이미지
         </NotificationButton>
         <ProfileButton>
-          <ProfileImage src={SampleProfile} />
+          <ProfileImage src={SampleProfile} />  // 프로필 이미지
         </ProfileButton>
-        <LogoutButton onClick={onLogoutClick}>{logoutText}</LogoutButton>  {/* 로그아웃 버튼 클릭 시 onLogoutClick 실행 */}
+        <LogoutButton onClick={onLogoutClick}>{logoutText}</LogoutButton>  // 로그아웃 버튼
       </UserActions>
     </HeaderContainer>
   );
 };
 
 export default LoginHeader;
 
+// 로그아웃 클릭 이벤트 타입 정의
 interface LoginHeaderProps {
-  onLogoutClick: () => void;  // 로그아웃 클릭 핸들러 타입 정의
+  onLogoutClick: () => void;
 }
 
+// 헤더 컨테이너 스타일
 const HeaderContainer = styled.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 1rem 2rem ;
+  padding: 1rem 2rem;
   background-color: #fff;
   border-bottom: 1px solid #2F4F4F; 
   width: 100%;
   height: 51px;
 `;
 
+// 로고 버튼 스타일
 const LogoButton = styled.button`
   background: transparent;
   border: none;
   cursor: pointer;
   padding: 0;
-  
   &:focus {
     outline: none;
   }
 `;
 
+// 로고 이미지 스타일
 const LogoImage = styled.img`
   height: 40px;
   width: auto;
 `;
 
+// 검색창 스타일
 const SearchBar = styled.input.attrs({
   type: 'text',
   placeholder: '검색...'
@@ -79,41 +88,43 @@ const SearchBar = styled.input.attrs({
   border-radius: 4px;
 `;
 
+// 사용자 액션 버튼들의 스타일
 const UserActions = styled.div`
   display: flex;
   align-items: center;
 `;
 
+// 알림 버튼 스타일
 const NotificationButton = styled.button`
   margin-right: 1rem; 
   background-color: #fff;
   border: none;
   cursor: pointer;
-
   img {   
     height: 40px;
     width: auto;
   }
 `;
 
+// 프로필 버튼 스타일
 const ProfileButton = styled.button`
   margin-right: 1rem;
-  background-color: transparent; // You can adjust this color if needed
+  background-color: transparent;
   border: none;
   cursor: pointer;
   padding: 0;
-
   &:focus {
     outline: none;
   }
 `;
 
+// 프로필 이미지 스타일
 const ProfileImage = styled.img`
   height: 40px;
   width: auto;
 `;
 
-
+// 로그아웃 버튼 스타일
 const LogoutButton = styled.button`
   background-color: #fff;
   color: #2F4F4F; 
@@ -122,11 +133,13 @@ const LogoutButton = styled.button`
   border-radius: 5px;
   cursor: pointer;
   transition: background-color 0.3s;
-
   &:hover {
     background-color: #f2f2f2; 
   }
 `;
 
 
 
+
+
+
diff --git a/client/src/components/Headers/LogoutHeader.tsx b/client/src/components/Headers/LogoutHeader.tsx
@@ -1,20 +1,25 @@
 import React, { useState } from "react";
 import styled from "styled-components";
 import StockHolmLogo from "../../asset/images/StockHolmLogo.png";
+import { useNavigate } from "react-router-dom";  // 라우터의 네비게이션을 사용하기 위해 가져옴
 
 const LogoutHeader: React.FC<LogoutHeaderProps> = ({ onLoginClick }) => {
-  const [searchValue, setSearchValue] = useState<string>("");
+  const [searchValue, setSearchValue] = useState<string>("");  // 검색 값 상태 관리
+  const navigate = useNavigate();  // 라우터 네비게이션 훅 사용
 
+  // 검색 입력 변경 핸들러
   const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setSearchValue(event.target.value);
   };
 
-  const loginText = "로그인";
+  const loginText = "로그인";  // 로그인 버튼 텍스트
 
+  // 로고 클릭 핸들러
   const handleLogoClick = () => {
-    console.log("Logo clicked");
+    navigate("/");  // 메인 페이지로 이동
   };
 
+  // 컴포넌트 렌더링
   return (
     <HeaderContainer>
       <LogoButton onClick={handleLogoClick}>
@@ -26,13 +31,17 @@ const LogoutHeader: React.FC<LogoutHeaderProps> = ({ onLoginClick }) => {
   );
 };
 
+export default LogoutHeader;
+
+
+// 스타일드 컴포넌트 정의
 const HeaderContainer = styled.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 1rem 2rem;
   background-color: #fff;
-  border-bottom: 1px solid #2f4f4f; // 다크 슬레이트 그레이 줄
+  border-bottom: 1px solid #2f4f4f;
   width: 100%;
   height: 51px;
 `;
@@ -42,7 +51,6 @@ const LogoButton = styled.button`
   border: none;
   cursor: pointer;
   padding: 0;
-
   &:focus {
     outline: none;
   }
@@ -64,20 +72,20 @@ const SearchBar = styled.input.attrs({
 `;
 
 const LoginButton = styled.button`
-  background-color: #fff; // 흰색 배경
-  color: #2f4f4f; // 글자색
-  border: 1px solid #2f4f4f; // 회색 테두리
+  background-color: #fff;
+  color: #2f4f4f;
+  border: 1px solid #2f4f4f;
   padding: 0.5rem 1rem;
-  border-radius: 5px; // 5px 둥글게
+  border-radius: 5px;
   cursor: pointer;
   transition: background-color 0.3s;
-
   &:hover {
-    background-color: #f2f2f2; // 호버 시 약간 어두운 흰색으로 변경
+    background-color: #f2f2f2;
   }
 `;
+
+// 프롭스 타입 정의
 interface LogoutHeaderProps {
   onLoginClick: () => void;
 }
 
-export default LogoutHeader;
diff --git a/client/src/components/Logins/EmailLogin.tsx b/client/src/components/Logins/EmailLogin.tsx
@@ -2,14 +2,9 @@ import axios from "axios";
 import styled from "styled-components";
 import React, { useState } from "react";
 
-const EmailLoginModal = ({
-  onClose,
-  onLogin,
-}: {
-  onClose: () => void;
-  onLogin: () => void;
-}) => {
-  // 문자열 변수 정의
+// 이메일 로그인 모달 컴포넌트
+const EmailLoginModal: React.FC<EmailLoginModalProps> = ({ onClose, onLogin }) => {
+  // 상수 문자열 정의
   const titleText = "이메일로 로그인";
   const emailLabelText = "이메일";
   const passwordLabelText = "비밀번호";
@@ -18,53 +13,52 @@ const EmailLoginModal = ({
   const noAccountText = "계정이 없습니까?";
   const registerButtonText = "회원가입하기";
 
-  const [email, setEmail] = useState(""); // 입력된 이메일 상태
-  const [password, setPassword] = useState(""); // 입력된 비밀번호 상태
+  // 상태 변수 정의
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
 
+  // 이메일 변경 핸들러
   const handleEmailChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setEmail(event.target.value);
   };
 
+  // 비밀번호 변경 핸들러
   const handlePasswordChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setPassword(event.target.value);
   };
 
+  // 로그인 버튼 클릭 핸들러
   const handleLoginClick = async () => {
     try {
-      const response = await axios.post("http://localhost:8080/login", {
+      // 백엔드에 로그인 요청
+      const response = await axios.post("http://ec2-13-125-246-160.ap-northeast-2.compute.amazonaws.com:8080/login", {
         email,
         password,
       });
       if (response.status === 200) {
+        // 성공적으로 로그인된 경우, 토큰을 로컬 스토리지에 저장
+        const authToken = response.data.authorization;
+        localStorage.setItem('authToken', authToken);
         onLogin();
         onClose();
       } else {
-        console.error("Error during login");
+        console.error("로그인 중 오류 발생");
       }
     } catch (error) {
-      console.error("Error during login:", error);
+      console.error("로그인 중 오류:", error);
     }
   };
 
   return (
+    // 모달 레이아웃
     <ModalBackground>
       <ModalContainer>
         <CloseButton onClick={onClose}>&times;</CloseButton>
         <Title>{titleText}</Title>
         <Label>{emailLabelText}</Label>
-        <Input
-          type="email"
-          placeholder="이메일을 입력하세요"
-          value={email}
-          onChange={handleEmailChange}
-        />
+        <Input type="email" placeholder="이메일을 입력하세요" value={email} onChange={handleEmailChange} />
         <Label>{passwordLabelText}</Label>
-        <Input
-          type="password"
-          placeholder="비밀번호를 입력하세요"
-          value={password}
-          onChange={handlePasswordChange}
-        />
+        <Input type="password" placeholder="비밀번호를 입력하세요" value={password} onChange={handlePasswordChange} />
         <RightAlignedButton>{findPasswordText}</RightAlignedButton>
         <LoginButton onClick={handleLoginClick}>{loginButtonText}</LoginButton>
         <BottomText>
@@ -77,6 +71,13 @@ const EmailLoginModal = ({
 
 export default EmailLoginModal;
 
+// 컴포넌트 props 타입 정의
+interface EmailLoginModalProps {
+  onClose: () => void;
+  onLogin: () => void;
+}
+
+// 스타일드 컴포넌트 정의
 const ModalBackground = styled.div`
   display: flex;
   justify-content: center;
@@ -112,8 +113,8 @@ const CloseButton = styled.button`
 
 const Title = styled.h2`
   margin-bottom: 20px;
-  font-size: 1.6rem; // 크기를 줄입니다.
-  font-weight: 400; // 굵기를 줄입니다.
+  font-size: 1.6rem;
+  font-weight: 400;
 `;
 
 const Label = styled.label`
@@ -134,15 +135,15 @@ const RightAlignedButton = styled.button`
   margin-top: 5px;
   background: none;
   border: none;
-  color: slategray; // 글자색을 변경합니다.
+  color: slategray;
   cursor: pointer;
 `;
 
 const LoginButton = styled.button`
   width: 100%;
   padding: 10px;
   margin-top: 10px;
-  background-color: darkslategray; // 배경색을 변경합니다.
+  background-color: darkslategray;
   color: white;
   border: none;
   border-radius: 5px;
@@ -151,12 +152,12 @@ const LoginButton = styled.button`
 
 const BottomText = styled.div`
   margin-top: 10px;
-  font-size: 0.9rem; // 크기를 줄입니다.
+  font-size: 0.9rem;
 `;
 
 const RegisterButton = styled.button`
   background: none;
   border: none;
-  color: slategray; // 글자색을 변경합니다.
+  color: slategray;
   cursor: pointer;
 `;