[feat] 헤더 제작 및 ★★(중요)headerState 변경 요청★★ (#21)

* feat(#6) : 헤더에 별 컴포넌트 전체 추가

* feat(#6) : HeaderSeletedType 정의

* feat(#6) : 헤더 recoilState 설정용 enum타입 추가

* feat(#6) : Join, Profile 페이지 setHeaderState

* fix(#6) : headerState 기본값 none으로 변경

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 (
     <HeaderLayout>
       <Logo src={logoSrc} onClick={() => navigate('/')} />
       <HeaderContainer>
-        <HeaderItem>공모전 리스트</HeaderItem>
-        <HeaderItem>내팀</HeaderItem>
+        <HeaderItem $isSelected={headerSelectedIndex === Headers.list}>
+          <HeaderStar src={starSrc} />
+          공모전 리스트
+        </HeaderItem>
+        <HeaderItem $isSelected={headerSelectedIndex === Headers.myTeam}>
+          <HeaderStar src={starSrc} />내 팀
+        </HeaderItem>
         {isLogin ? (
           <>
-            <HeaderItem>{kakaoName}님 </HeaderItem>
+            <HeaderItem $isSelected={headerSelectedIndex === Headers.myPage}>
+              <HeaderStar src={starSrc} />
+              {kakaoName}님{' '}
+            </HeaderItem>
           </>
         ) : (
-          <KakaoLogin />
+          <HeaderItem
+            $isSelected={headerSelectedIndex === Headers.login}
+            onClick={kakaoAuthorize}
+          >
+            <HeaderStar src={starSrc} />
+            로그인/회원가입
+          </HeaderItem>
         )}
       </HeaderContainer>
       {/* {isLogin ? <KakaoLogout /> : <KakaoLogin />} */}
@@ -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;
 `;

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 (
-    <img
-      src={kakaoLoginImageSrc}
+    <div
+      // src={kakaoLoginImageSrc}
       onClick={() =>
         kakao.Auth.authorize({
           redirectUri: `${redirectUri}`,
           scope: 'profile_nickname,profile_image,account_email,account_email',
         })
       }
-    ></img>
+    >마이페이지</div>
   );
 };
 export default KakaoLogin;

src/constants/Header.ts

@@ -0,0 +1,7 @@
+export enum Headers {
+  none = 'none',
+  list = 'list',
+  myTeam = 'myTeam',
+  login = 'login',
+  myPage = 'myPage',
+}

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 (
     <JoinLayout>
       <FormContainer action="#" onSubmit={handleSubmit}>

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 (
     <ProfileLayout>
       <ProfileInfo profileData={profileDatas} />

src/recoil/atom.ts

@@ -1,10 +1,15 @@
 import { atom } from 'recoil';
-export type HeaderColorType = 'transparent' | 'white'; //추가 가능
-export const currHeaderAtom = atom<HeaderColorType>({
-  key: 'currHeader',
-  default: 'white',
+import { Headers } from '../constants/Header';
+export type HeaderSelectedType =
+  | 'none'
+  | 'list'
+  | 'myTeam'
+  | 'login'
+  | 'myPage'; //추가 가능
+export const headerSelectedState = atom<HeaderSelectedType>({
+  key: 'headerSelectedState',
+  default: Headers.none,
 });
-
 export const kakaoNameState = atom({
   key: 'kakaoNameState',
   default: 'noname',
@@ -17,3 +22,4 @@ export const loginState = atom<boolean>({
   key: 'loginState',
   default: false,
 });
+