Card, RandomRecipe, HotRecipe 컴포넌트 마이그레이션, Skeleton 카드 리팩토링, Next.js Storybook 설정

.storybook/main.js

@@ -3,11 +3,13 @@ const setRootPath = (_path) => path.resolve(process.cwd(), _path);
 
 module.exports = {
   stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  staticDirs: ['../public'],
   addons: [
     '@storybook/addon-links',
     '@storybook/addon-essentials',
     '@storybook/addon-interactions',
     '@storybook/addon-a11y',
+    'storybook-addon-next-router',
   ],
   framework: '@storybook/react',
 

.storybook/preview.js

@@ -1,19 +1,27 @@
 import ko from 'axe-core/locales/ko.json';
 import React from 'react';
+import { RouterContext } from 'next/dist/shared/lib/router-context';
 import { GlobalStyle } from 'styles/GlobalStyle';
 import { ThemeProvider } from '@emotion/react';
 import { theme } from 'theme/theme';
+import * as NextImage from 'next/image';
+import { StoreProvider } from 'store';
 
 export const decorators = [
   (Story) => (
     <ThemeProvider theme={theme}>
-      <GlobalStyle />
-      <Story />
+      <StoreProvider>
+        <GlobalStyle />
+        <Story />
+      </StoreProvider>
     </ThemeProvider>
   ),
 ];
 
 export const parameters = {
+  nextRouter: {
+    Provider: RouterContext.Provider,
+  },
   a11y: {
     config: { locale: ko },
   },
@@ -25,3 +33,17 @@ export const parameters = {
     },
   },
 };
+
+const OriginalNextImage = NextImage.default;
+
+Object.defineProperty(NextImage, 'default', {
+  configurable: true,
+  value: (props) => (
+    <OriginalNextImage
+      {...props}
+      unoptimized
+      // this is new!
+      // blurDataURL="/images/no-image.jpg"
+    />
+  ),
+});

package.json

@@ -59,6 +59,7 @@
     "firebase-tools": "^10.3.0",
     "prettier": "^2.5.1",
     "redux-logger": "^3.0.6",
+    "storybook-addon-next-router": "^3.1.1",
     "typescript": "4.6.2"
   }
 }

src/components/Card/Card.stories.tsx

@@ -0,0 +1,26 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { Card } from './Card';
+
+export default {
+  title: 'Card',
+  component: Card,
+  args: {
+    id: 1,
+    type: 'wide',
+    background: 'white',
+    hasSummary: true,
+    headingPosition: 'bottomLeft',
+    title: 'hi',
+  },
+  parameters: {
+    nextRouter: {
+      query: {
+        id: 1,
+      },
+    },
+  },
+} as ComponentMeta<typeof Card>;
+
+const Template: ComponentStory<typeof Card> = (args) => <Card {...args} />;
+
+export const Default = Template.bind({});

src/components/Card/Card.styled.tsx

@@ -0,0 +1,161 @@
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+import { media, pxToRem } from 'utils';
+import { CardContainerProps, CardFigcaptionProps, CardFigureImgProps } from './Card.types';
+
+const inlineBlock = css`
+  text-align: center;
+  width: 100%;
+  ${media.desktop} {
+    display: inline-block;
+  }
+`;
+
+const typeCss = {
+  wide: css`
+    width: 100%;
+    height: 50vw;
+    object-fit: cover;
+
+    ${media.desktop} {
+      width: 100%;
+      height: 250px;
+    }
+  `,
+  square: css`
+    width: 100%;
+
+    ${media.mobile} {
+      height: 50vw;
+    }
+    ${media.desktop} {
+      height: rem(200px);
+      @media (max-width: 1547px) {
+        height: 20vw;
+      }
+
+      @media (max-width: 1100px) {
+        height: 25vw;
+      }
+    }
+    object-fit: cover;
+  `,
+
+  smallSquare: css`
+    width: 100%;
+    aspect-ratio: 1 / 1;
+    object-fit: cover;
+    ${media.mobile} {
+      aspect-ratio: 16 / 9;
+    }
+
+    @media (max-width: 1056px) {
+      aspect-ratio: 16 / 9;
+    }
+  `,
+};
+
+const headingPositionCss = {
+  bottomLeft: css`
+    font-size: ${pxToRem(20)};
+    left: 0;
+  `,
+  bottomCenter: css`
+    font-size: ${pxToRem(20)};
+    text-align: center;
+  `,
+  topLeft: css`
+    font-size: ${pxToRem(24)};
+    color: orange;
+    order: -1;
+  `,
+};
+
+export const CardLink = styled.a`
+  width: 100%;
+  border: none;
+  background-color: transparent;
+  text-align: left;
+  ${media.mobile} {
+    width: 100%;
+  }
+`;
+
+export const CardContainer = styled.div<CardContainerProps>`
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  padding: ${pxToRem(16)};
+  position: relative;
+  cursor: pointer;
+
+  background: ${({ $background }) => ($background === 'white' ? 'white' : 'none')};
+  box-shadow: ${({ $background }) => $background === 'white' && '0px 4px 4px rgba(0, 0, 0, 0.25);'};
+
+  ${({ $type }) => $type === 'square' && inlineBlock}
+`;
+
+export const CardFigureImgContainer = styled.div<CardFigureImgProps>`
+  ${({ $type }) => typeCss[$type]}
+`;
+
+export const CardFigcaption = styled.figcaption<CardFigcaptionProps>`
+  font-size: ${pxToRem(18)};
+  font-weight: bold;
+  padding: ${pxToRem(16)} 0;
+  width: 100%;
+
+  ${({ $headingPosition }) => headingPositionCss[$headingPosition]}
+`;
+
+export const CardSummary = styled.div`
+  line-height: ${pxToRem(24)};
+  ${media.desktop} {
+    display: -webkit-box;
+    word-wrap: break-word;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    &:after {
+      content: '';
+      color: black;
+      position: absolute;
+      display: block;
+      width: 100%;
+      height: 30%;
+      bottom: 0;
+      left: 0;
+      background: linear-gradient(to top, #fff 50%, transparent);
+    }
+  }
+  ${media.mobile} {
+    display: -webkit-box;
+    -webkit-line-clamp: 1;
+    word-wrap: break-word;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+`;
+
+export const CardSummaryText = styled.p`
+  margin-top: 0;
+  margin-bottom: ${pxToRem(8)};
+`;
+
+export const CardButton = styled.button`
+  ${media.mobile} {
+    display: none;
+  }
+
+  padding: ${pxToRem(8)} 0;
+  font-size: ${pxToRem(24)};
+  z-index: 1;
+  margin: 0;
+
+  display: flex;
+  gap: 10px;
+  border: none;
+  background: none;
+  justify-content: center;
+`;

