userDetail + userEditProfile css

Techskill컴포넌트분리

userDetail에서 사용하는 스킬과 캐러셀 스킬을 하나의 컴포넌트로 추상화

기준: isCarousel(boolean)

export default function TechSkills({
  isCarousel = false,
  skills,
  imageSize,
  width,
  height,
  gap,
  customStyle,
}) {
  return (
    <S.SkillBoard customStyle={customStyle} width={width} height={height}>
      {isCarousel ? (
        <TechSkillCarousel skills={parsedTechSkills} imageSize={imageSize} gap={gap} />
      ) : (
        <TechSkillNormal skills={parsedTechSkills} imageSize={imageSize} gap={gap} />
      )}
    </S.SkillBoard>
  );
}

carousel

customhooks로 로직 분리 (처음에 teamCard에서 쓰길래 로직만 분리했다가 컴포넌트까지 추상화)

export default function TechSkillCarousel({ skills, imageSize, gap }) {
  const { slideRef, handleClickNextSlide, handleClickPrevSlide } = useSkillCarousel({
    skills,
    viewingSkill: 5,
  });

  return (
    <>
      <S.LeftAngle onClick={handleClickPrevSlide} />
      <S.SkillContainer isCarousel>
        <S.SkillSlide ref={slideRef} isCarousel gap={gap}>
          {skills.map(({ image, id }) => (
            <S.SkillImage key={id} src={image} imageSize={imageSize} />
          ))}
        </S.SkillSlide>
      </S.SkillContainer>
      <S.RightAngle onClick={handleClickNextSlide} />
    </>
  );
}

Normal

import React from 'react';
import PropTypes from 'prop-types';
import * as S from './TechSkills.style';

TechSkills.propTypes = {
  skills: PropTypes.array.isRequired,
  imageSize: PropTypes.string,
  gap: PropTypes.string,
};

export default function TechSkills({ skills, imageSize, gap }) {
  return (
    <S.SkillContainer isCarousel={false}>
      <S.SkillSlide isCarousel={false} gap={gap}>
        {skills.map(({ image, id }) => (
          <S.SkillImage key={id} src={image} imageSize={imageSize} />
        ))}
      </S.SkillSlide>
    </S.SkillContainer>
  );
}

userBoard (userCard) 간단한 수정

1번: 라벨과 데이터 형식으로 묶기?

<S.CountBoard>
  <S.Chat />
  000
  <S.View />
  000
</S.CountBoard>

→ 라벨과 데이터 형식으로 묶는 건 어떨까요?

<S.CardInfoIndicator>
	<S.SingleIndicator>
	  <S.Chat />
	  {commentCnt}
	</S.SingleIndicator>
	<S.SingleIndicator>
	  <S.View />
	  {likeCnt}
	</S.SingleIndicator>
</S.CardInfoIndicator>