Merge branch 'develop-frontend' into feature/#671

woowacourse-teams · Oct 23, 2024 · ff79003 · ff79003
2 parents 8788065 + 13206e2
commit ff79003
Show file tree

Hide file tree

Showing 53 changed files with 693 additions and 224 deletions.
diff --git a/frontend/public/firebase-messaging-sw.js b/frontend/public/firebase-messaging-sw.js
@@ -20,7 +20,7 @@ self.addEventListener('notificationclick', function (event) {
   // console.log('[firebase-messaging-sw.js] 알림이 클릭되었습니다.');
 
   // 알림 데이터를 가져오기
-  const link = event.notification.data.FCM_MSG.notification.click_action;
+  const link = event.notification.data.FCM_MSG.data.link;
 
   event.notification.close(); // 알림 닫기
 

diff --git a/frontend/src/common/assets/fonts/PartialSansKR/PartialSansKR-Regular.otf b/frontend/src/common/assets/fonts/PartialSansKR/PartialSansKR-Regular.otf
diff --git a/frontend/src/common/assets/fonts/PartialSansKR/PartialSansKR-Regular.woff2 b/frontend/src/common/assets/fonts/PartialSansKR/PartialSansKR-Regular.woff2
diff --git a/frontend/src/common/font.style.ts b/frontend/src/common/font.style.ts
@@ -8,6 +8,7 @@ import pretendardMediumWoff2 from './assets/fonts/woff2-subset/Pretendard-Medium
 import pretendardRegularWoff2 from './assets/fonts/woff2-subset/Pretendard-Regular.subset.woff2';
 import pretendardSemiboldWoff2 from './assets/fonts/woff2-subset/Pretendard-SemiBold.subset.woff2';
 import pretendardThinWoff2 from './assets/fonts/woff2-subset/Pretendard-Thin.subset.woff2';
+import partialSansKRRegular from './assets/fonts/PartialSansKR/PartialSansKR-Regular.woff2';
 
 const fonts = css`
   @font-face {
@@ -75,6 +76,13 @@ const fonts = css`
     font-display: swap;
     src: url(${pretendardThinWoff2}) format('woff2');
   }
+
+  @font-face {
+    font-family: PartialSansKR;
+    font-weight: 400;
+    font-display: swap;
+    src: url(${partialSansKRRegular}) format('woff2');
+  }
 `;
 
 export default fonts;
diff --git a/frontend/src/common/theme/theme.type.ts b/frontend/src/common/theme/theme.type.ts
@@ -40,6 +40,7 @@ export interface Typography {
   small: SerializedStyles;
   Tiny: SerializedStyles;
   tag: SerializedStyles;
+  partialSansKR: SerializedStyles;
 }
 
 export interface ColoredTypography {
@@ -66,6 +67,7 @@ export interface ColoredTypography {
   small: (fontColor: string | SerializedStyles) => SerializedStyles;
   Tiny: (fontColor: string | SerializedStyles) => SerializedStyles;
   tag: (fontColor: string | SerializedStyles) => SerializedStyles;
+  partialSansKR: (fontColor: string | SerializedStyles) => SerializedStyles;
 }
 export interface Layout {
   default: SerializedStyles;

diff --git a/frontend/src/common/theme/typography.ts b/frontend/src/common/theme/typography.ts
@@ -5,173 +5,179 @@ const typography: Typography = {
   h1: css`
     font-family: Pretendard;
     font-size: 4.8rem;
-    font-style: normal;
     font-weight: 700;
+    font-style: normal;
     line-height: 5.8rem;
   `,
   h2: css`
     font-family: Pretendard;
     font-size: 4rem;
-    font-style: normal;
     font-weight: 700;
+    font-style: normal;
     line-height: 4.8rem;
   `,
   h3: css`
     font-family: Pretendard;
     font-size: 3.2rem;
-    font-style: normal;
     font-weight: 700;
+    font-style: normal;
     line-height: 3.8rem;
   `,
   h4: css`
     font-family: Pretendard;
     font-size: 2.8rem;
-    font-style: normal;
     font-weight: 700;
+    font-style: normal;
     line-height: 3.4rem;
   `,
   h5: css`
     font-family: Pretendard;
     font-size: 2.4rem;
-    font-style: normal;
     font-weight: 700;
+    font-style: normal;
     line-height: 2.8rem;
   `,
 
   s1: css`
     font-family: Pretendard;
     font-size: 1.8rem;
-    font-style: normal;
     font-weight: 700;
+    font-style: normal;
     line-height: 2.8rem;
   `,
   s2: css`
     font-family: Pretendard;
     font-size: 1.6rem;
-    font-style: normal;
     font-weight: 700;
+    font-style: normal;
     line-height: 2.4rem;
   `,
 
   b1: css`
     font-family: Pretendard;
     font-size: 1.6rem;
-    font-style: normal;
     font-weight: 500;
+    font-style: normal;
     line-height: 2.4rem;
   `,
   b2: css`
     font-family: Pretendard;
     font-size: 1.6rem;
-    font-style: normal;
     font-weight: 400;
+    font-style: normal;
     line-height: 2.4rem;
   `,
   b3: css`
     font-family: Pretendard;
     font-size: 1.4rem;
-    font-style: normal;
     font-weight: 500;
+    font-style: normal;
     line-height: 2rem;
   `,
   b4: css`
     font-family: Pretendard;
     font-size: 1.4rem;
-    font-style: normal;
     font-weight: 400;
+    font-style: normal;
     line-height: 2rem;
   `,
 
   c1: css`
     font-family: Pretendard;
     font-size: 1.2rem;
-    font-style: normal;
     font-weight: 700;
+    font-style: normal;
     line-height: 1.6rem;
   `,
   c2: css`
     font-family: Pretendard;
     font-size: 1.2rem;
-    font-style: normal;
     font-weight: 400;
+    font-style: normal;
     line-height: 1.6rem;
   `,
   c3: css`
     font-family: Pretendard;
     font-size: 1rem;
-    font-style: normal;
     font-weight: 400;
+    font-style: normal;
     line-height: 1.4rem;
   `,
 
   label: css`
     font-family: Pretendard;
     font-size: 1.2rem;
-    font-style: normal;
     font-weight: 700;
+    font-style: normal;
     line-height: 1.6rem;
     text-transform: uppercase;
   `,
 
   ButtonFont: css`
     font-family: Inter;
     font-size: 2.4rem;
-    font-style: normal;
     font-weight: 600;
+    font-style: normal;
     line-height: 2.8rem;
   `,
 
   Typeface: css`
     font-family: Inter;
     font-size: 1.6rem;
-    font-style: normal;
     font-weight: 400;
+    font-style: normal;
     line-height: 2.4rem;
   `,
 
   Giant: css`
     font-family: Pretendard;
     font-size: 1.8rem;
-    font-style: normal;
     font-weight: 700;
+    font-style: normal;
     line-height: 2.4rem;
   `,
 
   Large: css`
     font-family: Pretendard;
     font-size: 1.6rem;
-    font-style: normal;
     font-weight: 700;
+    font-style: normal;
     line-height: 2rem;
   `,
   Medium: css`
     font-family: Pretendard;
     font-size: 1.4rem;
-    font-style: normal;
     font-weight: 700;
+    font-style: normal;
     line-height: 1.6rem;
   `,
   small: css`
     font-family: Pretendard;
     font-size: 1.2rem;
-    font-style: normal;
     font-weight: 700;
+    font-style: normal;
     line-height: 1.6rem;
   `,
   Tiny: css`
     font-family: Pretendard;
     font-size: 1rem;
-    font-style: normal;
     font-weight: 800;
+    font-style: normal;
     line-height: 1.2rem;
   `,
   tag: css`
     font-family: Pretendard;
     font-size: 1.2rem;
-    font-style: normal;
     font-weight: 600;
+    font-style: normal;
     line-height: 130%;
   `,
+  partialSansKR: css`
+    font-family: PartialSansKR;
+    font-size: 2rem;
+    font-weight: 400;
+    font-style: normal;
+  `,
 };
 
 export default typography;
diff --git a/frontend/src/components/Button/BackArrowButton/BackArrowButton.tsx b/frontend/src/components/Button/BackArrowButton/BackArrowButton.tsx
@@ -9,7 +9,7 @@ export default function BackArrowButton(props: BackArrowButtonProps) {
   const { ...rest } = props;
 
   return (
-    <button {...rest} css={S.button}>
+    <button {...rest} css={S.button} aria-label="뒤로가기">
       <BackArrowIcon />
     </button>
   );

diff --git a/frontend/src/components/Funnel/FunnelErrorMessage/FunnelErrorMessage.style.ts b/frontend/src/components/Funnel/FunnelErrorMessage/FunnelErrorMessage.style.ts
@@ -0,0 +1,7 @@
+import { css, Theme } from '@emotion/react';
+
+export const errorMessage = ({ theme }: { theme: Theme }) => css`
+  font-size: 1.4rem;
+  color: ${theme.colorPalette.red[500]};
+  text-align: center;
+`;
diff --git a/frontend/src/components/Funnel/FunnelErrorMessage/FunnelErrorMessage.tsx b/frontend/src/components/Funnel/FunnelErrorMessage/FunnelErrorMessage.tsx
@@ -0,0 +1,18 @@
+import { useTheme } from '@emotion/react';
+import * as S from './FunnelErrorMessage.style';
+
+interface FunnelErrorMessageProps {
+  isError: boolean;
+  errorMessage: string;
+}
+
+export default function FunnelErrorMessage(props: FunnelErrorMessageProps) {
+  const { isError, errorMessage } = props;
+
+  const theme = useTheme();
+
+  if (!isError) {
+    return null;
+  }
+  return <div css={S.errorMessage({ theme })}>{errorMessage}</div>;
+}
diff --git a/frontend/src/components/Funnel/FunnelInputErrorMessage/FunnelInputErrorMessage.tsx b/frontend/src/components/Funnel/FunnelInputErrorMessage/FunnelInputErrorMessage.tsx
@@ -0,0 +1,19 @@
+import { useTheme } from '@emotion/react';
+import { HTMLAttributes, PropsWithChildren } from 'react';
+
+interface FunnelInputErrorMessageProps
+  extends HTMLAttributes<HTMLSpanElement> {}
+
+export default function FunnelInputErrorMessage(
+  props: PropsWithChildren<FunnelInputErrorMessageProps>,
+) {
+  const { children, ...rest } = props;
+
+  const theme = useTheme();
+
+  return (
+    <span css={[theme.typography.b3]} {...rest}>
+      {children}
+    </span>
+  );
+}
diff --git a/frontend/src/components/Funnel/FunnelQuestion/FunnelQuestion.tsx b/frontend/src/components/Funnel/FunnelQuestion/FunnelQuestion.tsx
@@ -1,11 +1,13 @@
-import { PropsWithChildren } from 'react';
+import { LabelHTMLAttributes, PropsWithChildren } from 'react';
 import FunnelQuestionHighlight from './FunnelQuestionHighlight/FunnelQuestionHighlight';
 import FunnelTextQuestionText from './FunnelQuestionText/FunnelQuestionText';
 
-function FunnelQuestion(props: PropsWithChildren) {
-  const { children } = props;
+interface FunnelQuestionProps extends LabelHTMLAttributes<HTMLLabelElement> {}
 
-  return <h5>{children}</h5>;
+function FunnelQuestion(props: PropsWithChildren<FunnelQuestionProps>) {
+  const { children, ...rest } = props;
+
+  return <label {...rest}>{children}</label>;
 }
 
 FunnelQuestion.Text = FunnelTextQuestionText;

diff --git a/frontend/src/components/HighlightSpan/HighlightSpan.tsx b/frontend/src/components/HighlightSpan/HighlightSpan.tsx
@@ -8,6 +8,7 @@ interface HighlightSpanProps extends PropsWithChildren {
   normalColor?: SerializedStyles | string;
   font?: SerializedStyles | string;
   isCenterAlign?: boolean;
+  ariaLabel?: string;
 }
 
 interface HighlightSpanContext {
@@ -24,14 +25,18 @@ function HighlightSpan(props: HighlightSpanProps) {
     normalColor = theme.colorPalette.black[100],
     font = theme.typography.h5,
     isCenterAlign = false,
+    ariaLabel,
     children,
   } = props;
 
   return (
     <HighlightSpanContext.Provider
       value={{ highlightColor, normalColor, font }}
     >
-      <span css={S.text({ color: normalColor, font, isCenterAlign })}>
+      <span
+        aria-label={ariaLabel}
+        css={S.text({ color: normalColor, font, isCenterAlign })}
+      >
         {children}
       </span>
     </HighlightSpanContext.Provider>

diff --git a/frontend/src/components/Icons/PeopleIcon.tsx b/frontend/src/components/Icons/PeopleIcon.tsx
@@ -0,0 +1,16 @@
+export default function PeopleIcon() {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M10.5 8C9.85746 8 9.23621 7.71312 8.74996 7.1925C8.27715 6.68469 7.9884 6.0075 7.93746 5.28625C7.88309 4.51688 8.11778 3.80937 8.59809 3.29375C9.0784 2.77813 9.74996 2.5 10.5 2.5C11.2447 2.5 11.9181 2.78312 12.3968 3.2975C12.8803 3.81687 13.1156 4.52312 13.0612 5.28594C13.009 6.00812 12.7206 6.685 12.2487 7.19219C11.7637 7.71312 11.1428 8 10.5 8ZM14.6197 13.5H6.38059C6.24812 13.5007 6.11726 13.471 5.99807 13.4132C5.87888 13.3554 5.77455 13.271 5.69309 13.1666C5.60668 13.0533 5.54701 12.922 5.51855 12.7824C5.49008 12.6429 5.49356 12.4987 5.52871 12.3606C5.79184 11.3041 6.44371 10.4278 7.41371 9.82687C8.27465 9.29375 9.37059 9 10.5 9C11.6515 9 12.7187 9.28125 13.5847 9.81406C14.5568 10.4119 15.2097 11.2931 15.4715 12.3625C15.5063 12.5006 15.5093 12.6448 15.4806 12.7843C15.4518 12.9238 15.3919 13.055 15.3053 13.1681C15.2239 13.2721 15.1198 13.3561 15.001 13.4136C14.8821 13.4711 14.7517 13.5007 14.6197 13.5ZM4.59371 8.125C3.49403 8.125 2.52715 7.1025 2.43746 5.84594C2.39309 5.20219 2.59371 4.60687 2.99996 4.17031C3.40184 3.73812 3.96871 3.5 4.59371 3.5C5.21871 3.5 5.78121 3.73938 6.18528 4.17406C6.59465 4.61406 6.79465 5.20812 6.74778 5.84656C6.65809 7.10281 5.69153 8.125 4.59371 8.125ZM6.64559 9.10781C6.0959 8.83906 5.38246 8.70469 4.59403 8.70469C3.6734 8.70469 2.77934 8.94469 2.07621 9.38031C1.27903 9.875 0.742777 10.5953 0.526214 11.465C0.494522 11.5901 0.491525 11.7207 0.517446 11.8471C0.543367 11.9736 0.597537 12.0925 0.675902 12.195C0.750261 12.2905 0.845522 12.3676 0.95436 12.4205C1.0632 12.4733 1.18271 12.5005 1.30371 12.5H4.77246C4.83101 12.5 4.8877 12.4794 4.93264 12.4419C4.97759 12.4044 5.00794 12.3523 5.0184 12.2947C5.02184 12.275 5.02621 12.2553 5.03121 12.2359C5.29621 11.1716 5.91715 10.2722 6.83465 9.61656C6.8684 9.59224 6.89554 9.55988 6.91362 9.52241C6.9317 9.48495 6.94014 9.44356 6.93819 9.40201C6.93623 9.36046 6.92394 9.32005 6.90242 9.28445C6.88091 9.24884 6.85084 9.21917 6.81496 9.19812C6.7659 9.16937 6.70965 9.13906 6.64559 9.10781Z"
+        fill="#9EA2AE"
+      />
+    </svg>
+  );
+}