Portfolio

민수님 요청 사항 있습니다.

민수님 Profile 컴포넌트 관련

Comment 컴포넌트에서 Profile 컴포넌트를 사용 해야해서 연결하던 중 아래와 같은 문제가 있어 수정을 부탁 드리고자 합니다.

Profile 컴포넌트 2번 호출할 때

코드


// Comment.tsx
<StCommentInfo>
  {/* User profile image */}
  <Profile
    image={image}
    fullName={author}
    imageSize={24}
    fontSize={16}
    _id="1324"
    status="ProfileImage"
  />
  {/* User name */}
  <Profile
    image={image}
    fullName={author}
    imageSize={24}
    fontSize={16}
    _id="1324"
    status="ProfileName"
  />
  <StCreatedAt>{`(${createdAt})`}</StCreatedAt>

  {isMine && <StIcon>X</StIcon>}
</StCommentInfo>

username이 짧을 때

StProfileImage, StProfileName 둘 다 width를 가지게 됨.

( StProfileContainer의 width 문제 )

username이 길 때

이름이 박스를 뚫고 나가네요 ㅠ

( overflow: hidden; 이랑 white-space: no-wrap; 추가하면 좋을 것 같습니다. )

Profile 컴포넌트 1번만 호출할 때

코드


// Comment.tsx
<StCommentInfo>
  {/* User profile image */}
  <Profile
    image={image}
    fullName={author}
    imageSize={24}
    fontSize={16}
    _id="1324"
    status="Profile"  // ProfileImage, Name -> Profile
  />
  <StCreatedAt>{`(${createdAt})`}</StCreatedAt>

  {isMine && <StIcon>X</StIcon>}
</StCommentInfo>

username이 짧을 때

고정된 width 값 때문에 유저 네임과 날짜에 간격이 조금 생기네요 ( StProfileContainer의 width 문제 )

username이 길 때

첫번째로 StProfileContainer의 고정된 width 값 때문에, 이미지에 width 값이 있음에도 불구하고 이미지가 찌그러져서 보이질 않습니다.. + 글자 뚫고 나감 문제

두번째로 overflow: hidden; 이랑 white-space: no-wrap; 추가해도

이미지가 찌그러지구요 첫번째 두번째 합쳐서 width를 지우고 overflow: hidden; 이랑 white-space: no-wrap; 추가해도

이번엔 뚫고 나가버리네요. ( max-width 필요 )

요구사항


StProfileContainer // 아래 내용 삭제
  width


StProfileName // 아래 내용 추가
  max-width: ~
  overflow: hidden;
  white-space: no-wrap;
  text-overflow: ellipsis; // 선택


status가 기본값으로 'Profile'로 되어있기에 
ProfileProps에서 status를 옵셔널로 두는건 어떠실까요?

변경사항

Profile.tsx

theme으로 전역 color 들고오는 것 수정

style?: CSSProperties 추가

status?: 'Profile' | 'ProfileImage' | 'ProfileName'; 로 옵셔널로 수정

maxWidth?: number; 추가

width 삭제

Card.tsx

변경사항에 따른 결과 값

card

Header

Comment

요청사항2에 따른 결과

요청사항1에 따른 결과 값

최종 코드


import styled from '@emotion/styled';
import { CSSProperties, useState } from 'react';
import { theme } from '@/style/theme';

interface ProfileProps {
  image: string;
  fullName: string;
  imageSize?: number;
  fontSize?: number;
  _id: string;
  status?: 'Profile' | 'ProfileImage' | 'ProfileName';
  maxWidth?: number;
  style?: CSSProperties;
}

interface IImageStyle {
  image: string;
  imageSize: number;
}

export const Profile = ({
  image,
  fullName,
  imageSize = 48,
  fontSize = 18,
  _id,
  status = 'Profile',
  maxWidth = 300,
  ...props
}: ProfileProps) => {
  const [isLoaded, setIsLoaded] = useState(false);

  // TODO: 링크 추가
  const handleUserClick = () => {
    console.log(_id);
  };

  return (
    <StProfileContainer
      onClick={handleUserClick}
      {...props}
      style={{ ...props.style }}>
      {(status === 'Profile' || status === 'ProfileImage') && (
        <StProfileImage
          image={image}
          imageSize={imageSize}
          style={{ backgroundColor: isLoaded ? '' : theme.colors.grey.light }}
          onLoad={() => setIsLoaded(true)}
        />
      )}
      {(status === 'Profile' || status === 'ProfileName') && (
        <StProfileName
          fontSize={fontSize}
          maxWidth={maxWidth}>
          {fullName}
        </StProfileName>
      )}
    </StProfileContainer>
  );
};

const StProfileContainer = styled.div`
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
`;

const StProfileImage = styled.div<IImageStyle>`
  background-image: url(${({ image }) => image});
  background-size: cover;
  background-position: center;
  border-radius: 50%;
  border: 1px solid ${theme.colors.grey.light};
  width: ${({ imageSize }) => imageSize}px;
  height: ${({ imageSize }) => imageSize}px;
  transition: opacity 0.3s ease-in-out;
`;

const StProfileName = styled.span<{ fontSize: number; maxWidth: number }>`
  font-size: ${({ fontSize }) => fontSize}px;
  line-height: ${({ fontSize }) => fontSize + 8}px;
  max-width: ${({ maxWidth }) => maxWidth}px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
`;

늦어서 죄송합니다.. CSS에 상당히 많이 미흡하네요..

휴지통

위치가 바뀐건 없고, 사진이 조금 이상하게 찍혔습니다.

프로필(사진+이름) + 유저페이지이동로직