SKRF-136 design: 스클 홈 로고(임시) (#11)

* design: 스클 홈 로고(임시)

* install: emotion/styled install

* fix: themeProvider 안 쓰는 prop 지움

* rename: 스타일 파일 분리

* conflict: theme 컬러 추가하여 해결

src/componenets/common/SpaceClubHomeLogo/SpaceClubHomeLogo.style.ts

@@ -0,0 +1,37 @@
+import Theme from '@/styles/Theme';
+import styled from '@emotion/styled';
+
+const ContainerStyled = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 15rem;
+  height: 4rem;
+`;
+
+const LogoCircleStyled = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 3rem;
+  height: 3rem;
+  border-radius: 50%;
+  background: linear-gradient(
+    139deg,
+    #012a36 10.1%,
+    rgba(50, 51, 96, 0.78) 46.84%,
+    rgba(113, 42, 124, 0.51) 69.53%,
+    rgba(0, 221, 49, 0.15) 88.79%
+  );
+  overflow: visible;
+  cursor: pointer;
+`;
+
+const LogoTextStyled = styled.div`
+  color: ${Theme.color.logoTextColor};
+  font-family: 'LogoFont';
+  font-size: x-large;
+  text-shadow: 0.2rem 0.2rem 0.2rem rgba(50, 51, 96, 0.78);
+`;
+
+export { ContainerStyled, LogoCircleStyled, LogoTextStyled };

src/componenets/common/SpaceClubHomeLogo/SpaceClubHomeLogo.tsx

@@ -0,0 +1,17 @@
+import { useNavigate } from 'react-router-dom';
+
+import { ContainerStyled, LogoCircleStyled, LogoTextStyled } from './SpaceClubHomeLogo.style';
+
+const SpaceClubHomeLogo = () => {
+  const navigate = useNavigate();
+
+  return (
+    <ContainerStyled onClick={() => navigate('/')}>
+      <LogoCircleStyled>
+        <LogoTextStyled>Space_Club</LogoTextStyled>
+      </LogoCircleStyled>
+    </ContainerStyled>
+  );
+};
+
+export default SpaceClubHomeLogo;

src/styles/Theme.ts

@@ -8,6 +8,7 @@ const color = {
   black: '#000000',
   gray: '#d9d9d9',
   indigo: '#003949',
+  logoTextColor: '#fafafa',
 } as const;
 
 const componentStyle = {