Merge pull request #27 from kmc-jp/dev

デザインの刷新

Author: SouichiroTsujimoto

public/search.svg

@@ -19,25 +19,27 @@ export default function ArticlePage({ params }: { params: Promise<{ id: string }
         if (id) {
             getArticle(id).then((article) => {
                 setArticle(article);
+
             });
         }
     }, [id]);
 
-    if (!article) {
-        return <div>記事が見つかりませんでした。</div>;
+    if (article == null) {
+        return <div></div>;
     }
 
     return (
-        <div className="container mx-auto px-4 py-8">
+        
+        <div className="bg-white mx-4 mt-4 px-7 pt-10 pb-20 rounded-sm">
             <article className="max-w-none">
-                <div className="mb-8">
-                    <h1 className="text-4xl font-extrabold text-black mb-2">{safeStringify(article.title)}</h1>
-                    <div className="flex items-center text-gray-500">
-                        <p className="mr-4">By <Link href={`/author/${article.author.inner}`} className="hover:underline">{safeStringify(article.author)}</Link></p>
-                        <p>{new Date(safeStringify(article.created_at)).toLocaleDateString('ja-JP')}</p>
+                <div className="mb-10">
+                    <h1 className="text-4xl font-extrabold text-gray-600 mb-4">{safeStringify(article.title)}</h1>
+                    <div className="flex items-center">
+                        <p className="mr-4 text-sky-600">By <Link href={`/author/${article.author.inner}`} className="hover:underline">{safeStringify(article.author)}</Link></p>
+                        <p className="text-gray-500">{new Date(safeStringify(article.created_at)).toLocaleDateString('ja-JP')}</p>
                     </div>
                 </div>
-                <p className="text-black">{safeStringify(article.content)}</p>
+                <p className="text-gray-700">{safeStringify(article.content)}</p>
             </article>
         </div>
     );

src/app/articles/[id]/page.tsx

@@ -1,47 +1,37 @@
 'use client'
 
-import Link from 'next/link';
 import { getArticles } from '@/lib/api';
-import { safeStringify } from '@/lib/utils';
 import { useState, useEffect } from 'react';
+import { safeStringify } from '@/lib/utils';
+import ArticleCard from '@/app/components/ArticleCard';
 
 export default function Home() {
     const [articles, setArticles] = useState<any[]>([]);
 
     useEffect(() => {
         getArticles().then((articles) => {
             setArticles(articles);
+            if (!Array.isArray(articles)) {
+                return <div>記事が見つかりませんでした。</div>;
+            }
+
+            if (articles.length === 0) {
+                return <div>記事がありません。</div>;
+            }
         });
     }, [])
 
-    if (!Array.isArray(articles)) {
-        return <div>記事が見つかりませんでした。</div>;
-    }
 
-    if (articles.length === 0) {
-        return <div>記事がありません。</div>;
-    }
 
     return (
         <>
-            {articles.map((article: any, index: number) => (
-                <div key={safeStringify(article._id) || `article-${index}`}
-                    className="border-b border-gray-200 p-10">
-                    <div className="text-sm font-bold text-gray-500">{safeStringify(article._id)}</div>
-                    <Link href={`/articles/${safeStringify(article._id)}`}>
-                        <div className="text-xl font-bold cursor-pointer hover:underline">{safeStringify(article.title)}</div>
-                    </Link>
-                    <div className="text-lg font-bold">
-                        <Link href={`/author/${safeStringify(article.author.inner)}`} className="hover:underline">
-                            {safeStringify(article.author)}
-                        </Link>
-                    </div>
-                    <div className="text-base font-bold">{safeStringify(article.created_at)}</div>
-                    <div className="border border-gray-200 p-5 m-2">
-                        <div className="text-sm">{safeStringify(article.content)}</div>
+            <div className="mx-8 mt-8">
+                {articles.map((article: any) => (
+                    <div key={safeStringify(article._id)} className="my-4">
+                        <ArticleCard article={article} showAuthor={true} />
                     </div>
-                </div>
-            ))}
+                ))}
+            </div>
         </>
     );
 }

src/app/articles/page.tsx

@@ -1,9 +1,9 @@
 'use client'
 
-import Link from 'next/link';
 import { getArticlesByUser } from '@/lib/api';
-import { safeStringify } from '@/lib/utils';
 import { useState, useEffect } from 'react';
+import { safeStringify } from '@/lib/utils';
+import ArticleCard from '@/app/components/ArticleCard';
 
 export default function Home({ params }: { params: Promise<{ author: string }> }) {
     const [userName, setUserName] = useState<string>('');
@@ -19,39 +19,31 @@ export default function Home({ params }: { params: Promise<{ author: string }> }
         if (userName) {
             getArticlesByUser(userName).then((articles) => {
                 setArticles(articles);
+                    if (!Array.isArray(articles)) {
+                        return <div>記事が見つかりませんでした。</div>;
+                    }
+                    if (articles.length === 0) {
+                        return <div>記事がありません。</div>;
+                    }
             });
         }
+        
     }, [userName]);
 
-    if (!userName) {
-        return <div>読み込み中...</div>;
-    }
-
-    if (!Array.isArray(articles)) {
-        return <div>記事が見つかりませんでした。</div>;
-    }
-
-    if (articles.length === 0) {
-        return <div></div>
-        // return <div>記事がありません。</div>;
-    }
+    // if (!userName) {
+    //     return <div></div>;
+    // }
 
     return (
         <>
-            {articles.map((article: any, index: number) => (
-                <div key={safeStringify(article._id) || `article-${index}`}
-                    className="border-b border-gray-200 p-10">
-                    <div className="text-sm font-bold text-gray-500">{safeStringify(article._id)}</div>
-                    <Link href={`/articles/${safeStringify(article._id)}`}>
-                        <div className="text-xl font-bold cursor-pointer hover:underline">{safeStringify(article.title)}</div>
-                    </Link>
-                    <div className="text-lg font-bold">{safeStringify(article.author)}</div>
-                    <div className="text-base font-bold">{safeStringify(article.created_at)}</div>
-                    <div className="border border-gray-200 p-5 m-2">
-                        <div className="text-sm">{safeStringify(article.content)}</div>
+            <div className="mx-8 mt-8">
+                {userName && <h1 className="text-2xl font-medium p-2 text-gray-600">{ safeStringify(userName) }の記事一覧</h1> }
+                {articles.map((article: any) => (
+                    <div key={safeStringify(article._id)} className="my-4">
+                        <ArticleCard article={article} showAuthor={false} />
                     </div>
-                </div>
-            ))}
+                ))}
+            </div>
         </>
     );
 }

