fix(web-domains): 온보딩 페이지 이미지 위치 보정 및 버튼 너비 수정

packages/web-domains/src/about-me/features/containers/ScreenContainer.tsx

@@ -1,12 +1,13 @@
 'use client';
 
 import { colors, shadow, size } from '@sambad/sds/theme';
-import { Button, TextButton, Txt } from '@sds/components';
+import { TextButton, Txt } from '@sds/components';
 import { useRouter } from 'next/navigation';
 import { useRef } from 'react';
 
 import { useCreateHandWavings } from '@/about-me/common/apis/mutates/useCreateHandWavings';
 import { useGetHandWavingsStatus } from '@/about-me/common/apis/queries/useGetHandWavingsStatus';
+import { FloatingButton } from '@/common/components';
 import { ActionBar } from '@/common/components/ActionBar/ActionBar';
 
 import { useConvertTypeParams } from '../hooks/useConvertTypeParams';
@@ -15,7 +16,7 @@ import { useIsMyByParams } from '../hooks/useIsMyByParams';
 
 import { ProfileContainer } from './ProfileContainer';
 import { SegmentedControlContainer } from './SegmentedControlContainer';
-import { handWavingButtonCss, screenRootCss } from './styles';
+import { screenRootCss } from './styles';
 
 export const ScreenContainer = () => {
   const { isMy } = useIsMyByParams();
@@ -68,15 +69,14 @@ export const ScreenContainer = () => {
         <SegmentedControlContainer ref={segmentedRef} style={sectionStyle} />
       </div>
       {!isMy && getWavingStatusSuccess && (
-        <Button
+        <FloatingButton
           size="large"
           disabled={isProgressHandWavings}
           onClick={handleHandWaving}
-          css={handWavingButtonCss}
           style={{ boxShadow: isProgressHandWavings ? shadow.elevation3 : undefined }}
         >
           {isProgressHandWavings ? '손 흔들어 인사하기 완료!' : '손 흔들어 인사하기'}
-        </Button>
+        </FloatingButton>
       )}
     </div>
   );

packages/web-domains/src/about-me/features/containers/styles.ts

@@ -40,16 +40,6 @@ export const answerContentCss = css({
   },
 });
 
