이어서 할 곳

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

ui-kit 작업

/* career-up/packages/ui-kit/src/global.css */

:root {
  --white: #fff;
  --system-gray-60-a20: rgb(140 140 140/0.2);
}

body {
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f4f2ee;
}

➜ pnpm build

shell 작업

➜ pnpm dev

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

import React from "react";
import { createRoot } from "react-dom/client";
import App from "./App";

import "@career-up/ui-kit/index.css";
**import "./index.css";**

createRoot(document.getElementById("app")!).render(<App />);

/* career-up/apps/shell/src/index.css */

.global-nav {
  background-color: var(--white);
  left: 0;
  position: fixed;
  top: 0;
  width: 100vw;
  z-index: 105;
  border-bottom: 1px solid var(--system-gray-60-a20);
}

.global-nav-content {
  align-items: center;
  display: flex;
  margin: 0 auto;
  min-height: 100%;
  width: 1128px;
}

.global-nav-logo {
  height: 30px;
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 17px;
  text-decoration: none;
  color: black;
}

.global-nav-nav {
  margin-left: auto;
  min-height: 52px;
}

.global-nav-items {
  display: flex;
  flex-wrap: nowrap;
  list-style-type: none;
  opacity: 1;
  margin: 0;
}

.global-nav-item {
  display: flex;
  align-items: center;
}

.global-nav-link {
  align-items: center;
  background: transparent;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  font-size: 1.2rem;
  font-weight: 400;
  justify-content: center;
  text-align: center;
  min-height: 51px;
  min-width: 80px;
  position: relative;
  text-decoration: none;
  color: rgb(0 0 0/0.6);
  border-bottom: 2px solid white;
}

.global-nav-link.active {
  color: rgb(0 0 0/0.9);
  border-bottom: 2px solid rgb(0 0 0/0.9);
}

.global-nav-link-text {
  font-size: 13px;
}

.global-container {
  padding-top: 53px;
}

// career-up/apps/shell/src/constants/prefix.ts

export const appPostingPrefix = "posting";
export const appPostingBasename = `/${appPostingPrefix}`;

export const appNetworkPrefix = "network";
export const appNetworkBasename = `/${appNetworkPrefix}`;

export const appEduPrefix = "edu";
export const appEduBasename = `/${appEduPrefix}`;

export const appJobPrefix = "job";
export const appJobBasename = `/${appJobPrefix}`;

// career-up/apps/shell/src/components/layout.tsx

import React from "react";
import { Link, NavLink, Outlet } from "react-router-dom";
import {
  appEduBasename,
  appJobBasename,
  appNetworkBasename,
  appPostingBasename,
} from "../constants/prefix";
import { Icon } from "@career-up/ui-kit";

const Layout = () => {
  return (
    <div>
      <header className="global-nav">
        <div className="global-nav-content">
          <Link className="global-nav-logo" to="/">
            <svg
              data-v-62b4fdfc=""
              width="30"
              height="30"
              viewBox="0 0 76 76"
              fill="none"
              xmlns="<http://www.w3.org/2000/svg>"
            >
              <g data-v-62b4fdfc="" clipPath="url(#clip0_2879_347)">
                <path
                  data-v-62b4fdfc=""
                  d="M75.461 37.722a.219.219 0 00.327-.19C75.575 16.805 58.702.069 37.928.069a37.617 37.617 0 00-18.58 4.88.22.22 0 000 .38L75.46 37.722zM5.328 19.347a.22.22 0 00-.38 0 37.617 37.617 0 00-4.88 18.58c0 20.775 16.737 37.64 37.458 37.86a.219.219 0 00.19-.326L5.327 19.347zM12.326 12.47l35.666 61.776a.22.22 0 00.25.099c12.616-3.568 22.543-13.495 26.11-26.11a.22.22 0 00-.098-.25L12.47 12.324c-.09-.052-.197.054-.144.145z"
                  fill="#FC1C49"
                ></path>
              </g>
              <defs data-v-62b4fdfc="">
                <clipPath data-v-62b4fdfc="" id="clip0_2879_347">
                  <path
                    data-v-62b4fdfc=""
                    fill="#fff"
                    d="M0 0h500v75.901H0z"
                  ></path>
                </clipPath>
              </defs>
            </svg>
            <span>Career Up</span>
          </Link>
          <nav className="global-nav-nav">
            <ul className="global-nav-items">
              <li className="global-nav-item">
                <NavLink
                  className="global-nav-link"
                  to={`${appPostingBasename}`}
                >
                  <Icon.Home />
                  <span className="global-nav-link-text">홈</span>
                </NavLink>
              </li>
              <li className="global-nav-item">
                <NavLink
                  className="global-nav-link"
                  to={`${appNetworkBasename}`}
                >
                  <Icon.UserFriends />
                  <span className="global-nav-link-text">인맥</span>
                </NavLink>
              </li>
              <li className="global-nav-item">
                <NavLink className="global-nav-link" to={`${appEduBasename}`}>
                  <Icon.LaptopCode />
                  <span className="global-nav-link-text">교육</span>
                </NavLink>
              </li>
              <li className="global-nav-item">
                <NavLink className="global-nav-link" to={`${appJobBasename}`}>
                  <Icon.Briefcase />
                  <span className="global-nav-link-text">채용공고</span>
                </NavLink>
              </li>
            </ul>
          </nav>
        </div>
      </header>
      <div className="global-container">
        <Outlet />
      </div>
    </div>
  );
};

export default Layout;

최종

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