Merge pull request #69 from KB-JAKKU/refactor/audio

feat: 모드전환 버튼 추가

Author: KimJH0709

src/components/Header.vue

@@ -1,12 +1,13 @@
 <script setup>
-import { ref, computed, onMounted } from 'vue'
+import { ref, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 import authApi from '@/api/authApi'
 
 const router = useRouter()
+defineOptions({ name: 'AppHeader' })
 
 // props 정의
-const props = defineProps({
+defineProps({
   isTransparent: {
     type: Boolean,
     default: false,
@@ -29,16 +30,20 @@ const checkLoginStatus = () => {
 
 // 로그인 상태 (실제 토큰 기반)
 const isLoggedIn = ref(false)
+const isChildLoggedIn = ref(false)
 
 // 로그인 상태 업데이트
 const updateLoginStatus = () => {
   isLoggedIn.value = checkLoginStatus()
+  isChildLoggedIn.value = !!localStorage.getItem('child-accessToken')
 }
 
 function clearCookie(name) {
   try {
     document.cookie = `${name}=; Max-Age=0; path=/;`
-  } catch {}
+  } catch {
+    // ignore
+  }
 }
 
 // 로그아웃 함수
@@ -52,7 +57,7 @@ const handleLogout = async () => {
   // 서버에 로그아웃 요청 (HttpOnly refresh 쿠키 제거)
   try {
     await authApi.logout()
-  } catch (e) {
+  } catch {
     // ignore
   }
   clearCookie('refreshToken')  
@@ -64,6 +69,11 @@ const handleLogout = async () => {
   router.push('/')
 }
 
+// 모드 전환 버튼: 모드 선택 페이지로 이동
+const handleToggleChildMode = () => {
+  router.push('/mode')
+}
+
 // 로그인/로그아웃 토글
 const toggleLogin = () => {
   if (isLoggedIn.value) {
@@ -109,6 +119,7 @@ onMounted(() => {
     if (e.key === 'accessToken' || e.key === 'child-accessToken') {
       updateLoginStatus()
     }
+    // no-op for child-mode; header button just opens /mode
   })
 })
 </script>
@@ -123,9 +134,17 @@ onMounted(() => {
           style="width: 100%; height: 100%; cursor: pointer"
         />
       </div>
-      <button class="login-btn" @click="toggleLogin">
-        {{ isLoggedIn ? '로그아웃' : '로그인' }}
-      </button>
+      <div class="header-actions">
+        <button
+          v-if="isChildLoggedIn && router.currentRoute.value.path !== '/mode'"
+          class="login-btn"
+          @click="handleToggleChildMode"
+          aria-label="모드 전환"
+        >모드 전환</button>
+        <button class="login-btn" @click="toggleLogin">
+          {{ isLoggedIn ? '로그아웃' : '로그인' }}
+        </button>
+      </div>
     </div>
   </header>
 </template>
@@ -159,6 +178,12 @@ onMounted(() => {
   margin: 0 auto;
 }
 
+.header-actions {
+  display: flex;
+  align-items: center;
+  gap: 0px;
+}
+
 .logo {
   width: 120px;
   height: 50px;

src/pages/child/study/StudyMainPage.vue

@@ -79,6 +79,7 @@ const onPayQR = () => {
   console.log('페이 QR 기능 준비 중입니다.')
 }
 
+
 const showAll = ref(false)
 
 const displayedFavorites = computed(() =>
@@ -174,7 +175,7 @@ const toggleShowAll = () => {
 .mission-top-bar {
   width: 380px;
   display: flex;
-  justify-content: flex-start;
+  justify-content: space-between;
   margin-top: 20px;
   margin-bottom: -20px;
 }
@@ -198,6 +199,21 @@ const toggleShowAll = () => {
   gap: 8px;
   cursor: pointer;
 }
+.mode-toggle-btn {
+  background-color: #ffce14;
+  border: none;
+  border-radius: 12px;
+  padding: 12px 20px;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+  color: #0a0000;
+  font-size: 16px;
+  font-weight: bold;
+  font-family: 'OngeulipKonKon', sans-serif;
+}
+.mode-toggle-btn:hover {
+  background-color: #d1ad02;
+}
 
 .mission-btn:hover {
   background: #fff1a0;

src/pages/child/trade/TradeMainPage.vue

@@ -64,6 +64,7 @@ const onHistoryClick = () => {
   router.push('/trade/history')
 }
 
+
 const loadCurrentChild = async () => {
   const response = await childApi.me()
   currentChild.value = response
@@ -206,6 +207,8 @@ onMounted(async () => {
       <CharacterGuide :speechText="guideMsg" :img="dragonImg" layout="right" />
     </div>
 
+    <!-- 상단 모드 전환 버튼 제거: 헤더로 이동 -->
+
     <div class="wallet-container">
       <section class="wallet-header">
         <div class="bank-name-row">
@@ -386,6 +389,7 @@ onMounted(async () => {
   font-family: 'OngeulipKonKon', sans-serif;
 }
 
+
 .history-btn:hover {
   background: rgba(255, 255, 255, 0.3);
   transform: translateY(-1px);