-export const handWavingButtonCss = css({
-  position: 'fixed',
-  // NOTE: 좌우 여백을 고려한 너비 계산
-  width: `calc(100% - ${size['2xs']} * 2)`,
-  bottom: size['2xs'],
-  left: '50%',
-  transform: 'translateX(-50%)',
-  maxWidth: `calc(600px - ${size['2xs']} * 2)`,
-});
-
 export const screenRootCss = css({
   position: 'relative',
   height: '100dvh',

packages/web-domains/src/common/components/FloatingButton/FloatingButton.tsx

@@ -0,0 +1,26 @@
+import { Button, ButtonProps } from '@sds/components';
+import { size } from '@sds/theme';
+import { CSSProperties } from 'react';
+
+interface FloatingButtonProps extends ButtonProps {
+  bottom?: number;
+  padding?: number;
+  maxWidth?: number;
+}
+
+export const FloatingButton = (props: FloatingButtonProps) => {
+  const { bottom = size['2xs'], padding = size['2xs'], maxWidth = 600, style: styleFromProps, ...restProps } = props;
+
+  const style: CSSProperties = {
+    position: 'fixed',
+    // NOTE: 좌우 여백을 고려한 너비 계산
+    width: `calc(100% - ${padding} * 2)`,
+    bottom,
+    left: '50%',
+    transform: 'translateX(-50%)',
+    maxWidth: `calc(${maxWidth}px - ${padding} * 2)`,
+    ...styleFromProps,
+  };
+
+  return <Button style={style} {...restProps} />;
+};

packages/web-domains/src/common/components/index.ts

@@ -1,2 +1,3 @@
 export { EmptyView } from './EmptyView/EmptyView';
 export { Modal } from './Modal/Modal';
+export { FloatingButton } from './FloatingButton/FloatingButton';

packages/web-domains/src/onboarding/features/components/Button/NextButton.tsx

@@ -3,6 +3,8 @@ import { useRouter, useSearchParams } from 'next/navigation';
 
 import { StepType, STEPS } from '@/onboarding/common/constants/steps';
 
+import { onBoardingButtonCss } from './styles';
+
 const stepOrder: StepType[] = [STEPS.QUESTION, STEPS.RESULT, STEPS.FRIENDSHIP, STEPS.ABOUT_ME];
 
 export const NextButton = () => {
@@ -19,7 +21,7 @@ export const NextButton = () => {
   };
 
   return (
-    <Button size="large" onClick={handleGoToNextPage}>
+    <Button size="large" css={onBoardingButtonCss} onClick={handleGoToNextPage}>
       다음
     </Button>
   );

packages/web-domains/src/onboarding/features/components/Button/StartButton.tsx

@@ -1,11 +1,12 @@
 'use client';
 
 import { Button } from '@sds/components';
-import { colors } from '@sds/theme';
 import { useRouter } from 'next/navigation';
 
 import { useOnBoardingCompleteMutation } from '@/onboarding/common/apis/mutations/useOnBoardingMutation';
 
+import { onBoardingButtonCss } from './styles';
+
 interface StartButtonProps {
   redirectUrl?: string;
 }
@@ -33,7 +34,7 @@ export const StartButton = (props: StartButtonProps) => {
   };
 
   return (
-    <Button size="large" color={colors.black} onClick={handleOnBoardingComplete}>
+    <Button size="large" css={onBoardingButtonCss} onClick={handleOnBoardingComplete}>
       시작하기
     </Button>
   );

packages/web-domains/src/onboarding/features/components/Button/styles.ts

@@ -0,0 +1,9 @@
+import { css } from '@emotion/react';
+import { size } from '@sds/theme';
+
+export const onBoardingButtonCss = css({
+  paddingLeft: size['4xl'],
+  paddingRight: size['4xl'],
+  margin: '0 auto',
+  width: 'initial',
+});

packages/web-domains/src/onboarding/features/components/OnBoardingContent/OnBoardingContent.tsx

@@ -4,10 +4,12 @@ import { BackGroundImage } from '../BackGroundImage/BackGroundImage';
 
 interface OnBoardingContentProps {
   imageUrl?: string | StaticImageData;
+  imageWidth?: number | string;
+  imageTopPosition?: number;
   bgImageUrl?: string | StaticImageData;
 }
 export const OnBoardingContent = (props: OnBoardingContentProps) => {
-  const { imageUrl, bgImageUrl } = props;
+  const { imageUrl, bgImageUrl, imageWidth, imageTopPosition } = props;
 
   if (!imageUrl) {
     return null;
@@ -24,11 +26,12 @@ export const OnBoardingContent = (props: OnBoardingContentProps) => {
       <div
         css={{
           position: 'relative',
-          width: '90%',
+          width: imageWidth ?? '90%',
           maxWidth: '400px',
           height: '100%',
           left: '50%',
           transform: 'translate(-50%, 0)',
+          top: imageTopPosition,
         }}
       >
         <Image src={imageUrl} alt="on-boarding-img" fill priority style={{ objectFit: 'contain' }} />

packages/web-domains/src/onboarding/features/containers/OnBoardingContainer/OnBoardingFriendShipContainer.tsx

@@ -12,8 +12,8 @@ import { OnBoardingContent } from '../../components/OnBoardingContent/OnBoarding
 export const OnBoardingFriendShipContainer = () => {
   return (
     <Fragment>
-      <Header Icon={<HandIcon />} title="릴레이 질문으로" subTitle="나만의 자기소개서 완성!" />
-      <OnBoardingContent imageUrl={OnBoardingImage} bgImageUrl={BgImage} />
+      <Header Icon={<HandIcon />} title="친해지고 싶은 모임원을 찾아" subTitle="손 흔들어 인사해보세요!" />
+      <OnBoardingContent imageUrl={OnBoardingImage} imageWidth="50%" imageTopPosition={-69} bgImageUrl={BgImage} />
     </Fragment>
   );
 };

packages/web-domains/src/onboarding/features/containers/OnBoardingContainer/OnBoardingQuestionContainer.tsx

@@ -12,7 +12,7 @@ export const OnBoardingQuestionContainer = () => {
   return (
     <Fragment>
       <Header Icon={<QuestionIcon />} title="모임원들에게" subTitle="궁금한 것을 물어보면" />
-      <OnBoardingContent imageUrl={OnBoardingImage} bgImageUrl={BgImage} />
+      <OnBoardingContent imageUrl={OnBoardingImage} imageTopPosition={-69} bgImageUrl={BgImage} />
     </Fragment>
   );
 };