Skip to content

Commit faf99b4

Browse files
j2nooj2noo
authored
[feat] 로그인페이지, 회원가입 페이지 완성 (예외 로직 보류) (#25)
* feat(#22) : 회원가입 화면에서 headerstate 수정 * file(#22) : star 이미지 common 디렉터리로 이동 * file(#22) : star 이미지 common 디렉터리로 이동 * style(#22) : 헤더 height 변경 * feat(#22) : 원팀시작하기 버튼 생성 * feat(#22) : 이름, 활동지역, 전공, 희망직무 컴포넌트 완료 * feat(#22) : 입력 예외 처리 전 구현 완료 * feat(#22) : 에러 메세지 enum으로 분리 * feat(#22) : 에러 메세지 분리 및 컴포넌트 처ㅣㄹ * feat(#22) : input값 가져오는 로직 구성 * feat(#22-1) : 로그인 로직 변경 * feat(#22) : 로그인 이동 페이지 생성 * style(#22) : 사진 수정 * feat(#22) : 로그인시 headerState 변경 * feat(#22) : 헤더에서 리스트 클릭시 경로 라우팅 설정 및 headerState 설정 * feat(#22) : 헤더 Spacer 설정 * feat(#22) : vercel 배포용 에러 제거 * fix(#22) : api 타입 수정
1 parent 9192772 commit faf99b4

File tree

20 files changed

+559
-166
lines changed

20 files changed

+559
-166
lines changed

public/assets/images/header/header-star.svg renamed to public/assets/images/common/star.svg

File renamed without changes.

‎public/assets/images/join/.gitkeep‎

Whitespace-only changes.

‎public/assets/images/join/join-bg.png‎

1.34 MB
Loading

‎public/assets/images/login/login-bg.png‎

167 KB
Loading

‎public/assets/images/login/login-bg.svg‎

Lines changed: 34 additions & 0 deletions
Loading

‎public/assets/images/login/login-button.svg‎

Lines changed: 16 additions & 0 deletions
Loading

‎src/Router.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,15 +10,16 @@ import MultipleChoice from './pages/recommendation/MultipleChoice';
1010
import Subjective from './pages/recommendation/Subjective';
1111
import Contest from './pages/contest/Contest';
1212
import CompetitionList from './pages/competitionList/CompetitionList';
13+
import Login from './pages/login/Login';
1314
import PaymentComplete from './pages/payment/PaymentComplete';
1415

1516
function Router() {
1617
return (
1718
<BrowserRouter>
1819
<Header />
1920
<Routes>
20-
<Route path="/" element={<div>main</div>} />
21-
<Route path="/login" element={<div>login</div>} />
21+
{/* <Route path="/" element={<div>main</div>} /> */}
22+
<Route path="/login" element={<Login />} />
2223
<Route path="/login/oauth" element={<Oauth />} />
2324
<Route path="/login/join" element={<Join />} />
2425
<Route path="/recommendation" element={<Recommendation />}>

‎src/apis/join/postJoin.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import { IJoin } from '../../pages/join/Join';
1+
import { RequestJoin } from '../../interface/Join';
22
import Axios from '../axios';
33

4-
const postJoin = (kakaoAccessToken: string, joinData: IJoin) =>
4+
const postJoin = (kakaoAccessToken: string, joinData: RequestJoin) =>
55
Axios.post(
66
'/api/auth/register',
77
{

‎src/components/header/Header.tsx‎

Lines changed: 65 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,69 +1,95 @@
11
import styled from 'styled-components';
22
import { useNavigate } from 'react-router-dom';
3-
import { kakaoAuthorize } from '../login/KakaoLogin';
4-
import { useRecoilValue } from 'recoil';
3+
import { useRecoilState, useRecoilValue } from 'recoil';
54
import {
65
headerSelectedState,
76
kakaoNameState,
87
loginState,
98
} from '../../recoil/atom';
109

1110
import logoSrc from '/assets/images/header/wanteam-logo.svg';
12-
import starSrc from '/assets/images/header/header-star.svg';
11+
import starSrc from '/assets/images/common/star.svg';
1312
import { Headers } from '../../constants/Header';
13+
import { useEffect } from 'react';
1414

1515
const Header = () => {
1616
const kakaoName = useRecoilValue(kakaoNameState);
17-
const isLogin = useRecoilValue(loginState);
17+
const [isLogin, setIsLogin] = useRecoilState(loginState);
1818
const headerSelectedIndex = useRecoilValue(headerSelectedState);
1919
const navigate = useNavigate();
20+
useEffect(() => {
21+
if (localStorage.getItem('kawq;ejqwken')) setIsLogin(true);
22+
// if (localStorage.getItem('kakaoAccessToken')) setIsLogin(true);
23+
}, []);
2024
return (
21-
<HeaderLayout>
22-
<Logo src={logoSrc} onClick={() => navigate('/')} />
23-
<HeaderContainer>
24-
<HeaderItem
25-
$isSelected={headerSelectedIndex === Headers.list}
26-
onClick={() => navigate('/list')}
27-
>
28-
<HeaderStar src={starSrc} />
29-
공모전 리스트
30-
</HeaderItem>
31-
<HeaderItem $isSelected={headerSelectedIndex === Headers.myTeam}>
32-
<HeaderStar src={starSrc} />내 팀
33-
</HeaderItem>
34-
{isLogin ? (
35-
<>
36-
<HeaderItem $isSelected={headerSelectedIndex === Headers.myPage}>
25+
<>
26+
<Spacer />
27+
<HeaderLayout>
28+
<HeaderContentContainer>
29+
<Logo src={logoSrc} onClick={() => navigate('/')} />
30+
<HeaderContainer>
31+
<HeaderItem
32+
$isSelected={headerSelectedIndex === Headers.list}
33+
onClick={() => navigate('/list')}
34+
>
35+
3736
<HeaderStar src={starSrc} />
38-
{kakaoName}님{' '}
37+
공모전 리스트
3938
</HeaderItem>
40-
</>
41-
) : (
42-
<HeaderItem
43-
$isSelected={headerSelectedIndex === Headers.login}
44-
onClick={kakaoAuthorize}
45-
>
46-
<HeaderStar src={starSrc} />
47-
로그인/회원가입
48-
</HeaderItem>
49-
)}
50-
</HeaderContainer>
51-
{/* {isLogin ? <KakaoLogout /> : <KakaoLogin />} */}
52-
</HeaderLayout>
39+
<HeaderItem $isSelected={headerSelectedIndex === Headers.myTeam}>
40+
<HeaderStar src={starSrc} />내 팀
41+
</HeaderItem>
42+
{isLogin ? (
43+
<>
44+
<HeaderItem
45+
$isSelected={headerSelectedIndex === Headers.myPage}
46+
>
47+
<HeaderStar src={starSrc} />
48+
{kakaoName}님{' '}
49+
</HeaderItem>
50+
</>
51+
) : (
52+
<HeaderItem
53+
$isSelected={headerSelectedIndex === Headers.login}
54+
onClick={() => navigate('/login')}
55+
>
56+
<HeaderStar src={starSrc} />
57+
로그인/회원가입
58+
</HeaderItem>
59+
)}
60+
</HeaderContainer>
61+
</HeaderContentContainer>
62+
</HeaderLayout>
63+
</>
5364
);
5465
};
5566
export default Header;
5667

68+
const Spacer = styled.div`
69+
height: 8.2rem;
70+
`;
5771
const HeaderLayout = styled.header`
58-
//width: 153.6rem;
59-
max-width: 122.4rem;
60-
height: 10rem;
61-
margin: auto;
72+
position: fixed;
73+
top: 0;
74+
left: 50%;
75+
transform: translateX(-50%);
6276
background-color: rgba(255, 255, 255, 0.8);
6377
border-bottom: 1px solid ${(props) => props.theme.colors.gray10};
64-
6578
backdrop-filter: blur(8px);
6679
80+
width: 100%;
81+
height: 8.2rem;
82+
83+
display: flex;
84+
85+
z-index: 999;
86+
`;
87+
const HeaderContentContainer = styled.div`
88+
width: 122.4rem;
89+
height: 100%;
90+
/* height: 8.2rem; */
91+
margin: auto;
92+
6793
display: flex;
6894
justify-content: space-between;
6995
align-items: center;

‎src/components/join/ErrorMessage.tsx‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import styled from 'styled-components';
2+
3+
const ErrorMessage = ({ errorText }: { errorText: string }) => {
4+
return <ErrorText>{errorText}</ErrorText>;
5+
};
6+
const ErrorText = styled.div`
7+
position: absolute;
8+
bottom: -2rem;
9+
left: 12.6rem;
10+
color: ${(props) => props.theme.colors.error60};
11+
${(props) => props.theme.fonts.bodyXXS};
12+
`;
13+
export default ErrorMessage;

0 commit comments

Comments
 (0)