fix: 반응형 UI 수정

depromeet · Sep 9, 2024 · 45f2304 · 45f2304
1 parent 3844e39
commit 45f2304
Show file tree

Hide file tree

Showing 16 changed files with 82 additions and 49 deletions.
diff --git a/...es/web-domains/src/new-meeting/features/new-meeting-closing/components/ClosingMessage.tsx b/...es/web-domains/src/new-meeting/features/new-meeting-closing/components/ClosingMessage.tsx
@@ -27,6 +27,9 @@ const ClosingMessage = (props: ClosingMessageProps) => {
         flexDirection: 'column',
         alignItems: 'center',
         justifyContent: 'center',
+        '@media (max-width: 365px)': {
+          top: '64px',
+        },
       }}
     >
       <div css={{ transform: 'translate(0, 20%)' }}>
@@ -46,7 +49,7 @@ const ClosingMessage = (props: ClosingMessageProps) => {
       <div
         css={{
           position: 'absolute',
-          width: '80%',
+          width: '90%',
           aspectRatio: '3/2',
           maxWidth: '500px',
         }}

diff --git a/...ns/src/new-meeting/features/new-meeting-closing/containers/NewMeetingClosingContainer.tsx b/...ns/src/new-meeting/features/new-meeting-closing/containers/NewMeetingClosingContainer.tsx
@@ -49,6 +49,9 @@ const NewMeetingClosingContainer = (props: NewMeetingClosingContainerProps) => {
           aspectRatio: '11/5',
           bottom: '184px',
           transform: 'translate(-3%, 0)',
+          '@media (max-width: 320px)': {
+            display: 'none',
+          },
         }}
       >
         <Image src={Character} alt="meeting-character" priority fill />

