✨: Signup 페이지 구현 및 Post요청 확인

Author: 4BFC

front/src/App.tsx

@@ -1,11 +1,13 @@
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
+import Signup from './Page/Signup';
 import MyTest from './Page/MyTest';
 
 const App = () => {
   return (
     <Router>
       <Routes>
         <Route path='/' element={<MyTest />} />
+        <Route path='/Signup' element={<Signup />} />
       </Routes>
     </Router>
   );

front/src/Module/fetch.instance.ts

@@ -0,0 +1,12 @@
+import axios from 'axios';
+
+const axiosInstance = axios.create({
+  baseURL: 'https://fsrotjrwllkimiidizgk.supabase.co', // Supabase API Base URL
+  headers: {
+    'Content-Type': 'application/json',
+    apikey:
+      'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImZzcm90anJ3bGxraW1paWRpemdrIiwicm9sZSI6ImFub24iLCJpYXQiOjE3MzMwMjgzMTQsImV4cCI6MjA0ODYwNDMxNH0.uiFog4O3BbOZhBC1z0LRFTtEE4p4z3PK5VQ5wKrRHzg',
+  },
+});
+
+export default axiosInstance;

front/src/Page/Signup.tsx

@@ -0,0 +1,80 @@
+import React, { useState } from 'react';
+import { createClient } from '@supabase/supabase-js';
+
+const supabase = createClient(
+  'https://fsrotjrwllkimiidizgk.supabase.co',
+  'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImZzcm90anJ3bGxraW1paWRpemdrIiwicm9sZSI6ImFub24iLCJpYXQiOjE3MzMwMjgzMTQsImV4cCI6MjA0ODYwNDMxNH0.uiFog4O3BbOZhBC1z0LRFTtEE4p4z3PK5VQ5wKrRHzg',
+);
+
+const Signup: React.FC = () => {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [name, setName] = useState('');
+  const [responseMessage, setResponseMessage] = useState('');
+
+  const handleSignUp = async () => {
+    try {
+      const { data, error } = await supabase.auth.signUp({
+        email,
+        password,
+        options: {
+          data: {
+            name, // 사용자 정의 메타데이터로 전달
+          },
+        },
+      });
+
+      if (error) {
+        throw error;
+      }
+
+      setResponseMessage('Signup successful! Check your email for confirmation.');
+    } catch (error: any) {
+      setResponseMessage(error.message || 'Signup failed. Please try again.');
+    }
+  };
+
+  return (
+    <div style={{ maxWidth: '400px', margin: 'auto', padding: '20px' }}>
+      <h1>Sign Up</h1>
+      <input
+        type='text'
+        placeholder='Name'
+        value={name}
+        onChange={(e) => setName(e.target.value)}
+        style={{ display: 'block', width: '100%', marginBottom: '10px', padding: '8px' }}
+      />
+      <input
+        type='email'
+        placeholder='Email'
+        value={email}
+        onChange={(e) => setEmail(e.target.value)}
+        style={{ display: 'block', width: '100%', marginBottom: '10px', padding: '8px' }}
+      />
+      <input
+        type='password'
+        placeholder='Password'
+        value={password}
+        onChange={(e) => setPassword(e.target.value)}
+        style={{ display: 'block', width: '100%', marginBottom: '10px', padding: '8px' }}
+      />
+      <button
+        onClick={handleSignUp}
+        type='button'
+        style={{
+          width: '100%',
+          padding: '10px',
+          backgroundColor: '#007bff',
+          color: 'white',
+          border: 'none',
+          borderRadius: '5px',
+        }}
+      >
+        Sign Up
+      </button>
+      {responseMessage && <p style={{ marginTop: '20px', color: 'red' }}>{responseMessage}</p>}
+    </div>
+  );
+};
+
+export default Signup;

front/src/index.tsx

@@ -1,14 +1,20 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 
+const queryClient = new QueryClient();
+
 const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
 root.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
+  <QueryClientProvider client={queryClient}>
+    <React.StrictMode>
+      <App />
+    </React.StrictMode>
+    ,
+  </QueryClientProvider>,
 );
 
 // If you want to start measuring performance in your app, pass a function