diff --git a/.github/ISSUE_TEMPLATE/ourmenu-issue-template.md b/.github/ISSUE_TEMPLATE/ourmenu-issue-template.md
new file mode 100644
index 0000000..7b1188f
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/ourmenu-issue-template.md
@@ -0,0 +1,16 @@
+---
+name: OurMenu Issue Template
+about: OurMenu Issue Template
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+## Description 🚀
+
+
+## ToDo ✅
+- [ ] 
+
+## 기타 💬
diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md
new file mode 100644
index 0000000..3a43d5b
--- /dev/null
+++ b/.github/pull_request_template.md
@@ -0,0 +1,16 @@
+## 🚀 이슈번호
+
+## ✏️ 변경사항
+-
+-
+
+
+## 📷 스크린샷
+<img src="" width="360"/>
+
+
+## ✍️ 사용법
+
+
+
+## 🎸 기타
diff --git a/.gitignore b/.gitignore
index aa724b7..b7197f6 100644
--- a/.gitignore
+++ b/.gitignore
@@ -4,6 +4,8 @@
 /.idea/caches
 /.idea/libraries
 /.idea/modules.xml
+/.idea/misc.xml
+/.idea/gradle.xml
 /.idea/workspace.xml
 /.idea/navEditor.xml
 /.idea/assetWizardSettings.xml
@@ -13,3 +15,156 @@
 .externalNativeBuild
 .cxx
 local.properties
+
+### Kotlin ###
+# Compiled class file
+*.class
+
+# Log file
+*.log
+
+# BlueJ files
+*.ctxt
+
+# Mobile Tools for Java (J2ME)
+.mtj.tmp/
+
+# Package Files #
+*.jar
+*.war
+*.nar
+*.ear
+*.zip
+*.tar.gz
+*.rar
+
+# virtual machine crash logs, see http://www.java.com/en/download/help/error_hotspot.xml
+hs_err_pid*
+replay_pid*
+
+### Android ###
+# Gradle files
+.gradle/
+build/
+
+# Android Studio generated files and folders
+captures/
+.externalNativeBuild/
+.cxx/
+*.apk
+output.json
+
+# IntelliJ
+.idea/
+misc.xml
+deploymentTargetDropDown.xml
+render.experimental.xml
+
+# Keystore files
+*.jks
+*.keystore
+
+# Google Services (e.g. APIs or Firebase)
+google-services.json
+
+# Android Profiling
+*.hprof
+
+### Android Patch ###
+gen-external-apklibs
+
+### AndroidStudio ###
+# Covers files to be ignored for android development using Android Studio.
+
+# Built application files
+*.apk
+*.ap_
+*.aab
+
+# Files for the ART/Dalvik VM
+*.dex
+
+# Generated files
+bin/
+gen/
+out/
+
+# Signing files
+.signing/
+
+# Proguard folder generated by Eclipse
+proguard/
+
+# Android Studio
+/*/build/
+/*/local.properties
+/*/out
+/*/*/build
+/*/*/production
+.navigation/
+*.ipr
+*~
+*.swp
+
+# Google Services (e.g. APIs or Firebase)
+# google-services.json
+
+# NDK
+obj/
+
+# IntelliJ IDEA
+*.iws
+/out/
+
+# User-specific configurations
+.idea/caches/
+.idea/libraries/
+.idea/shelf/
+.idea/workspace.xml
+.idea/tasks.xml
+.idea/.name
+.idea/compiler.xml
+.idea/copyright/profiles_settings.xml
+.idea/encodings.xml
+.idea/misc.xml
+.idea/modules.xml
+.idea/scopes/scope_settings.xml
+.idea/dictionaries
+.idea/vcs.xml
+.idea/jsLibraryMappings.xml
+.idea/datasources.xml
+.idea/dataSources.ids
+.idea/sqlDataSources.xml
+.idea/dynamic.xml
+.idea/uiDesigner.xml
+.idea/assetWizardSettings.xml
+.idea/gradle.xml
+.idea/jarRepositories.xml
+.idea/navEditor.xml
+
+# Legacy Eclipse project files
+.classpath
+.project
+.cproject
+.settings/
+
+## Plugin-specific files:
+
+# mpeltonen/sbt-idea plugin
+.idea_modules/
+
+# JIRA plugin
+atlassian-ide-plugin.xml
+
+# Mongo Explorer plugin
+.idea/mongoSettings.xml
+
+# Crashlytics plugin (for Android Studio and IntelliJ)
+com_crashlytics_export_strings.xml
+crashlytics.properties
+crashlytics-build.properties
+fabric.properties
+
+### AndroidStudio Patch ###
+
+!/gradle/wrapper/gradle-wrapper.jar
diff --git a/.idea/.name b/.idea/.name
deleted file mode 100644
index d1a5a08..0000000
--- a/.idea/.name
+++ /dev/null
@@ -1 +0,0 @@
-OurMenu
\ No newline at end of file
diff --git a/.idea/deploymentTargetSelector.xml b/.idea/deploymentTargetSelector.xml
index b268ef3..1f58bdf 100644
--- a/.idea/deploymentTargetSelector.xml
+++ b/.idea/deploymentTargetSelector.xml
@@ -4,6 +4,14 @@
     <selectionStates>
       <SelectionState runConfigName="app">
         <option name="selectionMode" value="DROPDOWN" />
+        <DropdownSelection timestamp="2025-01-12T12:06:01.542847Z">
+          <Target type="DEFAULT_BOOT">
+            <handle>
+              <DeviceId pluginId="LocalEmulator" identifier="path=/Users/casperjr/.android/avd/Medium_Phone.avd" />
+            </handle>
+          </Target>
+        </DropdownSelection>
+        <DialogSelection />
       </SelectionState>
     </selectionStates>
   </component>
diff --git a/.idea/gradle.xml b/.idea/gradle.xml
index ae733f1..7b3006b 100644
--- a/.idea/gradle.xml
+++ b/.idea/gradle.xml
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
+  <component name="GradleMigrationSettings" migrationVersion="1" />
   <component name="GradleSettings">
     <option name="linkedExternalProjectsSettings">
       <GradleProjectSettings>