src/app/author/[author]/page.tsx

@@ -0,0 +1,41 @@
+import Link from 'next/link';
+import { safeStringify } from '@/lib/utils';
+
+type Article = {
+    _id: any;
+    title: any;
+    author: any;
+    created_at: any;
+    content: any;
+};
+
+type Props = {
+    article: Article;
+    showAuthor: boolean;
+};
+
+export default function ArticleCard({ article, showAuthor }: Props) {
+    return (
+        <Link href={`/articles/${safeStringify(article._id)}`} className="group bg-white shadow-md px-8 pt-6 pb-5 rounded-sm block">
+            <div className="flex text-sm text-gray-500 mb-2">{new Date(safeStringify(article.created_at)).toLocaleDateString()}</div>
+            
+            <h2 className="text-2xl font-medium mb-4 text-sky-600 group-hover:text-red-400">{safeStringify(article.title)}</h2>
+
+            <p className="text-gray-500 line-clamp-2 mb-4">{safeStringify(article.content)}</p>
+
+            <div className="flex items-center text-sm text-gray-400">
+                <div className="font-medium">
+                    {showAuthor ? (
+                        <div className="flex items-center">
+                            <p className="mr-1">By</p>
+                            <p>{safeStringify(article.author)}</p>
+                        </div>
+                    ) : (
+                        ""
+                    )}
+                </div>                
+            </div>
+
+        </Link>
+    );
+}

src/app/components/ArticleCard.tsx

@@ -3,23 +3,20 @@
 import { ReactNode } from "react";
 import Header from "./header";
 import Footer from "./footer";
-import Sidebar, { useSidebar } from "./sidebar";
 
 interface ClientLayoutProps {
     children: ReactNode;
 }
 
 export default function ClientLayout({ children }: ClientLayoutProps) {
-    const { isOpen, closeSidebar, toggleSidebar } = useSidebar();
 
     return (
         <>
-            <Header onMenuClick={toggleSidebar} />
-            <Sidebar isOpen={isOpen} onClose={closeSidebar} />
+            <Header />
             <main className="min-h-screen mb-40">
                 {children}
             </main>
             <Footer />
         </>
     );
-} 
+}

