[feat] 모바일 공통 컴포넌트 구현

src/assets/scss/common.scss

@@ -56,6 +56,12 @@ $mobile-header-height : 100px;
   }
 }
 
+@mixin white-text($font-size) {
+  color: white;
+  font-weight: bold;
+  font-size: $font-size;
+}
+
 
 
 

src/components/common/btn/ThemeBtn.vue

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

src/components/common/info/NoTitleInfo.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="no-title-input">
+    {{ infoValue }}
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'NoTitleInfoVue',
+  props: {
+    infoValue: String,
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .no-title-input {
+    @include flex-box(row, center, 0px);
+    width: 100%;
+    height: 40px;
+    border-radius: 5px;
+    border: $theme-color solid 3px;
+    font-size: 18px;
+    font-weight: bold;
+  }
+</style>

src/components/common/input/InfoInput.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="info-input">
+    <div class="title-box">
+      {{ title }}
+    </div>
+    <input 
+      type="text" 
+      :value="modelValue" 
+      @input="$emit('update:modelValue', $event.target.value)">
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'InfoInputtVue',
+  props: {
+    'title' : String,
+    'modelValue': String,
+  },
+  emits: ['update:modelValue']
+
+}
+</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;
+    }
+
+    input {
+      width: 100%;
+      height: 100%;
+      padding: 0px 10px;
+      font-weight: bold;
+      font-size: 14px;
+      border: $theme-color solid;
+      border-top-right-radius: 5px;
+      border-bottom-right-radius: 5px;
+      &:focus {
+        outline: none;
+      }
+    }
+
+  }
+</style>

src/utils/axios.js

@@ -48,4 +48,22 @@ mainAxios.interceptors.response.use(
   }
 );
 
-export { authAxios, mainAxios }
+// 회원 관련 axios
+const memberAxios = axios.create({
+  baseURL: `${import.meta.env.VITE_API_URL}`, 
+  headers: {
+    'Content-Type': 'application/json',
+  },
+  withCredentials: true
+});
+
+authAxios.interceptors.response.use(
+  (response) => {
+    return response.data;
+  },
+  (error) => {
+    return error.response.data;
+  }
+);
+
+export { authAxios, mainAxios, memberAxios }

src/views/MobileView.vue

@@ -33,8 +33,8 @@ export default {
     width: 100%;
     margin: auto;
     position: relative;
-    @media (min-width: 501px) {
-      max-width: 500px;
+    @media (min-width: 801px) {
+      max-width: 800px;
     }
   }