広場投稿追加画面の刷新 (#399) (#413)

Reviewed-on: #413
Co-authored-by: miteruzo <miteruzo@naver.com>
Co-committed-by: miteruzo <miteruzo@naver.com>

frontend/src/pages/materials/MaterialListPage.tsx

@@ -13,7 +13,7 @@ import MainArea from '@/components/layout/MainArea'
 import { SITE_TITLE } from '@/config'
 import { fetchMaterials, parseMaterialFilter } from '@/lib/materials'
 import { materialsKeys } from '@/lib/queryKeys'
-import { dateString, inputClass } from '@/lib/utils'
+import { cn, dateString, inputClass } from '@/lib/utils'
 
 import type { FC, FormEvent } from 'react'
 
@@ -113,10 +113,11 @@ const clearedTagSelectionPath = (
 
 const MaterialThumb: FC<{ material: Material }> = ({ material }) => (
     <div
-	className={`flex aspect-square h-[180px] w-[180px] items-center justify-center
-		    overflow-hidden rounded-lg border border-stone-200 bg-white text-center
-		    text-stone-900 shadow-sm dark:border-stone-700 dark:bg-stone-900
-		    dark:text-stone-100`}>
+	className={cn (
+	    'flex aspect-square h-[180px] w-[180px] items-center justify-center',
+	    'overflow-hidden rounded-lg border border-stone-200 bg-white text-center',
+	    'text-stone-900 shadow-sm dark:border-stone-700 dark:bg-stone-900',
+	    'dark:text-stone-100')}>
       {material.thumbnail
        ? <img src={material.thumbnail} alt="" className="block h-full w-full object-cover"/>
        : (
@@ -482,7 +483,7 @@ const MaterialListPage: FC = () => {
 			className={inputClass (invalid)}>
 		      <option value="all">すべて</option>
 		      <option value="tagged">タグあり</option>
-		      <option value="untagged">タグなし</option>
+		      <option value="untagged"></option>
 		    </select>)}
 	      </FormField>
 
@@ -531,30 +532,32 @@ const MaterialListPage: FC = () => {
 
 	  <div className="flex flex-wrap items-center justify-between gap-3">
 	    <div className="flex flex-wrap gap-2">
-	      <button
-		  type="button"
-		  onClick={() => updateQuery ({ view: 'card' })}
-		  className={`rounded-full border px-4 py-2 text-sm ${
-		      view === 'card'
-		      ? [
-			  'border-sky-500 bg-sky-50 text-sky-700 dark:border-sky-400',
-			  'dark:bg-sky-950 dark:text-sky-100'].join (' ')
-		      : [
-			  'border-stone-300 bg-white text-stone-900 dark:border-stone-700',
-			  'dark:bg-stone-900 dark:text-stone-100'].join (' ') }`}>
+		      <button
+			  type="button"
+			  onClick={() => updateQuery ({ view: 'card' })}
+			  className={cn (
+			      'rounded-full border px-4 py-2 text-sm',
+			      view === 'card'
+			      ? [
+				  'border-sky-500 bg-sky-50 text-sky-700 dark:border-sky-400',
+				  'dark:bg-sky-950 dark:text-sky-100']
+			      : [
+				  'border-stone-300 bg-white text-stone-900 dark:border-stone-700',
+				  'dark:bg-stone-900 dark:text-stone-100'])}>
 		アイコン
 	      </button>
-	      <button
-		  type="button"
-		  onClick={() => updateQuery ({ view: 'list' })}
-		  className={`rounded-full border px-4 py-2 text-sm ${
-		      view === 'list'
-		      ? [
-			  'border-sky-500 bg-sky-50 text-sky-700 dark:border-sky-400',
-			  'dark:bg-sky-950 dark:text-sky-100'].join (' ')
-		      : [
-			  'border-stone-300 bg-white text-stone-900 dark:border-stone-700',
-			  'dark:bg-stone-900 dark:text-stone-100'].join (' ') }`}>
+		      <button
+			  type="button"
+			  onClick={() => updateQuery ({ view: 'list' })}
+			  className={cn (
+			      'rounded-full border px-4 py-2 text-sm',
+			      view === 'list'
+			      ? [
+				  'border-sky-500 bg-sky-50 text-sky-700 dark:border-sky-400',
+				  'dark:bg-sky-950 dark:text-sky-100']
+			      : [
+				  'border-stone-300 bg-white text-stone-900 dark:border-stone-700',
+				  'dark:bg-stone-900 dark:text-stone-100'])}>
 		詳細
 	      </button>
 	    </div>