[MainProject] day-16 (5/22)

벌써 3번째 스프린트

1. 자잘한 버그들 fix 및 게임등록 UI 수정,유효성 검사 부분 수정 ✅

2. 검색 페이지(UI, 기능) ➡️

3. 메세지 페이지(UI, 기능) ✅ 토스!

4. 지금까지의 작성한 코드의 지속적인 개선 ♻️

5. 디자인 개선 ➡️

 

오늘의 각오

검색과 메세지 페이지 UI, 기능을 거의 완성함은 물론이고 디테일한 고민을 다 정리해서 (힌트 드롭다운 적용 등등) 구현해놓고 디자인 수정에 들어가도록 해야겠다. 디자인의 수정은 기간도 짧고 디자이너가 아니니까 UI 개선을 통해 UX가 개선될 수 있는 방향을 우선순위에 두고 바꾸도록 하겠다..!! 

 

#1 버그 fix

(1) 로그인 페이지 enter 버튼 작동 문제

회원가입, 로그인페이지에서 열심히 닉네임, 아이디, 비밀번호를 작성하고 enter 키를 누를 경우, 갑자기 google Oauth 회원가입 또는 로그인이 작동되는 문제가 있다. 

 

이 문제를 일단 해결했는데, 해결방법은 form 태그를 이번에 여러번 사용하면서 알고있었다. 다만, 이번에 팀원이 전에 만들었던 컴포넌트를 그대로 사용해보겠다고 하다가 내가 제대로 이해하지 못하는 컴포넌트를 만들었는데 그 결과 해당 컴포넌트를 내가 원하는대로 사용하고자 타입을 추가하고 props를 다루는데 엄청 애를 먹었다. 어떤 효용이 있는지 크게 느끼지도 못한채 고생을 했다.

 

이번에도 버튼에 type = submit을 넣는 작업이었는데, 상당히 오랜 시간이 걸렸다. 뤼튼의 도움이 있었지만 그래도 버튼컴포넌트를 스타일드 컴포넌트로 새로 만들어서 해결하고 싶은 마음을 꾹 참고 지금 상황에서 어떻게 해결할지 고민해서 해결해서 보람이 있었다. 효율적이라고는 말 못하겠다..ㅋㅋㅋㅋ

 

import React, { PropsWithChildren } from 'react';
import styled from 'styled-components';
import { ButtonType } from '../../types/componentsTypes';

export interface ButtonElType extends ButtonType {
  //  누르면 바로 이동하는 버튼도 있어서 ? 이용하여 선택적으로 채용.
  onClick?: React.MouseEventHandler;
}

function ButtonEl(props: ButtonType) {
  // eslint-disable-next-line react/display-name
  return ({ children, onClick }: PropsWithChildren<ButtonElType>) => {
    return (
      <StyledBtn {...props} onClick={onClick}>
        {children}
      </StyledBtn>
    );
  };
}

export default ButtonEl;

const StyledBtn = styled.button.attrs((props) => ({
  type: props.type || 'button'
}))<ButtonType>`
  flex: ${(props) => props.flex || ''};
  font-size: ${(props) => props.fontSize || '1.3rem'};
  font-weight: ${(props) => props.fontWeight || '600'};
  text-align: center;
  background-color: ${(props) => props.bg || 'var(--cyan-dark-400)'};
  color: ${(props) => props.fontColor || 'white'};
  margin: ${(props) => props.margin || '0.5rem 0.7rem'};
  padding: ${(props) => props.padding || '0.5rem 0.7rem'};
  border-radius: ${(props) => props.radius || '5px'};
  border: ${(props) => props.border || 'none'};
  &:hover {
    background-color: ${(props) => props.hoverBg || 'var(--cyan-dark-500)'};
  }
`;

   

사실 이 컴포넌트에 대해 아직도 절반정도 밖에 이해를 못한 것 같은데, 이번에 그래도 attrs를 통해 기본 속성을 주입하고 선택적으로 다른 속성값을 주는 것을 익혀서 스타일드 컴포넌트를 사용하면서  attrs를 잘 활용하지 못하는 것은 약점이라고 생각되는데 그 부분이 조금 나아졌다고 생각한다. 스타일드 컴포넌트도 참 많이 사용했다고 말은 못하겠지만 여러번 사용하면서 느끼는 것이지만 개인적으로는 오히려 리덕스보다 어렵다고 생각된다.

 

