테마 타입 인식 오류 해결, Collapse 컴포넌트, Accordion 컴포넌트 마이그레이션

src/components/Accordion/Accordion.stories.tsx

@@ -0,0 +1,52 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { Accordion } from './Accordion';
+
+export default {
+  title: 'Accordion',
+  component: Accordion,
+  args: {
+    recipeDetails: [
+      {
+        type: 'ingredients',
+        data: [
+          { unit: 'g', name: 'angel hair pasta', amount: 8 },
+          { amount: 0.5, name: 'black pepper', unit: 'tsps' },
+          { amount: 0.5, unit: 'Tbsps', name: 'chili powder' },
+          { unit: 'tsps', name: 'corn starch', amount: 2 },
+          { name: 'spring onions', unit: '', amount: 3 },
+          { amount: 2, unit: '', name: 'juice' },
+          { amount: 3, name: 'fat free greek yogurt', unit: 'Tbsps' },
+          { amount: 0.5, unit: 'Tbsps', name: 'paprika' },
+          { unit: 'g', amount: 1, name: 'shrimp' },
+          { amount: 0.5, unit: 'tsps', name: 'salt' },
+          { name: 'sesame oil', amount: 2.5, unit: 'Tbsps' },
+          { amount: 1.5, unit: 'tsps', name: 'sriracha' },
+          { unit: '', amount: 3, name: 'sweet chili sauce' },
+        ],
+      },
+      {
+        type: 'equipment',
+        data: ['pot', 'whisk', 'bowl', 'frying pan'],
+      },
+      {
+        type: 'summary',
+        data: 'Need a pescatarian main course? Bang Bang Shrimp Pasta could be a tremendous recipe to try. One serving contains 422 calories, 32g of protein, and 11g of fat. For $2.86 per serving, this recipe covers 20% of your daily requirements of vitamins and minerals. 10686 people have made this recipe and would make it again. From preparation to the plate, this recipe takes approximately 20 minutes. A mixture of juice, paprika, corn starch, and a handful of other ingredients are all it takes to make this recipe so yummy. To use up the black pepper you could follow this main course with the Dr. Pepper Cake with Flour Cooked Frosting as a dessert. All things considered, we decided this recipe deserves a spoonacular score of 87%. This score is tremendous. Try Bang Bang Shrimp Pasta, Bang Bang Shrimp Pasta, and Bang Bang Shrimp Pasta for similar recipes.',
+      },
+      {
+        type: 'instructions',
+        data: [
+          'In a large stockpot over medium-high heat, bring 10-12 cups of water to boil.',
+          'Add pasta and cook until al dente (softened but still slightly firm).',
+          'Drain pasta and set aside. In a large Ziploc bag add corn starch, paprika, chili powder, salt and black pepper.',
+          'Add shrimp to bag, seal and shake bag a few times to evenly cover shrimp with seasoning mixture. In a small bowl, whisk together Greek yogurt, sweet chili sauce, 1 Tbsp sesame oil, lime juice, sriracha sauce and red pepper flakes.',
+          'Pour sauce over pasta and toss to evenly coat pasta. Set aside. In a large skillet over medium-high heat, add remaining 1 Tbsp sesame oil. Once oil has heated, saut shrimp for 3-5 minutes. Flip halfway through to evenly cook on both sides.',
+          'Serve shrimp over pasta and top with green onions.',
+        ],
+      },
+    ],
+  },
+} as ComponentMeta<typeof Accordion>;
+
+const Template: ComponentStory<typeof Accordion> = (args) => <Accordion {...args} />;
+
+export const Default = Template.bind({});

src/components/Accordion/Accordion.styled.tsx

