React Responsive웹 (2)

리린·2021년 8월 25일

React

목록 보기

22/47

Services

scr/components/Services 폴더 만들기
index.js 와 ServiceElements.js 파일 만들기
index.js 에 다음과 같이 작성하기

import React from 'react'
import Icon1 from '../../images/svg-1.svg'
import Icon2 from '../../images/svg-2.svg'
import Icon3 from '../../images/svg-3.svg'
import {ServicesContainer, ServicesH1, ServicesWrapper, ServicesCard, ServicesIcon, ServicesH2, ServicesP} from './ServiceElements'

const Services = () => {
  return (
    <ServicesContainer id='services'>
      <ServicesH1>Our services</ServicesH1>
      <ServicesWrapper>
        <ServicesCard>
          <ServicesIcon src={Icon1}/>
          <ServicesH2>Reduce expenses</ServicesH2>
          <ServicesP>We help your fess and increase your overall revenue.</ServicesP>
        </ServicesCard>
        <ServicesCard>
        <ServicesIcon src={Icon2}/>
          <ServicesH2>Virtual Offices</ServicesH2>
          <ServicesP>you can acess our plataform online anywhere in the world.</ServicesP>
        </ServicesCard>
        <ServicesCard>
          <ServicesIcon src={Icon3}/>
          <ServicesH2>Reduce expenses</ServicesH2>
          <ServicesP>Unlock our special membership card that returns 5% cash back.</ServicesP>
        </ServicesCard>
      </ServicesWrapper>
    </ServicesContainer>
  )
}

export default Services

1) 컴포넌트부터 추가하기
2) props만들기

import {ServicesContainer, ServicesH1, ServicesWrapper, ServicesCard, ServicesIcon, ServicesH2, ServicesP} from './ServiceElements'

3) Icon들 가져오기

import Icon1 from '../../images/svg-1.svg'
import Icon2 from '../../images/svg-2.svg'
import Icon3 from '../../images/svg-3.svg'

3)
ServiceCard 복붙해서 여러 개 만들기
3)

src/pages/index.js 작성하기

import React, {useState} from 'react'
import Footer from '../components/Footer';
import Hero from '../components/Hero'
import Info from '../components/Info'
import { homeObjOne, homeObjTwo, homeObjThree} from '../components/Info/Data';
import Navbar from '../components/Navbar'
import Services from '../components/Services';
import Sidebar from '../components/SideBar'

const Home = () => {
  const [isOpen, setIsOpen] = useState(false)

  const toggle = () =>{
    setIsOpen(!isOpen);
  }

  return (
    <>
      <Sidebar isOpen={isOpen} toggle={toggle} />
      <Navbar toggle={toggle}/>
      <Hero />
      <Info {...homeObjOne}/>
      <Info {...homeObjTwo}/>
      <Services />
      <Info {...homeObjThree}/>
      <Footer />
    </>
  )
}

export default Home

1) 컴포넌트 가져오기/추가
2) Service의 경우 딱히 props의 값은 없다.

ServiceElements.js 다음과 같이 작성하기

import styled from 'styled-components'

export const ServicesContainer = styled.div`
  height: 800px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #010606;

  @media screen and (max-width: 768px) {
    height: 1100px;
  }

  @media screen and (max-width: 480px) {
    height: 1300px;
  }
 `
export const ServicesWrapper = styled.div`
    max-width: 1000px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
    grid-gap: 16px;
    padding: 0 50px;

    @media screen and (max-width: 1000px) {
      grid-template-columns: 1fr 1fr;
  }

    @media screen and (max-width: 786px) {
      grid-template-columns: 1fr;
      padding: 0 20px;
  }
`
export const ServicesCard = styled.div`
  background: #fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  border-radius: 10px;
  max-height: 340px;
  padding:  30px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  transition: all 0.2s ease-in-out;

  &:hover {
    transform: scale(1.02);
    transition: all 0.2s ease-in-out;
    cursor:pointer;
  }
`
export const ServicesIcon = styled.img`
  height: 160px;
  width: 160px;
  margin-bottom: 10px;

`
export const ServicesH1 = styled.h1`
  font-size: 2.5rem;
  color: #fff;
  margin-bottom: 64px;

  @media screen and (max-width: 480px) {
    font-size: 2rem;
  }  
`
export const ServicesH2 = styled.h2`
  font-size: 1rem;
  margin-bottom: 10px;
`

