feature(admin): supabase 연결 및 설문 생성 로직 작성

.gitignore

@@ -41,4 +41,5 @@ Thumbs.db
 .nx/cache
 
 # env
-.env
+.env
+.env.local

apps/survey-admin/src/app/app.tsx

@@ -1,7 +1,68 @@
-import { useEffect } from 'react';
+import { Survey, useCreateSurvey } from '../hooks/query/useServey';
+
+const payload: Survey = {
+  title: '설문입니다.',
+  sections: [
+    {
+      items: [
+        {
+          title: 'radio input 1번째',
+          type: 'radio',
+          required: true,
+          options: [
+            { text: 'radio option1 1번째' },
+            { text: 'radio option2 1번째' },
+            { text: 'radio option3 1번째' },
+          ],
+        },
+        {
+          title: 'checkbox input 1번째',
+          type: 'radio',
+          required: true,
+          options: [
+            { text: 'checkbox option1 1번째' },
+            { text: 'checkbox option2 1번째' },
+            { text: 'checkbox option3 1번째' },
+          ],
+        },
+      ],
+    },
+    {
+      items: [
+        {
+          title: 'select 1번째',
+          type: 'select',
+          required: true,
+          options: [
+            {
+              text: 'select option1 1번째',
+            },
+            {
+              text: 'select option2 1번째',
+            },
+            {
+              text: 'select option3 1번째',
+            },
+          ],
+        },
+        { title: 'select 1번째', type: 'textarea', required: true },
+      ],
+    },
+  ],
+};
 
 export function App() {
-  return <div>Admin!!</div>;
+  const mutate = useCreateSurvey();
+
+  const onMutateSurvey = () => {
+    mutate(payload);
+  };
+  return (
+    <div>
+      <h2>설문 만들기</h2>
+      <button onClick={onMutateSurvey}>제출</button>
+    </div>
+  );
 }
 
 export default App;

apps/survey-admin/src/hooks/query/useServey.ts

@@ -0,0 +1,124 @@
+import { useSupabaseContext } from '@ssoon-servey/supabase';
+
+interface Option {
+  text: string;
+}
+
+interface Item {
+  title: string;
+  type: 'radio' | 'select' | 'checkbox' | 'textarea';
+  required: boolean;
+  options?: Option[];
+}
+
+interface Section {
+  title?: string;
+  items: Item[];
+}
+
+export interface Survey {
+  title: string;
+  description?: string;
+  sections: Section[];
+}
+
+export const useCreateSurvey = () => {
+  const { supabase } = useSupabaseContext();
+
+  const createSurvey = async (title: string, description?: string) => {
+    const { data: survey } = await supabase
+      .from('surveys')
+      .insert([{ title, description }])
+      .select();
+    return survey;
+  };
+
+  const createSections = async (serveyId: number, sections: Section[]) => {
+    const { data: survey_section } = await supabase
+      .from('survey_sections')
+      .insert(
+        sections.map((section) => ({
+          survey_title: section.title,
+          survey_id: serveyId,
+        }))
+      )
+      .select();
+    return survey_section;
+  };
+
+  const createSurveyItems = async (
+    sectionIds: number[],
+    sections: Section[]
+  ) => {
+    const insertItems: {
+      section_id: number;
+      question_title: string;
+      question_type: 'radio' | 'select' | 'checkbox' | 'textarea';
+      question_required: boolean;
+      hasOption: boolean;
+    }[] = [];
+
+    sectionIds.forEach((id, i) => {
+      sections[i].items.forEach((item) =>
+        insertItems.push({
+          section_id: id,
+          question_title: item.title,
+          question_type: item.type,
+          question_required: item.required,
+          hasOption: !!item.options,
+        })
+      );
+    });
+
+    const { data: survey_items } = await supabase
+      .from('survey_items')
+      .insert(insertItems)
+      .select();
+
+    return survey_items;
+  };
+
+  const createItemOptions = async (
+    surveyItemIds: number[],
+    sections: Section[]
+  ) => {
+    const insertOptions: { item_id: number; option_text: string }[] = [];
+
+    surveyItemIds.forEach((id, i) => {
+      const options = sections.flatMap((section) =>
+        section.items.map((item) => item.options)
+      );
+      options[i]?.forEach((option) => {
+        insertOptions.push({
+          item_id: id,
+          option_text: option.text,
+        });
+      });
+    });
+
+    await supabase.from('question_options').insert(insertOptions).select();
+  };
+
+  const mutate = async (payload: Survey) => {
+    const { title, description, sections } = payload;
+
+    const survey = await createSurvey(title, description);
+    if (!survey) return;
+
+    const survey_section = await createSections(survey[0].id, sections);
+    if (!survey_section) return;
+
+    const survey_items = await createSurveyItems(
+      survey_section.map((section) => section.id),
+      sections
+    );
+    if (!survey_items) return;
+
+    await createItemOptions(
+      survey_items.map((item) => item.id),
+      sections
+    );
+  };
+
+  return mutate;
+};

