From 0d4589a4cb90269c0ab6d2f18609863e22a64e3a Mon Sep 17 00:00:00 2001
From: novice1993 <novice1993@gmail.com>
Date: Tue, 19 Sep 2023 05:30:15 +0900
Subject: [PATCH] =?UTF-8?q?[Design]=20=EC=83=81=EB=8B=A8=20=ED=97=A4?=
 =?UTF-8?q?=EB=8D=94=EB=B6=80=EB=B6=84=20=EC=9C=A0=EC=A0=80=20=ED=94=84?=
 =?UTF-8?q?=EB=A1=9C=ED=95=84=20=EB=94=94=EC=9E=90=EC=9D=B8=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 상단 헤더부분 유저 프로필 수정

Issues #122
---
 client/src/components/Headers/LoginHeader.tsx | 79 ++++++++++++++-----
 1 file changed, 58 insertions(+), 21 deletions(-)

diff --git a/client/src/components/Headers/LoginHeader.tsx b/client/src/components/Headers/LoginHeader.tsx
index 234dcc9f..afdcdb94 100644
--- a/client/src/components/Headers/LoginHeader.tsx
+++ b/client/src/components/Headers/LoginHeader.tsx
@@ -1,7 +1,7 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import styled from "styled-components";
 import StockHolmLogo from "../../asset/images/StockHolmLogo.png";
-import SampleProfile from "../../asset/images/ProfileSample.png";
+// import SampleProfile from "../../asset/images/ProfileSample.png";
 import { useNavigate } from "react-router-dom";
 import ProfileModal from "../Profile/profileModal";
 import StockSearchComponent from "./stockSearchComponent";
@@ -17,8 +17,18 @@ const LoginHeader: React.FC<LoginHeaderProps> = () => {
   const dispatch = useDispatch(); //
 
   const { data: memberInfo } = useGetMemberInfo(); // use the hook here
-  const userName = memberInfo?.name; // retrieve the user's name
-  const userEmail = memberInfo?.email; // retrieve the user's email
+  // const userName = memberInfo?.name; // retrieve the user's name
+  // const userEmail = memberInfo?.email; // retrieve the user's email
+
+  // 🔴 프로필에 들어갈 텍스트
+  const [profileText, setProfileText] = useState("");
+  useEffect(() => {
+    if (memberInfo) {
+      const userEmail = memberInfo.email;
+      const firstText = userEmail.slice(0, 1);
+      setProfileText(firstText);
+    }
+  }, [memberInfo]);
 
   // 프로필 모달 열기 함수
   const handleProfileOpen = () => {
@@ -52,9 +62,10 @@ const LoginHeader: React.FC<LoginHeaderProps> = () => {
       </LogoButton>
       <StockSearchComponent />
       <UserActions>
-        <UserNameDisplay>{userName || userEmail}</UserNameDisplay>
+        {/* <UserNameDisplay>{userName || userEmail}</UserNameDisplay> */}
         <ProfileButton onClick={handleProfileOpen}>
-          <ProfileImage src={SampleProfile} />
+          {profileText}
+          {/* <ProfileImage src={SampleProfile} /> */}
         </ProfileButton>
         {isProfileModalOpen && <ProfileModal onClose={handleProfileClose} />}
         <LogoutButton onClick={handleLogout}>{logoutText}</LogoutButton>
@@ -109,18 +120,43 @@ const UserActions = styled.div`
   align-items: center;
 `;
 
-//유저 이름 스타일
-const UserNameDisplay = styled.span`
-  font-weight: 400;
-  font-size: 1rem;
-  color: darkslategray;
-  margin-right: 1rem;
-`;
+// //유저 이름 스타일
+// const UserNameDisplay = styled.span`
+//   font-weight: 400;
+//   font-size: 1rem;
+//   color: darkslategray;
+//   margin-right: 1rem;
+// `;
+
+// // 프로필 버튼 스타일
+// const ProfileButton = styled.button`
+//   margin-right: 1rem;
+//   background-color: transparent;
+//   border: none;
+//   cursor: pointer;
+//   padding: 0;
+//   &:focus {
+//     outline: none;
+//   }
+//   &:hover {
+//     background-color: #f2f2f2; // light gray color on hover
+//   }
+// `;
 
 // 프로필 버튼 스타일
 const ProfileButton = styled.button`
-  margin-right: 1rem;
-  background-color: transparent;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  border-radius: 50%;
+  margin-right: 0.75rem;
+  margin-top: 0.1rem;
+
+  background-color: #274949;
+  color: white;
   border: none;
   cursor: pointer;
   padding: 0;
@@ -128,15 +164,16 @@ const ProfileButton = styled.button`
     outline: none;
   }
   &:hover {
-    background-color: #f2f2f2; // light gray color on hover
+    background-color: #587878; // light gray color on hover
   }
+  transition: background-color 0.3s ease;
 `;
 
-// 프로필 이미지 스타일
-const ProfileImage = styled.img`
-  height: 35px;
-  width: auto;
-`;
+// // 프로필 이미지 스타일
+// const ProfileImage = styled.img`
+//   height: 35px;
+//   width: auto;
+// `;
 
 // 로그아웃 버튼 스타일
 const LogoutButton = styled.button`