Notice
Recent Posts
Recent Comments
Link
«   2025/05   »
일 월 화 수 목 금 토
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31
Tags more
Archives
Today
Total
관리 메뉴

Dev Blog

20210312 24일차 제작자 페이지 구현중(80%) 본문

BootCamp_Codestates/Final Project

20210312 24일차 제작자 페이지 구현중(80%)

Yongjae Kim 2021. 3. 13. 03:10

확인한 내용

  • 구글 엑세스 토큰의 경우, 로컬스토리지에 담기지 않는것 같다. 라이브러리를 사용해서 그런것 같긴한데, 어떻게 로그아웃을 시켜야 할지 좀 더 알아봐야겠다. => 구글 소셜 로그인의 경우 브라우저에서 구글 로그아웃을 해주면 된다.(따로 로직이 필요없다.)

  • 이제와 생각해보니, 유저가 소셜 로그인으로 들어와 추가 정보를 기입할 때 a 이메일(유저 제공)로 들어와서 b 이메일(추가 정보 기입할 때 이메일 변경)로 가입을 하게 될경우 문제가 발생할 것 같다. 생각 좀 해봐야겠다. => 아래와 같은 문구를 추가했다.만약 소셜서비스와 다른 이메일을 등록할 경우, 다음 소셜 로그인 때 해당 모달이 다시 보여질 것이다. 

  • 메뉴얼 페이지와 제작자 페이지 구현이 필요하다. 그리고 CSS와 반응형 웹을 더 손봐야겠다.=> 제작자 페이지를 80% 정도 구현했다. 

  • 클라이언트 https 배포 => 명일 세팅예정.

구현 사항

제작자 페이지 구현 

메인 페이지의 네비게이션 바에서 제작자를 클릭하면 아래의 제작자 페이지로 화면이 전환된다. 

1. 첫번째 페이지

세번째 칸의 첫번째 아이콘을 클릭해도 해당 화면이 나온다. 팀원들과 웹서비스에 대한 소개이다. 

2. 두번째 페이지 

팀원들의 깃헙, 블로그 주소를 보여준다. 

3. 후원하기 페이지

유저들에게 재미를 선사?하기 위해 개발팀에 후원할 수 있는 페이지를 만들었다. 

후원금과 메세지를 적고 후원하기 버튼을 누르면 "마음만으로도 감사합니다" 라는 메세지가 나온다.

실제 배포할 때에는 아마 제외할지도 모르겠다. 

오늘 깨달은것 

대단한 발견은 아닌데, 그동안 theme 이라는 속성을 통해 상태값을 전달하여 필요한 엘리먼트가 display 되거나 none 되게 하여 렌더링 시켰는데, 더 직관적이고 간단한 방법을 발견?했다. 

 

지금 보면 너무나 당연한 방법인데, 지난 2주 동안 떠오르지 않았다.그저 theme 으로 구현하면 되겠거니 했던것 같다. 

				<Body>
					{currentPage === "laptop" ? <DeveloperTeam /> : null}
					{currentPage === "github" ? <DeveloperGithub /> : null}
					{currentPage === "mail" ? <DeveloperMail /> : null}
				</Body>

theme 을 이용한 방법은 아래와 같다. CSS 에 display 를 변경해주는 방법. 

위 코드의 경우 많은 경우의 수를 쉽게 다룰수 있기 때문에 더 효율적이라고 생각한다. 

			<DivValid>
				<ValidityBox theme={msgVisible}>{message}</ValidityBox>
			</DivValid>
            
            
    const ValidityBox = styled.div`
	height: 1.8rem;
	padding: 0rem 1rem 0rem 1rem;
	margin-right: 2rem;
	background: #f08080;
	display: ${(props) => (props.theme === true ? "flex" : "none")};
	border-radius: 10px;
	justify-content: center;
	align-items: center;
	animation: a 2s;
	@keyframes a {
    
    후략..

 

해야할일

1. CSS 리팩토링(버튼 등 디자인 가다듬기)

2. 미디어쿼리 모두 손보기

3. 애니메이션 효과 적용하기 

4. 개발자 소개 페이지 완성시키기

5. 배포 세팅하기

6. 기술발표 준비

'BootCamp_Codestates > Final Project' 카테고리의 다른 글

20210314 26일차 로딩 효과 구현  (2) 2021.03.15
20210313 25일차 제작자 페이지 구현 및 CSS  (0) 2021.03.14
20210311 23일차 카카오, 구글 소셜 로그인 구현 완료(OAuth)  (0) 2021.03.12
20210310 22일차 카카오 소셜 로그인 구현(중)  (0) 2021.03.11
20210309 21일차 그림일기장 수정 로직 구현  (0) 2021.03.10
'BootCamp_Codestates/Final Project' Related Articles more
Comments