Shared Component 문서

BasicButton

login Page, Sign up Page, Project Post Page, Project Post Page,Develop Detail Page, Profile Page에서 사용되는 버튼 입니다. 기본적으로 width가 끝까지 채워지도록 설정되었습니다.

사용방법

props 설명

인자:타입; - defaultType
color:' inherit' | 'primary' | 'secondary' | 'success' | 'error' | 'info' | 'warning’; -’primary’

버튼의 색깔입니다. 기본 값이 ‘primary’입니다. 초록색 버튼을 만들고 싶다면 ‘secondary’를 넣어주시면 됩니다.

notion image

notion image

variant: ‘contained’ | ‘outlined’ ;- ‘contained’

버튼의 배경 색을 어떻게 배치할지 정합니다. 기본값은 ‘contained’로 지정한 색으로 버튼 배경이 채워집니다. outline에 색을 채우기를 원한다면 ‘outlined’로 넣어주시면 됩니다.

notion image

childre: React.ReactNode; -x

버튼 안에서 보여줄 글자 또는 아이콘을 넣어주시면 됩니다.

BasicFab

project Page, settings Page에서 ‘글쓰기’ 기능 과 ‘다크모드’ 기능을 위한 버튼 입니다. 포지션이 fixed로 설정이 되었고 페이지에따라 bottom, right 위치를 정해주시면 됩니다, 위치를 안넣어주시면 설정된 default 갑이 반영됩니다.

사용방법

props 설명

인자 : 타입; -default Value
bottom:number; -80

화면 아래 기준으로 위치합니다.

right: number; - 20

화면 우측 기준으로 위치합니다.

onClick: ()⇒void; -x

버튼 클릭시 작동시킬 함수입니다.

childre: React.ReactNode; -x

버튼 안에서 보여줄 아이콘, 글자

notion image

BasicIconButton

아이콘이 들어가는 버튼입니다. 종 모양 버튼, 비행기 모양 버튼 등 같은 버튼에 사용되는 버튼입니다. mui Icon을 넣어주셔야 합니다.

사용방법

props 설명

인자:타입; - defaultType
children: SvgIconComponent; -x

children은 mui아이콘만 넣을 수 있습니다.

notion image

DeveloperCardItem

DeveloperPage에서 list의 아이템으로 사용되는Card Component입니다.

/

사용 방법

props 설명

인자:타입; - defaultType
AvatarProps:BasicAvatarProps’ -x

아바타에 사용될 props 이다

oneliner:string; -x

유저의 한줄소개이다

name:string’- x

유저의 이름

description:string; -x

유저 소개란이다

to: string -x

link 이동을 위한 번호를 string으로 넣어준다.

notion image

ProjectCardItem

ProjectPage에서 list의 아이템으로 사용되는 Component입니다.

사용 방법

props 설명

인자:타입; - defaultType
name:string; - x

프로젝트 담당자

imageUrl:string-x

project이미지 Url

to: string- x

link 이동을 위한 번호를 string으로 넣어준다.

notion image

BasicChip, ChipGroup

현재 접속 중인 개발자, 추천 개발자에서 사용되는 chip과 Technical stack에 사용되는 chip group 컴포넌트입니다.

사용방법은 다음과 같습니다.

props 설명

인자 : 타입; - default value
label : string; - x
onClick? - x
variant?:string; - ‘filled’

type : ‘filled’ | ‘outlined

notion image

notion image

React Chip component - Material UI

Chips are compact elements that represent an input, attribute, or action.

React Chip component - Material UI

https://mui.com/material-ui/react-chip/

React Chip component - Material UI

BasicAvatar

프로필 이미지가 들어가는 avatar 컴포넌트입니다.

로그인 여부에 따라 오른쪽 아래 초록색 뱃지가 생깁니다.

사용방법(구현내용의 사진 참고)

props 설명

인자 : 타입; - default value
imgSrc?: string; - image 참외 로고
alt?: string; - 'user profile'
size?: number; - 60
isUserOn?: boolean; - false

