Cardlist 컴포넌트 마이그레이션

src/components/Accordion/Accordion.styled.tsx

@@ -28,7 +28,6 @@ export const StyledCollapseHeading = styled.div`
 export const StyledHeading = styled.h3`
   display: inline-block;
   font-size: 1.625rem;
-  user-select: none;
 `;
 
 export const StyledIngredient = styled.li`
@@ -52,6 +51,7 @@ export const StyledRecipeInfoItem = styled.li`
     list-style: none;
     cursor: pointer;
     padding: ${pxToRem(3)};
+    user-select: none;
   }
 
   summary::-webkit-details-marker {
@@ -92,6 +92,7 @@ export const StyledAccordion = styled.ul`
     width: 45%;
     height: 70vh;
     overflow: auto;
+    padding: 8px;
   }
 
   ${media.mobile} {

src/components/Card/Card.tsx

@@ -32,7 +32,12 @@ export const Card = ({
         <CardContainer $type={type} $background={background}>
           <figure>
             <CardFigureImgContainer $type={type}>
-              <Image src={imgSrc} title={title} layout="fill" priority />
+              <Image
+                src={'https://spoonacular.com/recipeImages/Chopped-Kale-Salad-with-Pomegranate---Avocado-584495.jpg'}
+                title={title}
+                layout="fill"
+                priority
+              />
             </CardFigureImgContainer>
             <CardFigcaption $headingPosition={headingPosition}>{title}</CardFigcaption>
           </figure>

src/components/CardList/CardList.stories.tsx

@@ -0,0 +1,35 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { CardList } from './CardList';
+
+export default {
+  title: 'CardList',
+  component: CardList,
+  args: {
+    results: [
+      {
+        id: 592479,
+        image: 'Kale-and-Quinoa-Salad-with-Black-Beans-592479.jpg',
+        title: 'Kale and Quinoa Salad with Black Beans',
+      },
+      {
+        id: 547775,
+        image: 'Creamy-Avocado-Pasta-547775.jpg',
+        title: 'Creamy Avocado Pasta',
+      },
+      {
+        id: 818941,
+        image: 'avocado-toast-with-eggs-spinach-and-tomatoes-818941.jpg',
+        title: 'Avocado Toast with Eggs, Spinach, and Tomatoes',
+      },
+      {
+        id: 495111,
+        image: 'Citrus-Sesame-Kale-495111.jpg',
+        title: 'Citrus Sesame Kale',
+      },
+    ],
+  },
+} as ComponentMeta<typeof CardList>;
+
+const Template: ComponentStory<typeof CardList> = (args) => <CardList {...args} />;
+
+export const Default = Template.bind({});

src/components/CardList/CardList.styled.tsx

@@ -0,0 +1,23 @@
+import styled from '@emotion/styled';
+import { pxToRem, media } from 'utils';
+
+export const StyledList = styled.ul`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  align-items: flex-start;
+  flex-wrap: wrap;
+`;
+
+export const StyledItem = styled.li`
+  text-align: center;
+  width: ${pxToRem(240)};
+
+  @media (max-width: 1056px) {
+    width: 50%;
+  }
+
+  ${media.mobile} {
+    width: 100%;
+  }
+`;

src/components/CardList/CardList.tsx

@@ -0,0 +1,28 @@
+import { Card } from 'components/Card/Card';
+import { CardListProps } from './CardList.types';
+import { StyledItem, StyledList } from './CardList.styled';
+
+export function CardList({ results }: CardListProps) {
+  return (
+    <StyledList>
+      {results.map(({ id, title, image }) => {
+        if (image && !/^(https)/.test(image)) {
+          image = 'https://spoonacular.com/recipeImages/' + image;
+        }
+        return (
+          <StyledItem key={id}>
+            <Card
+              id={id}
+              type="smallSquare"
+              background="none"
+              hasSummary={false}
+              headingPosition="bottomCenter"
+              imgSrc={image}
+              title={title}
+            />
+          </StyledItem>
+        );
+      })}
+    </StyledList>
+  );
+}

src/components/CardList/CardList.types.ts

@@ -0,0 +1,7 @@
+export interface CardListProps {
+  results: {
+    id: number;
+    image: string;
+    title: string;
+  }[];
+}

src/components/index.ts

@@ -18,8 +18,6 @@ export * from './Card/Card';
 export * from './RandomRecipe/RandomRecipe';
 export * from './HotRecipes/HotRecipes';
 export * from './Toast/Toast';
-<<<<<<< HEAD
-export * from './Pagination/Pagination';
-=======
 export * from './Accordion/Accordion';
->>>>>>> 36b63b6fc38e7338bbe3107bb996b543f71a0a79
+export * from './CardList/CardList';
+export * from './Pagination/Pagination';