feat: 사용성 개선 - Title component 변경 및 UX writing 수정 (#352)

* fix: Text component 줄바꿈 가능하도록 변경

* fix: Title component 변경

* chore: v0.1.72 배포

* feat: ux writing 변경

* fix: 디자인시스템 버전 변경

HDesign/package.json

@@ -1,6 +1,6 @@
 {
   "name": "haengdong-design",
-  "version": "0.1.69",
+  "version": "0.1.72",
   "description": "",
   "main": "./dist/index.js",
   "module": "./dist/index.js",

HDesign/src/components/Text/Text.style.ts

@@ -21,5 +21,9 @@ export const getSizeStyling = ({size, textColor, theme}: Required<TextStyleProps
 
   const colorStyle = css({color: theme.colors[textColor]});
 
-  return [style[size], colorStyle];
+  const baseStyle = css({
+    whiteSpace: 'pre-line',
+  });
+
+  return [style[size], colorStyle, baseStyle];
 };

HDesign/src/components/Title/Title.stories.tsx

@@ -25,7 +25,8 @@ const meta = {
   },
   args: {
     title: '페이지 제목이에요',
-    description: '이곳에는 페이지 설명이 들어가요. 페이지에 대한 설명을 자세하게 적어주면 좋아요 :)',
+    description: `이곳에는 페이지 설명이 들어가요.
+    페이지에 대한 설명을 자세하게 적어주면 좋아요 :)`,
     price: 100000,
   },
 } satisfies Meta<typeof Title>;

HDesign/src/components/Title/Title.tsx

@@ -1,4 +1,5 @@
 /** @jsxImportSource @emotion/react */
+import Flex from '@components/Flex/Flex';
 import Text from '@components/Text/Text';
 import {priceContainerStyle, titleContainerStyle} from '@components/Title/Title.style';
 import {TitleProps} from '@components/Title/Title.type';
@@ -11,7 +12,7 @@ export const Title: React.FC<TitleProps> = ({title, description, price}: TitlePr
     <div css={titleContainerStyle(theme)}>
       <Text size="subTitle">{title}</Text>
       {description && (
-        <Text textColor="darkGray" size="caption">
+        <Text textColor="darkGray" size="body">
           {description}
         </Text>
       )}
@@ -20,7 +21,10 @@ export const Title: React.FC<TitleProps> = ({title, description, price}: TitlePr
           <Text textColor="gray" size="caption">
             전체 지출 금액
           </Text>
-          <Text>{price.toLocaleString('ko-kr')}원</Text>
+          <Flex alignItems="center" gap="0.25rem">
+            <Text>{price.toLocaleString('ko-kr')}</Text>
+            <Text size="caption">원</Text>
+          </Flex>
         </div>
       )}
     </div>

client/package.json

@@ -54,7 +54,7 @@
   "dependencies": {
     "@emotion/react": "^11.11.4",
     "@sentry/react": "^8.25.0",
-    "haengdong-design": "^0.1.69",
+    "haengdong-design": "^0.1.72",
     "react": "^18.3.1",
     "react-copy-to-clipboard": "^5.1.0",
     "react-dom": "^18.3.1",

client/src/components/Modal/SetInitialMemberListModal/SetInitialMemberListModal.tsx

@@ -37,7 +37,7 @@ const SetInitialMemberListModal = ({isOpenBottomSheet, setIsOpenBottomSheet}: Se
   return (
     <BottomSheet isOpened={isOpenBottomSheet} onClose={() => setIsOpenBottomSheet(false)}>
       <div css={setInitialMemberListModalStyle}>
-        <Text size="bodyBold">초기 인원 설정하기</Text>
+        <Text size="bodyBold">시작 인원 추가하기</Text>
         <div css={setInitialMemberListModalInputGroupStyle}>
           <LabelGroupInput labelText="이름" errorText={errorMessage}>
             {inputList.map(({value, index}) => (

client/src/pages/EventPage/AdminPage/AdminPage.tsx

@@ -36,8 +36,9 @@ const AdminPage = () => {
 
   const getTitleDescriptionByInitialMemberSetting = () => {
     return allMemberList.length > 0
-      ? '“행동 추가하기” 버튼을 눌러서 지출 내역 및 인원 변동사항을 추가해 주세요.'
-      : '“초기인원 설정하기” 버튼을 눌러서 행사 초기 인원을 설정해 주세요.';
+      ? `지출 내역 및 인원 변동을 추가해 주세요.
+      인원 변동을 기준으로 몇 차인지 나뉘어져요.`
+      : '“시작 인원 추가” 버튼을 눌러 행사의 시작부터 참여하는 사람들의 이름을 입력해 주세요.';
   };
 
   return (
@@ -55,7 +56,7 @@ const AdminPage = () => {
       <section css={receiptStyle}>
         <StepList />
         <FixedButton
-          children={allMemberList.length === 0 ? '초기인원 설정하기' : '행동 추가하기'}
+          children={allMemberList.length === 0 ? '시작인원 추가하기' : '행동 추가하기'}
           onClick={() => setIsOpenFixedBottomBottomSheet(prev => !prev)}
         />
         {isOpenFixedButtonBottomSheet && (