사용하기 편하도록 defualt value를 넣어두었습니다.

avatar의 경우에는 댓글과 채팅 목록 등 많은 곳에서 사용되어 size(=width와 height)를 32로 고정하였고, 이미지가 설정되지 않은 유저가 있는 경우를 고려하여 default image 참외 로고로 설정했습니다.

작은 avatar은 따로 size(width, height)를 전달하지 않아도 됩니다. (figma의 avatar 크기에 맞췄습니다)

큰 avatar(프로필 사진)는 size를 90로 사용하시면 될 것 같습니다.

notion image

AvatarWithChip

HomePage의 Developer Recommendation과 DeveloperListPage의 현재 접속 중인 개발자 목록에서 사용되는 컴포넌트입니다.

BasicAvatar 컴포넌트와 BasicChip 컴포넌트로 구성되었습니다.

사용방법

props 설명BasicAvatarProps을 상속받아 사용하되 label과 size를 추가적으로 props로 넘겨주시면 됩니다.

인자 : 타입; - default value
AvatarProps : BasicAvatarProps; - x
label : string; - x (필수)
size?: number; - 60

notion image

참고 사항

페이지에서 가져다 쓸 때는 다음과 같이 스택으로 감싸주시면 됩니다.

notion image

ItemWithAvatar (DM, 댓글, 팔로우, 팔로잉 리스트)

DM, 댓글, 팔로우, 팔로잉 리스트에서 사용되는 item 컴포넌트입니다.

BasicAvatar 컴포넌트와 BasicChip 컴포넌트를 포함합니다.

props 설명

인자 : 타입; - default value
AvatarProps : BasicAvatarProps; - x
name: string; - x 사용자 이름
message?: string; - x 미리보기할 메세지 또는 댓글 내용
unReadCount?: number; - x 넣을지 차후 논의 필요
to?: string; - x 클릭 시 페이지 이동(Comment List 사용x)
isLastItem?: boolean; - false 마지막 item의 하단 구분선을 없게 만들기 위함
isComment?: boolean; - false 댓글 list에서만 사용, noWrap처리 없이 전체 message를 보여줌

사용방법

mui에서 제공하는 List로 감싸서 사용하면 됩니다.

더미데이터 보기

비교

notion image

리스트 별 스크린샷

notion image

notion image

notion image

BasicInput

: login, sign up, post 등에서 사용되는 input 컴포넌트입니다.

사용방법

props 설명

인자 : 타입; - default value
type?: string; - search

x버튼을 넣기 위해 search를 기본값으로 세팅해두었습니다. 상황에 따라 multilinepassword을 이용해주세요.

label: string; - x

사용자에게 보일 입력 칸의 이름

onChange:event; -x
placeholder: string; -x
errorMessage?: string- x;정규식 test 틀리면 보이는 메세지
isRequired?: boolean- true;

true(빈칸이면 제출x), false

defaultValue?: string- x;

BasicSearch

: 헤더의 검색바에서 사용되는 input 컴포넌트입니다.

props 설명

onChange:event; -x


<BasicButton
	color='secondary' // 버튼은 기본 색이 테마색입니다.만약 초록색 테마로 변경하고 싶다면 'secondary'를 넣어줍니다.
	variant='outlined' // 기본적으로 버튼은 색이 채워진 버튼입니다. outline에만 색을 주고 싶다면 'outlined'를 넣어줍니다.
	onClick={()=>{}} // 버튼 클릭시 작동될 함수입니다. 
>
children //버튼안에서 보여줄 글자나 아이콘을 넣어줍니다. 
</BasicButton>


<BasicFab 
bottom={20} //화면 기준 아래에서 20px위에 위치
	right={20} //화면 기준 우측에서 20px 좌측에 위치
onClick={()=>{}} // 사용할 함수를 onClic으로 바인딩해줍니다. 
>
children // 버튼안에서 보여줄 Icon이나 글자를 넣어주면 됩니다. 
</BasicFab>


import {Add} from '@mui/icons-material';

