【Gemini Code Assist】VS Code + React でフロントエンドアプリケーション作成（２）| デザイン修正とREST APIからのデータ取得

import React from 'react';
import CartInfoScreen from './components/CartInfoScreen';
import './App.css';

function App() {
  return (
    <div className="App">
      <main>
        <CartInfoScreen />
      </main>
    </div>
  );
}

export default App

body {
  margin: 0;
  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; /* index.cssから移動または統一 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #e0f0ff; /* アプリケーション全体の背景を薄い青系に */
  color: #333; /* アプリケーション全体のデフォルト文字色 */
}

.App {
  width: 100%; /* 必要に応じて幅を指定 */
}

:root {
  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  font-weight: 400;

  /* color-scheme: light dark; */ /* App.cssで制御するためコメントアウトまたは削除 */
  /* color: rgba(255, 255, 255, 0.87); */ /* App.cssで制御するためコメントアウトまたは削除 */
  /* background-color: #242424; */ /* App.cssで制御するためコメントアウトまたは削除 */

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body {
  margin: 0;
  /* display: flex; */ /* div#root を中央寄せする原因となるため削除 */
  /* place-items: center; */ /* div#root を中央寄せする原因となるため削除 */
  min-width: 320px;
  min-height: 100vh;
  /* bodyの背景色と文字色はApp.cssで指定したものを優先 */
}

#root {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center; /* .App を左右中央に配置 */
}

h1 {
  font-size: 3.2em;
  line-height: 1.1;
}

button {
  border-radius: 8px;
  border: 1px solid transparent;
  padding: 0.6em 1.2em;
  font-size: 1em;
  font-weight: 500;
  font-family: inherit;
  background-color: #1a1a1a;
  cursor: pointer;
  transition: border-color 0.25s;
}

button:hover {
  border-color: #646cff;
}

button:focus,
button:focus-visible {
  outline: 4px auto -webkit-focus-ring-color;
}

@media (prefers-color-scheme: light) {
  :root {
    color: #213547;
    background-color: #ffffff;
  }
  a:hover {
    color: #747bff;
  }
  button {
    background-color: #f9f9f9;
  }
}

import React, { useState, useEffect } from 'react';
import './CartInfoScreen.css';

function CartInfoScreen() {
  const [userId, setUserId] = useState('');
  const [cartInfo, setCartInfo] = useState(null);
  const [error, setError] = useState('');
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    const originalTitle = document.title;
    document.title = 'カート情報';
    return () => {
      document.title = originalTitle; // もしくは固定のデフォルトタイトル 'Vite + React' など
    };
  }, []);

  const fetchCartData = async (userIdToFetch) => {
    const apiBaseUrl = import.meta.env.VITE_API_BASE_URL || 'http://localhost:8080'; // デフォルト値を設定
    const apiUrl = `${apiBaseUrl}/cart/${userIdToFetch}`;
    try {
      const response = await fetch(apiUrl);
      if (!response.ok) {
        if (response.status === 404) {
          return null; // ユーザーが見つからない場合はnullを返す
        }
        const errorData = await response.json().catch(() => ({ message: `サーバーエラーが発生しました (ステータス: ${response.status})` }));
        throw new Error(errorData.message || `HTTP error! status: ${response.status}`);
      }
      const data = await response.json();
      return data;
    } catch (e) {
      console.error("カート情報の取得に失敗しました:", e);
      throw e;
    }
  };

  const handleDisplayCart = async () => {
    setError('');
    setCartInfo(null);
    setLoading(true);

    if (!userId.trim()) {
      setError('ユーザーIDを入力してください。');
      setLoading(false);
      return;
    }

    try {
      const data = await fetchCartData(userId.toUpperCase());
      if (data) {
        const cartTotal = data.items.reduce((sum, item) => sum + item.totalAmount, 0);
        setCartInfo({ ...data, cartTotalAmount: cartTotal });
      } else {
        setError('該当するユーザーのカート情報は見つかりませんでした。');
      }
    } catch (e) {
      setError(e.message || 'カート情報の取得中にエラーが発生しました。');
    } finally {
      setLoading(false);
    }
  };

  const handleClear = () => {
    setUserId('');
    setCartInfo(null);
    setError('');
    setLoading(false);
  };

  return (
    <div className="cart-info-screen">
      <h2>カート情報</h2>
      <div className="input-area">
        <label htmlFor="userIdInput">ユーザーID:</label>
        <input
          type="text"
          id="userIdInput"
          value={userId}
          onChange={(e) => setUserId(e.target.value)}
          placeholder="ユーザーIDを入力"
        />
        <button onClick={handleDisplayCart} className="action-button">
          表示
        </button>
        <button onClick={handleClear} className="clear-button">
          クリア
        </button>
      </div>

      {error && <p className="error-message">{error}</p>}

      {loading && <p className="loading-message">カート情報を取得中...</p>}
      {cartInfo && (
        <div className="cart-display-area">
          <h3>カート内容 (ユーザーID: {cartInfo.userId})</h3>

          <div className="info-section sender-info">
            <h4>発送者情報</h4>
            <p><strong>氏名:</strong> {cartInfo.senderName}</p>
          </div>

          <div className="info-section recipient-info">
            <h4>配送先情報</h4>
            <p><strong>氏名:</strong> {cartInfo.recipientName}</p>
            <p><strong>郵便番号:</strong> {cartInfo.postalCode}</p>
            <p><strong>住所:</strong> {cartInfo.recipientAddressPrefecture}{cartInfo.recipientAddressCity}{cartInfo.recipientAddressLine1}</p>
            {cartInfo.recipientAddressLine2 && <p><strong>建物名:</strong> {cartInfo.recipientAddressLine2}</p>}
          </div>

          {cartInfo.items.length > 0 ? (
            <>
              <h4>商品情報</h4>
              <table>
                <thead>
                  <tr>
                    <th>商品名</th>
                    <th>単価(税込)</th>
                    <th>数量</th>
                    <th>小計(税込)</th>
                    <th>商品ページ</th>
                  </tr>
                </thead>
                <tbody>
                  {cartInfo.items.map((item) => (
                    <tr key={item.productId}>
                      <td>{item.productName}</td>
                      <td>¥{item.priceWithTax.toLocaleString()}</td>
                      <td>{item.quantity}</td>
                      <td>¥{item.totalAmount.toLocaleString()}</td>
                      <td><a href={item.productPageUrl} target="_blank" rel="noopener noreferrer">表示</a></td>
                    </tr>
                  ))}
                </tbody>
                <tfoot>
                  <tr>
                    <td colSpan="3" style={{ textAlign: 'right' }}>
                      <strong>合計金額 (税込):</strong>
                    </td>
                    <td colSpan="2">
                      <strong>¥{cartInfo.cartTotalAmount.toLocaleString()}</strong>
                    </td>
                  </tr>
                </tfoot>
              </table>
            </>
          ) : (
            <p>カートに商品がありません。</p>
          )}
        </div>
      )}
    </div>
  );
}

