Merge pull request #147 from JJongBin/develop

메인 로고 및 소개버튼
boostcampwm-2022 · Dec 5, 2022 · c60c2dd · c60c2dd
2 parents ffdf84c + 09a2483
commit c60c2dd
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 7 deletions.
diff --git a/frontend/src/component/Background/background.styled.ts b/frontend/src/component/Background/background.styled.ts
@@ -2,7 +2,7 @@ import { css } from '@emotion/react';
 import theme from '../../styles/theme';
 
 export const header = css`
-  position: absolute;
+  position: sticky;
   top: 0;
   left: 0;
   padding: 20px;
@@ -16,6 +16,17 @@ export const teamBtn = css`
   border-radius: 20px;
   font-weight: 700;
   z-index: 1000;
+  opacity: 0.8;
+  transition: 0.2s;
+
+  cursor: pointer;
+  color: ${theme.black};
+  text-decoration: none;
+  margin-left: 10px;
+
+  :hover {
+    opacity: 1;
+  }
 `;
 
 export const main = css`

diff --git a/frontend/src/component/Background/index.tsx b/frontend/src/component/Background/index.tsx
@@ -1,14 +1,24 @@
+import { Link } from 'react-router-dom';
 import { childrenType } from '../../types/types';
 import { header, teamBtn, main, video } from './background.styled';
 
 const Background = ({ children }: childrenType) => {
+  const notion =
+    'https://www.notion.so/boostcamp-wm/Web05-Phaser-Socket-WebRTC-4913d5b6116f4c37be84340703eb8a8d';
+  const github = 'https://github.com/boostcampwm-2022/web05-SleepyWoods';
+
   return (
     <>
       <video css={video} src="src/assets/background.mp4" autoPlay loop muted>
         배경 영상
       </video>
       <header css={header}>
-        <button css={teamBtn}>팀 소개</button>
+        <a href={github} css={teamBtn} target="_blank">
+          Github
+        </a>
+        <a href={notion} css={teamBtn} target="_blank">
+          프로젝트 소개
+        </a>
       </header>
       <main css={main}>{children}</main>
     </>

diff --git a/frontend/src/component/Button/button.styled.ts b/frontend/src/component/Button/button.styled.ts
@@ -18,10 +18,15 @@ export const button = (type: string) => css`
   height: 50px;
   background-color: ${type === 'dark' ? theme.black : theme.white};
   color: ${type === 'dark' ? theme.white : theme.black};
-  opacity: 0.9;
+  opacity: 0.8;
   border-radius: 20px;
   font-weight: 700;
   text-align: center;
+  transition: 0.3s;
+
+  :hover {
+    opacity: 1;
+  }
 `;
 
 export const signButton = (type: string) => css`

diff --git a/frontend/src/component/MainContent/index.tsx b/frontend/src/component/MainContent/index.tsx
@@ -4,7 +4,8 @@ import { useRecoilValue } from 'recoil';
 import { userState } from '../../store/atom/user';
 import { MainButton } from '../Button';
 import { buttons } from '../Button/button.styled';
-import { container, logo } from './mainContent.styled';
+import logo from '../../assets/logo.png';
+import * as style from './mainContent.styled';
 
 const ClientButton = () => {
   const handleLogoutEvent = async () => {
@@ -39,8 +40,8 @@ const MainContent = () => {
   const user = useRecoilValue(userState);
 
   return (
-    <section css={container}>
-      <h1 css={logo}>Sleepy Woods</h1>
+    <section css={style.container}>
+      <img src={logo} css={style.logo} alt="슬리피우드 로고 이미지"></img>
       <div css={buttons}>
         {user.nickname ? <ClientButton /> : <GuestButton />}
       </div>

diff --git a/frontend/src/component/MainContent/mainContent.styled.ts b/frontend/src/component/MainContent/mainContent.styled.ts
@@ -20,5 +20,6 @@ export const container = css`
 export const logo = css`
   font-size: 64px;
   font-weight: 700;
-  color: ${theme.white};
+  filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, 0.4));
+  margin-bottom: 50px;
 `;