<BasicIconButton
	onClick={()=>{}} // 버튼 클릭시 작동되 함수를 넣어주세요
>
<Add>  // 버튼은 mui-icon만 들어갑니다. 
</BasicIconButton>


<DeveloperCardItem
AvatarProps={{
	imageSrc:'이미지 url',//아바타 이미지 Url를 넣어주면 된다. 
	alt: '이미지' //alt 속성
	size: 32, // 아바타 크기 기본 32
	isUserOn:true //유전의 접속여부
}} // BasicAvatar가 받을 props이다. 
oneLiner='하고 싶은 말 한마디', // 개발자의 한마디
name='홍길동', // 개발자 이름
description= '나에 대한 소개' // 자기 소개
to='34' // developers/34 로 이동하기 위한 번호를 넣어준다. 
/>


<ProjectCardItem
	name='홍길동'// 프로젝트 담당자
	imageUrl='imageUrl'  // 프로젝트 이미지
	projectTitle='ProjectA' // 프로젝트 이름
	to='43' //projects/43 으로 이동하기 위한 번호 
/>


<BasicChip label="Frontend" variant="outlined" />

<ChipGroup>
  {['React', 'TypeScript', 'Vue']?.map((label: string, i) => (
    <BasicChip
      label={label}
      key={label + i}
      onClick={() => console.log(label)}
    />
  ))}
</ChipGroup>


<BasicAvatar /> 1. 기본
<BasicAvatar imgSrc={IMG} alt="d" isUserOn={true} /> 2. imgSrc 지정 + isUserOn=true
<BasicAvatar onClick={() => console.log('hi')} size={58} /> 3. event, size 추가


<AvatarWithChip label="chip에 출력될 내용" />
<AvatarWithChip AvatarProps={{ imgSrc: '/vite.svg' }} label="hi" />
<AvatarWithChip
  AvatarProps={{
    imgSrc:
      'https://img.freepik.com/free-photo/world-smile-day-emojis-arrangement_23-2149024491.jpg?q=10&h=200',
    alt: '안뇽',
    isUserOn: true, // 현재 접속 중인지
    onClick: () => console.log('hi'), // avatar 클릭 이벤트
  }}
  label="ball" // chip에 출력될 내용
  size={58}
/>


<Stack
  direction="row"
  justifyContent="center"
  alignItems="center"
  spacing={2}
>
	<AvatarWithChip label="sd" />
  <AvatarWithChip label="sd" />
  <AvatarWithChip label="sd" />
  <AvatarWithChip label="sd" />
</Stack>


import { List, Stack } from '@mui/material';
...
<List disablePadding> // horizontal 패딩을 없애줌
      {dummyData.map((data, index) => (
        <ItemWithAvatar
          key={index}
          {...data}
        />
    ))}
</List>


  const dummyData = [
    {
      AvatarProps: {
        onClick: () => console.log('hi'),
        isUserOn: true,
      },
      name: 'DMList',
      message:
        'Hello, World!',
      to: 'dm url',
      unReadCount: 3002,
    },
    {
      AvatarProps: {
        onClick: () => console.log('hi'),
        isUserOn: true,
      },
      name: '팔로우, 팔로잉 List',
      message:
        'This is a test message.',
      to: '사용자 프로필',
    },
    {
      AvatarProps: {
        onClick: () => console.log('hi'),
        isUserOn: false,
      },
      name: '댓글 List',
      message:
        'Check out this linkCheck out this linkCheck out this linkCheck out this linkCheck out this linkCheck out this linkCheck out this linkCheck out this link.',
      isLastItem: true,
      isComment: true,
    },
  ];


<BasicInput
	label="title"
	onChange={handleChange}
	placeholder="이메일을 입력해주세요"
	errorMessage={errors.title}
/>
<BasicInput
  label="password"
  type="password"
  onChange={handleChange}
  placeholder="비밀번호를 입력해주세요"
  errorMessage={errors.password}
/>


<BasicSearch onChange={handleChange} />