NFT_MARCKE
KrafterSpace
www.krafter.space
위 페이지를 참고로 NFT_MARCKET 만들기 프로젝트를 시작했다.
사용하는 기술은
typescript
nodejs
react
doker
aws
우리팀은 typescript 는 가 익숙하지 않기 때문에 javascript 먼저 작업 후 typescript 로 변경하기로 했다.
먼저 협업 프로그램은 slack , notion ,git hub 를 사용한다.
먼저 git hub 올리기 위해 파일트리 작업을 했다.
파일 트리를 back 과 front 로 나누고 먼저 front 안 에서
- npm install -g truffle
- truffle unbox adrianmcli/truffle-next
truffle.js -> truffle-config.js 로 변경
truffle-config.js port 를 7545 변경
client 페이지에 들어가가서
package.json 수정
next , react , react-dom , web3 를 삭제하고 새로 install 해준다
- npm install next react react-dom web3 styled-components
component , pages 폴더를 만들어준다
pages 안에서
_app.jsx 생성 후
간단하게 인자값으로 component 만 받게 작업
_document.jsx 생성 후
코드를 작성해준다. css 를 위한 작업이다.
내가 맡은 login , join , produt_detail 페이지 중 login 페이지 작업
이렇게 만들것 이다.
먼저 css 작업을 하기위해서 styled-componets 를 가져오고 Login 컴포넌ㅌ를 만들고 안에 들어갈 내용을 먼저 일려해주었다.
import styled from "styled-components"
import Link from 'next/link'
import CloseIcon from '@mui/icons-material/Close';
const Login = () => {
return (
<>
<LoginWrap>
<Logo>로고 들어갈 자리</Logo>
<div>
<Icon_Close>
<CloseIcon color="disabled" sx={{ fontSize: 55 }} />
</Icon_Close>
<h1>로그인</h1>
<span>지갑을 이용하여 KrafterSpace에 로그인 합니다.</span><br />
<span>아래 지갑중 사용할 지갑을 선택해 주세요.</span>
<button> Kaikas로 로그인 </button>
<span>사용 중인 지갑이 없으신가요?
<Link href="https://chrome.google.com/webstore/detail/kaikas/jblndlipeogpafnldhgmapagcccfchpi">
<a>Kaikas 다운로드</a>
</Link>
</span>
</div>
<Copyed>Copyright © 2021 GroundX.All rights reserved.</Copyed>
</LoginWrap>
</>
)
}
export default Login
const Logo = styled.span`
width: 20vw;
background-color: #fff;
position: relative;
display:block;
margin: 10vh auto 0;
`
const Copyed = styled.span`
color:#6c757d;
`
const Icon_Close = styled.div`
&{ position: absolute;
right: 20px;
top:20px;
}
& > svg{
cursor:pointer;
}
`
const LoginWrap = styled.div`
&{
/* display: flex; */
/* justify-content: center; */
/* align-items: center; */
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #212529;
z-index: 1;
text-align:center;
}
& > div {
width: 50vw;
height: 60vh;
padding: 120px;
box-sizing:border-box;
background-color: #fff;
box-shadow: 0 4px 8px rgb(0 0 0 / 8%);
border-radius: 16px;
position: relative;
margin: 5vh auto;
}
`