Merge pull request #69 from kc3hack/RAIT-09/develop

Rait 09/develop

Author: RAIT-09

backend/src/lib/gemini.ts

@@ -103,11 +103,11 @@ const generateTanka = async (originalText: string): Promise<string[]> => {
       console.log(`短歌生成${i + 1}回目`);
 
       const tanka = [
-        jsonResponse.response[0].line1,
-        jsonResponse.response[0].line2,
-        jsonResponse.response[0].line3,
-        jsonResponse.response[0].line4,
-        jsonResponse.response[0].line5,
+        jsonResponse.response[0].line1.replace('ッ', 'ツ'),
+        jsonResponse.response[0].line2.replace('ッ', 'ツ'),
+        jsonResponse.response[0].line3.replace('ッ', 'ツ'),
+        jsonResponse.response[0].line4.replace('ッ', 'ツ'),
+        jsonResponse.response[0].line5.replace('ッ', 'ツ'),
       ];
 
       const tankaYomi = [

frontend/next.config.ts

@@ -3,7 +3,10 @@ import type { NextConfig } from 'next';
 const nextConfig: NextConfig = {
   reactStrictMode: true,
   images: {
-    domains: ['avatars.githubusercontent.com'],
+    domains: [
+      'avatars.githubusercontent.com',
+      '202502-test-bucket.s3.ap-northeast-1.amazonaws.com',
+    ],
   },
   experimental: {
     serverActions: {

frontend/src/app/timeline/actions/fetchPosts.ts

@@ -1,72 +1,62 @@
 // サーバアクション
 'use server';
 
+import { hc } from 'hono/client';
+import { AppType } from '../../../../../backend/src/index';
 import { PostTypes } from '@/types/postTypes';
 
+const client = hc<AppType>(process.env.BACKEND_URL ?? 'http://localhost:8080');
+
 /**
  * 投稿データを取得する非同期関数
  * @async
  * @function fetchPosts
  * @param {Object} params - 投稿データ取得のためのパラメータオブジェクト
  * @param {number} params.limit - 取得する投稿の最大件数
+ * @param {string} params.iconUrl - ユーザのアイコン画像URL
  * @param {string} params.offsetId - 取得を開始する投稿のID（オフセット）
  * @returns {Promise<PostTypes[]>} 投稿データの配列を返すPromise．投稿が存在しない場合は空配列を返す．
  */
 const fetchPosts = async ({
   limit,
+  iconUrl,
   offsetId,
 }: {
   limit: number;
-  offsetId: string;
+  iconUrl?: string;
+  offsetId?: string;
 }): Promise<PostTypes[] | []> => {
-  const posts = [
-    {
-      id: 'example_post',
-      tanka: {
-        line1: 'KANSAI',
-        line2: '捉え難しき',
-        line3: 'お題かな',
-        line4: '古都の熱き歌',
-        line5: 'アプリで詠まん',
-      },
-      original:
-        'K.A.N.S.A.Iというお題、どう捉えていいのか難しかった。京都や奈良は昔から短歌がアツいのかな。短歌を使ったアプリ作ろうかな。',
-      imageUrl: '',
-      date: new Date(),
-      user: {
-        id: 'example_user',
-        name: 'Name',
-        bio: 'bio',
-        iconUrl: '',
-      },
-      miyabi: 2222,
-    },
-    {
-      id: 'example_post',
-      tanka: {
-        line1: 'KANSAI',
-        line2: '捉え難しき',
-        line3: 'お題かな',
-        line4: '古都の熱き歌',
-        line5: 'アプリで詠まん',
+  try {
+    const res = await client.timeline.$post({
+      json: {
+        limit: limit,
+        my_icon: iconUrl,
+        post_id: offsetId,
       },
-      original:
-        'K.A.N.S.A.Iというお題、どう捉えていいのか難しかった。京都や奈良は昔から短歌がアツいのかな。短歌を使ったアプリ作ろうかな。',
-      imageUrl: '/imageSample.jpg',
-      date: new Date(),
+    });
+    console.log(`Loading more Posts... limit: ${limit}, offsetId: ${offsetId}`);
+
+    // エラーがある場合は空の配列を返す
+    if (!res.ok) {
+      console.log(res.statusText);
+      return [];
+    }
+
+    const json = await res.json();
+    return json.posts.map((post) => ({
+      ...post,
+      id: post.id,
+      tanka: post.tanka,
+      original: post.original,
+      imageUrl: post.image_path ?? '',
+      date: new Date(post.created_at),
       user: {
-        id: 'example_user',
-        name: 'Name',
-        bio: 'bio',
-        iconUrl: '',
+        name: post.user_name,
+        iconUrl: post.user_icon,
       },
-      miyabi: 22,
-    },
-  ];
-  console.log(`Loading more Posts... limit: ${limit}, offsetId: ${offsetId}`);
-
-  try {
-    return [...posts, ...posts, ...posts, ...posts, ...posts];
+      miyabiCount: post.miyabi_count,
+      miyabiIsClicked: post.is_miyabi,
+    }));
   } catch (error) {
     console.error(error);
     return [];

frontend/src/app/timeline/page.tsx

@@ -46,10 +46,14 @@ const Timeline = () => {
   const loadMorePosts = useCallback(async () => {
     setIsLoading(true);
     // 投稿データを取得
-    const newPosts = await fetchPosts({ limit: LIMIT, offsetId });
+    const newPosts = await fetchPosts({
+      limit: LIMIT,
+      iconUrl: session.data?.user?.id,
+      offsetId: offsetId,
+    });
     if (newPosts && newPosts.length > 0) {
       setPosts((prevPosts) => [...prevPosts, ...newPosts]);
-      setOffsetId(() => newPosts[1].id);
+      setOffsetId(() => newPosts[newPosts.length - 1].id);
       // 取得した投稿数がLIMIT未満の場合は，これ以上取得できる投稿は無い．
       if (newPosts.length < LIMIT) {
         setHasMore(false);
@@ -112,7 +116,7 @@ const Timeline = () => {
       {/* タイムライン */}
       <div className='pt-12'>
         <div className='relative mx-auto max-w-lg'>
-          <SideMenu className='absolute top-5 hidden lg:block' style={{ left: '-12rem' }} />
+          <SideMenu className='fixed top-16 hidden -translate-x-full lg:block' />
           <PostList posts={posts} className='mx-auto max-w-sm lg:max-w-lg' />
           {isLoading && <p className='py-3 text-center'>投稿を取得中...</p>}
           <div ref={targetRef} className='h-px' />

frontend/src/components/GifButton.tsx

@@ -37,7 +37,6 @@ const GifButton = ({
       setIsAnimationPlaying(false);
       setIsClicked(true);
     }, animationDuration);
-    onClick?.();
   };
 
   const cancelButton = () => {
@@ -46,6 +45,7 @@ const GifButton = ({
   };
 
   const switchButton = () => {
+    if (isAnimationPlaying) return;
     if (isClicked) {
       cancelButton();
       onCancel?.();

frontend/src/components/Post.tsx

@@ -5,7 +5,6 @@ import React from 'react';
 import { useState } from 'react';
 import Image from 'next/image';
 import { PostTypes } from '@/types/postTypes';
-import { TankaTypes } from '@/types/tankaTypes';
 import ImageModal from '@/components/ImageModal';
 import MiyabiButton from '@/components/MiyabiButton';
 import DropDownButton from './DropDownButton';
@@ -32,6 +31,8 @@ const Post = ({ post, className }: PostProps) => {
   const tanka = parseTanka(post.tanka);
   // 投稿に画像が含まれるか
   const hasImage = Boolean(post.imageUrl);
+  // 雅カウントの状態
+  const [miyabiCount, setMiyabiCount] = useState(post.miyabiCount);
   // 画像の拡大表示状態
   const [modalOpen, setModalOpen] = useState(false);
   // 削除確認ダイアログの表示状態
@@ -112,15 +113,24 @@ const Post = ({ post, className }: PostProps) => {
       <div className='mt-3 flex items-center text-black'>
         {formatDateKanji(post.date)}
         <div className='ml-auto flex items-center'>
-          <p className='mr-2 text-sm'>{post.miyabi.toLocaleString()}</p>
+          <p className='mr-2 text-sm'>{miyabiCount.toLocaleString()}</p>
           <MiyabiButton
             size='small'
             onClick={() => {
               if (isLoggedIn) {
+                setMiyabiCount((count) => ++count);
               } else {
                 setLoginDialogOpen(true);
               }
             }}
+            onCancel={() => {
+              if (isLoggedIn) {
+                setMiyabiCount((count) => --count);
+              } else {
+                setLoginDialogOpen(true);
+              }
+            }}
+            initialIsClicked={post.miyabiIsClicked}
             className='mr-0'
           />
         </div>
@@ -154,11 +164,11 @@ const Post = ({ post, className }: PostProps) => {
 /**
  * 短歌をパースして，改行と全角空白を追加する．
  * @function parseTanka
- * @param {TankaTypes} tanka - 短歌型オブジェクト
+ * @param {Array<string>} tanka - 短歌の配列
  * @return {string} パースされた短歌の文字列
  */
-const parseTanka = (tanka: TankaTypes): string => {
-  const parsedTanka: string = `${tanka.line1}\n\u3000${tanka.line2}\n\u3000\u3000${tanka.line3}\n${tanka.line4}\n\u3000${tanka.line5}`;
+const parseTanka = (tanka: Array<string>): string => {
+  const parsedTanka: string = `${tanka[0]}\n\u3000${tanka[1]}\n\u3000\u3000${tanka[2]}\n${tanka[3]}\n\u3000${tanka[4]}`;
   return parsedTanka;
 };
 

frontend/src/types/postTypes.ts

@@ -1,12 +1,12 @@
 import { UserTypes } from '@/types/userTypes';
-import { TankaTypes } from '@/types/tankaTypes';
 
 export type PostTypes = {
   id: string;
-  tanka: TankaTypes;
+  tanka: Array<string>;
   original: string;
   imageUrl: string;
   date: Date;
   user: UserTypes;
-  miyabi: number;
+  miyabiCount: number;
+  miyabiIsClicked: boolean;
 };

frontend/src/types/tankaTypes.ts

@@ -1,5 +1,4 @@
 export type UserTypes = {
   name: string;
-  bio: string;
   iconUrl: string;
 };