클래스 101의 크리에이터 페이지를 만들 것이다.
프로젝트명은 클나쓰101...박영준님의 갓작명 센스
: 크리에이터가 강의를 직접 만들수 있는 페이지, 그것이 상품이 되어 고객이 구매할 수 있는 페이지, 구매한 강의를 직접 웹사이트 내에서 학습할 수 있는 페이지 이렇게 3가지를 모두 할 수 있다는 특징을 가지고 있다.
이것의 연계를 집중적으로 개발할 예정이다.
목적 : 클론 코딩을 통한 웹 사이트의 이해도를 높이고 실제 사용되는 기술에 대한 이해도를 높인다.
개인목표 : 개인적인 목표는 이번에도 어떤 라이브러리도 쓰지 않고 만들자!!
: 1차 프로젝트와 마찬가지로 학습기간 동안 라이브러리는 일부러 사용하지 않고 구현해본다.
: 이번 프로젝트는 위에서 설명한 것 처럼 상품의 연계가 가장 중요했다.
그렇기에 프론트 3명이 각각의 작업을 진행하기 보다 상시로 작업 과정을 공유하며 진행했다.
<클릭하면 영상으로 이동>
: 나는 크리에이터 페이지를 담당했다.
그러나 내가 맡은 크리에이터 페이지는 바로 볼 수가 없었다ㅠㅠㅠ
(강의를 만들기까지 조건이 많다)
그래서 클론으로 시작했지만 클론이 아닌 기획한 크리에이터 페이지를 만들어 볼 예정이다.
: 크리에이터 페이지 제작 전, 공용 컴포넌트를 먼저 제작 했는데 로그인 상태 표시해주는 Navigator다.
로그인일때와 로그아웃을때 메뉴가 달라지며, 로그인과 로그아웃 페이지로의 라우팅 기능을 가지고 있다.
const [handleModalSwitch, setHandleModalSwitch] = useState(false);
const [loginStatusSwitch, setLoginStatusSwitch] = useState(false);
{handleModalSwitch === true ? (
<ProfileModalBox>
<div className='miniProfileBox'>
<div className='miniProfileImageBox'>
<img src={myProfileURL} alt='miniMyProfile' />
</div>
<div className='profileInfo'>
<div className='profileName'>{myProfileName}</div>
<NavLink className='myPage' to={'/MyPage'}>{'마이페이지 >'}</NavLink>
</div>
</div>
<div className='logOutBox' onClick={(e) =>
{setLoginStatueSwitch(!loginStatueSwitch);
setHandleModalSwitch(false);
KakaoLogout(e)}}>로그아웃
</div>
</ProfileModalBox>
) : null}
loginStatueSwitch ? 로그인시 메뉴바 : 로그아웃시 메뉴바
로 삼항연산자로 코드가 구성되어 있다.(길어서 코드 생략)<script>Kakao.init('32a60450b6802f37b1c9c054a3b5744b');</script>
const { Kakao } = window;
function KakaoLogin() {
Kakao.Auth.login({
success: (auth) => {
localStorage.setItem('access_token', auth.access_token);
},
});
// 여기까지가 카카오 엑세스 토큰 발급 끝
fetch('API', {
method: 'POST',
headers: {
Authorization: localStorage.getItem('access_token'),
},
})
.then((res) => res.json())
.then((result) => {
if (result.token) {
console.log(result);
localStorage.setItem('token', result.token);
props.history.push('./', {
name: result.name,
profileImage: result.profileImage,
});
}
});
}
// 우리쪽 백엔드 서버와의 통신(토큰 발급, 로컬 스토리지 저장)
Kakao.Auth.login()
를 불러오는 것 만으로도 바로 토큰이 발급이 된다. function KakaoLogout() {
if (Kakao.Auth.getAccessToken()) {
Kakao.Auth.logout();
localStorage.removeItem('access_token');
}
}
Kakao.Auth.logout()
를 통해 토큰만 삭제해주면 된다.// 우측 커버 이미지 스타일드컴포넌트 부분
const CoverContainer = styled.div`
display: flex;
flex: 1 1 10%;
width: calc(100vw-323px);
height: 100vh;
background-image: url('/images/SH/coverImage.jpeg');
background-size: cover;
@media (max-width: 30vh) {
display: none;
}
`;
display:none
로 숨겨준다.다음화 2부에서는 클래스101의 꽃, 크리에이터 페이지에 대해 알아보자.