Production-release(v.0.0.3)

src/page/my/nickName-change.tsx

@@ -56,7 +56,7 @@ const NickNameChage = () => {
           <Input inputSize="lg" placeholder="닉네임을 입력하세요." />
         </div>
       </div>
-      <div className="fixed bottom-0 pb-[2rem] px-[2.4rem] ">
+      <div className="fixed w-full bottom-0 pb-[2rem] px-[2.4rem] ">
         <Button>저장하기</Button>
       </div>
     </div>

src/page/post-detail-page.tsx

@@ -132,9 +132,9 @@ const PostDetailPage = () => {
       <p className="h-[10.6rem] px-[2.4rem] py-[2rem] typo-h2 border-b">
         역삼동 공터에서 경도 할 사람 찾고 있어요!!(성인만)
       </p>
-      <div className="flex flex-col px-[2.4rem] justify-center">
+      <div className="flex items-center flex-col px-[2.4rem] justify-center">
         <DetailInfo />
-        <p className="typo-body1 w-[32.7rem] py-[2rem] border-b">
+        <p className="flex typo-body1  py-[2rem] border-b">
           {
             '역삼동 공터에서 경도 하실 분 구합니다~~ 20세 이상 성인분들만 모집하고 있어요! 즐겁게 하실 분들만 신청해주셨으면 좋겠어요~'
           }
@@ -144,9 +144,9 @@ const PostDetailPage = () => {
         <Comment comments={mockComments} />
       </div>
       {canApply && (
-        <div className="flex flex-col items-center pt-[2rem]">
+        <div className="flex flex-col items-center px-[2.4rem] pt-[2rem]">
           <Button>참가 신청하기</Button>
-          <div className="flex gap-[1.6rem] justify-center py-[1.4rem]">
+          <div className="flex w-full gap-[1.6rem] py-[1.4rem]">
             <Input inputSize="sm" placeholder="댓글을 입력해주세요" />
             <FloatingActionButton
               mode="inline"

src/shared/ui/button.tsx

@@ -14,7 +14,7 @@ const ButtonVariants = cva('rounded-[16px] typo-h3 text-white', {
       yellow: 'bg-yellow text-gray-950',
     },
     size: {
-      md: 'w-[32.7rem] h-[5.6rem]',
+      md: 'w-full h-[5.6rem]',
       sm: 'w-[27.6rem] h-[4.8rem]',
     },
   },

src/shared/ui/floatingActionButton.tsx

@@ -16,8 +16,8 @@ export function FloatingActionButton({
     <button
       onClick={onClick}
       className={cn(
-        'rounded-[24px] text-white w-[4.4rem] h-[4.4rem] flex justify-center items-center bg-primary',
-        mode === 'fixed' && 'fixed right-[2.4rem] bottom-[5.4rem] z-50',
+        'rounded-[24px] text-white w-[4.4rem] h-[4.4rem] flex justify-center items-center bg-primary shrink-0',
+        mode === 'fixed' && 'fixed right-[2.4rem] bottom-[5.4rem] 3-50',
       )}
     >
       {icon}

src/shared/ui/input.tsx

@@ -29,14 +29,14 @@ const baseInput = `
 
 const sizeStyles: Record<InputSize, string> = {
   ssm: 'w-[22.4rem] h-[4.8rem]',
-  sm: 'w-[26.3rem] px-[1.2rem]',
+  sm: 'w-full px-[1.2rem]',
   md: 'w-[26.7rem]',
-  lg: 'w-[32.7rem]',
+  lg: 'w-full',
 };
 
 const Input = ({ inputSize = 'md', icon, className, ...props }: InputProps) => {
   return (
-    <div className="relative group">
+    <div className="relative group w-full">
       {icon && (
         <span
           className="absolute left-[1.1rem] top-1/2

src/widgets/create/dropDown.tsx

@@ -26,7 +26,7 @@ export function DropDown({
         <span className="text-red"> *</span>
       </p>
       <button
-        className="flex items-center justify-between w-[32.7rem] border rounded-[16px] h-[5.6rem] p-[1.6rem]"
+        className="flex items-center justify-between w-full border rounded-[16px] h-[5.6rem] p-[1.6rem]"
         onClick={() => setOpen((prev) => !prev)}
       >
         <span className={value ? 'text-gray-950' : 'text-gray-300'}>

src/widgets/create/modal-button.tsx

@@ -9,7 +9,7 @@ interface ModalButtonProps {
 }
 
 const modalButtonVariants = cva(
-  'w-[32.7rem] h-[5.6rem] rounded-[16px] border px-[1.6rem] text-left typo-body1 transition-colors',
+  'w-full h-[5.6rem] rounded-[16px] border px-[1.6rem] text-left typo-body1 transition-colors',
   {
     variants: {
       hasValue: {

src/widgets/create/textarea.tsx

@@ -5,7 +5,7 @@ import type { ComponentProps } from 'react';
 type TextareaProps = ComponentProps<'textarea'>;
 
 const textVariants = cva(`
-    w-[32.7rem]
+    w-full
     h-[20rem]
     text-body1
     resize-none

src/widgets/main/bottom-sheet/contents/bottom-sheet-location-search.tsx

@@ -12,14 +12,15 @@ export function BottomSheetLocationSearch({
   onChange,
 }: BottomSheetLocationSearchProps) {
   return (
-    <div className="flex items-center justify-center h-[9.2rem] gap-[1.6rem]">
+    <div className="flex items-center px-[2.6rem] justify-center h-[9.2rem] gap-[1.6rem]">
       <Input
         inputSize={'sm'}
         value={value}
         onChange={(e) => onChange(e.target.value)}
         placeholder="동을 입력해주세요. 예) 역삼동"
       />
       <FloatingActionButton
+        mode="inline"
         icon={<LocationIcon width={'2rem'} height={'2rem'} />}
       />
     </div>

src/widgets/main/dropBotton.tsx

@@ -6,9 +6,12 @@ interface DropButtonProps {
 
 export function DropButton({ label, onClick }: DropButtonProps) {
   return (
-    <button className="flex px-[1.2rem] h-[4rem] items-center justify-center border border-gray-200 rounded-[12px] gap-[0.4rem]">
+    <button
+      onClick={onClick}
+      className="flex px-[1.2rem] h-[4rem] items-center justify-center border border-gray-200 rounded-[12px] gap-[0.4rem]"
+    >
       <span className="typo-body1">{label}</span>
-      <ChevronDown onClick={onClick} width={'2rem'} height={'2rem'} />
+      <ChevronDown width={'2rem'} height={'2rem'} />
     </button>
   );
 }