export default CartInfoScreen;

.cart-info-screen {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  padding: 25px;
  background-color: #f0f8ff; /* AliceBlue - 薄い青系 */
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  color: #333;
  max-width: 800px;
  margin: 20px auto;
}

.cart-info-screen h2 {
  color: #2c3e50; /* Dark Slate Gray - 落ち着いた色 */
  text-align: center;
  margin-bottom: 25px;
  font-size: 1.8em;
}

.input-area {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 25px;
  padding: 15px;
  background-color: #e6f3ff; /* さらに薄い青 */
  border-radius: 8px;
}

.input-area label {
  font-weight: 600;
  color: #34495e; /* Wet Asphalt - 落ち着いた色 */
}

.input-area input[type="text"] {
  padding: 10px 12px;
  border: 1px solid #b0c4de; /* LightSteelBlue */
  border-radius: 6px;
  font-size: 1em;
  flex-grow: 1;
}

.input-area input[type="text"]:focus {
  outline: none;
  border-color: #6fa8dc; /* CornflowerBlue - フォーカス時の色 */
  box-shadow: 0 0 0 2px rgba(111, 168, 220, 0.2);
}

.action-button,
.clear-button {
  padding: 10px 18px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1em;
  transition: background-color 0.2s ease;
}

.action-button {
  background-color: #6fa8dc; /* CornflowerBlue */
  color: white;
}

.action-button:hover {
  background-color: #548bba; /* 少し濃い青 */
}

.clear-button {
  background-color: #d0e0f0; /* LightSteelBlue より少し濃い */
  color: #333;
}

.clear-button:hover {
  background-color: #b0c4de; /* LightSteelBlue */
}

.error-message {
  color: #c0392b; /* Pomegranate - エラー色 */
  background-color: #fdecea;
  padding: 10px;
  border-radius: 6px;
  margin-bottom: 20px;
  border: 1px solid #e74c3c;
}

.loading-message {
  color: #2980b9; /* Belize Hole - 青系 */
  font-style: italic;
  text-align: center;
  padding: 10px;
  margin-bottom: 20px;
}

.sender-info,
.recipient-info {
  background-color: #e6f3ff; /* 薄い青 */
  padding: 15px;
  margin-bottom: 20px;
  border-radius: 8px;
  border: 1px solid #d1e0ec;
  text-align: left;
}

.sender-info h4,
.recipient-info h4 {
  margin-top: 0;
  color: #34495e; /* Wet Asphalt */
  border-bottom: 1px solid #b0c4de;
  padding-bottom: 8px;
  margin-bottom: 10px;
}

.sender-info p,
.recipient-info p {
  margin: 5px 0;
  line-height: 1.6;
}

.cart-display-area {
  margin-top: 25px;
  padding: 20px;
  background-color: #ffffff;
  border: 1px solid #d1e0ec; /* 薄い青系の境界線 */
  border-radius: 8px;
}

.cart-display-area h3 {
  color: #2980b9; /* Belize Hole - 青系 */
  margin-top: 0;
  margin-bottom: 15px;
  border-bottom: 2px solid #e0f0ff;
  padding-bottom: 10px;
}

.cart-display-area h4 { /* 商品情報用のh4 */
  color: #2980b9; /* Belize Hole - 青系 */
  margin-top: 20px;
  margin-bottom: 10px;
  border-bottom: 2px solid #e0f0ff;
  padding-bottom: 8px;
  text-align: left;
}

.cart-display-area table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 15px;
}

.cart-display-area th,
.cart-display-area td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #e0f0ff; /* 薄い青系の境界線 */
}

.cart-display-area th {
  background-color: #e6f3ff; /* さらに薄い青 */
  color: #34495e; /* Wet Asphalt */
  font-weight: 600;
}

.cart-display-area tbody td:nth-child(2), /* 単価(税込) */
.cart-display-area tbody td:nth-child(3), /* 数量 */
.cart-display-area tbody td:nth-child(4) { /* 小計(税込) */
  text-align: right;
}

.cart-display-area tr:last-child td {
  border-bottom: none;
}

.cart-display-area tr:hover {
  background-color: #f8fcff;
}

.cart-display-area tfoot td {
  font-weight: bold;
  color: #2c3e50;
  background-color: #e6f3ff;
}

.cart-display-area tfoot td:last-child { /* 合計金額の数値セル */
  text-align: right;
}

VITE_API_BASE_URL=http://localhost:8080