diff --git a/src/pages/main/index.tsx b/src/pages/main/index.tsx index 0e44711..51018b7 100644 --- a/src/pages/main/index.tsx +++ b/src/pages/main/index.tsx @@ -2,26 +2,12 @@ import { useState, useEffect } from "react"; import { MessageInput } from "./message-input"; import { MessageList } from "./message-list"; import { Sidebar } from "./sidebar"; -import { Button } from "@chakra-ui/react"; import styled from "@emotion/styled"; -import axios from "axios"; - -const KAKAO_AUTH_URL = `http://127.0.0.1:8080`; const MainPage = () => { const [messages, setMessages] = useState([]); const [inputMessage, setInputMessage] = useState(""); - const [isSidebarOpen, setSidebarOpen] = useState(true); - const [isLoggedIn, setIsLoggedIn] = useState(false); - const [userInfo, setUserInfo] = useState({ name: "", email: "" }); - - useEffect(() => { - const kakaoToken = localStorage.getItem("kakaoToken"); - if (kakaoToken) { - setIsLoggedIn(true); - fetchUserInfo(kakaoToken); - } - }, []); + const [isSidebarOpen, setSidebarOpen] = useState(false); const handleSendMessage = () => { if (inputMessage.trim()) { @@ -39,28 +25,6 @@ const MainPage = () => { setSidebarOpen((prev) => !prev); }; - const handleKakaoLogin = () => { - window.location.href = KAKAO_AUTH_URL; - }; - - const fetchUserInfo = async (token: string) => { - try { - const response = await axios.get( - "http://127.0.0.1:8080/api/member/info", - { - headers: { - Authorization: `Bearer ${token}`, - }, - } - ); - if (response.status === 200) { - setUserInfo(response.data); - } - } catch (error) { - console.error("사용자 정보를 불러오는 중 오류 발생:", error); - } - }; - return ( <> @@ -68,25 +32,6 @@ const MainPage = () => { -
- {!isLoggedIn ? ( - - 카카오 로그인 - - ) : ( - -

{userInfo.name}님 환영합니다!

- -
- )} -
= ({ isOpen, toggleSidebar }) => { + const handleKakaoLogin = () => { + window.location.href = "http://127.0.0.1:8080"; + }; + return ( <> @@ -49,8 +53,38 @@ export const Sidebar: React.FC = ({ isOpen, toggleSidebar }) => { style={{ width: "100px", height: "100px" }} /> + + + )} + {isOpen && ( + + )} ); @@ -94,8 +128,8 @@ const ToggleButton = styled(IconButton)` } &:hover { - background-color: #e0a89b; - transform: translateY(-50%) scale(1.1); + background-color: #fcb9aa; + transform: translateY(-50%) scale(1.2); } `; @@ -105,3 +139,36 @@ const Divider = styled.hr` border-top: 1px solid white; margin: 20px 0; `; + +const Footer = styled(Box)` + position: absolute; + bottom: 0; + padding: 20px; + font-size: 12px; + line-height: 1.5; + text-align: left; + color: white; + width: 100%; + margin-left: auto; + margin-right: auto; +`; + +const KakaoLoginButton = styled(Button)` + margin-top: 20px; + background-color: transparent; + border: none; + padding: 0; + display: flex; + align-items: center; + justify-content: center; + + &:hover { + background-color: transparent; + } +`; + +const KakaoLoginImage = styled.img` + width: 300px; + height: 45px; + filter: brightness(1.2); +`;