이어서 할 곳

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

REACT_APP_AUTH0_DOMAIN=dev-vcrmf0xuep020tri.us.auth0.com
REACT_APP_AUTH0_CLIENT_ID=27LLb4I9cIjiiQNSjbNIX9sQM1KECUfk
REACT_APP_AUTH0_CALLBACK_URL=http://localhost:3000

➜ pnpm i

➜ pnpm build

fragment-recommend-connections 워크스페이스 생성

// career-up/pnpm-workspace.yaml

packages:
  - "packages/*"
  - "apps/*"
  - "server"
  **- "fragments/*"**

➜ mkdir fragments
➜ cd fragments

➜ pnpm create mf-app
? Pick the name of your app: fragment-recommend-connections
? Project Type: Application
? Port number: 5001
? Framework: react
? Language: typescript
? CSS: CSS

➜ cd ..

➜ code .

**// career-up/career-up.code-workspace

{
  "folders": [
    {
      "name": "shell",
      "path": "apps/shell"
    },
    {
      "name": "posting",
      "path": "apps/posting"
    },
    {
      "name": "edu",
      "path": "apps/edu"
    },
    {
      "name": "network",
      "path": "apps/network"
    },
    {
      "name": "job",
      "path": "apps/job"
    },
    {
      "name": "fragment-recommend-connections",
      "path": "fragments/fragment-recommend-connections"
    },
    {
      "name": "shell-router",
      "path": "packages/shell-router"
    },
    {
      "name": "ui-kit",
      "path": "packages/ui-kit"
    },
    {
      "name": "server",
      "path": "server"
    },
    {
      "name": "monorepo",
      "path": "."
    }
  ],
  "settings": {
    "typescript.tsdk": "monorepo/node_modules/typescript/lib"
  }
}**

{
  "name": **"@career-up/fragment-recommend-connections",**
  "version": "1.0.0",
  "scripts": {
    "build": "webpack --mode production",
    "build:dev": "webpack --mode development",
    "build:start": "cd dist && PORT=5001 npx serve",
    "start": "webpack serve --open --mode development",
    "start:live": "webpack serve --open --mode development --live-reload --hot"
  },
  "license": "MIT",
  "author": {
    "name": "Jack Herrington",
    "email": "[email protected]"
  },
  "devDependencies": {
    "@babel/core": "^7.15.8",
    "@babel/plugin-transform-runtime": "^7.15.8",
    "@babel/preset-env": "^7.15.8",
    "@babel/preset-react": "^7.14.5",
    "@babel/preset-typescript": "^7.10.4",
    **"@types/react": "^18.2.0",
    "@types/react-dom": "^18.2.0",**
    "autoprefixer": "^10.1.0",
    "babel-loader": "^8.2.2",
    "css-loader": "^6.3.0",
    "html-webpack-plugin": "^5.3.2",
    "postcss": "^8.2.1",
    "postcss-loader": "^4.1.0",
    "style-loader": "^3.3.0",
    **"typescript": "5.2.2",**
    "webpack": "^5.57.1",
    "webpack-cli": "^4.10.0",
    "webpack-dev-server": "^4.3.1"
  },
  "dependencies": {
    **"@career-up/shell-router": "workspace:*",
    "@career-up/ui-kit": "workspace:*",**
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }
}

➜ pnpm i

➜ pnpm --filter @career-up/fragment-recommend-connections add @auth0/auth0-spa-js @babel/runtime

➜ pnpm --filter @career-up/fragment-recommend-connections add eslint eslint-plugin-react-hooks @typescript-eslint/eslint-plugin @typescript-eslint/parser -D

// career-up/fragments/fragment-recommend-connections/.eslintrc.js

module.exports = {
  root: true,
  env: { browser: true, es2020: true },
  extends: [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:react-hooks/recommended",
  ],
  ignorePatterns: ["dist", ".eslintrc.js", "webpack.config.js"],
  parser: "@typescript-eslint/parser",
};

// career-up/fragments/fragment-recommend-connections/webpack.config.js

const HtmlWebPackPlugin = require("html-webpack-plugin");
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");