export const ServicesP = styled.p`
  font-size: 1rem;
  text-align: center;
`

1) ServicesContainer 만들기

전체를 감싸는 Container
display: flex로 설정 뒤 세로를 주축으로 하고, 정중앙에 아이템을 넣는다.
최대 width가 768px일 경우 height 는 1100px이고, 최대 480px 일 경우 height는 1300px이다( 폭이 줄어드는 만큼 높이가 더 커진다. )

2) ServicesWrapper 만들기

1)에 속해 있다.
max-width는 1000px로 고정되어 있다.
display는 grid를 사용한다
grid-template-columns는 1fr씩 3개다. (열이 3개라는 뜻 0 0 0 )
grid 사이의 gap은 16px
최대 width가 1000px일 경우 grid-template-columm은 1fr 2개로 줄어든다( 폭이 작아지니까)
최대 width가 768px일 경우 grid-template-column은 1fr 1개로 줄어든다 (폭이 더 작아지니까)

3) ServicesCard 만들기

2)에 속해 있다.
display: flex이며 상단 중앙에 위치한다
flex direction은 세로다.
border-radius는 px로 고정값을 주었다.
최대 길이는 340px이다. 그 이상이면 디자인이 미워지니까.
box-shadow 값도 설정해준다.
전체 transition 도 설정해준다.
hover 이벡트가 생길 경우 1.02배 커지며, 이는 transition 규칙을 따른다. cursor는 덤이다.

4) ServicesIcon 만들기

3)에 속해 있다.
Img를 디자인하는 것이다.
height는 160px로 고정이다.

5) ServiceH1 만들기

1) 에 속해 있다.
font-size는 2.5rem이다.
최대 폭이 480px일 때 글자 크기가 2rem으로 줄어든다.

6) ServiceH2 만들기

3)에 속해 있다.
글자 크기는 1rem이다

7) ServiceP 만들기

3에 속해 있다.
글자 크기는 1rem이다

src/pages에 signin.js 파일 만들기

import React from 'react'
import ScrollToTop from '../components/ScrollToTop'
import SignIn from '../Signin'

const SigninPage = () => {
  return (
    <>
    <ScrollToTop />
      <SignIn />
    </>
  )
}

export default SigninPage

1) 컴포넌트 추가하기

라우터 추가하기

(App.js)

import './App.css';
import {BrowserRouter as Router, Switch, Route} from  'react-router-dom'
import Home from './pages';
import SigninPage from './pages/signin';

function App() {
  return (
    <Router>
      <Switch>
        <Route path='/' component={Home} exact />
        <Route path='/signin' component={SigninPage} exact />
      </Switch>
    </Router>
  );
}

export default App;

1) path 추가하기
2)

src/components/Footer 폴더 추가하기
Footer폴더에 index.js와 FooterElements.js 파일 추가하기
index.js 다음과 같이 작성

import React from 'react'
import { FaFacebook, FaInstagram, FaLinkedin, FaTwitter, FaYoutube } from 'react-icons/fa'
import { FooterContainer, FooterWrap, FooterLinkWrapper, FooterLinkItems, FooterLinkContainer, FooterLinkTitle, FooterLink, SocialIconLink, SocialIcons, SocialLogo, SocialMedia, SocialMediaWrap, WebsiteRights } from './FooterElements'
import { animateScroll as scroll } from 'react-scroll';

