13일차
2024. 8. 6. 14:39ㆍFCB2O4
어제 react-full-screen 라이브러리를 다운 받고 FullScreen을 사용해 전체화면으로 전환하는 버튼을 만들었는데 오늘 그것들이 무의미한 행동이었음을 깨달음.
그냥 video 태그에 controls 속성을 부여했으면 재생버튼, 전체화면 버튼이 자체적으로 달려 있던 것.
따라서 어제 작성한
//yarn add react-full-screen
import { FullScreen, useFullScreenHandle } from 'react-full-screen';
// 중략...
const handleFullScreen = useFullScreenHandle();
//중략...
{webCamView ?
<FullScreen handle={handleFullScreen} >
<video className='webcam' ref={videoRef}/>
</FullScreen> :
<span className='blackScreen' style={{ display: 'flex' }}>
<p>준비 중 입니다.</p>
</span>
}
이 코드들은 그냥 삭제.
<video className='webcam' ref={videoRef} controls/>
video에 controls 속성 하나 추가.
추가로 오늘은 팀원들에게 뿌릴 헤더 푸터를 만들 예정
먼저
Header.js
//Header.js
import React from "react";
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';
import NavDropdown from 'react-bootstrap/NavDropdown';
import Form from 'react-bootstrap/Form';
import '../../css/Layout.css';
import { Link } from "react-router-dom";
const Header = () => {
return (
<header>
<div className="header-top">
<Link to="/" className="d-flex align-items-center">
<img src="/image/pngwing.com.png" className="brand-logo" alt="Brand Logo" />
</Link>
<div className="search-bar">
<Form className="d-flex">
<div className="search-input-container">
<Form.Control type="text" placeholder="통합검색" className="search-input" />
<button type="submit" className="search-button">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" className="bi bi-search" viewBox="0 0 16 16">
<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0" />
</svg>
</button>
</div>
</Form>
</div>
<div className="login-session">
{/*
{isLogin ?
<div>
<p>{memberName}님 환영합니다.</p>
<a href="#">로그아웃</a>
</div>
:
<a className="login-hypertext">로그인</a>
}
*/}
<a className="login-hypertext">로그인</a>
<div>
<p className="login-hypertext">님 환영합니다.</p>
<a href="#" className="login-hypertext">로그아웃</a>
</div>
</div>
</div>
<div className="navbar-container">
<Navbar expand="lg" className="navbar-items">
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav" className="justify-content-center">
<Nav className="d-flex">
<Nav.Link href="#link" className="item" style={{ marginLeft: "140px" }}>갤러리</Nav.Link>
<NavDropdown title="용품 장터" id="basic-nav-dropdown" className="item">
<NavDropdown.Item href="#action/3.1">메인 장터</NavDropdown.Item>
<NavDropdown.Item href="#action/3.2">중고 장터</NavDropdown.Item>
<NavDropdown.Item href="#action/3.3">장바구니</NavDropdown.Item>
</NavDropdown>
<NavDropdown title="구장 모음" id="basic-nav-dropdown" className="item">
<NavDropdown.Item href="#action/3.1">구장 목록</NavDropdown.Item>
<NavDropdown.Item href="#action/3.2">구장 찾기</NavDropdown.Item>
</NavDropdown>
<NavDropdown title="라이브" id="basic-nav-dropdown" className="item">
<NavDropdown.Item href="LiveStreamingPage">라이브 경기 보러 가기</NavDropdown.Item>
</NavDropdown>
<NavDropdown title="고객센터" id="basic-nav-dropdown" className="item">
<NavDropdown.Item href="#action/3.1">1:1문의</NavDropdown.Item>
<NavDropdown.Item href="#action/3.2">FAQ</NavDropdown.Item>
</NavDropdown>
<NavDropdown title="마이페이지" id="basic-nav-dropdown" className="item">
<NavDropdown.Item href="#action/3.1">내 정보 수정</NavDropdown.Item>
<NavDropdown.Item href="#action/3.2">평가하기</NavDropdown.Item>
</NavDropdown>
</Nav>
</Navbar.Collapse>
</Navbar>
</div>
</header>
)
}
export default Header;
다음은 Footer.js
//Footer.js
const Footer = () => {
return(
<footer className="footer">
<div className="footer-container">
<div className="icon">
<p>
<a href="https://www.facebook.com/?locale=ko_KR"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" className="bi bi-facebook" viewBox="0 0 16 16">
<path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951"/>
</svg>
</a> |
<a href="https://www.instagram.com/sem/campaign/emailsignup/?campaign_id=13530338586&extra_1=s%7Cc%7C547419126431%7Ce%7Cig%7C&placement=&creative=547419126431&keyword=ig&partner_id=googlesem&extra_2=campaignid%3D13530338586%26adgroupid%3D126262418054%26matchtype%3De%26network%3Dg%26source%3Dnotmobile%26search_or_content%3Ds%26device%3Dc%26devicemodel%3D%26adposition%3D%26target%3D%26targetid%3Dkwd-116669079%26loc_physical_ms%3D9195692%26loc_interest_ms%3D%26feeditemid%3D%26param1%3D%26param2%3D&gad_source=1&gclid=CjwKCAjwps-zBhAiEiwALwsVYUBgTuB3XuK7LyzjibLzvY0s91HDUhOrJNM4Lv7Ngt3VPzOaoUzARBoCu8QQAvD_BwE">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" className="bi bi-instagram" viewBox="0 0 16 16">
<path d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.9 3.9 0 0 0-1.417.923A3.9 3.9 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.9 3.9 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.9 3.9 0 0 0-.923-1.417A3.9 3.9 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599s.453.546.598.92c.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.5 2.5 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.5 2.5 0 0 1-.92-.598 2.5 2.5 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233s.008-2.388.046-3.231c.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92s.546-.453.92-.598c.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92m-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217m0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334"/>
</svg>
</a> |
<a href="https://www.youtube.com/?hl=ko&gl=KR&app=desktop">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" className="bi bi-youtube" viewBox="0 0 16 16">
<path d="M8.051 1.999h.089c.822.003 4.987.033 6.11.335a2.01 2.01 0 0 1 1.415 1.42c.101.38.172.883.22 1.402l.01.104.022.26.008.104c.065.914.073 1.77.074 1.957v.075c-.001.194-.01 1.108-.082 2.06l-.008.105-.009.104c-.05.572-.124 1.14-.235 1.558a2.01 2.01 0 0 1-1.415 1.42c-1.16.312-5.569.334-6.18.335h-.142c-.309 0-1.587-.006-2.927-.052l-.17-.006-.087-.004-.171-.007-.171-.007c-1.11-.049-2.167-.128-2.654-.26a2.01 2.01 0 0 1-1.415-1.419c-.111-.417-.185-.986-.235-1.558L.09 9.82l-.008-.104A31 31 0 0 1 0 7.68v-.123c.002-.215.01-.958.064-1.778l.007-.103.003-.052.008-.104.022-.26.01-.104c.048-.519.119-1.023.22-1.402a2.01 2.01 0 0 1 1.415-1.42c.487-.13 1.544-.21 2.654-.26l.17-.007.172-.006.086-.003.171-.007A100 100 0 0 1 7.858 2zM6.4 5.209v4.818l4.157-2.408z"/>
</svg>
</a> |
<a href="https://x.com/?lang=ko">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" className="bi bi-twitter-x" viewBox="0 0 16 16">
<path d="M12.6.75h2.454l-5.36 6.142L16 15.25h-4.937l-3.867-5.07-4.425 5.07H.316l5.733-6.57L0 .75h5.063l3.495 4.633L12.601.75Zm-.86 13.028h1.36L4.323 2.145H2.865z"/>
</svg>
</a>
</p>
</div>
<p>© SKILLFUL SPORTS. All Rights Reserved.</p>
<p>
<a href="#">개인정보처리방침</a> | <a href="#">이용약관</a>
</p>
<hr style={{borderColor:"white"}}/>
<p style={{fontSize: "small"}}>서울특별시 강남구 대치동 509-2 강남구의회, 강남구민회관 | 509-2, Daechi-dong, Gangnam-gu, Seoul</p>
<p style={{fontSize: "small"}}>사업자등록번호 211-86-49403 | 대표전화 010-7434-8494</p>
</div>
</footer>
)
}
export default Footer;
추가로 이 둘을 받는 css
//Layout.css
/* 헤더*/
header {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
border-bottom:1px solid #333;
box-shadow: 0 0 5px #333;
}
.header-top {
display: flex;
align-items: center;
width: 100%;
padding: 10px;
}
.brand-logo {
margin-left: 50px;
padding: 10px;
width: 170px;
}
.search-bar {
margin-left: 350px;
flex: 1;
max-width: 800px;
padding: 10px;
background-color: #ffffff;
position: relative;
}
.search-input-container {
flex: 1;
position: relative;
}
.search-input {
padding-right: 40px;
}
.search-button {
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
border: none;
background: none;
padding: 0;
cursor: pointer;
}
.navbar-container {
width: 100%;
background-color: white;
}
.navbar-items{
justify-content :center;
}
.item{
margin-right: 150px;
}
.login-session {
position: absolute;
top: 10px;
right: 10px;
}
.login-hypertext{
font-size: small;
font-weight: bold;
margin: 0;
text-decoration: none;
color: black;
}
/* 푸터 */
.footer{
background-color: darkgreen;
color: #fff;
padding: 20px 0;
text-align: center;
width: 100%;
margin-top: 200px;
}
.footer-content{
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.footer a{
color: #fff;
margin: 0 10px;
text-decoration: none;
}
.footer-links a:hover{
text-decoration: underline;
}
빈 페이지에 헤더 푸터 넣은 화면
우 상단 로그인 부분은 나중에 로그인 세션과 연결했을 때 수정할 예정.