이어서 할 곳

GitHub - fc-micro-frontends/career-up at step2

Icon 컴포넌트 만들기

➜ pnpm --filter @career-up/ui-kit add react-icons

// career-up/packages/ui-kit/src/components/icons/Home.tsx

import { FaHome } from "react-icons/fa";

const Home = FaHome;

export default Home;

// career-up/packages/ui-kit/src/components/icons/UserFriends.tsx

import { FaUserFriends } from "react-icons/fa";

const UserFriends = FaUserFriends;

export default UserFriends;

// career-up/packages/ui-kit/src/components/icons/LaptopCode.tsx

import { FaLaptopCode } from "react-icons/fa";

const LaptopCode = FaLaptopCode;

export default LaptopCode;

// career-up/packages/ui-kit/src/components/icons/Briefcase.tsx

import { FaBriefcase } from "react-icons/fa";

const Briefcase = FaBriefcase;

export default Briefcase;

// career-up/packages/ui-kit/src/components/Icon.tsx

import Briefcase from "./icons/Briefcase";
import Home from "./icons/Home";
import LaptopCode from "./icons/LaptopCode";
import UserFriends from "./icons/UserFriends";

const Icon = {
  Briefcase,
  Home,
  LaptopCode,
  UserFriends,
};

export default Icon;

// career-up/packages/ui-kit/src/index.ts

import "./global.css";

import Icon from "./components/Icon";
import Button from "./components/Button";

export { Icon, Button };

➜ pnpm --filter @career-up/ui-kit build

// career-up/apps/shell/src/App.tsx

import React from "react";
import ReactDOM from "react-dom";

import "@career-up/ui-kit/index.css";
import { Button, Icon } from "@career-up/ui-kit";

const App = () => (
  <div className="container">
    <div>Name: shell</div>
    <div>Framework: react</div>
    <div>Language: TypeScript</div>
    <div>CSS: Empty CSS</div>
    <div>
      <Button />
    </div>
    <div>
      <Icon.Briefcase />
    </div>
  </div>
);
ReactDOM.render(<App />, document.getElementById("app"));

➜ pnpm --filter @career-up/shell start:live

Button 컴포넌트 만들기

// career-up/packages/ui-kit/src/components/Button.tsx

import React from "react";
import styles from "./Button.module.css";

type ButtonProps = React.PropsWithChildren<{
  onClick?: () => void;
}>;

const Button: React.FC<ButtonProps> = ({ children, onClick }) => {
  return (
    <button className={styles.btn} onClick={onClick}>
      {children}
    </button>
  );
};

export default Button;

/* career-up/packages/ui-kit/src/components/Button.module.tsx */

.btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background-color: transparent;
  border-radius: 1.6rem;
  padding: 0.6rem 1.6rem;
  color: #0a66c2;
  box-shadow: inset 0 0 0 1px #0a66c2;
  border: none;
  cursor: pointer;
  min-height: 32px;
  line-height: 20px;
}

.btn:hover {
  background-color: rgba(112, 181, 249, 0.2);
  box-shadow: inset 0 0 0 2px #0a66c2;
}

➜ pnpm --filter @career-up/ui-kit build

// career-up/apps/shell/src/App.tsx

import React from "react";
import ReactDOM from "react-dom";

import "@career-up/ui-kit/index.css";
import { Button, Icon } from "@career-up/ui-kit";

const App = () => (
  <div className="container">
    <div>Name: shell</div>
    <div>Framework: react</div>
    <div>Language: TypeScript</div>
    <div>CSS: Empty CSS</div>
    <div>
      <Button>Hello</Button>
    </div>
    <div>
      <Icon.Briefcase />
    </div>
  </div>
);
ReactDOM.render(<App />, document.getElementById("app"));

➜ pnpm --filter @career-up/shell start:live

최종