-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* feat: (#74) 로그인, 리다이렉션 페이지 구현 * feat: (#74) 로그인 정보에 대한 context 구현 * refactor: (#74) 실제 API 연동을 위한 url path로 대체 * design: (#74) 선택지 리스트 모바일의 경우 스크롤 없도록 수정 * chore: (#74) 카카오 로그인 버튼 svg 파일 추가 * feat: (#74) 페이지 라우팅 구현 * chore: (#74) request의 key 값 수정 * 회원 닉네임 수정, 회원 탈퇴 fetch 함수 구현 및 MSW 코드 작성 (#178) * refactor: (#153) delete를 패치하는 함수 오류 제거를 위한 리팩터링 * feat: (#153): 유저 닉네임 변경, 회원 탈퇴 MSW 코드 작성 * feat: (#153) 유저 닉네임, 회원 탈퇴 api fetch 함수 구현 * refactor: (#153) BASE_URL 추가 및 MSW 코드 성공했을 때 구체적인 메세지로 수정 * fix: (#74) 로그인 후 context API에 저장이 안되는 오류 해결 * feat: (#74) 쿠키 getter, setter 함수 제작 * feat: (#74) 로그인 후 쿠키에 토큰을 저장하고 context API에 토큰 저장 * refactor: (#74) 로그인 정보 변수 타입 위치 이동 * feat: (#74) 레이아웃 컴포넌트에 전역 로그인 정보 적용하기 * feat: (#74) 초기 진입 시 쿠키 내 엑세스 토큰 확인/설정하는 코드 작성 * fix: (#74) 로그인 관련 라우팅이 안되는 오류 해결 * feat: (#74) 유저 로그인 쿼리에 현 로그인 여부를 키로 추가 * feat: (#74) 글쓰기 api url를 실제 url로 수정 * refactor: (#74) 유저정보 훅 이름 변경에 따른 수정 * feat: (#74) 글목록 페이지에 전역 유저정보 적용 * fix: 중복 코드로 인한 오류 수정 * fix: 스타일드 컴포넌트 프롭스 오타 오류 수정 * chore: 허스키 파일 업데이트 없음 * refactor: 불필요한 코드 삭제 * refactor: 엑세스 토큰 타입 파일 분리 * refactor: (#74) 로그인 정보 관련 이름 수정, login > logged * feat: (#74) fetch 유틸함수에서 쿠키를 불러와 토큰 넣은 헤더 생성 * fix: (#74) 쿠키가 브라우저에 저장 안되는 오류 수정 - path=/ 를 통해 모든 url에서 쿠키 접근가능하도록 수정 * feat: (#74) 패치 헤더에 직접 토큰을 넣는 방식으로 수정함에 따른 기존 코드 수정 * feat: (#74)사용자 정보 가지고 오는 api 실제 dev서버 url로 수정 * fix: (#74) 로그인 정보 - 사용자 정보 불러오기 무한루프 오류 해결 * refactor: (#74) api 연결 url 이름 규칙에 맞게 수정 * refactor: (#74) 쿼리스트링 가지고 오는 방식 수정 * feat: (#74) .env url 규칙에 따라 수정 --------- Co-authored-by: 김영길/KIM YOUNG GIL <80146176+Gilpop8663@users.noreply.github.com> Co-authored-by: chsua <csj1919@naver.com>
- Loading branch information
Showing
19 changed files
with
264 additions
and
43 deletions.
There are no files selected for viewing
Empty file.
Empty file.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,37 @@ | ||
import React, { Dispatch, SetStateAction, createContext, useEffect, useState } from 'react'; | ||
|
||
import { LoggedInfo } from '@type/user'; | ||
|
||
import { useUserInfo } from '@hooks/query/user/useUserInfo'; | ||
|
||
import { getCookieToken } from '@utils/cookie'; | ||
|
||
interface Auth { | ||
loggedInfo: LoggedInfo; | ||
setLoggedInfo: Dispatch<SetStateAction<LoggedInfo>>; | ||
} | ||
|
||
const notLoggedInfo: LoggedInfo = { | ||
isLogged: false, | ||
accessToken: '', | ||
}; | ||
|
||
export const AuthContext = createContext({} as Auth); | ||
|
||
export function AuthProvider({ children }: { children: React.ReactNode }) { | ||
const [loggedInfo, setLoggedInfo] = useState(notLoggedInfo); | ||
const { data: userInfo } = useUserInfo(loggedInfo.isLogged); | ||
|
||
useEffect(() => { | ||
if (userInfo) setLoggedInfo(origin => ({ ...origin, userInfo })); | ||
}, [userInfo]); | ||
|
||
useEffect(() => { | ||
const accessToken = getCookieToken().accessToken; | ||
if (accessToken) setLoggedInfo(origin => ({ ...origin, accessToken })); | ||
}, []); | ||
|
||
return ( | ||
<AuthContext.Provider value={{ loggedInfo, setLoggedInfo }}>{children}</AuthContext.Provider> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,60 @@ | ||
import { useNavigate } from 'react-router-dom'; | ||
|
||
import styled from 'styled-components'; | ||
|
||
import LogoButton from '@components/common/LogoButton'; | ||
import SquareButton from '@components/common/SquareButton'; | ||
|
||
import kakaoLogin from '@assets/kakao_login_medium_wide.svg'; | ||
|
||
export default function Login() { | ||
const navigate = useNavigate(); | ||
const CLIENT_ID = `${process.env.VOTOGETHER_REST_API_KEY}`; | ||
const REDIRECT_URI = `${process.env.VOTOGETHER_CLIENT_REDIRECT_URL}`; | ||
const kakaoURL = `https://kauth.kakao.com/oauth/authorize?client_id=${CLIENT_ID}&redirect_uri=${REDIRECT_URI}&response_type=code`; | ||
|
||
return ( | ||
<Wrapper> | ||
<LogoButton content="icon" style={{ width: '100px', height: '100px' }} /> | ||
<ButtonWrapper> | ||
<KaKaoLoginImg | ||
alt="카카오 로그인" | ||
src={kakaoLogin} | ||
onClick={() => (window.location.href = kakaoURL)} | ||
/> | ||
<SquareButton onClick={() => navigate('/')} theme="blank" style={{ height: '35px' }}> | ||
비회원으로 이용하기 | ||
</SquareButton> | ||
</ButtonWrapper> | ||
</Wrapper> | ||
); | ||
} | ||
|
||
const Wrapper = styled.div` | ||
display: flex; | ||
flex-direction: column; | ||
justify-content: space-around; | ||
align-items: center; | ||
gap: 150px; | ||
width: 320px; | ||
height: 1vh; | ||
margin-top: 300px; | ||
position: fixed; | ||
left: 10%; | ||
@media (min-width: 576px) { | ||
left: 30%; | ||
} | ||
`; | ||
|
||
const KaKaoLoginImg = styled.img` | ||
width: 255px; | ||
height: 35px; | ||
`; | ||
|
||
const ButtonWrapper = styled.div` | ||
display: flex; | ||
flex-direction: column; | ||
justify-content: space-around; | ||
gap: 20px; | ||
width: 230px; | ||
`; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,61 @@ | ||
import { useContext, useEffect, useState } from 'react'; | ||
import { useNavigate, useSearchParams } from 'react-router-dom'; | ||
|
||
import { AuthResponse } from '@type/auth'; | ||
|
||
import { AuthContext } from '@hooks/context/auth'; | ||
|
||
import { getCookieToken, setCookieToken } from '@utils/cookie'; | ||
import { getFetch } from '@utils/fetch'; | ||
|
||
const getAuthInfo = async (url: string): Promise<AuthResponse> => { | ||
return await getFetch<AuthResponse>(url); | ||
}; | ||
|
||
export default function Redirection() { | ||
const { loggedInfo, setLoggedInfo } = useContext(AuthContext); | ||
const [errorMessage, setErrorMessage] = useState(''); | ||
const [isLoading, setIsLoading] = useState(true); | ||
const [params] = useSearchParams(); | ||
|
||
const navigate = useNavigate(); | ||
|
||
useEffect(() => { | ||
(async () => { | ||
setIsLoading(true); | ||
setErrorMessage(''); | ||
|
||
const code = params.get('code'); | ||
const REGISTER_API_URL = `${process.env.VOTOGETHER_BASE_URL}/auth/kakao/callback?code=${code}`; | ||
|
||
await getAuthInfo(REGISTER_API_URL) | ||
.finally(() => { | ||
setIsLoading(false); | ||
}) | ||
.catch(error => { | ||
setErrorMessage(error.message); | ||
}) | ||
.then(res => { | ||
if (!res) return setErrorMessage('잘못된 형식의 response'); | ||
|
||
const { accessToken } = res; | ||
setCookieToken('accessToken', accessToken); | ||
|
||
setLoggedInfo({ | ||
...loggedInfo, | ||
accessToken: getCookieToken().accessToken, | ||
isLogged: true, | ||
}); | ||
|
||
navigate('/'); | ||
}); | ||
})(); | ||
}, [navigate, loggedInfo, setLoggedInfo]); | ||
|
||
return ( | ||
<div> | ||
{isLoading && '로그인 중입니다...'} | ||
{errorMessage && errorMessage} | ||
</div> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
export interface AuthResponse { | ||
accessToken: string; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
type CookieKey = 'accessToken' | 'refreshToken'; | ||
|
||
export const setCookieToken = (key: CookieKey, token: string) => { | ||
//secure 속성은 현재 dev에서는 http로 진행중이기 때문에 사용할 수 없음 | ||
document.cookie = `${encodeURIComponent(key)}=${encodeURIComponent(token)}; path=/`; | ||
}; | ||
|
||
// token형식 = "key=value; key=value; key=value" | ||
export function getCookieToken() { | ||
const cookie = document.cookie; | ||
const cookieContent = {} as { [key: string]: any }; | ||
cookie.split('; ').forEach(pair => { | ||
const [key, value] = pair.split('='); | ||
cookieContent[key] = value; | ||
}); | ||
return cookieContent as Record<CookieKey, any>; | ||
} |
Oops, something went wrong.