Feature : Badge 페이지

[dusunax]

Badge 페이지 작업

뷰작업 - 10월 13일

• /badge
  

• 기존 flex 컴포넌트를 활용하기 위해 scale에 대한 props를 추가했습니다.

• 부트스트랩이나 material ui 등에서 입력하던 설정들이 어떻게 생겨났는지 이해가 되는 것 같습니다.

• 지금이야 배울 점이 많기 때문에 직접 만들었지만, 앞으로는 CSS 프레임워크를 잘 활용하는 게 좋을 것 같습니다.
  다른 작업에 현재 만족도가 높은 css 프레임워크를 tailwind를 써보고 싶습니다.

---

flexLIst에 scale관련 props 추가

1. props 값이 있거나 없을 때 사용할 수 있는 scale 추가했습니다.

const CustomFlexListWrap = styled.div`
  ${({ theme }) => {
    return css`
      padding: 0 2rem;

      display: flex;
      flex-flow: wrap;

      gap: calc(
        ${theme.gaps.md} * ${(props) => (props.scale ? props.scale : 1)}
      );

      ${theme.devices.tablet} {
        gap: calc(
          ${theme.gaps.base} * ${(props) => (props.scale ? props.scale : 1)}
        );
      }

      ${theme.devices.mobile} {
        gap: calc(
          ${theme.gaps.sm} * ${(props) => (props.scale ? props.scale : 1)}
        );
      }

      ${theme.devices.xs} {
        gap: calc(
          ${theme.gaps.xs} * ${(props) => (props.scale ? props.scale : 1)}
        );
      }
    `;
  }}
`;

2. flex에 사용하려고 하니, calc를 중첩해서 사용할 수 없었기 때문에 코드의 양이 너무나 길어졌기 때문에,
   가독성이 사라졌고, 현재 사용하는 방법이 그렇게 좋은 방법이 아니었던 것 같습니다.

기존 코드

• src\styles\customLayoutStyle.js

${theme.devices.mobile} {
   flex: ${theme.flexItems.sm}
}

• src\styles\theme.js

const flexItems = {
  xs: "1 1 100%",
  sm: "0 0 calc((100% - (1rem * 1)) / 2)",
  base: "0 0 calc((100% - (1rem * 2)) / 3)",
  md: "0 0 calc((100% - (1.2rem * 2)) / 3)",
  lg: "0 0 calc((100% - (1.5rem * 3)) / 4)",
};

scale props 변경 코드

${theme.devices.mobile} {
  flex: 0 0
    calc(
      (
        100% - ${theme.gaps.sm} * 1 *
          ${(props) => (props.scale ? props.scale : 1)} / 2
      )
    );
    // 100%에서 (theme의 gap값에 gap갯수를 곱하고 scale props을 곱한 값)을 뺀 후 column 갯수로 나눔
}

• 사이트 전체의 gap을 theme에서 조절할 수 있고, scale값을 넣어서 커스텀 할 수 있게 한 결과는 좋은데
  뭔가 방법이.. 잘못된 것 같습니다.

=> 현재 가능한 뷰 작업... 완료!

• 추가로 적용해야 할 것
• 뱃지 api
  • 뱃지 획득 여부
• 아이템 별 이미지
• 아이템 별 텍스트
• 아이템 별 border color
• 배경 이미지

[dusunax]

border에 gradient 적용하기

1. border-image의 gradient를 사용

