chore: 개발 프록시 환경 설정

chedakr · Apr 28, 2024 · 10f6f94 · 10f6f94
1 parent a538db3
commit 10f6f94
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 10 deletions.
diff --git a/apps/api/src/index.ts b/apps/api/src/index.ts
@@ -38,4 +38,17 @@ app.get('/', async (c) => {
 
 app.route('/services/auth/v1', auth);
 
+app.use('/services/buffer/v1/*', async (c, next) => {
+	if (c.env.DEV) {
+		const reqUrl = new URL(c.req.url);
+		reqUrl.host = 'localhost:8788';
+
+		const response = await fetch(reqUrl, {
+			headers: c.req.header()
+		});
+		c.res = new Response(response.body, response);
+	}
+	await next();
+});
+
 export default app;
diff --git a/apps/web/.env b/apps/web/.env
@@ -0,0 +1 @@
+NEXT_PUBLIC_API_ORIGIN=https://api.cheda.kr
diff --git a/apps/web/.env.development b/apps/web/.env.development
@@ -0,0 +1 @@
+NEXT_PUBLIC_API_ORIGIN=http://localhost:8787
diff --git a/apps/web/app/login/page.tsx b/apps/web/app/login/page.tsx
@@ -0,0 +1,15 @@
+"use client";
+
+import Link from 'next/link';
+import { useSearchParams } from 'next/navigation';
+import NaverLoginButton from '@/components/naver-login-button/button';
+
+export default function LoginPage() {
+  const searchParams = useSearchParams();
+
+  return (
+    <div>
+      <NaverLoginButton prevUrl={decodeURIComponent(searchParams.get('prevUrl') ?? '')} />
+    </div>
+  );
+}
diff --git a/apps/web/components/naver-login-button/button.tsx b/apps/web/components/naver-login-button/button.tsx
@@ -6,16 +6,27 @@ import Link from 'next/link';
 import Image from 'next/image';
 import { Skeleton } from "@/components/ui/skeleton"
 
-import loginButtonImage from './btnG_short.png';
-import logoutButtonImage from './btnG_logout.png';
+// import loginButtonImage from './btnG_short.png';
+// import logoutButtonImage from './btnG_logout.png';
 
-export default function NaverLoginButton() {
+import loginButtonImage from './btnG_official.png';
+const logoutButtonImage = loginButtonImage;
+
+declare global {
+  namespace NodeJS {
+    interface ProcessEnv {
+      NEXT_PUBLIC_API_ORIGIN: string;
+    }
+  }
+}
+
+export default function NaverLoginButton({ prevUrl }: { prevUrl?: string }) {
   const queryClient = useQueryClient();
 
   const query = useQuery({
     queryKey: ['auth'],
     queryFn: async () => {
-      const response = await fetch('http://localhost:8787/services/auth/v1/me', {
+      const response = await fetch(`${process.env.NEXT_PUBLIC_API_ORIGIN}/services/auth/v1/me`, {
         credentials: 'include',
       });
       if (!response.ok) {
@@ -26,23 +37,22 @@ export default function NaverLoginButton() {
   });
 
   if (query.isLoading) {
-    return <Skeleton className="w-[113px] h-[40px]" />;
+    return <Skeleton className="w-[230px] h-[50px]" />;
   }
 
   if (query.data) {
     return (
       <Link onClick={() => {
         queryClient.invalidateQueries({ queryKey: ['auth'] });
-      }} href={`http://localhost:8787/services/auth/v1/logout`}>
-        <Image src={logoutButtonImage} alt="Naver 로그아웃" width={113} height={40} unoptimized />
+      }} href={`${process.env.NEXT_PUBLIC_API_ORIGIN}/services/auth/v1/logout`}>
+        <Image src={logoutButtonImage} alt="Naver 로그아웃" width={230} height={50} unoptimized />
       </Link>
     );
   }
 
   return (
-    <Link href={`http://localhost:8787/services/auth/v1/login`}>
-      <Image src={loginButtonImage} alt="Naver 로그인" width={113} height={40} unoptimized />
+    <Link href={`${process.env.NEXT_PUBLIC_API_ORIGIN}/services/auth/v1/login${prevUrl ? `?prevUrl=${prevUrl}` : ''}`}>
+      <Image src={loginButtonImage} alt="Naver 로그인" width={230} height={50} unoptimized />
     </Link>
   );
 }
-