apps/survey-admin/src/main.tsx

@@ -1,5 +1,6 @@
 import { StrictMode } from 'react';
 import * as ReactDOM from 'react-dom/client';
+import { SupabaseProvider } from '@ssoon-servey/supabase';
 
 import App from './app/app';
 
@@ -8,6 +9,8 @@ const root = ReactDOM.createRoot(
 );
 root.render(
   <StrictMode>
-    <App />
+    <SupabaseProvider supabaseKey={import.meta.env.VITE_SUPABASE_KEY}>
+      <App />
+    </SupabaseProvider>
   </StrictMode>
 );

apps/survey-admin/vite-env.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_SUPABASE_KEY: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}

libs/supabase/.babelrc

@@ -0,0 +1,12 @@
+{
+  "presets": [
+    [
+      "@nx/react/babel",
+      {
+        "runtime": "automatic",
+        "useBuiltIns": "usage"
+      }
+    ]
+  ],
+  "plugins": []
+}

libs/supabase/.eslintrc.json

@@ -0,0 +1,18 @@
+{
+  "extends": ["plugin:@nx/react", "../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    }
+  ]
+}

libs/supabase/README.md

@@ -0,0 +1,7 @@
+# supabase
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test supabase` to execute the unit tests via [Vitest](https://vitest.dev/).

libs/supabase/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "@ssoon-servey/supabase",
+  "version": "0.0.1",
+  "main": "./index.js",
+  "types": "./index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./index.mjs",
+      "require": "./index.js"
+    }
+  }
+}

libs/supabase/project.json

@@ -0,0 +1,8 @@
+{
+  "name": "supabase",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "libs/supabase/src",
+  "projectType": "library",
+  "tags": [],
+  "targets": {}
+}

libs/supabase/src/index.ts

@@ -0,0 +1,2 @@
+export * from './supabase';
+export * from './types';

libs/supabase/src/supabase/index.tsx

@@ -0,0 +1,38 @@
+import { createContext, useContext } from 'react';
+import { createClient } from '@supabase/supabase-js';
+import type { Database } from '../types';
+
+export type SupabaseContextValue = {
+  supabase: ReturnType<typeof createClient<Database>>;
+};
+
+export const SupabaseContext = createContext<SupabaseContextValue | null>(null);
+SupabaseContext.displayName = 'SupabaseContext';
+
+export const SupabaseProvider = ({
+  children,
+  supabaseKey,
+}: {
+  children: React.ReactNode;
+  supabaseKey: string;
+}) => {
+  const supabaseUrl = 'https://tmeoawlhihzuoqxebciw.supabase.co';
+  const supabase = createClient<Database>(supabaseUrl, supabaseKey);
+
+  return (
+    <SupabaseContext.Provider value={{ supabase }}>
+      {children}
+    </SupabaseContext.Provider>
+  );
+};
+
+export const useSupabaseContext = () => {
+  const context = useContext(SupabaseContext);
+
+  if (context === null) {
+    throw new Error(
+      'useSupabaseContext must be used within a <SupabaseProvider />'
+    );
+  }
+  return context;
+};