feat: add developer card

README.md

@@ -1,3 +1,40 @@
 <a href="https://no-de-lab.github.io/mixin-ui/" rel="noopener noreferrer" target="_blank"><img src="https://img.shields.io/badge/ui-storybook-ff69b4" style="margin-right:10px" /></a>
 [![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)
 <img src="https://camo.githubusercontent.com/567e52200713e0f0c05a5238d91e1d096292b338/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f65732d362b2d627269676874677265656e2e737667" width="45" title="ES6+" style="margin: 0 10px" />
+<a href="https://www.npmjs.com/package/mixin-ui">
+<img src="https://img.shields.io/npm/v/mixin-ui.svg" alt="npm" >
+</a>
+<img
+src="https://img.shields.io/github/license/mashape/apistatus.svg"
+alt="MIT"
+style="margin: 0 10px">
+<a href="https://no-de-lab.github.io/mixin-ui/">
+<img
+ src="https://img.shields.io/readthedocs/pip.svg"
+ alt="docs">
+</a>
+
+# Mix-in UI
+
+[**👉 View Documentation**](https://no-de-lab.github.io/mixin-ui/)
+
+## Install
+
+```bash
+npm install --save mixin-ui
+yarn add mixin-ui
+```
+
+## Usage
+
+```jsx
+import React, { Component } from 'react';
+
+import { Button } from 'mixin-ui';
+
+export default function Example {
+  return (
+    <Button>Hello, world!</Button>
+  )
+}
+```

src/components/card/CrawlCard/CrawlCard.js

@@ -28,7 +28,7 @@ CrawlCard.Text = function CrawlCardText({ children, line, ...props }) {
     <>
       {children && (
         <S.Text>
-          <Paragraph size="medium" line={line} color="gray" {...props}>
+          <Paragraph size="small" line={line} color="gray" {...props}>
             {children}
           </Paragraph>
         </S.Text>

src/components/card/DeveloperCard/DeveloperCard.js

@@ -0,0 +1,125 @@
+import React, { useMemo } from 'react';
+import PropTypes from 'prop-types';
+import S from './styles/developerCard.style';
+import Paragraph from '../../common/Paragraph';
+import SVGIcon from '../../common/SVGIcon';
+import BookmarkIcon from '../../common/SVGIcon/BookmarkIcon';
+
+export default function DeveloperCard({ children, ...props }) {
+  return <S.Container {...props}>{children}</S.Container>;
+}
+
+DeveloperCard.Body = function DeveloperCardBody({ children, ...props }) {
+  return <S.Body {...props}>{children}</S.Body>;
+};
+
+DeveloperCard.Name = function DeveloperCardName({
+  children,
+  developerId,
+  ...props
+}) {
+  return (
+    <S.Name {...props}>
+      <Paragraph size="medium" color="white">
+        {children}
+      </Paragraph>
+    </S.Name>
+  );
+};
+
+DeveloperCard.Job = function DeveloperCardJob({ children, ...props }) {
+  return (
+    <S.Job {...props}>
+      <Paragraph size="small" color="gray">
+        {children}
+      </Paragraph>
+    </S.Job>
+  );
+};
+
+DeveloperCard.Text = function DeveloperCardText({ children, ...props }) {
+  return (
+    <>
+      <S.Text {...props}>{children}</S.Text>
+    </>
+  );
+};
+
+DeveloperCard.Image = function DeveloperCardImage({ data, alt, ...props }) {
+  return (
+    <>
+      {data?.imgUrl ? (
+        <S.Image src={data?.imgUrl} {...props} />
+      ) : (
+        <S.Avatar>
+          <SVGIcon name="avatar" />
+        </S.Avatar>
+      )}
+    </>
+  );
+};
+
+DeveloperCard.Toolbar = function CardToolbar({ socialUrl, onBookmark }) {
+  // TODO: 서버에서 해당 url이 bookmark 리스트에 있는지 없는지 확인한 값으로 초기값설정!
+  const style = useMemo(() => ({ marginRight: '0.7rem' }));
+  return (
+    <S.Toolbar>
+      <S.Toolbar.Ref>
+        <S.Toolbar.Icon>
+          {socialUrl.map((url) => (
+            <a
+              className="social_icon"
+              href={url?.url}
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              <SVGIcon
+                name={url?.type.toLowerCase()}
+                w="24px"
+                h="24px"
+                style={style}
+              />
+            </a>
+          ))}
+        </S.Toolbar.Icon>
+      </S.Toolbar.Ref>
+      <BookmarkIcon name="bookmark" w="24px" h="24px" onClick={onBookmark} />
+    </S.Toolbar>
+  );
+};
+
+DeveloperCard.Image.defaultProps = {
+  data: null,
+};
+
+DeveloperCard.propTypes = {
+  children: PropTypes.node.isRequired,
+};
+
+DeveloperCard.Body.propTypes = {
+  children: PropTypes.node.isRequired,
+};
+
+DeveloperCard.Name.propTypes = {
+  children: PropTypes.node.isRequired,
+  isBookmarked: PropTypes.bool.isRequired,
+  developerId: PropTypes.number.isRequired,
+};
+
+DeveloperCard.Job.propTypes = {
+  children: PropTypes.node.isRequired,
+};
+
+DeveloperCard.Text.propTypes = {
+  children: PropTypes.node.isRequired,
+};
+
+DeveloperCard.Image.propTypes = {
+  alt: PropTypes.string.isRequired,
+  data: PropTypes.object,
+};
+
+DeveloperCard.Toolbar.propTypes = {
+  socialUrl: PropTypes.array.isRequired,
+  onBookmark: PropTypes.func.isRequired,
+};

src/components/card/DeveloperCard/DeveloperCard.stories.mdx

@@ -0,0 +1,50 @@
+import { Meta, Story, Preview, Props } from '@storybook/addon-docs/blocks';
+import { action } from '@storybook/addon-actions';
+import DeveloperCard from './';
+
+<Meta title="Components/card/DeveloperCard" component={DeveloperCard} />
+
+# DeveloperCard Component
+
+개발자 프로필 카드 컴포넌트입니다.
+
+## Props
+
+<Props of={DeveloperCard} />
+
+## Image Exist usage
+
+<Preview>
+  <Story name="Basic">
+    <DeveloperCard
+      onClick={action('프로필 페이지 이동')}
+      onBookmark={action('북마크 이벤트 발생')}
+      data={{
+        title: 'Title',
+        content:
+          'Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text',
+        hashtag: '#hashtag',
+        provider: 'Text',
+        url: '/',
+        imgUrl: 'https://source.unsplash.com/random',
+        SocialUrl: [
+          {
+            type: 'BLOG',
+            url: '',
+          },
+        ],
+      }}
+    />
+  </Story>
+</Preview>
+
+## No Image usage
+
+<Preview>
+  <Story name="No Image">
+    <DeveloperCard
+      onClick={action('프로필 페이지 이동')}
+      onBookmark={action('북마크 이벤트 발생')}
+    />
+  </Story>
+</Preview>

src/components/card/DeveloperCard/index.js

@@ -0,0 +1,79 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import DeveloperCard from './DeveloperCard';
+import UserBadge from '../../common/Badge/UserBadge';
+
+export default function DeveloperCardLayout({ data, onBookmark, onClick }) {
+  const { name, SocialUrl, UserOccupation } = data;
+
+  return (
+    // home_card, sns_card, profile_card 가 들어 갈 수 있다.
+    <DeveloperCard>
+      <DeveloperCard.Body onClick={onClick}>
+        <DeveloperCard.Text>
+          <DeveloperCard.Name>{name || `Name`}</DeveloperCard.Name>
+          <DeveloperCard.Job>
+            {(UserOccupation?.length > 0 &&
+              UserOccupation[0]?.Occupation?.type) ||
+              `Job`}
+          </DeveloperCard.Job>
+          <UserBadge grade="white">White</UserBadge>
+        </DeveloperCard.Text>
+        <DeveloperCard.Image data={data} alt="card_cover_image" />
+      </DeveloperCard.Body>
+      <Divider />
+      <DeveloperCard.Toolbar
+        socialUrl={SocialUrl || []}
+        onBookmark={onBookmark}
+      />
+    </DeveloperCard>
+  );
+}
+
+DeveloperCardLayout.defaultProps = {
+  data: {
+    title: 'Title',
+    content:
+      'Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text',
+    hashtag: '#hashtag',
+    provider: 'Text',
+    url: '/',
+    SocialUrl: [
+      {
+        type: 'BLOG',
+        url: '',
+      },
+      {
+        type: 'GITHUB',
+        url: '',
+      },
+      {
+        type: 'LINKEDIN',
+        url: '',
+      },
+      {
+        type: 'FACEBOOK',
+        url: '',
+      },
+      {
+        type: 'TWITTER',
+        url: '',
+      },
+    ],
+  },
+  onClick: () => {},
+  onBookmark: () => {},
+};
+
+DeveloperCardLayout.propTypes = {
+  data: PropTypes.object,
+  onClick: PropTypes.func,
+  onBookmark: PropTypes.func,
+};
+
+const Divider = styled.div`
+  height: 1px;
+  width: 100%;
+  background-color: #434853;
+`;