diff --git a/.storybook/preview.ts b/.storybook/preview.ts
index 607d7c3..879778b 100644
--- a/.storybook/preview.ts
+++ b/.storybook/preview.ts
@@ -1,5 +1,5 @@
 import type { Preview } from '@storybook/react';
-import '../src/app/globals.css';
+import './storybook-globals.css';
 
 const preview: Preview = {
   parameters: {
diff --git a/.storybook/storybook-globals.css b/.storybook/storybook-globals.css
new file mode 100644
index 0000000..bd74514
--- /dev/null
+++ b/.storybook/storybook-globals.css
@@ -0,0 +1,14 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --layout-max-w: 100%;
+}
+
+@layer base {
+  .layout {
+    @apply mx-auto min-h-[100dvh] w-full;
+    max-width: var(--layout-max-w);
+  }
+}
diff --git a/src/app/globals.css b/src/app/globals.css
index 9aa8a28..a69f454 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -2,8 +2,13 @@
 @tailwind components;
 @tailwind utilities;
 
+:root {
+  --layout-max-w: 480px;
+}
+
 @layer base {
   .layout {
-    @apply max-w-[480px] min-h-[100dvh] w-full mx-auto;
+    @apply mx-auto min-h-[100dvh] w-full;
+    max-width: var(--layout-max-w);
   }
 }
diff --git a/src/assets/close_20.svg b/src/assets/close_20.svg
new file mode 100644
index 0000000..8515bbb
--- /dev/null
+++ b/src/assets/close_20.svg
@@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.34478 4.34467C4.63768 4.05178 5.1125 4.05173 5.40533 4.34456L15.6562 14.5954C15.949 14.8882 15.949 15.3631 15.6561 15.6559C15.3632 15.9488 14.8883 15.9489 14.5955 15.6561L4.34467 5.40522C4.05184 5.11239 4.05189 4.63756 4.34478 4.34467Z" fill="#A9AABC"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.34467 15.6562C4.05178 15.3633 4.05173 14.8885 4.34456 14.5956L14.5954 4.3448C14.8882 4.05197 15.3631 4.05202 15.6559 4.34492C15.9488 4.63781 15.9489 5.11263 15.6561 5.40546L5.40522 15.6563C5.11239 15.9491 4.63756 15.9491 4.34467 15.6562Z" fill="#A9AABC"/>
+</svg>
diff --git a/src/assets/plus.svg b/src/assets/plus_20.svg
similarity index 100%
rename from src/assets/plus.svg
rename to src/assets/plus_20.svg
diff --git a/src/components/atoms/bottomSheet/style.css b/src/components/atoms/bottomSheet/style.css
index c5b03ff..609f9af 100644
--- a/src/components/atoms/bottomSheet/style.css
+++ b/src/components/atoms/bottomSheet/style.css
@@ -2,11 +2,10 @@
   --rsbs-max-w: var(--layout-max-w);
   --rsbs-content-opacity: 1;
   --rsbs-backdrop-bg: rgba(0, 0, 0, 0.6);
-  --rsbs-bg: #1F2028;
-  --rsbs-handle-bg: #8C8EA6;
-  --rsbs-max-w: auto;
-  --rsbs-ml: env(safe-area-inset-left);
-  --rsbs-mr: env(safe-area-inset-right);
+  --rsbs-bg: #2c2e3a;
+  --rsbs-handle-bg: #8c8ea6;
+  --rsbs-ml: auto;
+  --rsbs-mr: auto;
   --rsbs-overlay-rounded: 16px;
 
   /* 스크롤바 없음 */
diff --git a/src/features/comment/component/BottomContent.tsx b/src/features/comment/component/BottomContent.tsx
new file mode 100644
index 0000000..dd179b9
--- /dev/null
+++ b/src/features/comment/component/BottomContent.tsx
@@ -0,0 +1,195 @@
+import React, { useEffect, useRef, ChangeEvent } from 'react';
+import { BottomSheet } from '@/components/atoms/bottomSheet';
+import Close from '@/assets/close_20.svg';
+
+const DEFAULT_BOTTOM_SHEET_HEIGHT = 290;
+const MAX_IMAGE = 9;
+
+interface BottomContentProps {
+  images: string[];
+  setImages: (images: string[]) => void;
+  showGallery: boolean;
+  setShowGallery: (value: boolean) => void;
+  setBottomSheetHeight: (height: number) => void;
+}
+
+export const BottomContent = ({
+  images,
+  showGallery,
+  setImages,
+  setShowGallery,
+  setBottomSheetHeight,
+}: BottomContentProps) => {
+  const observerRef = useRef<MutationObserver | null>(null);
+  const isFirstOpenRef = useRef(true);
+
+  useEffect(() => {
+    if (!showGallery && observerRef.current) {
+      isFirstOpenRef.current = true;
+      observerRef.current.disconnect();
+      observerRef.current = null;
+    }
+  }, [showGallery]);
+
+  const observeHeightChanges = () => {
+    const bottomSheetElement = document.querySelector(
+      '[data-rsbs-root="true"]',
+    ) as HTMLElement;
+
+    if (!bottomSheetElement) {
+      return;
+    }
+
+    observerRef.current?.disconnect();
+
+    observerRef.current = new MutationObserver((mutations) => {
+      mutations.forEach((mutation) => {
+        if (mutation.attributeName === 'style') {
+          if (isFirstOpenRef.current) {
+            setBottomSheetHeight(DEFAULT_BOTTOM_SHEET_HEIGHT);
+            return;
+          }
+
+          const computedStyle = getComputedStyle(bottomSheetElement);
+          const newHeight = parseInt(
+            computedStyle.getPropertyValue('--rsbs-overlay-h'),
+            10,
+          );
+          const translateY = parseInt(
+            computedStyle.getPropertyValue('--rsbs-overlay-translate-y'),
+            10,
+          );
+
+          setBottomSheetHeight(
+            newHeight === DEFAULT_BOTTOM_SHEET_HEIGHT
+              ? newHeight - translateY
+              : newHeight,
+          );
+        }
+      });
+    });
+
+    observerRef.current.observe(bottomSheetElement, {
+      attributes: true,
+      attributeOldValue: true,
+    });
+  };
+
+  const handleSpringStart = () => {
+    observeHeightChanges();
+  };
+
+  const handleSpringEnd = () => {
+    if (showGallery) {
+      isFirstOpenRef.current = false;
+    }
+  };
+
+  return (
+    <BottomSheet
+      open={showGallery}
+      onSpringStart={handleSpringStart}
+      onSpringEnd={handleSpringEnd}
+      onDismiss={() => setShowGallery(false)}
+      snapPoints={({ maxHeight }) => [DEFAULT_BOTTOM_SHEET_HEIGHT, maxHeight]}
+      defaultSnap={() => DEFAULT_BOTTOM_SHEET_HEIGHT}
+      blocking={false}
+      header={
+        <BottomSheetHeader
+          images={images}
+          setImages={setImages}
+          setShowGallery={setShowGallery}
+        />
+      }
+    >
+      <BottomSheetContent images={images} setImages={setImages} />
+    </BottomSheet>
+  );
+};
+
+const BottomSheetHeader = ({
+  images,
+  setImages,
+  setShowGallery,
+}: {
+  images: string[];
+  setImages: (images: string[]) => void;
+  setShowGallery: (value: boolean) => void;
+}) => {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const openNativeGallery = () => {
+    inputRef.current?.click();
+  };
+
+  const handleImageUpload = (event: ChangeEvent<HTMLInputElement>) => {
+    if (!event.target.files) return;
+
+    const fileArray = Array.from(event.target.files).map((file) =>
+      URL.createObjectURL(file),
+    );
+    setImages(images ? [...images, ...fileArray] : [...fileArray]);
+    setShowGallery(true);
+  };
+
+  return (
+    <div className='flex items-center justify-between px-1 text-lg font-medium'>
+      <input
+        ref={inputRef}
+        type='file'
+        accept='image/*'
+        multiple
+        className='hidden'
+        onChange={handleImageUpload}
+      />
+
+      <div>
+        <span className='text-white'>사진</span>
+        <span className='ml-3 tracking-[2px] text-gray-700'>
+          <span className='text-primary-500'>{images?.length ?? 0}</span>/
+          {MAX_IMAGE}
+        </span>
+      </div>
+
+      <button
+        className='h-[34px] w-[83px] rounded-md bg-gray-300 text-sm text-gray-800'
+        onClick={openNativeGallery}
+      >
+        사진 찾기
+      </button>
+    </div>
+  );
+};
+
+const BottomSheetContent = ({
+  images,
+  setImages,
+}: {
+  images: string[];
+  setImages: (images: string[]) => void;
+}) => {
+  return images.length ? (
+    <div className='mt-2 grid grid-cols-3 gap-[3px]'>
+      {images.map((src, index) => (
+        <div key={index} className='relative'>
+          <img
+            src={src}
+            alt={`User Update Image ${src}`}
+            className='h-32 w-full object-cover'
+          />
+          <button
+            className='absolute right-2 top-2 flex h-[28px] w-[28px] items-center justify-center rounded-full bg-gray-50'
+            onClick={() => setImages(images.filter((_, i) => i !== index))}
+          >
+            <Close />
+          </button>
+        </div>
+      ))}
+    </div>
+  ) : (
+    <div className='mt-[74px] text-center'>
+      <span className='text-base text-gray-600'>
+        앨범에서 사진을 찾아보세요.
+      </span>
+    </div>
+  );
+};
diff --git a/src/features/comment/component/CommentBox.stories.tsx b/src/features/comment/component/CommentBox.stories.tsx
index f2522e6..f01a8ed 100644
--- a/src/features/comment/component/CommentBox.stories.tsx
+++ b/src/features/comment/component/CommentBox.stories.tsx
@@ -1,4 +1,3 @@
-import { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { CommentBox } from './CommentBox';
 
@@ -14,11 +13,7 @@ export default meta;
 type Story = StoryObj<typeof CommentBox>;
 
 export const Default: Story = {
-  args: {
-    text: '',
-  },
-  render: (args) => {
-    const [text, setText] = useState(args.text);
-    return <CommentBox {...args} text={text} setText={setText} />;
+  render: () => {
+    return <CommentBox />;
   },
 };
diff --git a/src/features/comment/component/CommentBox.tsx b/src/features/comment/component/CommentBox.tsx
index fb9779a..33b2b77 100644
--- a/src/features/comment/component/CommentBox.tsx
+++ b/src/features/comment/component/CommentBox.tsx
@@ -1,38 +1,44 @@
-import Upload from '@/assets/upload.svg';
-import UploadActive from '@/assets/upload_active.svg';
-import { CommentInput } from '@/components/molecules/comment';
-import { ImageUploader } from './ImageUploader';
+import { useState } from 'react';
+import { BottomContent } from './BottomContent';
+import { TextFieldBottom } from './TextFieldBottom';
 
-interface CommentBoxProps {
-  text: string;
-  setText: (text: string) => void;
-}
+export const CommentBox = () => {
+  const [text, setText] = useState<string>('');
+  const [images, setImages] = useState<string[]>([]);
+  const [showGallery, setShowGallery] = useState(false);
+  const [bottomSheetHeight, setBottomSheetHeight] = useState(0);
 
-export const CommentBox = ({ text, setText }: CommentBoxProps) => {
-  const handleUploadText = () => {
-    // text upload
-    setText('');
+  const handleUpload = () => {
+    // text, image upload
+    if (text.trim()) {
+      setText('');
+    }
+    if (showGallery && images.length > 0) {
+      setImages([]);
+      setShowGallery(false);
+    }
   };
 
   return (
-    <div className='absolute bottom-0 flex w-full items-center justify-between gap-3 bg-gray-100 px-5 py-2'>
-      <ImageUploader />
-
-      <CommentInput
-        value={text}
-        onChange={setText}
-        placeholder='댓글 입력'
-        minHeight={20}
-        maxHeight={42}
-        maxLineCount={3}
+    <div
+      className='absolute bottom-[34px] w-full'
+      style={{ bottom: showGallery ? `${bottomSheetHeight}px` : '34px' }}
+    >
+      <TextFieldBottom
+        text={text}
+        setText={setText}
+        showGallery={showGallery}
+        setShowGallery={setShowGallery}
+        handleUpload={handleUpload}
       />
 
-      <div
-        className={`cursor-pointer rounded-full p-2 ${text.trim() ? 'bg-primary-400' : 'bg-primary-100'}`}
-        onClick={handleUploadText}
-      >
-        {text.trim() ? <UploadActive /> : <Upload />}
-      </div>
+      <BottomContent
+        images={images}
+        setImages={setImages}
+        showGallery={showGallery}
+        setShowGallery={setShowGallery}
+        setBottomSheetHeight={setBottomSheetHeight}
+      />
     </div>
   );
 };
diff --git a/src/features/comment/component/ImageUploader.tsx b/src/features/comment/component/ImageUploader.tsx
deleted file mode 100644
index 6764ab6..0000000
--- a/src/features/comment/component/ImageUploader.tsx
+++ /dev/null
@@ -1,98 +0,0 @@
-import { useState } from 'react';
-import Plus from '@/assets/plus.svg';
-
-export const ImageUploader = () => {
-  const [images, setImages] = useState<string[]>([]);
-  const [showGallery, setShowGallery] = useState(false);
-
-  const handleImageUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
-    if (!event.target.files) return;
-
-    const files = Array.from(event.target.files);
-    const fileArray = files.map((file) => URL.createObjectURL(file));
-
-    setImages((prev) => [...prev, ...fileArray]);
-    setShowGallery(true);
-  };
-
-  const openNativeGallery = () => {
-    const fileInput = document.getElementById('fileInput') as HTMLInputElement;
-    if (fileInput) {
-      fileInput.click();
-    }
-  };
-
-  const handleDeleteImage = (index: number) => {
-    setImages((prev) => prev.filter((_, i) => i !== index));
-  };
-
-  const handleGalleryClose = () => {
-    // 선택한 사진 닫는 기능
-    setImages([]);
-    setShowGallery(false);
-  };
-
-  const handleUploadImage = () => {
-    // upload Image : images 변수에 저장되어 있음
-    setImages([]);
-    setShowGallery(false);
-  };
-
-  return (
-    <>
-      <input
-        type='file'
-        accept='image/*'
-        multiple
-        id='fileInput'
-        className='hidden'
-        onChange={handleImageUpload}
-      />
-
-      <div
-        className='cursor-pointer rounded-full bg-gray-200 p-2'
-        onClick={openNativeGallery}
-      >
-        <Plus />
-      </div>
-
-      {showGallery && (
-        <div className='absolute bottom-0 left-0 z-50 w-full rounded-t-2xl bg-gray-200 py-5 shadow-lg'>
-          <div className='flex items-center justify-between px-5 py-[4.5px] text-center text-lg font-medium text-white'>
-            <button
-              className='h-8 w-[52px] text-gray-600'
-              onClick={handleGalleryClose}
-            >
-              닫기
-            </button>
-            <span>선택한 사진</span>
-            <button
-              className='h-8 w-[52px] rounded-full bg-primary-400 text-base'
-              onClick={handleUploadImage}
-            >
-              전송
-            </button>
-          </div>
-
-          <div className='mt-2 grid grid-cols-3 gap-[3px]'>
-            {images.map((src, index) => (
-              <div key={index} className='relative'>
-                <img
-                  src={src}
-                  alt='업로드 하고자 하는 사진'
-                  className='h-32 w-full object-cover'
-                />
-                <button
-                  className='absolute right-1 top-1 h-6 w-6 rounded-full bg-red-500 text-xs text-white'
-                  onClick={() => handleDeleteImage(index)}
-                >
-                  ✕
-                </button>
-              </div>
-            ))}
-          </div>
-        </div>
-      )}
-    </>
-  );
-};
diff --git a/src/features/comment/component/TextFieldBottom.tsx b/src/features/comment/component/TextFieldBottom.tsx
new file mode 100644
index 0000000..d4b7282
--- /dev/null
+++ b/src/features/comment/component/TextFieldBottom.tsx
@@ -0,0 +1,48 @@
+import { CommentInput } from '@/components/molecules/comment';
+import Close from '@/assets/close_20.svg';
+import Plus from '@/assets/plus_20.svg';
+import Upload from '@/assets/upload.svg';
+import UploadActive from '@/assets/upload_active.svg';
+
+interface TextFieldBottomProps {
+  text: string;
+  setText: (text: string) => void;
+  showGallery: boolean;
+  setShowGallery: (value: boolean) => void;
+  handleUpload: () => void;
+}
+
+export const TextFieldBottom = ({
+  text,
+  setText,
+  showGallery,
+  setShowGallery,
+  handleUpload,
+}: TextFieldBottomProps) => {
+  return (
+    <div className='flex items-center justify-between gap-3 bg-gray-100 px-5 py-2'>
+      <button
+        className='cursor-pointer rounded-full bg-gray-200 p-2'
+        onClick={() => setShowGallery(!showGallery)}
+      >
+        {showGallery ? <Close /> : <Plus />}
+      </button>
+
+      <CommentInput
+        value={text}
+        onChange={setText}
+        placeholder='댓글 입력'
+        minHeight={20}
+        maxHeight={42}
+        maxLineCount={3}
+      />
+
+      <button
+        className={`cursor-pointer rounded-full p-2 ${text.trim() ? 'bg-primary-400' : 'bg-primary-100'}`}
+        onClick={handleUpload}
+      >
+        {text.trim() ? <UploadActive /> : <Upload />}
+      </button>
+    </div>
+  );
+};