const Footer = () => {
  const toggleHome = () => {
    scroll.scrollToTop();
  }

  return (
    <FooterContainer>
      <FooterWrap>
        <FooterLinkContainer>
          <FooterLinkWrapper>
            <FooterLinkItems>
              <FooterLinkTitle>About us</FooterLinkTitle>
                <FooterLink to='/'>How it works</FooterLink>
                <FooterLink to='/'>Testimonials</FooterLink>
                <FooterLink to='/'>Carrers</FooterLink>
                <FooterLink to='/'>Investor</FooterLink>
                <FooterLink to='/'>Terms of Service</FooterLink>
            </FooterLinkItems>
            <FooterLinkItems>
              <FooterLinkTitle>Contact Us</FooterLinkTitle>
                <FooterLink to='/'>Contact</FooterLink>
                <FooterLink to='/'>Support</FooterLink>
                <FooterLink to='/'>Destinations</FooterLink>
                <FooterLink to='/'>Sponsorships</FooterLink>
            </FooterLinkItems>
          </FooterLinkWrapper>

          <FooterLinkWrapper>
            <FooterLinkItems>
              <FooterLinkTitle>Videos</FooterLinkTitle>
                <FooterLink to='/'>Submit Video</FooterLink>
                <FooterLink to='/'>Ambassadors</FooterLink>
                <FooterLink to='/'>Agency</FooterLink>
                <FooterLink to='/'>Influencer</FooterLink>
            </FooterLinkItems>
            <FooterLinkItems>
              <FooterLinkTitle>Social Media</FooterLinkTitle>
                <FooterLink to='/'>Instagram</FooterLink>
                <FooterLink to='/'>Facebook</FooterLink>
                <FooterLink to='/'>Youtube</FooterLink>
                <FooterLink to='/'>Twitter</FooterLink>
            </FooterLinkItems>
          </FooterLinkWrapper>
        </FooterLinkContainer>
        <SocialMedia>
          <SocialMediaWrap>
            <SocialLogo to='/' onClick={toggleHome}>
              dolla
            </SocialLogo>
            <WebsiteRights>dolla © {new Date().getFullYear()} All rights reserved.</WebsiteRights>
            <SocialIcons>
              <SocialIconLink href='/' target='_blank' arial-label='Facebook'>
                <FaFacebook />
              </SocialIconLink>
              <SocialIconLink href='//www.instagram.com/leonardtcomdt/' target='_blank' arial-label='Instagram'>
                <FaInstagram/>
              </SocialIconLink>
              <SocialIconLink href='//www.youtube.com/channel/UCF6Cz50AqAJcg6JC5LDRElg/videos?view_as=subscriber' target='_blank' arial-label='Youtube'>
                <FaYoutube />
              </SocialIconLink>
              <SocialIconLink href='/' target='_blank' arial-label='Twitter'>
                <FaTwitter/>
              </SocialIconLink>
              <SocialIconLink href='//www.linkedin.com/in/leonardtlauenstein/' target='_blank' arial-label='Linkedin'>
                <FaLinkedin />
              </SocialIconLink>
            </SocialIcons>
          </SocialMediaWrap>
        </SocialMedia>
      </FooterWrap>
    </FooterContainer>
  )
}

export default Footer

1) 컴포넌트 추가

2)(선행작업: 5번) props 추가

import { FooterContainer, FooterWrap, FooterLinkWrapper, FooterLinkItems, FooterLinkContainer, FooterLinkTitle, FooterLink, SocialIconLink, SocialIcons, SocialLogo, SocialMedia, SocialMediaWrap, WebsiteRights } from './FooterElements'

3) SocialMedia 부분 디테일 작업하기

4) 소셜미디어 아이콘 가져오기

import { FaFacebook, FaInstagram, FaLinkedin, FaTwitter, FaYoutube } from 'react-icons/fa'

pages/index.js에 추가

import React, {useState} from 'react'
import Footer from '../components/Footer';
import Hero from '../components/Hero'
import Info from '../components/Info'
import { homeObjOne, homeObjTwo, homeObjThree} from '../components/Info/Data';
import Navbar from '../components/Navbar'
import Services from '../components/Services';
import Sidebar from '../components/SideBar'

const Home = () => {
  const [isOpen, setIsOpen] = useState(false)

  const toggle = () =>{
    setIsOpen(!isOpen);
  }

  return (
    <>
      <Sidebar isOpen={isOpen} toggle={toggle} />
      <Navbar toggle={toggle}/>
      <Hero />
      <Info {...homeObjOne}/>
      <Info {...homeObjTwo}/>
      <Services />
      <Info {...homeObjThree}/>
      <Footer />
    </>
  )
}

export default Home

FooterElements.js 파일 작성

import styled from 'styled-components'
import {Link} from 'react-router-dom'

export const FooterContainer = styled.footer`
  background-color: #101522;
`

export const FooterWrap = styled.div`
  padding: 48px 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
`
export const FooterLinkContainer = styled.div`
  display: flex;
  justify-content: center;

  @media screen and (max-width: 820px) {
    padding-top: 32px;
  }
`

