issue # 비밀번호 초기화 로직 구현 중

.gitea/workflows/gitea-ci.yml

@@ -0,0 +1,55 @@
+name: Test CI
+
+on:
+  push:
+    branches: [main]
+
+jobs:
+  build:
+    runs-on: rpi5
+
+    env:
+      DOCKER_VOLUME: ${{ vars.DOCKER_VOLUME }}
+
+    steps:
+    - name: Checkout
+      uses: actions/checkout@v4
+
+    - name: Check PWD
+      run: |
+        echo "Docker volume: $DOCKER_VOLUME"
+        echo "PWD: $PWD"
+
+    - name: Validate Node Environment
+      run: |
+        if ! command -v node &> /dev/null
+        then
+          echo "Error: Node.js not found"
+          exit 1
+        fi
+        echo "Node.js version: $(node -v)"
+
+    - name: Restore node_modules
+      id: cache-node
+      uses: actions/cache@v4
+      with:
+        path: node_modules
+        key: ${{ runner.os }}-yarn-v1-${{ hashFiles('**/yarn.lock') }}
+        restore-keys: |
+          ${{ runner.os }}-yarn-v1-
+
+    - name: Install Dependencies with Npm
+      if: steps.cache-node.outputs.cache-hit != 'true'
+      run: |
+        npm install
+        ls .
+
+    - name: Build Nestjs project
+      run: |
+        npm run build
+        ls .
+
+    - name: Deploy dist
+      run: |
+        cp -r dist/* $DOCKER_VOLUME/scheduler/front/service/
+        ls $DOCKER_VOLUME/scheduler/front/service/

.gitlab-ci.yml

@@ -1,25 +0,0 @@
-stages:
-  - build
-
-variables:
-  GIT_STRATEGY: clone
-  GIT_CHECKOUT: "true"
-  GIT_SSL_NO_VERIFY: "true"
-
-cache:
-  paths:
-    - node_modules/
-
-build:
-  stage: build
-  image: node:25.1.0
-  tags:
-    - local-runner
-  script:
-    - node -v
-    - npm install
-    - npm run build
-    - pwd
-    - ls
-    - whoami
-    - sudo cp -r $PWD/dist/.  $DOCKER_VOLUME/scheduler/front/service/

src/App.tsx

@@ -8,6 +8,7 @@ import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-d
 import { useAuthStore } from './store/authStore';
 import { PageRouting } from './data/RoutingData';
 import LoginPage from './ui/page/login/LoginPage';
+import ResetPasswordPage from './ui/page/resetPassword/ResetPasswordPage';
 
 function App() {
   const { authData } = useAuthStore();
@@ -18,6 +19,7 @@ function App() {
         <Route element={<Layout />}>
           <Route element={<LoginPage />} path={PageRouting["LOGIN"].path} />
           <Route element={<SignUpPage />} path={PageRouting["SIGN_UP"].path} />
+          <Route element={<ResetPasswordPage />} path={PageRouting["RESET_PASSWORD"].path} />
           {!(authData?.isLogedIn) ? <Route element={<Navigate to={PageRouting["LOGIN"].path} />} path="*" /> : null}
         </Route>
       </Routes>

src/data/form/resetPassword.schema.ts

@@ -3,4 +3,7 @@ import * as z from 'zod';
 export const ResetPasswordSchema = z.object({
 	email: z
 		.email()
+	, resetCode: z
+		.string()
+		.length(6)
 });

src/ui/page/login/LoginPage.tsx

@@ -1,6 +1,6 @@
 import { Card, CardContent, CardHeader, CardFooter } from '@/components/ui/card';
 import { LoginSchema } from '@/data/form';
-import { Field, FieldError, FieldGroup, FieldLabel, FieldLegend } from '@/components/ui/field';
+import { Field, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator } from '@/components/ui/field';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { zodResolver } from '@hookform/resolvers/zod';
@@ -9,6 +9,8 @@ import { Controller, useForm } from 'react-hook-form';
 import { useNavigate } from 'react-router-dom';
 import { PageRouting } from '@/data/RoutingData';
 import * as z from 'zod';
+import { Separator } from '@/components/ui/separator';
+import { Label } from '@/components/ui/label';
 
 export default function LoginPage() {
   const navigate = useNavigate();
@@ -25,6 +27,20 @@ export default function LoginPage() {
     navigate(PageRouting["SIGN_UP"].path);
   }, []);
 
+  const moveToResetPasswordPage = useCallback(() => {
+    navigate(PageRouting["RESET_PASSWORD"].path);
+  }, []);
+
+  const TextSeparator = ({ text }: { text: string }) => {
+    return (
+      <div className="w-full flex flex-row items-center justify-center">
+        <Separator className="flex-1" />
+        <span className="text-gray-500 px-3 text-sm text-muted-foregroud">{text}</span>
+        <Separator className="flex-1" />
+      </div>
+    )
+  }
+
   return (
     <div className="w-full h-full flex flex-col justify-center items-center">
       <Card className="w-md pl-2 pr-2">
@@ -32,7 +48,7 @@ export default function LoginPage() {
           로그인
         </CardHeader>
         <CardContent>
-          <form id="form-login">
+          <form id="form-login" className="w-full flex flex-col gap-2.5">
             <Controller
               name="email"
               control={loginForm.control}
@@ -55,7 +71,15 @@ export default function LoginPage() {
               control={loginForm.control}
               render={({ field, fieldState }) => (
                 <Field data-invalid={fieldState.invalid}>
-                  <FieldLabel htmlFor="form-login-password">비밀번호</FieldLabel>
+                  <div className="w-full flex flex-row justify-between items-end">
+                    <FieldLabel className="w-fit" htmlFor="form-login-password">비밀번호</FieldLabel>
+                    <Button
+                      className="p-0 bg-transparent hover:bg-transparent h-fit w-fit text-xs text-gray-400 hover:text-gray-500 cursor-pointer"
+                      onClick={moveToResetPasswordPage}
+                    >
+                      비밀번호를 잊으셨습니까?
+                    </Button>
+                  </div>
                   <Input
                     {...field}
                     type="password"
@@ -70,16 +94,21 @@ export default function LoginPage() {
           </form>
         </CardContent>
         <CardFooter
-          className="w-full flex flex-col items-center justify-between gap-[5px]"
+          className="w-full flex flex-col items-center gap-5"
         >
           <Button 
-            className="w-full"
+            className="w-full bg-indigo-500 hover:bg-indigo-400"
             type="submit"
-            form="form-login">
+            form="form-login"
+            disabled={
+              (loginForm.getValues("email").trim.length < 1)
+              && (loginForm.getValues("password").trim.length < 1)
+            }>
             로그인
           </Button>
+          <TextSeparator text="또는" />
           <Button
-            className="w-full bg-white border-2 text-black hover:bg-gray-100"
+            className="w-full text-violet-500 bg-white border border-violet-500 hover:bg-violet-500 hover:text-white"
             onClick={moveToSignUpPage}
           >
             회원가입

src/ui/page/resetPassword/ResetPasswordPage.tsx

@@ -0,0 +1,80 @@
+import { Card, CardContent, CardHeader, CardFooter } from '@/components/ui/card';
+import { ResetPasswordSchema } from '@/data/form';
+import { Field, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator } from '@/components/ui/field';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useState, useCallback } from 'react';
+import { Controller, useForm } from 'react-hook-form';
+import { useNavigate } from 'react-router-dom';
+import { PageRouting } from '@/data/RoutingData';
+import * as z from 'zod';
+import { Separator } from '@/components/ui/separator';
+import { Label } from '@/components/ui/label';
+
+export default function ResetPasswordPage() {
+  const navigate = useNavigate();
+
+  const loginForm = useForm<z.infer<typeof ResetPasswordSchema>>({
+    resolver: zodResolver(ResetPasswordSchema),
+    defaultValues: {
+      email: "",
+      resetCode: ""
+    }
+  });
+
+  const moveToLoginPage = useCallback(() => {
+    navigate(PageRouting["LOGIN"].path);
+  }, []);
+
+  return (
+    <div className="w-full h-full flex flex-col justify-center items-center">
+      <Card className="w-md pl-2 pr-2">
+        <CardHeader>
+          비밀번호 초기화
+        </CardHeader>
+        <CardContent>
+          <form id="form-reset-password" className="w-full flex flex-col gap-2.5">
+            <Controller
+              name="email"
+              control={loginForm.control}
+              render={({ field, fieldState }) => (
+                <Field data-invalid={fieldState.invalid}>
+                  <FieldLabel htmlFor="form-reset-password-email">이메일</FieldLabel>
+                  <Input
+                    {...field}
+                    type="email"
+                    id="form-reset-password-email"
+                    aria-invalid={fieldState.invalid}
+                  />
+                  <FieldError errors={[fieldState.error]} />
+                </Field>
+              )}
+            >
+            </Controller>
+          </form>
+        </CardContent>
+        <CardFooter
+          className="w-full flex flex-row items-center gap-5"
+        >
+          <Button 
+            className="flex-8 bg-indigo-500 hover:bg-indigo-400"
+            type="submit"
+            form="form-reset-password"
+            disabled={
+              (loginForm.getValues("email").trim.length < 1)
+              && (loginForm.getValues("resetCode").trim.length < 1)
+            }>
+            인증 번호 발송
+          </Button>
+          <Button
+            className="flex-1 bg-stone-300 text-white hover:bg-stone-400"
+            onClick={moveToLoginPage}
+          >
+            취소
+          </Button>
+        </CardFooter>
+      </Card>
+    </div>
+  )
+}