[feat] 상품 관련 컴포넌트 구현 완료

src/assets/scss/component/modal.scss

@@ -1,11 +1,35 @@
 .modal-overlay {
   position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: rgba(0, 0, 0, 0.5);
+  top: $nav-bar-height;
+  left: $side-bar-width;
+  width: calc(100vw - $side-bar-width);
+  height: calc(100vh - $nav-bar-height);
+  background: rgba(255, 255, 255, 0.7);
   display: flex;
   justify-content: center;
   align-items: center;
+}
+
+.modal-content {
+  @include flex-box(column, center, 20px);
+  width: 400px;
+  padding: 0px 30px;
+  border-radius : 10px;
+  box-shadow: $base-shadow;
+  background-color: white;
+  .modal-main {
+    @include flex-box(column, center, 20px);
+  }
+}
+
+.fade-enter-from, .fade-leave-to {
+  opacity: 0;
+}
+
+.fade-enter-active, .fade-leave-active{
+  transition: all 0.3s;
+}
+
+.fade-enter-to, .fade-leave-from{
+  opacity: 1;
 }

src/assets/scss/item.scss

@@ -0,0 +1,7 @@
+.root-container {
+  @include flex-box(column, space-between, 20px);
+  background: $back-color;
+  width: 100%;
+  min-height:100%;
+  padding: 30px 40px
+}

src/components/common/btn/SuccessWideBtn.vue

@@ -0,0 +1,29 @@
+<template>
+  <button class="success-btn" @click="func">
+    <span>{{ title }}</span>
+  </button>
+</template>
+
+<script>
+export default {
+  name: 'SuccessWideBtnVue',
+  props: {
+    title: String,
+    func: Function
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .success-btn {
+    @include flex-box(row, center, 0px);
+    @include base-button();
+    width: 100%;
+    padding: 10px 0px;
+    background-color: #2C80CE;
+    color: white;
+    border: none;
+    font-size: 18px;
+    font-weight: bold;
+  }
+</style>

src/components/common/btn/ThemeWideBtn.vue

@@ -0,0 +1,29 @@
+<template>
+  <button class="theme-btn" @click="func">
+    <span>{{ title }}</span>
+  </button>
+</template>
+
+<script>
+export default {
+  name: 'ThmemWideBtnVue',
+  props: {
+    title: String,
+    func: Function
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .theme-btn {
+    @include flex-box(row, center, 0px);
+    @include base-button();
+    width: 100%;
+    padding: 10px 0px;
+    background-color: $theme-color;
+    color: white;
+    border: none;
+    font-size: 18px;
+    font-weight: bold;
+  }
+</style>

src/components/common/btn/WarningWideBtn.vue

@@ -0,0 +1,29 @@
+<template>
+  <button class="warning-btn" @click="func">
+    <span>{{ title }}</span>
+  </button>
+</template>
+
+<script>
+export default {
+  name: 'WarningWideBtnVue',
+  props: {
+    title: String,
+    func: Function
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .warning-btn {
+    @include flex-box(row, center, 0px);
+    @include base-button();
+    width: 100%;
+    padding: 10px 0px;
+    background-color: tomato;
+    color: white;
+    border: none;
+    font-size: 18px;
+    font-weight: bold;
+  }
+</style>

src/components/common/info/DescriptionInfo.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="description-input">
+    {{ infoValue }}
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'DescriptionInfoVue',
+  props: {
+    infoValue: String,
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .description-input {
+    @include flex-box(row, start, 0px);
+    width: 100%;
+    height: 120px;
+    overflow-y: auto;
+    padding: 10px 20px;
+    border-radius: 5px;
+    border: $theme-color solid 3px;
+    font-size: 16px;
+    font-weight: bold;
+    white-space: pre-wrap;
+  }
+</style>

src/components/common/info/TitleInfo.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="info-input">
+    <div class="title-box">
+      {{ title }}
+    </div>
+    <div class="info-box">{{ info }}</div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'TitleInfoVue',
+  props: {
+    'title' : String,
+    'info': String,
+  },
+}
+</script>
+
+<style lang='scss' scoped>
+  .info-input {
+    @include flex-box(row, center, 0px);
+    background-color: white;
+    width: 100%;
+    height: 40px;
+
+    .title-box {
+      @include flex-box(row, center, 0px);
+      @include white-text(16px);
+      background: $theme-color;
+      width: 140px;
+      height: 100%;
+      border-top-left-radius: 5px;
+      border-bottom-left-radius: 5px;
+    }
+
+    .info-box {
+      @include flex-box(row, start, 0px);
+      width: 100%;
+      height: 100%;
+      padding: 0px 20px;
+      font-weight: bold;
+      border: $theme-color solid;
+      border-top-right-radius: 5px;
+      border-bottom-right-radius: 5px;
+    }
+  }
+</style>

src/components/common/input/TextAreaInput.vue

@@ -0,0 +1,30 @@
+<template>
+  <textarea 
+    class="text-area-input"
+    :rows="rows" 
+    :placeholder="title"
+    :value="modelValue" 
+    @input="$emit('update:modelValue', $event.target.value)">
+  ></textarea>
+</template>
+
+<script>
+export default {
+  name: 'TextAreaInput',
+  props: {
+    'title': String,
+    'modelValue': String,
+    'rows': String,
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .text-area-input {
+    width: 100%;
+    padding: 10px;
+    font-weight: bold;
+    border : $theme-color 3px solid;
+    border-radius: 10px;
+  }
+</style>

src/components/common/modal/ModalFooter.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="modal-footer">
+    <ThemeWideBtnVue :title="title" :func="func"/>
+    <p>{{ errorMsg }}</p>
+  </div>
+</template>
+
+<script>
+import ThemeWideBtnVue from '../btn/ThemeWideBtn.vue'
+
+export default {
+  name:'ModalFooterVue',
+  components: {
+    ThemeWideBtnVue
+  },
+  props: {
+    title: String,
+    errorMsg: String,
+    func: Function
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.modal-footer {
+  @include flex-box(row, center, 10px);
+  width: 100%;
+  padding: 20px 0px;
+  border-top: $theme-color solid 2px;
+  p {
+    color: tomato;
+    font-weight: bold;
+  }
+}
+</style>

src/components/common/modal/ModalHeader.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="modal-header">
+    <span>{{title}}</span>
+    <i class="bi bi-x-square-fill" @click="closeModal"></i>
+  </div>
+</template>
+
+<script>
+export default {
+  name:'ModalHeaderVue',
+  props: {
+    title: String,
+    closeModal: Function
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.modal-header {
+  @include flex-box(row, space-between, 0px);
+  width: 100%;
+  padding: 20px 0px;
+  border-bottom: $theme-color solid 2px;
+  span {
+    font-size: 24px;
+    font-weight: bold;
+  }
+  i {
+    @include base-icon;
+    color: $theme-color;
+    font-size: 28px;
+  }
+}
+</style>