[KOBB-11] 컴포넌트 & UI 제작 ( 음성 녹음, STT 기능 구현)

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

@@ -8,6 +8,10 @@
 
   --background: #ffffff;
   --foreground: #171717;
+
+  .scrollbar-hide::-webkit-scrollbar {
+  display: none;
+}
 }
 
 @media (prefers-color-scheme: dark) {
@@ -171,6 +175,13 @@
   .bg-gradient-reverse {
     background-image: linear-gradient(to bottom, #E6F4FA, #FEFEFE);
   }
+  /* 스크롤바 숨기기 */
+  .scrollbar-hide {
+    &::-webkit-scrollbar {
+      display: none;
+    }
+    scrollbar-width: none;
+  }
 }
 
 body {

app/main/_components/NavigationBar.tsx

@@ -0,0 +1,62 @@
+'use client';
+
+import Image from 'next/image';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { ROUTES } from '@/constants/routes';
+
+export default function NavigationBar() {
+  const pathname = usePathname();
+
+  const navItems = [
+    {
+      label: '나의 학습',
+      href: ROUTES.MAIN.MY_LEARNING.ROOT,
+      icon: '/icons/nav-book.svg',
+      activeIcon: '/icons/nav-book-blue.svg', // active용 아이콘
+    },
+    {
+      label: '대화',
+      href: ROUTES.MAIN.CONVERSATION.ROOT,
+      icon: '/icons/nav-phone.svg',
+      activeIcon: '/icons/nav-phone-blue.svg',
+    },
+    {
+      label: '마이페이지',
+      href: ROUTES.MAIN.MY_PAGE,
+      icon: '/icons/nav-user.svg',
+      activeIcon: '/icons/nav-user-blue.svg',
+    },
+  ];
+
+  return (
+    <nav className="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-900 flex justify-around items-center h-18 z-999">
+      {navItems.map(item => {
+        const isActive = pathname === item.href;
+        return (
+          <Link
+            key={item.href}
+            href={item.href}
+            className="flex flex-col items-center justify-center gap-2"
+          >
+            <Image
+              src={isActive ? item.activeIcon : item.icon}
+              alt={item.label}
+              width={24}
+              height={24}
+            />
+            <span
+              className={
+                isActive
+                  ? 'text-secondary-400 text-cp2-bold'
+                  : 'text-gray-500 text-cp2-regular'
+              }
+            >
+              {item.label}
+            </span>
+          </Link>
+        );
+      })}
+    </nav>
+  );
+}

app/main/conversation/_components/SwipeButton.tsx

@@ -0,0 +1,106 @@
+'use client';
+
+import { ROUTES } from '@/constants/routes';
+import {
+  motion,
+  useAnimation,
+  useMotionValue,
+  useMotionValueEvent,
+} from 'framer-motion';
+import Image from 'next/image';
+import { useEffect, useRef, useState } from 'react';
+import { usePathname } from 'next/navigation';
+
+export default function SwipeButton() {
+  const pathname = usePathname();
+
+  const trackRef = useRef<HTMLDivElement>(null);
+  const knobRef = useRef<HTMLDivElement>(null);
+
+  const controls = useAnimation();
+  const x = useMotionValue(0);
+
+  const [maxX, setMaxX] = useState(180); // fallback
+  const [completed, setCompleted] = useState(false);
+
+  // 트랙과 노란원 실제 너비로 최대 이동거리 계산
+  useEffect(() => {
+    const measure = () => {
+      const trackW = trackRef.current?.offsetWidth ?? 244;
+      const knobW = knobRef.current?.offsetWidth ?? 56; // w-14 = 56px
+      setMaxX(trackW - knobW);
+    };
+    measure();
+    window.addEventListener('resize', measure);
+    return () => window.removeEventListener('resize', measure);
+  }, []);
+
+  // 라우트 바뀔 때/초기 마운트 때 항상 리셋
+  useEffect(() => {
+    setCompleted(false);
+    x.set(0);
+    controls.set({ x: 0 });
+  }, [pathname, controls, x]);
+
+  // bfcache로 뒤로가기 복귀 시에도 리셋
+  useEffect(() => {
+    const onPageShow = () => {
+      setCompleted(false);
+      x.set(0);
+      controls.set({ x: 0 });
+    };
+    window.addEventListener('pageshow', onPageShow);
+    return () => window.removeEventListener('pageshow', onPageShow);
+  }, [controls, x]);
+
+  // x 변화 구독: 끝에 '도착'하면 트리거
+  useMotionValueEvent(x, 'change', latest => {
+    if (!completed && latest >= maxX - 1) {
+      setCompleted(true);
+      window.location.href = ROUTES.MAIN.CONVERSATION.CALLING;
+    }
+  });
+
+  return (
+    <div className="flex items-center justify-center">
+      <div className="relative w-[244px]">
+        {/* 회색 트랙 */}
+        <div
+          ref={trackRef}
+          className="h-[43px] rounded-full bg-gray-950 flex items-center"
+        >
+          <span className="ml-16 text-gray-500 text-bd2-regular">
+            밀어서 시작하기 →
+          </span>
+        </div>
+
+        {/* 노란 원 아이콘 */}
+        <motion.div
+          ref={knobRef}
+          drag="x"
+          style={{ x }}
+          dragConstraints={{ left: 0, right: maxX }}
+          dragElastic={0.1}
+          onDragEnd={() => {
+            if (!completed) {
+              // 끝에 못 닿았으면 '툭!' 하고 복귀
+              controls.start({
+                x: 0,
+                transition: { duration: 0.15, ease: 'easeOut' },
+              });
+            }
+          }}
+          animate={controls}
+          className="absolute top-1/2 -translate-y-1/2 w-14 h-14 rounded-full bg-primary flex items-center justify-center cursor-pointer"
+        >
+          <Image
+            src="/icons/nav-phone-blue.svg"
+            alt="phone"
+            width={24}
+            height={24}
+          />
+        </motion.div>
+      </div>
+    </div>
+  );
+}

app/main/conversation/_locales/text.json

@@ -0,0 +1,35 @@
+{
+    "conversation": {
+    "title": "코디에게 전화를 걸어\n대화할까요?",
+    "subText": {
+        "vt": "Chọn một ngôn ngữ!\nChúng tôi sẽ sử dụng nó để dịch.",
+        "en": "Lets call Kody and have a conversation!",
+        "jp": "言語を選択してください!\n翻訳に使用します。",
+        "chn": "选择一种语言!\n我们将用它进行翻译。"
+    },
+    "phrase1": {
+        "id": 1,
+        "kor": "너는 취미가 뭐야?",
+        "vt": "Không có ngôn ngữ mà tôi muốn.",
+        "en": "What is your hobby?",
+        "jp": "私の欲しい言語がありません。",
+        "chn": "没有我想要的语言。"
+      },
+    "phrase2": {
+      "id": 2,
+       "kor": "너는 이름이 뭐야?",
+       "vt": "Không có ngôn ngữ mà tôi muốn.",
+        "en": "What is your name?",
+        "jp": "あなたの名前は何ですか？",
+        "chn": "你叫什么名字？"
+    },
+    "phrase3": {
+      "id": 3,
+       "kor": "가장 좋아하는게 뭐야?",
+       "vt": "Không có ngôn ngữ mà tôi muốn.",
+        "en": "What is your favorite thing?",
+        "jp": "あなたの名前は何ですか？",
+        "chn": "你叫什么名字？"
+    }
+  }
+}

app/main/conversation/calling/layout.tsx

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+
+export default function CallingLayout({ children }: { children: ReactNode }) {
+  return (
+    <div
+      className="flex flex-col w-svw h-svh -mx-4 px-4 bg-center bg-cover"
+      style={{ backgroundImage: "url('/character/bg.webp')" }}
+    >
+      <main className="flex flex-col h-full w-full">{children}</main>
+    </div>
+  );
+}