[DEPLOY] 1차 배포

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,18 +1,34 @@
-## JIRA 이슈 키
-<!--[JIRA-이슈번호]-->
+## 🔑 JIRA 이슈 키
+<!-- [KOBB-123] 한국어 레슨 별 조회 API -->
 
+---
 
-## JIRA 이슈 키
+## ✒ 진행한 작업
+- [x] 진행한 작업
+- [x] 진행한 작업
+- [x] 진행한 작업
+
+---
+
+## 💡 생겼던 문제 및 해결법
 1️⃣ 요약
-문제:
-해결:
+- 문제:
+- 해결:
+
+---
 
+## 📢 아쉬운 부분 및 개선점
+- ...
 
-## 스크린샷
+---
 
+## 📚 개발에 참고한 자료 및 포인트
+- 참고한 부분 요약 및 포인트
+  - link
 
-## 아쉬운 부분 및 개선점
+---
 
+## 📸 스크린샷
+- ...
 
-## 개발에 참고한 자료 및 포인트
-<!--참고한 부분 요약 및 포인트(link)-->
+---

app/api/deepgram/transcribe/route.ts

@@ -0,0 +1,63 @@
+import { createClient } from '@deepgram/sdk';
+import { NextRequest, NextResponse } from 'next/server';
+
+export const POST = async (req: NextRequest) => {
+  try {
+    const deepgram = createClient(process.env.DEEPGRAM_API_KEY!);
+
+    // JSON으로 Base64 보내는 경우
+    const contentType = req.headers.get('content-type') || '';
+    let audioBuffer: Buffer | null = null;
+
+    if (contentType.includes('application/json')) {
+      const { audioBase64 } = await req.json();
+      if (!audioBase64) {
+        return NextResponse.json(
+          { error: 'No audioBase64 provided' },
+          { status: 400 },
+        );
+      }
+      audioBuffer = Buffer.from(audioBase64, 'base64');
+    }
+    // FormData로 보내는 경우
+    else if (contentType.includes('multipart/form-data')) {
+      const formData = await req.formData();
+      const audioFile = formData.get('file') as File;
+      if (!audioFile) {
+        return NextResponse.json(
+          { error: 'No audio file provided' },
+          { status: 400 },
+        );
+      }
+      const arrayBuffer = await audioFile.arrayBuffer();
+      audioBuffer = Buffer.from(arrayBuffer);
+    } else {
+      return NextResponse.json(
+        { error: 'Unsupported Content-Type' },
+        { status: 400 },
+      );
+    }
+
+    // Deepgram STT
+    const { result } = await deepgram.listen.prerecorded.transcribeFile(
+      audioBuffer,
+      {
+        model: 'nova-2',
+        language: 'ko',
+        smart_format: true,
+      },
+    );
+
+    // 안전하게 transcript 추출
+    const transcript =
+      result?.results?.channels?.[0]?.alternatives?.[0]?.transcript || '';
+
+    return NextResponse.json({ transcript });
+  } catch (err) {
+    console.error('STT Error:', err);
+    return NextResponse.json(
+      { error: err instanceof Error ? err.message : 'Unknown error' },
+      { status: 500 },
+    );
+  }
+};

app/globals.css

@@ -1,15 +1,17 @@
 @import "tailwindcss";
 
 :root {
+  --font-gothic-a1: 'Gothic A1', sans-serif;
+  --font-mplus-2:   'M PLUS 2',   sans-serif;
+  --font-noto-sc:   'Noto Sans SC',sans-serif;
+  --font-sans: var(--font-gothic-a1), var(--font-mplus-2), var(--font-noto-sc), system-ui, sans-serif;
+
   --background: #ffffff;
   --foreground: #171717;
-}
 
-@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
+  .scrollbar-hide::-webkit-scrollbar {
+  display: none;
+}
 }
 
 @media (prefers-color-scheme: dark) {
@@ -19,8 +21,170 @@
   }
 }
 
