start with
@@ -80,7 +107,7 @@ export default function LoginPage() {
/>
{recentPlatform === '카카오' && (
@@ -96,7 +123,7 @@ export default function LoginPage() {
/>
{recentPlatform === '구글' && (
@@ -105,14 +132,18 @@ export default function LoginPage() {
-
+
비회원 로그인
+
{/* 안내문 */}
-
- 비회원은 스탬프 저장과 공유 기능을 사용할 수 없습니다.
-
+
+
비회원은 스탬프 저장과 공유 기능을 사용할 수 없습니다.
+
);
diff --git a/src/shared/api/auth.ts b/src/shared/api/auth.ts
new file mode 100644
index 0000000..a8887d0
--- /dev/null
+++ b/src/shared/api/auth.ts
@@ -0,0 +1,17 @@
+import { apiAuth } from '@/shared/api/instance';
+import type { ApiResponse, TokenData } from '@/shared/types/authtypes';
+import { setTokens } from '@/shared/utils/token';
+
+export const exchangeTempToken = async (tempToken: string) => {
+ const { data } = await apiAuth.post
>(
+ '/api/auth/temp-token/exchange',
+ { tempToken },
+ );
+
+ if (data.success) {
+ const { accessToken, refreshToken } = data.data;
+ setTokens(accessToken, refreshToken);
+ }
+
+ return data;
+};
diff --git a/src/shared/api/instance.ts b/src/shared/api/instance.ts
index a1e6cd1..49f8f12 100644
--- a/src/shared/api/instance.ts
+++ b/src/shared/api/instance.ts
@@ -6,7 +6,7 @@ import {
setTokens,
clearTokens,
} from '@/shared/utils/token';
-import type { ApiResponse, TokenData } from '@/shared/api/types';
+import type { ApiResponse, TokenData } from '@/shared/types/authtypes';
const BASE_URL = process.env.NEXT_PUBLIC_BACKEND_URL;
@@ -50,7 +50,9 @@ const processQueue = (error: unknown, token: string | null = null) => {
apiWithToken.interceptors.response.use(
(response) => response,
async (error: AxiosError>) => {
- const originalRequest = error.config as InternalAxiosRequestConfig & { _retry?: boolean };
+ const originalRequest = error.config as InternalAxiosRequestConfig & {
+ _retry?: boolean;
+ };
if (error.response?.status === 401 && !originalRequest._retry) {
if (isRefreshing) {
diff --git a/src/pages/auth/components/LoginButton.tsx b/src/shared/components/auth/LoginButton.tsx
similarity index 55%
rename from src/pages/auth/components/LoginButton.tsx
rename to src/shared/components/auth/LoginButton.tsx
index 990fe77..9d5d4ac 100644
--- a/src/pages/auth/components/LoginButton.tsx
+++ b/src/shared/components/auth/LoginButton.tsx
@@ -1,67 +1,91 @@
-// SVGO 해결후 Image → Icon으로 교체 예정
-'use client';
-import Image from 'next/image';
-import { cva, type VariantProps } from 'class-variance-authority';
-import { cn } from '@/shared/lib';
-
-
-const loginButtonVariants = cva(
- `
- flex justify-center items-center flex-shrink-0
- w-[5rem] h-[5rem] rounded-full
- shadow-[0_0_4px_rgba(0,0,0,0.30)]
- transition-all duration-150 active:scale-95
- `,
- {
- variants: {
- platform: {
- google: 'bg-white',
- kakao: 'bg-[#FEE500]',
- },
- },
- defaultVariants: {
- platform: 'google',
- },
- }
-);
-
-interface LoginButtonProps extends VariantProps {
- onClick: () => void;
- className?: string;
-}
-
-export default function LoginButton({
- onClick,
- platform,
- className,
-}: LoginButtonProps) {
- const iconData = {
- google: {
- src: '/svgs/GoogleIcon.svg',
- alt: 'Google Logo',
- width: 36,
- height: 36,
- label: '구글 로그인',
- },
- kakao: {
- src: '/svgs/KakaoIcon.svg',
- alt: 'Kakao Logo',
- width: 28,
- height: 28,
- label: '카카오 로그인',
- },
- };
-
- const { src, alt, width, height, label } = iconData[platform ?? 'google'];
-
- return (
-
- );
-}
+'use client';
+import Image from 'next/image';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '@/shared/lib';
+
+const loginButtonVariants = cva(
+ `
+ flex justify-center items-center flex-shrink-0
+ w-[5rem] h-[5rem] rounded-full
+ shadow-[0_0_4px_rgba(0,0,0,0.30)]
+ transition-all duration-150 active:scale-95
+ `,
+ {
+ variants: {
+ platform: {
+ google: 'bg-white',
+ kakao: 'bg-[#FEE500]',
+ },
+ },
+ defaultVariants: {
+ platform: 'google',
+ },
+ },
+);
+
+interface LoginButtonProps extends VariantProps {
+ onClick?: () => void;
+ className?: string;
+}
+
+export default function LoginButton({
+ onClick,
+ platform,
+ className,
+}: LoginButtonProps) {
+ const iconData = {
+ google: {
+ src: '/assets/GoogleIcon.svg',
+ alt: 'Google Logo',
+ width: 36,
+ height: 36,
+ label: '구글 로그인',
+ },
+ kakao: {
+ src: '/assets/KakaoIcon.svg',
+ alt: 'Kakao Logo',
+ width: 28,
+ height: 28,
+ label: '카카오 로그인',
+ },
+ };
+
+ if (!platform || !(platform in iconData)) {
+ if (process.env.NODE_ENV === 'development') {
+ console.error(`Invalid platform: ${platform}. Falling back to google.`);
+ }
+ platform = 'google';
+ }
+ const { src, alt, width, height, label } =
+ iconData[platform as keyof typeof iconData];
+
+ const handleClick = () => {
+ if (onClick) return onClick();
+ const base = process.env.NEXT_PUBLIC_BACKEND_URL;
+ if (!base) {
+ const message = 'NEXT_PUBLIC_BACKEND_URL is not defined';
+ if (process.env.NODE_ENV === 'development') {
+ throw new Error(message);
+ }
+ console.error(message);
+ return;
+ }
+ const url =
+ platform === 'kakao'
+ ? `${base}/oauth2/authorization/kakao`
+ : `${base}/oauth2/authorization/google`;
+
+ window.location.href = url;
+ };
+
+ return (
+
+ );
+}
diff --git a/src/pages/auth/components/RecentLoginBubble.tsx b/src/shared/components/auth/RecentLoginBubble.tsx
similarity index 96%
rename from src/pages/auth/components/RecentLoginBubble.tsx
rename to src/shared/components/auth/RecentLoginBubble.tsx
index c8429ed..f4e0e5b 100644
--- a/src/pages/auth/components/RecentLoginBubble.tsx
+++ b/src/shared/components/auth/RecentLoginBubble.tsx
@@ -1,29 +1,29 @@
-'use client';
-import { cva } from 'class-variance-authority';
-import { cn } from '@/shared/lib';
-
-interface RecentLoginBubbleProps {
- className?: string;
-}
-
-const bubbleVariants = cva(
- 'relative inline-flex justify-center items-center px-[0.8rem] py-[0.4rem] bg-pink-200 rounded-[2rem]',
-);
-
-const RecentLoginBubble = ({ className }: RecentLoginBubbleProps) => {
- return (
-
-
최근 로그인
- {/* 말풍선 꼬리 */}
-
-
+
최근 로그인
+ {/* 말풍선 꼬리 */}
+
+