ProfilePage.js

import React from 'react';
import { Image, Button, Container } from 'react-bootstrap';

import userdefault from './user_default.svg'


const userName = "정연우";
const userEmail = "dusdn8455@korea.ac.kr";
let userNickname = "가나다라마바사";

function ProfilePage() {
    return (
        <div>
            <Container className="d-flex justify-content-center">
                <div className="mt-5 shadow w-75">
                    <h1 className="text-center mt-4 ml-5 mr-5 mb-3">Profile Page</h1>
                    <h4 className="text-center mb-5">{userName}님 환영합니다 !</h4>

                    <div className="d-flex justify-content-center mb-3">
                        <Image src={userdefault} width="300px" roundedCircle />
                    </div>

                    <div className="text-center">
                        <div className="m-3">이름 : {userName}</div>
                        <div className="m-3">별명: {userNickname}
                            <Button className="ml-3" variant="outline-primary" size="sm">수정</Button>
                        </div>
                        <div className="m-3">이메일: {userEmail}</div>
                    </div>
                    <div className="text-center m-5">
                        <span>
                            <Button variant="outline-success" size="sm" className="mr-4">저장</Button>
                            <Button variant="outline-success" size="sm" className="ml-4">다음</Button>
                        </span>
                    </div>
                </div>
            </Container>

        </div>
    )
}

export default ProfilePage