const deps = require("./package.json").dependencies;
module.exports = (_, argv) => ({
  output: {
    publicPath: "<http://localhost:5001/>",
  },

  resolve: {
    extensions: [".tsx", ".ts", ".jsx", ".js", ".json"],
  },

  devServer: {
    port: 5001,
    historyApiFallback: true,
  },

  module: {
    rules: [
      {
        test: /\\.m?js/,
        type: "javascript/auto",
        resolve: {
          fullySpecified: false,
        },
      },
      {
        test: /\\.(css|s[ac]ss)$/i,
        use: ["style-loader", "css-loader", "postcss-loader"],
      },
      {
        test: /\\.(ts|tsx|js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        },
      },
    ],
  },

  plugins: [
    new ModuleFederationPlugin({
      name: "fragment_recommend_connections",
      filename: "remoteEntry.js",
      remotes: {},
      exposes: {
        **"./container": "./src/containers/recommend-connections-container.tsx",**
      },
      shared: {
        ...deps,
        react: {
          singleton: true,
          requiredVersion: deps.react,
        },
        "react-dom": {
          singleton: true,
          requiredVersion: deps["react-dom"],
        },
        **"@career-up/shell-router": {
          singleton: true,
        },
        "@career-up/ui-kit": {
          singleton: true,
        },**
      },
    }),
    new HtmlWebPackPlugin({
      template: "./src/index.html",
    }),
  ],
});

// career-up/fragments/fragment-recommend-connections/src/types.ts

export interface ConnectionType {
  name: string;
  picture: string | null;
  role: string;
  networkCount: number;
}

// career-up/fragments/fragment-recommend-connections/src/apis.ts

import { type ConnectionType } from "./types";

export async function getConnections(token: string): Promise<ConnectionType[]> {
  const res = await fetch("<http://localhost:4000/connections?_limit=3>", {
    headers: {
      Authorization: `Bearer ${token}`,
    },
  });

  return await res.json();
}

// career-up/fragments/fragment-recommend-connections/src/containers/recommend-connections-container.tsx

import React, { useCallback, useState } from "react";
import { ConnectionType } from "../types";
import { useAuth0Client } from "@career-up/shell-router";
import { getConnections } from "../apis";
import RecommendConnections from "../components/recommend-connections";

const RecommendConnectionsContainer: React.FC = () => {
  const auth0Client = useAuth0Client();
  const [connections, setConnections] = useState<ConnectionType[]>([]);

  const fetchConnections = useCallback(async () => {
    (async () => {
      try {
        const token = await auth0Client.getTokenSilently();
        const connections = await getConnections(token);
        setConnections(connections);
      } catch (error) {
        alert(error);
      }
    })();
  }, [auth0Client]);

  return (
    <RecommendConnections
      connections={connections}
      fetchConnections={fetchConnections}
    />
  );
};

export default RecommendConnectionsContainer;

// career-up/fragments/fragment-recommend-connections/src/components/recommend-connections.css

.fragment-recommend-connections--recommend-connections-top {
  display: flex;
  flex-direction: column;
  background-color: white;

  padding: 16px 12px 16px;
  border-radius: 8px 8px 0 0;
  border-bottom: 1px solid rgb(0 0 0 / 0.1);
  gap: 10px;
}

.fragment-recommend-connections--recommend-connections-top-title {
  font-size: 15px;
  font-weight: bold;
  height: 15px;
}

.fragment-recommend-connections--recommend-connections-bottom {
  display: flex;
  flex-direction: column;
  padding: 16px 12px 16px;
  border-radius: 0 0 8px 8px;
  background-color: white;
  gap: 10px;
}

// career-up/fragments/fragment-recommend-connections/src/components/recommend-connections.tsx

import "./recommend-connections.css";

import React, { useEffect } from "react";
import { type ConnectionType } from "../types";
import Connection from "./connection";

interface RecommendConnectionsProps {
  connections: ConnectionType[];
  fetchConnections: () => Promise<void>;
}

const RecommendConnections: React.FC<RecommendConnectionsProps> = ({
  connections,
  fetchConnections,
}) => {
  useEffect(() => {
    fetchConnections();
  }, [fetchConnections]);

  return (
    <div className="fragment-recommend-connections--recommend-connections">
      <div className="fragment-recommend-connections--recommend-connections-top">
        <span className="fragment-recommend-connections--recommend-connections-top-title">
          일촌 추천
        </span>
      </div>
      <div className="fragment-recommend-connections--recommend-connections-bottom">
        {connections.map((connection, index) => (
          <Connection key={index} {...connection} />
        ))}
      </div>
    </div>
  );
};

export default RecommendConnections;

// career-up/fragments/fragment-recommend-connections/src/components/connection.css

.fragment-recommend-connections--connection {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.fragment-recommend-connections--connection-name {
  font-size: 16px;
  font-weight: 600;
  color: rgb(0 0 0 / 0.9);
}

// career-up/fragments/fragment-recommend-connections/src/components/connection.tsx

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

import React from "react";

interface ConnectionProps {
  name: string;
}

const Connection: React.FC<ConnectionProps> = ({ name }) => {
  return (
    <div className="fragment-recommend-connections--connection">
      <div className="fragment-recommend-connections--connection-name">
        {name}
      </div>
      <div>
        <Button>1촌 맺기</Button>
      </div>
    </div>
  );
};

export default Connection;

최종