refactor: 모든 페이지 퍼블리싱 리팩토링

design-system/ui/buttons/HorizontalCardButton.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { flexRowStart } from '../../styles/flex';
+import { flexRow } from '../../styles/flex';
 
 interface CardButtonProps {
   iconPath: React.ReactElement;
@@ -20,7 +20,7 @@ export default function HorizontalCardButton({
   return (
     <button
       className={`
-      ${flexRowStart}
+      ${flexRow}
       rounded-default font-bold w-full 
       hover:text-main
       sm:text-sm sm:px-3 sm:h-9

design-system/ui/buttons/TertiaryButton.tsx

@@ -3,7 +3,7 @@ interface TertiaryButtonProps {
   type: 'button' | 'submit';
   color: 'pink' | 'black';
   size: 'small' | 'medium' | 'large';
-  onClick?: () => void;
+  onClick?: React.MouseEventHandler<HTMLButtonElement>;
   className?: string;
 }
 

design-system/ui/modals/QrModal.tsx

@@ -55,48 +55,48 @@ const QrModal = ({
         {iconPath1 && <div className="w-full">{iconPath1}</div>}
         {iconPath2 && <div className={`ml-[8%] -mt-[176%] ${isChecked ? '' : 'opacity-50'}`}>{iconPath2}</div>}
         <div className={`${flexColumn} justify-start px-6 ${isChecked ? '' : 'opacity-50'}`}>
-          <div className={`${flexRowSpaceBetweenCenter} w-full mt-[21%]`}>
+          <div className={`${flexRowSpaceBetweenCenter} w-full mt-[22%]`}>
             <h1 className="truncate max-w-48 mr-2 font-semibold">{title}</h1>
             <Countdown children={`${isCountdownChecked ? 'D-5' : '완료'}`} isChecked={isCountdownChecked} />
           </div>
-          <h2 className="text-deDayTextDark text-xs font-medium mb-1">{hostName}</h2>
+          <h2 className="text-deDayTextDark text-xs font-medium mb-2">{hostName}</h2>
           <div className="space-y-1 text-deDayTextDark">
             <IconText
               size="xSmall"
               iconPath={<img src={qr_calendar} alt="qr_calendar" />}
               children={formattedDate}
-              className="text-10"
+              className="text-11"
             ></IconText>
             <IconText
               size="xSmall"
               iconPath={<img src={qr_location} alt="qr_location" />}
               children={location}
-              className="text-10"
+              className="text-11"
             ></IconText>
             <IconText
               size="xSmall"
               iconPath={<img src={qr_ticket} alt="qr_ticket" />}
               children={ticketName}
-              className="text-10"
+              className="text-11"
             ></IconText>
             <span className="text-sm font-bold">{formattedPrice}원</span>
             <hr />
             <IconText
               size="xSmall"
               iconPath={<img src={qr_check} alt="qr_check" />}
               children={isApproved ? '승인 됨' : '승인 안됨'}
-              className="text-10"
+              className="text-11"
             ></IconText>
             <IconText
               size="xSmall"
               iconPath={<img src={qr_check} alt="qr_check" />}
               children={isCheckIn ? '체크인 완료' : '체크인 미완료'}
-              className="text-10"
+              className="text-11"
             ></IconText>
           </div>
         </div>
       </div>
-      <span onClick={onClick} className="text-white text-xs mt-3 underline cursor-pointer">
+      <span onClick={onClick} className="text-white text-xs mt-6 underline cursor-pointer">
         닫기
       </span>
     </div>

design-system/ui/textFields/DefaultTextField.tsx

@@ -34,10 +34,10 @@ const DefaultTextField = forwardRef<HTMLInputElement, DefaultTextFieldProps>(
   ) => {
     return (
       <div>
-        <label className={`block px-1 font-semibold text-gray-700 ${labelClassName}`}>{label}</label>
+        <label className={`block px-1 text-sm font-semibold text-gray-700 ${labelClassName}`}>{label}</label>
         <label className="block px-1 mb-1 font-medium text-placeholderText sm:text-10 md:text-13">{detail}</label>
         <div className={`flex items-center justify-center `}>
-          {leftText && <div className="w-20 text-base font-bold whitespace-nowrap">{leftText}</div>}
+          {leftText && <div className="w-24 text-base font-bold whitespace-nowrap">{leftText}</div>}
           <input
             ref={ref}
             value={value}

design-system/ui/textFields/MultilineTextField.tsx

@@ -15,7 +15,7 @@ const MultilineTextField = forwardRef<HTMLTextAreaElement, MultilineTextFieldPro
   ({ label, detail, value, onChange, onKeyDown, disabled = false, placeholder = '', className = '', ...rest }, ref) => {
     return (
       <div className={`${className}`}>
-        <label className="block px-1 font-semibold text-gray-700 sm:text-base md:text-lg lg:text-lg">{label}</label>
+        <label className="block px-1 font-semibold text-gray-700 text-base lg:text-lg md:mb-2">{label}</label>
         <label className="block px-1 mb-1 font-medium text-placeholderText sm:text-10 md:text-13 lg:text-13">
           {detail}
         </label>

design-system/ui/textFields/SearchTextField.tsx

@@ -20,7 +20,7 @@ const SearchTextField = forwardRef<HTMLInputElement, SearchTextFieldProps>(
           onChange={onChange}
           placeholder={placeholder}
           {...rest}
-          className="w-full sm:h-6 md:h-7 border-[0.3px] border-black rounded-[3px] px-2 outline-none placeholder:text-placeholderText text-xs font-light"
+          className="w-full h-7 md:h-8 border-[0.3px] border-black rounded-[3px] px-2 outline-none placeholder:text-placeholderText text-xs font-light"
         />
         <div className="absolute cursor-pointer right-2">{iconPath}</div>
       </div>

design-system/ui/texts/IconText.tsx

@@ -17,8 +17,8 @@ const IconText = ({ size = 'medium', iconPath, children, className }: IconTextPr
   };
 
   return (
-    <button className={`${flexRowStart} ${sizeClasses[size]}`}>
-      <div className="w-ful h-full mr-2">{iconPath}</div>
+    <button className={`${flexRowStart}`}>
+      <div className={`w-ful h-full ${sizeClasses[size]}`}>{iconPath}</div>
       <span className={`text-left whitespace-nowrap ${className}`}>{children}</span>
     </button>
   );

package.json

@@ -16,6 +16,7 @@
     "@tanstack/react-query": "^5.61.3",
     "autoprefixer": "^10.4.20",
     "date-fns": "^4.1.0",
+    "framer-motion": "^12.4.7",
     "lodash": "^4.17.21",
     "postcss": "^8.4.49",
     "react": "^18.3.1",