�fix(web-domains): 텍스트 관련 레이아웃 문제 수정 (#183)

* fix: 결과 페이지 텍스트 관련 레이아웃 수정 * fix: 질문 선택 버튼 스타일 수정
depromeet · Aug 30, 2024 · 004749f · 004749f
1 parent 6944711
commit 004749f
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 32 deletions.
diff --git a/...ains/src/answer/features/answer-question/components/MultipleDescriptiveAnswerQuestion.tsx b/...ains/src/answer/features/answer-question/components/MultipleDescriptiveAnswerQuestion.tsx
@@ -1,6 +1,7 @@
 'use client';
-import { Button, fontWeightVariants } from '@sambad/sds/components';
-import { colors } from '@sambad/sds/theme';
+import { css } from '@emotion/react';
+import { Txt } from '@sambad/sds/components';
+import { borderRadiusVariants, colors, size } from '@sambad/sds/theme';
 import { Attributes, useEffect, useState } from 'react';
 
 import { AnswerQuestionOptionType } from '@/answer/common/apis/schema/AnswerQuestion';
@@ -13,24 +14,28 @@ interface MultipleDescriptiveAnswerQuestionProps {
 const buttonStyles: Record<'selected' | 'default', Attributes['css']> = {
   selected: {
     border: 'none',
-    borderRadius: '24px',
+    borderRadius: borderRadiusVariants.large,
     height: '64px',
     backgroundColor: colors.primary500,
-    fontWeight: fontWeightVariants.medium,
-    fontSize: '20px',
     color: colors.white,
   },
   default: {
     border: 'none',
-    borderRadius: '24px',
+    borderRadius: borderRadiusVariants.large,
     height: '64px',
     backgroundColor: colors.grey400,
-    fontWeight: fontWeightVariants.medium,
-    fontSize: '20px',
     color: colors.grey700,
   },
 };
 
+const baseButtonStyle = css({
+  padding: `${size['5xs']} ${size['4xs']}`,
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  wordBreak: 'keep-all',
+});
+
 export const MultipleDescriptiveAnswerQuestion = ({
   answerOptionList,
   onChangeAnswerList,
@@ -73,13 +78,14 @@ export const MultipleDescriptiveAnswerQuestion = ({
             },
           }}
         >
-          <Button
+          <button
             onClick={handleClickAnswer(answer)}
-            variant="sub"
-            css={isSelected(answer) ? buttonStyles['selected'] : buttonStyles['default']}
+            css={[baseButtonStyle, isSelected(answer) ? buttonStyles['selected'] : buttonStyles['default']]}
           >
-            {answer.content}
-          </Button>
+            <Txt typography="title2" color={isSelected(answer) ? colors.white : colors.grey700}>
+              {answer.content}
+            </Txt>
+          </button>
         </li>
       ))}
     </ul>

diff --git a/...eb-domains/src/answer/features/answer-question/components/MultipleShortAnswerQuestion.tsx b/...eb-domains/src/answer/features/answer-question/components/MultipleShortAnswerQuestion.tsx
@@ -1,7 +1,8 @@
 'use client';
 
-import { Button, fontWeightVariants } from '@sambad/sds/components';
-import { colors } from '@sambad/sds/theme';
+import { css } from '@emotion/react';
+import { Txt } from '@sambad/sds/components';
+import { borderRadiusVariants, colors, size } from '@sambad/sds/theme';
 import { Attributes, useEffect, useState } from 'react';
 
 import { AnswerQuestionOptionType } from '@/answer/common/apis/schema/AnswerQuestion';