import styled from 'styled-components';
import ButtonEl from '../elements/Button';

export interface SignupButton {
  onClick: React.MouseEventHandler;
}

const SignupBtn = ({ onClick }: SignupButton) => {
  return (
    <StyledSignupBtnContainer>
      <StyledSignupBtn onClick={onClick}>
        <p>회원가입</p>
      </StyledSignupBtn>
    </StyledSignupBtnContainer>
  );
};

export default SignupBtn;

const StyledSignupBtnContainer = styled.div`
  display: flex;
  width: 100%;
  margin-bottom: 1rem;
`;

const StyledSignupBtn = ButtonEl({
  flex: '1',
  fontSize: '1.6rem',
  type: 'submit'
});

 

수정한 부분을 짚어보면, ButtonEl의 리턴값을 받는 컴포넌트에 type:'submit'이 들어갈 수 있도록 해주었다. 버튼타입이라는 타입에도 이렇게 타입을 추가해줘서 마지막으로 오류를 전부 해결했는데, 사실 그냥 생각해보면 참 이상하다고 생각할 수가 있다. 원래 type이라는 속성은 버튼에 내장된게아니야..?? 왜 추가해줘야되는데 ㅋㅋㅋ 라고 생각할 수 있다.

export interface ButtonType {
  flex?: string,
  fontSize?: string,
  fontWeight?: string,
  bg?: string,
  fontColor?: string,
  margin?: string,
  padding?: string,  
  radius?: string,
  border?: string,
  hoverBg?: string,
  type?: 'submit'|'button'|'reset';
}

함수형 컴포넌트 함부로 따라하는게 아니다.. 그래도 type 속성의 타입을 정해주기 전에는 css만 다루어서 더욱 의미가 없었는데 프로젝트가 끝나가는 이 시점에서 html 속성 한 개라도 다룰 수 있게 됐으니... 다행이라고 해야할지 ㅋㅋㅋㅋ

다 끝나고나면 팀원을 붙잡고 도대체 어떤 의미로 만든 것인지 다시 차근차근 물어보아야겠다.(아 물론 이번 프로젝트에 사용되는 저 컴포넌트는 내가 멋대로 따라서 만든거라서 팀원에게 따지는 것은 아니다. 별 생각없이 따라한 과거의 나 자신에게 따지고 싶을뿐...)

 

(2) 로그인 유효성검사 1회성 문제

유효성검사가 전에는 분명 입력값을 채웠다 비웠다해도 잘 작동되었는데 이번에는 한 번 true로 바뀌면 false로 안바뀌는 문제가 발생하고 있다. 저번에 useValidation, useInput을 대대적으로 바꿨는데 그 여파로 이런일이 발생한 것 같다. 뤼튼에게 물어보니 useValidation 안에서도 useState로 상태를 계속적으로 관리해줘야 하는데 안해서 그런거라고 했는데 그렇게 해결법을 적용해서 바로 해결하는 것도 좋지만 정확히 어떤 문제가 발생한 것인지는 눈으로 확인을 해봐야 다음에 훅을 하나 만들더라도 제대로 사용할 수 있을 것 같으므로 콘솔을 좀 찍어서 도대체 왜 true가 계속 찍히는지 알아야겠다.

 

 

(3) 게임태그를 선택안해도 게임이 등록되는 버그

이것은 무조건 1순위로 추가해야한다. 유효성검사를 꼭 해주어야하는데,

 

제출할 때 작동하는 함수 상단에 다음과 같은 코드를 추가함으로써 해결하였다.

if (title === '' || tagStates.filter((a) => a === true).length === 0) {
      if (title === '') {
        return alert('제목을 입력해야합니다.');
      }
      return alert('태그를 최소 1개 이상 선택해주세요!');
    }

 

 

그런데 좀 보기싫은? undefined들이 많이 있어서 거슬렸는데,

 

