refactor(relay-quesiton): word break, object-fit 등 자잘한 CSS 이슈 수정 (#141)

* refactor: 그룹 공유 백그라운드 위치 조정 * design: css 수정, word break, textAlign, objectFit 등 * refactor: loading text 제거 * refactor: 사용하지 않는 next questioner 쿼리 스트링 제거
depromeet · Aug 26, 2024 · 354001c · 354001c
1 parent a061ed5
commit 354001c
Show file tree

Hide file tree

Showing 15 changed files with 45 additions and 31 deletions.
diff --git a/.../src/relay-question/features/select-relay-question/components/Question/Question.styles.ts b/.../src/relay-question/features/select-relay-question/components/Question/Question.styles.ts
@@ -16,8 +16,8 @@ export const questionTextWrapperCss = css({
 });
 
 export const questionImgWrapperCss = css({
-  minWidth: `${size['4xl']}`,
-  minHeight: `${size['4xl']}`,
+  minWidth: size['4xl'],
+  height: size['4xl'],
   borderRadius: `${borderRadiusVariants.medium}`,
   overflow: 'hidden',
 });
diff --git a/...omains/src/relay-question/features/select-relay-question/components/Question/Question.tsx b/...omains/src/relay-question/features/select-relay-question/components/Question/Question.tsx
@@ -25,7 +25,7 @@ export const Question = ({ id, imageUrl, title, usedCount }: QuestionProps) => {
   const handleOpenModal = async () => {
     const question = (await refetch()).data;
 
-    if (!question) return <div>loading...</div>;
+    if (!question) return;
 
     const { answers } = question;
 
@@ -42,13 +42,13 @@ export const Question = ({ id, imageUrl, title, usedCount }: QuestionProps) => {
   return (
     <li css={wrapperCss} onClick={handleOpenModal}>
       <div css={questionImgWrapperCss}>
-        <Image src={imageUrl} alt={title} width={64} height={64} />
+        <Image src={imageUrl} alt={title} width={64} height={64} style={{ objectFit: 'cover' }} />
       </div>
       <div css={questionTextWrapperCss}>
-        <Txt color={colors.black} typography="title2" fontWeight="medium">
+        <Txt color={colors.black} typography="title2" fontWeight="medium" style={{ wordBreak: 'keep-all' }}>
           {title}
         </Txt>
-        <Txt color={colors.grey700} typography="body4" fontWeight="regular">
+        <Txt color={colors.grey700} typography="body4" fontWeight="regular" style={{ wordBreak: 'keep-all' }}>
           지금까지 {usedCount}개의 모임에서 사용했어요!
         </Txt>
       </div>

diff --git a/...elay-question/features/select-relay-question/components/QuestionDetail/QuestionDetail.tsx b/...elay-question/features/select-relay-question/components/QuestionDetail/QuestionDetail.tsx
@@ -45,7 +45,12 @@ export const QuestionDetail = ({
       <div css={imageWrapperCss}>
         <Image src={imageUrl} alt={title} width={64} height={64} />
       </div>
-      <Txt typography="heading2" color={colors.black} fontWeight="bold" css={{ textAlign: 'center' }}>
+      <Txt
+        typography="heading2"
+        color={colors.black}
+        fontWeight="bold"
+        css={{ textAlign: 'center', wordBreak: 'keep-all' }}
+      >
         {title}
       </Txt>
       <Txt color={colors.grey500} typography="title4" fontWeight="medium" css={answerExampleTextCss}>

diff --git a/...ns/src/relay-question/features/select-relay-question/components/Questioner/Questioner.tsx b/...ns/src/relay-question/features/select-relay-question/components/Questioner/Questioner.tsx
@@ -36,7 +36,7 @@ export const Questioner = ({ meetingId, meetingMemberId, imageUrl, name }: Quest
         { questionId, meetingMemberId },
         {
           onSuccess: () => {
-            router.push(`/share-group?question-id=${questionId}&questioner-name=${name}`);
+            router.push(`/share-group?question-id=${questionId}`);
           },
         },
       );
@@ -46,7 +46,7 @@ export const Questioner = ({ meetingId, meetingMemberId, imageUrl, name }: Quest
   return (
     <li css={wrapperCss} onClick={handleOpenModal}>
       <div css={imgWrapperCss}>
-        <Image src={imageUrl} alt={name} width={40} height={40} />
+        <Image src={imageUrl} alt={name} width={40} height={40} style={{ objectFit: 'cover' }} />
       </div>
       <Txt typography="title2" color={colors.black} fontWeight="medium">
         {name}

diff --git a/...-question/features/select-relay-question/components/QuestionerDetail/QuestionerDetail.tsx b/...-question/features/select-relay-question/components/QuestionerDetail/QuestionerDetail.tsx
@@ -28,7 +28,7 @@ export const QuestionerDetail = ({
   return (
     <div css={wrapperCss}>
       <div css={imgWrapperCss}>
-        <Image src={imageUrl} alt={name} width={80} height={80} />
+        <Image src={imageUrl} alt={name} width={80} height={80} style={{ objectFit: 'cover' }} />
       </div>
       <Txt typography="heading2" color={colors.black} fontWeight="bold" css={nameCss}>
         {name}

diff --git a/...-question/features/select-relay-question/containers/ContentContainer/ContentContainer.tsx b/...-question/features/select-relay-question/containers/ContentContainer/ContentContainer.tsx
@@ -37,13 +37,13 @@ const QuestionList = () => {
     },
   });
 
-  if (!questions) return <div>loading</div>;
+  if (!questions) return;
   if (questions.length === 0) return <div>empty list</div>;
 
   return (
     <section>
       <div css={questionTextBoxCss}>
-        <Txt typography="heading1" color={colors.black} fontWeight="bold">
+        <Txt typography="heading1" color={colors.black} fontWeight="bold" style={{ wordBreak: 'keep-all' }}>
           어떤 질문으로 물어볼까요?
         </Txt>
       </div>
@@ -69,7 +69,7 @@ const NextQuestionerList = () => {
 
   const { myInfo } = useMyInfoQuery();
 
-  if (!meetingMembers || !myInfo) return <div>loading</div>;
+  if (!meetingMembers || !myInfo) return;
 
   return (
     <section>

diff --git a/...ion/features/select-relay-question/containers/RandomPickContainer/RandomPickContainer.tsx b/...ion/features/select-relay-question/containers/RandomPickContainer/RandomPickContainer.tsx
@@ -67,7 +67,7 @@ const QuestionRandomPick = () => {
         </Button>
       </section>
       <Modal isOpen={isOpen} onClose={() => setIsOpen(false)}>
-        {question ? (
+        {question && (
           <QuestionDetail
             imageUrl={question.questionImageFileUrl}
             title={question.title}
@@ -77,8 +77,6 @@ const QuestionRandomPick = () => {
             onRefetch={refetchQuestion}
             isRandom
           />
-        ) : (
-          <div>loading...</div>
         )}
       </Modal>
     </>
@@ -120,7 +118,7 @@ const QuestionerRandomPick = () => {
       { questionId, meetingMemberId },
       {
         onSuccess: () => {
-          router.push(`/share-group?question-id=${questionId}&questioner-name=${questioner.name}`);
+          router.push(`/share-group?question-id=${questionId}`);
         },
       },
     );
@@ -136,7 +134,7 @@ const QuestionerRandomPick = () => {
         </Button>
       </section>
       <Modal isOpen={isOpen} onClose={handleCloseModal}>
-        {questioner ? (
+        {questioner && (
           <QuestionerDetail
             imageUrl={questioner.profileImageFileUrl}
             name={questioner.name}
@@ -145,8 +143,6 @@ const QuestionerRandomPick = () => {
             onRefetch={refetchQuestioner}
             isRandom
           />
-        ) : (
-          <div>loading...</div>
         )}
       </Modal>
     </>

diff --git a/...uestion/features/share-group/components/CurrentQuestionInfo/CurrentQuestionInfo.styles.ts b/...uestion/features/share-group/components/CurrentQuestionInfo/CurrentQuestionInfo.styles.ts
@@ -5,7 +5,7 @@ export const wrapperCss = css({
   width: '100%',
   maxWidth: '168px',
   position: 'absolute',
-  top: 94,
+  top: 104,
   left: '50.5%',
   transform: 'translateX(-50%)',
 });

diff --git a/...elay-question/features/share-group/components/CurrentQuestionInfo/CurrentQuestionInfo.tsx b/...elay-question/features/share-group/components/CurrentQuestionInfo/CurrentQuestionInfo.tsx
@@ -30,7 +30,13 @@ export const CurrentQuestionInfo = ({ questionCount, questioner }: CurrentQuesti
           {questioner.name}
         </Txt>
         <div css={imgWrapperCss}>
-          <Image src={questioner.imageUrl} alt={questioner.name} width={20} height={20} />
+          <Image
+            src={questioner.imageUrl}
+            alt={questioner.name}
+            width={20}
+            height={20}
+            style={{ objectFit: 'cover' }}
+          />
         </div>
       </div>
     </div>

diff --git a/...ontainers/CurrentRelayQuestionCountContainer/CurrentRelayQuestionCountContainer.styles.ts b/...ontainers/CurrentRelayQuestionCountContainer/CurrentRelayQuestionCountContainer.styles.ts
@@ -33,5 +33,4 @@ export const firstButtonCss = css({
 
 export const buttonWrapperCss = css({
   width: '100%',
-  maxWidth: '430px',
 });
diff --git a/...roup/containers/CurrentRelayQuestionCountContainer/CurrentRelayQuestionCountContainer.tsx b/...roup/containers/CurrentRelayQuestionCountContainer/CurrentRelayQuestionCountContainer.tsx
@@ -34,7 +34,7 @@ export const CurrentRelayQuestionCountContainer = () => {
     setIsOpenModal(true);
   };
 
-  if (!activeQuestion) return <div>loading</div>;
+  if (!activeQuestion) return;
 
   return (
     <>

diff --git a/...questioner/containers/ShareNextQuestionerContainer/ShareNextQuestionerContainer.styles.ts b/...questioner/containers/ShareNextQuestionerContainer/ShareNextQuestionerContainer.styles.ts
@@ -18,6 +18,7 @@ export const headingWrapperCss = css({
   justifyContent: 'center',
   alignItems: 'center',
   paddingTop: size['2xl'],
+  maxWidth: '300px',
 });
 
 export const footerWrapperCss = css({
@@ -29,7 +30,6 @@ export const footerWrapperCss = css({
 
 export const buttonWrapperCss = css({
   width: '100%',
-  maxWidth: '430px',
 });
 
 export const shareButtonCss = css({

diff --git a/...-next-questioner/containers/ShareNextQuestionerContainer/ShareNextQuestionerContainer.tsx b/...-next-questioner/containers/ShareNextQuestionerContainer/ShareNextQuestionerContainer.tsx
@@ -36,10 +36,13 @@ export const ShareNextQuestionerContainer = () => {
     <>
       <section css={wrapperCss}>
         <div css={headingWrapperCss}>
-          <Txt color={colors.black} typography="heading1" fontWeight="bold">
-            다음 릴레이 질문을 만드는
-          </Txt>
-          <Txt color={colors.black} typography="heading1" fontWeight="bold">
+          <Txt
+            color={colors.black}
+            typography="heading1"
+            fontWeight="bold"
+            style={{ textAlign: 'center', wordBreak: 'keep-all' }}
+          >
+            다음 릴레이 질문을 만드는{' '}
             <Txt color={colors.primary500} typography="heading1" fontWeight="bold">
               질문인
             </Txt>

diff --git a/...b-domains/src/relay-question/features/start-relay-question/components/Profile/Profile.tsx b/...b-domains/src/relay-question/features/start-relay-question/components/Profile/Profile.tsx
@@ -34,7 +34,12 @@ export const Profile = ({ profileImageUrl }: ProfileProps) => {
   return (
     <section css={profileSectionCss}>
       <div css={profileIntroductionCss}>
-        <Txt typography="heading1" color={colors.black} fontWeight="bold">
+        <Txt
+          typography="heading1"
+          color={colors.black}
+          fontWeight="bold"
+          css={{ textAlign: 'center', wordBreak: 'keep-all' }}
+        >
           이번 릴레이 질문인은 바로 나!
         </Txt>
         <Txt color={colors.grey600} style={{ textAlign: 'center' }}>

diff --git a/...eatures/start-relay-question/containers/StartQuestionContainer/StartQuestionContainer.tsx b/...eatures/start-relay-question/containers/StartQuestionContainer/StartQuestionContainer.tsx
@@ -20,7 +20,7 @@ export const StartQuestionContainer = () => {
   const router = useRouter();
   const { myInfo } = useMyInfoQuery();
 
-  if (!myInfo) return <div>loading</div>;
+  if (!myInfo) return;
 
   return (
     <>