diff --git a/src/app/service/map/_components/bottom-sheet/BottomSheetHeader.tsx b/src/app/service/map/_components/bottom-sheet/BottomSheetHeader.tsx
index d49fb649..22bd4026 100644
--- a/src/app/service/map/_components/bottom-sheet/BottomSheetHeader.tsx
+++ b/src/app/service/map/_components/bottom-sheet/BottomSheetHeader.tsx
@@ -9,6 +9,7 @@ import { Phone, Star, StarHalf, ChevronRight } from 'lucide-react';
 import SquarePen from 'public/square-pen.svg';
 import { BottomSheetInnerProps } from '@/types/map/BottomSheetProps';
 import useReviewStore from '@/store/review/reviewStore';
+import { Rating } from '@mui/material';
 
 function BottomSheetHeader({ data }: BottomSheetInnerProps) {
   const {
@@ -72,20 +73,10 @@ function BottomSheetHeader({ data }: BottomSheetInnerProps) {
       </section>
       {/* 5개 빈 별공간 */}
       <section className="flex text-sm leading-5 font-semibold text-black">
-        <div className="relative">
-          <div className="flex gap-4px">
-            {Array.from({ length: 5 }, (_, index) => (
-              <Star key={index} fill="#C3C6CC" strokeWidth={0} />
-            ))}
-          </div>
-          {/* 별 점수에 따라 넣어야함 (로직 아직안함), 별점 점수도 바꿔야함 */}
-          <div className="flex gap-4px absolute top-0">
-            <Star fill="#FFCB29" strokeWidth={0} />
-            <Star fill="#FFCB29" strokeWidth={0} />
-            <StarHalf fill="#FFCB29" strokeWidth={0} />
-          </div>
-        </div>
-        별점 점수
+        <Rating value={score_average} readOnly />
+        <span className="ml-1 font-semibold content-center">
+          {score_average}
+        </span>
         <ChevronRight size={24} strokeWidth={1} />
       </section>
 
diff --git a/src/app/service/map/_components/bottom-sheet/BottomSheetReviewTab.tsx b/src/app/service/map/_components/bottom-sheet/BottomSheetReviewTab.tsx
index 4bcaf0d6..3f6189cc 100644
--- a/src/app/service/map/_components/bottom-sheet/BottomSheetReviewTab.tsx
+++ b/src/app/service/map/_components/bottom-sheet/BottomSheetReviewTab.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable @next/next/no-img-element */
 /* eslint-disable function-paren-newline */
 
 import { useToast } from '@/app/_components/ui/use-toast';
@@ -5,6 +6,7 @@ import { BottomSheetInnerProps } from '@/types/map/BottomSheetProps';
 import { ReviewListProps } from '@/types/review/ReviewProps';
 import { ReviewResponseType } from '@/types/review/review';
 import { ChevronDown, ChevronUp, Copy } from 'lucide-react';
+import Image from 'next/image';
 import { useState } from 'react';
 import { Map, MapMarker } from 'react-kakao-maps-sdk';
 
@@ -14,6 +16,56 @@ export default function BottomSheetReviewTab({
   data: ReviewResponseType;
 }) {
   const { reviews, gym_name, cursor } = data; // 리뷰 데이터
+  console.log('reviews', reviews);
 
-  return <div>d</div>;
+  return (
+    <div>
+      <div>
+        {reviews.map(review => (
+          <div key={review.id} className="flex flex-col items-center">
+            {/* 이미지 */}
+            {/* ToDo : 이미지 어떻게 보여질지 라이브러리 찾아봐야함 */}
+            {review.images &&
+              review.images.map((image, index) => (
+                <Image
+                  className="rounded-lg w-80 h-80"
+                  key={index}
+                  src={image}
+                  alt="review_img"
+                  width={320}
+                  height={320}
+                />
+              ))}
+            {/* 리뷰 작성자 */}
+            <div className="flex">
+              <Image
+                className="rounded-full"
+                src={review.writer.profile_image}
+                alt="profile_img"
+                width={24}
+                height={24}
+              />
+              <div>(*등급 정보없음..?)</div>
+              <p className="text-gray-900 font-semibold text-sm">
+                {review.writer.nickname}
+              </p>
+              <div className="text-gray-600 font-medium text-sm">
+                #(*태그 정보없음..?)
+              </div>
+            </div>
+            {/* 리뷰 내용 */}
+            <p>{review.content}</p>
+            {/* 리뷰에 대한 반응들 */}
+            <ul>
+              {review.review_reaction_count.map(reaction => (
+                <li key={reaction.type}>
+                  {reaction.type}: {reaction.count}
+                </li>
+              ))}
+            </ul>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
 }
diff --git a/src/app/service/map/_components/bottom-sheet/WriteModal.tsx b/src/app/service/map/_components/bottom-sheet/WriteModal.tsx
index 1e3102e0..4a172335 100644
--- a/src/app/service/map/_components/bottom-sheet/WriteModal.tsx
+++ b/src/app/service/map/_components/bottom-sheet/WriteModal.tsx
@@ -17,6 +17,7 @@ import ReviewRegisterModal from '@/app/_components/review/review-modal/ReviewReg
 import OneReview from '@/app/_components/review/review-modal/OneReview';
 import { Rating } from '@mui/material';
 import { ReviewRegisterType } from '@/types/review/review';
+import Image from 'next/image';
 /**
  * @description 지도 위에 띄위기 위해서 Modal로 구현을 합니다.
  * @param position 어느 방향에서 모달이 열릴지 결정합니다.
@@ -66,6 +67,56 @@ function WriteModal({ openPosition }: ReviewProps) {
   if (isLoadingMore || isEmpty) {
     return <ReviewModalSkeleton openPosition={openPosition} />;
   }
+  const [inputData, setInputData] = useState<{ value: string; count: number }>({
+    value: '',
+    count: 0,
+  });
+  const [textAreaData, setTextAreaData] = useState<{
+    value: string;
+    count: number;
+  }>({ value: '', count: 0 });
+
+  const onInputHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value;
+    setInputData({
+      value,
+      count: value.replace(/[\0-\x7f]|([0-\u07ff]|(.))/g, '$&$1$2').length,
+    });
+  };
+
+  const onTextAreaHandler = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    const value = e.target.value;
+    setTextAreaData({
+      value,
+      count: value.replace(/[\0-\x7f]|([0-\u07ff]|(.))/g, '$&$1$2').length,
+    });
+  };
+  const [postImg, setPostImg] = useState<File[]>([]); // 서버 저장하는 파일 상태
+  const [previewImg, setPreviewImg] = useState<string[]>([]); // 미리보기 이미지를 생성하기 위한 상태 (원본이미지용량이 크기에 따로 분리)
+
+  const uploadFile = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const fileArr = e.target.files;
+    if (fileArr) {
+      const files = Array.from(fileArr);
+      setPostImg(files);
+
+      const newPreviewImg: string[] = [];
+
+      // 한 번만 생성하고 재사용
+      const fileReader = new FileReader();
+      fileReader.onload = () => {
+        const result = fileReader.result as string;
+        setPreviewImg([...previewImg, result]);
+      };
+
+      // 파일마다 미리보기 이미지 생성
+      files.forEach(file => {
+        fileReader.readAsDataURL(file);
+      });
+    }
+  };
+
+  const handleFileUpload = (e: React.ChangeEvent<HTMLInputElement>) => {};
 
   return (
     <>
@@ -74,19 +125,94 @@ function WriteModal({ openPosition }: ReviewProps) {
         gym_name={reviews[0].data.data.gym_name}
       />
       <div className={modalClassName}>
-        {/* Top */}
         <div className="w-full bg-white max-w-[768px] z-[101] h-[3.5rem] fixed shadow flex items-center justify-center">
           <button type="button" className={positionClassName} onClick={reset}>
             {openPosition === 'center' ? <ChevronDown /> : <ChevronLeft />}
           </button>
-          {reviews[0].data.data.gym_name} 글쓰기
+          <div className="font-semibold text-lg">글쓰기</div>
         </div>
-        {/* Middle */}
-        <div className="relative mt-[3.5rem]">
-          {/* 리뷰남기기 */}
-          <div className="text-center">
-            <div className="text-center">
-              <div className="">이곳에 대해 총 평점은?</div>
+        <form
+          name="profile"
+          action="/action_page.php"
+          method="get"
+          className="p-5"
+        >
+          {/* Middle */}
+          <div className="relative mt-[3.5rem]">
+            {/* 운동장소 */}
+            <div className="mb-6">
+              <div className="font-bold text-base">
+                운동장소<span className="font-bold text-[#FF5247] "> *</span>
+              </div>
+              <div className="w-full rounded-md h-10 bg-[#F4F5F7] text-[#A5A7AE] flex items-center justify-center border border-gray-300">
+                {reviews[0].data.data.gym_name}
+              </div>
+            </div>
+            {/* 해당 암장 본인레벨 */}
+            <div className="mb-6">
+              <div className="font-bold text-base">
+                <div>
+                  해당 암장 본인레벨
+                  <span className="font-bold text-[#FF5247] "> *</span>
+                </div>
+                <div className="w-full rounded-md h-10 bg-[#F4F5F7] text-[#A5A7AE] flex items-center justify-center border border-gray-300">
+                  Click
+                </div>
+              </div>
+            </div>
+
+            {/* 한줄 기록 */}
+            <div className="mb-6">
+              <div>
+                <div className="flex justify-between">
+                  <div className="font-bold text-base">
+                    한줄 기록
+                    <span className="font-bold text-[#FF5247] "> *</span>
+                  </div>
+                  <p className="font-normal text-sm text-gray-600">
+                    <span>{inputData.count}</span>
+                    <span>/30</span>
+                  </p>
+                </div>
+                <input
+                  className="w-full border-b"
+                  required
+                  type="text"
+                  name="alias"
+                  onChange={onInputHandler}
+                  maxLength={30}
+                  placeholder="운동시설은 어땠나요?"
+                />
+              </div>
+            </div>
+
+            {/* 상세 내용 (선택) */}
+            <div className="mb-6">
+              <div>
+                <div className="flex justify-between">
+                  <div className="font-bold text-base">상세 내용 (선택)</div>
+                  <p className="font-normal text-sm text-gray-500">
+                    <span>{textAreaData.count}</span>
+                    <span>/500</span>
+                  </p>
+                </div>
+                <textarea
+                  className="w-full border-b"
+                  name="opinion"
+                  onChange={onTextAreaHandler}
+                  maxLength={500}
+                  placeholder="다른 유저에게 도움이 될 만한 정보를 입력해주세요."
+                />
+              </div>
+            </div>
+          </div>
+
+          {/* Bottom - 사진 및 제출 버튼 */}
+          <div className="text-center mb-6">
+            <div className="mb-6">
+              <div className="font-semibold text-lg">
+                이곳에 대해 총 평점은?
+              </div>
               <Rating
                 name="rating"
                 size="large"
@@ -107,9 +233,39 @@ function WriteModal({ openPosition }: ReviewProps) {
                 }}
               />
             </div>
-            <button type="button">작성완료</button>
+            <div className="border-3 flex">
+              <input
+                accept=".png, .jpg, .jpeg"
+                type="file"
+                onChange={uploadFile}
+                style={{
+                  width: '100px',
+                  height: '100px',
+                  color: '#F0F1F3',
+                  border: '1px solid #D1D1D1',
+                  borderRadius: '5px',
+                }}
+              />
+              {previewImg &&
+                previewImg.map((imgSrc, i) => (
+                  <div key={i} className="w-24 h-24">
+                    <Image
+                      alt={`Uploaded Image ${i}`}
+                      src={imgSrc}
+                      width={100}
+                      height={100}
+                    />
+                  </div>
+                ))}
+            </div>
+            <button
+              type="submit"
+              className="w-full rounded-md h-10 bg-gray-200 text-gray-600 mt-4"
+            >
+              작성완료
+            </button>
           </div>
-        </div>
+        </form>
       </div>
     </>
   );
diff --git a/src/types/review/review.ts b/src/types/review/review.ts
index fbb56b2d..1cd54559 100644
--- a/src/types/review/review.ts
+++ b/src/types/review/review.ts
@@ -1,12 +1,12 @@
 export interface ReactionType {
-  type: 'interest' | 'like' | 'help' | 'thumb' | 'angry';
+  type: 'wantToGo' | 'helped' | 'great' | 'funny';
   count: number;
 }
 
 export interface ReviewDataType {
   id: number;
   is_mine: boolean;
-  my_reaction: 'interest' | 'like' | 'help' | 'thumb' | 'angry' | null;
+  my_reaction: 'wantToGo' | 'helped' | 'great' | 'funny' | null;
   review_reaction_count: ReactionType[];
   content: string;
   images: string[];
@@ -16,7 +16,7 @@ export interface ReviewDataType {
   writer: {
     id: number;
     nickname: string;
-    profileImage: string;
+    profile_image: string;
   };
 }