feat: 投稿画面を結合

src/app/(use-header)/post/_components/logic/Page.tsx

@@ -3,8 +3,10 @@
 import { useAtomValue } from 'jotai';
 import { useState } from 'react';
 import Page from '../view/Page';
+import { authAtom } from '@/stores/authAtom';
 import { langAtom } from '@/stores/langAtom';
 import { type TablesInsert } from '@/types/supabase';
+import insertPost from '@/utils/insertPost';
 
 type Post = Partial<TablesInsert<'post'>>;
 
@@ -13,6 +15,7 @@ export default function PostPageLogic() {
   const [tagString, setTagString] = useState<string>('');
   const [languageString, setLanguageString] = useState<string>('');
 
+  const auth = useAtomValue(authAtom);
   const languages = useAtomValue(langAtom);
 
   function setCode(code: string) {
@@ -48,12 +51,47 @@ export default function PostPageLogic() {
   // 投稿処理
   function submit() {
     const tags = changeToArray(tagString);
-    if (languageString === '') {
+    const languageId = changeToId(languageString);
+
+    if (auth === undefined) {
+      alert('ログインしてください');
+      return;
+    }
+
+    if (languageId === undefined) {
       alert('言語を選択してください');
       return;
     }
-    const languageId = changeToId(languageString);
-    console.log(post, tags, languageId); // eslint-disable-line no-console
+
+    if (post.code === undefined) {
+      alert('コードを入力してください');
+      return;
+    }
+
+    if (post.description === undefined) {
+      alert('説明を入力してください');
+      return;
+    }
+
+    if (post.title === undefined) {
+      alert('タイトルを入力してください');
+      return;
+    }
+
+    const p: Omit<TablesInsert<'post'>, 'id' | 'created_at' | 'deleted_at'> = {
+      code: post.code,
+      description: post.description,
+      lang_id: languageId,
+      title: post.title,
+      user_uid: auth.uid,
+    };
+    void (async () => {
+      const res = await insertPost(p, tags);
+
+      if (res === undefined) {
+        alert('投稿に失敗しました');
+      }
+    })();
   }
 
   return (

src/app/(use-header)/post/_components/view/Page/index.module.scss

@@ -31,6 +31,7 @@
   }
 
   textarea {
+    padding: 10px;
     width: 60vw;
     height: 200px;
     resize: vertical; // 縦のみ可変

src/app/_components/LoginProvider/index.module.scss

@@ -21,10 +21,16 @@
       grid-column: 1 / -1;
 
       button[type='submit'] {
-        padding: 8px 10px;
-        border: solid 1px $primary-color;
-        border-radius: 4px;
+        padding: 5px 8px;
+        border: solid 1.5px;
+        border-radius: 10px;
+        background-color: $background-color;
         cursor: pointer;
+        transition: all 0.3s;
+
+        &:hover {
+          background-color: color-mix(in srgb, $background-color, $on-background-color 10%);
+        }
       }
     }
   }

src/app/_components/LoginProvider/index.tsx

@@ -5,6 +5,7 @@ import { type ChangeEvent, type FormEvent, type ReactElement, useState, useSyncE
 import styles from './index.module.scss';
 import { authAtom } from '@/stores/authAtom';
 import { supabase } from '@/utils/supabase/client';
+import upsertUser from '@/utils/upsertUser';
 
 interface Props {
   children: ReactElement;
@@ -31,12 +32,18 @@ export default function LoginProvider({ children }: Props) {
 
 function LoginPage() {
   const setAuth = useSetAtom(authAtom);
+  const [name, setName] = useState('');
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
 
+  const onChangeName = (e: ChangeEvent<HTMLInputElement>) => {
+    setName(e.target.value);
+  };
+
   const onChangeEmail = (e: ChangeEvent<HTMLInputElement>) => {
     setEmail(e.target.value);
   };
+
   const onChangePassword = (e: ChangeEvent<HTMLInputElement>) => {
     setPassword(e.target.value);
   };
@@ -45,13 +52,21 @@ function LoginPage() {
     void (async () => {
       e.preventDefault();
 
-      const { data, error } = await supabase.auth.signUp({ email, password });
-      if (error != null) throw new Error(error.message);
-      if (data.user?.id == null) throw new Error('No user id');
+      try {
+        const { data, error } = await supabase.auth.signInWithPassword({ email, password });
+        if (error != null) throw new Error(error.message);
+        if (data.user?.id == null) throw new Error('No user id');
 
-      // eslint-disable-next-line no-console
-      console.log(data);
-      setAuth({ email, password, uid: data.user?.id });
+        // eslint-disable-next-line no-console
+        console.log(data);
+        await upsertUser(name, data.user.id);
+        setAuth({ email, password, uid: data.user.id });
+      } catch (_) {
+        const { data, error } = await supabase.auth.signUp({ email, password });
+        if (error != null) throw new Error(error.message);
+        if (data.user?.id == null) throw new Error('No user id');
+        setAuth({ email, password, uid: data.user.id });
+      }
     })();
   };
 
@@ -60,6 +75,11 @@ function LoginPage() {
       <h1>Login / Signin</h1>
 
       <form onSubmit={onSubmit}>
+        <label htmlFor="email">
+          <span>Name</span>
+          <input id="name" onChange={onChangeName} type="text" value={name} />
+        </label>
+
         <label htmlFor="email">
           <span>Email</span>
           <input id="email" onChange={onChangeEmail} type="email" value={email} />