fix: 자주 묻는 질문 중 아코디언 메뉴 수정

1. 폰트 굵기 수정 2. 아이콘 정상 반영 진행
depromeet · Nov 25, 2024 · ac2f446 · ac2f446
1 parent 214b2b2
commit ac2f446
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 35 deletions.
diff --git a/public/images/16th/icon/common/arrow_b.svg b/public/images/16th/icon/common/arrow_b.svg
diff --git a/public/images/16th/icon/common/arrow_w.svg b/public/images/16th/icon/common/arrow_w.svg
diff --git a/src/components/FAQ/FAQ.tsx b/src/components/FAQ/FAQ.tsx
@@ -54,7 +54,6 @@ const layoutCss = (theme: Theme) => css`
   padding: 120px 0;
   display: flex;
   flex-direction: column;
-  gap: 28px;
   align-items: center;
   justify-content: center;
   background-color: ${theme.colors.lightGray};
@@ -66,13 +65,19 @@ const layoutCss = (theme: Theme) => css`
 
 const tabLayoutCss = css`
   display: flex;
+  margin: 28px 0 16px 0;
+
   > li:first-of-type {
     padding-left: 0px;
   }
 
   ${mediaQuery('tablet')} {
     justify-content: center;
   }
+
+  ${mediaQuery('mobile')} {
+    margin: 40px 0 16px 0;
+  }
 `;
 
 const tabWrapperCss = css`

diff --git a/src/components/FAQ/FAQItem.tsx b/src/components/FAQ/FAQItem.tsx
@@ -1,9 +1,7 @@
 import { css, Theme } from '@emotion/react';
 import { motion, Variants } from 'framer-motion';
 
-import { mediaQuery } from '~/styles/media';
-
-import { NarrowArrowIcon } from '../Icons';
+import { Icon } from '~/components/Icon/Icon';
 
 interface FAQItemProps {
   isOpen: boolean;
@@ -27,10 +25,10 @@ export function FAQItem({ isOpen, onClickOpenButton, question, answer }: FAQItem
           transition={{ duration: 0.3, ease: 'easeOut' }}
           css={theme => arrowContainerCss(theme, isOpen)}
         >
-          <NarrowArrowIcon
+          <Icon
+            icon={isOpen ? 'ic_arrow_white' : 'ic_arrow_black'}
             direction={isOpen ? 'up' : 'down'}
-            color={isOpen ? '' : '#FFFFFF'}
-            fill={isOpen ? '' : '#FFFFFF'}
+            size={24}
           />
         </motion.div>
       </motion.div>
@@ -71,21 +69,13 @@ const headerCss = (theme: Theme, isOpen: boolean) => css`
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 12px 30px;
+  padding: 16px 30px;
   border-radius: ${isOpen ? '12px 12px 0 0' : '12px'};
 
   > h4 {
     color: ${isOpen ? 'white' : 'black'};
-    text-align: center;
-    ${theme.typosV2.pretendard.regular16}
-  }
-
-  ${mediaQuery('mobile')} {
-    padding: 12px;
-
-    > h4 {
-      ${theme.typosV2.pretendard.regular14}
-    }
+    text-align: left;
+    ${theme.typosV2.pretendard.medium16}
   }
 `;
 
@@ -100,14 +90,8 @@ const bodyCss = (theme: Theme) => css`
   background-color: white;
   border-radius: 0 0 12px 12px;
   > p {
-    padding: 12px 30px;
+    padding: 16px 30px;
     color: black;
-    ${theme.typosV2.pretendard.regular16};
-  }
-  ${mediaQuery('mobile')} {
-    > p {
-      padding: 12px;
-      ${theme.typosV2.pretendard.regular14}
-    }
+    ${theme.typosV2.pretendard.medium16};
   }
 `;
diff --git a/src/components/Icon/Icon.tsx b/src/components/Icon/Icon.tsx
@@ -10,15 +10,24 @@ type Props = {
   color?: string;
   size?: string | number;
   onClick?: () => void;
+  direction?: 'up' | 'right' | 'down' | 'left';
 } & React.ButtonHTMLAttributes<HTMLButtonElement>;
 
 const DEFAULT_ICON_COLOR = '#000000';
 
+const DIRECTION_DEGREE = {
+  up: 180,
+  right: 270,
+  down: 0,
+  left: 90,
+} as const;
+
 export const Icon = memo(function Icon({
   icon,
   color = DEFAULT_ICON_COLOR,
   size,
   onClick,
+  direction = 'down',
   ...props
 }: Props) {
   const SVGIcon = icons[icon];
@@ -45,6 +54,7 @@ export const Icon = memo(function Icon({
           color: ${color};
           width: ${width};
           max-height: fit-content;
+          transform: rotate(${DIRECTION_DEGREE[direction]}deg);
         `}
       />
     </button>

diff --git a/src/styles/typo.ts b/src/styles/typo.ts
@@ -264,7 +264,7 @@ export const typosV2 = {
       font-size: ${pxToRem(16)};
       font-style: normal;
       font-weight: 500;
-      line-height: ${pxToRem(19)};
+      line-height: ${pxToRem(24)};
       letter-spacing: -0.05em;
     `,
     medium15: css`