box-sizing: content-box;
border-width: 8px;
border-style: solid;
border-image: linear-gradient(to right bottom, #260B3C, #a053df);
border-image-slice: 1;

• https://developer.mozilla.org/ko/docs/Web/CSS/border-image
• border의 radius가 0일 때만 사용가능(모서리가 둥글지 않을 때)

  • border-radius와 border-image가 호환되지 않습니다.

2. background의 속성을 사용

border: 2px solid transparent;
background: linear-gradient(#fff, #fff), linear-gradient(to right bottom, #fdd783, #eb7a89);
background-origin: border-box;
background-clip: content-box, border-box;

• background-origin

  • https://developer.mozilla.org/en-US/docs/Web/CSS/background-origin
  • background 이미지가 element의 어디서부터 시작하는지 설정(좌측 상단)

  속성	적용	border	padding
  border-box	border를 포함한 border-box부터	O	O
  padding-box	padding를 포함한 padding-box부터	X	O
  content-box	border와 padding을 제외한 content-box부터	X	X

  • background-clip를 텍스트로 사용할 때 예시

  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  

[dusunax]

SVG 및 border graident 적용

• 피그마에서 svg export해서 정리 완료
• border에 gradient 적용 완료(이슈 상단 댓글 내용)
• CSS 설정 관련 글 작성
  • https://velog.io/@dusunax/CSS-border%EC%97%90-gradient-%EC%A0%81%EC%9A%A9%ED%95%98%EA%B8%B0

badge 배열 적용

• badge api 적용할 준비
• 뱃지 보유 여부 확인하는 함수 추가

• matchBadgeslist 배열 추가
• matchBadges 함수 추가
  • 기능: 뱃지 존재 여부 확인 후 matchResult를 리턴합니다. => matchBadgeslist

/** badge리스트와 유저 배지를 비교해, 배지 배열를 리턴합니다. */
const matchBadges = (badges, userBadges) => {
  const matchResult = [];

  badges.map((badge) => {
    let badgeMatch;

    for (const ub in userBadges) {
      badgeMatch = badge.name == userBadges[ub].name;
      if (badgeMatch) {
        matchResult.push({
          ...badge,
          createdAt: userBadges[ub].createdAt,
          isExist: true,
        });
        break;
      }
    }

    if (!badgeMatch) {
      matchResult.push({
        ...badge,
        isExist: false,
      });
    }
  });
  return matchResult;
};
const matchBadgeslist = matchBadges(badges, userBadges);

• 뱃지 출력에 조건 추가

<StFlexListWrap scale={2}>
  {matchBadgeslist.map((badge, idx) => {
    let boderColorProps;
    let imgUrlProps;
  
    if (badge.isExist) {
      boderColorProps = badge.borderColor;
      imgUrlProps = badge.imgUrl;
    } else {
      boderColorProps = "#eee, #eee";
      imgUrlProps = badge_none;
    }
  
    return (
      <StFlexList
        key={"badge" + idx}
        scale={2}
        borderColor={boderColorProps}
        fontColor={badge.isExist ? "#393939" : "#cdcdcd"}
      >
        <StBegdeImage src={imgUrlProps} alt={"badge" + idx} />
        <p>
          {badge.name}
          <span className="createAt">{badge.createdAt}</span>
        </p>
      </StFlexList>
    );
  })}
  </StFlexListWrap>

[dusunax]

11월 9일 추가내용

로그인하지 않은 사용자

레시피 만들기, 마이페이지처럼 뱃지 페이지의 접근을 막으면,
비로그인 사용자가 접근할 수 있는 페이지가 없어 UX적으로 좋지 않다고 생각됩니다.

(푸터: 맨 왼쪽 커뮤니티 버튼을 제외하고 로그인이 필요한 기능입니다.)

비로그인 접근 시, 다음과 같이 보여줄 수 있을 것 같습니다.

• 로그인 접근 시, api요청 후, 매치하는 리스트 출력
• 비로그인 접근 시, api를 요청하지 않고, 기본값 리스트 출력

작업 결론

앞으로도 비로그인 기능이 있는 서비스를 만들 때,
guest에게 페이지를 무조건 막고, 리다이렉트 시키는 것보다
placeholder 이미지와 스켈레톤으로 이루어진 간단한 예시를 보여주면
기능에 대한 가이드가 되고, 사용자의 흥미를 이끌어낼 수 있을 것 같습니다.

[dusunax]

API 적용

• api : /badge, get요청, application/json, 헤더에 토큰
• 적용 파일: src\pages\Badge.jsx
• response의 data.badgeList를 사용합니다.
• setMatchBadgeslist(matchBadges(badges, userBadges))로 값을 저장합니다.

변수(함수)명	내용
setMatchBadgeslist	화면에 보여질 state hook
matchBadges	두 배열을 비교하여, 매치하는 뱃지 리스트의 배열을 반환
badges	기본 뱃지 속성(색상, 이미지) + 기본 뱃지 목록
userBadges	response로 받을 뱃지 리스트

뷰 (response는 예시)

관련 코드

const fetchBadgeList = async () => {
  let contentType = "application/json";
  let userBadges;
  try {
    const res = await api(contentType).get(`/badge`);

    if (res.data.isSuccess) {
      userBadges = res.data.badgeList;

      // 뱃지리스트 response 예시
      userBadges = [{ name: "레시피 첫 발자국", createdAt: "2022. 10. 26" }];
      setMatchBadgeslist(matchBadges(badges, userBadges));
    }
  } catch (e) {
    console.log(e);
  }
};

추가로 필요한 작업

• 비로그인 접근 시 api 요청x
• 레시피 작성 시 제대로 적용되는지 확인
  => response로 받은 에러 내용 확인
  • 이슈의 버그C Bug : 레시피 작성 request 버그내용 #402

[dusunax]

뱃지 획득 알림

뱃지 조건이 충족 되었을 때 알림을 프론트엔드 단에서 구현할 수 있는지?

---

11월 14일 버그 수정 완료 후, 짜잘이 수정 후 PR

• reponse에 맞게 변수 조금 수정

if (res.data.isSuccess) {
  userBadges = res.data.bedgeList; // =>bedge

  setMatchBadgeslist(matchBadges(badges, userBadges));
}

• YYYYMMDD 추가 : src\util\time.js

for (const ub in userBadges) {
  badgeMatch = badge.name == userBadges[ub].bedgeName; // name => bedgeName
  if (badgeMatch) {
    matchResult.push({
      ...badge,
      createdAt: YYYYMMDD(userBadges[ub].createdAt),
      isExist: true,
    });
    break;
  }
}

[dusunax]

기본 기능을 구현했으므로 일단 close 후,
추후 보완할 점을 Update : Badge 페이지로 다시 작성하겠습니다.