Skip to content

Commit

Permalink
feat: add useAuthStore
Browse files Browse the repository at this point in the history
  • Loading branch information
ooooorobo committed Aug 11, 2024
1 parent 7de811a commit 68ed111
Show file tree
Hide file tree
Showing 5 changed files with 84 additions and 3 deletions.
12 changes: 11 additions & 1 deletion package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 2 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,8 @@
"react-range-slider-input": "^3.0.7",
"react-slick": "^0.30.2",
"slick-carousel": "^1.8.1",
"zustand": "^4.5.2"
"zustand": "^4.5.2",
"zustand-persist": "^0.4.0"
},
"devDependencies": {
"@chromatic-com/storybook": "^1.5.0",
Expand Down
39 changes: 39 additions & 0 deletions src/app/routes/auth.kakao.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
import { LoaderFunction } from '@remix-run/node';
import { loginKakao } from 'src/types';
import { useLoaderData } from '@remix-run/react';
import { useEffect } from 'react';
import { useAuthStore } from 'src/entities/auth/useAuthStore';

export const loader: LoaderFunction = async ({ request }) => {
const searchParams = new URL(request.url).searchParams;
const code = searchParams.get('code');

if (!code) {
throw new Response('', {
status: 404,
statusText: '',
});
}

return { code };
};

export default function KakaoAuthPage() {
const { code } = useLoaderData<typeof loader>();

useEffect(() => {
(async () => {
try {
const response = await loginKakao({
code,
});
const token = response.accessToken;
useAuthStore.getState().login(token);
} catch (e) {
location.replace('/login');
}
})();
}, [code]);

return <></>;
}
31 changes: 31 additions & 0 deletions src/entities/auth/useAuthStore.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
import { create } from 'zustand';
import { persist } from 'zustand/middleware';

type AuthStore = {
isLoggedIn: boolean;
login: (token: string) => void;
logout: () => void;
};

const ACCESS_TOKEN_STORAGE_KEY = 'accessToken';

export const useAuthStore = create(
persist<AuthStore>(
(set) => ({
isLoggedIn: false,
login: (token: string) => {
localStorage.setItem(ACCESS_TOKEN_STORAGE_KEY, token);
if (token) {
set({ isLoggedIn: true });
}
},
logout: () => {
set({ isLoggedIn: false });
localStorage.removeItem(ACCESS_TOKEN_STORAGE_KEY);
},
}),
{
name: 'authStatus',
},
),
);
2 changes: 1 addition & 1 deletion src/pages/main/login/LoginPage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ export const LoginPage = () => {
<h1>내 사랑 구해줄래? 구해줄게!</h1>
</div>
<div className={styles.ButtonWrapper}>
<Link to={'/?login=true'}>
<Link to={import.meta.env.VITE_KAUTH_URL}>
<button className={`${styles.Button} ${styles.Kakao}`}>
<span className={styles.Icon}>
<img src="/images/kakao.png" alt="카카오 로그인" width={29} height={29} />
Expand Down

0 comments on commit 68ed111

Please sign in to comment.