diff --git a/src/assets/images/Rate_Star.png b/src/assets/images/Rate_Star.png
new file mode 100644
index 0000000..46ff136
Binary files /dev/null and b/src/assets/images/Rate_Star.png differ
diff --git a/src/components/MapStoreReviewList.tsx b/src/components/MapStoreReviewList.tsx
index 7024998..2ecd7b7 100644
--- a/src/components/MapStoreReviewList.tsx
+++ b/src/components/MapStoreReviewList.tsx
@@ -1,6 +1,7 @@
-import React from 'react';
-import {StyleSheet, View} from 'react-native';
+import React, {useState} from 'react';
+import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
 import {FlatList} from 'react-native-gesture-handler';
+import ReviewModal from '../modal/ReviewModal';
 import {MapStoreReview} from './MapStoreReview';
 
 const dummyReviews = [
@@ -55,12 +56,10 @@ const dummyReviews = [
 ];
 
 export const MapStoreReviewList = () => {
-  return (
-    <View style={[styles.reviewListWrap]}>
-      <FlatList
-        data={dummyReviews}
-        keyExtractor={(item, index) => index.toString()}
-        renderItem={({item}) => {
+  const renderedReviews = (data: any) => {
+    return (
+      <>
+        {data.map((item: any) => {
           return (
             <MapStoreReview
               name={item.name}
@@ -70,10 +69,11 @@ export const MapStoreReviewList = () => {
               images={item.images}
             />
           );
-        }}
-      />
-    </View>
-  );
+        })}
+      </>
+    );
+  };
+  return <View style={[styles.reviewListWrap]}>{renderedReviews(dummyReviews)}</View>;
 };
 
 const styles = StyleSheet.create({
diff --git a/src/components/MapStoreReviewPhoto.tsx b/src/components/MapStoreReviewPhoto.tsx
index 0c44db9..1b497c7 100644
--- a/src/components/MapStoreReviewPhoto.tsx
+++ b/src/components/MapStoreReviewPhoto.tsx
@@ -13,28 +13,29 @@ const imagedata = [
   {uri: 'https://source.unsplash.com/1024x768/?man'},
 ];
 
-export const MapStoreReviewPhoto = () => {
+const renderedImageList = (data: any) => {
   return (
-    <View style={[styles.reviewPhotoWrap]}>
-      <FlatList
-        data={imagedata}
-        renderItem={({item}) => (
+    <>
+      {data.map((item) => {
+        return (
           <View style={{borderColor: '#FFFFFF', borderWidth: 1}}>
             <Image source={{uri: item.uri}} style={{height: IMAGESIZE - 2, width: IMAGESIZE - 2}} />
           </View>
-        )}
-        keyExtractor={(item, index) => index.toString()}
-        numColumns={3}
-        showsVerticalScrollIndicator={false}
-        scrollEventThrottle={10}
-      />
-    </View>
+        );
+      })}
+    </>
   );
 };
 
+export const MapStoreReviewPhoto = () => {
+  return <View style={[styles.reviewPhotoWrap]}>{renderedImageList(imagedata)}</View>;
+};
+
 const styles = StyleSheet.create({
   reviewPhotoWrap: {
     flex: 1,
     backgroundColor: '#FFFFFF',
+    flexDirection: 'row',
+    flexWrap: 'wrap',
   },
 });
diff --git a/src/components/ReviewRate.tsx b/src/components/ReviewRate.tsx
new file mode 100644
index 0000000..ff3de6e
--- /dev/null
+++ b/src/components/ReviewRate.tsx
@@ -0,0 +1,80 @@
+import React from 'react';
+import type {FC} from 'react';
+import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
+import {Rating} from 'react-native-ratings';
+type ReviewRateProps = {
+  name: string;
+  storeId: number;
+  setRating: (rating: number) => void;
+  rating: number;
+  goNext: () => void;
+};
+const RATE_STAR = require('../assets/images/Rate_Star.png');
+export const ReviewRate: FC<ReviewRateProps> = ({rating, setRating, storeId, name, goNext}) => {
+  return (
+    <View style={styles.MainContainer}>
+      <View>
+        <Text style={styles.textStyle}>음식은 어떠셨나요?</Text>
+        <Text style={styles.textStyleSmall}>{name}</Text>
+        <Rating
+          type="custom"
+          ratingColor="#f1c40f"
+          ratingBackgroundColor="#EFEFEF"
+          onFinishRating={setRating}
+          startingValue={rating}
+          imageSize={49}
+          ratingImage={RATE_STAR}
+          style={[styles.childView]}
+        />
+      </View>
+
+      <TouchableOpacity onPress={goNext} style={[styles.reviewConfirmButton]}>
+        <View>
+          <Text style={[styles.reviewConfirmButtonText]}>확인</Text>
+        </View>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  MainContainer: {
+    flex: 1,
+    alignItems: 'center',
+    marginTop: 60,
+    justifyContent: 'space-between',
+    marginLeft: 16,
+    marginRight: 16,
+  },
+  childView: {
+    marginTop: 150,
+  },
+  textStyle: {
+    fontFamily: 'Pretendard-SemiBold',
+    fontWeight: '600',
+    textAlign: 'center',
+    fontSize: 24,
+    lineHeight: 34,
+    color: '#111111',
+    marginBottom: 8,
+  },
+  textStyleSmall: {
+    fontFamily: 'Pretendard-Medium',
+    fontWeight: '500',
+    textAlign: 'center',
+    fontSize: 16,
+    lineHeight: 24,
+    color: '#616161',
+  },
+  reviewConfirmButton: {
+    width: '100%',
+    height: 56,
+    borderRadius: 10,
+    backgroundColor: '#E8E8E8',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  reviewConfirmButtonText: {
+    color: '#111111',
+  },
+});
diff --git a/src/components/ReviewWrite.tsx b/src/components/ReviewWrite.tsx
new file mode 100644
index 0000000..6a2b8d1
--- /dev/null
+++ b/src/components/ReviewWrite.tsx
@@ -0,0 +1,172 @@
+import React, {useState} from 'react';
+import type {FC} from 'react';
+import {Image, StyleSheet, Text, TextInput, TouchableOpacity, View} from 'react-native';
+import {Rating} from 'react-native-ratings';
+import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
+import {ImageLibraryOptions, launchCamera, launchImageLibrary} from 'react-native-image-picker';
+
+type imageData = {
+  uri: string;
+  type: string;
+  name: string;
+};
+
+type ReviewWriteProps = {
+  name: string;
+  submitReview: () => void;
+  rating: number;
+  setRating: (rating: number) => void;
+  reviewContent: string;
+  setReviewContent: React.Dispatch<React.SetStateAction<string>>;
+  imageUri: imageData[];
+  setImageUri: React.Dispatch<React.SetStateAction<imageData[]>>;
+};
+
+const options: ImageLibraryOptions = {
+  mediaType: 'photo',
+  maxWidth: 200,
+  maxHeight: 200,
+  quality: 0.5,
+};
+
+const RATE_STAR = require('../assets/images/Rate_Star.png');
+export const ReviewWrite: FC<ReviewWriteProps> = ({
+  name,
+  submitReview,
+  rating,
+  setRating,
+  imageUri,
+  setImageUri,
+  reviewContent,
+  setReviewContent,
+}) => {
+  const showImageLibrary = async () => {
+    const result = await launchImageLibrary(options, (response) => {
+      if (response.didCancel) {
+        console.log('취소');
+      } else if (response.errorCode) {
+        console.log(response.errorMessage);
+      }
+    });
+    if (result.assets) {
+      const data: imageData = {
+        uri: result.assets[0].uri as string,
+        type: result.assets[0].type as string,
+        name: result.assets[0].fileName as string,
+      };
+      setImageUri([...imageUri, data]);
+    }
+    console.log(result);
+  };
+  return (
+    <View style={[styles.mainContainer]}>
+      <View style={[styles.reviewContainer]}>
+        <Text style={styles.storeName}>{name}</Text>
+        <Rating
+          type="custom"
+          ratingColor="#f1c40f"
+          ratingBackgroundColor="#EFEFEF"
+          onFinishRating={setRating}
+          startingValue={rating}
+          imageSize={24}
+          ratingImage={RATE_STAR}
+          style={[styles.childView]}
+        />
+        <TextInput
+          style={[styles.reviewContent]}
+          multiline={true}
+          placeholder={'리뷰내용 작성'}
+          selectionColor={'#6C69FF'}
+          onChangeText={(text) => {
+            setReviewContent(text);
+          }}
+          value={reviewContent}
+        />
+        <View style={[styles.ImageSelectContainer]}>
+          <View style={[styles.flexRow]}>
+            <Text>사진 첨부</Text>
+            <Text>1/3</Text>
+          </View>
+
+          <View style={[styles.flexRow]}>
+            <TouchableOpacity style={[styles.imageAddButton]} onPress={showImageLibrary}>
+              <Icon name="plus" size={24} />
+            </TouchableOpacity>
+            {imageUri.map((data) => {
+              return (
+                <View style={{marginRight: 8}}>
+                  <Image source={{uri: data.uri}} style={{width: 80, height: 80}} />
+                </View>
+              );
+            })}
+          </View>
+        </View>
+      </View>
+
+      <TouchableOpacity onPress={submitReview} style={[styles.reviewConfirmButton]}>
+        <View>
+          <Text style={[styles.reviewConfirmButtonText]}>확인</Text>
+        </View>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  mainContainer: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    marginLeft: 16,
+    marginRight: 16,
+  },
+  reviewContainer: {
+    alignItems: 'center',
+    width: '100%',
+  },
+  storeName: {
+    fontFamily: 'Pretendard-Medium',
+    fontSize: 16,
+    lineHeight: 24,
+    textAlign: 'center',
+  },
+  childView: {marginTop: 8, marginBottom: 16},
+  reviewConfirmButton: {
+    width: '100%',
+    height: 56,
+    borderRadius: 10,
+    backgroundColor: '#6C69FF',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  reviewConfirmButtonText: {
+    color: '#FFFFFF',
+  },
+  reviewContent: {
+    width: '100%',
+    height: 164,
+    flexWrap: 'wrap',
+    backgroundColor: '#F5F5F5',
+    paddingLeft: 16,
+    paddingRight: 16,
+    paddingTop: 16,
+    borderRadius: 10,
+    marginBottom: 16,
+  },
+  ImageSelectContainer: {
+    width: '100%',
+  },
+  flexRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom: 8,
+  },
+  imageAddButton: {
+    width: 80,
+    height: 80,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: '#EFEFEF',
+    marginRight: 8,
+  },
+});
diff --git a/src/modal/ReviewModal.tsx b/src/modal/ReviewModal.tsx
new file mode 100644
index 0000000..4e66888
--- /dev/null
+++ b/src/modal/ReviewModal.tsx
@@ -0,0 +1,87 @@
+import React, {useEffect, useState} from 'react';
+import type {FC} from 'react';
+import {Modal, SafeAreaView, StyleSheet, Text, TouchableOpacity, View} from 'react-native';
+import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
+import {ReviewRate} from '../components/ReviewRate';
+import {ReviewWrite} from '../components/ReviewWrite';
+
+type ReviewModalProps = {
+  storeId: number;
+  visible: boolean;
+  closeReviewModal: () => void;
+};
+type imageData = {
+  uri: string;
+  type: string;
+  name: string;
+};
+
+const ReviewModal: FC<ReviewModalProps> = ({visible, closeReviewModal, storeId}) => {
+  const [rating, setRating] = useState(0);
+  const [showRating, setShowRating] = useState(true);
+  const [reviewContent, setReviewContent] = useState('');
+  const [imageUri, setImageUri] = useState<imageData[]>([]);
+
+  const submitReview = () => {
+    //post 리뷰
+    //review content, image...
+    closeReviewModal();
+  };
+  return (
+    <Modal visible={visible} animationType="fade">
+      <SafeAreaView style={[styles.safeView]}>
+        <View style={[styles.modalHeader]}>
+          <TouchableOpacity
+            onPress={() => {
+              setRating(0);
+              setShowRating(true);
+              setImageUri([]);
+              setReviewContent('');
+              closeReviewModal();
+            }}
+          >
+            <View style={[styles.backButton]}>
+              <Icon name="close" size={24} color="black" />
+            </View>
+          </TouchableOpacity>
+        </View>
+        {showRating ? (
+          <ReviewRate
+            name={'마라탕'}
+            rating={rating}
+            setRating={setRating}
+            storeId={storeId}
+            goNext={() => setShowRating(false)}
+          />
+        ) : (
+          <ReviewWrite
+            name={'마라탕'}
+            submitReview={submitReview}
+            setRating={setRating}
+            rating={rating}
+            imageUri={imageUri}
+            setImageUri={setImageUri}
+            reviewContent={reviewContent}
+            setReviewContent={setReviewContent}
+          />
+        )}
+      </SafeAreaView>
+    </Modal>
+  );
+};
+
+export default ReviewModal;
+
+const styles = StyleSheet.create({
+  safeView: {flex: 1, backgroundColor: '#FFFFFF'},
+  modalHeader: {
+    height: 40,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  backButton: {
+    marginLeft: 16,
+    marginRight: 16,
+  },
+});
diff --git a/src/modal/StoreModal.tsx b/src/modal/StoreModal.tsx
index c291bb5..4508470 100644
--- a/src/modal/StoreModal.tsx
+++ b/src/modal/StoreModal.tsx
@@ -1,6 +1,15 @@
-import React, {useEffect, useState} from 'react';
+import React, {useEffect, useRef, useState} from 'react';
 import type {FC} from 'react';
-import {Modal, StyleSheet, Text, View, SafeAreaView, TouchableOpacity, Image} from 'react-native';
+import {
+  Modal,
+  StyleSheet,
+  Text,
+  View,
+  SafeAreaView,
+  TouchableOpacity,
+  Image,
+  Animated,
+} from 'react-native';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
 import Swiper from 'react-native-swiper';
 import {
@@ -9,6 +18,8 @@ import {
   MapStoreReviewList,
   MapStoreReviewPhoto,
 } from '../components';
+import ReviewModal from './ReviewModal';
+import {useStyle} from '../hooks';
 
 type StoreModalProps = {
   storeId: number;
@@ -45,7 +56,19 @@ const activeDot = () => {
 
 const StoreModal: FC<StoreModalProps> = ({storeId, visible, closeStoreModal}) => {
   const [isReview, setIsReview] = useState(false);
-  useEffect(() => {}, []);
+  const [reviewModal, setReviewModal] = useState(false);
+  const openReviewModal = async () => {
+    setReviewModal(true);
+  };
+  const offset1 = useRef(new Animated.Value(0)).current;
+
+  const headerTextStyle = useStyle({
+    opacity: offset1.interpolate({
+      inputRange: [250, 260],
+      outputRange: [0, 1],
+      extrapolate: 'clamp',
+    }),
+  });
 
   return (
     <Modal visible={visible} animationType="slide">
@@ -56,12 +79,24 @@ const StoreModal: FC<StoreModalProps> = ({storeId, visible, closeStoreModal}) =>
               <Icon name="arrow-left" size={24} color="black" />
             </View>
           </TouchableOpacity>
-          <Text style={[styles.storeHeaderText]}>반이학생마라탕</Text>
+
+          <Animated.View style={[headerTextStyle]}>
+            <Text style={[styles.storeHeaderText]}>반이학생마라탕</Text>
+          </Animated.View>
+
           <View style={[styles.backButton, {opacity: 0}]}>
             <Icon name="arrow-left" size={24} color="black" />
           </View>
         </View>
-        {!isReview && (
+        <Animated.ScrollView
+          stickyHeaderIndices={[1]}
+          scrollEventThrottle={10}
+          onScroll={(event) => {
+            Animated.event([{nativeEvent: {contentOffset: {y: offset1}}}], {
+              useNativeDriver: false,
+            })(event);
+          }}
+        >
           <View>
             <View style={{height: 220}}>
               <Swiper dot={dot()} activeDot={activeDot()} showsButtons={false}>
@@ -92,15 +127,29 @@ const StoreModal: FC<StoreModalProps> = ({storeId, visible, closeStoreModal}) =>
             />
             <View style={{backgroundColor: '#F6F6FA', height: 8}} />
           </View>
+
+          <View style={[styles.reviewToggleWrap]}>
+            <MapReviewToggleButton
+              toggleReview={() => setIsReview(true)}
+              togglePhoto={() => setIsReview(false)}
+              isReview={isReview}
+            />
+          </View>
+          {isReview ? <MapStoreReviewList /> : <MapStoreReviewPhoto />}
+        </Animated.ScrollView>
+        {isReview && (
+          <TouchableOpacity onPress={() => openReviewModal()}>
+            <View style={[styles.reviewButton]}>
+              <Text style={[styles.reviewButtonText]}>리뷰 남기기</Text>
+              <Icon name="pencil" size={18} color="#FFFFFF" />
+            </View>
+          </TouchableOpacity>
         )}
-        <View style={[styles.reviewToggleWrap]}>
-          <MapReviewToggleButton
-            toggleReview={() => setIsReview(true)}
-            togglePhoto={() => setIsReview(false)}
-            isReview={isReview}
-          />
-        </View>
-        {isReview ? <MapStoreReviewList /> : <MapStoreReviewPhoto />}
+        <ReviewModal
+          visible={reviewModal}
+          closeReviewModal={() => setReviewModal(false)}
+          storeId={storeId}
+        />
       </SafeAreaView>
     </Modal>
   );
@@ -137,4 +186,24 @@ const styles = StyleSheet.create({
     borderBottomColor: '#EDEDED',
     borderBottomWidth: 1,
   },
+  reviewButton: {
+    width: 178,
+    height: 41,
+    borderRadius: 41,
+    backgroundColor: '#2A2A2A',
+    position: 'absolute',
+    bottom: 4,
+    alignSelf: 'center',
+    justifyContent: 'center',
+    alignItems: 'center',
+    flexDirection: 'row',
+  },
+  reviewButtonText: {
+    color: '#FFFFFF',
+    fontSize: 16,
+    lineHeight: 24,
+    fontFamily: 'Pretendard-Medium',
+    fontWeight: '300',
+    marginRight: 4,
+  },
 });
diff --git a/src/screens/Map.tsx b/src/screens/Map.tsx
index c2d1926..6fe73f4 100644
--- a/src/screens/Map.tsx
+++ b/src/screens/Map.tsx
@@ -45,7 +45,11 @@ const Map = () => {
   return (
     <SafeAreaView style={[styles.flex]}>
       <AddressSearchModal visible={addressModal} closeAddressModal={() => setAddressModal(false)} />
-      <StoreModal visible={storeModal} closeStoreModal={() => setStoreModal(false)} storeId={0} />
+      <StoreModal
+        visible={storeModal}
+        closeStoreModal={() => setStoreModal(false)}
+        storeId={storeId}
+      />
       <View style={[styles.headerWrap]}>
         <TouchableOpacity style={[styles.header]} onPress={() => setAddressModal(true)}>
           <Text style={[styles.headerText]}>삼성동</Text>