[Pre-Project] Day 8 - OAuth2 로그인 버튼에 CSS 적용하기, 스크롤 CSS animation

fejigu·2022년 11월 2일

Stack overflow clone coding(Pre-Project)

목록 보기

8/11

📍 Pre-Project, Day 8

금일은 아직 백엔드분들의 API 작업이 끝나지 않아서, 우리 프론트측에서 더이상 기능 구현을 할 수 있는 것이 없어졌다. 이제 프로젝트 마감일까지 4일 정도 남았는데 내일까지 백엔드분들께서 API 작업을 마쳐주시면 우리가 그제서야 바빠질 것 같다.

그래서 금일은 전에 이야기만 했던 로그인 전 첫 페이지 작업을 팀원들과 내일까지 완성 시키기로 했다. 시작 페이지에는 텍스트가 스크롤 되는 CSS animation과 무한 스크롤 등을 넣기로 하였다. 아직 CSS에 능숙하지 않으니 이번 시간에 CSS 연습을 해보는 시간이라고 생각하기로 했다.

OAuth2 로그인 버튼에 CSS 적용하기

팀원분들께 시작 페이지 추가 작업 제안하기

시작 페이지 피그마 작성하기

시작 페이지 - 팀원 소개 컴포넌트 작업하기

텍스트가 스크롤 되는 CSS animation 알아보기

무한 스크롤 공부하기

백엔드분들에게 API 일정 요청

✍🏻 OAuth2 로그인 버튼에 CSS 적용하기

→ 전일 작업을 한 것을 보면 OAuth2 구글 로그인 버튼의 CSS가 우리가 원하는 모양이 아닌 것을 알 수 있다.

→ 구글 로그인 버튼에 기존에 하는 방법으로 CSS 작업을 하니 적용이 되지 않아서, 구글링을 통해 방법을 찾았다.

참고 자료 - 구글 로그인 버튼 CSS 적용

<GoogleLogin
          clientId={clientId}
          buttonText="Log in with Google"
          onSuccess={onSuccess}
          onFailure={onFailure}
          cookiePolicy={"single_host_origin"}
          isSignedIn={true}
          render={(renderProps) => (
            <button
            className="googleLoginBox"
            onClick={renderProps.onClick}
            disabled={renderProps.disabled}
            >
            <Image className="image" src="/images/google.png" alt="google" width="15" height="15"/>
              <a>Log in with Google</a>
            </button>
          )}
        />
      )}
       <style jsx>{`
        .googleLoginBox{
          background: white;
          color: black;
          width: 290px;
          padding: 7px 0px 7px 0px;
          cursor: pointer;
          border-radius: 5px;
          display: flex;
          justify-content: center;  
          align-items: center;
          font-size: 13px;
          border: 0.5px solid rgb(208,211,215);
          color:rgb(66,67,68);
        }
        .googleLoginBox:hover {
          background: rgb(247,247,247);
          color: black;
        }
        `}</style>
    </div>

→ 위의 방법으로 작성하니 CSS가 제대로 적용되는 것을 볼 수 있었다. 이렇게 또 하나 배웠다.!

✍🏻 시작 페이지, Figma 작업

→ 유저가 로그인을 하기 전, 첫 화면으로 보이는 부분을 추가적으로 작업하기로 하였다.

위와 같이 팀원분들과 빠르게 피그마 작업을 하였으며, 텍스트가 스크롤 되는 CSS animation과 무한 스크롤 그리고 스크롤을 내리면 팀원 정보가 담긴 박스가 옆으로 밀리는 것을 구현하기로 하였다.

✍🏻 팀원 정보가 담긴 컴포넌트 작업

→ 위와 같이 팀원들이 정보가 담긴 창을 컴포넌트로 작업을 하였고, 이후에 팀원들이 작업한 것을 머지한 후 css animation이 들어갈 예정이다.

깃헙, 벨로그(혹은 노션) 버튼, hover 시 background color 변경

깃헙, 벨로그(혹은 노션) 버튼, hover 시 cursor pointer로 변경

깃헙, 벨로그(혹은 노션) 버튼, click 시 각각의 링크로 이동

각각의 팀원 박스, hover 시 border 1px solid grey

✍🏻 텍스트가 스크롤 되는 CSS animation

→ stackoverflow의 시작 화면을 보면 위와 같이 텍스트가 스크롤 되는 CSS animation이 동작하는 것을 볼 수 있다. 우리는 우리 팀원 이름을 스크롤 되도록 하기로 하였다.

ex)
Introducing our pre-project.
One of members
{변수} in CS25
변수 -> 팀원명