feat: 서브 타이틀 반영 (#212)

* feat: 질문 서브타이틀 * feat: 타이틀 대응 * fix: modal dimmed
depromeet · Sep 13, 2024 · f0cf266 · f0cf266
1 parent 8fe0910
commit f0cf266
Show file tree

Hide file tree

Showing 7 changed files with 23 additions and 21 deletions.
diff --git a/packages/web-domains/src/answer/common/apis/schema/Question.schema.ts b/packages/web-domains/src/answer/common/apis/schema/Question.schema.ts
@@ -4,6 +4,11 @@ export type QuestionType = {
   meetingQuestionId: number;
   questionType: 'MULTIPLE_DESCRIPTIVE_CHOICE' | 'MULTIPLE_SHORT_CHOICE' | 'SINGLE_CHOICE';
   content: {
+    questionTitle?: {
+      subTitle: string;
+      mainTitle: string;
+      fullTitle: string;
+    };
     questionId: number;
     questionImageFileUrl: string;
     title: string;
@@ -12,19 +17,3 @@ export type QuestionType = {
 };
 
 export type QuestionResponseType = QuestionType | undefined;
-
-// {
-//   "meetingQuestionId": 0,
-//   "questionType": "SINGLE_CHOICE",
-//   "content": {
-//     "questionId": 1,
-//     "questionImageFileUrl": "https://example.com",
-//     "title": "갖고 싶은 초능력은?",
-//     "answers": [
-//       {
-//         "answerId": 1,
-//         "content": "분신술"
-//       }
-//     ]
-//   }
-// }
diff --git a/packages/web-domains/src/answer/features/answer-question/components/AnswerQuestion.tsx b/packages/web-domains/src/answer/features/answer-question/components/AnswerQuestion.tsx
@@ -3,11 +3,12 @@ import { colors } from '@sambad/sds/theme';
 import { ReactNode } from 'react';
 
 interface AnswerQuestionProps {
+  qustionSubTitle: string;
   questionTitle: string;
   answers: ReactNode;
 }
 
-export const AnswerQuestion = ({ questionTitle, answers }: AnswerQuestionProps) => {
+export const AnswerQuestion = ({ qustionSubTitle, questionTitle, answers }: AnswerQuestionProps) => {
   return (
     <>
       <div css={{ padding: '20px' }}>
@@ -20,7 +21,7 @@ export const AnswerQuestion = ({ questionTitle, answers }: AnswerQuestionProps)
           css={{ fontWeight: `${fontWeightVariants.regular} !important` }}
           color={colors.black}
         >
-          우리 모임원들은
+          {qustionSubTitle}
         </Txt>
         <Txt as="p" typography="heading1" color={colors.black}>
           {questionTitle}

diff --git a/packages/web-domains/src/answer/features/answer-question/components/BalanceQuestion.tsx b/packages/web-domains/src/answer/features/answer-question/components/BalanceQuestion.tsx
@@ -67,6 +67,7 @@ const buttonBaseStyle = css({
 
 const buttonStyles: Record<'selected' | 'default', Interpolation<Theme>> = {
   selected: {
+    width: '100%',
     borderRadius: '24px',
     height: '90px',
     backgroundColor: colors.primary500,
@@ -75,6 +76,7 @@ const buttonStyles: Record<'selected' | 'default', Interpolation<Theme>> = {
     color: colors.white,
   },
   default: {
+    width: '100%',
     borderRadius: '24px',
     height: '90px',
     backgroundColor: colors.grey400,

diff --git a/...ains/src/answer/features/answer-question/components/MultipleDescriptiveAnswerQuestion.tsx b/...ains/src/answer/features/answer-question/components/MultipleDescriptiveAnswerQuestion.tsx
@@ -13,13 +13,15 @@ interface MultipleDescriptiveAnswerQuestionProps {
 
 const buttonStyles: Record<'selected' | 'default', Attributes['css']> = {
   selected: {
+    width: '100%',
     border: 'none',
     borderRadius: borderRadiusVariants.large,
     height: '64px',
     backgroundColor: colors.primary500,
     color: colors.white,
   },
   default: {
+    width: '100%',
     border: 'none',
     borderRadius: borderRadiusVariants.large,
     height: '64px',

diff --git a/...eb-domains/src/answer/features/answer-question/components/MultipleShortAnswerQuestion.tsx b/...eb-domains/src/answer/features/answer-question/components/MultipleShortAnswerQuestion.tsx
@@ -14,12 +14,14 @@ interface MultipleShortAnswerQuestionProps {
 
 const buttonStyles: Record<'selected' | 'default', Attributes['css']> = {
   selected: {
+    width: '100%',
     border: 'none',
     borderRadius: borderRadiusVariants.large,
     height: '64px',
     backgroundColor: colors.primary500,
   },
   default: {
+    width: '100%',
     border: 'none',
     borderRadius: borderRadiusVariants.large,
     height: '64px',

diff --git a/...es/web-domains/src/answer/features/answer-question/containers/AnswerQuestionContainer.tsx b/...es/web-domains/src/answer/features/answer-question/containers/AnswerQuestionContainer.tsx
@@ -8,6 +8,10 @@ import { useAnswerQuestionService } from '../services/useAnswerQuestionService';
 export const AnswerQuestionContainer = () => {
   const { question, questionType, isNotAnswerd, moveToCommentPage, handleAnswerList } = useAnswerQuestionService();
 
+  const subTitle = question?.questionTitle?.subTitle ?? '우리 모임원들은';
+  const mainTitle = question?.questionTitle?.mainTitle;
+  const answers = question?.answers;
+
   return (
     <section
       css={{
@@ -16,11 +20,12 @@ export const AnswerQuestionContainer = () => {
       }}
     >
       <AnswerQuestion
-        questionTitle={question?.title ?? ''}
+        qustionSubTitle={subTitle}
+        questionTitle={mainTitle ?? ''}
         answers={
           <AnswerOptions
             questionType={questionType}
-            answerOptionList={question?.answers ?? []}
+            answerOptionList={answers ?? []}
             onChangeAnswer={handleAnswerList}
           />
         }

diff --git a/packages/web-domains/src/common/components/Modal/Modal.tsx b/packages/web-domains/src/common/components/Modal/Modal.tsx
@@ -41,7 +41,7 @@ export const Modal = ({ isOpen, onClose, children, footer, ...rest }: PropsWithC
 
   return createPortal(
     <div
-      css={{ width: '100%', height: '100%', background: '#00000066', position: 'fixed', top: 0 }}
+      css={{ width: '100%', height: '100%', background: '#00000066', position: 'fixed', top: 0, zIndex: 100 }}
       onClick={handleClose}
     >
       <div
@@ -55,6 +55,7 @@ export const Modal = ({ isOpen, onClose, children, footer, ...rest }: PropsWithC
           transform: 'translate(-50%, -50%)',
           backgroundColor: colors.white,
           borderRadius: borderRadiusVariants.medium,
+          zIndex: 1000,
         }}
         {...rest}
       >