depromeet · kimyouknow · Sep 10, 2023 · Sep 9, 2023 · Sep 9, 2023 · Sep 9, 2023
diff --git a/.storybook/preview.ts b/.storybook/preview.ts
@@ -0,0 +1,36 @@
+const path = require('path');
+
+import type { Preview } from '@storybook/react';
+import React from 'react';
+import GlobalStyle from '../src/styles/globalStyle';
+import { ThemeProvider } from '@emotion/react';
+import { theme } from '../src/styles/theme';
+
+const preview: Preview = {
+  decorators: [
+    Story => (
+      <ThemeProvider theme={theme}>
+        <GlobalStyle />
+        <Story />
+      </ThemeProvider>
+    ),
+  ],
+  parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+    webpackFinal: async config => {
+      config.resolve.alias = {
+        ...config.resolve.alias,
+        '~': path.resolve(__dirname, '../src/'),
+      };
+      return config;
+    },
+  },
+};
+
+export default preview;
@@ -0,0 +1,9 @@
+import '@emotion/react';
+
+import { theme } from '~/styles/theme';
+
+declare module '@emotion/react' {
+  type CustomTheme = typeof theme;
+
+  export interface Theme extends CustomTheme {}
+}
@@ -1,17 +1,29 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import { Meta } from '@storybook/react';
 
 import { FAQ } from './index';
 
 const meta: Meta<typeof FAQ> = {
   title: 'components/FAQ',
-  component: FAQ,
-  args: {},
 };
 
 export default meta;
 
-type Story = StoryObj<typeof FAQ>;
+export const Close = {
+  render: () => (
+    <FAQ
+      isOpen={false}
+      title="직장인도 참여 가능한가요?"
+      description="디프만 모집은 직업, 연령 등 자격 요건에 제한을 두지 않습니다. 그러나 팀원들과 작업 속도, 일정을 맞추려면 더 많은 개인 시간을 할애할 필요가 있습니다. 따라서 회사 업무와 프로젝트를 병행할 수 있을지 충분히 고려하여 지원부탁드립니다."
+    />
+  ),
+};
 
-export const Primary: Story = {
-  render: () => <FAQ />,
+export const Open = {
+  render: () => (
+    <FAQ
+      isOpen={true}
+      title="직장인도 참여 가능한가요?"
+      description="디프만 모집은 직업, 연령 등 자격 요건에 제한을 두지 않습니다. 그러나 팀원들과 작업 속도, 일정을 맞추려면 더 많은 개인 시간을 할애할 필요가 있습니다. 따라서 회사 업무와 프로젝트를 병행할 수 있을지 충분히 고려하여 지원부탁드립니다."
+    />
+  ),
 };
@@ -1,3 +1,29 @@
-export function FAQ() {
-  return <div>FAQ</div>;
+import { css, Theme } from '@emotion/react';
+
+import { ArrowIcon } from '~/components/Icons';
+
+interface FAQProps {
+  isOpen: boolean;
+  title: string;
+  description: string;
 }
+
+export function FAQ({ isOpen, title, description }: FAQProps) {
+  return (
+    <div>
+      <div>
+        <h3 css={titleCss}>{title}</h3>
+        <ArrowIcon direction={isOpen ? 'up' : 'down'} />
+      </div>
+      <div>
+        <p>{description}</p>
+      </div>
+    </div>
+  );
+}
+
+const titleCss = (theme: Theme) => css`
+  color: ${theme.colors.black800};
+  text-align: center;
+  ${theme.typos.pretendard.subTitle2}
+`;
@@ -1,11 +1,13 @@
 import type { AppContext, AppProps } from 'next/app';
 import Head from 'next/head';
 import { useRouter } from 'next/router';
+import { ThemeProvider } from '@emotion/react';
 import { domMax, LazyMotion } from 'framer-motion';
 
 import { BASE_URL } from '~/constant/common';
 import { useRecordPageView } from '~/hooks/useRecordPageView';
 import GlobalStyle from '~/styles/globalStyle';
+import { theme } from '~/styles/theme';
 
 interface InitialProps {
   userAgent: string;
@@ -18,15 +20,16 @@ export default function App({ Component, pageProps }: AppProps & InitialProps) {
   useRecordPageView();
 
   return (
-    <LazyMotion features={domMax}>
-      <Head>
-        <link rel="canonical" href={currentUrl} />
-        <meta property="og:url" content={currentUrl} />
-      </Head>
-
-      <GlobalStyle />
-      <Component {...pageProps} />
-    </LazyMotion>
+    <ThemeProvider theme={theme}>
+      <LazyMotion features={domMax}>
+        <Head>
+          <link rel="canonical" href={currentUrl} />
+          <meta property="og:url" content={currentUrl} />
+        </Head>
+        <GlobalStyle />
+        <Component {...pageProps} />
+      </LazyMotion>
+    </ThemeProvider>
   );
 }
 App.getInitialProps = async ({ ctx }: AppContext) => {

@@ -11,5 +11,5 @@ export const colors = {
   blue300: '#0973EE',
   yellow: '#E3FF3A',
   yellow400: '#C6E413',
-  yellow300: '##A1BB00',
+  yellow300: '#A1BB00',
 } as const;
@@ -0,0 +1,7 @@
+import { colors } from './colors';
+import { typos } from './typo';
+
+export const theme = {
+  colors,
+  typos,
+} as const;
@@ -0,0 +1,64 @@
+import { css } from '@emotion/react';
+
+export const typos = {
+  pretendard: {
+    subTitle1: css`
+      /* Pretendard/Subtitle Bold */
+      font-size: 32px;
+      font-style: normal;
+      font-weight: 700;
+      line-height: 150%; /* 48px */
+      letter-spacing: -0.32px;
+    `,
+    subTitle2: css`
+      /* Pretendard/Subtitle 2 Bold */
+      font-size: 20px;
+      font-style: normal;
+      font-weight: 500;
+      line-height: 150%; /* 30px */
+      letter-spacing: -0.2px;
+    `,
+    body1: css`
+      /* Pretendard/Body 1 Medium */
+      font-size: 18px;
+      font-style: normal;
+      font-weight: 500;
+      line-height: 25.2px; /* 140% */
+      letter-spacing: -0.18px;
+    `,
+  },
+  decimal: {
+    title1: css`
+      /* Decimal/Title 1 */
+      font-size: 60px;
+      font-style: normal;
+      font-weight: 600;
+      line-height: 135%; /* 81px */
+      text-transform: capitalize;
+    `,
+    title2: css`
+      /* Decimal/Title 2 */
+      font-size: 40px;
+      font-style: normal;
+      font-weight: 600;
+      line-height: 135%; /* 54px */
+      text-transform: capitalize;
+    `,
+    subTitle1: css`
+      /* Decimal/Subtitle 1 */
+      font-size: 28px;
+      font-style: normal;
+      font-weight: 600;
+      line-height: 30px; /* 107.143% */
+      letter-spacing: -0.28px;
+    `,
+    body1: css`
+      /* Decimal/Body 1 */
+      font-size: 18px;
+      font-style: normal;
+      font-weight: 500;
+      line-height: 25.2px; /* 140% */
+      letter-spacing: -0.18px;
+    `,
+  },
+};