style: 전체 페이지, 컴포넌트 레이아웃 통일

src/components/button/Button.tsx

@@ -22,7 +22,7 @@ const buttonVariants = cva(
         md: 'px-4 py-2 !text-base h-10',
         lg: 'px-6 py-3 !text-lg h-12',
         xl: 'px-8 py-4 !text-xl h-14',
-        full: 'w-full px-4 py-2 !text-base h-10',
+        full: 'w-full !px-3.5 !py-1 !text-2xl !h-12',
         'full-lg': 'w-full px-6 py-3 !text-lg h-12',
       },
       font: {

src/components/common/EmptyStateMessage.tsx

@@ -10,6 +10,7 @@ interface EmptyStateMessageProps {
   titleColor?: string;
   subtitleColor?: string;
   subtitleFont?: 'regular' | 'bold';
+  customPadding?: boolean;
 }
 
 const EmptyStateMessage = ({
@@ -22,6 +23,7 @@ const EmptyStateMessage = ({
   titleColor = 'text-line',
   subtitleColor = 'text-line',
   subtitleFont = 'bold',
+  customPadding = false,
 }: EmptyStateMessageProps) => {
   const iconSizeClasses = {
     sm: 'w-24 h-20',
@@ -30,7 +32,9 @@ const EmptyStateMessage = ({
   };
 
   return (
-    <div className="flex flex-col items-center justify-center py-20">
+    <div
+      className={`flex flex-col items-center justify-center ${customPadding ? 'py-10' : 'py-20'}`}
+    >
       <div
         className={`${iconSizeClasses[iconSize]} mb-6 flex items-center justify-center`}
       >
@@ -50,7 +54,12 @@ const EmptyStateMessage = ({
           <p
             className={`font-hana-${subtitleFont} !mb-0 text-2xl ${subtitleColor}`}
           >
-            {subtitle}
+            {subtitle.split('\n').map((line, index) => (
+              <span key={index}>
+                {line}
+                {index < subtitle.split('\n').length - 1 && <br />}
+              </span>
+            ))}
           </p>
         )}
       </div>

src/features/album/components/SharedAlbum.tsx

@@ -5,12 +5,11 @@ import Button from '@/components/button/Button';
 import EmptyStateMessage from '@/components/common/EmptyStateMessage';
 import type { Photo } from '@/features/album/apis/albumApi';
 import AlbumDetailPage from '@/features/album/components/AlbumDetailPage';
+import FamilyRegistrationBottomSheet from '@/features/album/components/FamilyRegistrationBottomSheet';
 import PhotoUploadPage from '@/features/album/components/PhotoUploadPage';
 import { useAlbums } from '@/features/album/hooks/useAlbums';
 import { useGroupInfo } from '@/features/group-join/hooks/useGroupInfo';
 
-import FamilyRegistrationBottomSheet from './FamilyRegistrationBottomSheet';
-
 type FilterType = 'all' | string;
 
 const SharedAlbum = () => {
@@ -203,7 +202,7 @@ const SharedAlbum = () => {
             subtitle={
               selectedFilter === 'all'
                 ? '가족들과 추억을 공유해 보세요'
-                : '다른 가족 구성원의 글을 확인해 보세요'
+                : '다른 가족의 글을 확인해 보세요'
             }
           />
         )}

src/features/auth/components/BirthdayInput.tsx

@@ -38,14 +38,14 @@ export const BirthdayInput = ({
 
   return (
     <div className="flex h-full flex-col">
-      <div className="flex-grow space-y-6">
-        <div className="bg-theme-secondary mx-auto flex h-16 w-16 items-center justify-center rounded-full">
-          <img src={birthdayIcon} alt="birthday" className="h-10 w-10" />
+      <div className="flex-grow">
+        <div className="bg-theme-secondary mx-auto my-15 flex h-24 w-24 items-center justify-center rounded-full">
+          <img src={birthdayIcon} alt="birthday" className="h-11 w-11" />
         </div>
-        <p className="font-hana-regular text-left text-3xl">
+        <p className="font-hana-regular !mb-9.5 text-left text-3xl">
           <span className="font-hana-bold">생년월일</span>을 입력해 주세요
         </p>
-        <div className="space-y-4">
+        <div className="space-y-8">
           <div className="flex items-center gap-2">
             <BoxInput
               ref={yearInputRef}
@@ -82,9 +82,8 @@ export const BirthdayInput = ({
       </div>
       <Button
         label="다 음"
-        size="full-lg"
+        size="full"
         intent="green"
-        font="regular"
         onClick={onNext}
         disabled={birthday.length !== 10}
       />

src/features/auth/components/MonthlyCostInput.tsx

@@ -35,11 +35,11 @@ export const MonthlyCostInput = ({
 
   return (
     <div className="flex h-full flex-col">
-      <div className="flex-grow space-y-6">
-        <div className="bg-theme-secondary mx-auto flex h-16 w-16 items-center justify-center rounded-full">
-          <img src={coinIcon} alt="wallet" className="h-10 w-10" />
+      <div className="flex-grow">
+        <div className="bg-theme-secondary mx-auto my-15 flex h-24 w-24 items-center justify-center rounded-full">
+          <img src={coinIcon} alt="coin" className="h-11 w-11" />
         </div>
-        <p className="font-hana-regular text-left text-3xl">
+        <p className="font-hana-regular !mb-9.5 text-left text-3xl">
           <span className="font-hana-bold">월 생활비</span>를 입력해 주세요
         </p>
         <div className="flex items-center gap-2">
@@ -53,16 +53,15 @@ export const MonthlyCostInput = ({
           <span className="font-hana-regular text-3xl">원</span>
         </div>
       </div>
-      <div className="font-hana-regular mb-4">
+      <div className="font-hana-regular text-text-primary mb-4 text-base">
         <p>
           은퇴 후 자금 설계 이전이라면, <br />
           아래 버튼을 클릭해 진단을 먼저 받아주세요
         </p>
         <Button
           label="자금 설계 →"
-          size="full-lg"
+          size="full"
           intent="mint"
-          font="regular"
           onClick={() =>
             window.open(
               'https://pension.kebhana.com/rpc/hhom/kr/rpc02060201.do',
@@ -73,9 +72,8 @@ export const MonthlyCostInput = ({
       </div>
       <Button
         label="완료"
-        size="full-lg"
+        size="full"
         intent="green"
-        font="regular"
         onClick={onNext}
         disabled={!cost}
       />

src/features/auth/components/NameInput.tsx

@@ -20,11 +20,11 @@ export const NameInput = ({ name, onNameChange, onNext }: NameInputProps) => {
 
   return (
     <div className="flex h-full flex-col">
-      <div className="flex-grow space-y-6">
-        <div className="bg-theme-secondary mx-auto flex h-16 w-16 items-center justify-center rounded-full">
-          <img src={nameIcon} alt="message" className="h-10 w-10" />
+      <div className="flex-grow">
+        <div className="bg-theme-secondary mx-auto my-15 flex h-24 w-24 items-center justify-center rounded-full">
+          <img src={nameIcon} alt="name" className="h-11 w-11" />
         </div>
-        <p className="font-hana-regular text-left text-3xl">
+        <p className="font-hana-regular !mb-9.5 text-left text-3xl">
           <span className="font-hana-bold">성함</span>을 입력해 주세요
         </p>
         <Input
@@ -37,9 +37,8 @@ export const NameInput = ({ name, onNameChange, onNext }: NameInputProps) => {
       </div>
       <Button
         label="다 음"
-        size="full-lg"
+        size="full"
         intent="green"
-        font="regular"
         onClick={onNext}
         disabled={!name}
       />

src/features/auth/components/PasswordInput.tsx

@@ -33,11 +33,11 @@ export const PasswordInput = ({
   };
   return (
     <div className="flex h-full flex-col">
-      <div className="flex-grow space-y-6">
-        <div className="bg-theme-secondary mx-auto flex h-16 w-16 items-center justify-center rounded-full">
-          <img src={passwordIcon} alt="message" className="h-10 w-10" />
+      <div className="flex-grow">
+        <div className="bg-theme-secondary mx-auto my-15 flex h-24 w-24 items-center justify-center rounded-full">
+          <img src={passwordIcon} alt="password" className="h-11 w-11" />
         </div>
-        <p className="font-hana-regular text-left text-3xl">
+        <p className="font-hana-regular !mb-9.5 text-left text-3xl">
           <span className="font-hana-bold">비밀번호</span>를 설정해주세요
         </p>
         <BoxInput
@@ -48,7 +48,7 @@ export const PasswordInput = ({
           isPassword
         />
         {pw.length === 6 ? (
-          <div className="mt-4">
+          <div className="mt-8">
             <p className="font-hana-regular text-left text-3xl">
               <span className="font-hana-bold">다시 한 번</span> 확인해 주세요
             </p>
@@ -65,9 +65,8 @@ export const PasswordInput = ({
       </div>
       <Button
         label="확 인"
-        size="full-lg"
+        size="full"
         intent="green"
-        font="regular"
         onClick={onNext}
         disabled={pw.length !== 6 || pw !== checkPw}
       />

src/features/auth/components/PhoneInput.tsx

@@ -54,11 +54,11 @@ export const PhoneInput = ({
 
   return (
     <div className="flex h-full flex-col">
-      <div className="flex-grow space-y-6">
-        <div className="bg-theme-secondary mx-auto flex h-16 w-16 items-center justify-center rounded-full">
-          <img src={phoneIcon} alt="phone" className="h-10 w-10" />
+      <div className="flex-grow">
+        <div className="bg-theme-secondary mx-auto my-15 flex h-24 w-24 items-center justify-center rounded-full">
+          <img src={phoneIcon} alt="phone" className="h-11 w-11" />
         </div>
-        <p className="font-hana-regular pt-4 text-left text-3xl">
+        <p className="font-hana-regular !mb-9.5 text-left text-3xl">
           <span className="font-hana-bold">전화번호</span>를 입력해주세요
         </p>
         <Input
@@ -72,9 +72,8 @@ export const PhoneInput = ({
       </div>
       <Button
         label="확 인"
-        size="full-lg"
+        size="full"
         intent="green"
-        font="regular"
         onClick={buttonClick}
         disabled={phoneNumber.length < 10} // 전화번호가 입력되어야 활성화
       />

src/features/auth/components/PhoneVerification.tsx

@@ -61,34 +61,34 @@ export const PhoneVerification = ({
 
   return (
     <div className="flex h-full flex-col">
-      <div className="flex-grow space-y-6">
-        <div className="bg-theme-secondary mx-auto flex h-16 w-16 items-center justify-center rounded-full">
-          <img src={messageIcon} alt="message" className="h-10 w-10" />
+      <div className="flex-grow">
+        <div className="bg-theme-secondary mx-auto my-15 flex h-24 w-24 items-center justify-center rounded-full">
+          <img src={messageIcon} alt="message" className="h-11 w-11" />
         </div>
-        <p className="font-hana-regular text-left text-3xl">
+        <p className="font-hana-regular !mb-9.5 text-left text-3xl">
           <span className="font-hana-bold">{phoneNumber}</span>로 받은 <br />
           <span className="font-hana-bold">인증번호</span>를 입력해 주세요
         </p>
         <BoxInput ref={boxInputRef} length={6} onChange={setPin} value={pin} />
+      </div>
+      <div className="flex flex-col gap-7">
         <div className="text-center">
           <Button
             label="인증번호 재전송"
-            font="regular"
-            size="full-lg"
+            size="full"
             intent="gray"
             onClick={handleResend}
           ></Button>
         </div>
+        <Button
+          label="확 인"
+          size="full"
+          intent="green"
+          onClick={handleConfirm}
+          disabled={pin.length !== 6 || verificationConfirmMutation.isPending} // 6자리 입력 & 로딩 중 아닐 때 활성화
+          loading={verificationConfirmMutation.isPending}
+        />
       </div>
-      <Button
-        label="확 인"
-        size="full-lg"
-        intent="green"
-        font="regular"
-        onClick={handleConfirm}
-        disabled={pin.length !== 6 || verificationConfirmMutation.isPending} // 6자리 입력 & 로딩 중 아닐 때 활성화
-        loading={verificationConfirmMutation.isPending}
-      />
     </div>
   );
 };

src/features/auth/components/RegisterCom.tsx

@@ -8,7 +8,7 @@ export default function RegisterCom() {
   return (
     <div className="flex h-full flex-col">
       <div className="flex-grow space-y-6 text-left">
-        <p className="font-hana-regular text-3xl">
+        <p className="font-hana-regular !mt-9 text-3xl">
           <span className="font-hana-bold">회원가입</span>을 완료했어요
           <br />
           <span className="font-hana-bold">로그인</span>하고 서비스를
@@ -21,9 +21,8 @@ export default function RegisterCom() {
       </div>
       <Button
         label="로그인하러 가기"
-        size="full-lg"
+        size="full"
         intent={'green'}
-        font="regular"
         onClick={() => navigate('/login')}
       />
     </div>

src/features/bucket-create/components/BoxInfo.tsx

@@ -108,9 +108,8 @@ export const BoxInfo = ({
       <Button
         label="확 인"
         disabled={boxName.length === 0}
-        size="full-lg"
+        size="full"
         intent="green"
-        font="regular"
         onClick={onNext}
       />
     </div>

src/features/bucket-create/components/ConfirmBucket.tsx

@@ -37,13 +37,7 @@ export const ConfirmBucket = ({ title, onSubmit }: ConfirmBucketProps) => {
         </div>
         <img src={confettiGif} alt={'축하해요!'} />
       </div>
-      <Button
-        label="확 인"
-        size="full-lg"
-        font="regular"
-        intent="green"
-        onClick={goHome}
-      />
+      <Button label="확 인" size="full" intent="green" onClick={goHome} />
     </div>
   );
 };

src/features/bucket-create/components/CreateBox.tsx

@@ -68,18 +68,16 @@ export const CreateBox = ({
 
       <div className="flex w-full gap-2">
         <Button
-          label="취 소"
-          size="lg"
+          label="취소"
+          size="full"
           intent="gray"
-          font="regular"
           onClick={() => navigate('/home')}
           className="w-1/4"
         />
         <Button
           label="확 인"
-          size="lg"
+          size="full"
           intent="green"
-          font="regular"
           onClick={(e) => setBottomVisible(true)}
           className="w-3/4"
         />
@@ -88,7 +86,7 @@ export const CreateBox = ({
         isOpen={bottomVisible}
         onClose={() => setBottomVisible(false)}
       >
-        <div className="flex h-full flex-col items-center">
+        <div className="mt-4 flex h-full flex-col items-center">
           <p className="font-hana-regular !mb-0 w-full text-left text-3xl">
             <span className="font-hana-bold">{title}</span>
             <br />
@@ -102,8 +100,7 @@ export const CreateBox = ({
         </div>
         <Button
           label="확 인"
-          size="full-lg"
-          font="regular"
+          size="full"
           intent="green"
           onClick={() => {
             setBottomVisible(false);