@@ -14,24 +15,26 @@ interface MultipleShortAnswerQuestionProps {
 const buttonStyles: Record<'selected' | 'default', Attributes['css']> = {
   selected: {
     border: 'none',
-    borderRadius: '24px',
+    borderRadius: borderRadiusVariants.large,
     height: '64px',
     backgroundColor: colors.primary500,
-    fontWeight: fontWeightVariants.medium,
-    fontSize: '20px',
-    color: colors.white,
   },
   default: {
     border: 'none',
-    borderRadius: '24px',
+    borderRadius: borderRadiusVariants.large,
     height: '64px',
     backgroundColor: colors.grey400,
-    fontWeight: fontWeightVariants.medium,
-    fontSize: '20px',
-    color: colors.grey700,
   },
 };
 
+const baseButtonStyles = css({
+  padding: `${size['5xs']} ${size['4xs']}`,
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  wordBreak: 'keep-all',
+});
+
 export const MultipleShortAnswerQuestion = ({
   answerOptionList,
   onChangeAnswerList,
@@ -66,14 +69,15 @@ export const MultipleShortAnswerQuestion = ({
   return (
     <div css={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', rowGap: '8px', columnGap: '8.75px' }}>
       {answerOptionList.map((answer) => (
-        <Button
+        <button
           onClick={handleClickAnswer(answer)}
           key={answer.answerId}
-          variant="sub"
-          css={isSelected(answer) ? buttonStyles['selected'] : buttonStyles['default']}
+          css={[baseButtonStyles, isSelected(answer) ? buttonStyles['selected'] : buttonStyles['default']]}
         >
-          {answer.content}
-        </Button>
+          <Txt typography="title2" color={isSelected(answer) ? colors.white : colors.grey700}>
+            {answer.content}
+          </Txt>
+        </button>
       ))}
     </div>
   );

diff --git a/packages/web-domains/src/result/common/components/HeaderBanner/HeaderBanner.tsx b/packages/web-domains/src/result/common/components/HeaderBanner/HeaderBanner.tsx
@@ -23,7 +23,7 @@ export const HeaderBanner = (props: HeaderBannerProps) => {
       )}
       <Txt as="h1" typography="heading1" fontWeight="regular" css={titleCss}>
         우리 모임원들이
-        <strong>{title}</strong>
+        <strong style={{ wordBreak: 'keep-all' }}>{title}</strong>
       </Txt>
     </section>
   );

diff --git a/packages/web-domains/src/result/features/main/components/SelectedDataCard/Comment.tsx b/packages/web-domains/src/result/features/main/components/SelectedDataCard/Comment.tsx
@@ -19,7 +19,7 @@ export const Comment = (props: CommentProps) => {
 
   return (
     <div css={commentCss} {...commentAttribute.attribute}>
-      <Txt as="p" typography="body2">
+      <Txt as="p" typography="body2" style={{ wordBreak: 'keep-all' }}>
         {comment}
       </Txt>
       <div css={commentProfileCss}>

diff --git a/packages/web-domains/src/result/features/main/components/SelectedDataCard/styles.ts b/packages/web-domains/src/result/features/main/components/SelectedDataCard/styles.ts
@@ -29,6 +29,7 @@ export const memberCharacterCss = css({
 
 export const mostAnsweredTitleCss = css({
   paddingTop: size.sm,
+  wordBreak: 'keep-all',
 });
 
 export const mostAnsweredButtonCss = css({

diff --git a/packages/web-domains/src/result/features/statistics/components/RankList/Item.tsx b/packages/web-domains/src/result/features/statistics/components/RankList/Item.tsx
@@ -27,10 +27,10 @@ export const RankListItem = (props: RankListItemProps) => {
           {rank}
         </Txt>
       )}
-      <Txt typography="title2" style={{ paddingLeft: size['3xs'] }}>
+      <Txt typography="title2" style={{ paddingLeft: size['3xs'], wordBreak: 'keep-all' }}>
         {content}
       </Txt>
-      <Txt typography="body3" style={{ marginLeft: 'auto' }}>
+      <Txt typography="body3" style={{ marginLeft: 'auto', paddingLeft: '10px' }}>
         {count}
       </Txt>
       <Txt typography="subTitle2" color={color} style={{ paddingLeft: size['3xs'] }}>