-
[React MUI 5] 인스타그램 클론코딩 - Header 만들기 (desktop)프로그래밍/클론 코딩 2022. 8. 16. 12:00
결과물
데스크탑 Header Header.js 구현 과정
1. src/index.js 파일 다음과 같이 수정
import * as React from 'react'; import Box from '@mui/material/Box'; import Head from 'next/head'; import Header from '../components/Header'; export default function Index() { return ( <Box sx={{ height: '100vh' }}> <Head> <title>Instagram 2022 with MUI</title> </Head> <Header /> {/* <Feed /> */} {/* <Modal /> */} </Box> ); }sx는 MUI 5에서 css와 theme 등의 스타일을 다룰 때 메인으로 사용하는 속성
2. src/components/Header.js 생성 후 AppBar, Toolbar, Box를 사용하여 구조 잡기
import AppBar from '@mui/material/AppBar'; import Toolbar from '@mui/material/Toolbar'; import Box from '@mui/material/Box'; function Header() { return ( <AppBar position="static" color="transparent" elevation={1}> <Toolbar> <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', maxWidth: 'lg', width: '100%', mx: 'auto', }} > {/* logo */} <Box>left</Box> {/* search */} <Box>middle</Box> {/* profile */} <Box>right</Box> </Box> </Toolbar> </AppBar> ); } export default Header;
Header.js Layout 잡은 후 실행 화면
3. 인스타그램 로고(logo) 이미지 넣기
...... {/* logo */} <Box sx={{ width: '96px' }}> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2a/Instagram_logo.svg/320px-Instagram_logo.svg.png" alt="logo" width={'100%'} /> </Box> {/* search */} <Box>middle</Box> ......
로고 이미지 넣은 후 화면
4. 검색을 위한 input 넣기 (TextField)
...... import TextField from '@mui/material/TextField'; import InputAdornment from '@mui/material/InputAdornment'; import SearchIcon from '@mui/icons-material/Search'; ...... {/* search */} <Box> <TextField id="input-with-icon-textfield" placeholder="검색" InputProps={{ startAdornment: ( <InputAdornment position="start"> <SearchIcon /> </InputAdornment> ), }} // variant="standard" size="small" /> </Box> {/* profile */} <Box>right</Box> ......
검색용 TextField 넣은 후 실행 화면
5. 프로필 이미지 넣기 (Avatar)
...... import Avatar from '@mui/material/Avatar'; ...... ...... {/* profile */} <Box> <Avatar alt="Remy Sharp" src="https://" /> </Box> ......
Avatar 추가 후 실행 화면 Header 만들기 (desktop) 완료
'프로그래밍 > 클론 코딩' 카테고리의 다른 글
[React MUI 5] 인스타그램 클론코딩 - 상단 스토리(Stories) 만들기 with Faker.js (0) 2022.08.20 [React MUI 5] 인스타그램 클론코딩 - Feed Layout 구성 (0) 2022.08.19 [React MUI 5] 인스타그램 클론코딩 - Header 오른쪽 상단 네비게이션 아이콘들 넣기 (0) 2022.08.18 [React MUI 5] 인스타그램 클론코딩 - Header 만들기 (mobile) (0) 2022.08.17 [React MUI 5] 인스타그램 클론코딩 - NextJS, MUI 환경 설정 (0) 2022.08.15