(2) 웹 애플리케이션 만들기 - React 메인 화면 만들기 (index)

(1)에서 만든 구글로 로그인하기를 포함한 메인 화면을 만들어보자.

 

 

기획단계에서 메인 화면을 구상할 때, 중간에 게임 로고와 그 아래 로그인 버튼이 있으면 좋겠다고 생각했다.

 

 

간단히 표현하자면 이런식이다.

 

1. 템플릿 컴포넌트 만들기 (Template) : 젤 바깥 테두리

 

2. 로고 컴포넌트 만들기 (Logo) : 로고 이미지 

 

3. 로그인 버튼 수정 + css 추가 

 

 

 

---

 

1. 템플릿 컴포넌트 만들기 (Template)

 

./component 아래에 만들었다.

import React from 'react';
import styled from 'styled-components';


const TemplateBlock = styled.div`
width: 512px;
height: 600px;

position: relative; 
background : white;
border : 2px solid black;
border-radius: 16px;
box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.04);

margin: 0 auto; /* 페이지 중앙에 나타나도록 설정 */

margin-top: 96px;
margin-bottom: 32px;
display: flex;
flex-direction: column;
`;

function Template({ children }) {
    return <TemplateBlock>{children}</TemplateBlock>;
  }
  
  export default Template;

 

템플릿 컴포넌트를 ./App.js 에 추가하고 확인해보자 

 

 

 

테두리가 만들어진 걸 확인할 수 있다 .

 

 

 

2. 로고 컴포넌트 만들기 (Logo) : 로고 이미지 

(이 컴포넌트 역시 ./components 아래에 만들어준다)

 

일단은 간단한 로고 이미지를 내가 만들어서 넣어보려고 한다

 

 

 

import React, { Component } from 'react';
import imgfile from './logo.jpg';
import './Logo.css';
class Logo extends Component{
    render() {

        return(
            
            <div className="logo">
                 <img className="logoimg" src={imgfile} />
            </div>
            


        );
    }
}

export default Logo;

같은 폴더안에 이미지를 넣어놓고 그 이미지의 경로를 imgfile에  넣어준다.

 

 

App.jsx에 Logo 컴포넌트를 추가하고 확인해보자 (이건 Template 컴포넌트 하위에)

 

 

 

 

이미지가 너무 커서 css로 사이즈를 조정해야할 것 같다

 

Logo.css 파일을 만들고 

 

.logo {
  margin-top: 100px;
}

.logoimg {
  width: 300px;
  height: 200px;
  padding-left: 100px;
}

 

 

내용을 작성하고 새로고침을 해보면

 

 

잘들어간걸 확인할 수 있다 !  

 

 

3. 로그인버튼 추가 + css 수정

 

(1) 에서  만들었던 구글로 로그인하기 버튼 컴포넌트도 App.js에 추가 해주면 된다 

 

추가하고 확인  !

 

 

 

로고와 버튼만 넣으니까 너무 휑해서 웰컴 메세지도 넣어줬다..ㅎ

 

다음 번에는 방만들기 창을 만들어볼 것