diff --git a/src/App.jsx b/src/App.jsx index f52de8c..563d904 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -2,8 +2,8 @@ import { useState } from 'react' import { Routes, Route, useNavigate } from 'react-router-dom' import { Box, Typography, Container, Card, CardContent, Grid, Button, Collapse, IconButton } from '@mui/material' import { - School as EnglishIcon, - Chat as FreetalkIcon, + Mic as SpeakingIcon, + Create as WritingCategoryIcon, Headphones as OpicIcon, Edit as WritingIcon, People as PeopleIcon, @@ -20,35 +20,35 @@ function Dashboard() { const learningModes = [ { - id: 'english', - title: '영어공부', - description: 'OPIC 연습, 작문 연습으로 영어 실력 향상', - icon: EnglishIcon, + id: 'speaking', + title: '말하기연습', + description: '오픽 연습과 AI 대화로 스피킹 실력 향상', + icon: SpeakingIcon, color: '#2196f3', children: [ - { id: 'opic', title: 'OPIC 연습', icon: OpicIcon, path: '/opic', description: '레벨별 맞춤 연습' }, - { id: 'writing', title: '작문 연습', icon: WritingIcon, path: '/writing', description: '문법 교정 & 피드백' }, + { id: 'opic', title: '오픽연습', icon: OpicIcon, path: '/opic', description: '레벨별 맞춤 연습' }, + { id: 'ai-talk', title: 'AI와 말해보기', icon: AiIcon, path: '/freetalk/ai', description: 'AI와 자유로운 대화' }, ], }, { - id: 'freetalk', - title: '프리토킹', - description: '사람들과 또는 AI와 자유롭게 대화', - icon: FreetalkIcon, + id: 'writing', + title: '쓰기연습', + description: '채팅과 작문으로 라이팅 실력 향상', + icon: WritingCategoryIcon, color: '#4caf50', children: [ - { id: 'freetalk-people', title: '사람들과', icon: PeopleIcon, path: '/freetalk/people', description: '다른 학습자와 대화' }, - { id: 'freetalk-ai', title: 'AI와', icon: AiIcon, path: '/freetalk/ai', description: 'AI와 자유 대화' }, + { id: 'chat-people', title: '사람들과 채팅하기', icon: PeopleIcon, path: '/freetalk/people', description: '다른 학습자와 대화' }, + { id: 'writing-practice', title: '작문연습', icon: WritingIcon, path: '/writing', description: '문법 교정 & 피드백' }, ], }, ] - const handleCardClick = (mode) => { - if (mode.children) { - setExpandedCard(expandedCard === mode.id ? null : mode.id) - } else if (mode.path) { - navigate(mode.path) - } + const handleCardHover = (modeId) => { + setExpandedCard(modeId) + } + + const handleCardLeave = () => { + setExpandedCard(null) } const handleSubItemClick = (path, e) => { @@ -67,33 +67,24 @@ function Dashboard() { - + {learningModes.map((mode) => { const Icon = mode.icon const isExpanded = expandedCard === mode.id const hasChildren = mode.children && mode.children.length > 0 return ( - + handleCardClick(mode)} + onMouseEnter={() => handleCardHover(mode.id)} + onMouseLeave={handleCardLeave} sx={{ - height: '100%', cursor: 'pointer', - transition: 'all 0.4s cubic-bezier(0.4, 0, 0.2, 1)', - transform: isExpanded ? 'scale(1.02)' : 'scale(1)', + transition: 'all 0.3s ease', boxShadow: isExpanded ? 8 : 1, border: isExpanded ? `2px solid ${mode.color}` : '2px solid transparent', '&:hover': { - transform: isExpanded ? 'scale(1.02)' : 'translateY(-4px)', - boxShadow: isExpanded ? 8 : 4, + boxShadow: 6, }, }} > @@ -191,10 +182,10 @@ function Dashboard() { )} - + ) })} - + {/* 최근 학습 */} diff --git a/src/layouts/MainLayout/Sidebar/index.jsx b/src/layouts/MainLayout/Sidebar/index.jsx index 99812a3..0fab047 100644 --- a/src/layouts/MainLayout/Sidebar/index.jsx +++ b/src/layouts/MainLayout/Sidebar/index.jsx @@ -20,11 +20,11 @@ import { ChevronRight as ChevronRightIcon, Dashboard as DashboardIcon, Headphones as OpicIcon, - Chat as FreetalkIcon, Edit as WritingIcon, Assessment as ReportIcon, Settings as SettingsIcon, - School as EnglishIcon, + Mic as SpeakingIcon, + Create as WritingCategoryIcon, People as PeopleIcon, SmartToy as AiIcon, ExpandMore as ExpandMoreIcon, @@ -39,44 +39,44 @@ const menuItems = [ category: '학습 모드', items: [ { - id: 'english', - label: '영어공부', - icon: EnglishIcon, + id: 'speaking', + label: '말하기연습', + icon: SpeakingIcon, children: [ { id: 'opic', - label: 'OPIC 연습', + label: '오픽연습', icon: OpicIcon, path: '/opic', description: '레벨별 맞춤 연습' }, { - id: 'writing', - label: '작문 연습', - icon: WritingIcon, - path: '/writing', - description: '문법 교정 & 피드백' + id: 'ai-talk', + label: 'AI와 말해보기', + icon: AiIcon, + path: '/freetalk/ai', + description: 'AI와 자유로운 대화' }, ], }, { - id: 'freetalk', - label: '프리토킹', - icon: FreetalkIcon, + id: 'writing', + label: '쓰기연습', + icon: WritingCategoryIcon, children: [ { - id: 'freetalk-people', - label: '사람들과', + id: 'chat-people', + label: '사람들과 채팅하기', icon: PeopleIcon, path: '/freetalk/people', description: '다른 학습자와 대화' }, { - id: 'freetalk-ai', - label: 'AI와', - icon: AiIcon, - path: '/freetalk/ai', - description: 'AI와 자유로운 대화' + id: 'writing-practice', + label: '작문연습', + icon: WritingIcon, + path: '/writing', + description: '문법 교정 & 피드백' }, ], }, @@ -119,7 +119,7 @@ const Sidebar = ({ open, collapsed, onToggleCollapse, onClose }) => { // 펼침 상태 (localStorage 저장) const [expandedMenus, setExpandedMenus] = useState(() => { const saved = localStorage.getItem('expandedMenus') - return saved ? JSON.parse(saved) : { english: true, freetalk: true } + return saved ? JSON.parse(saved) : { speaking: true, writing: true } }) useEffect(() => {