Skip to content

Commit

Permalink
feat: 사이드바로 로그인 버튼 이동, 학부 정보 추가
Browse files Browse the repository at this point in the history
  • Loading branch information
@gogumalatte
gogumalatte committed Nov 8, 2024
1 parent 3ec6e57 commit f985d38
Show file tree
Hide file tree
Showing 2 changed files with 71 additions and 88 deletions.
86 changes: 1 addition & 85 deletions src/pages/main/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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<string[]>([]);
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()) {
Expand All @@ -39,54 +25,13 @@ 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 (
<>
<SidebarWrapper isOpen={isSidebarOpen}>
<Sidebar isOpen={isSidebarOpen} toggleSidebar={toggleSidebar} />
</SidebarWrapper>

<Wrapper>
<Header>
{!isLoggedIn ? (
<KakaoLoginButton onClick={handleKakaoLogin}>
카카오 로그인
</KakaoLoginButton>
) : (
<UserInfo>
<p>{userInfo.name}님 환영합니다!</p>
<Button
onClick={() => {
localStorage.removeItem("kakaoToken");
setIsLoggedIn(false);
}}
>
로그아웃
</Button>
</UserInfo>
)}
</Header>
<MessageList messages={messages} />
<MessageInput
inputMessage={inputMessage}
Expand Down Expand Up @@ -119,32 +64,3 @@ const Wrapper = styled.div`
margin-left: 0;
transition: margin-left 0.3s ease-in-out;
`;

// 헤더 스타일 (카카오 로그인 버튼을 위한 상단 영역)
const Header = styled.div`
position: fixed;
top: 10px;
right: 10px;
z-index: 1000;
display: flex;
align-items: center;
`;

// 카카오 로그인 버튼 스타일
const KakaoLoginButton = styled(Button)`
background-color: #fee500;
color: #000;
&:hover {
background-color: #ffd700;
}
`;

// 사용자 정보 스타일
const UserInfo = styled.div`
display: flex;
align-items: center;
gap: 10px;
p {
margin: 0;
}
`;
73 changes: 70 additions & 3 deletions src/pages/main/sidebar/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
// sidebar.tsx

import { Box, IconButton, Flex } from "@chakra-ui/react";
import { Box, IconButton, Flex, Link, Button } from "@chakra-ui/react";
import { ArrowForwardIcon, ArrowBackIcon } from "@chakra-ui/icons";
import styled from "@emotion/styled";
import knuLogo from "@/assets/knuLogo.svg";
Expand All @@ -11,6 +11,10 @@ interface SidebarProps {
}

export const Sidebar: React.FC<SidebarProps> = ({ isOpen, toggleSidebar }) => {
const handleKakaoLogin = () => {
window.location.href = "http://127.0.0.1:8080";
};

return (
<>
<SidebarContainer isOpen={isOpen}>
Expand Down Expand Up @@ -49,8 +53,38 @@ export const Sidebar: React.FC<SidebarProps> = ({ isOpen, toggleSidebar }) => {
style={{ width: "100px", height: "100px" }}
/>
<Divider />
<KakaoLoginButton onClick={handleKakaoLogin}>
<KakaoLoginImage
src="https://developers.kakao.com/tool/resource/static/img/button/login/full/ko/kakao_login_large_wide.png"
alt="카카오 로그인"
/>
</KakaoLoginButton>
</Flex>
)}
{isOpen && (
<Footer>
<p>경북대학교 IT대학 컴퓨터학부</p>
<p>
우)41566 대구광역시 북구 대학로 80 / IT대학 융복합관
317호(건물번호 : 415)
</p>
<p>TEL. 학부 : 950-5550 , 대학원 : 950-6420 </p>
<p>FAX. 053-957-4846</p>
<p>E-mail. [email protected]</p>
<p>
담당자 현황:
<Link
href="https://computer.knu.ac.kr/bbs/board.php?bo_table=sub2_5"
color="white"
fontWeight="bold"
textDecoration="Highlight"
>
링크 연결
</Link>
</p>
<p>Copyright(c) 2024, KNU CSE All rights reserved</p>
</Footer>
)}
</SidebarContainer>
</>
);
Expand Down Expand Up @@ -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);
}
`;

Expand All @@ -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);
`;

0 comments on commit f985d38

Please sign in to comment.