export const FooterLinkWrapper = styled.div`
  display: flex;

  @media screen and (max-width: 820px) {
    flex-direction: column;
  }
`
export const FooterLinkItems = styled.div`
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 16px;
  text-align: left;
  width: 160px;
  box-sizing: border-box;
  color: #fff;

  @media screen and (max-width: 420px) {
    margin: 0;
    padding: 10px;
    width: 100%;
  }
`
export const FooterLinkTitle = styled.h1`
  font-size: 14px;
  margin-bottom: 16px;
`
export const FooterLink = styled(Link)`
  color: #fff;
  text-decoration: none;
  margin-bottom: 0.5rem;
  font-size: 14px;

  &:hover {
    color: #01bf71;
    transition: 0.3s ease-in-out;
  }
`
export const SocialMedia = styled.section`
  max-width: 1000px;
  width: 100%;
`

export const SocialMediaWrap = styled.div`
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1100px;
  margin: 40px auto 0 auto;

  @media screen and (max-width: 820px) {
    flex-direction: column;
  }
`

export const SocialLogo = styled(Link)`
  color: #fff;
  justify-self: start;
  cursor: pointer;
  text-decoration: none;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  font-weight: bold;
`
export const WebsiteRights = styled.small`
  color: #fff;
  margin-bottom: 16px;
`
export const SocialIcons = styled.div`
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 240px;
`
export const SocialIconLink = styled.a`
  color: #fff;
  font-size: 24px;
`

1) FooterContainer 설정
-footer 디자인

배경색 설정

2) FooterWrap 설정

padding 값 충분히 추기
display: flex; 로 넣고
flex-direction은 세로로 설정, 모든 아이템은 중간에 있음
최대 폭은 1100px
margin 상하는 0 이고 좌우는 auto

3) FooterLinksContainer 설정

4개의 링크덩어리가 있고 그것들은 2개의 덩어리로 나뉘어져 있는데, 이 2묶음을 묶어주는 container
display: flex 설정하고 가로 주축기준 중간이다.
반응형: 최대 폭 820px까지 padding-top은 32px로 설정한다

4) FooterLinksWrapper 설정

2개릐 링크덩어리를 묶는 wrapper이다
display:flex로 설정하고
반응형: 만약 820px보다 낮을 경우 flex-direction을 column으로 설정한다

5) FooterLinkItems 설정

link덩어리를 묶는 items이다
display: flex로 설정하고, 주축은 세로로 하며, 좌측으로 정렬한다
margin은 16px로 설정한다
text-align은 left로 설정한다 ( 좌측정렬로 통일)
width는 고정 px로 설정한다
box-sizing은 border-box로 정하기
반응형: 420px보다 작아지면 margin은 0, width는 100%로 설정한다

6)FooterLinkTitle 설정

5에 속해 있다.
-h1 을 스타일링한다
-font-size는 14px로 설정한다

7) FooterLink 설정

5에 속해 있다.
text-decoraton 없앤다
font-size는 14px로 설정한다
hover 효과가 들어갈 경우 색깔을 바꾸고, transition도 설정한다

8) SocialMedia 설정

section 디자인
max-width 는 1000px로 고정
width는 100%. 즉, width는 늘 꽉 차있지만 그게 1000px를 넘어갈 수는 없다는 소리

9) SocialMediaWrap 설정

display: flex 추가, 주축은 서로 거리를 max로 유지하지만, 세로 기준 중앙에 위치해 있다(세로 대칭)
-최대 폭은 1100px이다
-반응형: 820px보다 작은 경우, 주축이 세로가 된다.

10) SocialLogo 설정
-Link를 스타일링한다
-좌측에 위치해 있다.

cursor는 pointer다
-font size는 1.5rem으로 설정하낟
-display는 flex로 설정하고 중앙에 위치한다.

11) WebsiteRights 설정
-small 을 스타일링한다

12) SocialIcons 설정

display는 flex로 설정하고, 중앙에 위치하되 주축은 거리가 최대다
-width는 고정값인 240px이다

13) SocialIconLink 설정

a를 스타일링한다
-font size는 고정값인 24px이다

-text-deco 없앤다

리린

개발자지망생

이전 포스트

responsive web (1)

다음 포스트

React Responsive웹 (2)

React

Services

라우터 추가하기

Footer 만들기

-text-deco 없앤다

responsive web (1)

React error: build 시 빈화면만 나옴

0개의 댓글

React Responsive웹 (2)

React

Services

SignIn 만들기

라우터 추가하기

Footer 만들기

-text-deco 없앤다

responsive web (1)

React error: build 시 빈화면만 나옴

0개의 댓글