[Dev-Log] 2022-02-26 정윤석

### 오늘은 어떻게 프로젝트에 기여했나요?
- 카카오 로그인과 관련하여 기능을 추가하였습니다.
- 카카오 소셜 로그인을 이용할시, 이메일 제공에 동의해야한다는 알림 모달이 나타나도록 구현되어있었습니다.
하지만 회원가입을 한 사용자가 로그아웃 후 카카오 로그인을 시도할 때도 해당 모달이 나타났습니다.
이미 회원가입 당시 동의를 했고, 더이상 할 필요가 없음에도 모달이 나타나는 것은 불쾌한 UX 를 초래할 수 있다고 판단했습니다.
- 이에 따라 서버측에서는 최초 카카오 로그인시 cookie 내 `inner` 키에 `'true'` 값을 담아 전송하도록 구현되었고,
클라이언트측에서는 cookie 내에 `'inner=true'` 가 존재하면 이메일 제공 동의를 묻는 모달이 등장하지 않도록 구현했습니다.
- 이전까지는 cookie 의 항목이 `accessToken` 밖에 없었으나, `inner` 가 추가되면서 코드를 수정했습니다.
cookie 내에서 `accessToken` 과 `inner` 를 찾고 구분하여 저장하는 코드를 작성했습니다.

```typescript
// 조건문 외부에서 cookie, cookieToken, innerValue 라는 변수를 string type 으로 선언합니다.
let cookies: string;
let cookieToken: any;
let innerValue: any;

if (typeof document !== 'undefined') {
cookies = document.cookie;

// cookies(document.cookie)가 ; 를 포함하고 accessToken 을 포함하고 있다면,
if (cookies.includes(';') && cookies.includes('accessToken')) {
// cookies 의 (key=value) 를 구분짓는 ; 를 기준으로 split 하여 각 cookie 들을 cookieList 배열로 리스트화합니다.
cookieList = cookies.split(';');
// 그리고 ; 를 기준으로 구분된 인자들 중 accessToken 을 포함하는 인자를 Array.filter 메소드를 통해 색출합니다.
const findAccessToken = cookieList.filter((cookie: any) => {
return cookie.includes('accessToken');
});
// 위의 과정을 거쳐 findAccessToken 은 [ 'accessToken=eyJhbGciOiJ...' ] 와 같은 형태가 되어있습니다.
// findAccessToken 은 배열이므로 이의 0번째 인자, 즉 'accessToken=eyJhbGciOiJ...' 를 = 으로 다시 split 해주면,
// [ 'accessToken', 'eyJhbGciOiJ...' ] 와 같은 배열이 만들어지고 여기서 구하려는 accessToken 은
// 해당 배열의 1번째 인자에 해당하므로 다음과 같은 코드를 작성하여 cookieToken 에 할당합니다.
cookieToken = findAccessToken[0].split('=')[1];
}

// cookie 에 담긴 accessToken 을 구하는 위의 과정과 동일합니다.
// cookie 중에서 key 로 'inner' 를 갖는 value 를 색출합니다.
if (cookies.includes(';') && cookies.includes('inner')) {
cookieList = cookies.split(';');
const findInner = cookieList.filter((cookie: any) => {
return cookie.includes('inner');
});
inverValue = findInner[0].split('=')[1];
}
```
- 랜딩 페이지에 사용되는 일러스트들을 수정하였습니다.
- 캐릭터들의 피부색이 이전에는 살구색, 보라색으로 구성되어 있었으나
모두 살구색으로 통일하는 방향으로 수정했습니다.
- 일러스트들의 배경을 흰색에서 투명한 색으로 수정했습니다.
배경색이 유색이어도 캐릭터와 사물 일러스트만 나오고, 뒷배경이 겹치지 않습니다.

### 오늘의 프로젝트에서 힘든 점은 무엇인가요?
- 로그인, 로그아웃, 회원가입, 회원탈퇴의 기능과 관련하여 모든 구현이 끝났다고 생각했는데
작업이 진행되면 진행될 수록 위의 기능에서 예상치 못한 에러가 등장하여 당황스러웠습니다.
서버나 클라이언트나 상황이 바뀌다보니 그에 따라 계속해서 코드를 수정하는 것이 번거로웠습니다 :(

### 내일은 프로젝트에 기여하기 위해 무엇을 해야 하나요?
- [x] Landing Page 의 구성을 마쳐야합니다.
- [x] Landing Page 에 필요한 컴포넌트들을 구현해야합니다.
- [x] Landing Page 재구성에 따라 Introduction 컴포넌트를 세분화하고 분리해야합니다.
- [x] Landing Page 컴포넌트들의 러프 디자인을 해야합니다.
(완벽한 최종 디자인이라기보다, 색만 1차적으로 씌워두는 것을 의미합니다.)
- [x] 주말입니다! 10시에 팀원들의 기상상태를 확인해야합니다 :3