Portfolio

BasicButton

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

사용방법


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

props 설명

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

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

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

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

childre: React.ReactNode; -x

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

BasicFab

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

사용방법


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

props 설명

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

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

right: number; - 20

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

onClick: ()⇒void; -x

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

childre: React.ReactNode; -x

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

BasicIconButton

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

사용방법


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

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

props 설명

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

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

DeveloperCardItem

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

사용 방법


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

props 설명

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

아바타에 사용될 props 이다

oneliner:string; -x

유저의 한줄소개이다

name:string’- x

유저의 이름

description:string; -x

유저 소개란이다

to: string -x

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

ProjectCardItem

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

사용 방법


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

props 설명

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

프로젝트 담당자

imageUrl:string-x

project이미지 Url

to: string- x

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

BasicChip, ChipGroup

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

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


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

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

props 설명

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

type : ‘filled’ | ‘outlined

React Chip component - Material UI

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

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

BasicAvatar

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

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

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


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

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로 사용하시면 될 것 같습니다.

AvatarWithChip

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

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

사용방법


<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}
/>

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

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

참고 사항

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


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

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로 감싸서 사용하면 됩니다.


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

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

사용방법


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

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 컴포넌트입니다.


<BasicSearch onChange={handleChange} />

props 설명

onChange:event; -x

Shared Component 문서