feat: 프로젝트 아키텍처 구축 (#14)

Auto-merging PR

apps/web/app/page.tsx

@@ -1,95 +1,11 @@
 import Image from "next/image";
 import styles from "./page.module.css";
+import { FirstDomainExampleScreen } from "@sambad/domains/first-domain";
 
 export default function Home() {
   return (
     <main className={styles.main}>
-      <div className={styles.description}>
-        <p>
-          Get started by editing&nbsp;
-          <code className={styles.code}>src/app/page.tsx</code>
-        </p>
-        <div>
-          <a
-            href="https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            By{" "}
-            <Image
-              src="/vercel.svg"
-              alt="Vercel Logo"
-              className={styles.vercelLogo}
-              width={100}
-              height={24}
-              priority
-            />
-          </a>
-        </div>
-      </div>
-
-      <div className={styles.center}>
-        <Image
-          className={styles.logo}
-          src="/next.svg"
-          alt="Next.js Logo"
-          width={180}
-          height={37}
-          priority
-        />
-      </div>
-
-      <div className={styles.grid}>
-        <a
-          href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className={styles.card}
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2>
-            Docs <span>-&gt;</span>
-          </h2>
-          <p>Find in-depth information about Next.js features and API.</p>
-        </a>
-
-        <a
-          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className={styles.card}
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2>
-            Learn <span>-&gt;</span>
-          </h2>
-          <p>Learn about Next.js in an interactive course with&nbsp;quizzes!</p>
-        </a>
-
-        <a
-          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className={styles.card}
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2>
-            Templates <span>-&gt;</span>
-          </h2>
-          <p>Explore starter templates for Next.js.</p>
-        </a>
-
-        <a
-          href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className={styles.card}
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2>
-            Deploy <span>-&gt;</span>
-          </h2>
-          <p>
-            Instantly deploy your Next.js site to a shareable URL with Vercel.
-          </p>
-        </a>
-      </div>
+      <FirstDomainExampleScreen />
     </main>
   );
 }

apps/web/app/second/page.tsx

@@ -0,0 +1,11 @@
+import Image from "next/image";
+import styles from "../page.module.css";
+import { SecondDomainExampleScreen } from "@sambad/domains/second-domain";
+
+export default function Second() {
+  return (
+    <main className={styles.main}>
+      <SecondDomainExampleScreen />
+    </main>
+  );
+}

apps/web/package.json

@@ -9,7 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@sambad/ui": "workspace:*",
+    "@sambad/domains": "workspace:*",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "next": "14.2.4"

packages/core/sds/README.md

@@ -0,0 +1 @@
+# `sds`

packages/core/sds/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "@sambad/sds",
+  "version": "0.0.0",
+  "private": true,
+  "exports": {},
+  "scripts": {
+    "lint": "eslint . --max-warnings 0"
+  },
+  "devDependencies": {
+    "@sambad/eslint-config": "workspace:*",
+    "@sambad/typescript-config": "workspace:*",
+    "@types/node": "^20.11.24",
+    "@types/eslint": "^8.56.5",
+    "@types/react": "^18.2.61",
+    "@types/react-dom": "^18.2.19",
+    "eslint": "^8.57.0",
+    "react": "^18",
+    "typescript": "^5.3.3"
+  }
+}

packages/ui/tsconfig.json → packages/core/sds/tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "extends": "@repo/typescript-config/react-library.json",
+  "extends": "@sambad/typescript-config/react-library.json",
   "compilerOptions": {
     "outDir": "dist"
   },

packages/ui/tsconfig.lint.json → packages/core/sds/tsconfig.lint.json

@@ -1,5 +1,5 @@
 {
-  "extends": "@repo/typescript-config/react-library.json",
+  "extends": "@sambad/typescript-config/react-library.json",
   "compilerOptions": {
     "outDir": "dist"
   },

packages/core/ui/.eslintrc.js

@@ -0,0 +1,10 @@
+/** @type {import("eslint").Linter.Config} */
+module.exports = {
+  root: true,
+  extends: ["@repo/eslint-config/react-internal.js"],
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    project: "./tsconfig.lint.json",
+    tsconfigRootDir: __dirname,
+  },
+};

