Feat/カードコンポーネントサイズ変更

src/components/Card/Card.module.css

@@ -1,6 +1,5 @@
-
-.card {
-    width: 100%;  
+.card { 
+    max-width: 100%;
     border: 1px solid #ccc;
     background-color: #fff;
     text-decoration: none;

src/components/Card/Card.stories.tsx

@@ -13,6 +13,7 @@ export default {
     to: { control: 'text' },
     imageSrc: { control: 'text' },
     imageAlt: { control: 'text' },
+    cardWidth: { control: 'text' },
   },
 } as Meta;
 
@@ -28,4 +29,5 @@ Default.args = {
   to: '/',
   imageSrc: '/images/maximum-card.png',
   imageAlt: 'maximum',
+  cardWidth: '100%',
 };

src/components/Card/Card.tsx

@@ -10,6 +10,7 @@ interface CardProps {
   to: string;
   imageSrc: string;
   imageAlt: string;
+  cardWidth: string;
 }
 const Card: React.FC<CardProps> = ({
   title,
@@ -19,9 +20,18 @@ const Card: React.FC<CardProps> = ({
   to,
   imageSrc,
   imageAlt,
+  cardWidth,
 }) => {
+  //widthとして当てはまらない値の場合100%にする
+  const width =
+    /^(\d+(\.\d+)?(%|px|em|rem|cm|mm|in|pt|pc)|auto|inherit|initial|unset|fit-content|max-content|min-content)$/.test(
+      cardWidth,
+    )
+      ? cardWidth
+      : '100%';
+
   return (
-    <Link href={to} className={style.card}>
+    <Link href={to} className={style.card} style={{ width }}>
       <div className={style.img}>
         <img className={style.img} src={imageSrc} alt={imageAlt} />
         <div className={style.box}>