From fbcd4c8fd2e7701aec5d2692dad2988e3dd1531f Mon Sep 17 00:00:00 2001 From: yujin5959 Date: Sun, 31 May 2026 20:39:08 +0900 Subject: [PATCH 1/4] =?UTF-8?q?feat:=20ai=20=EB=B9=84=EC=84=9C=20=EB=8C=80?= =?UTF-8?q?=ED=99=94=ED=98=95=20=EB=AA=A8=EB=8B=AC=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8(AIChatModal)=20=EA=B5=AC=ED=98=84=20?= =?UTF-8?q?=EB=B0=8F=20=EC=9E=90=EC=97=B0=EC=96=B4=20=EC=B2=98=EB=A6=AC(NL?= =?UTF-8?q?P)=20API=20=EC=97=B0=EB=8F=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/features/Common/AIChatModal.styles.ts | 94 ++++++++++++++- src/features/Common/AIChatModal.tsx | 136 +++++++++++++++++++++- src/shared/api/home/home.ts | 8 ++ src/shared/assets/icons/chat.svg | 3 + src/shared/assets/icons/robot.svg | 23 ++++ src/shared/types/home/home.ts | 30 +++++ 6 files changed, 285 insertions(+), 9 deletions(-) create mode 100644 src/shared/assets/icons/chat.svg create mode 100644 src/shared/assets/icons/robot.svg diff --git a/src/features/Common/AIChatModal.styles.ts b/src/features/Common/AIChatModal.styles.ts index 7677ce48..c9f8f011 100644 --- a/src/features/Common/AIChatModal.styles.ts +++ b/src/features/Common/AIChatModal.styles.ts @@ -13,16 +13,17 @@ export const Container = styled.div` position: absolute; top: 70px; right: 0; - width: 450px; - height: 430px; + width: 500px; + height: 400px; z-index: 999; + will-change: transform, opacity; ${media.down(theme.breakPoints.desktop)} { position: relative; top: 0; right: 0; width: 100%; - height: auto; + height: 430px; margin: 20px 0; z-index: 1; box-shadow: none; @@ -31,6 +32,7 @@ export const Container = styled.div` ${media.down(theme.breakPoints.tablet)} { padding: 20px; border-radius: 20px; + height: 380px; } ` @@ -42,6 +44,7 @@ export const Title = styled.h2` font-weight: 600; color: ${theme.colors.primary2}; padding: 10px 0; + flex-shrink: 0; ` export const IconWrapper = styled.div` @@ -57,22 +60,47 @@ export const IconWrapper = styled.div` } ` -export const ChatBox = styled.div` +interface ChatBoxProps { + isEmpty?: boolean +} + +export const ChatBox = styled.div` flex: 1; background: ${theme.colors.white}; border-radius: 16px; margin-bottom: 16px; overflow-y: auto; + padding: 16px; + display: flex; + flex-direction: column; + gap: 12px; + + /* 비어있을 때는 중앙 정렬 연산 수행 */ + justify-content: ${({ isEmpty }) => (isEmpty ? 'center' : 'flex-start')}; + align-items: ${({ isEmpty }) => (isEmpty ? 'center' : 'stretch')}; + + scroll-behavior: smooth; + + &::-webkit-scrollbar { + width: 5px; + } + &::-webkit-scrollbar-thumb { + background: ${theme.colors.GRAY || '#e0e0e0'}; + border-radius: 3px; + } + &::-webkit-scrollbar-track { + background: transparent; + } ` export const InputWrapper = styled.div` display: flex; align-items: center; - background: ${theme.colors.white}; border-radius: 24px; padding: 4px 4px 4px 16px; width: 100%; + flex-shrink: 0; &:focus-within { box-shadow: 0 0 0 2px ${theme.colors.primary2}40; @@ -86,7 +114,6 @@ export const Input = styled.input` background: transparent; font-size: 15px; padding: 8px 0; - border-radius: 20px; ${media.down(theme.breakPoints.mobile)} { font-size: 14px; @@ -100,6 +127,7 @@ export const SendButton = styled.button` align-items: center; border-radius: 20px; padding: 14.5px 17px 13.5px 17px; + margin-left: 8px; background: ${theme.colors.primary2}; color: ${theme.colors.white}; border: none; @@ -110,4 +138,58 @@ export const SendButton = styled.button` &:active { transform: scale(0.9); } + + &:disabled { + background: ${theme.colors.GRAY || '#cbd5e1'}; + cursor: not-allowed; + } +` +export const UserMessageWrapper = styled.div` + display: flex; + justify-content: flex-end; + width: 100%; +` + +export const UserBubble = styled.div` + background: ${theme.colors.primary2}; + color: ${theme.colors.white}; + padding: 10px 16px; + border-radius: 16px 16px 4px 16px; + font-size: 14px; + line-height: 1.4; + max-width: 75%; + word-break: break-all; +` + +export const BotMessageWrapper = styled.div` + display: flex; + align-items: flex-start; + gap: 10px; + width: 100%; +` + +export const BotContentArea = styled.div` + display: flex; + flex-direction: column; + gap: 8px; + max-width: 80%; +` + +export const BotFallbackBubble = styled.div` + background: ${theme.colors.GRAY || '#f1f3f5'}; + color: ${theme.colors.black || '#333333'}; + padding: 10px 14px; + border-radius: 4px 16px 16px 16px; + font-size: 14px; + line-height: 1.4; +` + +export const EmptyState = styled.div` + display: flex; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; + opacity: 0.5; + color: ${theme.colors.GRAY || '#adb5bd'}; ` diff --git a/src/features/Common/AIChatModal.tsx b/src/features/Common/AIChatModal.tsx index f8063a71..4b932d21 100644 --- a/src/features/Common/AIChatModal.tsx +++ b/src/features/Common/AIChatModal.tsx @@ -1,7 +1,83 @@ +import React, { useEffect, useRef, useState } from 'react' + +import { nlpApi } from '@/shared/api/home/home' +import ChatIcon from '@/shared/assets/icons/chat.svg' +import RobotIcon from '@/shared/assets/icons/robot.svg' +import type { ChatMessage } from '@/shared/types/home/home' + import { SparkleIcon } from '../Home/Icon/SparkleIcon' import * as S from './AIChatModal.styles' function AIChatModal() { + const [inputValue, setInputValue] = useState('') + const [messages, setMessages] = useState([]) + const [isLoading, setIsLoading] = useState(false) + const chatBoxRef = useRef(null) + + useEffect(() => { + if (chatBoxRef.current) { + chatBoxRef.current.scrollTop = chatBoxRef.current.scrollHeight + } + }, [messages, isLoading]) + + const handleSendMessage = async () => { + if (!inputValue.trim() || isLoading) return + + const userText = inputValue + setInputValue('') + + const userMessage: ChatMessage = { + id: crypto.randomUUID(), + sender: 'user', + text: userText, + } + setMessages((prev) => [...prev, userMessage]) + setIsLoading(true) + + try { + const response = await nlpApi.sendMessage(userText) + + if (response.isSuccess && response.result) { + const botMessage: ChatMessage = { + id: crypto.randomUUID(), + sender: 'bot', + text: response.result.reply, + action: response.result.action, + } + setMessages((prev) => [...prev, botMessage]) + } else { + setMessages((prev) => [ + ...prev, + { + id: crypto.randomUUID(), + sender: 'bot', + text: response.message || '죄송해요, 잠시 대화를 이해하지 못했어요.', + }, + ]) + } + // eslint-disable-next-line @typescript-eslint/no-unused-vars + } catch (error) { + setMessages((prev) => [ + ...prev, + { + id: crypto.randomUUID(), + sender: 'bot', + text: 'AI 비서 서버와 연결에 실패했습니다. 잠시 후 다시 시도해주세요.', + }, + ]) + } finally { + setIsLoading(false) + } + } + + const handleKeyDown = (e: React.KeyboardEvent) => { + if (e.key === 'Enter') { + handleSendMessage() + } + } + + const isChatEmpty = messages.length === 0 && !isLoading + return ( @@ -11,11 +87,65 @@ function AIChatModal() { AI 비서에게 일정을 맡기세요 - {/* 채팅 메시지들이 들어갈 공간으로 비워두겠습니다 */} + + {isChatEmpty ? ( + + 채팅 시작 + + ) : ( + <> + {messages.map((msg) => { + if (msg.sender === 'user') { + return ( + + {msg.text} + + ) + } + + return ( + + robot + + {msg.text} + + + ) + })} + + {isLoading && ( + + robot + + 답변을 생각하고 있습니다... + + + )} + + )} + - - ↑ + setInputValue(e.target.value)} + onKeyDown={handleKeyDown} + placeholder="예시) 내일 오후 3시 치과 진료 받으러 감" + disabled={isLoading} + /> + + ↑ + ) diff --git a/src/shared/api/home/home.ts b/src/shared/api/home/home.ts index d91feec9..7bb53ca5 100644 --- a/src/shared/api/home/home.ts +++ b/src/shared/api/home/home.ts @@ -1,5 +1,6 @@ import type { BriefingResponse, + ChatResponse, ReminderResponse, SuggestionListResponse, } from '@/shared/types/home/home' @@ -40,3 +41,10 @@ export const suggestionApi = { await axiosInstance.delete('/suggestions') }, } + +export const nlpApi = { + sendMessage: async (message: string): Promise => { + const res = await axiosInstance.post('/chat', { message }) + return res.data + }, +} diff --git a/src/shared/assets/icons/chat.svg b/src/shared/assets/icons/chat.svg new file mode 100644 index 00000000..a65d8e0f --- /dev/null +++ b/src/shared/assets/icons/chat.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/shared/assets/icons/robot.svg b/src/shared/assets/icons/robot.svg new file mode 100644 index 00000000..1af5cff7 --- /dev/null +++ b/src/shared/assets/icons/robot.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/shared/types/home/home.ts b/src/shared/types/home/home.ts index c6a74c67..732e8dcd 100644 --- a/src/shared/types/home/home.ts +++ b/src/shared/types/home/home.ts @@ -45,3 +45,33 @@ export interface SuggestionListResponse { details: Suggestion[] } } + +//챗봇 관련 type +export type ChatActionType = 'CREATED' | 'UPDATED' | 'DELETED' | 'CLARIFYING' | 'NONE' +export type ScheduleType = 'EVENT' | 'TODO' + +export interface ChatRequest { + message: string +} + +export interface ChatResponseResult { + reply: string + action: ChatActionType + scheduleId: number | null + recurrenceGroupId: number | null + scheduleType: ScheduleType | null +} + +export interface ChatResponse { + isSuccess: boolean + code: string + message: string + result: ChatResponseResult | null +} + +export interface ChatMessage { + id: string + sender: 'user' | 'bot' + text: string + action?: ChatActionType +} From 5ae1cd2964bbb1e418bc7f8ad23436a2d455189e Mon Sep 17 00:00:00 2001 From: yujin5959 Date: Sun, 31 May 2026 20:39:08 +0900 Subject: [PATCH 2/4] =?UTF-8?q?feat:=20ai=20=EB=B9=84=EC=84=9C=20=EB=8C=80?= =?UTF-8?q?=ED=99=94=ED=98=95=20=EB=AA=A8=EB=8B=AC=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8(AIChatModal)=20=EA=B5=AC=ED=98=84=20?= =?UTF-8?q?=EB=B0=8F=20=EC=9E=90=EC=97=B0=EC=96=B4=20=EC=B2=98=EB=A6=AC(NL?= =?UTF-8?q?P)=20API=20=EC=97=B0=EB=8F=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/features/Common/AIChatModal.styles.ts | 94 ++++++++++++++- src/features/Common/AIChatModal.tsx | 136 +++++++++++++++++++++- src/shared/api/home/home.ts | 8 ++ src/shared/assets/icons/chat.svg | 3 + src/shared/assets/icons/robot.svg | 23 ++++ src/shared/types/home/home.ts | 30 +++++ 6 files changed, 285 insertions(+), 9 deletions(-) create mode 100644 src/shared/assets/icons/chat.svg create mode 100644 src/shared/assets/icons/robot.svg diff --git a/src/features/Common/AIChatModal.styles.ts b/src/features/Common/AIChatModal.styles.ts index 7677ce48..c9f8f011 100644 --- a/src/features/Common/AIChatModal.styles.ts +++ b/src/features/Common/AIChatModal.styles.ts @@ -13,16 +13,17 @@ export const Container = styled.div` position: absolute; top: 70px; right: 0; - width: 450px; - height: 430px; + width: 500px; + height: 400px; z-index: 999; + will-change: transform, opacity; ${media.down(theme.breakPoints.desktop)} { position: relative; top: 0; right: 0; width: 100%; - height: auto; + height: 430px; margin: 20px 0; z-index: 1; box-shadow: none; @@ -31,6 +32,7 @@ export const Container = styled.div` ${media.down(theme.breakPoints.tablet)} { padding: 20px; border-radius: 20px; + height: 380px; } ` @@ -42,6 +44,7 @@ export const Title = styled.h2` font-weight: 600; color: ${theme.colors.primary2}; padding: 10px 0; + flex-shrink: 0; ` export const IconWrapper = styled.div` @@ -57,22 +60,47 @@ export const IconWrapper = styled.div` } ` -export const ChatBox = styled.div` +interface ChatBoxProps { + isEmpty?: boolean +} + +export const ChatBox = styled.div` flex: 1; background: ${theme.colors.white}; border-radius: 16px; margin-bottom: 16px; overflow-y: auto; + padding: 16px; + display: flex; + flex-direction: column; + gap: 12px; + + /* 비어있을 때는 중앙 정렬 연산 수행 */ + justify-content: ${({ isEmpty }) => (isEmpty ? 'center' : 'flex-start')}; + align-items: ${({ isEmpty }) => (isEmpty ? 'center' : 'stretch')}; + + scroll-behavior: smooth; + + &::-webkit-scrollbar { + width: 5px; + } + &::-webkit-scrollbar-thumb { + background: ${theme.colors.GRAY || '#e0e0e0'}; + border-radius: 3px; + } + &::-webkit-scrollbar-track { + background: transparent; + } ` export const InputWrapper = styled.div` display: flex; align-items: center; - background: ${theme.colors.white}; border-radius: 24px; padding: 4px 4px 4px 16px; width: 100%; + flex-shrink: 0; &:focus-within { box-shadow: 0 0 0 2px ${theme.colors.primary2}40; @@ -86,7 +114,6 @@ export const Input = styled.input` background: transparent; font-size: 15px; padding: 8px 0; - border-radius: 20px; ${media.down(theme.breakPoints.mobile)} { font-size: 14px; @@ -100,6 +127,7 @@ export const SendButton = styled.button` align-items: center; border-radius: 20px; padding: 14.5px 17px 13.5px 17px; + margin-left: 8px; background: ${theme.colors.primary2}; color: ${theme.colors.white}; border: none; @@ -110,4 +138,58 @@ export const SendButton = styled.button` &:active { transform: scale(0.9); } + + &:disabled { + background: ${theme.colors.GRAY || '#cbd5e1'}; + cursor: not-allowed; + } +` +export const UserMessageWrapper = styled.div` + display: flex; + justify-content: flex-end; + width: 100%; +` + +export const UserBubble = styled.div` + background: ${theme.colors.primary2}; + color: ${theme.colors.white}; + padding: 10px 16px; + border-radius: 16px 16px 4px 16px; + font-size: 14px; + line-height: 1.4; + max-width: 75%; + word-break: break-all; +` + +export const BotMessageWrapper = styled.div` + display: flex; + align-items: flex-start; + gap: 10px; + width: 100%; +` + +export const BotContentArea = styled.div` + display: flex; + flex-direction: column; + gap: 8px; + max-width: 80%; +` + +export const BotFallbackBubble = styled.div` + background: ${theme.colors.GRAY || '#f1f3f5'}; + color: ${theme.colors.black || '#333333'}; + padding: 10px 14px; + border-radius: 4px 16px 16px 16px; + font-size: 14px; + line-height: 1.4; +` + +export const EmptyState = styled.div` + display: flex; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; + opacity: 0.5; + color: ${theme.colors.GRAY || '#adb5bd'}; ` diff --git a/src/features/Common/AIChatModal.tsx b/src/features/Common/AIChatModal.tsx index f8063a71..4b932d21 100644 --- a/src/features/Common/AIChatModal.tsx +++ b/src/features/Common/AIChatModal.tsx @@ -1,7 +1,83 @@ +import React, { useEffect, useRef, useState } from 'react' + +import { nlpApi } from '@/shared/api/home/home' +import ChatIcon from '@/shared/assets/icons/chat.svg' +import RobotIcon from '@/shared/assets/icons/robot.svg' +import type { ChatMessage } from '@/shared/types/home/home' + import { SparkleIcon } from '../Home/Icon/SparkleIcon' import * as S from './AIChatModal.styles' function AIChatModal() { + const [inputValue, setInputValue] = useState('') + const [messages, setMessages] = useState([]) + const [isLoading, setIsLoading] = useState(false) + const chatBoxRef = useRef(null) + + useEffect(() => { + if (chatBoxRef.current) { + chatBoxRef.current.scrollTop = chatBoxRef.current.scrollHeight + } + }, [messages, isLoading]) + + const handleSendMessage = async () => { + if (!inputValue.trim() || isLoading) return + + const userText = inputValue + setInputValue('') + + const userMessage: ChatMessage = { + id: crypto.randomUUID(), + sender: 'user', + text: userText, + } + setMessages((prev) => [...prev, userMessage]) + setIsLoading(true) + + try { + const response = await nlpApi.sendMessage(userText) + + if (response.isSuccess && response.result) { + const botMessage: ChatMessage = { + id: crypto.randomUUID(), + sender: 'bot', + text: response.result.reply, + action: response.result.action, + } + setMessages((prev) => [...prev, botMessage]) + } else { + setMessages((prev) => [ + ...prev, + { + id: crypto.randomUUID(), + sender: 'bot', + text: response.message || '죄송해요, 잠시 대화를 이해하지 못했어요.', + }, + ]) + } + // eslint-disable-next-line @typescript-eslint/no-unused-vars + } catch (error) { + setMessages((prev) => [ + ...prev, + { + id: crypto.randomUUID(), + sender: 'bot', + text: 'AI 비서 서버와 연결에 실패했습니다. 잠시 후 다시 시도해주세요.', + }, + ]) + } finally { + setIsLoading(false) + } + } + + const handleKeyDown = (e: React.KeyboardEvent) => { + if (e.key === 'Enter') { + handleSendMessage() + } + } + + const isChatEmpty = messages.length === 0 && !isLoading + return ( @@ -11,11 +87,65 @@ function AIChatModal() { AI 비서에게 일정을 맡기세요 - {/* 채팅 메시지들이 들어갈 공간으로 비워두겠습니다 */} + + {isChatEmpty ? ( + + 채팅 시작 + + ) : ( + <> + {messages.map((msg) => { + if (msg.sender === 'user') { + return ( + + {msg.text} + + ) + } + + return ( + + robot + + {msg.text} + + + ) + })} + + {isLoading && ( + + robot + + 답변을 생각하고 있습니다... + + + )} + + )} + - - ↑ + setInputValue(e.target.value)} + onKeyDown={handleKeyDown} + placeholder="예시) 내일 오후 3시 치과 진료 받으러 감" + disabled={isLoading} + /> + + ↑ + ) diff --git a/src/shared/api/home/home.ts b/src/shared/api/home/home.ts index d91feec9..7bb53ca5 100644 --- a/src/shared/api/home/home.ts +++ b/src/shared/api/home/home.ts @@ -1,5 +1,6 @@ import type { BriefingResponse, + ChatResponse, ReminderResponse, SuggestionListResponse, } from '@/shared/types/home/home' @@ -40,3 +41,10 @@ export const suggestionApi = { await axiosInstance.delete('/suggestions') }, } + +export const nlpApi = { + sendMessage: async (message: string): Promise => { + const res = await axiosInstance.post('/chat', { message }) + return res.data + }, +} diff --git a/src/shared/assets/icons/chat.svg b/src/shared/assets/icons/chat.svg new file mode 100644 index 00000000..a65d8e0f --- /dev/null +++ b/src/shared/assets/icons/chat.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/shared/assets/icons/robot.svg b/src/shared/assets/icons/robot.svg new file mode 100644 index 00000000..1af5cff7 --- /dev/null +++ b/src/shared/assets/icons/robot.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/shared/types/home/home.ts b/src/shared/types/home/home.ts index c6a74c67..732e8dcd 100644 --- a/src/shared/types/home/home.ts +++ b/src/shared/types/home/home.ts @@ -45,3 +45,33 @@ export interface SuggestionListResponse { details: Suggestion[] } } + +//챗봇 관련 type +export type ChatActionType = 'CREATED' | 'UPDATED' | 'DELETED' | 'CLARIFYING' | 'NONE' +export type ScheduleType = 'EVENT' | 'TODO' + +export interface ChatRequest { + message: string +} + +export interface ChatResponseResult { + reply: string + action: ChatActionType + scheduleId: number | null + recurrenceGroupId: number | null + scheduleType: ScheduleType | null +} + +export interface ChatResponse { + isSuccess: boolean + code: string + message: string + result: ChatResponseResult | null +} + +export interface ChatMessage { + id: string + sender: 'user' | 'bot' + text: string + action?: ChatActionType +} From 0edac071c56745a695ba40c803a687f84740e74a Mon Sep 17 00:00:00 2001 From: yujin5959 Date: Tue, 2 Jun 2026 21:32:24 +0900 Subject: [PATCH 3/4] =?UTF-8?q?refactor:=20queryKey=20=EB=AC=B4=ED=9A=A8?= =?UTF-8?q?=ED=99=94=20=EC=B2=98=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/features/Common/AIChatModal.tsx | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/features/Common/AIChatModal.tsx b/src/features/Common/AIChatModal.tsx index 4b932d21..42061677 100644 --- a/src/features/Common/AIChatModal.tsx +++ b/src/features/Common/AIChatModal.tsx @@ -1,3 +1,4 @@ +import { useQueryClient } from '@tanstack/react-query' // 1. useQueryClient 임포트 import React, { useEffect, useRef, useState } from 'react' import { nlpApi } from '@/shared/api/home/home' @@ -9,6 +10,7 @@ import { SparkleIcon } from '../Home/Icon/SparkleIcon' import * as S from './AIChatModal.styles' function AIChatModal() { + const queryClient = useQueryClient() const [inputValue, setInputValue] = useState('') const [messages, setMessages] = useState([]) const [isLoading, setIsLoading] = useState(false) @@ -45,6 +47,12 @@ function AIChatModal() { action: response.result.action, } setMessages((prev) => [...prev, botMessage]) + + if (response.result.action === 'UPDATED') { + queryClient.invalidateQueries({ queryKey: ['calendar'] }) + queryClient.invalidateQueries({ queryKey: ['events'] }) + queryClient.invalidateQueries({ queryKey: ['todos'] }) + } } else { setMessages((prev) => [ ...prev, From e5d5810e659ad40a051b1e6ac6564869863e2fcc Mon Sep 17 00:00:00 2001 From: yujin5959 Date: Tue, 2 Jun 2026 21:51:37 +0900 Subject: [PATCH 4/4] =?UTF-8?q?fix:=20=EA=B8=B0=EC=A1=B4=20=EC=84=9C?= =?UTF-8?q?=EB=B9=84=EC=8A=A4=20=EB=A1=9C=EA=B3=A0=20=EC=88=98=EC=A0=95=20?= =?UTF-8?q?=EB=B0=8F=20Navbar=20=EB=B0=98=EC=98=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/logo.svg | 109 ++++++-------------------- src/shared/ui/Header/Header.styles.ts | 2 +- 2 files changed, 24 insertions(+), 87 deletions(-) diff --git a/src/assets/logo.svg b/src/assets/logo.svg index 9a73fb71..be9f287e 100644 --- a/src/assets/logo.svg +++ b/src/assets/logo.svg @@ -1,101 +1,38 @@ - - - - - - - - - - - - - - - - - - - - - - - + + + + + - + - - + + + - - - - - - + + - - + + - - - - - - + + - - + + - - - - - + + - - - + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + - - - - diff --git a/src/shared/ui/Header/Header.styles.ts b/src/shared/ui/Header/Header.styles.ts index 7874f4e1..a55ee57e 100644 --- a/src/shared/ui/Header/Header.styles.ts +++ b/src/shared/ui/Header/Header.styles.ts @@ -35,7 +35,7 @@ export const LogoLink = styled(NavLink)` ` export const Logo = styled.img` - height: 32px; + height: 50px; width: auto; cursor: pointer; `