태그초기화가 안돼서 false 도 true도 아닌 undefined인 애들이 존재하는데, 태그초기화가 렌더링 시 한 번 실행되도록 하면 좋을 것 같다.

태그초기화를 누르고나서 확인해보니 다 false가 제대로 들어가있다.

 

어쨌든 해결!!

 

(4) 게임이름이 중복인데 이유도모르고 404로 보내지는 현상

게임이름이 중복인 경우 409 에러가 오길래 해당 에러코드에는 경로이동없이 게임이름이 중복이라는 경고창을 띄워주도록 바꾸었다.

 

catch부분에 코드 몇 줄만 추가하니 해결이 되었다.

...

.catch((error) => {
        if (error.response && error.response.status === 409) {
          alert('중복된 게임이름입니다');
          console.log('중복');
        } else {
          alert(error);
          navigation('/error');
        }
      }
      
 ...

 

(5) 갑자기 Ouath 오류 (진행중)

엔터키 작동과 관련된 오류를 해결하려고 하다가 이런 오류를 만났다. 이 오류는 백엔드에 일단 공유했다. 당장 내가 해결할 수 있는 오류가 아닌 것 같다고 생각이 들어서..

근데 내가 그렇게 잘 알지도 못하는데 Ouath 관련해서 어떤 분을 좀 도와드렸는데 그 분에게 오히려 이 부분의 문제해결에서는 도움을 받고있다. 역시... 남을 도우면 더 큰 도움으로 돌아오는게 진리다. 다른 곳은 모르지만 적어도 부트캠프에서는 그랬다..ㅎㅎㅎ

(6) 

 

 

 

 

#2 검색 페이지

정보를 받아오는게 첫째,

받아온 정보를 보여주는게 둘째,

 

이렇게 크게 두 가지만 되면, 검색힌트 활용에 대한 로직을 짜는 등 나의 꿈을 자유롭게 펼칠 수 있다. 그래서 가장 중요한 두 과제를 끝내고 부가적인 기능을 넣어서 검색기능을 그럴싸하게 완성해보도록 하겠다.

 

어제 자꾸 막힌 부분이었는데, get요청을 잘못보내는지 정보가 제대로 도착하지 않는다. Promise.All코드를 킵해놓고 게임 검색에 대한 정보부터 받아와서 해보았다.

 

일단 받아오기는 한다..!!

응답 부분에 데이터가 간신히 담겨오는 것을.. 볼 수 있다..ㅋㅋㅋ 지금 user 조회에 페이지네이션 없는 부분은 추가될 것 같고 일단 게임만 들어오는 정보를 잘 보여주면 되는데.. 해당 부분에서 막히고 있다.

 

이걸 보여주는 둘째만 해결되면 페이지네이션과.. 무한스크롤 둘 다 해 볼 수 있어서 나로서는 엄청난 성장을 하면서 자연스럽게 우리 웹사이트에도 어울리는 기능을 연습(?!)해 볼 수 있다.

 

 

일단 성공했다..

게시글도 바로 하고 레이아웃을 맞추려고 했는데 타입지옥에 빠져버렸다. 원흉은 axios response의 타입을 지정하는 것 때문인데 머리가 너무 안돌아가서 내일.. 마무리하고, 미흡한 기능이나 유효성검사를 추가하고, 버그를 다 잡은 뒤 남는시간은 디자인에 올인해야겠다.(시간이 남을지는 모르겠다.)

#3 메세지 페이지(오버레이)

게임졸트의 메세지 오버레이와 흡사하게 만들려고 노력중이다.

 

링크를 보냈을 때, 클릭 시 경고메세지를 띄우는 기능도 넣고 싶어서 혹시 gamezolt에도 적용되었나 싶었는데 여기는 아직 그 부분에 대해서는 신경을 쓰지 않고있다. 그리고 로컬호스트 주소는 활성이 되지않고 www.naver.com 과 같은 주소에는 프리플라이트 같은 것으로 접속가능한 주소인지 확인하는건지(이건 브라우저 내장된 기능이 아닌가 싶다) 활성화된 색으로 표시된다. 아마 html 링크 색상 바꾸는 css를 적용하면 나도 바꿀 수 있지 않을까 생각한다.

 

어제 메세지 부분은 화면에 하나도 안띄우고 작업을 했는데 이게 다른 사람이 만든 Nav에서 동작하도록 만들어야해서 어려운 부분이 있었다. 현재 왼쪽에 떠있는(모바일 기준 햄버거 메뉴 누를 시 등장)

(근데 홈화면이 UI가 좀 틀어져서 게임이 한줄로 보인다든지 이런 부분 좀만 수정하면 더 예쁠 것 같다..!! ㅋㅋㅋㅋ 햄버거 메뉴 눌렀을 때 메뉴가 겹쳐지지 않도록 위에 마진도 조금 더 주면 좋을 것 같고.. > 기존코드 개선 부분에 팀원이 하든지 내가 개선해서 적어놓겠다..!)

 

메세지 오버레이가 모바일 기준으로 화면 전체를 덮는 모달창과 같이 작동하기도 한다. 

z-index를 110을 줘서 최상단에 위치하며 닫기 전까지 메세지 창만 이용할 수 있다. 딱 이렇게 구현하려고 한다.

 

메세지를 먼저 오전에 최대한 끝내고 검색을 마저 마무리하도록 해야겠다. 회의에서 마이페이지 진행상황이 어느정도인지 유저정보가담긴 Box를 가져다가 쓸 수 있는지보고 안되면 내가 만들어서 공유해주어야한다 ㅋㅋㅋㅋ 아마 만들어오실 것 같다. 일단 메세지를 순서대로 보여주는 것이 1순위. 2순위는 보낸사람이 누구인지 구분하는 것. 3순위는 createdAt을 표시하되 분 기준으로 같은 분에 보낸 것들은 맨 처음에 보낸 하나만 표시하는 기능. 4순위 날짜별로 구분해서 Date 구분선을 넣어주도록 하는 로직. 5순위 무한스크롤(5순위이긴하지만 순서만 뒤에있을 뿐 매우 중요한 기능!!)

 

순서대로 하나씩 구현할건데 어떻게 구현되고 있는지 보면서 하는게 맞으니까, 0순위로 Nav바에서 클릭하면 나오도록 만들어야 한다.

0) Nav바 클릭 이벤트

