feat: 🎸 SosenkyoBook コンポーネントをリファクタリング (#465)

* feat: 🎸 未使用の代入を削除

* refactor: 💡 総選挙本のコンポーネントをリファクタした

* test: 💍 テストを Fix

__tests__/components/events-in-event/sosenkyo-book/Contacts.spec.tsx

@@ -1,6 +1,6 @@
 import { expect } from '@jest/globals'
 import { render } from '@testing-library/react'
-import Contacts from '@/components/events-in-event/sosenkyo-book/Contacts'
+import { Contacts } from '@/components/events-in-event/sosenkyo-book/Contacts'
 
 describe('pages/index の Home コンポーネント', () => {
   it('期待どおりであること', () => {

components/events-in-event/sosenkyo-book/AboutPreviousIllustrations.tsx

@@ -0,0 +1,24 @@
+import type { NextPage } from 'next'
+// import useTranslation from 'next-translate/useTranslation'
+
+export const AboutPreviousIllustrations: NextPage = () => {
+  // const { t } = useTranslation('sosenkyo_book')
+
+  return (
+    <>
+      <h2 className="text-xl font-bold pb-4">過去の作品掲載について</h2>
+      <div className="pb-4 text-left">
+        <ul className="list-disc pl-6 pr-2 pt-2">
+          <li className="pb-2">
+            過去の幻水総選挙でご応募された開票イラストも掲載可能です。
+          </li>
+          <li className="pb-2">
+            ファイル名の末尾に開催年（「_2021」など）を付けてお送り下さい。WEB用データは不要です。
+          </li>
+          <li className="pb-2">加筆・修正をしていただいても構いません。</li>
+          <li className="pb-2">過去作品のみの掲載も歓迎いたします。</li>
+        </ul>
+      </div>
+    </>
+  )
+}

components/events-in-event/sosenkyo-book/Attention.tsx

@@ -0,0 +1,22 @@
+import type { NextPage } from 'next'
+// import useTranslation from 'next-translate/useTranslation'
+
+export const Attention: NextPage = () => {
+  // const { t } = useTranslation('sosenkyo_book')
+
+  return (
+    <>
+      <h2 className="text-xl font-bold pb-4">注意</h2>
+      <div className="pb-4 text-left">
+        <ul className="list-disc pl-6 pr-2 pt-2">
+          <li className="pb-2">
+            掲載にあたり、イラスト原寸より縮小させていただく場合がございます（拡大はしません）。総選挙本ご参加の方はこれにご同意いただけたものとみなします。
+          </li>
+          <li className="pb-2">
+            万が一、盗作などによって損害が発生した場合の賠償責任は、主催ではなく作者が負うものといたします。
+          </li>
+        </ul>
+      </div>
+    </>
+  )
+}

components/events-in-event/sosenkyo-book/Contacts.tsx

@@ -1,7 +1,7 @@
 import type { NextPage } from 'next'
 // import useTranslation from 'next-translate/useTranslation'
 
-const Contacts: NextPage = () => {
+export const Contacts: NextPage = () => {
   // const { t } = useTranslation('')
 
   return (
@@ -31,5 +31,3 @@ const Contacts: NextPage = () => {
     </>
   )
 }
-
-export default Contacts

components/events-in-event/sosenkyo-book/Deadline.tsx

@@ -0,0 +1,22 @@
+import type { NextPage } from 'next'
+// import useTranslation from 'next-translate/useTranslation'
+
+export const Deadline: NextPage = () => {
+  // const { t } = useTranslation('sosenkyo_book')
+
+  return (
+    <>
+      <h2 className="text-xl font-bold pb-4">〆切</h2>
+      <div className="text-base text-center pb-4">
+        <div className="pb-2">
+          <div>印刷用データ〆切</div>
+          <div className="text-red-500 pl-1 pr-1">2022年7月31日（日）</div>
+        </div>
+        <div className="pb-2">
+          <div>参加表明フォーム送信〆切</div>
+          <div className="text-red-500 pl-1 pr-1">2022年7月31日（日）</div>
+        </div>
+      </div>
+    </>
+  )
+}

components/events-in-event/sosenkyo-book/DetailsColorMode.tsx

@@ -0,0 +1,22 @@
+import type { NextPage } from 'next'
+// import useTranslation from 'next-translate/useTranslation'
+
+export const DetailsColorMode: NextPage = () => {
+  // const { t } = useTranslation('sosenkyo_book')
+
+  return (
+    <>
+      <h2 className="text-xl font-bold pb-4">募集詳細 - カラーモード</h2>
+      <div className="text-base text-left pb-4">
+        <ul className="list-disc pl-6 pr-2">
+          <li className="pb-2">CMYK</li>
+          <ul className="list-disc pl-6 pr-2 pt-2">
+            <li className="pb-2">
+              作者様でRGBからCMYKの変換が難しい場合は、主催側で変換いたします。
+            </li>
+          </ul>
+        </ul>
+      </div>
+    </>
+  )
+}

components/events-in-event/sosenkyo-book/DetailsDataSize.tsx

@@ -0,0 +1,62 @@
+import type { NextPage } from 'next'
+// import useTranslation from 'next-translate/useTranslation'
+
+export const DetailsDataSize: NextPage = () => {
+  // const { t } = useTranslation('sosenkyo_book')
+
+  return (
+    <>
+      <h2 className="text-xl font-bold pb-4">
+        募集詳細 - 印刷用データのサイズ
+      </h2>
+      <div className="text-base text-left pb-4">
+        <ul className="list-disc pl-6 pr-2">
+          <li className="pb-2">
+            <div className="pb-2">
+              印刷用データのサイズの規定は下記の通りです。
+            </div>
+            <ul className="list-disc pl-6 pr-2">
+              <li className="pb-2">
+                <div className="pb-2">縦長の場合</div>
+                <ul className="list-none pl-0 pr-2">
+                  <li className="pb-2">
+                    <div>幅 1100px × 高さ 1500px 以上</div>
+                    <div>幅 2508px × 高さ 3541px 以下</div>
+                  </li>
+                </ul>
+              </li>
+              <li className="pb-2">
+                <div className="pb-2">横長の場合</div>
+                <ul className="list-none pl-0 pr-2">
+                  <li className="pb-2">
+                    <div>幅 1500px × 高さ 1100px 以上</div>
+                    <div>幅 3541px × 高さ 2508px 以下</div>
+                  </li>
+                </ul>
+              </li>
+              <li className="pb-2">
+                <div className="pb-2">正方形の場合</div>
+                <ul className="list-none pl-0 pr-2">
+                  <li className="pb-2">
+                    <div>幅 1300px × 高さ 1300px 以上</div>
+                  </li>
+                </ul>
+              </li>
+            </ul>
+          </li>
+          <li className="pb-2">
+            サイズに迷う方は「B7（350dpi）」か「ハガキ・ポストカード（350dpi）」サイズで描かれることをおすすめします。
+          </li>
+          <li className="pb-2">
+            アナログイラストは可能であれば、スキャナーで取り込んだデータをお送りください（カラー、解像度300～350dpi）。
+          </li>
+          <li className="pb-2">
+            アナログイラストをカメラで撮影する方は、規定サイズを超えても構いませんので、
+            <span className="text-red-500">出来る限り高画質の画像</span>
+            をお送りください。
+          </li>
+        </ul>
+      </div>{' '}
+    </>
+  )
+}

components/events-in-event/sosenkyo-book/DetailsFileName.tsx

@@ -0,0 +1,29 @@
+import type { NextPage } from 'next'
+// import useTranslation from 'next-translate/useTranslation'
+
+export const DetailsFileName: NextPage = () => {
+  // const { t } = useTranslation('sosenkyo_book')
+
+  return (
+    <>
+      <h2 className="text-xl font-bold pb-4">募集詳細 - ファイル名</h2>
+      <div className="text-base text-left pb-4">
+        <ul className="list-disc pl-6 pr-2">
+          <li className="pb-2">
+            <span className="font-bold">i_キャラ名_作者様のお名前.拡張子</span>
+            <ul className="list-disc pl-6 pr-2 pt-2">
+              <li className="pb-2">
+                先頭に「<span className="font-bold">i_</span>
+                」を付けてください
+              </li>
+              <li className="pb-2">日本語のファイル名で構いません</li>
+              <li className="pb-2">
+                スマートフォンから送る場合等、ファイル名変更が難しい方はそのままで大丈夫です
+              </li>
+            </ul>
+          </li>
+        </ul>
+      </div>
+    </>
+  )
+}

components/events-in-event/sosenkyo-book/DetailsResolution.tsx

@@ -0,0 +1,24 @@
+import type { NextPage } from 'next'
+// import useTranslation from 'next-translate/useTranslation'
+
+export const DetailsResolution: NextPage = () => {
+  // const { t } = useTranslation('sosenkyo_book')
+
+  return (
+    <>
+      <h2 className="text-xl font-bold pb-4">
+        募集詳細 - 印刷用データの解像度
+      </h2>
+      <div className="text-base text-left pb-4">
+        <ul className="list-disc pl-6 pr-2">
+          <li className="pb-2">350dpi（推奨）</li>
+          <ul className="list-disc pl-6 pr-2 pt-2">
+            <li className="pb-2">
+              幅と高さが規定通りであれば、異なる解像度でもお受けいたします。
+            </li>
+          </ul>
+        </ul>
+      </div>
+    </>
+  )
+}

components/events-in-event/sosenkyo-book/DetailsSaveFormat.tsx

@@ -0,0 +1,21 @@
+import type { NextPage } from 'next'
+// import useTranslation from 'next-translate/useTranslation'
+
+export const DetailsSaveFormat: NextPage = () => {
+  // const { t } = useTranslation('sosenkyo_book')
+
+  return (
+    <>
+      <h2 className="text-xl font-bold pb-4">募集詳細 - 保存形式</h2>
+      <div className="text-base text-left pb-4">
+        <ul className="list-disc pl-6 pr-2">
+          <li className="pb-2">psd</li>
+          <ul className="list-disc pl-6 pr-2 pt-2">
+            <li className="pb-2">レイヤーは全て統合してください。</li>
+            <li className="pb-2">写真データの場合は jpg でも構いません。</li>
+          </ul>
+        </ul>
+      </div>
+    </>
+  )
+}

components/events-in-event/sosenkyo-book/Faq.tsx

@@ -0,0 +1,25 @@
+import type { NextPage } from 'next'
+// import useTranslation from 'next-translate/useTranslation'
+
+import { AboutSize } from '@/components/events-in-event/sosenkyo-book/faq/AboutSize'
+import { AboutColorMode } from '@/components/events-in-event/sosenkyo-book/faq/AboutColorMode'
+import { AboutSubmitSameTime } from '@/components/events-in-event/sosenkyo-book/faq/AboutSubmitSameTime'
+import { AboutPublishingByMyself } from '@/components/events-in-event/sosenkyo-book/faq/AboutPublishingByMyself'
+
+export const Faq: NextPage = () => {
+  // const { t } = useTranslation('sosenkyo_book')
+
+  return (
+    <>
+      <h2 className="text-xl font-bold pb-4">Q & A</h2>
+      <div className="text-base text-left">
+        <ul className="list-none pl-0 pr-2">
+          <AboutSize />
+          <AboutColorMode />
+          <AboutSubmitSameTime />
+          <AboutPublishingByMyself />
+        </ul>
+      </div>
+    </>
+  )
+}

components/events-in-event/sosenkyo-book/HowToAttend.tsx

@@ -0,0 +1,32 @@
+import type { NextPage } from 'next'
+// import useTranslation from 'next-translate/useTranslation'
+
+export const HowToAttend: NextPage = () => {
+  // const { t } = useTranslation('sosenkyo_book')
+
+  return (
+    <>
+      <h2 className="text-xl font-bold pb-4">参加の流れ</h2>
+      <div className="pb-4">
+        <div className="text-base text-left pb-4">
+          <ul className="list-none pl-0 pr-2">
+            <li className="pb-2">① WEB用データ、印刷用データを送信</li>
+            <li className="pb-2">② 「参加表明フォーム」に入力、送信</li>
+            <li className="pb-2">③ 主催宛DMで送信のご報告</li>
+            <li className="pb-2">④ 主催よりデータ受領のご連絡</li>
+          </ul>
+        </div>
+        <div className="text-base text-left">
+          <ul className="list-none pl-0 pr-2">
+            <li className="pb-2">
+              ※印刷用に加筆修正をされたい場合、最初にWEB用データのみご提出いただき、印刷用データを後日お送りいただいても大丈夫です。
+            </li>
+            <li className="pb-2">
+              ※一週間経っても受領連絡がない場合は、DMが届いていない可能性がございます。お手数ですが再度DMをお送り下さい。
+            </li>
+          </ul>
+        </div>
+      </div>
+    </>
+  )
+}

components/events-in-event/sosenkyo-book/OutlineOfApplication.tsx

@@ -0,0 +1,30 @@
+import type { NextPage } from 'next'
+import Link from 'next/link'
+// import useTranslation from 'next-translate/useTranslation'
+
+export const OutlineOfApplication: NextPage = () => {
+  // const { t } = useTranslation('sosenkyo_book')
+
+  return (
+    <>
+      <h2 className="text-xl font-bold pb-4">募集概要</h2>
+      <div className="text-base text-left pb-4">
+        <div className="pb-4">
+          幻水総選挙本への掲載をご希望の方は、
+          <Link href="/events-in-event/illustrations-with-results" passHref>
+            <span className="link link-hover underline underline-offset-4 text-blue-500 hover:text-blue-900 pr-1">
+              通常の開票イラストの応募
+            </span>
+          </Link>
+          に加え、
+          <span className="text-red-500">以下の2点の送信</span>{' '}
+          をお願い致します。詳細は後述します。
+        </div>
+        <ul className="list-none pl-0 pr-2">
+          <li className="pb-2">① 印刷用データファイルを作成して送信</li>
+          <li className="pb-2">② 参加表明フォームを送信</li>
+        </ul>
+      </div>
+    </>
+  )
+}

components/events-in-event/sosenkyo-book/Publication.tsx

@@ -0,0 +1,33 @@
+import type { NextPage } from 'next'
+// import useTranslation from 'next-translate/useTranslation'
+
+export const Publication: NextPage = () => {
+  // const { t } = useTranslation('sosenkyo_book')
+
+  return (
+    <>
+      <h2 className="text-xl font-bold pb-4">開票イラストの掲載について</h2>
+      <div className="text-base text-left pb-4">
+        <div className="pb-4">
+          お送りいただいた開票イラストのうち、
+          <span className="text-red-500">掲載許可をくださった方の作品</span>
+          を収録させていただきます。
+        </div>
+        <ul className="list-disc pl-6 pr-2">
+          <li className="pb-2">
+            お送りいただいた全ての方にお声がけいたしますが、本への掲載を強要するものではありません。
+          </li>
+          <li className="pb-2">
+            規定に沿っていればどの開票イラストでも掲載可能です。
+          </li>
+          <li className="pb-2">
+            1ページあたり 2～4枚 程度の掲載を想定しています。
+          </li>
+          <li className="pb-2">
+            参加者様には、完成した本を一冊進呈いたします。
+          </li>
+        </ul>
+      </div>
+    </>
+  )
+}