Feat: 메시지 예외처리를 위한 메시지 포맷팅 함수 구현 및 적용

sharemindteam · Jan 29, 2024 · 6775f52 · 6775f52
1 parent 212dcfb
commit 6775f52
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 11 deletions.
diff --git a/src/components/Seller/SellerLetter/LetterBonusQuestionStep.tsx b/src/components/Seller/SellerLetter/LetterBonusQuestionStep.tsx
@@ -4,6 +4,7 @@ import { Body1, Body2, Body3 } from 'styles/font';
 import { Grey3 } from 'styles/color';
 import { BottomButton } from '../Common/BottomButton';
 import { useNavigate, useParams } from 'react-router-dom';
+import { formattedMessage } from 'utils/formattedMessage';
 interface LetterBonusQuestionStepProps {
   isArrive: boolean;
   time: string;
@@ -25,7 +26,7 @@ export const LetterBonusQuestionStep = ({
       {isArrive ? (
         <ArriveSection>
           <Time>{time}</Time>
-          <TextField>{questionMsg}</TextField>
+          <TextField>{formattedMessage(questionMsg)}</TextField>
         </ArriveSection>
       ) : (
         <NotArriveSection>

diff --git a/src/components/Seller/SellerLetter/LetterBonusReplyStep.tsx b/src/components/Seller/SellerLetter/LetterBonusReplyStep.tsx
@@ -4,6 +4,7 @@ import { Body3 } from 'styles/font';
 import { Grey3 } from 'styles/color';
 import { BottomButton } from '../Common/BottomButton';
 import { useNavigate, useParams } from 'react-router-dom';
+import { formattedMessage } from 'utils/formattedMessage';
 interface LetterBonusReplyStepProps {
   isArrive: boolean;
   time: string;
@@ -25,7 +26,7 @@ export const LetterBonusReplyStep = ({
       {isArrive ? (
         <ArriveSection>
           <Time>{time}</Time>
-          <TextField>{replyMsg}</TextField>
+          <TextField>{formattedMessage(replyMsg)}</TextField>
         </ArriveSection>
       ) : (
         <NotWriteSection>

diff --git a/src/components/Seller/SellerLetter/LetterQuestionStep.tsx b/src/components/Seller/SellerLetter/LetterQuestionStep.tsx
@@ -5,6 +5,7 @@ import { Grey3 } from 'styles/color';
 import { BottomButton } from '../Common/BottomButton';
 import { useNavigate, useParams } from 'react-router-dom';
 import React from 'react';
+import { formattedMessage } from 'utils/formattedMessage';
 interface LetterQuestionStepProps {
   isArrive: boolean;
   time: string;
@@ -25,7 +26,7 @@ export const LetterQuestionStep = ({
       {isArrive ? (
         <ArriveSection>
           <Time>{time}</Time>
-          <TextField>{questionMsg}</TextField>
+          <TextField>{formattedMessage(questionMsg)}</TextField>
         </ArriveSection>
       ) : (
         <NotArriveSection>

diff --git a/src/components/Seller/SellerLetter/LetterReplyStep.tsx b/src/components/Seller/SellerLetter/LetterReplyStep.tsx
@@ -5,6 +5,7 @@ import { Grey3 } from 'styles/color';
 import { BottomButton } from '../Common/BottomButton';
 import { useNavigate, useParams } from 'react-router-dom';
 import React from 'react';
+import { formattedMessage } from 'utils/formattedMessage';
 
 interface LetterReplyStepProps {
   isArrive: boolean;
@@ -22,18 +23,13 @@ export const LetterReplyStep = ({
 }: LetterReplyStepProps) => {
   const { consultid } = useParams();
   const navigate = useNavigate();
-  const formattedText = replyMsg?.split('\n').map((line, index) => (
-    <React.Fragment key={index}>
-      {line}
-      {index < replyMsg.split('\n').length - 1 && <br />}
-    </React.Fragment>
-  ));
+
   return (
     <LetterReplyStepWrapper>
       {isArrive ? (
         <ArriveSection>
           <Time>{time}</Time>
-          <TextField>{replyMsg}</TextField>
+          <TextField>{formattedMessage(replyMsg)}</TextField>
         </ArriveSection>
       ) : (
         <NotWriteSection>
@@ -76,7 +72,6 @@ const TextField = styled.div`
   border-radius: 1.2rem;
   background: var(--Greyscale-Grey-6, #f6f6fa);
   padding: 1.6rem;
-  white-space: pre;
   color: var(--greyscale-grey-1-text, #33333a);
   font-family: Pretendard;
   font-size: 1.6rem;

diff --git a/src/utils/formattedMessage.tsx b/src/utils/formattedMessage.tsx
@@ -0,0 +1,12 @@
+export const formattedMessage = (
+  message: string | null,
+): JSX.Element[] | null => {
+  return message
+    ? message.split('\n').map((item, key) => (
+        <span key={key}>
+          {item}
+          <br />
+        </span>
+      ))
+    : null;
+};