@@ -0,0 +1,104 @@
+import styled from '@emotion/styled';
+import { css, Theme } from '@emotion/react';
+import { pxToRem, media } from 'utils';
+
+const collapseContent = (props: { theme: Theme }) =>
+  css`
+    font-size: ${pxToRem(18)};
+    color: ${props.theme.color.gray200};
+    padding: 0.5rem 0;
+    line-height: 1.3;
+  `;
+
+export const StyledCollapseHeading = styled.div`
+  display: flex;
+  justify-content: space-between;
+  border-bottom: 1px solid ${({ theme }) => theme.color.white};
+  align-content: center;
+
+  svg {
+    color: $white;
+    width: 2em;
+    height: 2em;
+    transition: 0.3s;
+    margin: auto 0;
+  }
+`;
+
+export const StyledHeading = styled.h3`
+  display: inline-block;
+  font-size: 1.625rem;
+  user-select: none;
+`;
+
+export const StyledIngredient = styled.li`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  span:first-child {
+    width: 50%;
+  }
+`;
+
+export const StyledAccordionText = styled.p`
+  margin-top: 0;
+`;
+
+export const StyledRecipeInfoItem = styled.li`
+  margin-bottom: 60px !important;
+
+  summary {
+    list-style: none;
+    cursor: pointer;
+    padding: ${pxToRem(3)};
+  }
+
+  summary::-webkit-details-marker {
+    display: none;
+  }
+
+  details[open] {
+    svg {
+      transform: rotate(-180deg);
+    }
+  }
+`;
+
+export const DivCollapseContent = styled.div`
+  ${collapseContent}
+`;
+
+export const UlCollapseContent = styled.ul`
+  ${collapseContent}
+
+  li {
+    padding: 8px 0;
+  }
+`;
+
+export const OlCollapseContent = styled.ol`
+  ${collapseContent}
+  list-style: decimal-leading-zero;
+  padding-left: 1.8em;
+
+  li {
+    padding: 8px 0;
+  }
+`;
+
+export const StyledAccordion = styled.ul`
+  ${media.desktop} {
+    width: 45%;
+    height: 70vh;
+    overflow: auto;
+  }
+
+  ${media.mobile} {
+    margin-top: 20px;
+  }
+
+  display: block;
+  color: ${({ theme }) => theme.color.white};
+  margin: 0;
+`;

src/components/Accordion/Accordion.tsx

@@ -0,0 +1,22 @@
+import { AccordionProps } from './Accordion.types';
+import { Collapse } from './Collapse';
+import { StyledAccordion } from './Accordion.styled';
+
+export const Accordion = ({ recipeDetails }: AccordionProps) => {
+  return (
+    <StyledAccordion>
+      {recipeDetails.map(({ type, data }) => {
+        switch (type) {
+          case 'ingredients':
+            return <Collapse key={type} type={type} data={data} />;
+          case 'equipment':
+            return <Collapse key={type} type={type} data={data} />;
+          case 'summary':
+            return <Collapse key={type} type={type} data={data} />;
+          case 'instructions':
+            return <Collapse key={type} type={type} data={data} />;
+        }
+      })}
+    </StyledAccordion>
+  );
+};

src/components/Accordion/Accordion.types.ts

@@ -0,0 +1,38 @@
+type RecipeDetailType = 'ingredients' | 'equipment' | 'summary' | 'instructions';
+
+interface Ingredient {
+  unit: string;
+  name: string;
+  amount: number;
+}
+
+interface IngredientDetail {
+  type: 'ingredients';
+  data: Ingredient[];
+}
+
+interface EquipmentDetail {
+  type: 'equipment';
+  data: string[];
+}
+
+interface SummaryDetail {
+  type: 'summary';
+  data: string;
+}
+interface InstructionDetail {
+  type: 'instructions';
+  data: string[];
+}
+
+export interface CollapseHeadingProps {
+  heading: RecipeDetailType;
+}
+
+export type CollapseContentProps = IngredientDetail | EquipmentDetail | SummaryDetail | InstructionDetail;
+
+export type RecipeDetail = [IngredientDetail, EquipmentDetail, SummaryDetail, InstructionDetail];
+
+export interface AccordionProps {
+  recipeDetails: RecipeDetail;
+}

src/components/Accordion/Collapse.tsx

