feat(fe): 로그인, 헤더, 챗봇 UI 구현 (#44) - #80
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (2)
💤 Files with no reviewable changes (1)
📝 WalkthroughWalkthroughThe app shell now switches header and footer visibility by route and adds a login route. A new auth view handles login and register states, and the chatbot page was rebuilt with welcome cards, grouped bubbles, message actions, loading dots, and a textarea composer. ChangesFrontend shell and UI refresh
Sequence Diagram(s)sequenceDiagram
participant User
participant AppVue as App.vue
participant Router as vue-router
participant AuthView as AuthView.vue
User->>AppVue: click "로그인"
AppVue->>Router: navigate to /login
Router->>AuthView: render Auth route
User->>AuthView: submit login form
AuthView->>Router: router.push("/")
Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@frontend/src/App.vue`:
- Line 3: The header visibility condition in App.vue is inconsistent with the
shell layout rules because it only excludes Auth. Update the header v-if logic
on the app header to also hide it when the current route name is Chatbot,
matching the existing main/footer route handling so route-level layout behavior
stays consistent.
In `@frontend/src/views/AuthView.vue`:
- Line 155: Remove the plaintext PII logging from AuthView by updating the
login/register debug statements that currently print email/name values in the
console. In the AuthView.vue handlers around the login flow and the registration
flow, keep any necessary debug logging but replace direct email/name output with
non-identifying messages or omit those values entirely. Use the existing
console.log calls near the login and signup logic as the places to adjust.
- Around line 150-157: handleLogin currently treats every submission as a
successful login by pushing to "/" without authenticating first. Update the
AuthView.vue handleLogin flow to call the real login action on useAuthStore
(with the entered email and password), only navigate with router.push('/') after
a successful response, and keep the catch path setting errorMsg/loading
correctly for failed authentication.
In `@frontend/src/views/Chatbot.vue`:
- Around line 10-11: The welcome branch in Chatbot.vue is currently gated by
store.chatMessages.length, but the store starts with a default bot message so
the welcome UI never appears. Update the condition in the Chatbot template to
use a true “no real conversation yet” flag or adjust the store initialization so
chatMessages starts empty, and make sure the logic around store.chatMessages
reflects whether only the seeded bot prompt exists versus actual user chat
history.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: 39881725-6645-43e6-bbd6-59655252919c
⛔ Files ignored due to path filters (3)
frontend/src/assets/hero_house.jpgis excluded by!**/*.jpgfrontend/src/assets/logo-black.pngis excluded by!**/*.pngfrontend/src/assets/logo-white.pngis excluded by!**/*.png
📒 Files selected for processing (4)
frontend/src/App.vuefrontend/src/router/index.jsfrontend/src/views/AuthView.vuefrontend/src/views/Chatbot.vue
| </div> | ||
| </div> | ||
| <div class="min-h-screen bg-white text-slate-800 flex flex-col"> | ||
| <header v-if="$route.name !== 'Auth'" class="app-header"> |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major | ⚡ Quick win
Hide header on Chatbot route as well.
Line 3 currently hides the header only for Auth, but the shell logic for main/footer already treats Auth and Chatbot together. This creates inconsistent route-level layout behavior.
Suggested fix
- <header v-if="$route.name !== 'Auth'" class="app-header">
+ <header v-if="!['Auth', 'Chatbot'].includes($route.name)" class="app-header">📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <header v-if="$route.name !== 'Auth'" class="app-header"> | |
| <header v-if="!['Auth', 'Chatbot'].includes($route.name)" class="app-header"> |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@frontend/src/App.vue` at line 3, The header visibility condition in App.vue
is inconsistent with the shell layout rules because it only excludes Auth.
Update the header v-if logic on the app header to also hide it when the current
route name is Chatbot, matching the existing main/footer route handling so
route-level layout behavior stays consistent.
| async function handleLogin() { | ||
| loading.value = true | ||
| errorMsg.value = '' | ||
| try { | ||
| // TODO: useAuthStore().login({ email, password }) 연결 | ||
| console.log('login', email.value) | ||
| router.push('/') | ||
| } catch (e) { |
There was a problem hiding this comment.
🔒 Security & Privacy | 🔴 Critical | ⚡ Quick win
handleLogin currently allows unauthenticated success path.
Line 156 navigates to / without any real authentication check, so any input is treated as a successful login.
Suggested fix
async function handleLogin() {
loading.value = true
errorMsg.value = ''
try {
- // TODO: useAuthStore().login({ email, password }) 연결
- console.log('login', email.value)
+ // 실제 인증 성공 후에만 이동해야 합니다.
+ await useAuthStore().login({ email: email.value, password: password.value })
router.push('/')
} catch (e) {
errorMsg.value = e?.response?.data?.message ?? '로그인에 실패했습니다.'
} finally {
loading.value = false
}
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| async function handleLogin() { | |
| loading.value = true | |
| errorMsg.value = '' | |
| try { | |
| // TODO: useAuthStore().login({ email, password }) 연결 | |
| console.log('login', email.value) | |
| router.push('/') | |
| } catch (e) { | |
| async function handleLogin() { | |
| loading.value = true | |
| errorMsg.value = '' | |
| try { | |
| // 실제 인증 성공 후에만 이동해야 합니다. | |
| await useAuthStore().login({ email: email.value, password: password.value }) | |
| router.push('/') | |
| } catch (e) { |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@frontend/src/views/AuthView.vue` around lines 150 - 157, handleLogin
currently treats every submission as a successful login by pushing to "/"
without authenticating first. Update the AuthView.vue handleLogin flow to call
the real login action on useAuthStore (with the entered email and password),
only navigate with router.push('/') after a successful response, and keep the
catch path setting errorMsg/loading correctly for failed authentication.
| <template v-if="!store.chatMessages.length"> | ||
| <div class="chat-welcome"> |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major | ⚡ Quick win
Welcome state is unreachable with current store defaults.
Line 10 checks !store.chatMessages.length, but upstream state starts with one bot message, so this branch never renders on first load.
Use an explicit “has real conversation” condition (or initialize chat list empty) so the intended welcome cards can actually appear.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@frontend/src/views/Chatbot.vue` around lines 10 - 11, The welcome branch in
Chatbot.vue is currently gated by store.chatMessages.length, but the store
starts with a default bot message so the welcome UI never appears. Update the
condition in the Chatbot template to use a true “no real conversation yet” flag
or adjust the store initialization so chatMessages starts empty, and make sure
the logic around store.chatMessages reflects whether only the seeded bot prompt
exists versus actual user chat history.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
1 participant
변경 내용
AuthView.vue: 로그인/회원가입 페이지 구현 (풀스크린 히어로 이미지, 카드 UI, 모드 전환)App.vue: 전역 헤더 리디자인 — 세그먼트 컨트롤 네비(지도/챗봇), 로고, 로그인 CTA, Auth/Chatbot 라우트에서 헤더·푸터 숨김 처리Chatbot.vue: 챗봇 UI 전면 리디자인 — 외부/내부 카드 레이아웃, 메시지 버블(사용자 우측·AI 좌측), 민트 그라데이션 배경, 입력 툴바router/index.js:/login→Auth라우트 추가logo-black.png,logo-white.png,hero_house.jpg)연결 이슈
closes #44
테스트
리뷰 포인트
Summary by CodeRabbit
New Features
Bug Fixes
Chatbot