diff --git a/public/assets/images/header/header-star.svg b/public/assets/images/header/header-star.svg new file mode 100644 index 0000000..b8dbdf8 --- /dev/null +++ b/public/assets/images/header/header-star.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/src/components/header/Header.tsx b/src/components/header/Header.tsx index 4260f56..16f6dc3 100644 --- a/src/components/header/Header.tsx +++ b/src/components/header/Header.tsx @@ -1,27 +1,48 @@ import styled from 'styled-components'; import { useNavigate } from 'react-router-dom'; -import KakaoLogin from '../login/KakaoLogin'; +import { kakaoAuthorize } from '../login/KakaoLogin'; import { useRecoilValue } from 'recoil'; -import { kakaoNameState, loginState } from '../../recoil/atom'; +import { + headerSelectedState, + kakaoNameState, + loginState, +} from '../../recoil/atom'; import logoSrc from '/assets/images/header/wanteam-logo.svg'; +import starSrc from '/assets/images/header/header-star.svg'; +import { Headers } from '../../constants/Header'; const Header = () => { const kakaoName = useRecoilValue(kakaoNameState); const isLogin = useRecoilValue(loginState); + const headerSelectedIndex = useRecoilValue(headerSelectedState); const navigate = useNavigate(); return ( navigate('/')} /> - 공모전 리스트 - 내팀 + + + 공모전 리스트 + + + 내 팀 + {isLogin ? ( <> - {kakaoName}님 + + + {kakaoName}님{' '} + ) : ( - + + + 로그인/회원가입 + )} {/* {isLogin ? : } */} @@ -35,7 +56,10 @@ const HeaderLayout = styled.header` max-width: 122.4rem; height: 10rem; margin: auto; - background-color: ${(props) => props.theme.colors.gray10}; + background-color: rgba(255, 255, 255, 0.8); + border-bottom: 1px solid ${(props) => props.theme.colors.gray10}; + + backdrop-filter: blur(8px); display: flex; justify-content: space-between; @@ -52,8 +76,40 @@ const HeaderContainer = styled.div` display: flex; justify-content: space-around; align-items: center; - gap: 3rem; + /* gap: 3rem; */ `; -const HeaderItem = styled.div` - font-size: 2rem; +const HeaderItem = styled.button<{ $isSelected: boolean }>` + color: ${(props) => props.theme.colors.gray80}; + + ${(props) => + props.$isSelected ? props.theme.fonts.subtitleM : props.theme.fonts.bodyM}; + + color: ${(props) => + props.$isSelected + ? props.theme.colors.primary60 + : props.theme.colors.gray80}; + + display: flex; + justify-content: center; + align-items: center; + + position: relative; + + /* min-width: 13.1rem; */ + + text-align: center; + + padding: 1.2rem 0.8rem; + margin: 0 2rem; + /* border: 1px solid red; */ + > img { + display: ${(props) => (props.$isSelected ? 'default' : 'none')}; + } +`; +const HeaderStar = styled.img` + width: 2rem; + height: 2rem; + + position: absolute; + left: -1.8rem; `; diff --git a/src/components/login/KakaoLogin.tsx b/src/components/login/KakaoLogin.tsx index de84a19..df41ed5 100644 --- a/src/components/login/KakaoLogin.tsx +++ b/src/components/login/KakaoLogin.tsx @@ -1,19 +1,28 @@ -import kakaoLoginImageSrc from '/assets/images/header/kakaoLogin.png'; +// import kakaoLoginImageSrc from '/assets/images/header/kakaoLogin.png'; export const kakao = (window as any).Kakao; + +export const kakaoAuthorize = () => { + const redirectUri = 'http://localhost:5173/login/oauth'; + kakao.Auth.authorize({ + redirectUri: `${redirectUri}`, + scope: 'profile_nickname,profile_image,account_email,account_email', + }); +}; + const KakaoLogin = () => { const redirectUri = 'http://localhost:5173/login/oauth'; return ( - kakao.Auth.authorize({ redirectUri: `${redirectUri}`, scope: 'profile_nickname,profile_image,account_email,account_email', }) } - > + >마이페이지 ); }; export default KakaoLogin; diff --git a/src/constants/Header.ts b/src/constants/Header.ts new file mode 100644 index 0000000..be412db --- /dev/null +++ b/src/constants/Header.ts @@ -0,0 +1,7 @@ +export enum Headers { + none = 'none', + list = 'list', + myTeam = 'myTeam', + login = 'login', + myPage = 'myPage', +} diff --git a/src/pages/join/Join.tsx b/src/pages/join/Join.tsx index 65c3756..f5bc863 100644 --- a/src/pages/join/Join.tsx +++ b/src/pages/join/Join.tsx @@ -1,7 +1,10 @@ import styled from 'styled-components'; -import React, { useState } from 'react'; +import React, { useEffect, useState } from 'react'; import postJoin from '../../apis/join/postJoin'; import { useLocation } from 'react-router-dom'; +import { useSetRecoilState } from 'recoil'; +import { headerSelectedState } from '../../recoil/atom'; +import { Headers } from '../../constants/Header'; const REGIONS = [ '무관', '서울', @@ -64,8 +67,11 @@ const Join = () => { return newObj; }); - }; + + const setHeaderSelected = useSetRecoilState(headerSelectedState); + useEffect(() => setHeaderSelected(Headers.none)); + return ( diff --git a/src/pages/profile/Profile.tsx b/src/pages/profile/Profile.tsx index eb8df95..1d958d9 100644 --- a/src/pages/profile/Profile.tsx +++ b/src/pages/profile/Profile.tsx @@ -6,10 +6,18 @@ import ProfileKeyword from '../../components/profile/ProfileKeyword'; import ProfileRecommendation from '../../components/profile/ProfileRecommendation'; import ProfilePersonality from '../../components/profile/ProfilePersonality'; import { profileDatas, reviewDatas } from '../../constants/Profile'; +import { useSetRecoilState } from 'recoil'; +import { headerSelectedState } from '../../recoil/atom'; +import { useEffect } from 'react'; +import { Headers } from '../../constants/Header'; const Profile = () => { const { userId } = useParams(); - userId; + const setHeaderSelected = useSetRecoilState(headerSelectedState); + userId; //이거는 일단 무시해주세요 + + useEffect(() => setHeaderSelected(Headers.list)); + return ( diff --git a/src/recoil/atom.ts b/src/recoil/atom.ts index 4ee80ad..cec85ca 100644 --- a/src/recoil/atom.ts +++ b/src/recoil/atom.ts @@ -1,10 +1,15 @@ import { atom } from 'recoil'; -export type HeaderColorType = 'transparent' | 'white'; //추가 가능 -export const currHeaderAtom = atom({ - key: 'currHeader', - default: 'white', +import { Headers } from '../constants/Header'; +export type HeaderSelectedType = + | 'none' + | 'list' + | 'myTeam' + | 'login' + | 'myPage'; //추가 가능 +export const headerSelectedState = atom({ + key: 'headerSelectedState', + default: Headers.none, }); - export const kakaoNameState = atom({ key: 'kakaoNameState', default: 'noname', @@ -17,3 +22,4 @@ export const loginState = atom({ key: 'loginState', default: false, }); +