From 69cf3a24e03dd5d221c50d648deaab22f911e381 Mon Sep 17 00:00:00 2001 From: Minji Kim Date: Mon, 17 Feb 2025 20:20:33 +0900 Subject: [PATCH 1/3] =?UTF-8?q?=F0=9F=92=84=20UI:=20=EB=84=A4=EB=B9=84?= =?UTF-8?q?=EA=B2=8C=EC=9D=B4=EC=85=98=EB=B0=94=20=ED=98=B8=EB=B2=84?= =?UTF-8?q?=EB=A7=81=20=EC=B6=94=EA=B0=80=20#89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../NavigationBar/NavigationBar.tsx | 53 ++++++++++++------- 1 file changed, 33 insertions(+), 20 deletions(-) diff --git a/umc-master/src/components/NavigationBar/NavigationBar.tsx b/umc-master/src/components/NavigationBar/NavigationBar.tsx index ea636f9..0ed2e61 100644 --- a/umc-master/src/components/NavigationBar/NavigationBar.tsx +++ b/umc-master/src/components/NavigationBar/NavigationBar.tsx @@ -1,6 +1,6 @@ -/* eslint-disable react/prop-types */ +import React from 'react'; import { useState } from 'react'; -import { Link } from 'react-router-dom'; +import { NavLink } from 'react-router-dom'; import styled from 'styled-components'; import LogoImage from '@assets/logo.png'; import RoutePaths from '@router/routePaths'; @@ -23,25 +23,20 @@ const NavigationBar: React.FC = ({ login }) => { return ( + @@ -80,21 +76,38 @@ const Nav = styled.nav` box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); `; +const LeftSection = styled.div` + display: flex; + flex-direction: row; + align-items: center; + gap: 48px; +`; + const Logo = styled.img` - height: 52px; + height: 42px; cursor: pointer; `; const MenuItems = styled.div` display: flex; gap: clamp(20px, 10vw, 40px); +`; + +const StyledNavLink = styled(NavLink)` + color: ${({ theme }) => theme.colors.text.black}; + text-decoration: none; + transition: color 0.3s ease; + + &:hover { + color: ${({ theme }) => theme.colors.primary[400]}; + } - a { - color: ${({ theme }) => theme.colors.text.black}; + &.active { + color: ${({ theme }) => theme.colors.primary[500]}; } `; -const LoginBtn = styled(Link)` +const LoginBtn = styled(NavLink)` background: ${({ theme }) => theme.colors.primary[500]}; color: ${({ theme }) => theme.colors.text.white}; padding: 7px 27px; From 22b079d727b012e199573d7717009ab12cd23432 Mon Sep 17 00:00:00 2001 From: Minji Kim Date: Mon, 17 Feb 2025 20:28:42 +0900 Subject: [PATCH 2/3] =?UTF-8?q?=E2=9C=A8=20feat:=20=ED=8C=8C=EB=B9=84?= =?UTF-8?q?=EC=BD=98=20=EC=B6=94=EA=B0=80=20#89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- umc-master/index.html | 4 ++-- umc-master/public/favicon.svg | 10 ++++++++++ 2 files changed, 12 insertions(+), 2 deletions(-) create mode 100644 umc-master/public/favicon.svg diff --git a/umc-master/index.html b/umc-master/index.html index 046e329..6256882 100644 --- a/umc-master/index.html +++ b/umc-master/index.html @@ -2,7 +2,7 @@ - + - Vite + React + TS + 홈마스터
diff --git a/umc-master/public/favicon.svg b/umc-master/public/favicon.svg new file mode 100644 index 0000000..70aa4cc --- /dev/null +++ b/umc-master/public/favicon.svg @@ -0,0 +1,10 @@ + + + + + + + + + + From 4a5a2dec9be3daf5f4311be253c60e430cac6f45 Mon Sep 17 00:00:00 2001 From: Minji Kim Date: Thu, 20 Feb 2025 23:25:14 +0900 Subject: [PATCH 3/3] =?UTF-8?q?=F0=9F=90=9B=20bug:=20=EC=B6=A9=EB=8F=8C=20?= =?UTF-8?q?=EC=97=90=EB=9F=AC=20=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- umc-master/index.html | 1 + .../NavigationBar/NavigationBar.tsx | 19 ++++++++++++++++--- 2 files changed, 17 insertions(+), 3 deletions(-) diff --git a/umc-master/index.html b/umc-master/index.html index 6256882..e76b095 100644 --- a/umc-master/index.html +++ b/umc-master/index.html @@ -11,6 +11,7 @@ /> 홈마스터 +
diff --git a/umc-master/src/components/NavigationBar/NavigationBar.tsx b/umc-master/src/components/NavigationBar/NavigationBar.tsx index 0ed2e61..9846272 100644 --- a/umc-master/src/components/NavigationBar/NavigationBar.tsx +++ b/umc-master/src/components/NavigationBar/NavigationBar.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { useState } from 'react'; +import { useEffect, useState } from 'react'; import { NavLink } from 'react-router-dom'; import styled from 'styled-components'; import LogoImage from '@assets/logo.png'; @@ -8,6 +8,9 @@ import Typography from '@components/common/typography'; import AlarmIcon from '@assets/icons/alarm.svg?react'; import AlarmModal from '@components/Modal/alarm'; import ProfileModal from '@components/Modal/profile'; +import { useUserStore } from '@store/userStore'; +import { getUsers } from '@apis/profileApi'; +import gray_character from '@assets/gray-character.png'; interface NavigationBarProps { login: boolean; @@ -16,6 +19,12 @@ interface NavigationBarProps { const NavigationBar: React.FC = ({ login }) => { const [isAlarmModalOpen, setIsAlarmModalOpen] = useState(false); const [isProfileModalOpen, setIsProfileModalOpen] = useState(false); + const { user, fetchUser } = useUserStore(); + + useEffect(() => { + fetchUser(); // 컴포넌트 마운트 시 사용자 정보 가져오기 + }, []); + getUsers(); const toggleAlarmModal = () => setIsAlarmModalOpen((prev) => !prev); const toggleProfileModal = () => setIsProfileModalOpen((prev) => !prev); @@ -40,7 +49,11 @@ const NavigationBar: React.FC = ({ login }) => { {login ? ( - + ) : ( @@ -126,7 +139,7 @@ const UserSection = styled.div` cursor: pointer; `; -const ProfileImg = styled.div` +const ProfileImg = styled.img` width: 40px; height: 40px; background: #e0e0e0; /** TODO: 프로필 이미지 추가 */