src/app/components/client-layout.tsx

@@ -2,7 +2,7 @@ import Link from "next/link";
 
 export default function Footer() {
     return (
-        <footer className="bg-gray-900 text-white fixed bottom-0 left-0 right-0">
+        <footer className="bg-gray-900 text-white flex items-center justify-center">
             <div className="px-2 py-3">
                 {/* <div className="flex items-center space-x-2">
                     <span className="font-bold text-xl">みんウェブ Blog Platform</span>

src/app/components/footer.tsx

@@ -1,79 +1,36 @@
 import Link from "next/link";
+import Image from "next/image";
 
 interface HeaderProps {
     onMenuClick?: () => void;
 }
 
 export default function Header({ onMenuClick }: HeaderProps) {
     return (
-        <header className="bg-white shadow-sm border-b border-gray-200 sticky top-0 z-50">
+        <header className="bg-white shadow-sm border-b border-gray-200 top-0 z-50">
             <div className="mx-7">
                 <div className="flex justify-between items-center h-16">
                     <div className="flex items-center space-x-4">
-                        {/* ハンバーガーメニューボタン */}
-                        <button
-                            onClick={onMenuClick}
-                            className="rounded-lg hover:bg-gray-100 transition-colors duration-200"
-                            aria-label="メニューを開く"
-                        >
-                            <svg
-                                className="w-6 h-6 text-gray-600"
-                                fill="none"
-                                stroke="currentColor"
-                                viewBox="0 0 24 24"
-                            >
-                                <path
-                                    strokeLinecap="round"
-                                    strokeLinejoin="round"
-                                    strokeWidth={2}
-                                    d="M4 6h16M4 12h16M4 18h16"
-                                />
-                            </svg>
-                        </button>
-
+                        
                         <Link href="/" className="flex items-center space-x-2">
-                            <span className="font-bold text-sm sm:text-base md:text-lg lg:text-xl text-gray-900 whitespace-nowrap">みんウェブ Blog Platform</span>
-                        </Link>
-                    </div>
-
-                    {/* デスクトップナビゲーション */}
-                    <div className="hidden lg:flex items-center space-x-6">
-                        <Link
-                            href="/search"
-                            className="text-gray-600 hover:text-gray-900 transition-colors duration-200 font-medium"
-                        >
-                            検索
-                        </Link>
-                        <Link
-                            href="/category"
-                            className="text-gray-600 hover:text-gray-900 transition-colors duration-200 font-medium"
-                        >
-                            カテゴリー
-                        </Link>
-                        <Link
-                            href="/about"
-                            className="text-gray-600 hover:text-gray-900 transition-colors duration-200 font-medium"
-                        >
-                            About
+                            <span className="font-bold text-sm sm:text-base md:text-lg lg:text-xl text-gray-800 whitespace-nowrap">Blog Platform</span>
                         </Link>
                     </div>
 
                     <div className="flex items-center space-x-4">
-                        <Link
-                            href="/login"
-                            className="text-sm sm:text-base text-gray-600 hover:text-gray-900 transition-colors duration-200 font-medium"
-                        >
-                            ログイン
-                        </Link>
-                        <Link
-                            href="/signup"
-                            className="text-sm sm:text-base bg-gradient-to-r from-blue-600 to-purple-600 text-white px-4 py-2 rounded-lg hover:shadow-lg transition-all duration-200 font-medium"
-                        >
-                            新規登録
+                        <Link href="/search">
+                            <Image src="/search.svg" alt="Search" width={24} height={24} className="cursor-pointer" />
                         </Link>
+                        <div className="flex items-center px-4 py-2 rounded-2xl border border-gray-300 hover:bg-gray-200 transition-colors duration-200">
+                            <Link
+                                href="/auth"
+                                className="text-s font-bold text-gray-500">
+                                ログイン
+                            </Link>
+                        </div>
                     </div>
                 </div>
             </div>
         </header>
     );
-}
+}

src/app/components/header.tsx

@@ -1,7 +1,7 @@
 @import "tailwindcss";
 
 :root {
-  --background: #ffffff;
+  --background: #f3f4f5;
   --foreground: #171717;
 }