회원가입 / 로그읜 페이지 제작

.github/workflows/ci.yml

@@ -2,7 +2,7 @@ name: CI
 
 on:
   pull_request:
-    branches: [develop, main] # PR이 develop이나 main으로 갈 때만 동작
+    branches: [develop, main]
 
 jobs:
   build:
@@ -16,10 +16,28 @@ jobs:
         uses: actions/setup-node@v3
         with:
           node-version: 18
-          cache: yarn
+
+      - name: Enable Corepack
+        run: corepack enable
+
+      - name: Prepare Yarn 4
+        run: corepack prepare yarn@4.9.1 --activate
+
+      # Optional: 캐시 수동 설정
+      - name: Cache Yarn
+        uses: actions/cache@v3
+        with:
+          path: |
+            .yarn/cache
+            .yarn/unplugged
+            .yarn/install-state.gz
+            .pnp.*
+          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-
 
       - name: Install dependencies
-        run: yarn install --frozen-lockfile
+        run: yarn install --immutable
 
       - name: Type check
         run: yarn tsc --noEmit

apps/web/package.json

@@ -1,28 +1,27 @@
 {
-  "name": "my-app",
+  "name": "@stracker/web",
+  "description": "Stracker Web Application",
   "version": "0.1.0",
   "private": true,
   "scripts": {
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "eslint . --ext .ts,.tsx"
   },
   "dependencies": {
-    "next": "^13.0.0",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0"
+    "@stracker/design-token": "workspace:^",
+    "clsx": "^2.1.1",
+    "next": "^14.1.0",
+    "tailwindcss": "^3.4.1"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3.0.0",
-    "@types/node": "^20.0.0",
-    "@types/react": "^18.0.0",
-    "@types/react-dom": "^18.0.0",
-    "autoprefixer": "^10.4.21",
+    "@types/node": "^20.4.0",
+    "autoprefixer": "^10.4.16",
     "eslint": "^9.0.0",
-    "eslint-config-next": "^13.0.0",
-    "postcss": "^8.5.3",
-    "tailwindcss": "^4.1.3",
-    "typescript": "^5.0.0"
+    "eslint-config-next": "^14.1.0",
+    "postcss": "^8.4.38",
+    "typescript": "^5.4.3"
   }
 }

apps/web/postcss.config.mjs

@@ -1,5 +1,5 @@
 const config = {
-  plugins: ["@tailwindcss/postcss"],
+  plugins: { tailwindcss: {}, autoprefixer: {} },
 };
 
 export default config;

apps/web/src/app/globals.css

@@ -1,4 +1,6 @@
-@import "tailwindcss";
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
 
 :root {
   --background: #ffffff;
@@ -12,13 +14,6 @@
   --font-mono: var(--font-geist-mono);
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
-}
-
 body {
   background: var(--background);
   color: var(--foreground);

apps/web/src/app/login/page.tsx

@@ -0,0 +1,38 @@
+import { Button, Input } from "@web/components";
+
+const loginPage = () => {
+  return (
+    <div className="flex flex-col items-center justify-center h-screen">
+      <div className="border border-solid border-zinc-200  w-[30rem] h-au rounded-3xl flex flex-col gap-10 px-6 pt-5 pb-4">
+        <div className="flex flex-col gap-8">
+          <img src="/assets/Logo.svg" className="w-[6rem]" />
+          <div className="flex flex-col items-center justify-center gap-4">
+            <Input
+              label="아이디"
+              placeholder="아이디를 입력해주세요.."
+              type="text"
+            />
+            <Input
+              label="비밀번호"
+              placeholder="비밀번호를 입력해주세요.."
+              type="password"
+            />
+          </div>
+        </div>
+        <div className="flex flex-col items-center justify-center gap-5">
+          <Button size="large" backColor="blue" borderColor="blue">
+            로그인
+          </Button>
+          <div className="text-b1 flex items-center">
+            아직 계정이 없으신가요?&nbsp;
+            <a href="/signin" className="text-blue-600">
+              회원가입
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default loginPage;

apps/web/src/app/page.tsx

@@ -1,3 +1,3 @@
-import Image from "next/image";
-
-export default function Home() {}
+export default function Home() {
+  return <></>;
+}

apps/web/src/app/signin/page.tsx

@@ -0,0 +1,57 @@
+import { Button, Input } from "@web/components";
+
+const signInPage = () => {
+  const selectItems = [
+    "BackEnd",
+    "FrontEnd",
+    "AI",
+    "Design",
+    "DevOps",
+    "Embedded",
+  ];
+  return (
+    <div className="flex flex-col items-center justify-center h-screen">
+      <div className="border border-solid border-zinc-200  w-[30rem] h-au rounded-3xl flex flex-col gap-10 px-6 pt-5 pb-4">
+        <div className="flex flex-col gap-8">
+          <img src="/assets/Logo.svg" className="w-[6rem]" />
+          <div className="flex flex-col items-center justify-center gap-4">
+            <Input
+              label="아이디"
+              placeholder="아이디를 입력해주세요.."
+              type="text"
+            />
+            <Input
+              label="비밀번호"
+              placeholder="비밀번호를 입력해주세요.."
+              type="password"
+            />
+            <Input
+              label="비밀번호 확인"
+              placeholder="비밀번호를 입력해주세요.."
+              type="password"
+            />
+            <Input
+              label="전공 선택"
+              placeholder="전공 선택"
+              type="select"
+              selectItems={selectItems}
+            />
+          </div>
+        </div>
+        <div className="flex flex-col items-center justify-center gap-5">
+          <Button size="large" backColor="blue" borderColor="blue">
+            회원가입
+          </Button>
+          <div className="text-b1 flex items-center">
+            이미 계정이 있으시다면?&nbsp;
+            <a href="/login" className="text-blue-600">
+              로그인
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default signInPage;

apps/web/src/components/button.tsx

@@ -0,0 +1,38 @@
+"use client";
+
+import clsx from "clsx";
+
+interface ButtonProps {
+  children: React.ReactNode;
+  size?: "small" | "medium" | "large";
+  backColor?: string;
+  textColor?: string;
+  borderColor?: string;
+}
+
+const Button = ({
+  children,
+  size,
+  backColor,
+  textColor,
+  borderColor,
+}: ButtonProps) => {
+  return (
+    <div
+      className={clsx(
+        "flex items-center justify-center rounded-lg cursor-pointer hover:bg-blue-500",
+        {
+          "px-4 py-2 text-b2": size === "small",
+          "px-6 py-3 text-b2": size === "medium",
+          "w-[27rem] h-[3rem] text-b2": size === "large",
+        },
+        { "bg-blue-600 text-white": backColor === "blue" },
+        { "border border-blue-600": borderColor === "blue" },
+      )}
+    >
+      {children}
+    </div>
+  );
+};
+
+export default Button;

apps/web/src/components/index.ts

@@ -0,0 +1,2 @@
+export { default as Input } from "./input";
+export { default as Button } from "./button";