내가 만든 부분이 아니라서 팀원에게 만들어달라고 해야할 수도 있는데,   확인 결과 Nav 바에는 그냥 팔로워 목록이 전부 보이므로 해당 팔로워를 누를 때 팔로워 아이디를 들고 api 조회를 날려서 메세지 내역을 조회하면 되는거였다..!

 

근데 현재 팔로워가 없다고 자꾸 나오므로 Postman으로 팔로워를 만든 다음에 메세지를 주고받아보겠다.

 

 

사실 팔로워가 아니어도 메세지가 보내지기는 한다. 이건 굳이 "팔로워만 보내게 해주세요"라고 요청하지 않을건데, 궁극적으로는 팔로워가 아니어도 메세지를 주고받을 수 있도록 하고 싶기 때문이다.. 다만 그러면 메세지를 주고 받으면 자동 팔로잉이 되든지, Nav바 열 때 추가로 메세지보낸사람리스트를 받도록 api를 추가하든지 그런 기능을 넣어야한다. 나중에 메세지 내역을 열어보고 싶어도 열어볼 수가 없어지기 때문이다.

 

일단 팔로워목록은 잘 나온다. 저기 메세지 모양을 클릭하면 내가만든 페이지가 튀어나오도록하면 된다.

 

(13:00 - 14:30) 회의 후에 타임어택이 걸렸다.

나는 4시까지만 메세지를 완성하고 다른 팀원에게 넘긴 뒤 검색 페이지,기능 완성에 집중하기로하였다.

 

그 때까지 1시간 30분 동안 최선의 결과물을 도출해보자.

 

으음.. 이 정도까지 밖에 완성 못했지만 엄청 특별한 기능이 아니니 욕심내지말고 검색기능을 정말 제대로 고도화하는데 집중해야겠다. 안그래도 남은 시간도 별로 없는데 메세지까지 하겠다고 욕심부리다가는 너무 진상팀원이 될 것 같다.

 

 

#4 개선