src/components/Card/Card.tsx

@@ -0,0 +1,58 @@
+import Image from 'next/image';
+import Link from 'next/link';
+import { useRouter } from 'next/router';
+import { useState } from 'react';
+import { HiCursorClick } from 'react-icons/hi';
+import { excludeTags } from 'utils';
+import {
+  CardButton,
+  CardContainer,
+  CardFigcaption,
+  CardFigureImgContainer,
+  CardLink,
+  CardSummary,
+  CardSummaryText,
+} from './Card.styled';
+import { CardProps } from './Card.types';
+
+export const Card = ({
+  id = 0,
+  type,
+  background,
+  hasSummary,
+  headingPosition,
+  // image,
+  imgSrc = '/images/no-image.jpg',
+  title,
+  summary = '',
+}: CardProps): JSX.Element => {
+  return (
+    <Link href={`/recipe/${id}`}>
+      <CardLink>
+        <CardContainer $type={type} $background={background}>
+          <figure>
+            <CardFigureImgContainer $type={type}>
+              <Image src={imgSrc} title={title} layout="fill" priority />
+            </CardFigureImgContainer>
+            <CardFigcaption $headingPosition={headingPosition}>{title}</CardFigcaption>
+          </figure>
+          {hasSummary && (
+            <>
+              <CardSummary>
+                {excludeTags(summary)
+                  .split('. ')
+                  .map((text, index, texts) => (
+                    <CardSummaryText key={text + index}>{text + (index < texts.length - 1 ? '.' : '')}</CardSummaryText>
+                  ))}
+              </CardSummary>
+              <CardButton>
+                Click for more
+                <HiCursorClick />
+              </CardButton>
+            </>
+          )}
+        </CardContainer>
+      </CardLink>
+    </Link>
+  );
+};

src/components/Card/Card.types.ts

@@ -0,0 +1,27 @@
+type CardType = 'wide' | 'square' | 'smallSquare';
+type CardBackgroundType = 'white' | 'none';
+type CardHeadingPositionType = 'bottomLeft' | 'bottomCenter' | 'topLeft';
+
+export interface CardProps {
+  id: string | number;
+  type: CardType;
+  background: CardBackgroundType;
+  hasSummary: boolean;
+  headingPosition: CardHeadingPositionType;
+  imgSrc: string;
+  title: string;
+  summary?: string;
+}
+
+export interface CardContainerProps {
+  $type: CardType;
+  $background: CardBackgroundType;
+}
+
+export interface CardFigureImgProps {
+  $type: CardType;
+}
+
+export interface CardFigcaptionProps {
+  $headingPosition: CardHeadingPositionType;
+}

src/components/CookingInfo/CookingInfo.tsx

@@ -9,7 +9,7 @@ export const CookingInfo = ({ time = 0, count = 0 }: CookingInfoProps): JSX.Elem
           <StyledTimer title="time" />
           Cooking Time
         </dt>
-        <StyledDD>{time} miuntes</StyledDD>
+        <StyledDD>{time} minutes</StyledDD>
       </StyledDiv>
       <StyledDiv>
         <dt>

src/components/HotRecipes/HotRecipes.stories.tsx

@@ -0,0 +1,11 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { HotRecipes } from './HotRecipes';
+
+export default {
+  title: 'HotRecipes',
+  component: HotRecipes,
+} as ComponentMeta<typeof HotRecipes>;
+
+const Template: ComponentStory<typeof HotRecipes> = () => <HotRecipes />;
+
+export const Default = Template.bind({});