Merge pull request #19 from RJihyeon/fe/vite-react

Fe/vite react

Author: bindingflare

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "deno.enable": false
+}

frontend/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": ["next/core-web-vitals", "next/typescript"]
+}

frontend/.gitignore

@@ -1,11 +1,40 @@
-# dotenv environment variable files
-.env
-.env.development.local
-.env.test.local
-.env.production.local
-.env.local
-
-# Fresh build directory
-_fresh/
-# npm dependencies
-node_modules/
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

frontend/.vscode/extensions.json

@@ -1,16 +1,36 @@
-# Fresh project
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
 
-Your new Fresh project is ready to go. You can follow the Fresh "Getting
-Started" guide here: https://fresh.deno.dev/docs/getting-started
+## Getting Started
 
-### Usage
+First, run the development server:
 
-Make sure to install Deno: https://deno.land/manual/getting_started/installation
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
 
-Then start the project:
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
 
-```
-deno task start
-```
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
 
-This will watch the project directory and restart as necessary.
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

frontend/.vscode/settings.json

@@ -0,0 +1,45 @@
+import dotenv from 'dotenv';
+
+dotenv.config();
+
+export async function uploadFile(file: File): Promise<string> {
+  const BASE_URL = process.env.NEXT_PUBLIC_BASE_URL;
+  const AUTH_TOKEN = process.env.NEXT_PUBLIC_AUTH_TOKEN;
+
+  console.log('BASE_URL:', BASE_URL);
+  console.log('AUTH_TOKEN:', AUTH_TOKEN);
+
+  if (!BASE_URL || !AUTH_TOKEN) {
+    throw new Error('BASE_URL or AUTH_TOKEN is not defined in the environment variables.');
+  }
+
+  const formData = new FormData();
+  formData.append('audio_file', file);
+
+  const toUserId = 1; // Temporary user ID
+  const url = `${BASE_URL}/voice?to_user_id=${toUserId}`;
+
+  try {
+    const response = await fetch(url, {
+      method: 'POST',
+      headers: {
+        Authorization: `Bearer ${AUTH_TOKEN}`,
+      },
+      body: formData,
+    });
+
+    if (!response.ok) {
+      const errorText = await response.text();
+      throw new Error(`Failed to upload file: HTTP ${response.status}, ${errorText}`);
+    }
+
+    const result = await response.json();
+    console.log('Upload result:', result);
+    return result.message || 'File uploaded successfully!';
+  } catch (error) {
+    if (error instanceof Error) {
+      throw new Error(`Upload failed: ${error.message}`);
+    }
+    throw new Error('An unknown error occurred during upload.');
+  }
+}

frontend/.vscode/tailwind.json

@@ -0,0 +1,20 @@
+// components/Button.tsx
+"use client";
+
+import React from 'react';
+
+interface ButtonProps {
+  onClick?: () => void;
+  children: React.ReactNode;
+}
+
+const Button: React.FC<ButtonProps> = ({ onClick, children }) => {
+  return (
+    <button onClick={onClick} 
+    className="px-4 py-2 border-red-300 bg-red-600 border-2 rounded-full hover:bg-gray-200 transition-colors text-white font-extrabold">
+      {children}
+    </button>
+  );
+};
+
+export default Button;

frontend/README.md

@@ -0,0 +1,22 @@
+// components/Counter.tsx
+
+import React, { useState } from 'react';
+import { Button } from './Button';
+
+interface CounterProps {
+  initialCount: number;
+}
+
+const Counter: React.FC<CounterProps> = ({ initialCount }) => {
+  const [count, setCount] = useState(initialCount);
+
+  return (
+    <div className="flex gap-8 py-6">
+      <Button onClick={() => setCount(count - 1)}>-1</Button>
+      <p className="text-3xl tabular-nums">{count}</p>
+      <Button onClick={() => setCount(count + 1)}>+1</Button>
+    </div>
+  );
+};
+
+export default Counter;