diff --git a/.idea/material_theme_project_new.xml b/.idea/material_theme_project_new.xml
new file mode 100644
index 0000000..c099f88
--- /dev/null
+++ b/.idea/material_theme_project_new.xml
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="MaterialThemeProjectNewConfig">
+    <option name="metadata">
+      <MTProjectMetadataState>
+        <option name="migrated" value="true" />
+        <option name="pristineConfig" value="false" />
+        <option name="userId" value="5e07800b:1938f7ed934:-7ff9" />
+      </MTProjectMetadataState>
+    </option>
+  </component>
+</project>
\ No newline at end of file
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..c262d66
--- /dev/null
+++ b/README.md
@@ -0,0 +1,38 @@
+# OURMENU V2
+
+⏰ 개발기간
+
+<br>
+
+## 프로젝트 소개
+
+
+<br>
+
+## 팀원 소개
+
+<br>
+
+## 기술 스택
+
+**💻 개발 환경**
+
+<div>
+<img src="https://img.shields.io/badge/Android Studio-3DDC84.svg?style=for-the-badge&logo=android-studio&logoColor=white">
+</div>
+
+**🧑‍🧑‍🧒‍🧒 협업**
+
+<div>
+<img src="https://img.shields.io/badge/github-181717?style=for-the-badge&logo=github&logoColor=white">
+<img src="https://img.shields.io/badge/git-F05032?style=for-the-badge&logo=git&logoColor=white">
+<img src="https://img.shields.io/badge/figma-F24E1E?style=for-the-badge&logo=figma&logoColor=white">
+<img src="https://img.shields.io/badge/discord-5865F2?style=for-the-badge&logo=discord&logoColor=white">
+</div>
+
+**📱 Front-End**
+
+<div>
+  <img src="https://img.shields.io/badge/kotlin-7F52FF?style=for-the-badge&logo=kotlin&logoColor=white">
+  <img src="https://img.shields.io/badge/Jetpack%20Compose-4285F4?style=for-the-badge&logo=jetpackcompose&logoColor=white">
+</div>
\ No newline at end of file
diff --git a/app/build.gradle.kts b/app/build.gradle.kts
index 41d4149..0703774 100644
--- a/app/build.gradle.kts
+++ b/app/build.gradle.kts
@@ -2,11 +2,14 @@ plugins {
     alias(libs.plugins.android.application)
     alias(libs.plugins.kotlin.android)
     alias(libs.plugins.kotlin.compose)
+    alias(libs.plugins.kotlin.serialization)
+    id("com.google.dagger.hilt.android") // Hilt 플러그인 추가
+    kotlin("kapt") // Hilt를 위한 kapt 추가
 }
 
 android {
     namespace = "com.kuit.ourmenu"
-    compileSdk = 34
+    compileSdk = 35
 
     defaultConfig {
         applicationId = "com.kuit.ourmenu"
@@ -49,6 +52,9 @@ dependencies {
     implementation(libs.androidx.ui.graphics)
     implementation(libs.androidx.ui.tooling.preview)
     implementation(libs.androidx.material3)
+    implementation(libs.androidx.lifecycle.viewmodel.compose)
+    implementation(libs.androidx.lifecycle.runtime.compose.android)
+    implementation(libs.androidx.navigation.compose)
     testImplementation(libs.junit)
     androidTestImplementation(libs.androidx.junit)
     androidTestImplementation(libs.androidx.espresso.core)
@@ -56,4 +62,23 @@ dependencies {
     androidTestImplementation(libs.androidx.ui.test.junit4)
     debugImplementation(libs.androidx.ui.tooling)
     debugImplementation(libs.androidx.ui.test.manifest)
+
+    // Dots Indicator
+    implementation("com.tbuonomo:dotsindicator:5.1.0")
+
+    // Hilt
+    implementation(libs.hilt.android)
+    kapt(libs.hilt.compiler)
+    implementation(libs.androidx.hilt.navigation.compose)
+
+    implementation(libs.kotlinx.serialization.json)
+
+    // Retrofit
+    implementation(libs.retrofit)
+    implementation(libs.converter.gson)
+}
+
+// Hilt를 사용할 때 필요한 Annotation Processor
+kapt {
+    correctErrorTypes = true
 }
\ No newline at end of file
diff --git a/app/src/main/AndroidManifest.xml b/app/src/main/AndroidManifest.xml
index ecf4e2b..216b6e3 100644
--- a/app/src/main/AndroidManifest.xml
+++ b/app/src/main/AndroidManifest.xml
@@ -3,6 +3,7 @@
     xmlns:tools="http://schemas.android.com/tools">
 
     <application
+        android:name=".OurMenuApp"
         android:allowBackup="true"
         android:dataExtractionRules="@xml/data_extraction_rules"
         android:fullBackupContent="@xml/backup_rules"
diff --git a/app/src/main/java/com/kuit/ourmenu/MainActivity.kt b/app/src/main/java/com/kuit/ourmenu/MainActivity.kt
index b87fc42..5914c5c 100644
--- a/app/src/main/java/com/kuit/ourmenu/MainActivity.kt
+++ b/app/src/main/java/com/kuit/ourmenu/MainActivity.kt
@@ -4,44 +4,35 @@ import android.os.Bundle
 import androidx.activity.ComponentActivity
 import androidx.activity.compose.setContent
 import androidx.activity.enableEdgeToEdge
-import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.foundation.layout.padding
-import androidx.compose.material3.Scaffold
-import androidx.compose.material3.Text
-import androidx.compose.runtime.Composable
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.navigation.compose.rememberNavController
+import com.kuit.ourmenu.ui.navigator.MainNavGraph
+import com.kuit.ourmenu.ui.onboarding.screen.SplashScreen
 import com.kuit.ourmenu.ui.theme.OurMenuTheme
+import dagger.hilt.android.AndroidEntryPoint
 
+@AndroidEntryPoint
 class MainActivity : ComponentActivity() {
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
         enableEdgeToEdge()
         setContent {
+            var showSplash by remember { mutableStateOf(true) }
+            val navController = rememberNavController()
+
             OurMenuTheme {
-                Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
-                    Greeting(
-                        name = "Android",
-                        modifier = Modifier.padding(innerPadding)
-                    )
+                if (showSplash) {
+                    SplashScreen {
+                        showSplash = false
+                    }
+                } else {
+                    // TODO: MainNavigation 추가하기
+                    MainNavGraph(navController = navController)
                 }
             }
         }
     }
 }
-
-@Composable
-fun Greeting(name: String, modifier: Modifier = Modifier) {
-    Text(
-        text = "Hello $name!",
-        modifier = modifier
-    )
-}
-
-@Preview(showBackground = true)
-@Composable
-fun GreetingPreview() {
-    OurMenuTheme {
-        Greeting("Android")
-    }
-}
\ No newline at end of file
diff --git a/app/src/main/java/com/kuit/ourmenu/OurMenuApp.kt b/app/src/main/java/com/kuit/ourmenu/OurMenuApp.kt
new file mode 100644
index 0000000..2e33e0f
--- /dev/null
+++ b/app/src/main/java/com/kuit/ourmenu/OurMenuApp.kt
@@ -0,0 +1,7 @@
+package com.kuit.ourmenu
+
+import android.app.Application
+import dagger.hilt.android.HiltAndroidApp
+
+@HiltAndroidApp
+class OurMenuApp: Application()
\ No newline at end of file
diff --git a/app/src/main/java/com/kuit/ourmenu/di/NetworkModule.kt b/app/src/main/java/com/kuit/ourmenu/di/NetworkModule.kt
new file mode 100644
index 0000000..a5de924
--- /dev/null
+++ b/app/src/main/java/com/kuit/ourmenu/di/NetworkModule.kt
@@ -0,0 +1,27 @@
+package com.kuit.ourmenu.di
+
+import com.google.gson.Gson
+import dagger.Module
+import dagger.Provides
+import dagger.hilt.InstallIn
+import dagger.hilt.components.SingletonComponent
+import retrofit2.Retrofit
+import retrofit2.converter.gson.GsonConverterFactory
+import javax.inject.Singleton
+
+@Module
+@InstallIn(SingletonComponent::class)
+object NetworkModule {
+
+    // TODO : Interceptor , OkHttpClient
+
+    @Provides
+    @Singleton
+    fun providesRetrofit(
+    ): Retrofit =
+        Retrofit.Builder()
+            .baseUrl("https://ourmenu-dev.shop/")
+            .addConverterFactory(GsonConverterFactory.create(Gson()))
+            .build()
+
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/kuit/ourmenu/di/RepositoryModule.kt b/app/src/main/java/com/kuit/ourmenu/di/RepositoryModule.kt
new file mode 100644
index 0000000..eed47a6
--- /dev/null
+++ b/app/src/main/java/com/kuit/ourmenu/di/RepositoryModule.kt
@@ -0,0 +1,21 @@
+package com.kuit.ourmenu.di
+
+import com.kuit.ourmenu.dummy.repository.DummyRepository
+import com.kuit.ourmenu.dummy.repositoryimpl.DummyRepositoryImpl
+import com.kuit.ourmenu.dummy.service.DummyService
+import dagger.Binds
+import dagger.Module
+import dagger.Provides
+import dagger.hilt.InstallIn
+import dagger.hilt.components.SingletonComponent
+import javax.inject.Singleton
+
+@Module
+@InstallIn(SingletonComponent::class)
+abstract class RepositoryModule {
+
+    @Binds
+    @Singleton
+    abstract fun bindDummyRepository(dummyRepositoryImpl: DummyRepositoryImpl): DummyRepository
+
+}
diff --git a/app/src/main/java/com/kuit/ourmenu/di/ServiceModule.kt b/app/src/main/java/com/kuit/ourmenu/di/ServiceModule.kt
new file mode 100644
index 0000000..a5b39a5
--- /dev/null
+++ b/app/src/main/java/com/kuit/ourmenu/di/ServiceModule.kt
@@ -0,0 +1,19 @@
+package com.kuit.ourmenu.di
+
+import com.kuit.ourmenu.dummy.service.DummyService
+import dagger.Module
+import dagger.Provides
+import dagger.hilt.InstallIn
+import dagger.hilt.components.SingletonComponent
+import retrofit2.Retrofit
+import javax.inject.Singleton
+
+@Module
+@InstallIn(SingletonComponent::class)
+object ServiceModule {
+    @Provides
+    @Singleton
+    fun provideDummyService(retrofit: Retrofit): DummyService =
+        retrofit.create(DummyService::class.java)
+
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/kuit/ourmenu/dummy/data/DummyData.kt b/app/src/main/java/com/kuit/ourmenu/dummy/data/DummyData.kt
new file mode 100644
index 0000000..8a9074f
--- /dev/null
+++ b/app/src/main/java/com/kuit/ourmenu/dummy/data/DummyData.kt
@@ -0,0 +1,7 @@
+package com.kuit.ourmenu.dummy.data
+
+data class DummyData(
+    val name: String = "",
+    val description: String = "",
+    val imageUrl: String = ""
+)
\ No newline at end of file
diff --git a/app/src/main/java/com/kuit/ourmenu/dummy/data/DummyResponse.kt b/app/src/main/java/com/kuit/ourmenu/dummy/data/DummyResponse.kt
new file mode 100644
index 0000000..c4f1b1d
--- /dev/null
+++ b/app/src/main/java/com/kuit/ourmenu/dummy/data/DummyResponse.kt
@@ -0,0 +1,13 @@
+package com.kuit.ourmenu.dummy.data
+
+data class DummyResponse(
+    val name: String = "",
+    val description: String = "",
+    val imageUrl: String = ""
+)
+
+fun DummyResponse.toDummyData() = DummyData(
+    name = name,
+    description = description,
+    imageUrl = imageUrl
+)
\ No newline at end of file
diff --git a/app/src/main/java/com/kuit/ourmenu/dummy/repository/DummyRepository.kt b/app/src/main/java/com/kuit/ourmenu/dummy/repository/DummyRepository.kt
new file mode 100644
index 0000000..aa74a35
--- /dev/null
+++ b/app/src/main/java/com/kuit/ourmenu/dummy/repository/DummyRepository.kt
@@ -0,0 +1,26 @@
+package com.kuit.ourmenu.dummy.repository
+
+import android.util.Log
+import com.kuit.ourmenu.dummy.data.DummyData
+import com.kuit.ourmenu.dummy.data.toDummyData
+import com.kuit.ourmenu.dummy.service.DummyService
+import kotlinx.coroutines.Dispatchers
+import kotlinx.coroutines.flow.Flow
+import kotlinx.coroutines.flow.flow
+import kotlinx.coroutines.flow.flowOn
+import javax.inject.Inject
+import javax.inject.Singleton
+
+@Singleton
+class DummyRepository @Inject constructor(
+    private val dummyService: DummyService
+) {
+    fun getDummyData(): Flow<DummyData> = flow {
+        try {
+            val response = dummyService.getDummyData()
+            emit(response.toDummyData())
+        } catch (e: Exception) {
+            Log.e("DummyRepository", "getDummyData: $e")
+        }
+    }.flowOn(Dispatchers.IO)
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/kuit/ourmenu/dummy/repositoryimpl/DummyRepositoryImpl.kt b/app/src/main/java/com/kuit/ourmenu/dummy/repositoryimpl/DummyRepositoryImpl.kt
new file mode 100644
index 0000000..303faf9
--- /dev/null
+++ b/app/src/main/java/com/kuit/ourmenu/dummy/repositoryimpl/DummyRepositoryImpl.kt
@@ -0,0 +1,25 @@
+package com.kuit.ourmenu.dummy.repositoryimpl
+
+import android.util.Log
+import com.kuit.ourmenu.dummy.data.DummyData
+import com.kuit.ourmenu.dummy.data.toDummyData
+import com.kuit.ourmenu.dummy.repository.DummyRepository
+import com.kuit.ourmenu.dummy.service.DummyService
+import kotlinx.coroutines.Dispatchers
+import kotlinx.coroutines.flow.Flow
+import kotlinx.coroutines.flow.flow
+import kotlinx.coroutines.flow.flowOn
+import javax.inject.Inject
+
+class DummyRepositoryImpl @Inject constructor(
+    private val dummyService: DummyService
+): DummyRepository {
+    override fun getDummyData(): Flow<DummyData> = flow {
+        try {
+            val response = dummyService.getDummyData()
+            emit(response.toDummyData())
+        } catch (e: Exception) {
+            Log.e("DummyRepository", "getDummyData: $e")
+        }
+    }.flowOn(Dispatchers.IO)
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/kuit/ourmenu/dummy/service/DummyService.kt b/app/src/main/java/com/kuit/ourmenu/dummy/service/DummyService.kt
new file mode 100644
index 0000000..504cf11
--- /dev/null
+++ b/app/src/main/java/com/kuit/ourmenu/dummy/service/DummyService.kt
@@ -0,0 +1,9 @@
+package com.kuit.ourmenu.dummy.service
+
+import com.kuit.ourmenu.dummy.data.DummyResponse
+import retrofit2.http.GET
+
+interface DummyService {
+    @GET("")
+    suspend fun getDummyData(): DummyResponse
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/kuit/ourmenu/dummy/viewmodel/DummyViewModel.kt b/app/src/main/java/com/kuit/ourmenu/dummy/viewmodel/DummyViewModel.kt
new file mode 100644
index 0000000..f327858
--- /dev/null
+++ b/app/src/main/java/com/kuit/ourmenu/dummy/viewmodel/DummyViewModel.kt
@@ -0,0 +1,37 @@
+package com.kuit.ourmenu.dummy.viewmodel
+
+import androidx.lifecycle.ViewModel
+import androidx.lifecycle.viewModelScope
+import com.kuit.ourmenu.dummy.data.DummyData
+import com.kuit.ourmenu.dummy.repository.DummyRepository
+import dagger.hilt.android.lifecycle.HiltViewModel
+import kotlinx.coroutines.flow.MutableStateFlow
+import kotlinx.coroutines.flow.StateFlow
+import kotlinx.coroutines.flow.asStateFlow
+import kotlinx.coroutines.flow.catch
+import kotlinx.coroutines.launch
+import javax.inject.Inject
+
+@HiltViewModel
+class DummyViewModel @Inject constructor(
+    private val dummyRepository: DummyRepository
+) : ViewModel() {
+
+    private val _dummyData: MutableStateFlow<DummyData> = MutableStateFlow(DummyData())
+    val dummyData: StateFlow<DummyData> = _dummyData.asStateFlow() // asStateFlow() 왜 달아야하는진 모름
+
+    init {
+        fetchDummyData()
+    }
+
+    private fun fetchDummyData() {
+        viewModelScope.launch {
+            dummyRepository.getDummyData()
+                .catch { e -> println("Error: $e") }
+                .collect { dummyData ->
+                    _dummyData.value = dummyData
+                }
+        }
+    }
+
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/kuit/ourmenu/ui/addmenu/component/AddMenuAddImageComponent.kt b/app/src/main/java/com/kuit/ourmenu/ui/addmenu/component/AddMenuAddImageComponent.kt
new file mode 100644
index 0000000..0f0825b
--- /dev/null
+++ b/app/src/main/java/com/kuit/ourmenu/ui/addmenu/component/AddMenuAddImageComponent.kt
@@ -0,0 +1,96 @@
+package com.kuit.ourmenu.ui.addmenu.component
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.lazy.LazyRow
+import androidx.compose.foundation.lazy.itemsIndexed
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Button
+import androidx.compose.material3.ButtonDefaults
+import androidx.compose.material3.Icon
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.kuit.ourmenu.R
+import com.kuit.ourmenu.ui.addmenu.component.item.AddMenuAddedImageItem
+import com.kuit.ourmenu.ui.theme.Neutral300
+import com.kuit.ourmenu.ui.theme.Neutral500
+import com.kuit.ourmenu.ui.theme.ourMenuTypography
+
+@Composable
+fun AddMenuAddImageComponent(
+    modifier: Modifier = Modifier,
+    imgList: List<Int>,
+    onDelete: (Int) -> Unit
+) {
+    Row(
+        modifier = modifier
+            .fillMaxWidth()
+    ) {
+        Button(
+            onClick = { /*TODO: 이미지 추가*/ },
+            modifier = modifier.size(88.dp, 72.dp),
+            shape = RoundedCornerShape(12.dp),
+            contentPadding = PaddingValues(0.dp),
+            colors = ButtonDefaults.buttonColors(
+                containerColor = Neutral300
+            )
+        ) {
+            Column(
+                modifier = modifier.fillMaxWidth(),
+                horizontalAlignment = Alignment.CenterHorizontally,
+                verticalArrangement = Arrangement.Center
+            ) {
+                Icon(
+                    painter = painterResource(R.drawable.ic_addmenu_add_photo),
+                    contentDescription = "add photo",
+                    tint = Color.Unspecified
+                )
+                Text(
+                    text = "${imgList.size}/5",
+                    style = ourMenuTypography().pretendard_500_12,
+                    color = Neutral500
+                )
+            }
+        }
+        Spacer(modifier = modifier.size(8.dp))
+        LazyRow(modifier = modifier.fillMaxWidth()) {
+            itemsIndexed(imgList) { index, item ->
+                if (index == 0) {
+                    AddMenuAddedImageItem(img = item, isFirstItem = true) {
+                        onDelete(index)
+                    }
+                } else {
+                    AddMenuAddedImageItem(img = item, isFirstItem = false) {
+                        onDelete(index)
+                    }
+                }
+                Spacer(modifier = modifier.size(8.dp))
+            }
+        }
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+private fun AddMenuAddImageComponentPreview() {
+    val imgList = listOf(
+        R.drawable.img_dummy_pizza,
+        R.drawable.img_dummy_pizza,
+        R.drawable.img_dummy_pizza,
+        R.drawable.img_dummy_pizza,
+    )
+    AddMenuAddImageComponent(imgList = imgList) {
+        //onDelete
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/kuit/ourmenu/ui/addmenu/component/AddMenuSearchBackground.kt b/app/src/main/java/com/kuit/ourmenu/ui/addmenu/component/AddMenuSearchBackground.kt
new file mode 100644
index 0000000..e171132
--- /dev/null
+++ b/app/src/main/java/com/kuit/ourmenu/ui/addmenu/component/AddMenuSearchBackground.kt
@@ -0,0 +1,136 @@
+package com.kuit.ourmenu.ui.addmenu.component
+
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.items
+import androidx.compose.material3.Icon
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.kuit.ourmenu.R
+import com.kuit.ourmenu.ui.addmenu.component.item.StoreSearchItem
+import com.kuit.ourmenu.ui.common.BottomFullWidthButton
+import com.kuit.ourmenu.ui.theme.Neutral100
+import com.kuit.ourmenu.ui.theme.Neutral500
+import com.kuit.ourmenu.ui.theme.Neutral700
+import com.kuit.ourmenu.ui.theme.ourMenuTypography
+
+@Composable
+fun AddMenuSearchBackground(
+    modifier: Modifier = Modifier,
+    searchActionDone: Boolean,
+    recentSearchResults: List<Boolean>, //이후에 타입 변경
+    searchResults: List<Boolean>, //이후에 타입 변경
+    onItemClick: () -> Unit
+) {
+    Box(
+        modifier = Modifier
+            .fillMaxSize(),
+    ) {
+        Column(
+            modifier = Modifier
+                .fillMaxSize()
+                .padding(bottom = 52.dp)
+        ) {
+            if (searchActionDone) {
+                //검색을 한 경우
+                if (searchResults.isEmpty()) {
+                    Column(
+                        modifier = Modifier
+                            .fillMaxWidth()
+                            .padding(top = 116.dp),
+                        horizontalAlignment = Alignment.CenterHorizontally
+                    ) {
+                        Icon(
+                            painter = painterResource(R.drawable.ic_addmenu_noresult),
+                            contentDescription = "no result",
+                            tint = Color.Unspecified
+                        )
+                        Text(
+                            text = stringResource(R.string.no_result),
+                            style = ourMenuTypography().pretendard_600_14,
+                            color = Neutral500,
+                            modifier = Modifier.padding(top = 8.dp)
+                        )
+                    }
+                } else {
+                    LazyColumn(modifier = Modifier.padding(top = 68.dp)) {
+                        items(searchResults) { item ->
+                            StoreSearchItem(
+                                isLastItem = item,
+                            ){
+                                onItemClick()
+                            }
+                        }
+                    }
+                }
+            } else {
+                //검색을 하지 않은 경우
+                Text(
+                    text = stringResource(R.string.recent_search),
+                    style = ourMenuTypography().pretendard_600_14,
+                    color = Neutral700,
+                    modifier = Modifier.padding(start = 28.dp, top = 68.dp)
+                )
+                if (recentSearchResults.isEmpty()) {
+                    Column(modifier = Modifier.fillMaxSize()) { /*empty view*/ }
+                } else {
+                    LazyColumn() {
+                        items(recentSearchResults) { item ->
+                            StoreSearchItem(
+                                isLastItem = item,
+                            ){
+                                onItemClick()
+                            }
+                        }
+                    }
+                }
+            }
+
+        }
+
+        BottomFullWidthButton(
+            modifier = Modifier
+                .align(Alignment.BottomCenter)
+                .padding(start = 20.dp, end = 20.dp, bottom = 20.dp),
+            onClick = { TODO() },
+            containerColor = Neutral100,
+            contentColor = Neutral500,
+            text = stringResource(R.string.add_store_and_menu_by_myself)
+        )
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+private fun AddMenuSearchBackgroundPreview() {
+    val searchActionDone by rememberSaveable { mutableStateOf(false) }
+    val recentSearchResults = mutableListOf(
+        false,
+        false,
+        false,
+        false,
+        true,
+    )
+    val searchResults: MutableList<Boolean> = mutableListOf(true)
+    AddMenuSearchBackground(
+        searchActionDone = searchActionDone,
+        recentSearchResults = recentSearchResults,
+        searchResults = searchResults,
+    ){
+        //onItemClick
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/kuit/ourmenu/ui/addmenu/component/bottomsheet/AddMenuBottomSheetContent.kt b/app/src/main/java/com/kuit/ourmenu/ui/addmenu/component/bottomsheet/AddMenuBottomSheetContent.kt
new file mode 100644
index 0000000..e6489d2
--- /dev/null
+++ b/app/src/main/java/com/kuit/ourmenu/ui/addmenu/component/bottomsheet/AddMenuBottomSheetContent.kt
@@ -0,0 +1,193 @@
+package com.kuit.ourmenu.ui.addmenu.component.bottomsheet
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.itemsIndexed
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.BottomSheetScaffoldState
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.HorizontalDivider
+import androidx.compose.material3.Icon
+import androidx.compose.material3.SheetValue
+import androidx.compose.material3.Text
+import androidx.compose.material3.rememberBottomSheetScaffoldState
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.rememberCoroutineScope
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.lifecycle.compose.collectAsStateWithLifecycle
+import androidx.lifecycle.viewmodel.compose.viewModel
+import com.kuit.ourmenu.R
+import com.kuit.ourmenu.ui.addmenu.component.item.SelectMenuItem
+import com.kuit.ourmenu.ui.addmenu.viewmodel.AddMenuDummyStoreInfo
+import com.kuit.ourmenu.ui.addmenu.viewmodel.AddMenuSearchViewModel
+import com.kuit.ourmenu.ui.common.BottomFullWidthButton
+import com.kuit.ourmenu.ui.theme.Neutral100
+import com.kuit.ourmenu.ui.theme.Neutral300
+import com.kuit.ourmenu.ui.theme.Neutral400
+import com.kuit.ourmenu.ui.theme.Neutral500
+import com.kuit.ourmenu.ui.theme.Neutral700
+import com.kuit.ourmenu.ui.theme.NeutralWhite
+import com.kuit.ourmenu.ui.theme.Primary500Main
+import com.kuit.ourmenu.ui.theme.ourMenuTypography
+import kotlinx.coroutines.launch
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun AddMenuBottomSheetContent(
+    scaffoldState: BottomSheetScaffoldState,
+    storeInfo: AddMenuDummyStoreInfo,
+    onItemClick: (Int) -> Unit
+) {
+    val coroutineScope = rememberCoroutineScope()
+    val enableNextButton = storeInfo.menuList.any { it }
+
+    Column(
+        modifier = Modifier
+            .fillMaxSize()
+            .padding(start = 20.dp, end = 20.dp, bottom = 20.dp)
+    ) {
+        Text(
+            text = "식당 이름",
+            style = ourMenuTypography().pretendard_700_20
+        )
+        Row(modifier = Modifier.fillMaxWidth(), verticalAlignment = Alignment.CenterVertically) {
+            Icon(
+                painter = painterResource(id = R.drawable.ic_fill_map_20),
+                contentDescription = "location info icon",
+                //이 코드를 없애면 아이콘이 검은색으로 보여서 작성
+                tint = Color.Unspecified
+            )
+            Text(
+                text = "주소에 해당하는 텍스트",
+                style = ourMenuTypography().pretendard_500_14,
+                color = Neutral700,
+                modifier = Modifier.padding(start = 8.dp)
+            )
+        }
+
+        Row(
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(top = 8.dp), horizontalArrangement = Arrangement.SpaceBetween
+        ) {
+            //이미지 3개 배치
+            Image(
+                painter = painterResource(id = R.drawable.img_dummy_pizza),
+                contentDescription = "dummy data",
+                contentScale = ContentScale.Crop,
+                modifier = Modifier
+                    .width(104.dp)
+                    .height(80.dp)
+                    .clip(RoundedCornerShape(8.dp))
+            )
+            Image(
+                painter = painterResource(id = R.drawable.img_dummy_pizza),
+                contentDescription = "dummy data",
+                contentScale = ContentScale.Crop,
+                modifier = Modifier
+                    .width(104.dp)
+                    .height(80.dp)
+                    .clip(RoundedCornerShape(8.dp))
+            )
+            Image(
+                painter = painterResource(id = R.drawable.img_dummy_pizza),
+                contentDescription = "dummy data",
+                contentScale = ContentScale.Crop,
+                modifier = Modifier
+                    .width(104.dp)
+                    .height(80.dp)
+                    .clip(RoundedCornerShape(8.dp))
+            )
+        }
+        //BottomSheet가 확장된 상태가 아닐 때 (AddMenuScreen에서) 보여줄 버튼
+        if (scaffoldState.bottomSheetState.targetValue != SheetValue.Expanded) {
+            HorizontalDivider(
+                thickness = 1.dp,
+                color = Neutral300,
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(vertical = 12.dp)
+            )
+            BottomFullWidthButton(
+                containerColor = Primary500Main,
+                contentColor = NeutralWhite,
+                text = stringResource(R.string.next)
+            ) {
+                coroutineScope.launch {
+                    scaffoldState.bottomSheetState.expand()
+                }
+            }
+        } else {
+            LazyColumn(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .weight(1f)
+                    .padding(top = 12.dp)
+            ) {
+                itemsIndexed(storeInfo.menuList) { index, isSelected ->
+//                    Log.d("AddMenuBottomSheetContent", "Item: $index, $isSelected")
+                    SelectMenuItem(
+                        isSelected = isSelected,
+                        onClick = { onItemClick(index) }
+                    )
+                }
+            }
+
+            Column() {
+                BottomFullWidthButton(
+                    containerColor = Neutral100,
+                    contentColor = Neutral500,
+                    text = stringResource(R.string.add_menu_by_myself)
+                ) {
+                    //메뉴 추가화면으로 이동하는 로직
+                }
+                Spacer(modifier = Modifier.padding(10.dp))
+                BottomFullWidthButton(
+                    containerColor = if (enableNextButton) Primary500Main else Neutral400,
+                    contentColor = NeutralWhite,
+                    text = stringResource(R.string.next)
+                ) {
+                    if (enableNextButton){
+                        //버튼 활성화 된 경우의 동작
+                    }
+                }
+
+            }
+        }
+    }
+}
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Preview(showBackground = true)
+@Composable
+private fun AddMenuBottomSheetContentPreview() {
+    val scaffoldState = rememberBottomSheetScaffoldState()
+    val viewModel: AddMenuSearchViewModel = viewModel()
+    val storeInfo by viewModel.storeInfo.collectAsStateWithLifecycle()
+    LaunchedEffect(Unit) {
+        //아래 주석 해제하면 bottom sheet 확장된 상태 확인 가능
+        scaffoldState.bottomSheetState.expand()
+    }
+    AddMenuBottomSheetContent(scaffoldState, storeInfo) { index ->
+        viewModel.updateSelectedMenu(index = index)
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/kuit/ourmenu/ui/addmenu/component/bottomsheet/IconSelectBottomSheet.kt b/app/src/main/java/com/kuit/ourmenu/ui/addmenu/component/bottomsheet/IconSelectBottomSheet.kt
new file mode 100644
index 0000000..325aba2
--- /dev/null
+++ b/app/src/main/java/com/kuit/ourmenu/ui/addmenu/component/bottomsheet/IconSelectBottomSheet.kt
@@ -0,0 +1,49 @@
+package com.kuit.ourmenu.ui.addmenu.component.bottomsheet
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.kuit.ourmenu.R
+import com.kuit.ourmenu.ui.addmenu.component.item.IconItem
+import com.kuit.ourmenu.ui.theme.ourMenuTypography
+
+@Composable
+fun IconSelectBottomSheet(modifier: Modifier = Modifier) {
+    Column(modifier = Modifier
+        .fillMaxSize()
+        .padding(horizontal = 20.dp)
+    ) {
+        Row(modifier = Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.SpaceBetween) {
+            Text(
+                text = stringResource(R.string.icon),
+                style = ourMenuTypography().pretendard_700_16
+            )
+        }
+        Spacer(modifier = Modifier.height(20.dp))
+        //아이콘들 추가
+        IconItem(
+            iconId = R.drawable.ic_tag_rice,
+            isSelected = true
+        ) {
+
+        }
+
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+private fun IconSelectBottomSheetPreview() {
+    IconSelectBottomSheet()
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/kuit/ourmenu/ui/addmenu/component/bottomsheet/TagSelectBottomSheet.kt b/app/src/main/java/com/kuit/ourmenu/ui/addmenu/component/bottomsheet/TagSelectBottomSheet.kt
new file mode 100644
index 0000000..9e4acf4
--- /dev/null
+++ b/app/src/main/java/com/kuit/ourmenu/ui/addmenu/component/bottomsheet/TagSelectBottomSheet.kt
@@ -0,0 +1,71 @@
+package com.kuit.ourmenu.ui.addmenu.component.bottomsheet
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.kuit.ourmenu.R
+import com.kuit.ourmenu.ui.theme.Neutral500
+import com.kuit.ourmenu.ui.theme.ourMenuTypography
+
+@Composable
+fun TagSelectBottomSheet(modifier: Modifier = Modifier) {
+    Column(modifier = Modifier
+        .fillMaxSize()
+        .padding(horizontal = 20.dp)
+    ) {
+        Row(modifier = Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.SpaceBetween) {
+            Text(
+                text = stringResource(R.string.food_tag),
+                style = ourMenuTypography().pretendard_700_16
+            )
+            Text(
+                text = stringResource(R.string.multiple_choice_available),
+                style = ourMenuTypography().pretendard_600_14,
+                color = Neutral500
+            )
+        }
+        Spacer(modifier = Modifier.height(20.dp))
+        //종류
+        Text(
+            text = "종류",
+            style = ourMenuTypography().pretendard_500_14,
+        )
+
+        //나라 별 음식
+        Text(
+            text = "나라 별 음식",
+            style = ourMenuTypography().pretendard_500_14,
+        )
+
+        //맛
+        Text(
+            text = "맛",
+            style = ourMenuTypography().pretendard_500_14,
+        )
+
+        //상황
+        Text(
+            text = "상황",
+            style = ourMenuTypography().pretendard_500_14,
+        )
+
+
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+private fun TagSelectBottomSheetPreview() {
+    TagSelectBottomSheet()
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/kuit/ourmenu/ui/addmenu/component/item/AddMenuAddedImageItem.kt b/app/src/main/java/com/kuit/ourmenu/ui/addmenu/component/item/AddMenuAddedImageItem.kt
new file mode 100644
index 0000000..2f757b5
--- /dev/null
+++ b/app/src/main/java/com/kuit/ourmenu/ui/addmenu/component/item/AddMenuAddedImageItem.kt
@@ -0,0 +1,95 @@
+package com.kuit.ourmenu.ui.addmenu.component.item
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Card
+import androidx.compose.material3.Surface
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.kuit.ourmenu.R
+import com.kuit.ourmenu.ui.theme.NeutralWhite
+import com.kuit.ourmenu.ui.theme.Primary500Main
+import com.kuit.ourmenu.ui.theme.ourMenuTypography
+
+@Composable
+fun AddMenuAddedImageItem(
+    modifier: Modifier = Modifier,
+    img: Int,
+    isFirstItem: Boolean,
+    onDelete: () -> Unit
+) {
+    Card(
+        modifier = modifier
+            .size(88.dp, 72.dp),
+        shape = RoundedCornerShape(12.dp)
+    ) {
+        Box(modifier = modifier.fillMaxSize()) {
+            Image(
+                modifier = modifier
+                    .fillMaxSize()
+                    .clip(RoundedCornerShape(12.dp)),
+                painter = painterResource(img),
+                contentDescription = "menu image",
+                contentScale = ContentScale.Crop
+            )
+
+            if (isFirstItem) {
+                Surface(
+                    modifier = modifier
+                        .align(Alignment.TopStart)
+                        .padding(top = 4.dp, start = 6.dp)
+                        .size(40.dp, 24.dp),
+                    shape = RoundedCornerShape(8.dp),
+                    color = NeutralWhite,
+                ) {
+                    Box(modifier = modifier.fillMaxSize()) {
+                        Text(
+                            text = "대표",
+                            color = Primary500Main,
+                            style = ourMenuTypography().pretendard_600_14,
+                            modifier = modifier.align(Alignment.Center)
+                        )
+                    }
+                }
+            }
+
+            Image(
+                modifier = modifier
+                    .align(Alignment.TopEnd)
+                    .padding(top = 7.dp, end = 6.dp)
+                    .clickable {
+                        onDelete()
+                    },
+                painter = painterResource(R.drawable.ic_addmenu_x),
+                contentDescription = "menu image",
+                contentScale = ContentScale.Crop
+            )
+        }
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+private fun AddMenuAddedImageItemPreview() {
+    Column {
+        AddMenuAddedImageItem(img = R.drawable.img_dummy_pizza, isFirstItem = true) {
+
+        }
+        AddMenuAddedImageItem(img = R.drawable.img_dummy_pizza, isFirstItem = false) {
+
+        }
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/kuit/ourmenu/ui/addmenu/component/item/AddMenuInfoAddressFieldItem.kt b/app/src/main/java/com/kuit/ourmenu/ui/addmenu/component/item/AddMenuInfoAddressFieldItem.kt
new file mode 100644
index 0000000..1f248ee
--- /dev/null
+++ b/app/src/main/java/com/kuit/ourmenu/ui/addmenu/component/item/AddMenuInfoAddressFieldItem.kt
@@ -0,0 +1,117 @@
+package com.kuit.ourmenu.ui.addmenu.component.item
+
+import androidx.compose.foundation.border
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.kuit.ourmenu.R
+import com.kuit.ourmenu.ui.common.CustomTextField
+import com.kuit.ourmenu.ui.theme.Neutral100
+import com.kuit.ourmenu.ui.theme.Neutral300
+import com.kuit.ourmenu.ui.theme.Neutral500
+import com.kuit.ourmenu.ui.theme.Neutral700
+import com.kuit.ourmenu.ui.theme.Primary500Main
+import com.kuit.ourmenu.ui.theme.ourMenuTypography
+
+@Composable
+fun AddMenuInfoAddressFieldItem(
+    autoInput: Boolean,
+    mainAddressText: String,
+    detailedAddressText: String,
+    onMainAddressChange: (String) -> Unit,
+    onDetailedAddressChange: (String) -> Unit,
+) {
+    Column(
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(bottom = 20.dp),
+        verticalArrangement = Arrangement.Center,
+    ) {
+        Row(
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(bottom = 4.dp)
+        ) {
+            Text(
+                text = stringResource(R.string.resaturant_address),
+                style = ourMenuTypography().pretendard_600_14
+            )
+            Text(
+                text = stringResource(R.string.asterisk),
+                style = ourMenuTypography().pretendard_600_14,
+                color = Primary500Main
+            )
+        }
+        CustomTextField(
+            modifier = Modifier
+                .fillMaxWidth()
+                .height(44.dp)
+                .border(1.dp, Neutral300, RoundedCornerShape(8.dp)),
+            text = mainAddressText,
+            onTextChange = onMainAddressChange,
+            shape = RoundedCornerShape(8.dp),
+            paddingValues = PaddingValues(start = 28.dp, top = 12.dp, bottom = 12.dp),
+            containerColor = Neutral100,
+            placeHolder = {
+                Text(
+                    text = stringResource(R.string.type_store_address),
+                    style = ourMenuTypography().pretendard_500_14,
+                    color = Neutral500
+                )
+            },
+            textStyle = ourMenuTypography().pretendard_700_14.copy(color = Neutral700)
+        )
+
+        Spacer(modifier = Modifier.height(4.dp))
+
+        CustomTextField(
+            modifier = Modifier
+                .fillMaxWidth()
+                .height(44.dp)
+                .border(1.dp, Neutral300, RoundedCornerShape(8.dp)),
+            text = detailedAddressText,
+            onTextChange = onDetailedAddressChange,
+            shape = RoundedCornerShape(8.dp),
+            paddingValues = PaddingValues(start = 28.dp, top = 12.dp, bottom = 12.dp),
+            containerColor = Neutral100,
+            placeHolder = {
+                Text(
+                    text = stringResource(R.string.type_restaurant_detailed_address),
+                    style = ourMenuTypography().pretendard_500_14,
+                    color = Neutral500
+                )
+            },
+            textStyle = ourMenuTypography().pretendard_700_14.copy(color = Neutral700)
+        )
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+private fun AddMenuInfoAddressFieldItemPreview() {
+    var mainAddressText by rememberSaveable { mutableStateOf("") }
+    var detailedAddressText by rememberSaveable { mutableStateOf("") }
+    AddMenuInfoAddressFieldItem(
+        autoInput = true,
+        mainAddressText = mainAddressText,
+        detailedAddressText = detailedAddressText,
+        onMainAddressChange = { mainAddressText = it },
+        onDetailedAddressChange = { detailedAddressText = it },
+    )
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/kuit/ourmenu/ui/addmenu/component/item/AddMenuInfoMenuBoardFieldItem.kt b/app/src/main/java/com/kuit/ourmenu/ui/addmenu/component/item/AddMenuInfoMenuBoardFieldItem.kt
new file mode 100644
index 0000000..631ede4
--- /dev/null
+++ b/app/src/main/java/com/kuit/ourmenu/ui/addmenu/component/item/AddMenuInfoMenuBoardFieldItem.kt
@@ -0,0 +1,175 @@
+package com.kuit.ourmenu.ui.addmenu.component.item
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Button
+import androidx.compose.material3.ButtonDefaults
+import androidx.compose.material3.DropdownMenu
+import androidx.compose.material3.DropdownMenuItem
+import androidx.compose.material3.Icon
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.kuit.ourmenu.R
+import com.kuit.ourmenu.ui.common.CustomTextField
+import com.kuit.ourmenu.ui.theme.Neutral100
+import com.kuit.ourmenu.ui.theme.Neutral300
+import com.kuit.ourmenu.ui.theme.Neutral400
+import com.kuit.ourmenu.ui.theme.Neutral500
+import com.kuit.ourmenu.ui.theme.Neutral700
+import com.kuit.ourmenu.ui.theme.NeutralWhite
+import com.kuit.ourmenu.ui.theme.Primary500Main
+import com.kuit.ourmenu.ui.theme.ourMenuTypography
+
+@Composable
+fun AddMenuInfoMenuBoardFieldItem(
+    modifier: Modifier = Modifier,
+    options: List<String>,
+    selectedOption: String,
+    onSelectedOptionChange: (String) -> Unit
+) {
+    var expanded by remember { mutableStateOf(false) }
+
+    Column(
+        modifier = modifier
+            .fillMaxWidth()
+            .padding(bottom = 20.dp),
+        verticalArrangement = Arrangement.Center,
+    ) {
+        Row(
+            modifier = modifier
+                .fillMaxWidth()
+                .padding(bottom = 4.dp)
+        ) {
+            Text(
+                text = stringResource(R.string.menuboard),
+                style = ourMenuTypography().pretendard_600_14
+            )
+            Text(
+                text = stringResource(R.string.asterisk),
+                style = ourMenuTypography().pretendard_600_14,
+                color = Primary500Main
+            )
+        }
+
+        Box(modifier = modifier.fillMaxWidth()) {
+            CustomTextField(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .height(44.dp)
+                    .border(1.dp, Neutral300, RoundedCornerShape(8.dp))
+                    .padding(end = 6.dp)
+                    .clickable {
+                        expanded = true
+                    },
+                text = selectedOption,
+                onTextChange = {},
+                shape = RoundedCornerShape(8.dp),
+                paddingValues = PaddingValues(start = 28.dp, top = 12.dp, bottom = 12.dp),
+                containerColor = Neutral100,
+                placeHolder = {
+                    Text(
+                        text = stringResource(R.string.save_menuboard),
+                        style = ourMenuTypography().pretendard_500_14,
+                        color = Neutral500
+                    )
+                },
+                enabled = false,
+                textStyle = ourMenuTypography().pretendard_700_14.copy(color = Neutral700),
+                trailingIcon = {
+                    Button(
+                        modifier = modifier.size(44.dp, 32.dp),
+                        onClick = {
+                            if(expanded) expanded = false
+                        },
+                        shape = RoundedCornerShape(8.dp),
+                        colors = ButtonDefaults.buttonColors(if (selectedOption.isBlank()) Neutral400 else Primary500Main),
+                        contentPadding = PaddingValues(0.dp)
+                    ) {
+                        Text(
+                            text = "확인",
+                            style = ourMenuTypography().pretendard_700_12.copy(
+                                color = NeutralWhite
+                            )
+                        )
+                    }
+                }
+            )
+            DropdownMenu(
+                modifier = modifier
+                    .fillMaxWidth()
+                    .background(color = NeutralWhite, shape = RoundedCornerShape(8.dp)),
+                expanded = expanded,
+                onDismissRequest = { expanded = false }
+            ) {
+                options.forEach { option ->
+                    val isSelected = option == selectedOption
+                    DropdownMenuItem(
+                        modifier = modifier
+                            .fillMaxWidth()
+                            .background(
+                                color = if (isSelected) Neutral300 else NeutralWhite,
+                                shape = RoundedCornerShape(8.dp)
+                            ),
+                        text = {
+                            Row(modifier = modifier.fillMaxWidth()) {
+                                Icon(
+                                    painter = painterResource(if (isSelected) R.drawable.ic_dropdown_checked else R.drawable.ic_dropdown_unchecked),
+                                    contentDescription = "check icon",
+                                    tint = Color.Unspecified
+                                )
+
+                                Text(
+                                    text = option,
+                                    style = ourMenuTypography().pretendard_700_14.copy(
+                                        color = if (isSelected) Neutral700 else Neutral500
+                                    )
+                                )
+                            }
+                        },
+                        onClick = {
+                            onSelectedOptionChange(option)
+                        }
+                    )
+                }
+            }
+        }
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+private fun AddMenuInfoMenuBoardFieldItemPreview() {
+    var options = listOf("옵션1", "옵션2", "옵션3")
+    var selectedOption by rememberSaveable { mutableStateOf("") }
+    Column(modifier = Modifier.fillMaxSize()) {
+        AddMenuInfoMenuBoardFieldItem(
+            options = options,
+            selectedOption = selectedOption
+        ){
+            selectedOption = it
+        }
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/kuit/ourmenu/ui/addmenu/component/item/AddMenuInfoTextFieldItem.kt b/app/src/main/java/com/kuit/ourmenu/ui/addmenu/component/item/AddMenuInfoTextFieldItem.kt
new file mode 100644
index 0000000..4f71c36
--- /dev/null
+++ b/app/src/main/java/com/kuit/ourmenu/ui/addmenu/component/item/AddMenuInfoTextFieldItem.kt
@@ -0,0 +1,123 @@
+package com.kuit.ourmenu.ui.addmenu.component.item
+
+import androidx.compose.foundation.border
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.foundation.text.KeyboardOptions
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.input.KeyboardType
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.kuit.ourmenu.R
+import com.kuit.ourmenu.ui.common.CustomTextField
+import com.kuit.ourmenu.ui.theme.Neutral100
+import com.kuit.ourmenu.ui.theme.Neutral300
+import com.kuit.ourmenu.ui.theme.Neutral500
+import com.kuit.ourmenu.ui.theme.Neutral700
+import com.kuit.ourmenu.ui.theme.Primary500Main
+import com.kuit.ourmenu.ui.theme.ourMenuTypography
+
+@Composable
+fun AddMenuInfoTextFieldItem(
+    fieldName: String,
+    autoInput: Boolean,
+    text: String,
+    onTextChange: (String) -> Unit,
+    placeholder: String,
+    isPriceInfo: Boolean = false,
+) {
+    Column(
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(bottom = 20.dp),
+        verticalArrangement = Arrangement.Center,
+    ) {
+        Row(
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(bottom = 4.dp)
+        ) {
+            Text(
+                text = fieldName,
+                style = ourMenuTypography().pretendard_600_14
+            )
+            Text(
+                text = stringResource(R.string.asterisk),
+                style = ourMenuTypography().pretendard_600_14,
+                color = Primary500Main
+            )
+        }
+        CustomTextField(
+            modifier = Modifier
+                .fillMaxWidth()
+                .height(44.dp)
+                .border(1.dp, Neutral300, RoundedCornerShape(8.dp)),
+            text = text,
+            onTextChange = onTextChange,
+            shape = RoundedCornerShape(8.dp),
+            paddingValues = PaddingValues(start = 28.dp, end = 28.dp, top = 12.dp, bottom = 12.dp),
+            containerColor = Neutral100,
+            placeHolder = {
+                Text(
+                    text = placeholder,
+                    style = ourMenuTypography().pretendard_500_14,
+                    color = Neutral500
+                )
+            },
+            textStyle = ourMenuTypography().pretendard_700_14.copy(color = Neutral700),
+            keyboardOptions = if(isPriceInfo) {
+                KeyboardOptions(
+                    keyboardType = KeyboardType.Number,
+                    )
+            }else{
+                KeyboardOptions.Default
+            }
+        )
+
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+private fun AddMenuInfoTextFieldItemPreview() {
+    var priceText by rememberSaveable { mutableStateOf("") }
+    var storeNameText by rememberSaveable { mutableStateOf("") }
+
+    Column(
+        modifier = Modifier.fillMaxSize(),
+        verticalArrangement = Arrangement.Center,
+        horizontalAlignment = Alignment.CenterHorizontally
+    ) {
+        AddMenuInfoTextFieldItem(
+            fieldName = stringResource(R.string.menu_price),
+            autoInput = false,
+            text = priceText,
+            onTextChange = { priceText = it },
+            placeholder = stringResource(R.string.type_menu_price),
+            isPriceInfo = true
+        )
+        AddMenuInfoTextFieldItem(
+            fieldName = stringResource(R.string.store_name),
+            autoInput = true,
+            text = storeNameText,
+            onTextChange = { storeNameText = it },
+            placeholder = stringResource(R.string.type_store_name)
+        )
+    }
+
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/kuit/ourmenu/ui/addmenu/component/item/FoodTagItem.kt b/app/src/main/java/com/kuit/ourmenu/ui/addmenu/component/item/FoodTagItem.kt
new file mode 100644
index 0000000..8d08869
--- /dev/null
+++ b/app/src/main/java/com/kuit/ourmenu/ui/addmenu/component/item/FoodTagItem.kt
@@ -0,0 +1,64 @@
+package com.kuit.ourmenu.ui.addmenu.component.item
+
+import androidx.compose.material3.AssistChip
+import androidx.compose.material3.AssistChipDefaults
+import androidx.compose.material3.Icon
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.tooling.preview.Preview
+import com.kuit.ourmenu.R
+import com.kuit.ourmenu.ui.theme.Neutral900
+import com.kuit.ourmenu.ui.theme.NeutralWhite
+import com.kuit.ourmenu.ui.theme.Primary500Main
+import com.kuit.ourmenu.ui.theme.ourMenuTypography
+
+@Composable
+fun FoodTagItem(
+    label: String,
+    iconId: Int,
+    isSelected: Boolean,
+    onSelected: () -> Unit
+) {
+    AssistChip(
+        onClick = {
+            // 클릭 이벤트 처리
+            onSelected()
+        },
+        label = {
+            Text(
+                text = label,
+                style = ourMenuTypography().pretendard_700_16
+            )
+        },
+        leadingIcon = {
+                Icon(
+                    painterResource(iconId),
+                    contentDescription = null,
+                    tint = if(isSelected) NeutralWhite else Neutral900
+                )
+        },
+        colors = AssistChipDefaults.assistChipColors(
+            containerColor = if (isSelected) Primary500Main else NeutralWhite,
+            labelColor = if (isSelected) NeutralWhite else Neutral900
+        )
+    )
+}
+
+@Preview(showBackground = true)
+@Composable
+private fun FoodTagPreview() {
+    var isSelected by rememberSaveable { mutableStateOf(false) }
+    FoodTagItem(
+        label = "밥",
+        iconId = R.drawable.ic_tag_rice,
+        isSelected = isSelected,
+        onSelected = {
+            isSelected = !isSelected
+        }
+    )
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/kuit/ourmenu/ui/addmenu/component/item/IconItem.kt b/app/src/main/java/com/kuit/ourmenu/ui/addmenu/component/item/IconItem.kt
new file mode 100644
index 0000000..ab3dfbb
--- /dev/null
+++ b/app/src/main/java/com/kuit/ourmenu/ui/addmenu/component/item/IconItem.kt
@@ -0,0 +1,57 @@
+package com.kuit.ourmenu.ui.addmenu.component.item
+
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.size
+import androidx.compose.material3.Icon
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.kuit.ourmenu.R
+import com.kuit.ourmenu.ui.theme.NeutralWhite
+
+@Composable
+fun IconItem(
+    iconId: Int,
+    isSelected: Boolean,
+    onSelected: () -> Unit
+) {
+    Box(
+        modifier = Modifier.size(36.dp).
+        clickable { onSelected() },
+        contentAlignment = Alignment.Center,
+    ) {
+        Icon(
+            painter = painterResource(R.drawable.ic_icon_ellipse),
+            contentDescription = "icon ellipse",
+            tint = Color.Unspecified
+        )
+        Icon(
+            painter = painterResource(iconId),
+            contentDescription = "icon",
+            tint = NeutralWhite,
+            modifier = Modifier.size(20.dp)
+        )
+    }
+}
+
+@Preview
+@Composable
+private fun IconItemPreview() {
+    var isSelected by rememberSaveable { mutableStateOf(false) }
+    IconItem(
+        iconId = R.drawable.ic_tag_rice,
+        isSelected = isSelected,
+        onSelected = {
+            isSelected = !isSelected
+        }
+    )
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/kuit/ourmenu/ui/addmenu/component/item/SelectMenuItem.kt b/app/src/main/java/com/kuit/ourmenu/ui/addmenu/component/item/SelectMenuItem.kt
new file mode 100644
index 0000000..5576be6
--- /dev/null
+++ b/app/src/main/java/com/kuit/ourmenu/ui/addmenu/component/item/SelectMenuItem.kt
@@ -0,0 +1,99 @@
+package com.kuit.ourmenu.ui.addmenu.component.item
+
+import androidx.compose.foundation.BorderStroke
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Button
+import androidx.compose.material3.ButtonDefaults
+import androidx.compose.material3.HorizontalDivider
+import androidx.compose.material3.Icon
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.kuit.ourmenu.R
+import com.kuit.ourmenu.ui.theme.Neutral300
+import com.kuit.ourmenu.ui.theme.Neutral700
+import com.kuit.ourmenu.ui.theme.NeutralWhite
+import com.kuit.ourmenu.ui.theme.Primary500Main
+import com.kuit.ourmenu.ui.theme.ourMenuTypography
+
+@Composable
+fun SelectMenuItem(isSelected: Boolean = false, onClick: () -> Unit) {
+    HorizontalDivider(
+        thickness = 1.dp,
+        color = Neutral300,
+        modifier = Modifier.fillMaxWidth()
+    )
+    Row(
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(vertical = 18.dp),
+        horizontalArrangement = Arrangement.SpaceBetween,
+        verticalAlignment = Alignment.CenterVertically
+    ) {
+        Column {
+            Text(
+                text = "메뉴 이름",
+                style = ourMenuTypography().pretendard_700_16
+            )
+            Text(
+                text = "14,000원",
+                style = ourMenuTypography().pretendard_500_14,
+                color = Neutral700,
+            )
+        }
+        if (isSelected) {
+            Button(
+                onClick = onClick,
+                shape = RoundedCornerShape(16.dp),
+                colors = ButtonDefaults.buttonColors(
+                    containerColor = Primary500Main
+                ),
+                modifier = Modifier.size(44.dp, 28.dp),
+                contentPadding = PaddingValues(0.dp)
+            ) {
+                Icon(
+                    painter = painterResource(R.drawable.ic_btn_check_white),
+                    contentDescription = "selected button"
+                )
+            }
+        } else {
+            Button(
+                onClick = onClick,
+                shape = RoundedCornerShape(16.dp),
+                border = BorderStroke(1.dp, Primary500Main),
+                colors = ButtonDefaults.buttonColors(
+                    containerColor = NeutralWhite,
+                    contentColor = Primary500Main
+                ),
+                modifier = Modifier.size(44.dp, 28.dp),
+                contentPadding = PaddingValues(0.dp)
+            ) {
+                Icon(
+                    painter = painterResource(R.drawable.ic_btn_plus_orange),
+                    contentDescription = "unselected button"
+                )
+            }
+        }
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+private fun SelectedMenuItemPreview() {
+    Column(modifier = Modifier.fillMaxSize(), verticalArrangement = Arrangement.Center) {
+        SelectMenuItem(false, onClick = {})
+        SelectMenuItem(true, onClick = {})
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/kuit/ourmenu/ui/addmenu/component/item/StoreSearchItem.kt b/app/src/main/java/com/kuit/ourmenu/ui/addmenu/component/item/StoreSearchItem.kt
new file mode 100644
index 0000000..3cfe32f
--- /dev/null
+++ b/app/src/main/java/com/kuit/ourmenu/ui/addmenu/component/item/StoreSearchItem.kt
@@ -0,0 +1,75 @@
+package com.kuit.ourmenu.ui.addmenu.component.item
+
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.HorizontalDivider
+import androidx.compose.material3.Icon
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.kuit.ourmenu.R
+import com.kuit.ourmenu.ui.theme.Neutral300
+import com.kuit.ourmenu.ui.theme.Neutral700
+import com.kuit.ourmenu.ui.theme.ourMenuTypography
+
+@Composable
+fun StoreSearchItem(
+    isLastItem: Boolean = false,
+    onClick: () -> Unit = {}
+) {
+    Row(
+        modifier = Modifier
+            .fillMaxWidth()
+            .clickable(onClick = onClick)
+            .padding(vertical = 20.dp, horizontal = 20.dp),
+        verticalAlignment = Alignment.CenterVertically
+    ) {
+        Icon(
+            painter = painterResource(R.drawable.ic_fill_map_20),
+            contentDescription = "location info",
+            tint = Color.Unspecified
+        )
+        Column(modifier = Modifier.padding(start = 20.dp)) {
+            Text(
+                text = stringResource(R.string.our_ddeokbokki),
+                style = ourMenuTypography().pretendard_600_16,
+            )
+            Text(
+                text = stringResource(R.string.neungdongro_112),
+                style = ourMenuTypography().pretendard_500_14,
+                color = Neutral700
+            )
+        }
+    }
+
+    //마지막 item이 아닌경우에만 하단에 divider 표시
+    if (!isLastItem) {
+        HorizontalDivider(
+            thickness = 1.dp,
+            color = Neutral300,
+            modifier = Modifier.fillMaxWidth()
+        )
+    }
+
+}
+
+@Preview(showBackground = true)
+@Composable
+private fun RestaurantSearchItemPreview() {
+    Column(modifier = Modifier.fillMaxSize(), verticalArrangement = Arrangement.Center) {
+        StoreSearchItem()
+        StoreSearchItem()
+        StoreSearchItem(true)
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/kuit/ourmenu/ui/addmenu/screen/AddMenuInfoScreen.kt b/app/src/main/java/com/kuit/ourmenu/ui/addmenu/screen/AddMenuInfoScreen.kt
new file mode 100644
index 0000000..caf1511
--- /dev/null
+++ b/app/src/main/java/com/kuit/ourmenu/ui/addmenu/screen/AddMenuInfoScreen.kt
@@ -0,0 +1,146 @@
+package com.kuit.ourmenu.ui.addmenu.screen
+
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.Scaffold
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.kuit.ourmenu.R
+import com.kuit.ourmenu.ui.addmenu.component.AddMenuAddImageComponent
+import com.kuit.ourmenu.ui.addmenu.component.item.AddMenuInfoAddressFieldItem
+import com.kuit.ourmenu.ui.addmenu.component.item.AddMenuInfoMenuBoardFieldItem
+import com.kuit.ourmenu.ui.addmenu.component.item.AddMenuInfoTextFieldItem
+import com.kuit.ourmenu.ui.common.BottomFullWidthButton
+import com.kuit.ourmenu.ui.common.topappbar.OurMenuBackButtonTopAppBar
+import com.kuit.ourmenu.ui.theme.Neutral400
+import com.kuit.ourmenu.ui.theme.NeutralWhite
+import com.kuit.ourmenu.ui.theme.ourMenuTypography
+
+
+@Composable
+fun AddMenuInfoScreen(autoInput: Boolean = true) {
+    var menuBoardText by rememberSaveable { mutableStateOf("") }
+    var menuNameText by rememberSaveable { mutableStateOf("") }
+    var priceText by rememberSaveable { mutableStateOf("") }
+    var storeNameText by rememberSaveable { mutableStateOf("") }
+    var mainAddressText by rememberSaveable { mutableStateOf("") }
+    var detailedAddressText by rememberSaveable { mutableStateOf("") }
+    var imgList by rememberSaveable {
+        mutableStateOf(
+            listOf(
+                R.drawable.img_dummy_pizza,
+                R.drawable.img_dummy_pizza,
+                R.drawable.img_dummy_pizza,
+                R.drawable.img_dummy_pizza,
+            )
+        )
+    }
+    var options = listOf("옵션1", "옵션2", "옵션3")
+    var selectedOption by rememberSaveable { mutableStateOf("") }
+
+    Scaffold(
+        modifier = Modifier.fillMaxSize(),
+        topBar = {
+            OurMenuBackButtonTopAppBar {
+                Text(
+                    text = stringResource(R.string.add_menu),
+                    style = ourMenuTypography().pretendard_600_18
+                )
+            }
+        },
+        bottomBar = {
+            Column(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(20.dp),
+            ) {
+                BottomFullWidthButton(
+                    containerColor = Neutral400,
+                    contentColor = NeutralWhite,
+                    text = stringResource(R.string.next)
+                ) {
+                    TODO()
+                }
+            }
+        },
+        content = { paddingValues ->
+            Column(
+                modifier = Modifier
+                    .padding(paddingValues)
+                    .padding(start = 20.dp, end = 20.dp)
+                    .fillMaxWidth()
+            ) {
+                Row(
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .padding(vertical = 20.dp)
+                ) {
+                    AddMenuAddImageComponent(imgList = imgList) { index ->
+                        imgList = imgList.toMutableList().apply {
+                            removeAt(index)
+                        }
+                    }
+                }
+
+                Column(modifier = Modifier.fillMaxWidth()) {
+                    AddMenuInfoMenuBoardFieldItem(
+                        options = options,
+                        selectedOption = selectedOption
+                    ){
+                        selectedOption = it
+                    }
+
+                    AddMenuInfoTextFieldItem(
+                        fieldName = stringResource(R.string.menu_name),
+                        autoInput = autoInput,
+                        text = menuNameText,
+                        onTextChange = { menuNameText = it },
+                        placeholder = stringResource(R.string.type_menu_name)
+                    )
+                    AddMenuInfoTextFieldItem(
+                        fieldName = stringResource(R.string.menu_price),
+                        autoInput = autoInput,
+                        text = priceText,
+                        onTextChange = { priceText = it },
+                        placeholder = stringResource(R.string.type_menu_price),
+                        isPriceInfo = true
+                    )
+                    AddMenuInfoTextFieldItem(
+                        fieldName = stringResource(R.string.store_name),
+                        text = storeNameText,
+                        autoInput = autoInput,
+                        onTextChange = { storeNameText = it },
+                        placeholder = stringResource(R.string.type_store_name)
+                    )
+
+                    AddMenuInfoAddressFieldItem(
+                        autoInput = autoInput,
+                        mainAddressText = mainAddressText,
+                        onMainAddressChange = { mainAddressText = it },
+                        detailedAddressText = detailedAddressText,
+                        onDetailedAddressChange = { detailedAddressText = it }
+                    )
+                }
+            }
+        }
+    )
+}
+
+@Preview(showBackground = true)
+@Composable
+private fun AddMenuInfoScreenPreview() {
+    //가게와 메뉴 직접 추가하기를 통해 해당 화면으로 오는 경우에는 인자로 false를 넘겨준다
+//    AddMenuInfoScreen(true)
+    AddMenuInfoScreen(false)
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/kuit/ourmenu/ui/addmenu/screen/AddMenuScreen.kt b/app/src/main/java/com/kuit/ourmenu/ui/addmenu/screen/AddMenuScreen.kt
new file mode 100644
index 0000000..0530f95
--- /dev/null
+++ b/app/src/main/java/com/kuit/ourmenu/ui/addmenu/screen/AddMenuScreen.kt
@@ -0,0 +1,166 @@
+package com.kuit.ourmenu.ui.addmenu.screen
+
+import androidx.activity.compose.BackHandler
+import androidx.compose.foundation.background
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.interaction.collectIsFocusedAsState
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.BottomSheetScaffold
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.Text
+import androidx.compose.material3.rememberBottomSheetScaffoldState
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.platform.LocalFocusManager
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.lifecycle.compose.collectAsStateWithLifecycle
+import androidx.lifecycle.viewmodel.compose.viewModel
+import com.kuit.ourmenu.R
+import com.kuit.ourmenu.ui.addmenu.component.AddMenuSearchBackground
+import com.kuit.ourmenu.ui.addmenu.component.bottomsheet.AddMenuBottomSheetContent
+import com.kuit.ourmenu.ui.addmenu.viewmodel.AddMenuSearchViewModel
+import com.kuit.ourmenu.ui.common.SearchTextField
+import com.kuit.ourmenu.ui.common.topappbar.OurMenuBackButtonTopAppBar
+import com.kuit.ourmenu.ui.theme.Neutral300
+import com.kuit.ourmenu.ui.theme.Primary500Main
+import com.kuit.ourmenu.ui.theme.ourMenuTypography
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun AddMenuScreen(modifier: Modifier = Modifier) {
+    var scaffoldState = rememberBottomSheetScaffoldState()
+    var showBottomSheet by rememberSaveable { mutableStateOf(false) }
+    var showSearchBackground by rememberSaveable { mutableStateOf(false) }
+    var searchText by rememberSaveable { mutableStateOf("") }
+    var searchActionDone by rememberSaveable { mutableStateOf(false) }
+    val interactionSource = remember { MutableInteractionSource() }
+    val searchBarFocused by interactionSource.collectIsFocusedAsState()
+    val focusManager = LocalFocusManager.current
+
+    val viewModel: AddMenuSearchViewModel = viewModel()
+    val recentSearchResults by viewModel.recentSearchResults.collectAsStateWithLifecycle()
+    val searchResults by viewModel.searchResults.collectAsStateWithLifecycle()
+    val storeInfo by viewModel.storeInfo.collectAsStateWithLifecycle()
+
+    LaunchedEffect(searchBarFocused) {
+        if (searchBarFocused) {
+            showSearchBackground = true
+            showBottomSheet = false
+        }
+    }
+
+    BackHandler(enabled = showSearchBackground) {
+        if (searchBarFocused) focusManager.clearFocus()
+        searchActionDone = false
+        showSearchBackground = false
+        searchText = ""
+    }
+
+    BottomSheetScaffold(
+        scaffoldState = scaffoldState,
+        topBar = {
+            OurMenuBackButtonTopAppBar {
+                Text(
+                    text = stringResource(R.string.ourmenu),
+                    style = ourMenuTypography().pretendard_600_18,
+                    color = Primary500Main,
+                )
+            }
+        },
+        sheetContainerColor = Color.White,
+        sheetContent = {
+            //bottom sheet 구성
+            AddMenuBottomSheetContent(
+                scaffoldState = scaffoldState,
+                storeInfo = storeInfo,
+                onItemClick = { index -> viewModel.updateSelectedMenu(index) })
+        },
+        //조건 만족하면 bottom sheet 보여주고, 아니면 화면에 안보이도록 처리
+        sheetPeekHeight = if (showBottomSheet) 254.dp else 0.dp,
+        sheetDragHandle = {
+            // 커스텀 핸들
+            Column(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(vertical = 12.dp),
+                horizontalAlignment = Alignment.CenterHorizontally
+            ) {
+                Box(
+                    modifier = Modifier
+                        .width(120.dp)
+                        .height(4.dp)
+                        .clip(RoundedCornerShape(6.dp))
+                        .background(Neutral300)
+                )
+            }
+        }
+    ) {
+        Box(modifier = Modifier.fillMaxWidth()) {
+            if (!showSearchBackground) {
+                //지도 컴포넌트
+                Column(
+                    modifier = Modifier.fillMaxSize(),
+                    verticalArrangement = Arrangement.Center,
+                    horizontalAlignment = Alignment.CenterHorizontally
+                ) {
+                    Text("지도 컴포넌트")
+                }
+            } else {
+                //검색 컴포넌트
+                AddMenuSearchBackground(
+                    searchActionDone = searchActionDone,
+                    recentSearchResults = recentSearchResults,
+                    searchResults = searchResults
+                ) {
+                    //검색된 아이템 클릭시 작동할 함수
+                    if (searchBarFocused) focusManager.clearFocus()
+                    showSearchBackground = false
+                    showBottomSheet = true
+                    searchText = ""
+                }
+            }
+
+            SearchTextField(
+                modifier = Modifier.padding(top = 12.dp, start = 20.dp, end = 20.dp),
+                text = searchText,
+                onTextChange = {
+                    searchText = it
+                    showSearchBackground = true
+                    showBottomSheet = false
+                },
+                interactionSource = interactionSource
+            ) {
+                //onSearch 함수
+                if (searchBarFocused) focusManager.clearFocus()
+                searchActionDone = true
+
+            }
+
+        }
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+private fun AddMenuScreenPreview() {
+    AddMenuScreen()
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/kuit/ourmenu/ui/addmenu/screen/AddMenuTagScreen.kt b/app/src/main/java/com/kuit/ourmenu/ui/addmenu/screen/AddMenuTagScreen.kt
new file mode 100644
index 0000000..8ef023b
--- /dev/null
+++ b/app/src/main/java/com/kuit/ourmenu/ui/addmenu/screen/AddMenuTagScreen.kt
@@ -0,0 +1,222 @@
+package com.kuit.ourmenu.ui.addmenu.screen
+
+import androidx.compose.foundation.BorderStroke
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.foundation.verticalScroll
+import androidx.compose.material3.BottomSheetScaffold
+import androidx.compose.material3.Button
+import androidx.compose.material3.ButtonDefaults
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.Icon
+import androidx.compose.material3.Text
+import androidx.compose.material3.rememberBottomSheetScaffoldState
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.kuit.ourmenu.R
+import com.kuit.ourmenu.ui.addmenu.component.bottomsheet.IconSelectBottomSheet
+import com.kuit.ourmenu.ui.addmenu.component.bottomsheet.TagSelectBottomSheet
+import com.kuit.ourmenu.ui.common.topappbar.OurMenuBackButtonTopAppBar
+import com.kuit.ourmenu.ui.common.CustomTextField
+import com.kuit.ourmenu.ui.theme.Neutral100
+import com.kuit.ourmenu.ui.theme.Neutral300
+import com.kuit.ourmenu.ui.theme.Neutral500
+import com.kuit.ourmenu.ui.theme.Neutral700
+import com.kuit.ourmenu.ui.theme.Neutral900
+import com.kuit.ourmenu.ui.theme.NeutralWhite
+import com.kuit.ourmenu.ui.theme.Primary500Main
+import com.kuit.ourmenu.ui.theme.ourMenuTypography
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun AddMenuTagScreen(modifier: Modifier = Modifier) {
+    val scaffoldState = rememberBottomSheetScaffoldState()
+    val showBottomSheet by remember { mutableStateOf(true) }
+    val useTagBottomSheet by rememberSaveable { mutableStateOf(false) }
+    var memoTitle by rememberSaveable { mutableStateOf("") }
+    var memoBody by rememberSaveable { mutableStateOf("") }
+    val scrollState = rememberScrollState()
+
+    BottomSheetScaffold(
+        scaffoldState = scaffoldState,
+        topBar = {
+            OurMenuBackButtonTopAppBar {
+                Text(
+                    text = stringResource(R.string.add_menu),
+                    style = ourMenuTypography().pretendard_600_18,
+                    color = Neutral900,
+                )
+            }
+        },
+        sheetContainerColor = Color.White,
+        sheetContent = {
+            if (useTagBottomSheet) {
+                //음색 태그 선택하는 bottom sheet
+                TagSelectBottomSheet()
+            } else {
+                //아이콘 선택하는 bottom sheet
+                IconSelectBottomSheet()
+            }
+        },
+        //태그 고르기 눌러야 보이도록
+        sheetPeekHeight = if (showBottomSheet) 254.dp else 0.dp,
+        sheetDragHandle = {
+            // 커스텀 핸들
+            Column(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(vertical = 12.dp),
+                horizontalAlignment = Alignment.CenterHorizontally
+            ) {
+                Box(
+                    modifier = Modifier
+                        .width(120.dp)
+                        .height(4.dp)
+                        .clip(RoundedCornerShape(6.dp))
+                        .background(Neutral300)
+                )
+            }
+        }
+    ) {
+        //전체 화면 구성
+        Column(modifier = Modifier.padding(horizontal = 20.dp)) {
+            //태그
+            Row(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(top = 28.dp),
+                horizontalArrangement = Arrangement.SpaceBetween
+            ) {
+                Text(
+                    text = stringResource(R.string.tag),
+                    style = ourMenuTypography().pretendard_600_14
+                )
+                Button(
+                    onClick = {},
+                    shape = RoundedCornerShape(12.dp),
+                    border = BorderStroke(1.dp, Primary500Main),
+                    colors = ButtonDefaults.buttonColors(
+                        containerColor = Primary500Main,
+                        contentColor = NeutralWhite
+                    ),
+                    modifier = Modifier.size(128.dp, 32.dp),
+                    contentPadding = PaddingValues(0.dp)
+                ) {
+                    Row(
+                        modifier = Modifier
+                            .fillMaxWidth()
+                            .padding(horizontal = 16.dp),
+                        horizontalArrangement = Arrangement.SpaceBetween
+                    ) {
+                        Icon(
+                            painter = painterResource(R.drawable.ic_filter_white_16),
+                            contentDescription = "select tag",
+                            tint = Color.Unspecified
+                        )
+                        Text(
+                            text = stringResource(R.string.choose_tag),
+                            style = ourMenuTypography().pretendard_700_16,
+                            color = NeutralWhite
+                        )
+                    }
+                }
+            }
+
+            //메모
+            Spacer(modifier = Modifier.height(20.dp))
+            Text(
+                text = stringResource(R.string.memo),
+                style = ourMenuTypography().pretendard_600_14
+            )
+            Spacer(modifier = Modifier.height(4.dp))
+            CustomTextField(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .height(44.dp)
+                    .border(1.dp, Neutral300, RoundedCornerShape(8.dp)),
+                text = memoTitle,
+                onTextChange = { memoTitle = it },
+                shape = RoundedCornerShape(8.dp),
+                paddingValues = PaddingValues(28.dp, 12.dp),
+                containerColor = Neutral100,
+                placeHolder = {
+                    Text(
+                        text = stringResource(R.string.type_title),
+                        style = ourMenuTypography().pretendard_500_14,
+                        color = Neutral500
+                    )
+                },
+                textStyle = ourMenuTypography().pretendard_500_14.copy(color = Neutral700)
+            )
+            Spacer(modifier = Modifier.height(8.dp))
+            Box(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .height(88.dp)
+                    .background(Neutral100)
+                    .border(1.dp, Neutral300, RoundedCornerShape(8.dp))
+                    .verticalScroll(scrollState),
+            ) {
+                CustomTextField(
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .height(88.dp),
+                    text = memoBody,
+                    singleLine = false,
+                    onTextChange = { memoBody = it },
+                    shape = RoundedCornerShape(8.dp),
+                    paddingValues = PaddingValues(28.dp, 12.dp),
+                    containerColor = Neutral100,
+                    placeHolder = {
+                        Text(
+                            text = stringResource(R.string.type_body),
+                            style = ourMenuTypography().pretendard_500_12,
+                            color = Neutral500,
+                        )
+                    },
+                    textStyle = ourMenuTypography().pretendard_500_14.copy(color = Neutral700)
+                )
+            }
+
+            //아이콘
+            Spacer(modifier = Modifier.height(20.dp))
+            Row(modifier = Modifier.fillMaxWidth()) {
+                Text(
+                    text = stringResource(R.string.icon),
+                    style = ourMenuTypography().pretendard_600_14
+                )
+            }
+        }
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+private fun AddMenuTagScreenPreview() {
+    AddMenuTagScreen()
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/kuit/ourmenu/ui/addmenu/viewmodel/AddMenuSearchViewModel.kt b/app/src/main/java/com/kuit/ourmenu/ui/addmenu/viewmodel/AddMenuSearchViewModel.kt
new file mode 100644
index 0000000..dfed7b0
--- /dev/null
+++ b/app/src/main/java/com/kuit/ourmenu/ui/addmenu/viewmodel/AddMenuSearchViewModel.kt
@@ -0,0 +1,86 @@
+package com.kuit.ourmenu.ui.addmenu.viewmodel
+
+import android.util.Log
+import androidx.lifecycle.ViewModel
+import androidx.lifecycle.viewModelScope
+import com.kuit.ourmenu.R
+import kotlinx.coroutines.flow.MutableStateFlow
+import kotlinx.coroutines.flow.StateFlow
+import kotlinx.coroutines.launch
+
+class AddMenuSearchViewModel : ViewModel() {
+    // 최근 검색 결과를 저장
+    private val _recentSearchResults = MutableStateFlow<List<Boolean>>(emptyList())
+    val recentSearchResults: StateFlow<List<Boolean>> = _recentSearchResults
+
+    //실제 검색 결과를 저장
+    private val _searchResulst = MutableStateFlow<List<Boolean>>(emptyList())
+    val searchResults: StateFlow<List<Boolean>> = _searchResulst
+
+    //식당 정보
+    private val _storeInfo = MutableStateFlow(AddMenuDummyStoreInfo())
+    val storeInfo: StateFlow<AddMenuDummyStoreInfo> = _storeInfo
+
+    init {
+        getRecentSearchResults()
+        //확인용, 이후에는 제거
+        getSearchResults()
+        getRestaurantInfo()
+    }
+
+    fun getRecentSearchResults() {
+        viewModelScope.launch {
+            _recentSearchResults.value = listOf(false, false, false, false, true)
+        }
+    }
+
+    fun getSearchResults() {
+        viewModelScope.launch {
+            _searchResulst.value = listOf()
+        }
+    }
+
+    fun getRestaurantInfo() {
+        viewModelScope.launch {
+            _storeInfo.value = AddMenuDummyStoreInfo(
+                imgList = listOf(
+                    R.drawable.img_dummy_pizza,
+                    R.drawable.img_dummy_pizza,
+                    R.drawable.img_dummy_pizza,
+                ),
+                name = R.string.our_ddeokbokki.toString(),
+                address = R.string.resaturant_address.toString(),
+                menuList = listOf(false, false, false, false, false, false, false, false)
+            )
+        }
+    }
+
+    fun updateSelectedMenu(index: Int) {
+        Log.d("AddMenuViewModel", "index: $index")
+        viewModelScope.launch {
+            val currentState = _storeInfo.value.menuList[index]
+            val updatedMenuList =
+                if (currentState){
+                    //선택된 아이템 클릭시 false로 다시 변경
+                    _storeInfo.value.menuList.map {
+                        false
+                    }
+                }else{
+                    //클릭된 인덱스만 true, 나머지는 false
+                    _storeInfo.value.menuList.mapIndexed { i, _ ->
+                        i == index
+                }
+            }
+//            Log.d("AddMenuViewModel", "updatedMenuList: $updatedMenuList")
+            _storeInfo.value = _storeInfo.value.copy(menuList = updatedMenuList)
+        }
+    }
+}
+
+//이후에 dto 반영시 삭제 예정
+data class AddMenuDummyStoreInfo(
+    val imgList: List<Int> = emptyList(),
+    val name: String = "",
+    val address: String = "",
+    val menuList: List<Boolean> = emptyList(),
+)
\ No newline at end of file
diff --git a/app/src/main/java/com/kuit/ourmenu/ui/common/BottomFullWidthButton.kt b/app/src/main/java/com/kuit/ourmenu/ui/common/BottomFullWidthButton.kt
new file mode 100644
index 0000000..9ba5e70
--- /dev/null
+++ b/app/src/main/java/com/kuit/ourmenu/ui/common/BottomFullWidthButton.kt
@@ -0,0 +1,76 @@
+package com.kuit.ourmenu.ui.common
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Button
+import androidx.compose.material3.ButtonDefaults
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.shadow
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.kuit.ourmenu.R
+import com.kuit.ourmenu.ui.theme.Neutral100
+import com.kuit.ourmenu.ui.theme.Neutral500
+import com.kuit.ourmenu.ui.theme.NeutralWhite
+import com.kuit.ourmenu.ui.theme.Primary500Main
+import com.kuit.ourmenu.ui.theme.ourMenuTypography
+
+@Composable
+fun BottomFullWidthButton(
+    modifier: Modifier = Modifier,
+    containerColor: Color,
+    contentColor: Color,
+    text: String,
+    onClick: () -> Unit
+) {
+    Button(
+        onClick = onClick,
+        modifier = modifier
+            .fillMaxWidth()
+            .size(320.dp, 48.dp)
+            .shadow(elevation = 4.dp, shape = RoundedCornerShape(12.dp)),
+        shape = RoundedCornerShape(12.dp),
+        colors = ButtonDefaults.buttonColors(
+            containerColor = containerColor,
+            contentColor = contentColor
+        ),
+    ) {
+        Text(
+            text = text,
+            style = ourMenuTypography().pretendard_700_16,
+            color = contentColor
+        )
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+private fun BottomFullWidthButtonPreview() {
+    Column(modifier = Modifier.fillMaxSize(), verticalArrangement = Arrangement.Center) {
+        BottomFullWidthButton(
+            containerColor = Neutral100,
+            contentColor = Neutral500,
+            text = stringResource(R.string.add_store_and_menu_by_myself)
+        ) {
+            //onClick 작성
+        }
+        Spacer(modifier = Modifier.height(16.dp))
+        BottomFullWidthButton(
+            containerColor = Primary500Main,
+            contentColor = NeutralWhite,
+            text = stringResource(R.string.add_menu)
+        ) {
+            //onClick 작성
+        }
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/kuit/ourmenu/ui/common/BottomHalfWidthButton.kt b/app/src/main/java/com/kuit/ourmenu/ui/common/BottomHalfWidthButton.kt
new file mode 100644
index 0000000..68411a5
--- /dev/null
+++ b/app/src/main/java/com/kuit/ourmenu/ui/common/BottomHalfWidthButton.kt
@@ -0,0 +1,82 @@
+package com.kuit.ourmenu.ui.common
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Button
+import androidx.compose.material3.ButtonDefaults
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.shadow
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.kuit.ourmenu.R
+import com.kuit.ourmenu.ui.theme.Neutral400
+import com.kuit.ourmenu.ui.theme.NeutralWhite
+import com.kuit.ourmenu.ui.theme.Primary500Main
+import com.kuit.ourmenu.ui.theme.ourMenuTypography
+
+@Composable
+fun BottomHalfWidthButton(
+    modifier: Modifier = Modifier,
+    containerColor: Color,
+    contentColor: Color,
+    text: String,
+    onClick: () -> Unit
+) {
+    Button(
+        modifier = modifier
+            .size(154.dp, 52.dp)
+            .shadow(elevation = 4.dp, shape = RoundedCornerShape(12.dp)),
+        shape = RoundedCornerShape(12.dp),
+        colors = ButtonDefaults.buttonColors(
+            containerColor = containerColor,
+            contentColor = contentColor
+        ),
+        onClick = onClick
+    ) {
+        Text(
+            text = text,
+            style = ourMenuTypography().pretendard_700_14,
+            color = contentColor
+        )
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+private fun BottomHalfWidthButtonPreview() {
+    Column(
+        modifier = Modifier
+            .fillMaxSize()
+            .padding(20.dp),
+        verticalArrangement = Arrangement.Center,
+        horizontalAlignment = Alignment.CenterHorizontally
+    ) {
+        Row(modifier = Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.SpaceBetween) {
+            BottomHalfWidthButton(
+                containerColor = Neutral400,
+                contentColor = NeutralWhite,
+                text = stringResource(R.string.cancel)
+            ) {
+
+            }
+            BottomHalfWidthButton(
+                containerColor = Primary500Main,
+                contentColor = NeutralWhite,
+                text = stringResource(R.string.apply)
+            ) {
+
+            }
+        }
+    }
+}
diff --git a/app/src/main/java/com/kuit/ourmenu/ui/common/CustomTextField.kt b/app/src/main/java/com/kuit/ourmenu/ui/common/CustomTextField.kt
new file mode 100644
index 0000000..bde64ff
--- /dev/null
+++ b/app/src/main/java/com/kuit/ourmenu/ui/common/CustomTextField.kt
@@ -0,0 +1,210 @@
+package com.kuit.ourmenu.ui.common
+
+import androidx.compose.foundation.border
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.foundation.text.BasicTextField
+import androidx.compose.foundation.text.KeyboardActions
+import androidx.compose.foundation.text.KeyboardOptions
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Search
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.Icon
+import androidx.compose.material3.Text
+import androidx.compose.material3.TextFieldDefaults
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.Shape
+import androidx.compose.ui.graphics.SolidColor
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.input.VisualTransformation
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.kuit.ourmenu.R
+import com.kuit.ourmenu.ui.theme.Neutral500
+import com.kuit.ourmenu.ui.theme.NeutralBlack
+import com.kuit.ourmenu.ui.theme.ourMenuTypography
+
+
+/**
+ * padding 값을 직접 지정할 수 있는 커스텀 TextField를 구현한 Composable 함수입니다.
+ * 각 parameter들의 기본 값은 초기화 되어 있고 composable 사용시에 직접 설정하여 원하는 TextField를 만들 수 있습니다.
+ * 필수적으로 넘겨주어야 하는 파라미터는 text, onTextChange 파라미터입니다.
+ *
+ *
+ * @param modifier modifier를 통해 전체 컴포넌트의 크기, border 등을 설정한다.
+ * modifier에서 정의한 border는 배경이 아닌 외부 테두리 선에만 영향을 준다
+ *
+ * @param text CustomTextField를 사용한 컴포넌트가 위치하는 곳에 text의 상태를 관리할 수 있는 변수를 선언하고,
+ * 파라미터로 넘겨주어 사용합니다. (상태 호이스팅을 적용하여 사용)
+ *
+ * @param onTextChange 위의 text 파라미터에 해당하는 변수를 선언한 코드에서 함께 작성하면 되고,  { newText -> text = newText } 또는 { text = it }
+ * 의 형태로된 함수를 파라미터에 넘겨주어 사용합니다. 이 예시에서 text는 CustomTextField의 text 파라미터에 넘겨준 변수명입니다.
+ *
+ * @param interactionSource TextField의 상태(focus, drag, click 등)를 관리하기 위한 파라미터입나다. 기본값으로 초기화 되어있고,
+ * 해당 상태의 관리가 필요하다면 remember { MutableInteractionSource() } 의 값을 가지는 변수를 파라미터로 넘겨주고,
+ * val isPressed by interactionSource.collectIsPressedAsState()와 같이 변수를 선언하여 상태를 추적할 수 있습니다.
+ *
+ * @param visualTransformation 입력된 텍스트의 값은 유지하면서, 화면에 보여지는 방식을 변경시킬 때 사용하는 파라미터이다.
+ * 예를 들어서 비밀번호 입력 필드로 사용한다면,
+ * PasswordVisualTransformation()을 인자로 주어 실제 값 대신 마스킹 된 값을 보여주도록 설정할 수 있다.
+ * VisualTransformation을 직접 정의하여 커스텀할 수도 있다. (숫자에서 3자리 단위로 , 를 찍는 것과 같은 포맷팅 등)
+ *
+ * @param enabled 텍스트 필드의 활성화 여부를 나타내는 파라미터이고, true인 경우에는 입력이 가능하다
+ *
+ * @param singleLine 입력된 텍스트를 한 줄로만 표시할지의 여부를 나타낸다. 기본값은 true
+ *
+ * @param shape  컴포넌트의 내부 영역의 모양 처리, modifier에 RoundedCornerShape를 적용하면 여기에도 적용해야 동일해진다
+ * ex) RoundedCornerShape(8.dp) 등
+ *
+ * @param trailingIcon 컴포넌트의 우측 끝에 위치하게 할 Icon 객체를 lambda를 통해 넘겨준다
+ *
+ * @param leadingIcon 컴포넌트의 왼쪽 끝에 위치하게 할 Icon 객체를 lambda를 통해 넘겨준다
+ *
+ * @param placeHolder placeholder로 사용할 Text 객체를 lambda를 통해 넘겨준다
+ *
+ * @param textStyle 입력한 텍스트를 보여줄 스타일에 대한 TextStyle 객체를 통해 정의한다
+ *
+ * @param paddingValues 컴포넌트의 텍스트 부분에 대한 padding 값을 PaddingValues 객체를 통해 정의한다
+ *
+ * @param containerColor 컴포넌트의 색상을 Color 객체를 통해 지정한다
+ * 기본 값으로는 focused, unfocused에 대한 값을 동일하게 Color.White로 지정
+ *
+ * @param cursorColor 커서에 대한 색상을 Color 객체를 통해 지정한다
+ * 기본 값으로는 Color.Black으로 지정
+ *
+ * @param isError 에러 처리에 필요한 조건문에 사용할 변수, 기본값은 false로 초기화되어 있다
+ * ex) 비밀번호 오류시 container 색상 변경 등
+ *
+ * @param keyboardOptions 키보드에 대한 설정을 KeyboardOptions를 통해 지정한다
+ *
+ * @param keyboardActions 키보드에서 특정 버튼을 눌렀을 때의 작업을 keyboardActions를 통해 지정한다
+ */
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun CustomTextField(
+    modifier: Modifier = Modifier,
+    text: String,
+    onTextChange: (String) -> Unit,
+    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
+    visualTransformation: VisualTransformation = VisualTransformation.None,
+    enabled: Boolean = true,
+    singleLine: Boolean = true,
+    shape: Shape = TextFieldDefaults.shape,
+    trailingIcon: @Composable (() -> Unit)? = null,
+    leadingIcon: @Composable (() -> Unit)? = null,
+    placeHolder: @Composable (() -> Unit)? = null,
+    textStyle: TextStyle = TextStyle.Default,
+    paddingValues: PaddingValues = PaddingValues(0.dp),
+    containerColor: Color = Color.White,
+    cursorColor: Color = Color.Black,
+    isError: Boolean = false,
+    keyboardOptions: KeyboardOptions = KeyboardOptions.Default,
+    keyboardActions: KeyboardActions = KeyboardActions.Default
+) {
+
+    BasicTextField(
+        value = text,
+        onValueChange = onTextChange,
+        modifier = modifier,
+        visualTransformation = visualTransformation,
+        interactionSource = interactionSource,
+        enabled = enabled,
+        singleLine = singleLine,
+        textStyle = textStyle,
+        keyboardOptions = keyboardOptions,
+        keyboardActions = keyboardActions,
+        cursorBrush = SolidColor(cursorColor)
+    ) { innerTextField ->
+
+        TextFieldDefaults.DecorationBox(
+            value = text,
+            visualTransformation = visualTransformation,
+            innerTextField = innerTextField,
+            singleLine = singleLine,
+            enabled = enabled,
+            interactionSource = interactionSource,
+            contentPadding = paddingValues,
+            trailingIcon = trailingIcon,
+            placeholder = placeHolder,
+            leadingIcon = leadingIcon,
+            shape = shape,
+            colors = TextFieldDefaults.colors(
+                /*
+                * 이곳에서 enabled 여부, focus 여부 등에 따른 색상, indicator(밑줄)의 색상 등을 따로 지정할 수 있다.
+                * */
+                focusedContainerColor = if(isError) Color.Red else containerColor,
+                unfocusedContainerColor = containerColor,
+                focusedIndicatorColor = Color.Transparent,
+                unfocusedIndicatorColor = Color.Transparent,
+                disabledContainerColor = containerColor,
+                disabledIndicatorColor = containerColor,
+            )
+
+        )
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+private fun CustomTextFieldPreview() {
+    var text by rememberSaveable { mutableStateOf("") }
+    var textForSimple by rememberSaveable { mutableStateOf("") }
+
+    Column(
+        modifier = Modifier.fillMaxSize(),
+        verticalArrangement = Arrangement.Center,
+        horizontalAlignment = Alignment.CenterHorizontally
+    ) {
+        //간소화 버전(최소 요구사항, modifier가 없어도 작동은 하지만 가시성을 위해 추가)
+        CustomTextField(
+            modifier = Modifier
+                .fillMaxWidth()
+                .border(0.8.dp, Color.Black, RoundedCornerShape(8.dp)),
+            shape = RoundedCornerShape(8.dp),
+            text = textForSimple,
+            onTextChange = { textForSimple = it },
+            isError = true
+        )
+        Spacer(modifier = Modifier.height(20.dp))
+        //추가 기능이 있는 버전
+        CustomTextField(
+            modifier = Modifier
+                .fillMaxWidth()
+                .border(0.8.dp, Neutral500, RoundedCornerShape(8.dp)),
+            text = text,
+            onTextChange = { text = it },
+            shape = RoundedCornerShape(8.dp),
+            placeHolder = {
+                Text(
+                    stringResource(R.string.placeholder),
+                    style = ourMenuTypography().pretendard_600_18.copy(color = Neutral500)
+                )
+            },
+            textStyle = ourMenuTypography().pretendard_500_20.copy(color = NeutralBlack),
+            trailingIcon = {
+                Icon(
+                    imageVector = Icons.Default.Search,
+                    contentDescription = "SearchIcon"
+                )
+            },
+            paddingValues = PaddingValues(20.dp, 0.dp),
+            cursorColor = Color.Red,
+        )
+    }
+}
diff --git a/app/src/main/java/com/kuit/ourmenu/ui/common/GoToMapButton.kt b/app/src/main/java/com/kuit/ourmenu/ui/common/GoToMapButton.kt
new file mode 100644
index 0000000..465c8f8
--- /dev/null
+++ b/app/src/main/java/com/kuit/ourmenu/ui/common/GoToMapButton.kt
@@ -0,0 +1,82 @@
+package com.kuit.ourmenu.ui.common
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Button
+import androidx.compose.material3.ButtonDefaults
+import androidx.compose.material3.Icon
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment.Companion.CenterVertically
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.shadow
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.kuit.ourmenu.R
+import com.kuit.ourmenu.ui.theme.NeutralWhite
+import com.kuit.ourmenu.ui.theme.Primary500Main
+import com.kuit.ourmenu.ui.theme.ourMenuTypography
+
+/**
+ * 지도 앱으로 이동 하는 버튼
+ *
+ * onClick 함수만 구현하면 사용 가능
+ *
+ * Map 화면, Menu-Info Map 화면 에서 사용됨.
+ *
+ * @param modifier Modifier
+ * @param onClick () -> Unit : 버튼 클릭 시 실행되는 함수
+ *
+ * */
+@Composable
+fun GoToMapButton(
+    modifier: Modifier = Modifier,
+    onClick: () -> Unit = {}
+) {
+    Button(
+        modifier = modifier
+            .shadow(elevation = 8.dp, spotColor = Color(0x29000000), ambientColor = Color(0x29000000))
+            .shadow(elevation = 6.dp, spotColor = Color(0x3D000000), ambientColor = Color(0x3D000000))
+            .width(166.dp)
+            .height(40.dp),
+        shape = RoundedCornerShape(20.dp),
+        onClick = onClick,
+        colors = ButtonDefaults.buttonColors(
+            containerColor = Primary500Main,
+            contentColor = NeutralWhite
+        ),
+        contentPadding = PaddingValues()
+    ) {
+        Row {
+            Text(
+                text = stringResource(R.string.go_to_map),
+                style = ourMenuTypography().pretendard_600_16.copy(
+                    color = NeutralWhite
+                ),
+                modifier = Modifier.align(CenterVertically)
+            )
+            Icon(
+                painter = painterResource(R.drawable.ic_menu_info_nav_24),
+                contentDescription = null,
+                tint = NeutralWhite,
+                modifier = Modifier
+                    .padding(start = 8.dp)
+                    .align(CenterVertically)
+            )
+        }
+    }
+}
+
+@Preview
+@Composable
+private fun GoToMapButtonPreview() {
+    GoToMapButton()
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/kuit/ourmenu/ui/common/SearchTextField.kt b/app/src/main/java/com/kuit/ourmenu/ui/common/SearchTextField.kt
new file mode 100644
index 0000000..4c04673
--- /dev/null
+++ b/app/src/main/java/com/kuit/ourmenu/ui/common/SearchTextField.kt
@@ -0,0 +1,111 @@
+package com.kuit.ourmenu.ui.common
+
+import androidx.annotation.StringRes
+import androidx.compose.foundation.border
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.foundation.text.KeyboardActions
+import androidx.compose.foundation.text.KeyboardOptions
+import androidx.compose.material3.Card
+import androidx.compose.material3.Icon
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.draw.shadow
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.input.ImeAction
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import com.kuit.ourmenu.R
+import com.kuit.ourmenu.ui.theme.Neutral500
+import com.kuit.ourmenu.ui.theme.Neutral700
+import com.kuit.ourmenu.ui.theme.Primary500Main
+import com.kuit.ourmenu.ui.theme.ourMenuTypography
+
+@Composable
+fun SearchTextField(
+    modifier: Modifier = Modifier,
+    text: String,
+    @StringRes placeHolder: Int = R.string.placeholder,
+    borderColor: Color = Neutral500,
+    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
+    onTextChange: (String) -> Unit,
+    onSearch: () -> Unit
+) {
+    Card(
+        modifier
+            .shadow(elevation = 2.dp, shape = RoundedCornerShape(8.dp))
+            .fillMaxWidth(),
+        shape = RoundedCornerShape(8.dp)
+    ) {
+        CustomTextField(
+            modifier = Modifier
+                .fillMaxWidth()
+                .border(0.8.dp, borderColor, RoundedCornerShape(8.dp))
+                .clip(RoundedCornerShape(8.dp))
+                .height(44.dp),
+            text = text,
+            onTextChange = onTextChange,
+            shape = RoundedCornerShape(8.dp),
+            placeHolder = {
+                Text(
+                    text = stringResource(placeHolder),
+                    style = ourMenuTypography().pretendard_500_14.copy(
+                        lineHeight = 20.sp,
+                        color = Neutral500
+                    )
+                )
+            },
+            textStyle = ourMenuTypography().pretendard_700_14.copy(color = Neutral700),
+            trailingIcon = {
+                Icon(
+                    painter = painterResource(R.drawable.ic_searchbar_search),
+                    contentDescription = "Search Icon",
+                    tint = Color.Unspecified,
+                    modifier = Modifier.clickable { onSearch() }
+                )
+            },
+            paddingValues = PaddingValues(start = 28.dp, top = 0.dp, bottom = 0.dp),
+            cursorColor = Primary500Main,
+            interactionSource = interactionSource,
+            keyboardOptions = KeyboardOptions(imeAction = ImeAction.Search),
+            keyboardActions = KeyboardActions(onSearch = { onSearch() })
+        )
+    }
+
+}
+
+@Preview(showBackground = true)
+@Composable
+private fun SearchBarPreview() {
+    var text by rememberSaveable { mutableStateOf("") }
+
+    Column(
+        modifier = Modifier
+            .fillMaxSize()
+            .padding(20.dp), verticalArrangement = Arrangement.Center
+    ) {
+        SearchTextField(
+            text = text,
+            onTextChange = { text = it },
+            onSearch = { }
+        )
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/kuit/ourmenu/ui/common/bottomsheet/BottomSheetDragHandle.kt b/app/src/main/java/com/kuit/ourmenu/ui/common/bottomsheet/BottomSheetDragHandle.kt
new file mode 100644
index 0000000..fa22e08
--- /dev/null
+++ b/app/src/main/java/com/kuit/ourmenu/ui/common/bottomsheet/BottomSheetDragHandle.kt
@@ -0,0 +1,46 @@
+package com.kuit.ourmenu.ui.common.bottomsheet
+
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Surface
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.Shape
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+import com.kuit.ourmenu.ui.theme.Neutral300
+
+
+/**
+ * BottomSheet 의 Drag Handle 용으로 사용되는 Composable
+ *
+ * BottomSheetScaffold(sheetDragHandle = BottomSheetDragHandle()) 의 형태로 사용합니다.
+ *
+ * @param modifier Modifier
+ * @param verticalPadding Dp : Drag Handle 의 상단과 하단의 Padding 값
+ * @param width Dp : Drag Handle 의 가로 길이 default 120.dp
+ * @param height Dp : Drag Handle 의 세로 길이 default 4.dp
+ * @param color Color : Drag Handle 의 색상 default Neutral300
+ * @param shape Shape : Drag Handle 의 모양 default RoundedCornerShape(6.dp)
+ *
+ * */
+@Composable
+fun BottomSheetDragHandle(
+    modifier: Modifier = Modifier,
+    verticalPadding: Dp = 12.dp,
+    width: Dp = 120.dp,
+    height: Dp = 4.dp,
+    color: Color = Neutral300,
+    shape: Shape = RoundedCornerShape(6.dp),
+) {
+    Surface(
+        modifier = modifier.padding(vertical = verticalPadding),
+        color = color,
+        shape = shape
+    ) {
+        Box(Modifier.size(width = width, height = height))
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/kuit/ourmenu/ui/common/bottomsheet/MenuInfoBottomSheetContent.kt b/app/src/main/java/com/kuit/ourmenu/ui/common/bottomsheet/MenuInfoBottomSheetContent.kt
new file mode 100644
index 0000000..907756e
--- /dev/null
+++ b/app/src/main/java/com/kuit/ourmenu/ui/common/bottomsheet/MenuInfoBottomSheetContent.kt
@@ -0,0 +1,186 @@
+package com.kuit.ourmenu.ui.common.bottomsheet
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.ExperimentalLayoutApi
+import androidx.compose.foundation.layout.FlowRow
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import com.kuit.ourmenu.R
+import com.kuit.ourmenu.ui.common.chip.MenuFolderChip
+import com.kuit.ourmenu.ui.common.chip.TagChip
+import com.kuit.ourmenu.ui.menuinfo.dummy.MenuInfoDummyData
+import com.kuit.ourmenu.ui.menuinfo.dummy.MenuInfoTag
+import com.kuit.ourmenu.ui.theme.Neutral500
+import com.kuit.ourmenu.ui.theme.Neutral700
+import com.kuit.ourmenu.ui.theme.Neutral900
+import com.kuit.ourmenu.ui.theme.ourMenuTypography
+import com.kuit.ourmenu.utils.ExtensionUtil.toWon
+
+@Composable
+fun MenuInfoBottomSheetContent(modifier: Modifier = Modifier) {
+    Column(
+        modifier = modifier
+            .fillMaxWidth()
+            .padding(horizontal = 20.dp)
+    ) {
+        MenuInfoContent(
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(bottom = 12.dp),
+            menuInfoData = MenuInfoDummyData.dummyData
+        )
+
+        MenuInfoImage(
+            modifier = Modifier
+                .fillMaxWidth()
+                .align(Alignment.CenterHorizontally)
+                .padding(bottom = 8.dp),
+            menuInfoData = MenuInfoDummyData.dummyData
+        )
+
+        MenuInfoTagContent(
+            modifier = Modifier
+                .fillMaxWidth(),
+            defaultTagList = MenuInfoDummyData.dummyData.defaultTagList,
+            customTagList = MenuInfoDummyData.dummyData.customTagList
+        )
+    }
+}
+
+@Composable
+fun MenuInfoContent(
+    modifier: Modifier = Modifier,
+    menuInfoData: MenuInfoDummyData
+) {
+    val menuFolderTitle =
+        when (menuInfoData.menuFolderList.size) {
+            0 -> "기본 메뉴판"
+            1 -> menuInfoData.menuFolderList[0]
+            else -> "${menuInfoData.menuFolderList[0]} +${menuInfoData.menuFolderList.size - 1}"
+        }
+
+    Column(modifier = modifier) {
+        Box(
+            modifier = Modifier
+                .fillMaxWidth()
+                .height(32.dp),
+        ) {
+            Row(
+                modifier = Modifier
+                    .align(Alignment.CenterStart)
+            ) {
+                Text(
+                    text = menuInfoData.menuTitle,
+                    style = ourMenuTypography().pretendard_700_20.copy(
+                        lineHeight = 32.sp,
+                        color = Neutral900,
+                    ),
+                )
+                Text(
+                    text = menuInfoData.menuPrice.toWon(),
+                    style = ourMenuTypography().pretendard_600_32.copy(
+                        fontSize = 16.sp,
+                        lineHeight = 22.sp,
+                        color = Neutral700
+                    ),
+                    modifier = Modifier
+                        .padding(start = 12.dp)
+                        .align(Alignment.CenterVertically)
+                )
+            }
+            MenuFolderChip(
+                modifier = Modifier
+                    .align(Alignment.CenterEnd),
+                menuFolderTitle = menuFolderTitle
+            )
+        }
+        Text(
+            text = menuInfoData.store,
+            style = ourMenuTypography().pretendard_600_14.copy(
+                lineHeight = 12.sp,
+                color = Neutral500
+            ),
+        )
+    }
+}
+
+@Composable
+fun MenuInfoImage(
+    modifier: Modifier = Modifier,
+    menuInfoData: MenuInfoDummyData
+) {
+    val imgRes = menuInfoData.imgRes
+
+    Row(modifier = modifier) {
+        for (i in 0 until 3) {
+            Image(
+                painter = // 이 부분은 추후에 int == 0 대신 url.isNullOrEmpty()로 변경해야 함
+                if (imgRes[i] == 0) painterResource(R.drawable.img_dummy_menu)
+                else painterResource(imgRes[i]),
+                contentDescription = null,
+                modifier = Modifier
+                    .weight(104f)
+                    .clip(shape = RoundedCornerShape(8.dp))
+            )
+            if (i != 2) Spacer(modifier = Modifier.padding(end = 4.dp))
+        }
+    }
+}
+
+@OptIn(ExperimentalLayoutApi::class)
+@Composable
+fun MenuInfoTagContent(
+    modifier: Modifier = Modifier,
+    defaultTagList: List<MenuInfoTag> = listOf(),
+    customTagList: List<MenuInfoTag> = listOf(),
+) {
+    FlowRow(modifier = modifier) {
+        defaultTagList.forEach { tag ->
+            TagChip(
+                modifier = Modifier.padding(
+                    top = 4.dp,
+                ),
+                tagIcon = tag.tagIcon,
+                tagName = tag.tagName,
+                enabled = false,
+                selected = true,
+                onClick = { }
+            )
+            Spacer(modifier = Modifier.padding(end = 4.dp))
+        }
+        customTagList.forEachIndexed { index, tag ->
+            TagChip(
+                modifier = Modifier.padding(
+                    top = 4.dp,
+                ),
+                tagIcon = tag.tagIcon,
+                tagName = tag.tagName,
+                onClick = { }
+            )
+            if (index != customTagList.lastIndex) {
+                Spacer(modifier = Modifier.padding(end = 4.dp))
+            }
+        }
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+private fun MenuInfoBottomSheetContentPreview() {
+    MenuInfoBottomSheetContent()
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/kuit/ourmenu/ui/common/chip/MenuFolderChip.kt b/app/src/main/java/com/kuit/ourmenu/ui/common/chip/MenuFolderChip.kt
new file mode 100644
index 0000000..fb37900
--- /dev/null
+++ b/app/src/main/java/com/kuit/ourmenu/ui/common/chip/MenuFolderChip.kt
@@ -0,0 +1,70 @@
+package com.kuit.ourmenu.ui.common.chip
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Icon
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import com.kuit.ourmenu.R
+import com.kuit.ourmenu.ui.theme.Neutral300
+import com.kuit.ourmenu.ui.theme.Neutral700
+import com.kuit.ourmenu.ui.theme.NeutralWhite
+import com.kuit.ourmenu.ui.theme.ourMenuTypography
+
+@Composable
+fun MenuFolderChip(
+    modifier: Modifier = Modifier,
+    onClick: () -> Unit = { },
+    menuFolderTitle: String = ""
+) {
+    Row(
+        modifier = modifier
+            .clickable { onClick() }
+            .clip(RoundedCornerShape(12.dp))
+            .border(
+                width = 1.dp,
+                color = Neutral300,
+                shape = RoundedCornerShape(12.dp)
+            )
+            .background(NeutralWhite)
+            .padding(horizontal = 12.dp, vertical = 6.dp)
+    ) {
+        Icon(
+            modifier = Modifier.size(14.dp),
+            painter = painterResource(id = R.drawable.img_menu_folder_dummy),
+            contentDescription = null,
+            tint = Color.Unspecified
+        )
+        Text(
+            modifier = Modifier.padding(start = 8.dp),
+            text = menuFolderTitle,
+            style = ourMenuTypography().pretendard_600_32.copy(
+                fontSize = 12.sp,
+                lineHeight = 12.sp,
+                color = Neutral700
+            )
+        )
+    }
+
+
+}
+
+@Preview
+@Composable
+private fun MenuFolderChipPreview() {
+    MenuFolderChip(
+        menuFolderTitle = "홍대 맛집"
+    )
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/kuit/ourmenu/ui/common/chip/TagChip.kt b/app/src/main/java/com/kuit/ourmenu/ui/common/chip/TagChip.kt
new file mode 100644
index 0000000..779b32b
--- /dev/null
+++ b/app/src/main/java/com/kuit/ourmenu/ui/common/chip/TagChip.kt
@@ -0,0 +1,111 @@
+package com.kuit.ourmenu.ui.common.chip
+
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.FilterChip
+import androidx.compose.material3.FilterChipDefaults
+import androidx.compose.material3.Icon
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import com.kuit.ourmenu.R
+import com.kuit.ourmenu.ui.theme.Neutral300
+import com.kuit.ourmenu.ui.theme.Neutral900
+import com.kuit.ourmenu.ui.theme.NeutralWhite
+import com.kuit.ourmenu.ui.theme.Primary500Main
+import com.kuit.ourmenu.ui.theme.ourMenuTypography
+
+@Composable
+fun TagChip(
+    modifier: Modifier = Modifier,
+    tagIcon: Int,
+    tagName: String,
+    enabled: Boolean = true,
+    selected: Boolean = false,
+    onClick: () -> Unit
+) {
+    FilterChip(
+        enabled = enabled,
+        selected = selected,
+        modifier = modifier
+            .height(32.dp),
+        onClick = onClick,
+        label = {
+            Text(
+                text = tagName,
+                style = ourMenuTypography().pretendard_700_16.copy(
+                    lineHeight = 24.sp
+                )
+            )
+        },
+        leadingIcon = {
+            Icon(
+                modifier = Modifier.padding(start = 8.dp),
+                painter = painterResource(tagIcon),
+                contentDescription = null,
+            )
+        },
+        // disabled, selected -> primary500Main, enabled, default -> neutralWhite
+        colors = FilterChipDefaults.filterChipColors().copy(
+            containerColor = NeutralWhite,
+            labelColor = Neutral900,
+            leadingIconColor = Neutral900,
+            disabledContainerColor = Primary500Main,
+            disabledLabelColor = NeutralWhite,
+            disabledLeadingIconColor = NeutralWhite,
+            selectedContainerColor = Primary500Main,
+            disabledSelectedContainerColor = Primary500Main,
+            selectedLabelColor = NeutralWhite,
+            selectedLeadingIconColor = NeutralWhite,
+        ),
+        border = FilterChipDefaults.filterChipBorder(
+            enabled = enabled,
+            selected = selected,
+            borderColor = Neutral300,
+            selectedBorderColor = Primary500Main,
+            disabledBorderColor = Primary500Main
+
+        ),
+        shape = RoundedCornerShape(12.dp)
+    )
+
+}
+
+@Preview
+@Composable
+private fun DefaultTagChipPrev() {
+    TagChip(
+        tagIcon = R.drawable.ic_tag_rice,
+        tagName = "밥",
+        onClick = { },
+    )
+}
+
+@Preview
+@Composable
+private fun SelectedTagChipPrev() {
+    TagChip(
+        tagIcon = R.drawable.ic_tag_rice,
+        tagName = "밥",
+        onClick = { },
+        selected = true,
+        enabled = true
+    )
+}
+
+@Preview
+@Composable
+private fun DisableTagChipPrev() {
+    TagChip(
+        tagIcon = R.drawable.ic_tag_rice,
+        tagName = "밥",
+        onClick = { },
+        selected = true,
+        enabled = false
+    )
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/kuit/ourmenu/ui/common/dialog/DialogBigButton.kt b/app/src/main/java/com/kuit/ourmenu/ui/common/dialog/DialogBigButton.kt
new file mode 100644
index 0000000..ed71fa1
--- /dev/null
+++ b/app/src/main/java/com/kuit/ourmenu/ui/common/dialog/DialogBigButton.kt
@@ -0,0 +1,115 @@
+package com.kuit.ourmenu.ui.common.dialog
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Button
+import androidx.compose.material3.ButtonDefaults
+import androidx.compose.material3.Icon
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import com.kuit.ourmenu.R
+import com.kuit.ourmenu.ui.theme.Neutral400
+import com.kuit.ourmenu.ui.theme.NeutralWhite
+import com.kuit.ourmenu.ui.theme.Primary500Main
+import com.kuit.ourmenu.ui.theme.ourMenuTypography
+
+/**
+ * Dialog 에 사용되는 Big Button
+ *
+ * Width : fillMaxWidth
+ *
+ * Height : 48dp
+ *
+ * Padding 값 없음
+ *
+ * Round Corner : 12dp
+ *
+ * Text Style : Pretendard 700 20sp
+ *
+ * Text Color : NeutralWhite
+ *
+ * @param buttonText: 버튼 텍스트
+ * @param buttonIcon: 버튼 아이콘
+ * @param hasIcon: 아이콘 여부
+ * @param containerColor: 버튼 색상
+ * */
+@Composable
+fun DialogBigButton(
+    buttonText: String,
+    modifier: Modifier = Modifier,
+    hasIcon: Boolean = true,
+    buttonIcon: String = "",
+    containerColor: Color,
+    onClick: () -> Unit = { /* TODO */ }
+) {
+    Button(
+        onClick = onClick,
+        modifier = modifier,
+        shape = RoundedCornerShape(12.dp),
+        colors = ButtonDefaults.buttonColors(
+            containerColor = containerColor,
+            contentColor = NeutralWhite
+        )
+    ) {
+        Row(
+            modifier = Modifier.fillMaxWidth(),
+            horizontalArrangement = Arrangement.Center,
+            verticalAlignment = Alignment.CenterVertically
+        ) {
+            if (hasIcon) {
+                Icon(
+                    painter = painterResource(R.drawable.img_home_popup_thumbsup),
+                    contentDescription = null,
+                    tint = Color.Unspecified,
+                    modifier = Modifier
+                        .padding(end = 8.dp)
+                        .size(28.dp)
+                )
+            }
+            Text(
+                text = buttonText,
+                style = ourMenuTypography().pretendard_700_20.copy(
+                    fontSize = 18.sp
+                )
+            )
+        }
+    }
+}
+
+@Preview
+@Composable
+private fun IBBPreview() {
+    Column {
+        DialogBigButton(
+            modifier = Modifier
+                .fillMaxWidth()
+                .height(48.dp),
+            buttonText = "좋아!",
+            hasIcon = true,
+            containerColor = Primary500Main
+        )
+        Spacer(modifier = Modifier.height(16.dp))
+        DialogBigButton(
+            modifier = Modifier
+                .fillMaxWidth()
+                .height(48.dp),
+            buttonText = "확인",
+            hasIcon = false,
+            containerColor = Neutral400
+        )
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/kuit/ourmenu/ui/common/topappbar/OurMenuAddButtonTopAppBar.kt b/app/src/main/java/com/kuit/ourmenu/ui/common/topappbar/OurMenuAddButtonTopAppBar.kt
new file mode 100644
index 0000000..3cc12bd
--- /dev/null
+++ b/app/src/main/java/com/kuit/ourmenu/ui/common/topappbar/OurMenuAddButtonTopAppBar.kt
@@ -0,0 +1,56 @@
+package com.kuit.ourmenu.ui.common.topappbar
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.TopAppBar
+import androidx.compose.material3.TopAppBarDefaults
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.kuit.ourmenu.R
+import com.kuit.ourmenu.ui.theme.NeutralWhite
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun OurMenuAddButtonTopAppBar(modifier: Modifier = Modifier) {
+    // 기본
+    TopAppBar(
+        modifier = Modifier.fillMaxWidth(),
+        colors = TopAppBarDefaults.topAppBarColors().copy(
+            containerColor = NeutralWhite
+        ),
+        title = {
+            Icon(
+                painter = painterResource(R.drawable.ic_ourmenu_text_logo),
+                contentDescription = "Top App Bar Logo",
+                modifier = Modifier.padding(start = 8.dp),
+                tint = Color.Unspecified
+            )
+        },
+        actions = {
+            IconButton(
+                onClick = { /* TODO : Add Menu Button Click Event */ },
+                modifier = Modifier.padding(end = 20.dp)
+            ) {
+                Icon(
+                    painter = painterResource(R.drawable.ic_home_plus),
+                    contentDescription = "Top App Bar Add Menu Button",
+                    tint = Color.Unspecified
+                )
+            }
+        }
+    )
+}
+
+@Preview(showBackground = true)
+@Composable
+private fun HomeTopAppBarPreview() {
+    OurMenuAddButtonTopAppBar()
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/kuit/ourmenu/ui/common/topappbar/OurMenuBackButtonTopAppBar.kt b/app/src/main/java/com/kuit/ourmenu/ui/common/topappbar/OurMenuBackButtonTopAppBar.kt
new file mode 100644
index 0000000..b7c99de
--- /dev/null
+++ b/app/src/main/java/com/kuit/ourmenu/ui/common/topappbar/OurMenuBackButtonTopAppBar.kt
@@ -0,0 +1,56 @@
+package com.kuit.ourmenu.ui.common.topappbar
+
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.Text
+import androidx.compose.material3.TopAppBar
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.drawBehind
+import androidx.compose.ui.draw.shadow
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.kuit.ourmenu.R
+import com.kuit.ourmenu.ui.theme.NeutralBlack
+import com.kuit.ourmenu.ui.theme.Primary500Main
+import com.kuit.ourmenu.ui.theme.ourMenuTypography
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun OurMenuBackButtonTopAppBar(topAppbarText: @Composable (() -> Unit)) {
+    TopAppBar(
+        title = {
+            topAppbarText()
+        },
+        navigationIcon = {
+            IconButton(onClick = { TODO("뒤로가기 구현") }) {
+                Icon(
+                    painter = painterResource(R.drawable.ic_top_bar_back),
+                    contentDescription = "Back"
+                )
+            }
+        },
+        modifier = Modifier
+            .drawBehind {
+                drawRect(
+                    color = NeutralBlack
+                )
+            }
+            .shadow(elevation = 4.dp)
+    )
+}
+
+@Preview(showBackground = true)
+@Composable
+private fun AddMenuTopAppBarPreview() {
+    OurMenuBackButtonTopAppBar {
+        Text(
+            stringResource(R.string.ourmenu),
+            style = ourMenuTypography().pretendard_600_18,
+            color = Primary500Main
+        )
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/kuit/ourmenu/ui/home/component/dialog/HomeDialog.kt b/app/src/main/java/com/kuit/ourmenu/ui/home/component/dialog/HomeDialog.kt
new file mode 100644
index 0000000..b5cdff6
--- /dev/null
+++ b/app/src/main/java/com/kuit/ourmenu/ui/home/component/dialog/HomeDialog.kt
@@ -0,0 +1,123 @@
+package com.kuit.ourmenu.ui.home.component.dialog
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.wrapContentHeight
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Button
+import androidx.compose.material3.Surface
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.draw.shadow
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.window.Dialog
+import com.kuit.ourmenu.ui.common.dialog.DialogBigButton
+import com.kuit.ourmenu.ui.theme.Neutral500
+import com.kuit.ourmenu.ui.theme.Neutral900
+import com.kuit.ourmenu.ui.theme.NeutralWhite
+import com.kuit.ourmenu.ui.theme.Primary500Main
+import com.kuit.ourmenu.ui.theme.ourMenuTypography
+
+@Composable
+fun HomePopUpDialog(modifier: Modifier = Modifier) {
+
+    Dialog(
+        onDismissRequest = {
+            // TODO : Dismiss Dialog Event
+        },
+    ) {
+        Surface(
+            modifier = Modifier
+                .shadow(elevation = 8.dp)
+                .fillMaxWidth()
+                .wrapContentHeight()
+                .background(
+                    color = NeutralWhite,
+                    shape = RoundedCornerShape(size = 12.dp)
+                )
+                .clip(RoundedCornerShape(12.dp))
+        ) {
+            Column(
+                modifier = Modifier
+                    .padding(
+                        start = 16.dp,
+                        end = 16.dp,
+                        top = 16.dp,
+                        bottom = 24.dp
+                    )
+                    .fillMaxWidth()
+                    .wrapContentHeight()
+
+            ) {
+                HomeDialogAssets(
+                    onDiceClick = {
+                        // TODO : Dice Click Event
+                    },
+                    onCloseClick = {
+                        // TODO : Close Click Event
+                    }
+                )
+                Text(
+                    modifier = Modifier
+                        .padding(top = 13.dp)
+                        .fillMaxWidth(),
+                    text = "안녕하세요!\n" +
+                            "오늘의 기분은 어떠신가요?", // TODO : 추천 문구 반영
+                    style = ourMenuTypography().pretendard_700_20.copy(
+                        color = Neutral900
+                    ),
+                    textAlign = TextAlign.Center
+                )
+                Text(
+                    modifier = Modifier
+                        .padding(top = 13.dp, bottom = 19.dp)
+                        .fillMaxWidth(),
+                    text = "질문에 답해 기분에 맞는 메뉴를\n" +
+                            "추천받아보세요!",
+                    style = ourMenuTypography().pretendard_500_14.copy(
+                        fontWeight = FontWeight(500),
+                        color = Neutral500
+                    ),
+                    textAlign = TextAlign.Center
+                )
+
+                DialogBigButton(
+                    modifier = Modifier
+                        .padding(bottom = 8.dp)
+                        .padding(horizontal = 4.dp)
+                        .fillMaxWidth()
+                        .height(48.dp),
+                    buttonText = "좋아!",
+                    containerColor = Primary500Main
+                )
+
+                DialogBigButton(
+                    modifier = Modifier
+                        .padding(horizontal = 4.dp)
+                        .fillMaxWidth()
+                        .height(48.dp),
+                    buttonText = "별로야..",
+                    containerColor = Primary500Main
+                )
+            }
+        }
+    }
+}
+
+@Preview(
+    showBackground = true,
+    backgroundColor = 0x111111
+)
+@Composable
+private fun HomePopUpDialogPreview() {
+    HomePopUpDialog()
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/kuit/ourmenu/ui/home/component/dialog/HomeDialogAssets.kt b/app/src/main/java/com/kuit/ourmenu/ui/home/component/dialog/HomeDialogAssets.kt
new file mode 100644
index 0000000..f66b707
--- /dev/null
+++ b/app/src/main/java/com/kuit/ourmenu/ui/home/component/dialog/HomeDialogAssets.kt
@@ -0,0 +1,72 @@
+package com.kuit.ourmenu.ui.home.component.dialog
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.aspectRatio
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.material3.Icon
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.kuit.ourmenu.R
+import com.kuit.ourmenu.ui.theme.Neutral700
+import com.kuit.ourmenu.ui.theme.ourMenuTypography
+
+@Composable
+fun HomeDialogAssets(
+    onDiceClick: () -> Unit = {},
+    onCloseClick: () -> Unit = {},
+) {
+    Box(
+        modifier = Modifier
+            .fillMaxWidth(),
+    ) {
+        Row {
+            HomeDialogTouchBox(
+                modifier = Modifier
+                    .padding(top = 4.dp, start = 4.dp)
+                    .height(32.dp)
+                    .weight(72f)
+            )
+            Spacer(
+                modifier = Modifier.weight(156f)
+            )
+            Icon(
+                painter = painterResource(R.drawable.ic_close_24_n400),
+                contentDescription = null,
+                tint = Color.Unspecified,
+                modifier = Modifier
+                    .aspectRatio(1f)
+                    .weight(24f)
+            )
+        }
+        Image(
+            painter = painterResource(R.drawable.img_popup_dice),
+            contentDescription = null,
+            modifier = Modifier
+                .align(Alignment.BottomCenter)
+                .padding(top = 27.dp)
+                .padding(horizontal = 82.dp)
+                .fillMaxWidth()
+                .aspectRatio(1f)
+        )
+        // TODO : Add Dice shadow asset
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+private fun Prev() {
+    HomeDialogAssets()
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/kuit/ourmenu/ui/home/component/dialog/HomeDialogTouchBox.kt b/app/src/main/java/com/kuit/ourmenu/ui/home/component/dialog/HomeDialogTouchBox.kt
new file mode 100644
index 0000000..313a6e1
--- /dev/null
+++ b/app/src/main/java/com/kuit/ourmenu/ui/home/component/dialog/HomeDialogTouchBox.kt
@@ -0,0 +1,52 @@
+package com.kuit.ourmenu.ui.home.component.dialog
+
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.width
+import androidx.compose.material3.Icon
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.kuit.ourmenu.R
+import com.kuit.ourmenu.ui.theme.Neutral700
+import com.kuit.ourmenu.ui.theme.ourMenuTypography
+
+@Composable
+fun HomeDialogTouchBox(modifier: Modifier = Modifier) {
+    Box(
+        modifier = modifier,
+        contentAlignment = Alignment.Center
+    ) {
+        Icon(
+            painter = painterResource(R.drawable.ic_home_dialog_touch),
+            contentDescription = null,
+            tint = Color.Unspecified
+        )
+        Row(
+            modifier
+                .padding(horizontal = 11.dp)
+                .padding(top = 3.dp, bottom = 6.dp)
+        ) {
+            Text(
+                text = "터치!",
+                style = ourMenuTypography().pretendard_500_14.copy(
+                    color = Neutral700
+                ),
+                modifier = Modifier.padding(end = 4.dp)
+            )
+            Text(
+                text = "\uD83D\uDC49",
+                style = ourMenuTypography().pretendard_500_14.copy(
+                    color = Neutral700
+                )
+            )
+        }
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/kuit/ourmenu/ui/home/component/recommendation/main/HomeMainRecommendation.kt b/app/src/main/java/com/kuit/ourmenu/ui/home/component/recommendation/main/HomeMainRecommendation.kt
new file mode 100644
index 0000000..e2e9326
--- /dev/null
+++ b/app/src/main/java/com/kuit/ourmenu/ui/home/component/recommendation/main/HomeMainRecommendation.kt
@@ -0,0 +1,48 @@
+package com.kuit.ourmenu.ui.home.component.recommendation.main
+
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.kuit.ourmenu.ui.home.dummy.HomeDummyData
+
+@Composable
+fun HomeMainRecommendation(
+    modifier: Modifier = Modifier,
+    homeMainDataList : List<HomeDummyData>
+) {
+    Column(
+        modifier = modifier
+    ) {
+        HomeMainRecommendationText(
+            modifier = Modifier
+                .padding(horizontal = 20.dp)
+                .width(278.dp)
+                .height(144.dp)
+        )
+
+        HomeMainRecommendationList(
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(top = 32.dp)
+                .height(244.dp),
+            homeMainDataList = homeMainDataList
+        )
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+private fun MainRecommendationPreview() {
+    HomeMainRecommendation(
+        modifier = Modifier.padding(top = 16.dp),
+        homeMainDataList = HomeDummyData.dummyData
+    )
+}
diff --git a/app/src/main/java/com/kuit/ourmenu/ui/home/component/recommendation/main/HomeMainRecommendationItem.kt b/app/src/main/java/com/kuit/ourmenu/ui/home/component/recommendation/main/HomeMainRecommendationItem.kt
new file mode 100644
index 0000000..ac65527
--- /dev/null
+++ b/app/src/main/java/com/kuit/ourmenu/ui/home/component/recommendation/main/HomeMainRecommendationItem.kt
@@ -0,0 +1,92 @@
+package com.kuit.ourmenu.ui.home.component.recommendation.main
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.geometry.Offset
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.Shadow
+import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.text.font.FontStyle
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import com.kuit.ourmenu.R
+import com.kuit.ourmenu.ui.home.dummy.HomeDummyData
+import com.kuit.ourmenu.ui.theme.NeutralWhite
+import com.kuit.ourmenu.ui.theme.ourMenuTypography
+
+@Composable
+fun HomeMainRecommendationItem(
+    modifier: Modifier = Modifier,
+    recommendData: HomeDummyData
+) {
+    Box(
+        modifier = modifier,
+        contentAlignment = Alignment.BottomStart
+    ) {
+        Image(
+            painter = painterResource(recommendData.imageRes), // TODO : 추후 Async Image Loading 적용
+            contentDescription = "Main Recommendation Image",
+            contentScale = ContentScale.Crop,
+            modifier = Modifier
+                .height(244.dp)
+                .width(304.dp)
+                .clip(RoundedCornerShape(32.dp))
+        )
+
+        Column(
+            modifier = Modifier.padding(horizontal = 16.dp)
+        ) {
+            Box(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .height(42.dp),
+                contentAlignment = Alignment.CenterStart, // 수직 및 수평 중앙 정렬
+            ) {
+                Text(
+                    text = recommendData.name,
+                    style = ourMenuTypography().pretendard_700_24.copy(
+                        shadow = Shadow(
+                            color = Color.Black.copy(alpha = 0.2f), // 그림자 색상 및 투명도
+                            offset = Offset(0f, 2f), // 그림자 오프셋 (x = 0px, y = 2px)
+                            blurRadius = 4f // 블러 반경
+                        )
+                    ),
+                    color = NeutralWhite,
+                )
+            }
+            Box(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(bottom = 16.dp)
+                    .height(24.dp),
+                contentAlignment = Alignment.CenterStart, // 수직 및 수평 중앙 정렬
+            ) {
+                Text(
+                    text = recommendData.store,
+                    style = ourMenuTypography().pretendard_600_16.copy(
+                        shadow = Shadow(
+                            color = Color.Black.copy(alpha = 0.2f), // 그림자 색상 및 투명도
+                            offset = Offset(0f, 2f), // 그림자 오프셋 (x = 0px, y = 2px)
+                            blurRadius = 4f // 블러 반경
+                        ),
+                        letterSpacing = (-0.4).sp,
+                        fontStyle = FontStyle.Normal,
+                    ),
+                    color = NeutralWhite,
+                )
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/kuit/ourmenu/ui/home/component/recommendation/main/HomeMainRecommendationList.kt b/app/src/main/java/com/kuit/ourmenu/ui/home/component/recommendation/main/HomeMainRecommendationList.kt
new file mode 100644
index 0000000..cce7aea
--- /dev/null
+++ b/app/src/main/java/com/kuit/ourmenu/ui/home/component/recommendation/main/HomeMainRecommendationList.kt
@@ -0,0 +1,47 @@
+package com.kuit.ourmenu.ui.home.component.recommendation.main
+
+import androidx.compose.foundation.ExperimentalFoundationApi
+import androidx.compose.foundation.gestures.snapping.rememberSnapFlingBehavior
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.lazy.LazyRow
+import androidx.compose.foundation.lazy.rememberLazyListState
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+import com.kuit.ourmenu.ui.home.dummy.HomeDummyData
+
+@OptIn(ExperimentalFoundationApi::class)
+@Composable
+fun HomeMainRecommendationList(
+    modifier: Modifier = Modifier,
+    homeMainDataList: List<HomeDummyData>
+) {
+    val state = rememberLazyListState() // TODO : hoisting
+    val startIndex = (Int.MAX_VALUE / 2) - (Int.MAX_VALUE / 2) % homeMainDataList.size
+    LaunchedEffect(Unit) {
+        state.scrollToItem(startIndex)
+    }
+
+    LazyRow(
+        modifier = modifier,
+        contentPadding = PaddingValues(horizontal = 28.dp),
+        flingBehavior = rememberSnapFlingBehavior(lazyListState = state), // Snap Fling Behavior
+        state = state
+    ) {
+        items(Int.MAX_VALUE) { index ->
+            val itemIndex = index % homeMainDataList.size
+
+            HomeMainRecommendationItem(
+                modifier = Modifier
+                    .height(244.dp)
+                    .width(304.dp)
+                    .padding(horizontal = 6.dp),
+                recommendData = homeMainDataList[itemIndex]
+            )
+        }
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/kuit/ourmenu/ui/home/component/recommendation/main/HomeMainRecommendationText.kt b/app/src/main/java/com/kuit/ourmenu/ui/home/component/recommendation/main/HomeMainRecommendationText.kt
new file mode 100644
index 0000000..51e80d0
--- /dev/null
+++ b/app/src/main/java/com/kuit/ourmenu/ui/home/component/recommendation/main/HomeMainRecommendationText.kt
@@ -0,0 +1,24 @@
+package com.kuit.ourmenu.ui.home.component.recommendation.main
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.width
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.unit.dp
+import com.kuit.ourmenu.R
+
+@Composable
+fun HomeMainRecommendationText(
+    modifier: Modifier = Modifier,
+    imgUrl: String = ""
+) {
+    Image(
+        modifier = modifier,
+        painter = painterResource(id = R.drawable.ic_home_reco_1),
+        contentDescription = "Home Banner"
+    )
+}
+
diff --git a/app/src/main/java/com/kuit/ourmenu/ui/home/component/recommendation/sub/HomeSubRecommendation.kt b/app/src/main/java/com/kuit/ourmenu/ui/home/component/recommendation/sub/HomeSubRecommendation.kt
new file mode 100644
index 0000000..ff4d945
--- /dev/null
+++ b/app/src/main/java/com/kuit/ourmenu/ui/home/component/recommendation/sub/HomeSubRecommendation.kt
@@ -0,0 +1,57 @@
+package com.kuit.ourmenu.ui.home.component.recommendation.sub
+
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.wrapContentHeight
+import androidx.compose.foundation.lazy.rememberLazyListState
+import androidx.compose.material3.Icon
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.kuit.ourmenu.R
+import com.kuit.ourmenu.ui.home.dummy.HomeDummyData
+import com.kuit.ourmenu.ui.theme.Neutral900
+import com.kuit.ourmenu.ui.theme.ourMenuTypography
+
+@Composable
+fun HomeSubRecommendation(
+    modifier: Modifier = Modifier,
+    homeSubDataList: List<HomeDummyData> = listOf()
+) {
+    val state = rememberLazyListState() // TODO : hoisting
+    Column(modifier = modifier) {
+        HomeSubRecommendationText(
+            modifier = Modifier
+                .padding(start = 20.dp, end = 20.dp, bottom = 11.dp),
+            icon = R.drawable.ic_home_sub_reco_1,
+            text = "추천 메뉴"
+        )
+
+        HomeSubRecommendationList(
+            modifier = Modifier
+                .fillMaxWidth()
+                .wrapContentHeight(),
+            state = state,
+            homeSubDataList = homeSubDataList
+        )
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+private fun HomeSubRecommendationListPreview() {
+    HomeSubRecommendation(
+        modifier = Modifier
+            .fillMaxWidth()
+            .wrapContentHeight(),
+        HomeDummyData.dummyData
+    )
+}
diff --git a/app/src/main/java/com/kuit/ourmenu/ui/home/component/recommendation/sub/HomeSubRecommendationItem.kt b/app/src/main/java/com/kuit/ourmenu/ui/home/component/recommendation/sub/HomeSubRecommendationItem.kt
new file mode 100644
index 0000000..414e42b
--- /dev/null
+++ b/app/src/main/java/com/kuit/ourmenu/ui/home/component/recommendation/sub/HomeSubRecommendationItem.kt
@@ -0,0 +1,65 @@
+package com.kuit.ourmenu.ui.home.component.recommendation.sub
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.Font
+import androidx.compose.ui.text.font.FontFamily
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import com.kuit.ourmenu.R
+import com.kuit.ourmenu.ui.home.dummy.HomeDummyData
+import com.kuit.ourmenu.ui.theme.Neutral700
+import com.kuit.ourmenu.ui.theme.Neutral900
+import com.kuit.ourmenu.ui.theme.ourMenuTypography
+
+
+@Composable
+fun HomeSubRecommendationItem(
+    recommendData: HomeDummyData
+) {
+    Column(
+        modifier = Modifier.padding(end = 11.dp)
+    ) {
+        Image(
+            painter = painterResource(recommendData.imageRes),
+            contentDescription = "Home Sub Recommendation Image",
+            contentScale = ContentScale.Crop,
+            modifier = Modifier
+                .height(140.dp)
+                .width(180.dp)
+                .padding(bottom = 8.dp)
+                .clip(shape = RoundedCornerShape(12.dp))
+        )
+        Text(
+            text = recommendData.name,
+            style = ourMenuTypography().pretendard_600_18.copy(
+                color = Neutral900,
+                lineHeight = 27.sp
+            )
+        )
+        Text(
+            text = recommendData.store,
+            style = TextStyle(
+                // TODO : Design system 적용
+                fontSize = 14.sp,
+                lineHeight = 21.sp,
+                fontFamily = FontFamily(Font(R.font.medium)),
+                fontWeight = FontWeight(500),
+                color = Neutral700,
+                letterSpacing = (-0.154).sp
+            )
+        )
+    }
+}
diff --git a/app/src/main/java/com/kuit/ourmenu/ui/home/component/recommendation/sub/HomeSubRecommendationList.kt b/app/src/main/java/com/kuit/ourmenu/ui/home/component/recommendation/sub/HomeSubRecommendationList.kt
new file mode 100644
index 0000000..27a93cc
--- /dev/null
+++ b/app/src/main/java/com/kuit/ourmenu/ui/home/component/recommendation/sub/HomeSubRecommendationList.kt
@@ -0,0 +1,32 @@
+package com.kuit.ourmenu.ui.home.component.recommendation.sub
+
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.wrapContentHeight
+import androidx.compose.foundation.lazy.LazyListState
+import androidx.compose.foundation.lazy.LazyRow
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+import com.kuit.ourmenu.ui.home.dummy.HomeDummyData
+
+@Composable
+fun HomeSubRecommendationList(
+    modifier: Modifier = Modifier,
+    state: LazyListState,
+    homeSubDataList: List<HomeDummyData>
+) {
+    LazyRow(
+        modifier = modifier,
+        state = state,
+        contentPadding = PaddingValues(
+            start = 20.dp, end = 9.dp
+        ),
+    ) {
+        items(homeSubDataList.size) { data ->
+            HomeSubRecommendationItem(
+                recommendData = homeSubDataList[data]
+            )
+        }
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/kuit/ourmenu/ui/home/component/recommendation/sub/HomeSubRecommendationText.kt b/app/src/main/java/com/kuit/ourmenu/ui/home/component/recommendation/sub/HomeSubRecommendationText.kt
new file mode 100644
index 0000000..83ce0b5
--- /dev/null
+++ b/app/src/main/java/com/kuit/ourmenu/ui/home/component/recommendation/sub/HomeSubRecommendationText.kt
@@ -0,0 +1,45 @@
+package com.kuit.ourmenu.ui.home.component.recommendation.sub
+
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.material3.Icon
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.unit.dp
+import com.kuit.ourmenu.ui.theme.Neutral900
+import com.kuit.ourmenu.ui.theme.ourMenuTypography
+
+
+@Composable
+fun HomeSubRecommendationText(
+    modifier: Modifier = Modifier,
+    icon: Int,
+    text: String,
+) {
+    Row(
+        modifier = modifier,
+        verticalAlignment = Alignment.CenterVertically
+    ) {
+        // TODO : Async Image Loading
+        Icon(
+            painter = painterResource(icon),
+            modifier = Modifier
+                .size(32.dp)
+                .padding(end = 4.dp),
+            contentDescription = "Home Sub Recommendation 1",
+            tint = Color.Unspecified
+        )
+        Text(
+            text = text,
+            style = ourMenuTypography().pretendard_700_24.copy(
+                color = Neutral900
+            )
+        )
+    }
+}
+
diff --git a/app/src/main/java/com/kuit/ourmenu/ui/home/dummy/HomeDummyData.kt b/app/src/main/java/com/kuit/ourmenu/ui/home/dummy/HomeDummyData.kt
new file mode 100644
index 0000000..c89c5c2
--- /dev/null
+++ b/app/src/main/java/com/kuit/ourmenu/ui/home/dummy/HomeDummyData.kt
@@ -0,0 +1,30 @@
+package com.kuit.ourmenu.ui.home.dummy
+
+import com.kuit.ourmenu.R
+
+data class HomeDummyData(
+    val imageRes: Int,
+    val name: String,
+    val store: String,
+) {
+
+    companion object {
+        val dummyData = listOf(
+            HomeDummyData(
+                imageRes = R.drawable.img_dummy_pizza,
+                name = "초코 소프트콘 1",
+                store = "아이스크림세계할인점",
+            ),
+            HomeDummyData(
+                imageRes = R.drawable.img_dummy_pizza,
+                name = "초코 소프트콘 2",
+                store = "아이스크림세계할인점",
+            ),
+            HomeDummyData(
+                imageRes = R.drawable.img_dummy_pizza,
+                name = "초코 소프트콘 3",
+                store = "아이스크림세계할인점",
+            ),
+        )
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/kuit/ourmenu/ui/home/screen/HomeScreen.kt b/app/src/main/java/com/kuit/ourmenu/ui/home/screen/HomeScreen.kt
new file mode 100644
index 0000000..64adadc
--- /dev/null
+++ b/app/src/main/java/com/kuit/ourmenu/ui/home/screen/HomeScreen.kt
@@ -0,0 +1,73 @@
+package com.kuit.ourmenu.ui.home.screen
+
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.wrapContentHeight
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.verticalScroll
+import androidx.compose.material3.Scaffold
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.navigation.NavHostController
+import androidx.navigation.compose.rememberNavController
+import com.kuit.ourmenu.ui.common.topappbar.OurMenuAddButtonTopAppBar
+import com.kuit.ourmenu.ui.home.component.recommendation.main.HomeMainRecommendation
+import com.kuit.ourmenu.ui.home.component.recommendation.sub.HomeSubRecommendation
+import com.kuit.ourmenu.ui.home.dummy.HomeDummyData
+
+@Composable
+fun HomeScreen(modifier: Modifier = Modifier, navController: NavHostController) {
+
+    val scrollState = rememberScrollState()
+
+    Scaffold(
+        topBar = {
+            OurMenuAddButtonTopAppBar()
+        }
+    ) { innerPadding ->
+        Column(
+            modifier = Modifier
+                .padding(innerPadding)
+                .verticalScroll(scrollState),
+            horizontalAlignment = Alignment.Start
+        ) {
+
+            HomeMainRecommendation(
+                modifier = Modifier
+                    .padding(top = 16.dp, bottom = 29.dp),
+                homeMainDataList = HomeDummyData.dummyData
+            )
+
+
+            HomeSubRecommendation(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .wrapContentHeight()
+                    .padding(bottom = 25.dp),
+                homeSubDataList = HomeDummyData.dummyData
+            )
+
+            HomeSubRecommendation(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .wrapContentHeight()
+                    .padding(bottom = 25.dp),
+                homeSubDataList = HomeDummyData.dummyData
+            )
+        }
+    }
+}
+
+@Preview(
+    widthDp = 360,
+    heightDp = 800
+)
+@Composable
+private fun HomeScreenPreview() {
+    val navController = rememberNavController()
+    HomeScreen(navController = navController)
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/kuit/ourmenu/ui/menuinfo/component/info/MenuInfoAdditionalContent.kt b/app/src/main/java/com/kuit/ourmenu/ui/menuinfo/component/info/MenuInfoAdditionalContent.kt
new file mode 100644
index 0000000..d7dd5a0
--- /dev/null
+++ b/app/src/main/java/com/kuit/ourmenu/ui/menuinfo/component/info/MenuInfoAdditionalContent.kt
@@ -0,0 +1,125 @@
+package com.kuit.ourmenu.ui.menuinfo.component.info
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Icon
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import com.kuit.ourmenu.R
+import com.kuit.ourmenu.ui.theme.Neutral100
+import com.kuit.ourmenu.ui.theme.Neutral500
+import com.kuit.ourmenu.ui.theme.Neutral700
+import com.kuit.ourmenu.ui.theme.ourMenuTypography
+
+@Composable
+fun MenuInfoAdditionalContent(
+    address: String,
+    memoTitle: String,
+    memoContent: String
+) {
+    Column(
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(horizontal = 20.dp)
+            .padding(top = 12.dp)
+    ) {
+        Text(
+            text = stringResource(R.string.info),
+            style = ourMenuTypography().pretendard_600_32.copy(
+                fontSize = 12.sp,
+                lineHeight = 12.sp,
+                color = Neutral500
+            ),
+            modifier = Modifier.padding(bottom = 6.dp)
+        )
+        Row {
+            Icon(
+                painter = painterResource(id = R.drawable.ic_fill_map_20),
+                contentDescription = null,
+                tint = Color.Unspecified,
+                modifier = Modifier.align(Alignment.CenterVertically)
+            )
+            Text(
+                text = address,
+                style = ourMenuTypography().pretendard_400_14.copy(
+                    lineHeight = 22.sp,
+                    color = Neutral700
+                ),
+                modifier = Modifier
+                    .align(Alignment.CenterVertically)
+                    .padding(start = 8.dp)
+            )
+        }
+
+        Text(
+            text = stringResource(R.string.memo_eng),
+            style = ourMenuTypography().pretendard_600_32.copy(
+                fontSize = 12.sp,
+                lineHeight = 12.sp,
+                color = Neutral500
+            ),
+            modifier = Modifier.padding(
+                top = 13.dp, bottom = 6.dp
+            )
+        )
+
+        Column(
+            modifier = Modifier
+                .width(320.dp)
+                .background(color = Neutral100, shape = RoundedCornerShape(size = 12.dp))
+                .padding(start = 8.dp, top = 12.dp, end = 8.dp, bottom = 12.dp)
+        ) {
+            Row {
+                Icon(
+                    painter = painterResource(id = R.drawable.ic_menu_info_meno_20),
+                    contentDescription = null,
+                    tint = Color.Unspecified,
+                    modifier = Modifier.align(Alignment.Top)
+                )
+                Column(
+                    modifier = Modifier.padding(start = 10.dp)
+                ) {
+                    Text(
+                        text = memoTitle,
+                        style = ourMenuTypography().pretendard_600_14.copy(
+                            lineHeight = 18.sp,
+                            color = Neutral700
+                        ),
+                        modifier = Modifier.padding(bottom = 4.dp)
+                    )
+                    Text(
+                        text = memoContent,
+                        style = ourMenuTypography().pretendard_600_12.copy(
+                            lineHeight = 18.sp,
+                            color = Neutral700
+                        ),
+                    )
+                }
+            }
+        }
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+private fun MenuInfoAdditionalContentPreview() {
+    MenuInfoAdditionalContent(
+        address = "서울 마포구 와우산로 112",
+        memoTitle = "매운 맛 선택 가능!",
+        memoContent = "* 덕유산 / ㅇㅇ산 / 한라산 \n" +
+                "기본도 정말 매우니 조심하기"
+    )
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/kuit/ourmenu/ui/menuinfo/component/info/MenuInfoChipContent.kt b/app/src/main/java/com/kuit/ourmenu/ui/menuinfo/component/info/MenuInfoChipContent.kt
new file mode 100644
index 0000000..66ad5d1
--- /dev/null
+++ b/app/src/main/java/com/kuit/ourmenu/ui/menuinfo/component/info/MenuInfoChipContent.kt
@@ -0,0 +1,62 @@
+package com.kuit.ourmenu.ui.menuinfo.component.info
+
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import com.kuit.ourmenu.R
+import com.kuit.ourmenu.ui.menuinfo.dummy.MenuInfoDummyData
+import com.kuit.ourmenu.ui.theme.Neutral500
+import com.kuit.ourmenu.ui.theme.ourMenuTypography
+
+@Composable
+fun MenuInfoChipContent(
+    menuInfoData: MenuInfoDummyData
+) {
+    Column(
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(horizontal = 20.dp)
+    ) {
+        Text(
+            text = stringResource(R.string.menu_folder),
+            style = ourMenuTypography().pretendard_600_32.copy(
+                fontSize = 12.sp,
+                lineHeight = 12.sp,
+                color = Neutral500
+            ),
+        )
+
+        MenuInfoFolderChipGrid(
+            menuFolderList = menuInfoData.menuFolderList
+        )
+
+        Text(
+            text = stringResource(R.string.tag_eng),
+            style = ourMenuTypography().pretendard_600_32.copy(
+                fontSize = 12.sp,
+                lineHeight = 12.sp,
+                color = Neutral500
+            ),
+            modifier = Modifier.padding(top = 12.dp)
+        )
+        MenuInfoTagChipGrid(
+            defaultTagList = menuInfoData.defaultTagList,
+            customTagList = menuInfoData.customTagList
+        )
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+private fun MenuInfoChipContentPreview() {
+    MenuInfoChipContent(
+        menuInfoData = MenuInfoDummyData.dummyData
+    )
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/kuit/ourmenu/ui/menuinfo/component/info/MenuInfoContent.kt b/app/src/main/java/com/kuit/ourmenu/ui/menuinfo/component/info/MenuInfoContent.kt
new file mode 100644
index 0000000..d27b2c7
--- /dev/null
+++ b/app/src/main/java/com/kuit/ourmenu/ui/menuinfo/component/info/MenuInfoContent.kt
@@ -0,0 +1,72 @@
+package com.kuit.ourmenu.ui.menuinfo.component.info
+
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import com.kuit.ourmenu.ui.menuinfo.dummy.MenuInfoDummyData
+import com.kuit.ourmenu.ui.theme.Neutral500
+import com.kuit.ourmenu.ui.theme.Neutral700
+import com.kuit.ourmenu.ui.theme.Neutral900
+import com.kuit.ourmenu.ui.theme.ourMenuTypography
+import com.kuit.ourmenu.utils.ExtensionUtil.toWon
+
+@Composable
+fun MenuInfoContent(
+    menuInfoData: MenuInfoDummyData
+) {
+    Column {
+        Box(
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(top = 16.dp)
+        ) {
+            Text(
+                text = menuInfoData.menuTitle,
+                style = ourMenuTypography().pretendard_700_48.copy(
+                    fontSize = 20.sp,
+                    lineHeight = 24.sp,
+                    color = Neutral900
+                ),
+                modifier = Modifier
+                    .padding(start = 20.dp, top = 1.dp)
+            )
+            Text(
+                text = menuInfoData.menuPrice.toWon(),
+                style = ourMenuTypography().pretendard_600_32.copy(
+                    fontSize = 16.sp,
+                    lineHeight = 22.sp,
+                    color = Neutral700
+                ),
+                modifier = Modifier
+                    .padding(end = 20.dp, top = 1.dp)
+                    .align(Alignment.TopEnd)
+            )
+        }
+        Text(
+            text = menuInfoData.store,
+            style = ourMenuTypography().pretendard_600_32.copy(
+                fontSize = 14.sp,
+                lineHeight = 18.sp,
+                color = Neutral500
+            ),
+            modifier = Modifier
+                .padding(start = 20.dp, top = 7.dp)
+        )
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+private fun MenuInfoContentPreview() {
+    MenuInfoContent(
+        MenuInfoDummyData.dummyData
+    )
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/kuit/ourmenu/ui/menuinfo/component/info/MenuInfoFolderChipGrid.kt b/app/src/main/java/com/kuit/ourmenu/ui/menuinfo/component/info/MenuInfoFolderChipGrid.kt
new file mode 100644
index 0000000..b5ea7da
--- /dev/null
+++ b/app/src/main/java/com/kuit/ourmenu/ui/menuinfo/component/info/MenuInfoFolderChipGrid.kt
@@ -0,0 +1,57 @@
+package com.kuit.ourmenu.ui.menuinfo.component.info
+
+import androidx.compose.foundation.layout.ExperimentalLayoutApi
+import androidx.compose.foundation.layout.FlowRow
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.padding
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.kuit.ourmenu.ui.common.chip.MenuFolderChip
+
+@OptIn(ExperimentalLayoutApi::class)
+@Composable
+fun MenuInfoFolderChipGrid(
+    modifier: Modifier = Modifier,
+    menuFolderList: List<String> = listOf()
+) {
+
+    FlowRow(
+        modifier = Modifier
+            .padding(top = 2.dp)
+    ) {
+        menuFolderList.forEach { title ->
+            MenuFolderChip(
+                modifier = Modifier.padding(
+                    top = 4.dp,
+                ),
+                menuFolderTitle = title
+            )
+            if (title != menuFolderList.last()) {
+                Spacer(modifier = Modifier.padding(end = 4.dp))
+            }
+        }
+    }
+}
+
+@Preview(
+    showBackground = true,
+    backgroundColor = 0xFFFFFFFF
+)
+@Composable
+private fun MenuInfoFolderChipGridPreview() {
+    MenuInfoFolderChipGrid(
+        menuFolderList = listOf(
+            "메뉴판1",
+            "메뉴판22",
+            "메뉴판333",
+            "메뉴판4444",
+            "메뉴판55555",
+            "메뉴판666666",
+            "메뉴판7777777",
+            "메뉴판88888888",
+            "메뉴판999999999"
+        )
+    )
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/kuit/ourmenu/ui/menuinfo/component/info/MenuInfoImagePager.kt b/app/src/main/java/com/kuit/ourmenu/ui/menuinfo/component/info/MenuInfoImagePager.kt
new file mode 100644
index 0000000..081a10c
--- /dev/null
+++ b/app/src/main/java/com/kuit/ourmenu/ui/menuinfo/component/info/MenuInfoImagePager.kt
@@ -0,0 +1,82 @@
+package com.kuit.ourmenu.ui.menuinfo.component.info
+
+import androidx.compose.foundation.ExperimentalFoundationApi
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.pager.HorizontalPager
+import androidx.compose.foundation.pager.PagerState
+import androidx.compose.foundation.pager.rememberPagerState
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.kuit.ourmenu.ui.menuinfo.dummy.MenuInfoDummyData
+import com.kuit.ourmenu.ui.theme.Neutral500
+import com.kuit.ourmenu.ui.theme.NeutralWhite
+import com.tbuonomo.viewpagerdotsindicator.compose.DotsIndicator
+import com.tbuonomo.viewpagerdotsindicator.compose.model.DotGraphic
+import com.tbuonomo.viewpagerdotsindicator.compose.type.SpringIndicatorType
+
+@Composable
+fun MenuInfoImagePager(
+    pagerState: PagerState,
+    pageItems: MenuInfoDummyData
+) {
+    val pagerCount = pageItems.imgRes.size
+
+    Box(
+        contentAlignment = Alignment.BottomCenter
+    ) {
+        HorizontalPager(
+            modifier = Modifier
+                .fillMaxWidth()
+                .height(292.dp),
+            state = pagerState
+        ) { index ->
+            Image(
+                contentDescription = null,
+                modifier = Modifier
+                    .fillMaxSize(),
+                contentScale = ContentScale.Crop,
+                painter = painterResource(pageItems.imgRes[index])
+            )
+        }
+        DotsIndicator(
+            modifier = Modifier
+                .padding(bottom = 12.dp),
+            dotCount = pagerCount,
+            type = SpringIndicatorType(
+                dotsGraphic = DotGraphic(
+                    4.dp,
+                    color = Neutral500
+                ),
+                selectorDotGraphic = DotGraphic(
+                    4.dp,
+                    color = NeutralWhite
+                )
+            ),
+            pagerState = pagerState,
+            dotSpacing = 6.dp
+        )
+    }
+}
+
+
+@OptIn(ExperimentalFoundationApi::class)
+@Preview
+@Composable
+private fun MenuInfoPreview() {
+    val state = rememberPagerState(pageCount = { 3 })
+
+    MenuInfoImagePager(
+        pagerState = state,
+        pageItems = MenuInfoDummyData.dummyData
+    )
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/kuit/ourmenu/ui/menuinfo/component/info/MenuInfoMapButton.kt b/app/src/main/java/com/kuit/ourmenu/ui/menuinfo/component/info/MenuInfoMapButton.kt
new file mode 100644
index 0000000..88c9269
--- /dev/null
+++ b/app/src/main/java/com/kuit/ourmenu/ui/menuinfo/component/info/MenuInfoMapButton.kt
@@ -0,0 +1,71 @@
+package com.kuit.ourmenu.ui.menuinfo.component.info
+
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Button
+import androidx.compose.material3.ButtonDefaults
+import androidx.compose.material3.Icon
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment.Companion.CenterVertically
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.shadow
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.kuit.ourmenu.R
+import com.kuit.ourmenu.ui.theme.NeutralWhite
+import com.kuit.ourmenu.ui.theme.Primary500Main
+import com.kuit.ourmenu.ui.theme.ourMenuTypography
+
+@Composable
+fun MenuInfoMapButton(
+    modifier: Modifier = Modifier,
+    onClick: () -> Unit
+) {
+    Button(
+        modifier = modifier
+            .shadow(
+                elevation = 8.dp,
+                spotColor = Color(0x29000000),
+                ambientColor = Color(0x29000000)
+            )
+            .width(124.dp)
+            .height(40.dp),
+        shape = RoundedCornerShape(20.dp),
+        onClick = onClick,
+        colors = ButtonDefaults.buttonColors(
+            containerColor = NeutralWhite,
+            contentColor = Primary500Main
+        ),
+        contentPadding = PaddingValues()
+    ) {
+        Row {
+            Text(
+                text = stringResource(R.string.menu_info_goto_map),
+                style = ourMenuTypography().pretendard_600_16,
+                modifier = Modifier.align(CenterVertically)
+            )
+            Icon(
+                painter = painterResource(R.drawable.ic_menu_info_nav_24),
+                contentDescription = null,
+                tint = Primary500Main,
+                modifier = Modifier
+                    .padding(start = 8.dp)
+                    .align(CenterVertically)
+            )
+        }
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+private fun MenuInfoMapButtonPreview() {
+    MenuInfoMapButton { }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/kuit/ourmenu/ui/menuinfo/component/info/MenuInfoTagChipGrid.kt b/app/src/main/java/com/kuit/ourmenu/ui/menuinfo/component/info/MenuInfoTagChipGrid.kt
new file mode 100644
index 0000000..ec2c577
--- /dev/null
+++ b/app/src/main/java/com/kuit/ourmenu/ui/menuinfo/component/info/MenuInfoTagChipGrid.kt
@@ -0,0 +1,76 @@
+package com.kuit.ourmenu.ui.menuinfo.component.info
+
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.ExperimentalLayoutApi
+import androidx.compose.foundation.layout.FlowRow
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.padding
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.kuit.ourmenu.ui.common.chip.TagChip
+import com.kuit.ourmenu.ui.menuinfo.dummy.MenuInfoDummyData
+import com.kuit.ourmenu.ui.menuinfo.dummy.MenuInfoTag
+
+@OptIn(ExperimentalLayoutApi::class)
+@Composable
+fun MenuInfoTagChipGrid(
+    modifier: Modifier = Modifier,
+    defaultTagList: List<MenuInfoTag> = listOf(),
+    customTagList: List<MenuInfoTag> = listOf(),
+) {
+
+    Column {
+
+        FlowRow(
+            modifier = Modifier
+                .padding(top = 2.dp)
+        ) {
+            defaultTagList.forEachIndexed { index, tag ->
+                TagChip(
+                    modifier = Modifier.padding(
+                        top = 4.dp,
+                    ),
+                    tagIcon = tag.tagIcon,
+                    tagName = tag.tagName,
+                    enabled = false,
+                    selected = true,
+                    onClick = { }
+                )
+                if (index != defaultTagList.lastIndex) {
+                    Spacer(modifier = Modifier.padding(end = 4.dp))
+                }
+            }
+        }
+        FlowRow {
+            customTagList.forEachIndexed { index, tag ->
+                TagChip(
+                    modifier = Modifier.padding(
+                        top = 4.dp,
+                    ),
+                    tagIcon = tag.tagIcon,
+                    tagName = tag.tagName,
+                    onClick = { }
+                )
+                if (index != customTagList.lastIndex) {
+                    Spacer(modifier = Modifier.padding(end = 4.dp))
+                }
+            }
+        }
+    }
+}
+
+@Preview(
+    showBackground = true,
+    backgroundColor = 0xFFFFFFFF
+)
+@Composable
+private fun MenuInfoFolderChipGridPreview() {
+    MenuInfoTagChipGrid(
+        defaultTagList = MenuInfoDummyData.dummyData.defaultTagList,
+        customTagList = MenuInfoDummyData.dummyData.customTagList
+    )
+}
+
+
diff --git a/app/src/main/java/com/kuit/ourmenu/ui/menuinfo/component/info/MenuInfoTopIcons.kt b/app/src/main/java/com/kuit/ourmenu/ui/menuinfo/component/info/MenuInfoTopIcons.kt
new file mode 100644
index 0000000..2aeefa1
--- /dev/null
+++ b/app/src/main/java/com/kuit/ourmenu/ui/menuinfo/component/info/MenuInfoTopIcons.kt
@@ -0,0 +1,60 @@
+package com.kuit.ourmenu.ui.menuinfo.component.info
+
+import androidx.compose.foundation.ExperimentalFoundationApi
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.Icon
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.kuit.ourmenu.R
+import com.kuit.ourmenu.ui.theme.NeutralWhite
+
+@Composable
+fun MenuInfoTopIcons(
+    onBackClick : () -> Unit,
+    onVertClick : () -> Unit
+) {
+    Box(
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(horizontal = 20.dp)
+            .height(52.dp)
+    ) {
+        Icon(
+            painter = painterResource(R.drawable.ic_top_bar_back),
+            contentDescription = null,
+            tint = NeutralWhite,
+            modifier = Modifier
+                .padding(top = 18.dp)
+                .clickable { onBackClick() }
+        )
+
+        Icon(
+            painter = painterResource(R.drawable.icon_vert_white_24),
+            contentDescription = null,
+            tint = NeutralWhite,
+            modifier = Modifier
+                .padding(top = 18.dp)
+                .align(Alignment.TopEnd)
+                .clickable { onVertClick() }
+        )
+    }
+
+}
+
+@OptIn(ExperimentalFoundationApi::class)
+@Preview
+@Composable
+private fun MenuInfoPreview() {
+    MenuInfoTopIcons(
+        onBackClick = {},
+        onVertClick = {}
+    )
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/kuit/ourmenu/ui/menuinfo/dummy/MenuInfoDummyData.kt b/app/src/main/java/com/kuit/ourmenu/ui/menuinfo/dummy/MenuInfoDummyData.kt
new file mode 100644
index 0000000..ef3e5e0
--- /dev/null
+++ b/app/src/main/java/com/kuit/ourmenu/ui/menuinfo/dummy/MenuInfoDummyData.kt
@@ -0,0 +1,151 @@
+package com.kuit.ourmenu.ui.menuinfo.dummy
+
+import androidx.annotation.DrawableRes
+import androidx.annotation.StringRes
+import androidx.compose.ui.graphics.Color
+import com.kuit.ourmenu.R
+import com.kuit.ourmenu.ui.theme.Neutral300
+import com.kuit.ourmenu.ui.theme.Neutral700
+import com.kuit.ourmenu.ui.theme.NeutralWhite
+import com.kuit.ourmenu.ui.theme.Primary500Main
+
+data class MenuInfoDummyData(
+    @DrawableRes val imgRes: List<Int>,
+    val menuTitle: String,
+    val menuPrice: Int,
+    val store: String,
+    val menuFolderList: List<String>,
+    val defaultTagList: List<MenuInfoTag> = listOf(),
+    val customTagList: List<MenuInfoTag> = listOf(),
+    val address: String,
+    val memoTitle: String,
+    val memoContent: String
+) {
+    companion object {
+        private const val MENU_TITLE = "화산라멘"
+        private const val STORE = "화산라멘 멘야마쯔리 홍대점"
+        private const val ADDRESS = "서울 마포구 와우산로 112"
+        private const val MEMO_TITLE = "매운 맛 선택 가능!"
+        private const val MEMO_CONTENT = "* 덕유산 / ㅇㅇ산 / 한라산 \n" +
+                "기본도 정말 매우니 조심하기"
+        private const val TAG_NAME = "밥"
+
+        val dummyData = MenuInfoDummyData(
+            imgRes = listOf(
+                R.drawable.img_dummy_pizza,
+                R.drawable.img_dummy_pizza,
+                R.drawable.img_dummy_pizza,
+            ),
+            menuTitle = MENU_TITLE,
+            menuPrice = 14000,
+            store = STORE,
+            menuFolderList = listOf(
+                "메뉴판1",
+                "메뉴판22",
+                "메뉴판333",
+                "메뉴판4444",
+                "메뉴판55555",
+                "메뉴판666666",
+                "메뉴판7777777",
+                "메뉴판88888888",
+                "메뉴판999999999"
+            ),
+            defaultTagList = listOf(
+                MenuInfoTag(
+                    tagName = TAG_NAME,
+                    tagIcon = R.drawable.ic_tag_rice,
+                    isCustom = false,
+                    containerColor = Neutral300,
+                    contentColor = Neutral700
+                ),
+                MenuInfoTag(
+                    tagName = TAG_NAME,
+                    tagIcon = R.drawable.ic_tag_rice,
+                    isCustom = false,
+                    containerColor = Neutral300,
+                    contentColor = Neutral700
+                ),
+                MenuInfoTag(
+                    tagName = TAG_NAME,
+                    tagIcon = R.drawable.ic_tag_rice,
+                    isCustom = false,
+                    containerColor = Neutral300,
+                    contentColor = Neutral700
+                ),
+                MenuInfoTag(
+                    tagName = TAG_NAME,
+                    tagIcon = R.drawable.ic_tag_rice,
+                    isCustom = false,
+                    containerColor = Neutral300,
+                    contentColor = Neutral700
+                ),
+                MenuInfoTag(
+                    tagName = TAG_NAME,
+                    tagIcon = R.drawable.ic_tag_rice,
+                    isCustom = false,
+                    containerColor = Neutral300,
+                    contentColor = Neutral700
+                ),
+                MenuInfoTag(
+                    tagName = TAG_NAME,
+                    tagIcon = R.drawable.ic_tag_rice,
+                    isCustom = false,
+                    containerColor = Neutral300,
+                    contentColor = Neutral700
+                ),
+                MenuInfoTag(
+                    tagName = TAG_NAME,
+                    tagIcon = R.drawable.ic_tag_rice,
+                    isCustom = false,
+                    containerColor = Neutral300,
+                    contentColor = Neutral700
+                ),
+            ),
+            customTagList = listOf(
+                MenuInfoTag(
+                    tagName = TAG_NAME,
+                    tagIcon = R.drawable.ic_tag_rice,
+                    isCustom = false,
+                    containerColor = Neutral300,
+                    contentColor = Neutral700
+                ),
+                MenuInfoTag(
+                    tagName = TAG_NAME,
+                    tagIcon = R.drawable.ic_tag_rice,
+                    isCustom = false,
+                    containerColor = Neutral300,
+                    contentColor = Neutral700
+                ),
+                MenuInfoTag(
+                    tagName = TAG_NAME,
+                    tagIcon = R.drawable.ic_tag_rice,
+                    isCustom = false,
+                    containerColor = Neutral300,
+                    contentColor = Neutral700
+                ),
+            ),
+            address = ADDRESS,
+            memoTitle = MEMO_TITLE,
+            memoContent = MEMO_CONTENT
+
+        )
+    }
+}
+
+data class MenuInfoTag(
+    val tagName: String,
+    @DrawableRes val tagIcon: Int,
+    var containerColor: Color,
+    var contentColor: Color,
+    val isCustom: Boolean,
+) {
+    init {
+        if (isCustom) {
+            contentColor = NeutralWhite
+            containerColor = Primary500Main
+        } else {
+            contentColor = Neutral700
+            containerColor = Neutral300
+        }
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/kuit/ourmenu/ui/menuinfo/screen/MenuInfoDefaultScreen.kt b/app/src/main/java/com/kuit/ourmenu/ui/menuinfo/screen/MenuInfoDefaultScreen.kt
new file mode 100644
index 0000000..f270edd
--- /dev/null
+++ b/app/src/main/java/com/kuit/ourmenu/ui/menuinfo/screen/MenuInfoDefaultScreen.kt
@@ -0,0 +1,79 @@
+package com.kuit.ourmenu.ui.menuinfo.screen
+
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.pager.rememberPagerState
+import androidx.compose.material3.HorizontalDivider
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.kuit.ourmenu.ui.menuinfo.component.info.MenuInfoAdditionalContent
+import com.kuit.ourmenu.ui.menuinfo.component.info.MenuInfoChipContent
+import com.kuit.ourmenu.ui.menuinfo.component.info.MenuInfoContent
+import com.kuit.ourmenu.ui.menuinfo.component.info.MenuInfoImagePager
+import com.kuit.ourmenu.ui.menuinfo.component.info.MenuInfoMapButton
+import com.kuit.ourmenu.ui.menuinfo.component.info.MenuInfoTopIcons
+import com.kuit.ourmenu.ui.menuinfo.dummy.MenuInfoDummyData
+import com.kuit.ourmenu.ui.theme.Neutral300
+
+@Composable
+fun MenuInfoDefaultScreen() {
+
+    val pagerState = rememberPagerState { 3 }
+
+    Box {
+        Column(
+            modifier = Modifier
+                .fillMaxSize()
+        ) {
+            Box {
+                MenuInfoImagePager(
+                    pagerState = pagerState,
+                    pageItems = MenuInfoDummyData.dummyData
+                )
+                MenuInfoTopIcons(
+                    onBackClick = { },
+                    onVertClick = { }
+                )
+            }
+
+            MenuInfoContent(
+                MenuInfoDummyData.dummyData
+            )
+
+            HorizontalDivider(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(vertical = 16.dp),
+                color = Neutral300
+            )
+
+            MenuInfoChipContent(
+                menuInfoData = MenuInfoDummyData.dummyData
+            )
+
+            MenuInfoAdditionalContent(
+                address = MenuInfoDummyData.dummyData.address,
+                memoTitle = MenuInfoDummyData.dummyData.memoTitle,
+                memoContent = MenuInfoDummyData.dummyData.memoContent
+            )
+        }
+        MenuInfoMapButton(
+            modifier = Modifier
+                .align(Alignment.BottomEnd)
+                .padding(end = 20.dp, bottom = 28.dp),
+            ) { }
+    }
+}
+
+
+@Preview(showBackground = true)
+@Composable
+private fun MenuInfoDefaultPreview() {
+    MenuInfoDefaultScreen()
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/kuit/ourmenu/ui/menuinfo/screen/MenuInfoMapScreen.kt b/app/src/main/java/com/kuit/ourmenu/ui/menuinfo/screen/MenuInfoMapScreen.kt
new file mode 100644
index 0000000..a791faa
--- /dev/null
+++ b/app/src/main/java/com/kuit/ourmenu/ui/menuinfo/screen/MenuInfoMapScreen.kt
@@ -0,0 +1,83 @@
+package com.kuit.ourmenu.ui.menuinfo.screen
+
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.BottomSheetScaffold
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.rememberBottomSheetScaffoldState
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.layout.onGloballyPositioned
+import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.kuit.ourmenu.ui.common.GoToMapButton
+import com.kuit.ourmenu.ui.common.bottomsheet.BottomSheetDragHandle
+import com.kuit.ourmenu.ui.common.topappbar.OurMenuAddButtonTopAppBar
+import com.kuit.ourmenu.ui.common.bottomsheet.MenuInfoBottomSheetContent
+import com.kuit.ourmenu.ui.theme.NeutralWhite
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun MenuInfoMapScreen(modifier: Modifier = Modifier) {
+    val scaffoldState = rememberBottomSheetScaffoldState()
+    var dragHandleHeight by remember { mutableStateOf(0.dp) }
+    var bottomSheetContentHeight by remember { mutableStateOf(0.dp) }
+
+    val density = LocalDensity.current
+
+    BottomSheetScaffold(
+        scaffoldState = scaffoldState,
+        sheetContainerColor = NeutralWhite,
+        sheetSwipeEnabled = false,
+        topBar = { OurMenuAddButtonTopAppBar() },
+        sheetDragHandle = {
+            BottomSheetDragHandle(
+                modifier = Modifier.onGloballyPositioned { coordinates ->
+                    dragHandleHeight = density.run { coordinates.size.height.toDp() }
+                }
+            )
+        },
+        sheetShape = RoundedCornerShape(topStart = 12.dp, topEnd = 12.dp),
+        sheetContent = {
+            MenuInfoBottomSheetContent(
+                modifier = Modifier
+                    .onGloballyPositioned { coordinates ->
+                        val heightPx = coordinates.size.height
+                        bottomSheetContentHeight = density.run {
+                            heightPx.toDp() + dragHandleHeight
+                        }
+                    }.padding(bottom = 20.dp)
+            )
+        },
+        sheetPeekHeight = bottomSheetContentHeight,
+    ) { innerPaddings ->
+        Box(
+            modifier = modifier
+                .fillMaxSize()
+                .padding(innerPaddings)
+        ) {
+            // TODO : Map SDK
+            GoToMapButton(
+                modifier = Modifier
+                    .align(Alignment.BottomEnd)
+                    .padding(bottom = 16.dp, end = 20.dp),
+                onClick = { /* TODO : Go To Map Button Click Event */ },
+            )
+        }
+    }
+
+}
+
+@Preview(showBackground = true)
+@Composable
+private fun MenuInfoMapScreenPreview() {
+    MenuInfoMapScreen()
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/kuit/ourmenu/ui/navigator/MainNavGraph.kt b/app/src/main/java/com/kuit/ourmenu/ui/navigator/MainNavGraph.kt
new file mode 100644
index 0000000..8f66439
--- /dev/null
+++ b/app/src/main/java/com/kuit/ourmenu/ui/navigator/MainNavGraph.kt
@@ -0,0 +1,16 @@
+package com.kuit.ourmenu.ui.navigator
+
+import androidx.compose.runtime.Composable
+import androidx.navigation.NavHostController
+import androidx.navigation.compose.NavHost
+import androidx.navigation.compose.composable
+import com.kuit.ourmenu.ui.home.screen.HomeScreen
+
+@Composable
+fun MainNavGraph(navController: NavHostController) {
+    NavHost(navController, startDestination = Routes.Home) {
+        composable<Routes.Home>{
+            HomeScreen(navController = navController)
+        }
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/kuit/ourmenu/ui/navigator/Routes.kt b/app/src/main/java/com/kuit/ourmenu/ui/navigator/Routes.kt
new file mode 100644
index 0000000..45d8eef
--- /dev/null
+++ b/app/src/main/java/com/kuit/ourmenu/ui/navigator/Routes.kt
@@ -0,0 +1,15 @@
+package com.kuit.ourmenu.ui.navigator
+
+import kotlinx.serialization.Serializable
+
+sealed interface Routes{
+    // Home
+    @Serializable
+    data object Home: Routes
+
+    // 지도
+
+    // 메뉴판
+
+    // Mypage
+}
diff --git a/app/src/main/java/com/kuit/ourmenu/ui/onboarding/component/BottomFullWidthBorderButton.kt b/app/src/main/java/com/kuit/ourmenu/ui/onboarding/component/BottomFullWidthBorderButton.kt
new file mode 100644
index 0000000..68ca80a
--- /dev/null
+++ b/app/src/main/java/com/kuit/ourmenu/ui/onboarding/component/BottomFullWidthBorderButton.kt
@@ -0,0 +1,58 @@
+package com.kuit.ourmenu.ui.onboarding.component
+
+import androidx.compose.foundation.border
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Button
+import androidx.compose.material3.ButtonDefaults
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.kuit.ourmenu.R
+import com.kuit.ourmenu.ui.theme.NeutralWhite
+import com.kuit.ourmenu.ui.theme.Primary500Main
+import com.kuit.ourmenu.ui.theme.ourMenuTypography
+
+@Composable
+fun BottomFullWidthBorderButton(
+    onClick: () -> Unit
+) {
+    Button(
+        onClick = onClick,
+        modifier = Modifier
+            .fillMaxWidth()
+            .size(320.dp, 48.dp)
+            .border(
+                width = (1.2).dp,
+                color = Primary500Main,
+                shape = RoundedCornerShape(12.dp)
+            ),
+        shape = RoundedCornerShape(12.dp),
+        colors = ButtonDefaults.buttonColors(
+            containerColor = NeutralWhite,
+            contentColor = Primary500Main
+        ),
+    ) {
+        Text(text = stringResource(R.string.make_account),
+            style = ourMenuTypography().pretendard_500_16,
+            color = Primary500Main
+        )
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+private fun BottomFullWidthButtonPreview() {
+    Column(modifier = Modifier.fillMaxSize(), verticalArrangement = Arrangement.Center) {
+        BottomFullWidthBorderButton{
+            //onClick 작성
+        }
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/kuit/ourmenu/ui/onboarding/component/LoginTextField.kt b/app/src/main/java/com/kuit/ourmenu/ui/onboarding/component/LoginTextField.kt
new file mode 100644
index 0000000..367483b
--- /dev/null
+++ b/app/src/main/java/com/kuit/ourmenu/ui/onboarding/component/LoginTextField.kt
@@ -0,0 +1,48 @@
+package com.kuit.ourmenu.ui.onboarding.component
+
+import androidx.compose.foundation.border
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.text.input.VisualTransformation
+import androidx.compose.ui.unit.dp
+import com.kuit.ourmenu.ui.common.CustomTextField
+import com.kuit.ourmenu.ui.theme.Neutral100
+import com.kuit.ourmenu.ui.theme.Neutral300
+import com.kuit.ourmenu.ui.theme.Neutral500
+import com.kuit.ourmenu.ui.theme.Neutral700
+import com.kuit.ourmenu.ui.theme.ourMenuTypography
+
+@Composable
+fun LoginTextField(
+    placeholder: String,
+    input: String,
+    onTextChange: (String) -> Unit,
+    visualTransformation: VisualTransformation = VisualTransformation.None,
+) {
+    CustomTextField(
+        modifier =
+            Modifier
+                .fillMaxWidth()
+                .height(44.dp)
+                .border(1.dp, Neutral300, RoundedCornerShape(8.dp)),
+        text = input,
+        onTextChange = onTextChange,
+        shape = RoundedCornerShape(8.dp),
+        paddingValues = PaddingValues(28.dp, 12.dp),
+        containerColor = Neutral100,
+        placeHolder = {
+            Text(
+                text = placeholder,
+                style = ourMenuTypography().pretendard_700_12,
+                color = Neutral500,
+            )
+        },
+        textStyle = ourMenuTypography().pretendard_500_14.copy(color = Neutral700),
+        visualTransformation = visualTransformation,
+    )
+}
diff --git a/app/src/main/java/com/kuit/ourmenu/ui/onboarding/component/OnboardingTopAppBar.kt b/app/src/main/java/com/kuit/ourmenu/ui/onboarding/component/OnboardingTopAppBar.kt
new file mode 100644
index 0000000..042dda8
--- /dev/null
+++ b/app/src/main/java/com/kuit/ourmenu/ui/onboarding/component/OnboardingTopAppBar.kt
@@ -0,0 +1,47 @@
+package com.kuit.ourmenu.ui.onboarding.component
+
+import androidx.compose.foundation.layout.size
+import androidx.compose.material3.CenterAlignedTopAppBar
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.vectorResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.kuit.ourmenu.R
+import com.kuit.ourmenu.ui.theme.Neutral700
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun OnboardingTopAppBar() {
+    CenterAlignedTopAppBar(
+        title = {
+            Icon(
+                imageVector = ImageVector.vectorResource(R.drawable.ic_top_bar_logo),
+                contentDescription = "상단바 로고",
+                tint = Color.Unspecified, // 이거 설정 안하면 검정색으로 보임
+                modifier = Modifier.size(44.dp)
+            )
+        },
+        navigationIcon = {
+            IconButton(onClick = { TODO("뒤로가기 구현") }) {
+                Icon(
+                    painter = painterResource(R.drawable.ic_top_bar_back),
+                    contentDescription = "뒤로가기 버튼",
+                    tint = Neutral700
+                )
+            }
+        },
+    )
+}
+
+@Preview
+@Composable
+private fun OnboardingTopAppBarPreview() {
+    OnboardingTopAppBar()
+}
diff --git a/app/src/main/java/com/kuit/ourmenu/ui/onboarding/screen/LandingScreen.kt b/app/src/main/java/com/kuit/ourmenu/ui/onboarding/screen/LandingScreen.kt
new file mode 100644
index 0000000..a7c57ea
--- /dev/null
+++ b/app/src/main/java/com/kuit/ourmenu/ui/onboarding/screen/LandingScreen.kt
@@ -0,0 +1,107 @@
+package com.kuit.ourmenu.ui.onboarding.screen
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.kuit.ourmenu.R
+import com.kuit.ourmenu.ui.common.BottomFullWidthButton
+import com.kuit.ourmenu.ui.onboarding.component.BottomFullWidthBorderButton
+import com.kuit.ourmenu.ui.theme.Neutral500
+import com.kuit.ourmenu.ui.theme.Neutral700
+import com.kuit.ourmenu.ui.theme.Neutral900
+import com.kuit.ourmenu.ui.theme.NeutralWhite
+import com.kuit.ourmenu.ui.theme.Primary500Main
+import com.kuit.ourmenu.ui.theme.ourMenuTypography
+
+@Composable
+fun LandingScreen(modifier: Modifier = Modifier) {
+    Column(
+        modifier =
+            Modifier
+                .fillMaxSize()
+                .padding(horizontal = 20.dp),
+        horizontalAlignment = Alignment.CenterHorizontally,
+    ) {
+        Image(
+            painter = painterResource(R.drawable.ic_top_bar_logo),
+            contentDescription = null,
+            modifier = Modifier.padding(top = 112.dp).size(78.dp),
+        )
+
+        Text(
+            text = stringResource(R.string.ourmenu),
+            style = ourMenuTypography().pretendard_700_32,
+            color = Primary500Main,
+        )
+
+        Text(
+            text = stringResource(R.string.landing_introduce_title),
+            style = ourMenuTypography().pretendard_600_18,
+            color = Neutral900,
+            modifier = Modifier.padding(top = 72.dp),
+        )
+        Text(
+            text = stringResource(R.string.landing_introduce_content),
+            style = ourMenuTypography().pretendard_400_14,
+            color = Neutral700,
+            modifier = Modifier.padding(top = 8.dp),
+        )
+
+        Spacer(modifier = Modifier.height(44.dp))
+
+        BottomFullWidthButton(modifier = Modifier, containerColor = Primary500Main, contentColor = NeutralWhite, text = stringResource(R.string.login)) {
+            // TODO: onClick 작성
+        }
+
+        Spacer(modifier = Modifier.height(16.dp))
+
+        BottomFullWidthBorderButton {
+            // TODO: onClick 작성
+        }
+    }
+
+    Box(
+        modifier =
+            Modifier
+                .fillMaxSize()
+                .padding(bottom = 18.dp),
+        contentAlignment = Alignment.BottomCenter,
+    ) {
+        Row {
+            Text(
+                text = stringResource(R.string.ourmenu),
+                style = ourMenuTypography().pretendard_700_14,
+                color = Primary500Main,
+            )
+
+            Spacer(modifier = Modifier.width(4.dp))
+
+            Text(
+                text = stringResource(R.string.copy_right),
+                style = ourMenuTypography().pretendard_400_12,
+                color = Neutral500,
+            )
+        }
+    }
+}
+
+@Composable
+@Preview(showBackground = true)
+private fun LandingScreenPreview() {
+    LandingScreen()
+}
diff --git a/app/src/main/java/com/kuit/ourmenu/ui/onboarding/screen/LoginScreen.kt b/app/src/main/java/com/kuit/ourmenu/ui/onboarding/screen/LoginScreen.kt
new file mode 100644
index 0000000..dc800ac
--- /dev/null
+++ b/app/src/main/java/com/kuit/ourmenu/ui/onboarding/screen/LoginScreen.kt
@@ -0,0 +1,190 @@
+package com.kuit.ourmenu.ui.onboarding.screen
+
+import androidx.compose.foundation.border
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Checkbox
+import androidx.compose.material3.CheckboxDefaults
+import androidx.compose.material3.Scaffold
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.input.PasswordVisualTransformation
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.kuit.ourmenu.R
+import com.kuit.ourmenu.ui.common.BottomFullWidthButton
+import com.kuit.ourmenu.ui.onboarding.component.BottomFullWidthBorderButton
+import com.kuit.ourmenu.ui.onboarding.component.LoginTextField
+import com.kuit.ourmenu.ui.onboarding.component.OnboardingTopAppBar
+import com.kuit.ourmenu.ui.theme.Neutral100
+import com.kuit.ourmenu.ui.theme.Neutral300
+import com.kuit.ourmenu.ui.theme.Neutral500
+import com.kuit.ourmenu.ui.theme.NeutralWhite
+import com.kuit.ourmenu.ui.theme.Primary500Main
+import com.kuit.ourmenu.ui.theme.ourMenuTypography
+
+@Composable
+fun LoginScreen(modifier: Modifier = Modifier) {
+    var email by rememberSaveable { mutableStateOf("") }
+    var password by rememberSaveable { mutableStateOf("") }
+    var isChecked by rememberSaveable { mutableStateOf(false) }
+
+    Scaffold(
+        topBar = {
+            OnboardingTopAppBar()
+        },
+        content = { innerPadding ->
+            Column(
+                modifier =
+                    Modifier
+                        .fillMaxSize()
+                        .padding(innerPadding)
+                        .padding(20.dp, 48.dp),
+                horizontalAlignment = Alignment.CenterHorizontally,
+            ) {
+                Box(
+                    modifier = Modifier.height(48.dp),
+                    contentAlignment = Alignment.Center,
+                ) {
+                    Text(
+                        text = stringResource(R.string.ourmenu),
+                        style = ourMenuTypography().pretendard_700_32,
+                        color = Primary500Main,
+                    )
+                }
+
+                Spacer(modifier = Modifier.height(56.dp))
+
+                LoginTextField(
+                    placeholder = stringResource(R.string.email),
+                    input = email,
+                    onTextChange = { email = it },
+                )
+
+                Spacer(modifier = Modifier.height(8.dp))
+
+                LoginTextField(
+                    placeholder = stringResource(R.string.password),
+                    input = password,
+                    onTextChange = { password = it },
+                    visualTransformation = PasswordVisualTransformation(),
+                )
+
+                Row(
+                    modifier = Modifier.fillMaxWidth().padding(top = 12.dp),
+                    horizontalArrangement = Arrangement.SpaceBetween,
+                    verticalAlignment = Alignment.CenterVertically,
+                ) {
+                    Row(
+                        verticalAlignment = Alignment.CenterVertically,
+                    ) {
+                        Checkbox(
+                            checked = isChecked,
+                            onCheckedChange = { isChecked = it },
+                            modifier =
+                                Modifier
+                                    .border(1.dp, Neutral300, RoundedCornerShape(4.dp))
+                                    .size(24.dp),
+                            colors =
+                                CheckboxDefaults.colors(
+                                    checkmarkColor = NeutralWhite,
+                                    checkedColor = Primary500Main,
+                                    uncheckedColor = Neutral100,
+                                ),
+                        )
+
+                        Text(
+                            text = stringResource(R.string.see_password),
+                            style = ourMenuTypography().pretendard_500_14,
+                            color = Neutral500,
+                            modifier = Modifier.padding(start = 8.dp),
+                        )
+                    }
+
+                    Text(
+                        text = stringResource(R.string.forgot_password),
+                        style = ourMenuTypography().pretendard_500_12,
+                        color = Neutral500,
+                        modifier =
+                            Modifier.clickable {
+                                // TODO: 비밀번호 찾기 동작 구현
+                            },
+                    )
+                }
+
+                Spacer(modifier = Modifier.height(24.dp))
+
+                BottomFullWidthButton(
+                    modifier = Modifier,
+                    containerColor = Primary500Main,
+                    contentColor = NeutralWhite,
+                    text = stringResource(R.string.login),
+                ) {
+                    // TODO: onClick 작성
+                }
+
+                Spacer(modifier = Modifier.height(104.dp))
+
+                Text(
+                    text = stringResource(R.string.have_account),
+                    style = ourMenuTypography().pretendard_500_14,
+                    color = Neutral500,
+                )
+
+                Spacer(modifier = Modifier.height(24.dp))
+
+                BottomFullWidthBorderButton {
+                    // TODO: onClick 작성
+                }
+            }
+
+            Box(
+                modifier =
+                    Modifier
+                        .fillMaxSize()
+                        .padding(bottom = 18.dp),
+                contentAlignment = Alignment.BottomCenter,
+            ) {
+                Row {
+                    Text(
+                        text = stringResource(R.string.ourmenu),
+                        style = ourMenuTypography().pretendard_700_14,
+                        color = Primary500Main,
+                    )
+
+                    Spacer(modifier = Modifier.width(4.dp))
+
+                    Text(
+                        text = stringResource(R.string.copy_right),
+                        style = ourMenuTypography().pretendard_400_12,
+                        color = Neutral500,
+                    )
+                }
+            }
+        },
+    )
+}
+
+@Preview(showBackground = true)
+@Composable
+private fun LoginScreenPreview() {
+    LoginScreen()
+}
diff --git a/app/src/main/java/com/kuit/ourmenu/ui/onboarding/screen/SplashScreen.kt b/app/src/main/java/com/kuit/ourmenu/ui/onboarding/screen/SplashScreen.kt
new file mode 100644
index 0000000..5558a6a
--- /dev/null
+++ b/app/src/main/java/com/kuit/ourmenu/ui/onboarding/screen/SplashScreen.kt
@@ -0,0 +1,63 @@
+package com.kuit.ourmenu.ui.onboarding.screen
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.kuit.ourmenu.R
+import com.kuit.ourmenu.ui.theme.NeutralWhite
+import com.kuit.ourmenu.ui.theme.Primary500Main
+import com.kuit.ourmenu.ui.theme.ourMenuTypography
+import kotlinx.coroutines.delay
+
+@Composable
+fun SplashScreen(toHome: () -> Unit) {
+    LaunchedEffect(Unit) {
+        delay(2000)
+        toHome()
+    }
+
+    Column(
+        modifier = Modifier.fillMaxSize().background(Primary500Main),
+        horizontalAlignment = Alignment.CenterHorizontally,
+        verticalArrangement = Arrangement.Center,
+    ) {
+        Image(
+            painter = painterResource(R.drawable.ic_splash_logo),
+            contentDescription = "splash 아이콘",
+            modifier =
+                Modifier
+                    .padding(bottom = 12.dp)
+                    .size(140.dp),
+        )
+
+        Text(
+            text = stringResource(R.string.ourmenu),
+            style = ourMenuTypography().pretendard_700_32,
+            color = NeutralWhite,
+        )
+    }
+}
+
+@Composable
+@Preview(showBackground = true)
+private fun SplashScreenPreview() {
+    var showSplash by remember { mutableStateOf(true) }
+    SplashScreen { showSplash = true }
+}
diff --git a/app/src/main/java/com/kuit/ourmenu/ui/searchmenu/component/SearchBottomSheetContent.kt b/app/src/main/java/com/kuit/ourmenu/ui/searchmenu/component/SearchBottomSheetContent.kt
new file mode 100644
index 0000000..656408b
--- /dev/null
+++ b/app/src/main/java/com/kuit/ourmenu/ui/searchmenu/component/SearchBottomSheetContent.kt
@@ -0,0 +1,41 @@
+package com.kuit.ourmenu.ui.searchmenu.component
+
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.material3.HorizontalDivider
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.kuit.ourmenu.ui.common.bottomsheet.MenuInfoBottomSheetContent
+import com.kuit.ourmenu.ui.menuinfo.dummy.MenuInfoDummyData
+
+@Composable
+fun SearchBottomSheetContent(
+    modifier: Modifier = Modifier,
+    dataList: List<MenuInfoDummyData>
+) {
+    LazyColumn(
+        modifier = modifier
+    ) {
+        items(dataList.size) { index ->
+            MenuInfoBottomSheetContent(
+                modifier = Modifier.padding(vertical = 20.dp)
+            )
+            if (index != dataList.size - 1) {
+                HorizontalDivider()
+            }
+        }
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+private fun SearchBottomSheetContentPreview() {
+    SearchBottomSheetContent(
+        dataList = listOf(
+            MenuInfoDummyData.dummyData,
+            MenuInfoDummyData.dummyData,
+        )
+    )
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/kuit/ourmenu/ui/searchmenu/component/SearchHistory.kt b/app/src/main/java/com/kuit/ourmenu/ui/searchmenu/component/SearchHistory.kt
new file mode 100644
index 0000000..fe931d7
--- /dev/null
+++ b/app/src/main/java/com/kuit/ourmenu/ui/searchmenu/component/SearchHistory.kt
@@ -0,0 +1,155 @@
+package com.kuit.ourmenu.ui.searchmenu.component
+
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.wrapContentHeight
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.rememberLazyListState
+import androidx.compose.material3.HorizontalDivider
+import androidx.compose.material3.Icon
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import com.kuit.ourmenu.R
+import com.kuit.ourmenu.ui.searchmenu.model.SearchHistoryData
+import com.kuit.ourmenu.ui.theme.Neutral300
+import com.kuit.ourmenu.ui.theme.Neutral500
+import com.kuit.ourmenu.ui.theme.Neutral700
+import com.kuit.ourmenu.ui.theme.ourMenuTypography
+
+@Composable
+fun SearchHistoryList(
+    modifier: Modifier = Modifier,
+    onClick: () -> Unit = {},
+    historyList: List<SearchHistoryData>
+) {
+    val lazyListState = rememberLazyListState()
+
+    Column(
+        modifier = modifier
+            .fillMaxWidth()
+    ) {
+        Text(
+            text = "최근 검색",
+            style = ourMenuTypography().pretendard_600_16.copy(
+                lineHeight = 20.sp,
+                color = Neutral700
+            ),
+            modifier = modifier
+                .padding(bottom = 4.dp)
+                .padding(horizontal = 28.dp)
+        )
+        LazyColumn(
+            state = lazyListState
+        ) {
+
+            items(historyList.size) { index ->
+                SearchHistoryItem(
+                    historyData = historyList[index],
+                    onClick = onClick
+                )
+
+                if (index != historyList.size - 1) {
+                    HorizontalDivider()
+                }
+            }
+        }
+    }
+}
+
+@Composable
+fun SearchHistoryItem(
+    modifier: Modifier = Modifier,
+    historyData: SearchHistoryData,
+    onClick: () -> Unit
+) {
+
+    Column(
+        modifier = modifier
+            .fillMaxWidth()
+            .clickable(onClick = onClick)
+            .padding(vertical = 20.dp, horizontal = 28.dp)
+    ) {
+        Text(
+            text = historyData.menuTitle,
+            style = ourMenuTypography().pretendard_600_16.copy(
+                lineHeight = 20.sp,
+                color = Neutral700
+            ),
+            modifier = Modifier.padding(bottom = 8.dp)
+        )
+
+        Row(
+            modifier = Modifier
+                .fillMaxWidth()
+        ) {
+            Icon(
+                painter = painterResource(R.drawable.ic_fill_map_20),
+                contentDescription = "location info",
+                tint = Color.Unspecified
+            )
+            Column(
+                modifier = Modifier.padding(start = 4.dp)
+            ) {
+                Text(
+                    text = historyData.storeTitle,
+                    style = ourMenuTypography().pretendard_600_14.copy(
+                        lineHeight = 20.sp,
+                        color = Neutral500
+                    ),
+                    textAlign = TextAlign.Center,
+                    modifier = Modifier
+                        .height(20.dp)
+                        .wrapContentHeight(align = Alignment.CenterVertically)
+                )
+                Text(
+                    text = stringResource(R.string.neungdongro_112),
+                    style = ourMenuTypography().pretendard_600_14.copy(
+                        lineHeight = 20.sp,
+                        color = Neutral500
+                    ),
+                    modifier = Modifier
+                        .height(20.dp)
+                        .wrapContentHeight(align = Alignment.CenterVertically)
+                        .padding(top = 2.dp)
+                )
+            }
+        }
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+private fun SearchHistoryPreview() {
+    SearchHistoryList(
+        historyList = listOf(
+            SearchHistoryData(
+                menuTitle = "피자",
+                storeTitle = "피자헛",
+                address = "서울특별시 강남구 역삼동 123-4"
+            ),
+            SearchHistoryData(
+                menuTitle = "치킨",
+                storeTitle = "굽네치킨",
+                address = "서울특별시 강남구 역삼동 123-4"
+            ),
+            SearchHistoryData(
+                menuTitle = "햄버거",
+                storeTitle = "맥도날드",
+                address = "서울특별시 강남구 역삼동 123-4"
+            )
+        ),
+    )
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/kuit/ourmenu/ui/searchmenu/model/SearchHistoryData.kt b/app/src/main/java/com/kuit/ourmenu/ui/searchmenu/model/SearchHistoryData.kt
new file mode 100644
index 0000000..f4d23c5
--- /dev/null
+++ b/app/src/main/java/com/kuit/ourmenu/ui/searchmenu/model/SearchHistoryData.kt
@@ -0,0 +1,7 @@
+package com.kuit.ourmenu.ui.searchmenu.model
+
+data class SearchHistoryData(
+    val storeTitle: String,
+    val menuTitle: String,
+    val address: String
+)
diff --git a/app/src/main/java/com/kuit/ourmenu/ui/searchmenu/screen/SearchMenuScreen.kt b/app/src/main/java/com/kuit/ourmenu/ui/searchmenu/screen/SearchMenuScreen.kt
new file mode 100644
index 0000000..e6652de
--- /dev/null
+++ b/app/src/main/java/com/kuit/ourmenu/ui/searchmenu/screen/SearchMenuScreen.kt
@@ -0,0 +1,145 @@
+package com.kuit.ourmenu.ui.searchmenu.screen
+
+import androidx.activity.compose.BackHandler
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.interaction.collectIsFocusedAsState
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.BottomSheetScaffold
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.rememberBottomSheetScaffoldState
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.layout.onGloballyPositioned
+import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.platform.LocalFocusManager
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.kuit.ourmenu.R
+import com.kuit.ourmenu.ui.common.GoToMapButton
+import com.kuit.ourmenu.ui.common.SearchTextField
+import com.kuit.ourmenu.ui.common.bottomsheet.BottomSheetDragHandle
+import com.kuit.ourmenu.ui.common.topappbar.OurMenuAddButtonTopAppBar
+import com.kuit.ourmenu.ui.menuinfo.dummy.MenuInfoDummyData
+import com.kuit.ourmenu.ui.searchmenu.component.SearchBottomSheetContent
+import com.kuit.ourmenu.ui.searchmenu.component.SearchHistoryList
+import com.kuit.ourmenu.ui.theme.NeutralWhite
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun SearchMenuScreen(modifier: Modifier = Modifier) {
+
+    val scaffoldState = rememberBottomSheetScaffoldState()
+    var showBottomSheet by rememberSaveable { mutableStateOf(false) }
+    var dragHandleHeight by remember { mutableStateOf(0.dp) }
+    var bottomSheetPeekHeight by remember { mutableStateOf(0.dp) }
+    var showSearchBackground by rememberSaveable { mutableStateOf(false) }
+    var searchText by rememberSaveable { mutableStateOf("") }
+    var searchActionDone by rememberSaveable { mutableStateOf(false) }
+    val interactionSource = remember { MutableInteractionSource() }
+    val searchBarFocused by interactionSource.collectIsFocusedAsState()
+    val focusManager = LocalFocusManager.current
+
+    val density = LocalDensity.current
+
+    LaunchedEffect(searchBarFocused) {
+        if (searchBarFocused) {
+            showSearchBackground = true
+            showBottomSheet = false
+        }
+    }
+
+    BackHandler(enabled = showSearchBackground) {
+        if (searchBarFocused) focusManager.clearFocus()
+        searchActionDone = false
+        showSearchBackground = false
+        searchText = ""
+    }
+
+    BottomSheetScaffold(
+        scaffoldState = scaffoldState,
+        modifier = Modifier.fillMaxWidth(),
+        topBar = { OurMenuAddButtonTopAppBar() },
+        sheetContent = {
+            SearchBottomSheetContent(
+                modifier = Modifier
+                    .onGloballyPositioned { coordinates ->
+                        val heightPx = coordinates.size.height
+                        bottomSheetPeekHeight = density.run {
+                            heightPx.toDp() + dragHandleHeight
+                        }
+                    },
+                dataList = listOf(
+                    MenuInfoDummyData.dummyData,
+                    MenuInfoDummyData.dummyData,
+                )
+            )
+        },
+        sheetContainerColor = NeutralWhite,
+        sheetShape = RoundedCornerShape(topStart = 12.dp, topEnd = 12.dp),
+        sheetDragHandle = {
+            BottomSheetDragHandle(
+                modifier = Modifier.onGloballyPositioned { coordinates ->
+                    dragHandleHeight = density.run { coordinates.size.height.toDp() }
+                }
+            )
+        },
+        sheetPeekHeight = bottomSheetPeekHeight, // TODO : 아이템 개수에 따라 높이 조절 필요
+        containerColor = NeutralWhite,
+    ) { innerPadding ->
+        Box(
+            modifier = Modifier
+                .fillMaxSize()
+                .padding(innerPadding)
+        ) {
+            if (!showSearchBackground) {
+                // TODO : 지도
+            } else {
+                SearchHistoryList(
+                    historyList = emptyList()
+                )
+            }
+
+            SearchTextField(
+                modifier = Modifier.padding(top = 12.dp, start = 20.dp, end = 20.dp),
+                text = searchText,
+                onTextChange = {
+                    searchText = it
+                    showSearchBackground = true
+                    showBottomSheet = false
+                },
+                placeHolder = R.string.search_place_holder,
+                interactionSource = interactionSource
+            ) {
+                // onSearch 함수
+                if (searchBarFocused) focusManager.clearFocus()
+                searchActionDone = true
+
+            }
+
+            GoToMapButton(
+                modifier = Modifier
+                    .align(Alignment.BottomEnd)
+                    .padding(bottom = 16.dp, end = 20.dp),
+                onClick = { /* TODO : Go To Map Button Click Event */ },
+            )
+        }
+    }
+
+}
+
+@Preview(showBackground = true)
+@Composable
+private fun SearchMenuScreenPreview() {
+    SearchMenuScreen()
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/kuit/ourmenu/ui/theme/Type.kt b/app/src/main/java/com/kuit/ourmenu/ui/theme/Type.kt
index d66750a..023fc01 100644
--- a/app/src/main/java/com/kuit/ourmenu/ui/theme/Type.kt
+++ b/app/src/main/java/com/kuit/ourmenu/ui/theme/Type.kt
@@ -8,6 +8,7 @@ import com.kuit.ourmenu.R
 
 val PretendardBold = FontFamily(Font(R.font.bold))
 val PretendardSemiBold = FontFamily(Font(R.font.semibold))
+val PretendardMedium = FontFamily(Font(R.font.medium))
 val PretendardRegular = FontFamily(Font(R.font.regular))
 
 data class OurMenuTypography(
@@ -16,42 +17,107 @@ data class OurMenuTypography(
             fontFamily = PretendardBold,
             fontSize = 48.sp,
         ),
+    val pretendard_700_32: TextStyle =
+        TextStyle(
+            fontFamily = PretendardBold,
+            fontSize = 32.sp,
+        ),
+    val pretendard_700_24: TextStyle =
+        TextStyle(
+            fontFamily = PretendardBold,
+            fontSize = 24.sp,
+        ),
+    val pretendard_700_20: TextStyle =
+        TextStyle(
+            fontFamily = PretendardBold,
+            fontSize = 20.sp,
+        ),
+    val pretendard_700_18: TextStyle =
+        TextStyle(
+            fontFamily = PretendardBold,
+            fontSize = 18.sp,
+        ),
+    val pretendard_700_16: TextStyle =
+        TextStyle(
+            fontFamily = PretendardBold,
+            fontSize = 16.sp,
+        ),
+    val pretendard_700_14: TextStyle =
+        TextStyle(
+            fontFamily = PretendardBold,
+            fontSize = 14.sp,
+        ),
+    val pretendard_700_12: TextStyle =
+        TextStyle(
+            fontFamily = PretendardBold,
+            fontSize = 12.sp,
+        ),
     val pretendard_600_32: TextStyle =
         TextStyle(
             fontFamily = PretendardSemiBold,
             fontSize = 32.sp,
         ),
+    val pretendard_600_18: TextStyle =
+        TextStyle(
+            fontFamily = PretendardSemiBold,
+            fontSize = 18.sp,
+        ),
+    val pretendard_600_16: TextStyle =
+        TextStyle(
+            fontFamily = PretendardSemiBold,
+            fontSize = 16.sp,
+        ),
+    val pretendard_600_14: TextStyle =
+        TextStyle(
+            fontFamily = PretendardSemiBold,
+            fontSize = 14.sp,
+        ),
+    val pretendard_600_12: TextStyle =
+        TextStyle(
+            fontFamily = PretendardSemiBold,
+            fontSize = 12.sp,
+        ),
     val pretendard_500_28: TextStyle =
         TextStyle(
-            fontFamily = PretendardRegular,
+            fontFamily = PretendardMedium,
             fontSize = 28.sp,
         ),
     val pretendard_500_24: TextStyle =
         TextStyle(
-            fontFamily = PretendardRegular,
+            fontFamily = PretendardMedium,
             fontSize = 24.sp,
         ),
     val pretendard_500_20: TextStyle =
         TextStyle(
-            fontFamily = PretendardRegular,
+            fontFamily = PretendardMedium,
             fontSize = 20.sp,
         ),
     val pretendard_500_18: TextStyle =
         TextStyle(
-            fontFamily = PretendardRegular,
+            fontFamily = PretendardMedium,
             fontSize = 18.sp,
         ),
     val pretendard_500_16: TextStyle =
         TextStyle(
-            fontFamily = PretendardRegular,
+            fontFamily = PretendardMedium,
             fontSize = 16.sp,
         ),
     val pretendard_500_14: TextStyle =
         TextStyle(
-            fontFamily = PretendardRegular,
+            fontFamily = PretendardMedium,
             fontSize = 14.sp,
         ),
     val pretendard_500_12: TextStyle =
+        TextStyle(
+            fontFamily = PretendardMedium,
+            fontSize = 12.sp,
+        ),
+    val pretendard_400_14: TextStyle =
+        TextStyle(
+            fontFamily = PretendardRegular,
+            fontSize = 14.sp,
+        ),
+    val pretendard_400_12: TextStyle =
         TextStyle(
             fontFamily = PretendardRegular,
             fontSize = 12.sp,
diff --git a/app/src/main/java/com/kuit/ourmenu/utils/ExtensionUtil.kt b/app/src/main/java/com/kuit/ourmenu/utils/ExtensionUtil.kt
new file mode 100644
index 0000000..dd4a74f
--- /dev/null
+++ b/app/src/main/java/com/kuit/ourmenu/utils/ExtensionUtil.kt
@@ -0,0 +1,10 @@
+package com.kuit.ourmenu.utils
+
+object ExtensionUtil {
+    fun Int.toWon(): String {
+        val decimalFormat = java.text.DecimalFormat("#,###")
+        val formatted = decimalFormat.format(this)
+
+        return "${formatted}원"
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/res/drawable/ic_addmenu_add_photo.xml b/app/src/main/res/drawable/ic_addmenu_add_photo.xml
new file mode 100644
index 0000000..82f508f
--- /dev/null
+++ b/app/src/main/res/drawable/ic_addmenu_add_photo.xml
@@ -0,0 +1,17 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="36dp"
+    android:height="36dp"
+    android:viewportWidth="36"
+    android:viewportHeight="36">
+  <group>
+    <clip-path
+        android:pathData="M0,0h36v36h-36z"/>
+    <path
+        android:pathData="M13.5,4.5L10.755,7.5H6C4.35,7.5 3,8.85 3,10.5V28.5C3,30.15 4.35,31.5 6,31.5H30C31.65,31.5 33,30.15 33,28.5V10.5C33,8.85 31.65,7.5 30,7.5H25.245L22.5,4.5H13.5ZM18,27C13.86,27 10.5,23.64 10.5,19.5C10.5,15.36 13.86,12 18,12C22.14,12 25.5,15.36 25.5,19.5C25.5,23.64 22.14,27 18,27Z"
+        android:fillColor="#A4A4A6"/>
+    <path
+        android:pathData="M18.862,15.265C18.862,14.768 18.459,14.365 17.962,14.365C17.465,14.365 17.062,14.768 17.062,15.265V18.562H13.765C13.268,18.562 12.865,18.965 12.865,19.462C12.865,19.959 13.268,20.362 13.765,20.362H17.062V23.657C17.062,24.154 17.465,24.557 17.962,24.557C18.459,24.557 18.862,24.154 18.862,23.657V20.362H22.157C22.654,20.362 23.057,19.959 23.057,19.462C23.057,18.965 22.654,18.562 22.157,18.562H18.862V15.265Z"
+        android:fillColor="#A4A4A6"
+        android:fillType="evenOdd"/>
+  </group>
+</vector>
diff --git a/app/src/main/res/drawable/ic_addmenu_noresult.xml b/app/src/main/res/drawable/ic_addmenu_noresult.xml
new file mode 100644
index 0000000..9b49aeb
--- /dev/null
+++ b/app/src/main/res/drawable/ic_addmenu_noresult.xml
@@ -0,0 +1,16 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="54dp"
+    android:height="56dp"
+    android:viewportWidth="54"
+    android:viewportHeight="56">
+  <path
+      android:pathData="M19.57,34.969C27.385,34.969 33.72,28.399 33.72,20.295C33.72,12.19 27.385,5.62 19.57,5.62C11.755,5.62 5.419,12.19 5.419,20.295C5.419,28.399 11.755,34.969 19.57,34.969ZM19.57,40.589C30.378,40.589 39.139,31.503 39.139,20.295C39.139,9.086 30.378,0 19.57,0C8.762,0 0,9.086 0,20.295C0,31.503 8.762,40.589 19.57,40.589Z"
+      android:fillColor="#A4A4A6"
+      android:fillType="evenOdd"/>
+  <path
+      android:pathData="M33.374,38.584L33.282,36.502L35.198,34.515L37.206,34.61L54,52.026L50.168,56L33.374,38.584Z"
+      android:fillColor="#A4A4A6"/>
+  <path
+      android:pathData="M35.198,34.515L34.148,33.426L32.232,35.413L33.282,36.502L35.198,34.515Z"
+      android:fillColor="#A4A4A6"/>
+</vector>
diff --git a/app/src/main/res/drawable/ic_addmenu_x.xml b/app/src/main/res/drawable/ic_addmenu_x.xml
new file mode 100644
index 0000000..edd82a0
--- /dev/null
+++ b/app/src/main/res/drawable/ic_addmenu_x.xml
@@ -0,0 +1,18 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="14dp"
+    android:height="14dp"
+    android:viewportWidth="14"
+    android:viewportHeight="14">
+  <path
+      android:pathData="M2.366,2.365L11.635,11.634"
+      android:strokeWidth="1.8"
+      android:fillColor="#00000000"
+      android:strokeColor="#ffffff"
+      android:strokeLineCap="round"/>
+  <path
+      android:pathData="M11.635,2.365L2.366,11.634"
+      android:strokeWidth="1.8"
+      android:fillColor="#00000000"
+      android:strokeColor="#ffffff"
+      android:strokeLineCap="round"/>
+</vector>
diff --git a/app/src/main/res/drawable/ic_btn_check_white.xml b/app/src/main/res/drawable/ic_btn_check_white.xml
new file mode 100644
index 0000000..386cdf1
--- /dev/null
+++ b/app/src/main/res/drawable/ic_btn_check_white.xml
@@ -0,0 +1,13 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="18dp"
+    android:height="14dp"
+    android:viewportWidth="18"
+    android:viewportHeight="14">
+  <path
+      android:pathData="M2.301,4.983L7.745,12.154L15.701,1.846"
+      android:strokeLineJoin="round"
+      android:strokeWidth="2.8"
+      android:fillColor="#00000000"
+      android:strokeColor="#ffffff"
+      android:strokeLineCap="round"/>
+</vector>
diff --git a/app/src/main/res/drawable/ic_btn_plus_orange.xml b/app/src/main/res/drawable/ic_btn_plus_orange.xml
new file mode 100644
index 0000000..1afb6e3
--- /dev/null
+++ b/app/src/main/res/drawable/ic_btn_plus_orange.xml
@@ -0,0 +1,10 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="16dp"
+    android:height="16dp"
+    android:viewportWidth="16"
+    android:viewportHeight="16">
+  <path
+      android:pathData="M9.38,1.282C9.38,0.619 8.843,0.082 8.18,0.082C7.518,0.082 6.98,0.619 6.98,1.282L6.98,6.619L1.282,6.619C0.619,6.619 0.082,7.156 0.082,7.819C0.082,8.482 0.619,9.019 1.282,9.019H6.98L6.98,14.719C6.98,15.382 7.518,15.919 8.18,15.919C8.843,15.919 9.38,15.382 9.38,14.719V9.019H14.719C15.382,9.019 15.919,8.482 15.919,7.819C15.919,7.156 15.382,6.619 14.719,6.619L9.38,6.619V1.282Z"
+      android:fillColor="#FF5420"
+      android:fillType="evenOdd"/>
+</vector>
diff --git a/app/src/main/res/drawable/ic_close_24_n400.xml b/app/src/main/res/drawable/ic_close_24_n400.xml
new file mode 100644
index 0000000..596b6e3
--- /dev/null
+++ b/app/src/main/res/drawable/ic_close_24_n400.xml
@@ -0,0 +1,18 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+  <path
+      android:pathData="M6,6L18,18"
+      android:strokeWidth="1.8"
+      android:fillColor="#00000000"
+      android:strokeColor="#C2C2C4"
+      android:strokeLineCap="round"/>
+  <path
+      android:pathData="M18,6L6,18"
+      android:strokeWidth="1.8"
+      android:fillColor="#00000000"
+      android:strokeColor="#C2C2C4"
+      android:strokeLineCap="round"/>
+</vector>
diff --git a/app/src/main/res/drawable/ic_dropdown_checked.xml b/app/src/main/res/drawable/ic_dropdown_checked.xml
new file mode 100644
index 0000000..61e554c
--- /dev/null
+++ b/app/src/main/res/drawable/ic_dropdown_checked.xml
@@ -0,0 +1,16 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="20dp"
+    android:height="20dp"
+    android:viewportWidth="20"
+    android:viewportHeight="20">
+  <path
+      android:pathData="M4,0L16,0A4,4 0,0 1,20 4L20,16A4,4 0,0 1,16 20L4,20A4,4 0,0 1,0 16L0,4A4,4 0,0 1,4 0z"
+      android:fillColor="#FF5420"/>
+  <path
+      android:pathData="M5.5,9.357L9.25,14.5L14.5,5.5"
+      android:strokeLineJoin="round"
+      android:strokeWidth="2"
+      android:fillColor="#00000000"
+      android:strokeColor="#ffffff"
+      android:strokeLineCap="round"/>
+</vector>
diff --git a/app/src/main/res/drawable/ic_dropdown_unchecked.xml b/app/src/main/res/drawable/ic_dropdown_unchecked.xml
new file mode 100644
index 0000000..f3fdbfa
--- /dev/null
+++ b/app/src/main/res/drawable/ic_dropdown_unchecked.xml
@@ -0,0 +1,11 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="20dp"
+    android:height="20dp"
+    android:viewportWidth="20"
+    android:viewportHeight="20">
+  <path
+      android:pathData="M4,0.4L16,0.4A3.6,3.6 0,0 1,19.6 4L19.6,16A3.6,3.6 0,0 1,16 19.6L4,19.6A3.6,3.6 0,0 1,0.4 16L0.4,4A3.6,3.6 0,0 1,4 0.4z"
+      android:strokeWidth="0.8"
+      android:fillColor="#F7F7F9"
+      android:strokeColor="#E5E5E7"/>
+</vector>
diff --git a/app/src/main/res/drawable/ic_fill_map_20.xml b/app/src/main/res/drawable/ic_fill_map_20.xml
new file mode 100644
index 0000000..734ac1b
--- /dev/null
+++ b/app/src/main/res/drawable/ic_fill_map_20.xml
@@ -0,0 +1,17 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="20dp"
+    android:height="20dp"
+    android:viewportWidth="20"
+    android:viewportHeight="20">
+  <path
+      android:pathData="M15,8.923C15,12.332 12.272,14.566 10.846,15.501C10.327,15.842 9.673,15.842 9.154,15.501C7.728,14.566 5,12.332 5,8.923C5,6.204 7.239,4 10,4C12.761,4 15,6.204 15,8.923Z"
+      android:strokeLineJoin="round"
+      android:strokeWidth="1.8"
+      android:fillColor="#A4A4A6"
+      android:strokeColor="#A4A4A6"/>
+  <path
+      android:strokeWidth="1"
+      android:pathData="M8.077,8.875a1.923,1.875 0,1 0,3.846 0a1.923,1.875 0,1 0,-3.846 0z"
+      android:fillColor="#ffffff"
+      android:strokeColor="#ffffff"/>
+</vector>
diff --git a/app/src/main/res/drawable/ic_filter_white_16.xml b/app/src/main/res/drawable/ic_filter_white_16.xml
new file mode 100644
index 0000000..bfbef61
--- /dev/null
+++ b/app/src/main/res/drawable/ic_filter_white_16.xml
@@ -0,0 +1,13 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="17dp"
+    android:height="17dp"
+    android:viewportWidth="17"
+    android:viewportHeight="17">
+  <group>
+    <clip-path
+        android:pathData="M0.777,0.965h16v16h-16z"/>
+    <path
+        android:pathData="M1.777,4.465H1.848C1.957,4.894 2.206,5.274 2.556,5.545C2.905,5.817 3.335,5.964 3.777,5.964C4.22,5.964 4.65,5.817 4.999,5.545C5.348,5.274 5.597,4.894 5.706,4.465H15.777C15.91,4.465 16.037,4.412 16.131,4.318C16.225,4.225 16.277,4.097 16.277,3.965C16.277,3.832 16.225,3.705 16.131,3.611C16.037,3.518 15.91,3.465 15.777,3.465H5.706C5.597,3.036 5.348,2.656 4.999,2.384C4.65,2.113 4.22,1.965 3.777,1.965C3.335,1.965 2.905,2.113 2.556,2.384C2.206,2.656 1.957,3.036 1.848,3.465H1.777C1.645,3.465 1.518,3.518 1.424,3.611C1.33,3.705 1.277,3.832 1.277,3.965C1.277,4.097 1.33,4.225 1.424,4.318C1.518,4.412 1.645,4.465 1.777,4.465ZM3.777,2.965C3.975,2.965 4.168,3.024 4.333,3.133C4.497,3.243 4.626,3.399 4.701,3.582C4.777,3.765 4.797,3.966 4.758,4.16C4.72,4.354 4.624,4.532 4.484,4.672C4.345,4.812 4.166,4.907 3.972,4.946C3.778,4.984 3.577,4.964 3.395,4.889C3.212,4.813 3.056,4.685 2.946,4.52C2.836,4.356 2.777,4.163 2.777,3.965C2.777,3.7 2.883,3.445 3.07,3.258C3.258,3.07 3.512,2.965 3.777,2.965ZM15.777,8.465H15.706C15.597,8.036 15.348,7.656 14.999,7.384C14.65,7.113 14.22,6.965 13.777,6.965C13.335,6.965 12.905,7.113 12.556,7.384C12.206,7.656 11.958,8.036 11.848,8.465H1.777C1.645,8.465 1.518,8.518 1.424,8.611C1.33,8.705 1.277,8.832 1.277,8.965C1.277,9.097 1.33,9.225 1.424,9.318C1.518,9.412 1.645,9.465 1.777,9.465H11.848C11.958,9.894 12.206,10.274 12.556,10.545C12.905,10.817 13.335,10.964 13.777,10.964C14.22,10.964 14.65,10.817 14.999,10.545C15.348,10.274 15.597,9.894 15.706,9.465H15.777C15.91,9.465 16.037,9.412 16.131,9.318C16.225,9.225 16.277,9.097 16.277,8.965C16.277,8.832 16.225,8.705 16.131,8.611C16.037,8.518 15.91,8.465 15.777,8.465ZM13.777,9.965C13.58,9.965 13.386,9.906 13.222,9.796C13.057,9.686 12.929,9.53 12.854,9.348C12.778,9.165 12.758,8.964 12.797,8.77C12.835,8.576 12.93,8.398 13.07,8.258C13.21,8.118 13.388,8.023 13.582,7.984C13.776,7.945 13.977,7.965 14.16,8.041C14.343,8.117 14.499,8.245 14.609,8.409C14.719,8.574 14.777,8.767 14.777,8.965C14.777,9.23 14.672,9.484 14.484,9.672C14.297,9.86 14.043,9.965 13.777,9.965ZM15.777,13.465H10.706C10.597,13.036 10.348,12.656 9.999,12.384C9.65,12.113 9.22,11.965 8.777,11.965C8.335,11.965 7.905,12.113 7.556,12.384C7.206,12.656 6.957,13.036 6.848,13.465H1.777C1.645,13.465 1.518,13.517 1.424,13.611C1.33,13.705 1.277,13.832 1.277,13.965C1.277,14.097 1.33,14.225 1.424,14.318C1.518,14.412 1.645,14.465 1.777,14.465H6.848C6.957,14.894 7.206,15.274 7.556,15.545C7.905,15.817 8.335,15.964 8.777,15.964C9.22,15.964 9.65,15.817 9.999,15.545C10.348,15.274 10.597,14.894 10.706,14.465H15.777C15.91,14.465 16.037,14.412 16.131,14.318C16.225,14.225 16.277,14.097 16.277,13.965C16.277,13.832 16.225,13.705 16.131,13.611C16.037,13.517 15.91,13.465 15.777,13.465ZM8.777,14.965C8.58,14.965 8.386,14.906 8.222,14.796C8.057,14.686 7.929,14.53 7.853,14.347C7.778,14.165 7.758,13.964 7.797,13.77C7.835,13.576 7.93,13.398 8.07,13.258C8.21,13.118 8.388,13.023 8.582,12.984C8.776,12.946 8.977,12.965 9.16,13.041C9.343,13.117 9.499,13.245 9.609,13.409C9.719,13.574 9.777,13.767 9.777,13.965C9.777,14.23 9.672,14.484 9.484,14.672C9.297,14.859 9.043,14.965 8.777,14.965Z"
+        android:fillColor="#ffffff"/>
+  </group>
+</vector>
diff --git a/app/src/main/res/drawable/ic_home_dialog_touch.xml b/app/src/main/res/drawable/ic_home_dialog_touch.xml
new file mode 100644
index 0000000..5268369
--- /dev/null
+++ b/app/src/main/res/drawable/ic_home_dialog_touch.xml
@@ -0,0 +1,11 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="72dp"
+    android:height="32dp"
+    android:viewportWidth="72"
+    android:viewportHeight="32">
+  <path
+      android:strokeWidth="1"
+      android:pathData="M59.746,27.483L59.615,27.418L59.47,27.434C58.987,27.486 58.497,27.513 58,27.513H14C6.544,27.513 0.5,21.469 0.5,14.013C0.5,6.557 6.544,0.513 14,0.513H58C65.456,0.513 71.5,6.557 71.5,14.013C71.5,18.299 69.503,22.119 66.386,24.593L66.098,24.822L66.23,25.165L68.411,30.804C68.575,31.229 68.131,31.635 67.723,31.432L59.746,27.483Z"
+      android:fillColor="#ffffff"
+      android:strokeColor="#E5E5E7"/>
+</vector>
diff --git a/app/src/main/res/drawable/ic_home_plus.xml b/app/src/main/res/drawable/ic_home_plus.xml
new file mode 100644
index 0000000..9d0cd9d
--- /dev/null
+++ b/app/src/main/res/drawable/ic_home_plus.xml
@@ -0,0 +1,13 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="44dp"
+    android:height="28dp"
+    android:viewportWidth="44"
+    android:viewportHeight="28">
+  <path
+      android:pathData="M14,0L30,0A14,14 0,0 1,44 14L44,14A14,14 0,0 1,30 28L14,28A14,14 0,0 1,0 14L0,14A14,14 0,0 1,14 0z"
+      android:fillColor="#FF5420"/>
+  <path
+      android:pathData="M23.38,7.282C23.38,6.619 22.843,6.082 22.18,6.082C21.517,6.082 20.98,6.619 20.98,7.282L20.98,12.619L15.281,12.619C14.619,12.619 14.081,13.156 14.081,13.819C14.081,14.482 14.619,15.019 15.281,15.019H20.98L20.98,20.719C20.98,21.382 21.517,21.919 22.18,21.919C22.843,21.919 23.38,21.382 23.38,20.719V15.019H28.719C29.381,15.019 29.919,14.482 29.919,13.819C29.919,13.156 29.381,12.619 28.719,12.619L23.38,12.619V7.282Z"
+      android:fillColor="#ffffff"
+      android:fillType="evenOdd"/>
+</vector>
diff --git a/app/src/main/res/drawable/ic_home_reco_1.png b/app/src/main/res/drawable/ic_home_reco_1.png
new file mode 100644
index 0000000..1308c30
Binary files /dev/null and b/app/src/main/res/drawable/ic_home_reco_1.png differ
diff --git a/app/src/main/res/drawable/ic_home_sub_reco_1.png b/app/src/main/res/drawable/ic_home_sub_reco_1.png
new file mode 100644
index 0000000..fabfff4
Binary files /dev/null and b/app/src/main/res/drawable/ic_home_sub_reco_1.png differ
diff --git a/app/src/main/res/drawable/ic_icon_ellipse.xml b/app/src/main/res/drawable/ic_icon_ellipse.xml
new file mode 100644
index 0000000..bd8941f
--- /dev/null
+++ b/app/src/main/res/drawable/ic_icon_ellipse.xml
@@ -0,0 +1,14 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="34dp"
+    android:height="33dp"
+    android:viewportWidth="34"
+    android:viewportHeight="33">
+  <path
+      android:pathData="M17,16.5m-15,0a15,15 0,1 1,30 0a15,15 0,1 1,-30 0"
+      android:fillColor="#FF5420"/>
+  <path
+      android:pathData="M17,16.5m-14.1,0a14.1,14.1 0,1 1,28.2 0a14.1,14.1 0,1 1,-28.2 0"
+      android:strokeWidth="1.8"
+      android:fillColor="#00000000"
+      android:strokeColor="#ffffff"/>
+</vector>
diff --git a/app/src/main/res/drawable/ic_menu_info_meno_20.xml b/app/src/main/res/drawable/ic_menu_info_meno_20.xml
new file mode 100644
index 0000000..88ad575
--- /dev/null
+++ b/app/src/main/res/drawable/ic_menu_info_meno_20.xml
@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="20dp"
+    android:height="20dp"
+    android:viewportWidth="20"
+    android:viewportHeight="20">
+  <path
+      android:pathData="M4.439,6.558L5.556,7.674L7.71,5.588L6.56,4.439C6.279,4.158 5.898,4 5.5,4C5.102,4 4.721,4.158 4.439,4.439C4.158,4.72 4,5.101 4,5.498C4,5.896 4.158,6.277 4.439,6.558ZM6.21,8.326L13.076,15.186L16,16L15.198,13.068L8.357,6.233L6.21,8.326Z"
+      android:fillColor="#666668"/>
+</vector>
diff --git a/app/src/main/res/drawable/ic_menu_info_nav_24.xml b/app/src/main/res/drawable/ic_menu_info_nav_24.xml
new file mode 100644
index 0000000..467ffb4
--- /dev/null
+++ b/app/src/main/res/drawable/ic_menu_info_nav_24.xml
@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+  <path
+      android:pathData="M15.132,20.999H15.072C14.853,20.985 14.644,20.9 14.478,20.755C14.313,20.611 14.199,20.416 14.156,20.2L12.621,12.641C12.582,12.449 12.488,12.273 12.35,12.135C12.211,11.996 12.036,11.901 11.844,11.862L4.302,10.325C4.086,10.282 3.891,10.168 3.746,10.002C3.601,9.837 3.516,9.627 3.502,9.407C3.488,9.187 3.548,8.969 3.671,8.786C3.794,8.604 3.974,8.467 4.183,8.398L20.124,3.076C20.302,3.002 20.499,2.981 20.689,3.017C20.879,3.054 21.055,3.144 21.194,3.279C21.334,3.413 21.431,3.586 21.475,3.775C21.518,3.964 21.506,4.162 21.439,4.344L16.128,20.32C16.059,20.526 15.924,20.705 15.744,20.827C15.564,20.95 15.349,21.01 15.132,20.999Z"
+      android:fillColor="#FF5420"/>
+</vector>
diff --git a/app/src/main/res/drawable/ic_ourmenu_text_logo.xml b/app/src/main/res/drawable/ic_ourmenu_text_logo.xml
new file mode 100644
index 0000000..f27991e
--- /dev/null
+++ b/app/src/main/res/drawable/ic_ourmenu_text_logo.xml
@@ -0,0 +1,27 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="116dp"
+    android:height="18dp"
+    android:viewportWidth="116"
+    android:viewportHeight="18">
+  <path
+      android:pathData="M111.71,0.52H115.25V11.53C115.25,15.25 112.43,17.73 108.22,17.72C104,17.73 101.21,15.25 101.21,11.53V0.52H104.73V11.25C104.74,13.21 106.12,14.61 108.22,14.63C110.34,14.61 111.72,13.21 111.71,11.25V0.52Z"
+      android:fillColor="#FF5420"/>
+  <path
+      android:pathData="M98.62,0.52V17.48H95.57L88.12,6.7H87.98V17.48H84.46V0.52H87.56L94.96,11.3H95.13V0.52H98.62Z"
+      android:fillColor="#FF5420"/>
+  <path
+      android:pathData="M70.59,17.48V0.52H81.98V3.42H74.11V7.55H81.4V10.45H74.11V14.58H82.01V17.48H70.59Z"
+      android:fillColor="#FF5420"/>
+  <path
+      android:pathData="M49.67,0.52H54.03L58.74,12.02H58.93L63.64,0.52H68V17.48H64.58V6.38H64.43L60,17.41H57.66L53.23,6.33H53.09V17.48H49.67V0.52Z"
+      android:fillColor="#FF5420"/>
+  <path
+      android:pathData="M34.77,17.48V0.52H41.43C45.28,0.52 47.5,2.68 47.5,6.05C47.5,8.37 46.43,10.05 44.5,10.89L48.1,17.48H44.21L40.97,11.46H38.28V17.48H34.77ZM38.28,8.6H40.77C42.85,8.6 43.87,7.75 43.86,6.05C43.87,4.34 42.85,3.41 40.77,3.4H38.28V8.6Z"
+      android:fillColor="#FF5420"/>
+  <path
+      android:pathData="M28.63,0.52H32.17V11.53C32.17,15.25 29.35,17.73 25.14,17.72C20.92,17.73 18.13,15.25 18.13,11.53V0.52H21.65V11.25C21.66,13.21 23.04,14.61 25.14,14.63C27.26,14.61 28.65,13.21 28.63,11.25V0.52Z"
+      android:fillColor="#FF5420"/>
+  <path
+      android:pathData="M15.87,9C15.87,14.54 12.43,17.72 7.95,17.72C3.42,17.72 0,14.52 0,9C0,3.46 3.42,0.28 7.95,0.28C12.43,0.28 15.87,3.46 15.87,9ZM3.59,9C3.59,12.62 5.31,14.59 7.95,14.6C10.56,14.59 12.29,12.62 12.28,9C12.29,5.37 10.56,3.41 7.95,3.4C5.31,3.41 3.59,5.37 3.59,9Z"
+      android:fillColor="#FF5420"/>
+</vector>
diff --git a/app/src/main/res/drawable/ic_searchbar_search.xml b/app/src/main/res/drawable/ic_searchbar_search.xml
new file mode 100644
index 0000000..18a8809
--- /dev/null
+++ b/app/src/main/res/drawable/ic_searchbar_search.xml
@@ -0,0 +1,16 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="18dp"
+    android:height="18dp"
+    android:viewportWidth="18"
+    android:viewportHeight="18">
+  <path
+      android:pathData="M6.523,11.24C9.128,11.24 11.24,9.128 11.24,6.523C11.24,3.918 9.128,1.806 6.523,1.806C3.918,1.806 1.806,3.918 1.806,6.523C1.806,9.128 3.918,11.24 6.523,11.24ZM6.523,13.046C10.126,13.046 13.047,10.126 13.047,6.523C13.047,2.921 10.126,0 6.523,0C2.921,0 0,2.921 0,6.523C0,10.126 2.921,13.046 6.523,13.046Z"
+      android:fillColor="#A4A4A6"
+      android:fillType="evenOdd"/>
+  <path
+      android:pathData="M11.125,12.402L11.094,11.733L11.733,11.094L12.402,11.125L18,16.723L16.723,18L11.125,12.402Z"
+      android:fillColor="#A4A4A6"/>
+  <path
+      android:pathData="M11.733,11.094L11.383,10.744L10.744,11.383L11.094,11.733L11.733,11.094Z"
+      android:fillColor="#A4A4A6"/>
+</vector>
diff --git a/app/src/main/res/drawable/ic_splash_logo.xml b/app/src/main/res/drawable/ic_splash_logo.xml
new file mode 100644
index 0000000..02035b9
--- /dev/null
+++ b/app/src/main/res/drawable/ic_splash_logo.xml
@@ -0,0 +1,24 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="140dp"
+    android:height="140dp"
+    android:viewportWidth="140"
+    android:viewportHeight="140">
+  <path
+      android:pathData="M23.33,0L116.67,0A23.33,23.33 0,0 1,140 23.33L140,116.67A23.33,23.33 0,0 1,116.67 140L23.33,140A23.33,23.33 0,0 1,0 116.67L0,23.33A23.33,23.33 0,0 1,23.33 0z"
+      android:fillColor="#FF5420"/>
+  <path
+      android:pathData="M24.42,46.5C23.8,40.73 27.5,35.39 33.11,33.94L70.15,24.42C72.88,23.72 75.76,24.03 78.28,25.28L111.91,42.1C117.14,44.71 119.62,50.8 117.72,56.33L106.12,90.07C105.39,92.2 104.06,94.07 102.28,95.46L78.21,114.3C74.19,117.44 68.6,117.61 64.4,114.71L33.57,93.45C30.77,91.52 28.96,88.48 28.59,85.1L24.42,46.5Z"
+      android:fillColor="#ffffff"/>
+  <path
+      android:pathData="M83.25,99.17C81.91,99.17 80.84,98.07 80.87,96.74L82.01,42.05C82.02,41.37 82.57,40.83 83.25,40.83C83.92,40.83 84.47,41.37 84.49,42.05L85.63,96.74C85.65,98.07 84.58,99.17 83.25,99.17Z"
+      android:fillColor="#FF5420"/>
+  <path
+      android:pathData="M75.95,99.17C74.62,99.17 73.55,98.07 73.57,96.74L74.71,42.05C74.73,41.37 75.28,40.83 75.95,40.83C76.63,40.83 77.18,41.37 77.2,42.05L78.33,96.74C78.36,98.07 77.29,99.17 75.95,99.17Z"
+      android:fillColor="#FF5420"/>
+  <path
+      android:pathData="M61.37,99.17C60.04,99.17 58.96,98.07 58.99,96.74L60.13,42.05C60.15,41.37 60.7,40.83 61.37,40.83C62.05,40.83 62.6,41.37 62.61,42.05L63.75,96.74C63.78,98.07 62.71,99.17 61.37,99.17Z"
+      android:fillColor="#FF5420"/>
+  <path
+      android:pathData="M68.66,52.72C68.66,58.09 65.4,60.28 61.37,60.28C57.34,60.28 54.08,58.09 54.08,52.72C54.08,47.35 57.34,40.83 61.37,40.83C65.4,40.83 68.66,47.35 68.66,52.72Z"
+      android:fillColor="#FF5420"/>
+</vector>
diff --git a/app/src/main/res/drawable/ic_tag_rice.xml b/app/src/main/res/drawable/ic_tag_rice.xml
new file mode 100644
index 0000000..0f65bba
--- /dev/null
+++ b/app/src/main/res/drawable/ic_tag_rice.xml
@@ -0,0 +1,18 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="16dp"
+    android:height="16dp"
+    android:viewportWidth="16"
+    android:viewportHeight="16">
+  <path
+      android:pathData="M14.6,7C14.821,7 15.001,7.18 14.995,7.401C14.863,12.107 12.378,14 8,14C3.622,14 1.137,12.107 1.006,7.401C0.999,7.18 1.179,7 1.4,7H14.6Z"
+      android:fillColor="#252527"/>
+  <path
+      android:pathData="M3,7.5C3,4.739 5,2.5 8,2.5C11,2.5 13,4.739 13,7.5H3Z"
+      android:strokeWidth="2.8"
+      android:fillColor="#252527"
+      android:strokeColor="#252527"
+      android:strokeLineCap="round"/>
+  <path
+      android:pathData="M6.4,13L9.6,13A0.4,0.4 0,0 1,10 13.4L10,14.6A0.4,0.4 0,0 1,9.6 15L6.4,15A0.4,0.4 0,0 1,6 14.6L6,13.4A0.4,0.4 0,0 1,6.4 13z"
+      android:fillColor="#252527"/>
+</vector>
diff --git a/app/src/main/res/drawable/ic_top_bar_back.xml b/app/src/main/res/drawable/ic_top_bar_back.xml
new file mode 100644
index 0000000..12cf473
--- /dev/null
+++ b/app/src/main/res/drawable/ic_top_bar_back.xml
@@ -0,0 +1,24 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="19dp"
+    android:height="18dp"
+    android:viewportWidth="19"
+    android:viewportHeight="18">
+  <path
+      android:pathData="M6.203,13.729L1.488,9.015"
+      android:strokeWidth="1.2"
+      android:fillColor="#00000000"
+      android:strokeColor="#666668"
+      android:strokeLineCap="round"/>
+  <path
+      android:pathData="M6.203,4.301L1.489,9.015"
+      android:strokeWidth="1.2"
+      android:fillColor="#00000000"
+      android:strokeColor="#666668"
+      android:strokeLineCap="round"/>
+  <path
+      android:pathData="M17.973,9H1.973"
+      android:strokeWidth="1.2"
+      android:fillColor="#00000000"
+      android:strokeColor="#666668"
+      android:strokeLineCap="round"/>
+</vector>
diff --git a/app/src/main/res/drawable/ic_top_bar_logo.xml b/app/src/main/res/drawable/ic_top_bar_logo.xml
new file mode 100644
index 0000000..9b91b31
--- /dev/null
+++ b/app/src/main/res/drawable/ic_top_bar_logo.xml
@@ -0,0 +1,24 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="44dp"
+    android:height="44dp"
+    android:viewportWidth="44"
+    android:viewportHeight="44">
+  <path
+      android:pathData="M7.333,0L36.667,0A7.333,7.333 0,0 1,44 7.333L44,36.667A7.333,7.333 0,0 1,36.667 44L7.333,44A7.333,7.333 0,0 1,0 36.667L0,7.333A7.333,7.333 0,0 1,7.333 0z"
+      android:fillColor="#ffffff"/>
+  <path
+      android:pathData="M7.675,14.613C7.479,12.802 8.642,11.122 10.407,10.668L22.048,7.675C22.904,7.455 23.81,7.551 24.601,7.946L35.171,13.231C36.814,14.053 37.596,15.965 36.998,17.703L33.353,28.307C33.123,28.977 32.703,29.566 32.145,30.003L24.581,35.922C23.318,36.911 21.56,36.964 20.24,36.053L10.55,29.371C9.672,28.765 9.101,27.807 8.986,26.746L7.675,14.613Z"
+      android:fillColor="#FF5420"/>
+  <path
+      android:pathData="M26.163,31.167C25.744,31.167 25.407,30.823 25.415,30.403L25.773,13.215C25.778,13.003 25.951,12.834 26.163,12.834C26.375,12.834 26.549,13.003 26.553,13.215L26.911,30.403C26.92,30.823 26.583,31.167 26.163,31.167Z"
+      android:fillColor="#ffffff"/>
+  <path
+      android:pathData="M23.872,31.167C23.452,31.167 23.115,30.823 23.124,30.403L23.482,13.215C23.486,13.003 23.66,12.834 23.872,12.834C24.084,12.834 24.257,13.003 24.262,13.215L24.62,30.403C24.628,30.823 24.291,31.167 23.872,31.167Z"
+      android:fillColor="#ffffff"/>
+  <path
+      android:pathData="M19.288,31.167C18.869,31.167 18.532,30.823 18.541,30.403L18.899,13.215C18.903,13.003 19.076,12.834 19.288,12.834C19.501,12.834 19.674,13.003 19.678,13.215L20.037,30.403C20.045,30.823 19.708,31.167 19.288,31.167Z"
+      android:fillColor="#ffffff"/>
+  <path
+      android:pathData="M21.58,16.568C21.58,18.256 20.554,18.945 19.288,18.945C18.023,18.945 16.997,18.256 16.997,16.568C16.997,14.88 18.023,12.833 19.288,12.833C20.554,12.833 21.58,14.88 21.58,16.568Z"
+      android:fillColor="#ffffff"/>
+</vector>
diff --git a/app/src/main/res/drawable/icon_vert_white_24.xml b/app/src/main/res/drawable/icon_vert_white_24.xml
new file mode 100644
index 0000000..429b3ca
--- /dev/null
+++ b/app/src/main/res/drawable/icon_vert_white_24.xml
@@ -0,0 +1,15 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="25dp"
+    android:height="24dp"
+    android:viewportWidth="25"
+    android:viewportHeight="24">
+  <path
+      android:pathData="M12.598,6m-2,0a2,2 0,1 1,4 0a2,2 0,1 1,-4 0"
+      android:fillColor="#ffffff"/>
+  <path
+      android:pathData="M12.598,12m-2,0a2,2 0,1 1,4 0a2,2 0,1 1,-4 0"
+      android:fillColor="#ffffff"/>
+  <path
+      android:pathData="M12.598,18m-2,0a2,2 0,1 1,4 0a2,2 0,1 1,-4 0"
+      android:fillColor="#ffffff"/>
+</vector>
diff --git a/app/src/main/res/drawable/img_dummy_menu.png b/app/src/main/res/drawable/img_dummy_menu.png
new file mode 100644
index 0000000..d5fa26e
Binary files /dev/null and b/app/src/main/res/drawable/img_dummy_menu.png differ
diff --git a/app/src/main/res/drawable/img_dummy_pizza.jpg b/app/src/main/res/drawable/img_dummy_pizza.jpg
new file mode 100644
index 0000000..f6783e5
Binary files /dev/null and b/app/src/main/res/drawable/img_dummy_pizza.jpg differ
diff --git a/app/src/main/res/drawable/img_home_popup_thumbsup.png b/app/src/main/res/drawable/img_home_popup_thumbsup.png
new file mode 100644
index 0000000..7ffdf01
Binary files /dev/null and b/app/src/main/res/drawable/img_home_popup_thumbsup.png differ
diff --git a/app/src/main/res/drawable/img_menu_folder_dummy.png b/app/src/main/res/drawable/img_menu_folder_dummy.png
new file mode 100644
index 0000000..7d15ed3
Binary files /dev/null and b/app/src/main/res/drawable/img_menu_folder_dummy.png differ
diff --git a/app/src/main/res/drawable/img_popup_dice.png b/app/src/main/res/drawable/img_popup_dice.png
new file mode 100644
index 0000000..7c3374b
Binary files /dev/null and b/app/src/main/res/drawable/img_popup_dice.png differ
diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml
index 87da0c4..a1d2450 100644
--- a/app/src/main/res/values/strings.xml
+++ b/app/src/main/res/values/strings.xml
@@ -1,3 +1,59 @@
 <resources>
     <string name="app_name">OurMenu</string>
+    <string name="our_ddeokbokki">아워떡볶이</string>
+    <string name="neungdongro_112">서울 광진구 능동로 112</string>
+    <string name="add_menu_by_myself">메뉴 직접 추가하기</string>
+    <string name="next">다음</string>
+    <string name="add_menu">메뉴 추가하기</string>
+    <string name="asterisk">*</string>
+    <string name="menuboard">메뉴판</string>
+    <string name="save_menuboard">메뉴판을 선택해주세요</string>
+    <string name="menu_name">메뉴 이름</string>
+    <string name="type_menu_name">메뉴 이름을 입력해주세요</string>
+    <string name="menu_price">메뉴 가격</string>
+    <string name="type_menu_price">직접 가격을 입력해주세요</string>
+    <string name="store_name">가게 이름</string>
+    <string name="type_store_name">가게 이름을 입력해주세요</string>
+    <string name="resaturant_address">가게 주소</string>
+    <string name="type_store_address">가게 주소를 입력해주세요.</string>
+    <string name="type_restaurant_detailed_address">상세 주소를 입력해주세요.</string>
+    <string name="ourmenu">OURMENU</string>
+    <string name="add_store_and_menu_by_myself">가게와 메뉴 직접 추가</string>
+    <string name="no_result">검색 결과가 없어요!</string>
+    <string name="recent_search">최근 검색</string>
+    <string name="cancel">취소</string>
+    <string name="apply">적용하기</string>
+    <string name="placeholder">placeholder</string>
+    <string name="tag">태그</string>
+    <string name="choose_tag">태그 고르기</string>
+    <string name="memo">메모</string>
+    <string name="icon">아이콘</string>
+    <string name="type_title">제목을 입력해주세요.</string>
+    <string name="type_body">본문을 입력해주세요.</string>
+    <string name="food_tag">음식 태그</string>
+    <string name="multiple_choice_available">중복 선택 가능</string>
+    <string name="landing_introduce_title">아워메뉴에 온 걸 환영해요!</string>
+    <string name="landing_introduce_content">저희와 함께 매일 먹을 한 끼를 고민해요.</string>
+    <string name="login">로그인</string>
+    <string name="make_account">계정 만들기</string>
+    <string name="copy_right">Copyright © OURMENU Corp. All Rights Reserved.</string>
+    <string name="email">E-mail</string>
+    <string name="password">Password</string>
+    <string name="see_password">비밀번호 보기</string>
+    <string name="forgot_password">비밀번호 찾기</string>
+    <string name="have_account">계정이 없으신가요?</string>
+    <string name="go_to_map">지도 앱으로 이동</string>
+
+    <!--menu info-->
+    <string name="menu_folder">Menu Folder</string>
+    <string name="tag_eng">Tag</string>
+    <string name="info">Info</string>
+    <string name="memo_eng">Memo</string>
+    <string name="memo_title">매운 맛 선택 가능!</string>
+    <string name="memo_content">* 덕유산 / ㅇㅇ산 / 한라산\n기본도 정말 매우니 조심하기</string>
+    <string name="menu_info_goto_map">지도보기</string>
+    
+    <!--search menu-->
+    <string name="search_place_holder">가게, 메뉴 이름 검색</string>
+
 </resources>
\ No newline at end of file
diff --git a/build.gradle.kts b/build.gradle.kts
index 952b930..493c6f6 100644
--- a/build.gradle.kts
+++ b/build.gradle.kts
@@ -3,4 +3,5 @@ plugins {
     alias(libs.plugins.android.application) apply false
     alias(libs.plugins.kotlin.android) apply false
     alias(libs.plugins.kotlin.compose) apply false
-}
\ No newline at end of file
+    alias(libs.plugins.dagger.hilt) apply false
+}
diff --git a/gradle/libs.versions.toml b/gradle/libs.versions.toml
index 60cfe30..9cc8270 100644
--- a/gradle/libs.versions.toml
+++ b/gradle/libs.versions.toml
@@ -1,16 +1,29 @@
 [versions]
 agp = "8.7.3"
+converterGson = "2.11.0"
+hiltAndroid = "2.52"
+hiltNavigationCompose = "1.2.0"
 kotlin = "2.0.0"
 coreKtx = "1.10.1"
 junit = "4.13.2"
 junitVersion = "1.1.5"
 espressoCore = "3.5.1"
+kotlinxSerializationJson = "1.6.0"
 lifecycleRuntimeKtx = "2.6.1"
 activityCompose = "1.8.0"
 composeBom = "2024.04.01"
+lifecycleViewmodel = "2.9.0-alpha08"
+lifecycleViewmodelCompose = "2.9.0-alpha08"
+lifecycleRuntimeComposeAndroid = "2.8.7"
+retrofit = "2.11.0"
+navigationCompose = "2.8.6"
 
 [libraries]
 androidx-core-ktx = { group = "androidx.core", name = "core-ktx", version.ref = "coreKtx" }
+androidx-hilt-navigation-compose = { module = "androidx.hilt:hilt-navigation-compose", version.ref = "hiltNavigationCompose" }
+converter-gson = { module = "com.squareup.retrofit2:converter-gson", version.ref = "converterGson" }
+hilt-android = { module = "com.google.dagger:hilt-android", version.ref = "hiltAndroid" }
+hilt-compiler = { module = "com.google.dagger:hilt-compiler", version.ref = "hiltAndroid" }
 junit = { group = "junit", name = "junit", version.ref = "junit" }
 androidx-junit = { group = "androidx.test.ext", name = "junit", version.ref = "junitVersion" }
 androidx-espresso-core = { group = "androidx.test.espresso", name = "espresso-core", version.ref = "espressoCore" }
@@ -24,9 +37,17 @@ androidx-ui-tooling-preview = { group = "androidx.compose.ui", name = "ui-toolin
 androidx-ui-test-manifest = { group = "androidx.compose.ui", name = "ui-test-manifest" }
 androidx-ui-test-junit4 = { group = "androidx.compose.ui", name = "ui-test-junit4" }
 androidx-material3 = { group = "androidx.compose.material3", name = "material3" }
+androidx-lifecycle-viewmodel = { group = "androidx.lifecycle", name = "lifecycle-viewmodel", version.ref = "lifecycleViewmodel" }
+androidx-lifecycle-viewmodel-compose = { group = "androidx.lifecycle", name = "lifecycle-viewmodel-compose", version.ref = "lifecycleViewmodelCompose" }
+androidx-lifecycle-runtime-compose-android = { group = "androidx.lifecycle", name = "lifecycle-runtime-compose-android", version.ref = "lifecycleRuntimeComposeAndroid" }
+kotlinx-serialization-json = { module = "org.jetbrains.kotlinx:kotlinx-serialization-json", version.ref = "kotlinxSerializationJson" }
+retrofit = { module = "com.squareup.retrofit2:retrofit", version.ref = "retrofit" }
+androidx-navigation-compose = { group = "androidx.navigation", name = "navigation-compose", version.ref = "navigationCompose" }
 
 [plugins]
 android-application = { id = "com.android.application", version.ref = "agp" }
+kotlin-serialization = { id = "org.jetbrains.kotlin.plugin.serialization", version.ref = "kotlin" }
 kotlin-android = { id = "org.jetbrains.kotlin.android", version.ref = "kotlin" }
 kotlin-compose = { id = "org.jetbrains.kotlin.plugin.compose", version.ref = "kotlin" }
-
+kotlin-serialization = { id = "org.jetbrains.kotlin.plugin.serialization", version.ref = "kotlin" }
+dagger-hilt = { id = "com.google.dagger.hilt.android", version.ref = "hiltAndroid" }