easy-cloud-Knet · ga111o · Feb 10, 2026 · Aug 3, 2025 · Aug 26, 2025 · Aug 26, 2025
diff --git a/.github/workflows/docker-image.yaml b/.github/workflows/docker-image.yaml
@@ -4,6 +4,7 @@ on:
   push:
     branches:
       - main
+  workflow_dispatch:
 
 jobs:
   build-and-deploy:

diff --git a/README.md b/README.md
@@ -1,5 +1,7 @@
 # React + TypeScript + Vite
 
+SEOHYEON
+
 This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
 
 Currently, two official plugins are available:
@@ -18,11 +20,11 @@ export default tseslint.config({
   languageOptions: {
     // other options...
     parserOptions: {
-      project: ['./tsconfig.node.json', './tsconfig.app.json'],
+      project: ["./tsconfig.node.json", "./tsconfig.app.json"],
       tsconfigRootDir: import.meta.dirname,
     },
   },
-})
+});
 ```
 
 - Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
@@ -31,11 +33,11 @@ export default tseslint.config({
 
 ```js
 // eslint.config.js
-import react from 'eslint-plugin-react'
+import react from "eslint-plugin-react";
 
 export default tseslint.config({
   // Set the react version
-  settings: { react: { version: '18.3' } },
+  settings: { react: { version: "18.3" } },
   plugins: {
     // Add the react plugin
     react,
@@ -44,7 +46,7 @@ export default tseslint.config({
     // other rules...
     // Enable its recommended rules
     ...react.configs.recommended.rules,
-    ...react.configs['jsx-runtime'].rules,
+    ...react.configs["jsx-runtime"].rules,
   },
-})
+});
 ```
diff --git a/index.html b/index.html
@@ -1,10 +1,21 @@
-<!doctype html>
-<html lang="en">
+<!DOCTYPE html>
+<html lang="ko">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link
+      rel="icon"
+      type="image/svg+xml"
+      href="/src/assets/image/ic_logo.svg"
+    />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <title>도들</title>
+    <script type="text/javascript">
+      (function(c,l,a,r,i,t,y){
+          c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+          t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
+          y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+      })(window, document, "clarity", "script", "u0s53fofcq");
+    </script>
   </head>
   <body>
     <div id="root"></div>

diff --git a/src/App.tsx b/src/App.tsx
@@ -26,21 +26,23 @@ function App() {
       <BrowserRouter>
         <AuthProvider>
           <Routes>
-            <Route path="/" element={<DefaultLayout />}>
-              <Route index element={<VMManage />} />
-              <Route path="create" element={<VMCreate />} />
+            <Route path="/">
+              <Route element={<DefaultLayoutV2 />}>
+                <Route index element={<Landing />} />
+                <Route path="signin" element={<SignIn />} />
+              </Route>
+              <Route element={<DefaultLayout />}>
+                <Route path="manage" element={<VMManage />} />
+                <Route path="create" element={<VMCreate />} />
+
+                <Route path="signup" element={<SignUpDefault />} />
+                <Route path="signup/success" element={<SignUpSuccess />} />
+                <Route path="findpw" element={<FindPw />} />
+                <Route path="resetpw" element={<ResetPw />} />
+                <Route path="resetpw/success" element={<ResetPwSuccess />} />
 
-              <Route path="signin" element={<SignIn />} />
-              <Route path="signup" element={<SignUpDefault />} />
-              <Route path="signup/success" element={<SignUpSuccess />} />
-              <Route path="findpw" element={<FindPw />} />
-              <Route path="resetpw" element={<ResetPw />} />
-              <Route path="resetpw/success" element={<ResetPwSuccess />} />
-
-              <Route path="/invitation" element={<Invitation />} />
-            </Route>
-            <Route path="/landing" element={<DefaultLayoutV2 />}>
-              <Route index element={<Landing />} />
+                <Route path="/invitation" element={<Invitation />} />
+              </Route>
             </Route>
           </Routes>
         </AuthProvider>

diff --git a/src/assets/image/bg_img1.png b/src/assets/image/bg_img1.png
diff --git a/src/assets/image/landing/cloud.png b/src/assets/image/landing/cloud.png
diff --git a/src/assets/image/landing/icon1.png b/src/assets/image/landing/icon1.png
diff --git a/src/assets/image/landing/icon2.png b/src/assets/image/landing/icon2.png
diff --git a/src/assets/image/landing/icon3.png b/src/assets/image/landing/icon3.png
diff --git a/src/assets/image/landing/third_page.png b/src/assets/image/landing/third_page.png
diff --git a/src/assets/image/navbar/ic_arrow_down.svg b/src/assets/image/navbar/ic_arrow_down.svg
diff --git a/src/assets/image/navbar/ic_arrow_up.svg b/src/assets/image/navbar/ic_arrow_up.svg
diff --git a/src/assets/image/navbar/ic_bell.svg b/src/assets/image/navbar/ic_bell.svg
diff --git a/src/assets/image/navbar/ic_bell_with_alarm.svg b/src/assets/image/navbar/ic_bell_with_alarm.svg
diff --git a/src/assets/image/new_ic_logo.png b/src/assets/image/new_ic_logo.png
diff --git a/src/assets/image/vmCreate/debian.svg b/src/assets/image/vmCreate/debian.svg
diff --git a/src/assets/image/vmManage/vmManageModal/copy.svg b/src/assets/image/vmManage/vmManageModal/copy.svg
diff --git a/src/components/LandingInputField.tsx b/src/components/LandingInputField.tsx
@@ -8,11 +8,11 @@ const LandingInputField = ({
   return (
     <input
       className={twMerge(
-        "p-[20px] w-full h-[36px] rounded-[6px] bg-[#F2F8FF] text-(--BlueBlack) text-pr-r-16 focus:outline-none focus:border-[1px] focus:border-(--Main_Blue)",
-        className
+        "p-[20px] w-full h-[36px] rounded-[6px] bg-[#FFFFFF] text-blue-black typo-pr-r-16 focus:outline-none focus:border-[1px] focus:border-main-blue",
+        className,
       )}
       {...props}
-    ></input>
+    />
   );
 };
 

diff --git a/src/components/NavBar.tsx b/src/components/NavBar.tsx
diff --git a/src/components/auth/Selector.tsx b/src/components/auth/Selector.tsx
@@ -20,7 +20,7 @@ const Selector = ({ index = 1 }) => {
   }
 
   return (
-    <div className="d-flex j-content-center">
+    <div className="flex justify-center">
       <img className="selector" src={select} alt="select" />
     </div>
   );

diff --git a/src/components/auth/textField/AuthTextFieldV2.tsx b/src/components/auth/textField/AuthTextFieldV2.tsx
@@ -1,13 +1,12 @@
 import React, { useState } from "react";
 
-import remove from "../../../assets/image/input/remove.svg";
-import ImageBtn from "../../button/ImageBtn";
+import remove from "@/assets/image/input/remove.svg";
+import ImageBtn from "@/components/button/ImageBtn";
 
 import CheckMessage from "./bottomMessages/CheckMessage";
 import ErrorMessage from "./bottomMessages/ErrorMessage";
 import { AuthTextFieldV2Props } from "./types/textField";
 
-
 import "./AuthTextFieldV2.css";
 /**
  * 커스텀 TextField component (MUI TextField 기반)
@@ -20,7 +19,7 @@ import "./AuthTextFieldV2.css";
  * @param {boolean} props.errorMessageCondition - errorMessage 표시 여부
  * @param {string} props.errorMessageContent - errorMessage 내용
  */
-const AuthTextFieldV2: React.FC<AuthTextFieldV2Props> = ({
+const AuthTextFieldV2 = ({
   label,
   style,
   onBlur,
@@ -31,7 +30,7 @@ const AuthTextFieldV2: React.FC<AuthTextFieldV2Props> = ({
   errorMessageCondition = false,
   errorMessageContent,
   ...props
-}) => {
+}: AuthTextFieldV2Props) => {
   const [showDeleteBtn, setShowDeleteBtn] = useState(false);
 
   let className = "";
@@ -49,9 +48,9 @@ const AuthTextFieldV2: React.FC<AuthTextFieldV2Props> = ({
   }
 
   return (
-    <div className="auth-text-field f-dir-column">
+    <div className="auth-text-field flex flex-col">
       {typeof label === "string" && (
-        <label className="p-16-400" htmlFor={label}>
+        <label className="typo-pr-r-16" htmlFor={label}>
           {label}
         </label>
       )}
@@ -101,15 +100,15 @@ const AuthTextFieldV2: React.FC<AuthTextFieldV2Props> = ({
 
       {checkMessageContent || errorMessageContent ? (
         checkMessageCondition ? (
-          <div style={{ marginTop: "8px" }}>
+          <div className="mt-[8px]">
             <CheckMessage>{checkMessageContent}</CheckMessage>
           </div>
         ) : errorMessageCondition ? (
-          <div style={{ marginTop: "4px" }}>
+          <div className="mt-[4px]">
             <ErrorMessage>{errorMessageContent}</ErrorMessage>
           </div>
         ) : (
-          <p style={{ height: "28px" }}>&nbsp;</p>
+          <p className="h-[28px]">&nbsp;</p>
         )
       ) : null}
     </div>

diff --git a/src/components/auth/textField/AuthTimerSideBtnTextField.tsx b/src/components/auth/textField/AuthTimerSideBtnTextField.tsx
@@ -1,5 +1,6 @@
 import { Button, InputAdornment } from "@mui/material";
 import { useEffect, useState } from "react";
+import { twJoin } from "tailwind-merge";
 
 import AuthTextField from "./AuthTextField";
 import { AuthSideBtnTextFieldProps } from "./types/textField";
@@ -25,7 +26,7 @@ type AuthTimerSideBtnTextFieldProps = AuthSideBtnTextFieldProps & {
  * @param {() => void} props.sideBtnOnClick - onClick
  * @param {boolean} props.sideBtnDisabled - disabled
  */
-const AuthTimerSideBtnTextField: React.FC<AuthTimerSideBtnTextFieldProps> = ({
+const AuthTimerSideBtnTextField = ({
   className = "",
   sideBtnText = "",
   sideBtnOnClick,
@@ -35,7 +36,7 @@ const AuthTimerSideBtnTextField: React.FC<AuthTimerSideBtnTextFieldProps> = ({
   timerReset,
   setTimerValue,
   ...props
-}) => {
+}: AuthTimerSideBtnTextFieldProps) => {
   const [timerId, setTimerId] = useState<NodeJS.Timeout | number>(0);
   const [timeLeft, setTimeLeft] = useState(300); // 300초 = 5분
   const [timerVisible, setTimerVisible] = useState(false);
@@ -84,17 +85,22 @@ const AuthTimerSideBtnTextField: React.FC<AuthTimerSideBtnTextFieldProps> = ({
 
   return (
     <AuthTextField
-      className={"__timer-text-field " + className}
+      className={twJoin("__timer-text-field", className)}
       slotProps={{
         input: {
           endAdornment: (
             <InputAdornment position="end">
               {timerStart ? (
-                <p className={"timer p-medium-medium c-blue" + (timerVisible ? "" : " c-white")}>
+                <p
+                  className={twJoin(
+                    "timer typo-pr-m-16 text-main-blue",
+                    timerVisible ? "" : " text-white"
+                  )}
+                >
                   {timerVisible ? formatTime(timeLeft) : "\u00A0"}
                 </p>
               ) : (
-                <p className="timer p-medium-medium c-white">&nbsp;</p>
+                <p className="timer typo-pr-m-16 text-white">&nbsp;</p>
               )}
               <Button variant="contained" onClick={sideBtnOnClick} disabled={sideBtnDisabled}>
                 {sideBtnText}

diff --git a/src/components/auth/textField/bottomMessages/CheckMessage.tsx b/src/components/auth/textField/bottomMessages/CheckMessage.tsx
@@ -1,10 +1,12 @@
-import valid from "./../../../../assets/image/input/valid.svg";
+import { PropsWithChildren } from "react";
 
-const CheckMessage = ({ children }: { children: React.ReactNode }) => {
+import valid from "@/assets/image/input/valid.svg";
+
+const CheckMessage = ({ children }: PropsWithChildren) => {
   return (
-    <div className="a-items-center" style={{ gap: "5px", paddingLeft: "3px", marginBottom: "4px" }}>
+    <div className="flex items-center gap-[5px] pl-[3px] mb-[4px]">
       <img src={valid} alt="" />
-      <p className="p-12-400 c-green">{children}</p>
+      <p className="typo-pr-r-12 text-sub-green1">{children}</p>
     </div>
   );
 };

diff --git a/src/components/auth/textField/bottomMessages/ErrorMessage.tsx b/src/components/auth/textField/bottomMessages/ErrorMessage.tsx
@@ -1,10 +1,12 @@
-import invalid from "../../../../assets/image/input/invalid.svg";
+import { PropsWithChildren } from "react";
 
-const ErrorMessage = ({ children }: { children: React.ReactNode }) => {
+import invalid from "@/assets/image/input/invalid.svg";
+
+const ErrorMessage = ({ children }: PropsWithChildren) => {
   return (
-    <div className="a-items-center">
+    <div className="flex items-center">
       <img src={invalid} alt="" />
-      <p className="p-12-400 c-red">{children}</p>
+      <p className="typo-pr-r-12 text-red">{children}</p>
     </div>
   );
 };
-Original file line number
+Diff line change
@@ Expand Up / @@ -4,6 +4,7 @@ on: @@
       push:
         branches:
           - main
+      workflow_dispatch:
     jobs:
       build-and-deploy:
@@ Expand Down @@