[feat] 2-1 화면 구성 (#31)

* rename : Rename pull_request_template.md to pull_request_template.md * feat : 전역 스타일링 설정 * feat : #2-1 화면 구성 * fix : Logo를 컴포넌트로 변경 * fix : 모달 컴포넌트 오류 수정 * feat : #2-1 화면 구성 * feat : #2-1 화면 구성 --------- Co-authored-by: ChoiSangwon <[email protected]>
boostcampwm2023 · Nov 15, 2023 · 9571712 · 9571712
1 parent 305dba7
commit 9571712
Show file tree

Hide file tree

Showing 20 changed files with 425 additions and 39 deletions.
diff --git a/client/src/App.tsx b/client/src/App.tsx
@@ -1,13 +1,19 @@
 import { Route, Routes } from 'react-router-dom'
-import HomePage from './pages/HomePage/HomePage'
-import ExPage from './pages/ExPage/ExPage'
+import GlobalStyle from '@/styles/GlobalStyles.styles'
+import HomePage from '@/pages/HomePage/HomePage'
+import ExPage from '@/pages/ExPage/ExPage'
+import BroadcastPage from '@/pages/BroadcastPage/BroadcastPage'
 
 function App() {
   return (
-    <Routes>
-      <Route path="/" element={<HomePage />} />
-      <Route path="/exPage" element={<ExPage />} />
-    </Routes>
+    <>
+      <GlobalStyle />
+      <Routes>
+        <Route path="/" element={<HomePage />} />
+        <Route path="/exPage" element={<ExPage />} />
+        <Route path="/broadcastPage" element={<BroadcastPage />} />
+      </Routes>
+    </>
   )
 }
 

diff --git a/client/src/assets/images/box-logo.svg b/client/src/assets/images/box-logo.svg
diff --git a/client/src/assets/images/wide-logo.svg b/client/src/assets/images/wide-logo.svg
diff --git a/client/src/components/Access/Access.styles.tsx b/client/src/components/Access/Access.styles.tsx
@@ -0,0 +1,18 @@
+import styled from 'styled-components'
+import TYPO from '@/styles/typo/TYPO'
+
+export const Container = styled.div`
+  display: flex;
+  justify-content: right;
+  gap: 0rem 1rem;
+  width: 12.5rem;
+  height: 2.25rem;
+`
+
+export const Access = styled.div`
+  ${TYPO.MEDIUM_M}
+  display: flex;
+  align-items: center;
+  justify-content: right;
+  cursor: pointer;
+`
diff --git a/client/src/components/Access/Access.tsx b/client/src/components/Access/Access.tsx
@@ -0,0 +1,17 @@
+import * as styles from './Access.styles'
+
+interface AccessComponentProps {
+  leftButton: string
+  rightButton: string
+}
+
+const Access = ({ leftButton, rightButton }: AccessComponentProps) => {
+  return (
+    <styles.Container>
+      <styles.Access>{leftButton}</styles.Access>
+      <styles.Access>{rightButton}</styles.Access>
+    </styles.Container>
+  )
+}
+
+export default Access
diff --git a/client/src/components/Chatting/Chatting.styles.tsx b/client/src/components/Chatting/Chatting.styles.tsx
@@ -0,0 +1,21 @@
+import styled from 'styled-components'
+import TYPO from '@/styles/typo/TYPO'
+
+export const Container = styled.div`
+  display: flex;
+  gap: 0rem 1rem;
+  justify-content: left;
+  padding: 0rem 1rem 0rem 1rem;
+  width: 100%;
+  height: max-content;
+`
+
+export const Id = styled.div`
+  ${TYPO.BOLD_R}
+  line-height: 2rem;
+`
+
+export const Context = styled.div`
+  ${TYPO.LIGHT_R}
+  line-height: 2rem;
+`
diff --git a/client/src/components/Chatting/Chatting.tsx b/client/src/components/Chatting/Chatting.tsx
@@ -0,0 +1,17 @@
+import * as styles from './Chatting.styles'
+
+interface AccessComponentProps {
+  id: string
+  context: string
+}
+
+const AccessComponent = ({ id, context }: AccessComponentProps) => {
+  return (
+    <styles.Container>
+      <styles.Id>{id}</styles.Id>
+      <styles.Context>{context}</styles.Context>
+    </styles.Container>
+  )
+}
+
+export default AccessComponent
diff --git a/client/src/components/hls/index.tsx → ...nt/src/components/HlsPlayer/HlsPlayer.tsx b/client/src/components/hls/index.tsx → ...nt/src/components/HlsPlayer/HlsPlayer.tsx
diff --git a/client/src/components/Logo/Logo.styles.tsx b/client/src/components/Logo/Logo.styles.tsx
@@ -0,0 +1,17 @@
+import styled from 'styled-components'
+
+interface LogoProps {
+  logo: string
+}
+
+export const Logo = styled.img<LogoProps>`
+  width: 12.5rem;
+  height: ${(props) => {
+    if (props.logo === 'wide') {
+      return '6.25rem'
+    } else {
+      return '12.5rem'
+    }
+  }};
+  cursor: pointer;
+`
diff --git a/client/src/components/Logo/Logo.tsx b/client/src/components/Logo/Logo.tsx
@@ -0,0 +1,13 @@
+import * as styles from './Logo.styles'
+
+interface LogoComponentProps {
+  logo: 'wide' | 'box'
+}
+
+const Logo = ({ logo }: LogoComponentProps) => {
+  const src = logo === 'wide' ? '/src/assets/images/wide-logo.svg' : '/src/assets/images/box-logo.svg'
+
+  return <styles.Logo src={src} logo={logo} />
+}
+
+export default Logo
diff --git a/client/src/components/Modal/LoginModal/LoginModal.styles.tsx b/client/src/components/Modal/LoginModal/LoginModal.styles.tsx
@@ -1,14 +1,14 @@
 import styled from 'styled-components'
-import TYPO from '../../../styles/typo/TYPO'
+import TYPO from '@/styles/typo/TYPO'
 
 export const Backdrop = styled.div`
   position: fixed;
   top: 0;
   left: 0;
+  z-index: 10;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.5);
-  z-index: 10;
 `
 
 export const Container = styled.div`
@@ -17,61 +17,62 @@ export const Container = styled.div`
 
 export const Modal = styled(Backdrop)`
   display: flex;
-  justify-content: center;
   align-items: center;
+  justify-content: center;
   text-align: center;
 `
 
 export const ModalView = styled.div`
   display: flex;
-  flex-direction: column;
   justify-content: space-between;
-  background-color: white;
-  border-radius: 10px;
+  flex-direction: column;
   width: 32rem;
   height: 20rem;
+  background-color: white;
   transition: height 0.5s ease;
+  border-radius: 10px;
 `
+
 export const HeaderText = styled.div`
   ${TYPO.BOLD_M}
   padding-top: 15px;
   padding-bottom: 15px;
 `
+
 export const BodyText = styled.div`
   ${TYPO.MEDIUM_M}
   display: flex;
   justify-content: start;
 `
 
 export const InputBox = styled.div`
-  margin-bottom: 15px;
   display: flex;
   flex-direction: column;
+  margin-bottom: 15px;
 `
 
 export const Input = styled.input`
   ${TYPO.LIGHT_M}
-  background-color: #e6e6e6;
   border: none;
   height: 36px;
+  background-color: #e6e6e6;
   border-radius: 10px;
 `
 
 export const ButtonContainer = styled.div`
-  bottom: 0px;
-  height: 75px;
   display: flex;
-  justify-content: center;
   align-items: center;
+  justify-content: center;
+  bottom: 0px;
+  height: 75px;
 `
 
 export const Button = styled.div`
   ${TYPO.MEDIUM_M}
-  width: 100%;
-  height: 100%;
-
   display: flex;
-  justify-content: center;
   align-items: center;
+  justify-content: center;
   border: 1px solid black;
+  width: 100%;
+  height: 100%;
 `
diff --git a/client/src/components/Modal/LoginModal/LoginModal.tsx b/client/src/components/Modal/LoginModal/LoginModal.tsx
@@ -1,4 +1,5 @@
 import { useState } from 'react'
+
 import * as styles from './LoginModal.styles'
 
 interface LoginModalProps {

diff --git a/client/src/components/Modal/RegisterModal/RegisterModal.styles.tsx b/client/src/components/Modal/RegisterModal/RegisterModal.styles.tsx
@@ -1,14 +1,14 @@
 import styled from 'styled-components'
-import TYPO from '../../../styles/typo/TYPO'
+import TYPO from '@/styles/typo/TYPO'
 
 export const Backdrop = styled.div`
   position: fixed;
   top: 0;
   left: 0;
+  z-index: 10;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.5);
-  z-index: 10;
 `
 
 export const Container = styled.div`
@@ -17,20 +17,20 @@ export const Container = styled.div`
 
 export const Modal = styled(Backdrop)`
   display: flex;
-  justify-content: center;
   align-items: center;
+  justify-content: center;
   text-align: center;
 `
 
 export const ModalView = styled.div`
   display: flex;
-  flex-direction: column;
   justify-content: space-between;
-  background-color: white;
-  border-radius: 10px;
+  flex-direction: column;
   width: 32rem;
   height: 24rem;
+  background-color: white;
   transition: height 0.5s ease;
+  border-radius: 10px;
 `
 export const HeaderText = styled.div`
   ${TYPO.BOLD_M}
@@ -43,34 +43,33 @@ export const BodyText = styled.div`
 `
 
 export const InputBox = styled.div`
-  margin-bottom: 15px;
   display: flex;
   flex-direction: column;
+  margin-bottom: 15px;
 `
 
 export const Input = styled.input`
-  ${TYPO.REGULAR_M}
-  background-color: #e6e6e6;
+  ${TYPO.LIGHT_M}
   border: none;
   height: 36px;
+  background-color: #e6e6e6;
   border-radius: 10px;
 `
 
 export const ButtonContainer = styled.div`
-  bottom: 0px;
-  height: 75px;
   display: flex;
-  justify-content: center;
   align-items: center;
+  justify-content: center;
+  bottom: 0px;
+  height: 75px;
 `
 
 export const Button = styled.div`
   ${TYPO.MEDIUM_M}
-  width: 100%;
-  height: 100%;
-
   display: flex;
-  justify-content: center;
   align-items: center;
+  justify-content: center;
   border: 1px solid black;
+  width: 100%;
+  height: 100%;
 `
diff --git a/client/src/main.tsx b/client/src/main.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
-import App from './App.tsx'
 import { BrowserRouter } from 'react-router-dom'
+import App from '@/App.tsx'
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>