diff --git a/...domains/src/participate-meeting/common/assets/images/welcome-invite-meeting.png b/...domains/src/participate-meeting/common/assets/images/welcome-invite-meeting.png
diff --git a/...es/web-domains/src/participate-meeting/common/assets/images/welcome-meeting.png b/...es/web-domains/src/participate-meeting/common/assets/images/welcome-meeting.png
diff --git a/...b-domains/src/participate-meeting/features/get-invite-code/components/BackgroundImage.tsx b/...b-domains/src/participate-meeting/features/get-invite-code/components/BackgroundImage.tsx
@@ -4,7 +4,7 @@ import Character from '../../../common/assets/images/welcome-invite-meeting.png'
 
 export const BackgroundImage = () => {
   return (
-    <div css={{ position: 'absolute', bottom: '0', width: '100%', aspectRatio: '1', zIndex: -1 }}>
+    <div css={{ position: 'absolute', bottom: '0', width: '100%', aspectRatio: '13/10', zIndex: -1 }}>
       <Image src={Character} alt="meeting-character" priority fill />
     </div>
   );

diff --git a/...-domains/src/participate-meeting/features/get-invite-code/components/InviteCodeHeader.tsx b/...-domains/src/participate-meeting/features/get-invite-code/components/InviteCodeHeader.tsx
@@ -3,7 +3,16 @@ import { size, colors } from '@sambad/sds/theme';
 
 export const InviteCodeHeader = () => {
   return (
-    <header css={{ marginTop: size['4xl'], padding: `${size.xl} ${size['2xs']} ${size.xs}`, textAlign: 'center' }}>
+    <header
+      css={{
+        marginTop: size['4xl'],
+        padding: `${size.xl} ${size['2xs']} ${size.xs}`,
+        textAlign: 'center',
+        '@media (max-width: 320px)': {
+          marginTop: 0,
+        },
+      }}
+    >
       <Txt as="h1" color={colors.black} typography="heading1">
         <Txt as="strong" color={colors.primary500} typography="heading1">
           모링

diff --git a/...c/participate-meeting/features/participate-meeting-closing/components/BackgroundImage.tsx b/...c/participate-meeting/features/participate-meeting-closing/components/BackgroundImage.tsx
@@ -6,23 +6,15 @@ export const BackgroundImage = () => {
   return (
     <div
       css={{
-        position: 'absolute',
-        bottom: '140px',
+        position: 'relative',
         width: '100%',
         display: 'flex',
+        flexGrow: 1,
         justifyContent: 'center',
         zIndex: -1,
       }}
     >
-      <div
-        css={{
-          position: 'relative',
-          width: '80%',
-          aspectRatio: '1',
-        }}
-      >
-        <Image src={Character} alt="meeting-character" priority fill />
-      </div>
+      <Image src={Character} alt="meeting-character" priority fill style={{ objectFit: 'contain' }} />
     </div>
   );
 };
diff --git a/...src/participate-meeting/features/participate-meeting-closing/components/ClosingHeader.tsx b/...src/participate-meeting/features/participate-meeting-closing/components/ClosingHeader.tsx
@@ -6,8 +6,21 @@ interface ClosingHeaderProps {
 }
 
 export const ClosingHeader = ({ meetingName }: ClosingHeaderProps) => {
+  if (!meetingName) {
+    return null;
+  }
+
   return (
-    <header css={{ marginTop: size['4xl'], padding: `${size.xl} ${size['2xs']} ${size.xs}`, textAlign: 'center' }}>
+    <header
+      css={{
+        marginTop: size['4xl'],
+        padding: `${size.xl} ${size['2xs']} ${size.xs}`,
+        textAlign: 'center',
+        '@media (max-width: 320px)': {
+          marginTop: 0,
+        },
+      }}
+    >
       <Txt as="h1" color={colors.black} typography="heading1">
         {meetingName && (
           <Txt as="strong" color={colors.primary500} typography="heading1">

diff --git a/...e-meeting/features/participate-meeting-closing/containers/ParticipateClosingContainer.tsx b/...e-meeting/features/participate-meeting-closing/containers/ParticipateClosingContainer.tsx
@@ -33,11 +33,20 @@ export const ParticipateClosingContainer = (props: ParticipateClosingContainerPr
         zIndex: 10,
       }}
     >
-      <ClosingHeader meetingName={data?.name} />
-      <BackgroundImage />
       <div
         css={{
-          position: 'absolute',
+          display: 'flex',
+          flexDirection: 'column',
+          height: `calc(100% - 116px)`,
+        }}
+      >
+        <ClosingHeader meetingName={data?.name} />
+        <BackgroundImage />
+      </div>
+
+      <div
+        css={{
+          position: 'fixed',
           bottom: '40px',
           width: '100%',
           maxWidth: '600px',

diff --git a/packages/web-domains/src/user/features/get-user-info/components/Form/BasicInfoForm.tsx b/packages/web-domains/src/user/features/get-user-info/components/Form/BasicInfoForm.tsx
@@ -11,7 +11,7 @@ import { useGoNextStep } from '../../hooks/useGoNextStep';
 import { RadioGroup } from '../Radio/';
 import { TextInput } from '../TextInput/TextInput';
 
-import { buttonWrapperCss } from './styles';
+import { buttonWrapperCss, formLayoutcss } from './styles';
 
 export interface BasicInfo {
   userName: string;
@@ -41,16 +41,7 @@ export const BasicInfoForm = () => {
   };
 
   return (
-    <form
-      onSubmit={handleSubmit(goToNextPage)}
-      css={{
-        padding: '0 20px',
-        marginTop: '48px',
-        '& > *:not(:first-of-type)': {
-          marginTop: '32px',
-        },
-      }}
-    >
+    <form onSubmit={handleSubmit(goToNextPage)} css={formLayoutcss}>
       <TextInput
         label="이름이 무엇인가요?"
         answerNumber={1}

diff --git a/packages/web-domains/src/user/features/get-user-info/components/Form/ExtraInfoForm.tsx b/packages/web-domains/src/user/features/get-user-info/components/Form/ExtraInfoForm.tsx
@@ -9,7 +9,7 @@ import { STEPS } from '@/user/common/constants/step';
 import { useGoNextStep } from '../../hooks/useGoNextStep';
 import { TextInput } from '../TextInput/TextInput';
 
-import { buttonWrapperCss } from './styles';
+import { buttonWrapperCss, formLayoutcss } from './styles';
 
 interface ExtraInfo {
   job: string;
@@ -36,16 +36,7 @@ export const ExtraInfoForm = () => {
   };
 
   return (
-    <form
-      onSubmit={handleSubmit(goToNextPage)}
-      css={{
-        padding: '0 20px',
-        marginTop: '48px',
-        '& > *:not(:first-of-type)': {
-          marginTop: '32px',
-        },
-      }}
-    >
+    <form onSubmit={handleSubmit(goToNextPage)} css={formLayoutcss}>
       <TextInput
         label="직업이 무엇인가요?"
         answerNumber={4}

diff --git a/packages/web-domains/src/user/features/get-user-info/components/Form/HobbiesInfoForm.tsx b/packages/web-domains/src/user/features/get-user-info/components/Form/HobbiesInfoForm.tsx
@@ -10,7 +10,7 @@ import { STEPS } from '@/user/common/constants/step';
 import { useGoNextStep } from '../../hooks/useGoNextStep';
 import { CheckboxGroup } from '../Checkbox';
 
-import { buttonWrapperCss } from './styles';
+import { buttonWrapperCss, formLayoutcss } from './styles';
 
 interface HobbiesFormProps {
   hobbyList?: HobbyType[];
@@ -42,7 +42,7 @@ export const HobbiesInfoForm = ({ hobbyList }: HobbiesFormProps) => {
   if (!hobbyList || !hobbyList.length) return null;
 
   return (
-    <form onSubmit={handleSubmit(goToNextPage)} css={{ padding: '0 20px', marginTop: '48px' }}>
+    <form onSubmit={handleSubmit(goToNextPage)} css={formLayoutcss}>
       <div css={{ display: 'inline-flex', flexWrap: 'wrap', gap: '10px' }}>
         <Controller
           name="hobbyIds"

diff --git a/packages/web-domains/src/user/features/get-user-info/components/Form/IntroInfoForm.tsx b/packages/web-domains/src/user/features/get-user-info/components/Form/IntroInfoForm.tsx
@@ -14,7 +14,7 @@ import { useCreateMeetingService } from '../../services/useCreateMeetingService'
 import { useMeetingMemberService } from '../../services/useMeetingMemberService';
 import { TextArea } from '../TextInput/TextArea';
 
-import { buttonWrapperCss } from './styles';
+import { buttonWrapperCss, formLayoutcss } from './styles';
 
 interface IntroFormType {
   introduction: string;
@@ -64,7 +64,7 @@ export const IntroInfoForm = () => {
   };
 
   return (
-    <form onSubmit={handleSubmit(handleParticipateMeeting)} css={{ padding: '0 20px', marginTop: '48px' }}>
+    <form onSubmit={handleSubmit(handleParticipateMeeting)} css={formLayoutcss}>
       <TextArea
         maxLength={MAX_LENGTH}
         placeholder="저는 이런 사람이에요"

diff --git a/packages/web-domains/src/user/features/get-user-info/components/Form/MbtiInfoForm.tsx b/packages/web-domains/src/user/features/get-user-info/components/Form/MbtiInfoForm.tsx
@@ -10,7 +10,7 @@ import { STEPS } from '@/user/common/constants/step';
 import { useGoNextStep } from '../../hooks/useGoNextStep';
 import { RadioGroup } from '../Radio';
 
-import { buttonWrapperCss } from './styles';
+import { buttonWrapperCss, formLayoutcss } from './styles';
 
 interface MbtiFormType {
   mbti: string;
@@ -30,7 +30,7 @@ export const MbtiInfoForm = () => {
   };
 
   return (
-    <form onSubmit={handleSubmit(goToNextPage)} css={{ padding: '0 20px', marginTop: '48px' }}>
+    <form onSubmit={handleSubmit(goToNextPage)} css={formLayoutcss}>
       <div css={{ display: 'inline-flex', flexWrap: 'wrap', gap: '10px' }}>
         <Controller
           name="mbti"

diff --git a/packages/web-domains/src/user/features/get-user-info/components/Form/styles.ts b/packages/web-domains/src/user/features/get-user-info/components/Form/styles.ts
@@ -1,6 +1,15 @@
 import { css } from '@emotion/react';
 import { size } from '@sambad/sds/theme';
 
+export const formLayoutcss = css({
+  padding: '0 20px',
+  paddingBottom: '100px',
+  marginTop: '48px',
+  '& > *:not(:first-of-type)': {
+    marginTop: '32px',
+  },
+});
+
 export const buttonWrapperCss = css({
   position: 'fixed',
   bottom: size.xl,

diff --git a/packages/web-domains/src/user/features/select-user-role/containers/SelectRoleContainer.tsx b/packages/web-domains/src/user/features/select-user-role/containers/SelectRoleContainer.tsx
@@ -18,16 +18,29 @@ export const SelectRoleContainer = () => {
 
   return (
     <>
-      <section css={{ overflow: 'hidden', padding: '0 20px' }}>
-        <Txt as="p" typography="heading1" color={colors.black} css={{ textAlign: 'center', marginTop: '118px' }}>
+      <section
+        css={{
+          overflow: 'hidden',
+          padding: '0 20px',
+        }}
+      >
+        <Txt
+          as="p"
+          typography="heading1"
+          color={colors.black}
+          css={{
+            textAlign: 'center',
+            marginTop: '118px',
+          }}
+        >
           <strong css={{ color: colors.primary500 }}>모링</strong>에 오신 걸 환영해요!
         </Txt>
         <Txt as="p" typography="body3" color={colors.grey600} css={{ textAlign: 'center', marginTop: size['6xs'] }}>
           모임에서 어떤 역할인지 선택해주세요.
         </Txt>
       </section>
 
-      <section css={{ marginTop: '45px', padding: '0 20px' }}>
+      <section css={{ marginTop: '45px', padding: '0 20px', paddingBottom: '100px' }}>
         <RoleRadioButton
           label="모임장"
           subTitle="모임을 이끄는"