@@ -0,0 +1,56 @@
+import { CollapseContentProps } from './Accordion.types';
+import { CollapseContent } from './CollapseContent';
+import { CollapseHeading } from './CollapseHeading';
+import { StyledRecipeInfoItem, UlCollapseContent, OlCollapseContent, DivCollapseContent } from './Accordion.styled';
+
+export const Collapse = ({ type, data }: CollapseContentProps): JSX.Element => {
+  let collapseContentContainer = null;
+
+  switch (type) {
+    case 'ingredients':
+      collapseContentContainer = (
+        <UlCollapseContent>
+          <CollapseContent type={type} data={data} />
+        </UlCollapseContent>
+      );
+      break;
+    case 'equipment':
+      collapseContentContainer =
+        !data || !data.length ? (
+          <p>No Equipment.</p>
+        ) : (
+          <UlCollapseContent>
+            <CollapseContent type={type} data={data} />
+          </UlCollapseContent>
+        );
+      break;
+    case 'summary':
+      collapseContentContainer = (
+        <DivCollapseContent>
+          <CollapseContent type={type} data={data} />
+        </DivCollapseContent>
+      );
+      break;
+    case 'instructions':
+      collapseContentContainer =
+        !data || !data.length ? (
+          <p>No Instructions.</p>
+        ) : (
+          <OlCollapseContent>
+            <CollapseContent type={type} data={data} />
+          </OlCollapseContent>
+        );
+      break;
+  }
+
+  return (
+    <StyledRecipeInfoItem>
+      <details>
+        <summary>
+          <CollapseHeading heading={type} />
+        </summary>
+        {collapseContentContainer}
+      </details>
+    </StyledRecipeInfoItem>
+  );
+};

src/components/Accordion/CollapseContent.tsx

@@ -0,0 +1,44 @@
+import { CollapseContentProps } from './Accordion.types';
+import { StyledIngredient, StyledAccordionText } from './Accordion.styled';
+
+export const CollapseContent = ({ type, data }: CollapseContentProps): JSX.Element => {
+  switch (type) {
+    case 'ingredients':
+      return (
+        <>
+          {data.map((ingredient, index) => (
+            <StyledIngredient key={ingredient.name + index}>
+              <span>{ingredient.name}</span>
+              <span>{`${ingredient.amount.toFixed(2)} ${ingredient.unit}`}</span>
+            </StyledIngredient>
+          ))}
+        </>
+      );
+    case 'equipment':
+      return (
+        <>
+          {data.map((equipment, index) => (
+            <li key={equipment + index}>{equipment}</li>
+          ))}
+        </>
+      );
+    case 'summary':
+      return (
+        <>
+          {data.split('. ').map((text, index, texts) => (
+            <StyledAccordionText key={text + index}>{text + (index < texts.length - 1 ? '.' : '')}</StyledAccordionText>
+          ))}
+        </>
+      );
+    case 'instructions':
+      return (
+        <>
+          {data.map((instruction, index) => (
+            <li key={instruction + index}>
+              <StyledAccordionText>{instruction}</StyledAccordionText>
+            </li>
+          ))}
+        </>
+      );
+  }
+};

src/components/Accordion/CollapseHeading.tsx

@@ -0,0 +1,12 @@
+import { GoChevronDown } from 'react-icons/go';
+import { CollapseHeadingProps } from './Accordion.types';
+import { StyledCollapseHeading, StyledHeading } from './Accordion.styled';
+
+export const CollapseHeading = ({ heading }: CollapseHeadingProps): JSX.Element => {
+  return (
+    <StyledCollapseHeading>
+      <StyledHeading>{heading}</StyledHeading>
+      <GoChevronDown />
+    </StyledCollapseHeading>
+  );
+};

src/components/index.ts

@@ -17,3 +17,4 @@ export * from './ErrorBoundary/ErrorBoundary';
 export * from './Card/Card';
 export * from './RandomRecipe/RandomRecipe';
 export * from './HotRecipes/HotRecipes';
+export * from './Accordion/Accordion';