packages/ui/package.json → packages/core/ui/package.json

@@ -3,13 +3,10 @@
   "version": "0.0.0",
   "private": true,
   "exports": {
-    "./button": "./src/button.tsx",
-    "./card": "./src/card.tsx",
-    "./code": "./src/code.tsx"
+    ".": "./src/index.ts"
   },
   "scripts": {
-    "lint": "eslint . --max-warnings 0",
-    "generate:component": "turbo gen react-component"
+    "lint": "eslint . --max-warnings 0"
   },
   "devDependencies": {
     "@sambad/eslint-config": "workspace:*",

packages/ui/src/button.tsx → packages/core/ui/src/Button.tsx

@@ -1,18 +1,24 @@
 "use client";
 
-import { ReactNode } from "react";
+import { HTMLAttributes, ReactNode } from "react";
 
-interface ButtonProps {
+interface ButtonProps extends HTMLAttributes<HTMLButtonElement> {
   children: ReactNode;
   className?: string;
   appName: string;
 }
 
-export const Button = ({ children, className, appName }: ButtonProps) => {
+export const Button = ({
+  children,
+  className,
+  appName,
+  ...rest
+}: ButtonProps) => {
   return (
     <button
       className={className}
       onClick={() => alert(`Hello from your ${appName} app!`)}
+      {...rest}
     >
       {children}
     </button>

packages/core/ui/src/index.ts

@@ -0,0 +1,3 @@
+export { Button } from "./Button";
+export { Card } from "./Card";
+export { Code } from "./Code";

packages/core/ui/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "@sambad/typescript-config/react-library.json",
+  "compilerOptions": {
+    "outDir": "dist"
+  },
+  "include": ["src"],
+  "exclude": ["node_modules", "dist"]
+}

packages/core/ui/tsconfig.lint.json

@@ -0,0 +1,8 @@
+{
+  "extends": "@sambad/typescript-config/react-library.json",
+  "compilerOptions": {
+    "outDir": "dist"
+  },
+  "include": ["src", "turbo"],
+  "exclude": ["node_modules", "dist"]
+}

packages/domains/.eslintrc.js

@@ -0,0 +1,10 @@
+/** @type {import("eslint").Linter.Config} */
+module.exports = {
+  root: true,
+  extends: ["@sambad/eslint-config/react-internal.js"],
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    project: "./tsconfig.lint.json",
+    tsconfigRootDir: __dirname,
+  },
+};

packages/domains/README.md

@@ -0,0 +1 @@
+# `domains`

packages/domains/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@sambad/domains",
+  "version": "0.0.0",
+  "private": true,
+  "exports": {
+    "./first-domain": "./src/first-domain/index.ts",
+    "./second-domain": "./src/second-domain/index.ts"
+  },
+  "scripts": {
+    "lint": "eslint . --max-warnings 0"
+  },
+  "dependencies": {},
+  "devDependencies": {
+    "@sambad/ui": "workspace:*",
+    "@sambad/eslint-config": "workspace:*",
+    "@sambad/typescript-config": "workspace:*",
+    "@types/node": "^20.11.24",
+    "@types/eslint": "^8.56.5",
+    "@types/react": "^18.2.61",
+    "@types/react-dom": "^18.2.19",
+    "eslint": "^8.57.0",
+    "react": "^18",
+    "typescript": "^5.3.3"
+  }
+}

packages/domains/src/first-domain/features/components/FirstFeatureOfFirstDomainTestBox.tsx

@@ -0,0 +1,23 @@
+import { Button } from "@sambad/ui";
+import { PropsWithChildren } from "react";
+
+interface FirstFeatureOfFirstDomainBoxProps {
+  displayText: string;
+  onClick?: () => void;
+}
+
+export const FirstFeatureOfFirstDomainBox = ({
+  displayText,
+  onClick,
+  children,
+}: PropsWithChildren<FirstFeatureOfFirstDomainBoxProps>) => {
+  return (
+    <div>
+      <Button appName="Container Box Button" onClick={onClick}>
+        FirstDomainTestBox
+      </Button>
+      {displayText}
+      {children}
+    </div>
+  );
+};

packages/domains/src/first-domain/features/components/FirstFeatureOfFirstDomainTestButton.tsx

@@ -0,0 +1,23 @@
+import { Button } from "@sambad/ui";
+import { HTMLAttributes, ReactNode } from "react";
+import { useFirstFeatureOfFirstDomainTestButton } from "../hooks/useFirstFeatureOfFirstDomainTestButton";
+
+interface FirstFeaturedOfFirstDomainTestButtonProps
+  extends HTMLAttributes<HTMLButtonElement> {
+  children?: ReactNode;
+}
+
+export const FirstFeatureOfFirstDomainTestButton = ({
+  children,
+  ...rest
+}: FirstFeaturedOfFirstDomainTestButtonProps) => {
+  const { testText, handleChangeTestText } =
+    useFirstFeatureOfFirstDomainTestButton();
+
+  return (
+    <Button appName="sambad" onClick={handleChangeTestText} {...rest}>
+      {children}
+      {testText}
+    </Button>
+  );
+};

packages/domains/src/first-domain/features/containers/FirstFeatureOfFirstDomainTestContainer.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import { FirstFeatureOfFirstDomainBox } from "../components/FirstFeatureOfFirstDomainTestBox";
+import { FirstFeatureOfFirstDomainTestButton } from "../components/FirstFeatureOfFirstDomainTestButton";
+import { useFirstFeatureOfFirstDomainService } from "../services/useFirstFeatureOfFirstDomainTestService";
+
+export const FirstFeatureOfFirstDomainTestContainer = () => {
+  const { displayText, handleChangeDisplayText } =
+    useFirstFeatureOfFirstDomainService();
+
+  return (
+    <FirstFeatureOfFirstDomainBox
+      displayText={displayText}
+      onClick={handleChangeDisplayText}
+    >
+      <FirstFeatureOfFirstDomainTestButton
+        onClick={() => {
+          alert("Button is Clicked at Container");
+        }}
+      />
+    </FirstFeatureOfFirstDomainBox>
+  );
+};

packages/domains/src/first-domain/features/hooks/useFirstFeatureOfFirstDomainTestButton.ts

@@ -0,0 +1,14 @@
+import { useState } from "react";
+
+export const useFirstFeatureOfFirstDomainTestButton = () => {
+  const [testText, setTestText] = useState<string>("Default Button Text");
+
+  const handleChangeTestText = () => {
+    setTestText("Test Button is Clicked!!");
+  };
+
+  return {
+    testText,
+    handleChangeTestText,
+  };
+};

packages/domains/src/first-domain/features/services/useFirstFeatureOfFirstDomainTestService.ts

@@ -0,0 +1,14 @@
+import { useState } from "react";
+
+export const useFirstFeatureOfFirstDomainService = () => {
+  const [displayText, setDisplayText] = useState<string>("");
+
+  const handleChangeDisplayText = () => {
+    setDisplayText("Test Container Button Clicked");
+  };
+
+  return {
+    displayText,
+    handleChangeDisplayText,
+  };
+};

packages/domains/src/first-domain/index.ts

@@ -0,0 +1 @@
+export { FirstDomainExampleScreen } from "./screens/FirstDomainExampleScreen";

packages/domains/src/first-domain/screens/FirstDomainExampleScreen.tsx

@@ -0,0 +1,10 @@
+import { FirstFeatureOfFirstDomainTestContainer } from "../features/containers/FirstFeatureOfFirstDomainTestContainer";
+
+export const FirstDomainExampleScreen = () => {
+  return (
+    <div>
+      <h1>도메인 화면을 전체 담당 하는 컴포넌트입니다.</h1>
+      <FirstFeatureOfFirstDomainTestContainer />
+    </div>
+  );
+};