diff --git a/src/api/chatbot.js b/src/api/chatbot.js index c187f7d..2feb2e9 100644 --- a/src/api/chatbot.js +++ b/src/api/chatbot.js @@ -1,58 +1,11 @@ -// import axios from 'axios'; - -// const apiKey = import.meta.env.VITE_OPENAI_API_KEY; - -// const delay = (ms) => new Promise(resolve => setTimeout(resolve, ms)); - -// export const sendMessageToChatGPT = async (message, retries = 3) => { -// let attempt = 0; -// const maxDelay = 32000; // 최대 지연 시간 (32초) - -// while (attempt < retries) { -// try { -// console.log(apiKey) -// const response = await axios.post( -// 'https://api.openai.com/v1/chat/completions', -// { -// model: 'gpt-3.5-turbo', // 또는 다른 사용 가능한 모델로 변경 -// messages: [ -// { role: 'system', content: 'You are a tour guide for those who want to travel to Korea. Answer only questions related to your trip to Korea.' }, -// { role: 'user', content: message } -// ], -// }, -// { -// headers: { -// 'Content-Type': 'application/json', -// 'Authorization': `Bearer ${apiKey}`, -// }, -// } -// ); - -// return response.data.choices[0].message.content; -// } catch (error) { -// if (error.response && error.response.status === 429) { -// attempt++; -// const backoffTime = Math.min(1000 * 2 ** attempt, maxDelay); // 지수 백오프 -// console.warn(`Rate limit exceeded. Retrying in ${backoffTime / 1000} seconds...`); -// await delay(backoffTime); -// } else { -// console.error('Error calling OpenAI API:', error); -// throw error; -// } -// } -// } - -// throw new Error('Exceeded maximum retry attempts'); -// }; - import { localAxios } from '@/utils/http-commons'; const local = localAxios; const sendMessageToChatGPT = async (message) => { try { - console.log(message) const response = await local.post('/api/chatgpt/message', { message }); + return response.data; } catch (error) { console.error('Error sending message to ChatGPT:', error); @@ -60,4 +13,4 @@ const sendMessageToChatGPT = async (message) => { } }; -export default sendMessageToChatGPT; \ No newline at end of file +export default sendMessageToChatGPT; diff --git a/src/components/chatbot/ChatBotButton.vue b/src/components/chatbot/ChatBotButton.vue new file mode 100644 index 0000000..576f027 --- /dev/null +++ b/src/components/chatbot/ChatBotButton.vue @@ -0,0 +1,54 @@ + + + + + diff --git a/src/components/chatbot/TravelChatBot.vue b/src/components/chatbot/TravelChatBot.vue index 85320a5..0eedf96 100644 --- a/src/components/chatbot/TravelChatBot.vue +++ b/src/components/chatbot/TravelChatBot.vue @@ -1,183 +1,160 @@ - + - - - \ No newline at end of file +} + +.chat-container { + display: flex; + flex-direction: column; + align-items: stretch; + position: relative; + padding: 20px; + padding-right: 0; + width: 100%; + height: 100%; + border-radius: 16px; +} + +.chat-container::-webkit-scrollbar { + width: 6px; +} + +.chat-container::-webkit-scrollbar-thumb { + background-color: var(--color-text-secondary); + border-radius: 6px; +} + +.icon { + display: block; + width: 24px; + height: 24px; + stroke: var(--color-primary); +} + +.messages { + display: flex; + flex-direction: column; + overflow-y: auto; + height: 100%; + padding-right: 20px; +} + +.messages::-webkit-scrollbar { + width: 6px; +} + +.messages::-webkit-scrollbar-thumb { + background-color: var(--color-text-secondary); + border-radius: 6px; +} + +.message { + padding: 10px; + border-radius: 16px; + margin-bottom: 10px; + animation: slideUp 0.25s ease-out; +} + +.skeleton { + width: 100%; + height: 1em; + background: linear-gradient( + 120deg, + var(--color-border) 30%, + var(--color-background-soft) 38%, + var(--color-background-soft) 42%, + var(--color-border) 50% + ); + background-size: 200% 100%; + background-position: 100% 0; + animation: skeleton 1.5s infinite; + border-radius: 4px; +} + +.user { + background-color: var(--color-primary); + color: white; + align-self: flex-end; +} + +.assistant { + background-color: var(--color-background-soft); + margin-right: 20px; +} + +.input-wrapper { + justify-self: flex-end; + display: flex; + gap: 20px; + align-items: center; + padding-right: 20px; + width: 100%; +} + diff --git a/src/components/common/KakaoMap.vue b/src/components/common/KakaoMap.vue index 3eae136..3af90a8 100644 --- a/src/components/common/KakaoMap.vue +++ b/src/components/common/KakaoMap.vue @@ -40,12 +40,12 @@ onMounted(() => { diff --git a/src/components/common/SearchBox.vue b/src/components/common/SearchBox.vue index f20b87b..90c6407 100644 --- a/src/components/common/SearchBox.vue +++ b/src/components/common/SearchBox.vue @@ -11,21 +11,10 @@ const model = defineModel(); diff --git a/src/components/search/SearchBar.vue b/src/components/search/SearchBar.vue index a97b47f..8ade437 100644 --- a/src/components/search/SearchBar.vue +++ b/src/components/search/SearchBar.vue @@ -32,6 +32,7 @@ watch(sido, ({ sidoCode }) => { axios.get(`//localhost:8000/area/gugun?sidoCode=${sidoCode}`).then(({ data }) => { gugunList.value = [{ gugunCode: 0, gugunName: '전체' }, ...data]; }); + console.log(keyword.value); }); if (sidoList.value.length === 0) { @@ -48,9 +49,14 @@ function handleSubmit() { const contentTypeQuery = `contentTypeId=${contentType.value?.value ?? 0}`; const queryString = [areaQuery, keywordQuery, contentTypeQuery].join('&'); + console.log(queryString); setQueryString(queryString); search(); } + +watch(keyword, () => { + console.log('change'); +}); diff --git a/src/components/users/UserRegister.vue b/src/components/users/UserRegister.vue index 28b9e7c..4c81c0b 100644 --- a/src/components/users/UserRegister.vue +++ b/src/components/users/UserRegister.vue @@ -1,31 +1,31 @@ @@ -41,15 +41,20 @@ function onSubmit() {
- +
- +
- +
@@ -58,7 +63,12 @@ function onSubmit() {
- + @