+@theme inline {
+  /* 폰트 */
+  --font-sans:   var(--font-sans);
+  --font-gothic: var(--font-gothic-a1);
+  --font-mplus:  var(--font-mplus-2);
+  --font-noto:   var(--font-noto-sc);
+
+  /* 컬러 */
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+
+  --color-primary: #F7DD4A;
+  --color-primary-900: #FEF9DD;
+  --color-primary-800: #FBEFAC;
+  --color-primary-dimensional: #F6B831;
+
+  --color-secondary: #BFE2F3;
+  --color-secondary-400: #248EC1;
+  --color-secondary-300: #1C6E96;
+
+  --color-bg-solid: #E6F4FA;
+
+  --color-error: #F74A4A;
+  --color-error-dimensional: #D51111;
+
+  --color-black:       #1B1B1B;
+  --color-black-70:    rgba(27, 27, 27, 0.7);
+
+  --color-gray-300:    #4F4F4F;
+  --color-gray-500:    #828282;
+  --color-gray-700:    #B5B5B5;
+  --color-gray-900:    #E8E8E8;
+  --color-gray-950:    #F2F2F2;
+
+  --color-white:       #FEFEFE;
+  --color-white-70:    rgba(254, 254, 254, 0.7);
+
+   /* H1 Bold */
+  --text-h1-bold:                   24px;
+  --text-h1-bold--line-height:      160%;
+  --text-h1-bold--font-weight:      700;
+  --text-h1-bold--font-family:      var(--font-gothic-a1);
+
+  /* H1 Regular */
+  --text-h1-regular:                24px;
+  --text-h1-regular--line-height:   160%;
+  --text-h1-regular--font-weight:   400;
+  --text-h1-regular--font-family:   var(--font-gothic-a1);
+
+  /* H2 Bold */
+  --text-h2-bold:                   20px;
+  --text-h2-bold--line-height:      160%;
+  --text-h2-bold--font-weight:      700;
+  --text-h2-bold--font-family:      var(--font-gothic-a1);
+
+  /* H2 Regular */
+  --text-h2-regular:                20px;
+  --text-h2-regular--line-height:   160%;
+  --text-h2-regular--font-weight:   400;
+  --text-h2-regular--font-family:   var(--font-gothic-a1);
+
+  /* H3 Bold */
+  --text-h3-bold:                   18px;
+  --text-h3-bold--line-height:      160%;
+  --text-h3-bold--font-weight:      700;
+  --text-h3-bold--font-family:      var(--font-gothic-a1);
+
+  /* H3 Regular */
+  --text-h3-regular:                18px;
+  --text-h3-regular--line-height:   160%;
+  --text-h3-regular--font-weight:   400;
+  --text-h3-regular--font-family:   var(--font-gothic-a1);
+
+  /* Body1 Bold */
+  --text-bd1-bold:                  16px;
+  --text-bd1-bold--line-height:     160%;
+  --text-bd1-bold--font-weight:     700;
+  --text-bd1-bold--font-family:     var(--font-gothic-a1);
+
+  /* Body1 Regular */
+  --text-bd1-regular:               16px;
+  --text-bd1-regular--line-height:  160%;
+  --text-bd1-regular--font-weight:  400;
+  --text-bd1-regular--font-family:  var(--font-gothic-a1);
+
+  /* Body2 Bold */
+  --text-bd2-bold:                  14px;
+  --text-bd2-bold--line-height:     160%;
+  --text-bd2-bold--font-weight:     700;
+  --text-bd2-bold--font-family:     var(--font-gothic-a1);
+
+  /* Body2 Regular */
+  --text-bd2-regular:               14px;
+  --text-bd2-regular--line-height:  160%;
+  --text-bd2-regular--font-weight:  400;
+  --text-bd2-regular--font-family:  var(--font-gothic-a1);
+
+  /* Caption1 Bold */
+  --text-cp1-bold:                  12px;
+  --text-cp1-bold--line-height:     160%;
+  --text-cp1-bold--font-weight:     700;
+  --text-cp1-bold--font-family:     var(--font-gothic-a1);
+
+  /* Caption1 Regular */
+  --text-cp1-regular:               12px;
+  --text-cp1-regular--line-height:  160%;
+  --text-cp1-regular--font-weight:  400;
+  --text-cp1-regular--font-family:  var(--font-gothic-a1);
+
+  /* Caption2 Bold */
+  --text-cp2-bold:                  10px;
+  --text-cp2-bold--line-height:     160%;
+  --text-cp2-bold--font-weight:     700;
+  --text-cp2-bold--font-family:     var(--font-gothic-a1);
+
+  /* Caption2 Regular */
+  --text-cp2-regular:               10px;
+  --text-cp2-regular--line-height:  160%;
+  --text-cp2-regular--font-weight:  400;
+  --text-cp2-regular--font-family:  var(--font-gothic-a1);
+
+  /* Translate Caption1 Regular */
+  --text-trans-cp1-regular:         14px;
+  --text-cp1-regular--line-height:  160%;
+  --text-cp1-regular--font-weight:  400;
+  --text-cp1-regular--font-family:  var(--font-mplus-2);
+
+  /* Translate Caption1 Regular */
+  --text-trans-cp1-regular:               14px;
+  --text-trans-cp1-regular--line-height:  160%;
+  --text-trans-cp1-regular--font-weight:  400;
+  --text-trans-cp1-regular--font-family:  var(--font-mplus-2);
+
+  /* Translate Caption2 Regular */
+  --text-trans-cp2-regular:               12px;
+  --text-trans-cp2-regular--line-height:  120%;
+  --text-trans-cp2-regular--font-weight:  400;
+  --text-trans-cp2-regular--font-family:  var(--font-mplus-2);
+
+  /* Translate Caption3 Regular */
+  --text-trans-cp3-regular:               10px;
+  --text-trans-cp3-regular--line-height:  120%;
+  --text-trans-cp3-regular--font-weight:  400;
+  --text-trans-cp3-regular--font-family:  var(--font-mplus-2);
+}
+
+@layer utilities {
+  /* 그라디언트 */
+  .bg-gradient {
+    background-image: linear-gradient(to bottom, #FEFEFE, #E6F4FA);
+  }
+  .bg-gradient-reverse {
+    background-image: linear-gradient(to bottom, #E6F4FA, #FEFEFE);
+  }
+  /* 스크롤바 숨기기 */
+  .scrollbar-hide {
+    &::-webkit-scrollbar {
+      display: none;
+    }
+    scrollbar-width: none;
+  }
+}
+
 body {
   background: var(--background);
   color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
 }

app/layout.tsx

@@ -1,16 +1,24 @@
 import type { Metadata } from 'next';
-import { Geist, Geist_Mono } from 'next/font/google';
+import { Gothic_A1, M_PLUS_2, Noto_Sans_SC } from 'next/font/google';
 import './globals.css';
 import { ReactNode } from 'react';
 
-const geistSans = Geist({
-  variable: '--font-geist-sans',
+const gothic = Gothic_A1({
+  weight: ['400', '700'],
   subsets: ['latin'],
+  variable: '--font-gothic-a1',
 });
 
-const geistMono = Geist_Mono({
-  variable: '--font-geist-mono',
+const mplus = M_PLUS_2({
+  weight: ['400'],
+  subsets: ['latin', 'vietnamese', 'latin-ext'],
+  variable: '--font-mplus-2',
+});
+
+const noto = Noto_Sans_SC({
+  weight: ['400'],
   subsets: ['latin'],
+  variable: '--font-noto-sc',
 });
 
 // TODO: 메타데이터 전체 수정
@@ -24,16 +32,13 @@ export const metadata: Metadata = {
   },
 };
 
-export default function RootLayout({
-  children,
-}: Readonly<{
-  children: ReactNode;
-}>) {
+export default function RootLayout({ children }: { children: ReactNode }) {
   return (
-    <html lang="en">
-      <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
-      >
+    <html
+      lang="en"
+      className={`${gothic.variable} ${mplus.variable} ${noto.variable}`}
+    >
+      <body className="antialiased font-sans bg-background text-foreground">
         {children}
       </body>
     </html>