frontend:TopPageの全体的なデザインの調整

Author: BruCandy

frontend/src/components/ExampleBillingDetailCard.tsx

@@ -21,7 +21,7 @@ export default function ExampleBillingDetailCard({
   const payerPayments = samplePayments.filter((p) => p.paidBy === paidBy.id);
 
   return (
-    <Card className="h-[450px] overflow-y-auto shadow-md">
+    <Card className="h-[330px] overflow-y-auto shadow-md">
       <CardHeader>
         <CardTitle>{paidBy.name}さんが受け取る金額の入力</CardTitle>
       </CardHeader>

frontend/src/components/NetworkGraph.tsx

@@ -5,9 +5,16 @@ import type { Result } from "@/types/result";
 interface Props {
   members: Member[];
   results: Result[];
+  height?: string;
+  width?: string;
 }
 
-export default function NetworkGraph({ members, results }: Props) {
+export default function NetworkGraph({
+  members,
+  results,
+  height = "500px",
+  width = "500px",
+}: Props) {
   if (results.length === 0) {
     return (
       <div className="p-8 text-center">
@@ -100,9 +107,10 @@ export default function NetworkGraph({ members, results }: Props) {
   return (
     <div
       style={{
-        width: "calc(100% - 48px)",
+        width: width,
+        // width: "100%",
         margin: "0 24px",
-        height: "500px",
+        height: height,
         boxShadow: "0 4px 12px rgba(0, 0, 0, 0.25)",
         borderRadius: "8px",
         background: "#ffffff",

frontend/src/components/ResultDetailCard.tsx

@@ -13,12 +13,14 @@ interface ResultDetailCardProps {
   personId: MemberId;
   members: Member[];
   results: Result[];
+  height?: string;
 }
 
 export default function ResultDetailCard({
   personId,
   members,
   results,
+  height = "250px",
 }: ResultDetailCardProps) {
   const person = members.find((m) => m.id === personId);
   const personName = person?.name || `メンバー${personId}`;
@@ -40,7 +42,10 @@ export default function ResultDetailCard({
         <CardTitle className="text-xl">{personName}さんの精算結果</CardTitle>
       </CardHeader>
 
-      <CardContent className="flex h-full min-h-[250px] items-start gap-6 px-6 py-4">
+      <CardContent
+        className="flex h-full items-start gap-6 px-6 py-4"
+        style={{ minHeight: height }}
+      >
         <div className="flex-1">
           <h3 className="mb-3 font-semibold text-lg text-red-700">
             支払うお金 ({formatCurrency(totalPayment)}円)

frontend/src/components/ResultTab.tsx

@@ -6,9 +6,10 @@ import ResultDetailCard from "./ResultDetailCard";
 interface ResultProps {
   members: Member[];
   results: Result[];
+  height?: string;
 }
 
-export default function ResultTab({ members, results }: ResultProps) {
+export default function ResultTab({ members, results, height }: ResultProps) {
   // 結果がない場合の表示
   if (results.length === 0) {
     return (
@@ -49,6 +50,7 @@ export default function ResultTab({ members, results }: ResultProps) {
             personId={person}
             members={members}
             results={results}
+            height={height}
           />
         </TabsContent>
       ))}

frontend/src/components/TopPageHeader.tsx

@@ -1,6 +1,5 @@
 import { useNavigate } from "react-router-dom";
 import { cn } from "@/lib/utils";
-import CardWrapper from "./CardWrapper";
 import { Button } from "./ui/button";
 import { Card, CardContent } from "./ui/card";
 
@@ -38,13 +37,13 @@ export default function TopPageHeader({
       </div>
       <Card
         className={cn(
-          "mx-auto mb-8 w-[90%] max-w-md bg-gray-100 shadow-md",
+          "-mt-4 mx-auto mb-5 w-[90%] max-w-md bg-gray-100 shadow-md",
           className,
         )}
       >
-        <CardContent className="flex flex-col">
+        <CardContent className="flex flex-col p-1">
           <div className="text-center">
-            <p className="mb-8 text-black text-lg">
+            <p className="mb-4 text-black text-lg">
               頻繁に起こる建て替えを最適化します。
             </p>
             <Button

frontend/src/data/tmp_data.ts

@@ -181,9 +181,14 @@ export default function TopPage() {
           />
           <div className="flex flex-col items-center gap-6 md:flex-row md:justify-center">
             <CardWrapper title="結果表示" nextButton={null}>
-              <ResultTab members={sampleMembers} results={sampleResults} />
+              <ResultTab
+                members={sampleMembers}
+                results={sampleResults}
+                height="150px"
+              />
               <div className="mt-4 flex gap-4">
                 <Button variant="outline">戻る</Button>
+                <Button size="lg">CSV出力</Button>
               </div>
             </CardWrapper>
             <Card
@@ -208,7 +213,14 @@ export default function TopPage() {
           </div>
           <div className="flex flex-col items-center gap-6 md:flex-row md:justify-center">
             <CardWrapper title="ネットワークグラフ">
-              <NetworkGraph members={sampleMembers} results={sampleResults} />
+              <div className="flex w-full justify-center">
+                <NetworkGraph
+                  members={sampleMembers}
+                  results={sampleResults}
+                  height="300px"
+                  width="300px"
+                />
+              </div>
               <div className="mt-4 flex gap-4">
                 <Button variant="outline">戻る</Button>
               </div>