diff --git a/src/assets/scss/common.scss b/src/assets/scss/common.scss index 800018b..65d0fcb 100644 --- a/src/assets/scss/common.scss +++ b/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; +} + diff --git a/src/components/common/btn/ThemeBtn.vue b/src/components/common/btn/ThemeBtn.vue new file mode 100644 index 0000000..6ef6f6f --- /dev/null +++ b/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> \ No newline at end of file diff --git a/src/components/common/info/NoTitleInfo.vue b/src/components/common/info/NoTitleInfo.vue new file mode 100644 index 0000000..4550506 --- /dev/null +++ b/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> diff --git a/src/components/common/input/InfoInput.vue b/src/components/common/input/InfoInput.vue new file mode 100644 index 0000000..1faa5f6 --- /dev/null +++ b/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> \ No newline at end of file diff --git a/src/utils/axios.js b/src/utils/axios.js index 7374bae..35b1479 100644 --- a/src/utils/axios.js +++ b/src/utils/axios.js @@ -48,4 +48,22 @@ mainAxios.interceptors.response.use( } ); -export { authAxios, mainAxios } \ No newline at end of file +// 회원 관련 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 } \ No newline at end of file diff --git a/src/views/MobileView.vue b/src/views/MobileView.vue index c695c8b..fd5bce0 100644 --- a/src/views/MobileView.vue +++ b/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; } }