project init

.eslintrc.json

@@ -1,3 +1,43 @@
 {
-  "extends": "next/core-web-vitals"
+  "env": {
+    "browser": true,
+    "es2021": true,
+    "node": true
+  },
+  "extends": [
+    "next/core-web-vitals",
+    "plugin:prettier/recommended",
+    "plugin:react/recommended",
+    "plugin:react-hooks/recommended"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true,
+      "tsx": true
+    },
+    "ecmaVersion": 12,
+    "sourceType": "module"
+  },
+  "plugins": ["react", "@typescript-eslint", "prettier", "react-hooks"],
+  "rules": {
+    "no-use-before-define": "off",
+    "no-unused-vars": "warn",
+    "react-hooks/rules-of-hooks": "error",
+    "react-hooks/exhaustive-deps": "warn",
+    "valid-typeof": "off",
+    "react/no-unescaped-entities": "warn",
+    "react/react-in-jsx-scope": "off",
+    "prettier/prettier": [
+      "error",
+      {
+        "endOfLine": "auto"
+      }
+    ]
+  },
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  }
 }

.npmrc

@@ -0,0 +1,5 @@
+_auth=YWRtaW46MjUxMzI3NDEyMjg3
+@sdt:registry=http://192.168.1.232:8081/repository/npm-hosted/
+//192.168.1.232:8081/repository/npm-group/:_authToken=NpmToken.e286dac7-851d-3a20-8429-80e0b28fde87
+//192.168.1.232:8081/repository/npm-hosted/:username=admin
+//192.168.1.232:8081/repository/npm-hosted/:_password=MjUxMzI3NDEyMjg3

next.config.js

@@ -1,4 +1,8 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {}
+const nextConfig = {
+  compiler: {
+    styledComponents: true,
+  },
+};
 
-module.exports = nextConfig
+module.exports = nextConfig;

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "tuya-admin-front-2",
+  "name": "tuya-admin-front",
   "version": "0.1.0",
   "private": true,
   "scripts": {
@@ -9,17 +9,44 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@types/node": "20.5.3",
-    "@types/react": "18.2.21",
+    "@sdt/sdt-ui-kit": "^0.1.17",
+    "@tanstack/react-query": "^4.33.0",
+    "@tanstack/react-query-devtools": "^4.33.0",
+    "@types/lodash": "^4.14.197",
+    "@types/node": "20.5.1",
+    "@types/qs": "^6.9.7",
+    "@types/react": "18.2.20",
     "@types/react-dom": "18.2.7",
+    "@types/react-modal": "^3.16.0",
     "autoprefixer": "10.4.15",
+    "axios": "^1.4.0",
     "eslint": "8.47.0",
     "eslint-config-next": "13.4.19",
+    "lodash": "^4.17.21",
     "next": "13.4.19",
     "postcss": "8.4.28",
-    "react": "18.2.0",
+    "qs": "^6.11.2",
+    "react": "^18.2.0",
+    "react-cookie": "^6.1.0",
     "react-dom": "18.2.0",
+    "react-hook-form": "^7.45.4",
+    "react-modal": "^3.16.1",
+    "styled-components": "^6.0.7",
     "tailwindcss": "3.3.3",
-    "typescript": "5.1.6"
+    "typescript": "5.1.6",
+    "zustand": "^4.4.1"
+  },
+  "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "^6.4.1",
+    "@typescript-eslint/parser": "^6.4.1",
+    "eslint-config-next": "13.4.19",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-import": "^2.28.1",
+    "eslint-plugin-jsx-a11y": "^6.7.1",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-prettier": "^5.0.0",
+    "eslint-plugin-promise": "^6.1.1",
+    "eslint-plugin-react": "^7.33.2",
+    "prettier": "^3.0.2"
   }
 }

src/api/config.ts

@@ -0,0 +1,155 @@
+import {
+  ACCESS_TOKEN_NAME,
+  getCookie,
+  REFREASH_TOKEN_NAME,
+  removeCookie,
+} from '../utils/cookies';
+import { setToken } from '../utils/setToken';
+import axios, { AxiosRequestConfig, Method } from 'axios';
+import { silentSignInApi } from './oauth';
+
+export interface CallApiType {
+  url: string;
+  method: Method;
+  data?: any;
+  contentType?: HttpContentType;
+  config?: AxiosRequestConfig;
+  instanceType?: InstanceType;
+  noToken?: boolean;
+}
+
+type InstanceType = 'Default' | 'Relay' | 'Refresh';
+
+export type HttpContentType =
+  | 'application/json'
+  | 'application/x-www-form-urlencoded'
+  | 'multipart/form-data'
+  | 'form-data';
+
+const createInstance = (config?: AxiosRequestConfig) => {
+  const defaultTimeoutMillSec = 60 * 1000; // 60초
+  return axios.create({
+    baseURL: process.env.NEXT_PUBLIC_BASE_API_URL,
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    timeout: defaultTimeoutMillSec,
+    ...config,
+  });
+};
+
+export const defaultInstance = createInstance();
+
+export const fetchApi = ({
+  url,
+  method,
+  data,
+  contentType = 'application/json',
+  config,
+  instanceType = 'Default',
+  noToken,
+}: CallApiType) => {
+  /**
+   * Api request interceptor
+   */
+  defaultInstance.interceptors.request.use(
+    (req: any) => {
+      // console.log('######## req interceptors', req);
+      const SDT_AT = getCookie(ACCESS_TOKEN_NAME);
+
+      if (noToken) {
+        delete req.headers?.Authorization;
+      } else if (SDT_AT && req.headers) {
+        req.headers = {
+          ...req.headers,
+          Authorization: `Bearer ${SDT_AT}`,
+        };
+      }
+
+      return req;
+    },
+    (error) => {
+      return Promise.reject(error);
+    },
+  );
+
+  /**
+   * Api response interceptor
+   */
+  defaultInstance.interceptors.response.use(
+    (req) => {
+      return req;
+    },
+    (error) => {
+      console.log(error);
+      const {
+        response: { status, ...response },
+        config,
+      } = error;
+
+      if (status === 401 && config.url !== 'oauth/token') {
+        silentSignInApi().then((apiRes) => {
+          const { status } = apiRes;
+          const originalRequest = config;
+          if (status === 200) {
+            const { accessToken } = apiRes.data;
+            setToken(apiRes.data, true);
+
+            defaultInstance.defaults.headers.common[
+              'Authorization'
+            ] = `Bearer ${accessToken}`;
+            originalRequest.headers['Authorization'] = `Bearer ${accessToken}`;
+            return fetchApi({ ...originalRequest });
+          } else {
+            removeCookie(REFREASH_TOKEN_NAME);
+            removeCookie(ACCESS_TOKEN_NAME);
+            return (window.location.href = `${process.env.NEXT_PUBLIC_CLOUD_CONSOLE_PATH}/login?redirect=${window.location.href}`);
+          }
+        });
+      }
+
+      return Promise.reject(error);
+    },
+  );
+
+  return defaultInstance({
+    url: url,
+    method: method,
+    data: data || {},
+    params: method === 'GET' || method === 'get' ? data : {},
+    headers: {
+      'Content-Type': contentType,
+    },
+    ...config,
+  }).catch((error) => {
+    console.error(
+      `api error status: ${error.response?.code || ''}, message: ${
+        error.response?.message || ''
+      }`,
+    );
+    return (
+      error.response || {
+        data: {
+          code: error.code,
+          message: error.message,
+        },
+      }
+    );
+  });
+};
+
+interface DefaultApiResponse<T> {
+  status: number;
+  message?: string;
+  data: T;
+  timestamp: string;
+}
+export const afterAxios = (res: DefaultApiResponse<any>) => {
+  if (res.status < 400) {
+    return res.data;
+  } else {
+    const err = new Error();
+    (err as any).response = res;
+    throw err;
+  }
+};

src/api/oauth/index.ts

@@ -0,0 +1 @@
+export * from './oauthApi';

src/api/oauth/oauthApi.ts

@@ -0,0 +1,94 @@
+import { getCookie, REFREASH_TOKEN_NAME } from '../../utils/cookies';
+import qs from 'qs';
+import { fetchApi, afterAxios } from '../config';
+
+export interface SignInRequestType {
+  email: string;
+  password: string;
+  refreshToken?: string;
+  customerCode?: string;
+}
+
+export interface SignInResponseType {
+  accessToken: string;
+  refreshToken: string;
+  tokenType: string;
+}
+
+export const signInApi = async (req: SignInRequestType) => {
+  // const params = new URLSearchParams();
+  const params = {
+    ...req,
+    grantType: 'password',
+  };
+
+  return await fetchApi({
+    url: `/oauth/token`,
+    method: 'POST',
+    contentType: 'application/x-www-form-urlencoded',
+    data: qs.stringify(params),
+    noToken: true,
+  });
+};
+
+export interface RefreshTokenRequestType {
+  refreshToken: string;
+  grantType: 'refresh_token';
+}
+
+export const silentSignInApi = () => {
+  const refreshToken = getCookie(REFREASH_TOKEN_NAME);
+
+  if (refreshToken) {
+    const params = {
+      grantType: 'refresh_token',
+      refreshToken,
+    };
+
+    return fetchApi({
+      url: `/oauth/token`,
+      method: 'POST',
+      contentType: 'application/x-www-form-urlencoded',
+      data: params,
+    });
+  } else {
+    throw Error('no refresh Token');
+  }
+};
+
+/**
+ * 회원가입
+ */
+export interface SignUpApiRequestType {
+  email: string;
+  password: string;
+  certNumber: string;
+  organizationName: string;
+  name: string;
+}
+
+export const signUpApi = (req: SignUpApiRequestType) => {
+  return fetchApi({
+    url: `/sign-up`,
+    method: 'POST',
+    data: { ...req },
+    noToken: true,
+  }).then(afterAxios);
+};
+
+/**
+ * 비밀번호 변경
+ */
+export interface PostPasswordApiRequestType {
+  password: string;
+  newPassword: string;
+}
+
+export const postPasswordApi = (req: PostPasswordApiRequestType) => {
+  return fetchApi({
+    method: 'POST',
+    url: 'oauth/change-password',
+    contentType: 'application/x-www-form-urlencoded',
+    data: qs.stringify(req),
+  }).then(afterAxios);
+};

src/app/globals.css

@@ -2,20 +2,6 @@
 @tailwind components;
 @tailwind utilities;
 
-:root {
-  --foreground-rgb: 0, 0, 0;
-  --background-start-rgb: 214, 219, 220;
-  --background-end-rgb: 255, 255, 255;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --foreground-rgb: 255, 255, 255;
-    --background-start-rgb: 0, 0, 0;
-    --background-end-rgb: 0, 0, 0;
-  }
-}
-
 body {
   color: rgb(var(--foreground-rgb));
   background: linear-gradient(

src/app/layout.tsx

@@ -1,22 +1,19 @@
-import './globals.css'
-import type { Metadata } from 'next'
-import { Inter } from 'next/font/google'
-
-const inter = Inter({ subsets: ['latin'] })
+import "./globals.css";
+import type { Metadata } from "next";
 
 export const metadata: Metadata = {
-  title: 'Create Next App',
-  description: 'Generated by create next app',
-}
+  title: "Create Next App",
+  description: "Generated by create next app",
+};
 
 export default function RootLayout({
   children,
 }: {
-  children: React.ReactNode
+  children: React.ReactNode;
 }) {
   return (
-    <html lang="en">
-      <body className={inter.className}>{children}</body>
+    <html>
+      <body>{children}</body>
     </html>
-  )
+  );
 }

src/app/login/Login/Login.tsx

@@ -0,0 +1,76 @@
+"use client";
+import { Button, TextInput } from "@sdt/sdt-ui-kit";
+import Link from "next/link";
+import useLogin from "../hooks/useLogin";
+import { emailRegex, passwordRegex } from "@/utils/reg";
+
+interface LoginPropsType {}
+
+function Login({}: LoginPropsType) {
+  const {
+    hookForm: { handleSubmit, register, formState },
+  } = useLogin();
+  return (
+    <div className="flex justify-center items-center w-full h-screen bg-cover bg-center">
+      <div className="w-[37.5rem] shadow-md border rounded-[16px] px-10 sm:px-14 lg:px-5 py-7 sm:py-9 flex flex-col justify-center">
+        <h1 className="font-title-32 text-center">쿠폰 관리 시스템</h1>
+        <form onSubmit={handleSubmit((data) => console.log(data))}>
+          <div className="mt-5 flex flex-col">
+            <TextInput
+              {...register("email", {
+                required: "이메일을 입력하세요.",
+                pattern: {
+                  value: emailRegex,
+                  message: "올바른 이메일을 입력하세요.",
+                },
+              })}
+              error={!!formState.errors.email}
+              message={(formState.errors.email?.message as string) ?? ""}
+              maxLength={40}
+              type="text"
+              className={`rounded-t-[6px] text-[20px] w-full`}
+              placeholder="이메일 주소"
+            />
+          </div>
+          ㄹㅁㄴ어래ㅑㅓㅐ
+          <div className="flex flex-col">
+            <TextInput
+              {...register("password", {
+                required: "비밀번호를 다시 입력하세요.",
+                pattern: {
+                  value: passwordRegex,
+                  message:
+                    "8~16자 영문 대 소문자, 숫자, 특수문자를 사용하세요.",
+                },
+              })}
+              error={!!formState.errors.password?.message}
+              message={(formState.errors.password?.message as string) ?? ""}
+              maxLength={16}
+              type="password"
+              className={`rounded-b-[6px] text-[20px] w-full border-t-none`}
+              placeholder="비밀번호"
+            />
+          </div>
+          <div className="flex justify-center items-center">
+            <Button
+              type="submit"
+              className={`mt-8 text-[20px] font-semibold w-full bg-main`}
+              backgroundColor="bg-teal-500"
+            >
+              로그인
+            </Button>
+          </div>
+        </form>
+
+        <div className="w-full mt-2 flex justify-center">
+          <span className="mr-3 text-[#9e9e9e]">비밀번호를 잊으셨나요?</span>
+          <Link href={"/reset-password"} className="text-teal-500">
+            비밀번호 재설정
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Login;

src/app/login/Login/index.ts

@@ -0,0 +1 @@
+export { default } from './Login';

src/app/login/hooks/useLogin.tsx

@@ -0,0 +1,8 @@
+import { useForm } from 'react-hook-form';
+
+function useLogin() {
+  const hookForm = useForm();
+  return { hookForm };
+}
+
+export default useLogin;

src/app/login/layout.tsx

@@ -0,0 +1,10 @@
+"use client";
+import StyledComponentsRegistry from "@/components/__common/StyledComponentProvider/StyledComponentProvider";
+
+export default function LoginLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return <StyledComponentsRegistry>{children}</StyledComponentsRegistry>;
+}

src/app/login/page.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import Login from './Login/Login';
+
+function LoginPage() {
+  return (
+    <Login />
+  );
+}
+
+export default LoginPage;

src/components/__common/Alert/Alert.tsx

@@ -0,0 +1,69 @@
+import Button from '@sdt/sdt-ui-kit/components/Button';
+import ReactModal from 'react-modal';
+
+export interface AlertPropsType {
+  open: boolean;
+  title?: string;
+  body?: string;
+  onClose?: Function;
+}
+const DEFAULT_MODAL_STYLE: ReactModal.Styles = {
+  overlay: {
+    outline: 'none',
+    position: 'fixed',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: 'rgba(0 ,0, 0, 0.7)',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    zIndex: 50,
+  },
+  content: {
+    borderRadius: '50%',
+    width: '100%',
+    outline: 'none',
+  },
+};
+
+function Alert({ open, onClose, body, title }: AlertPropsType) {
+  const titleText = title?.split('\n').map((line, idx) => {
+    return <p key={idx}>{line}</p>;
+  });
+  const contentText = body?.split('\n').map((line, idx) => {
+    return <p key={idx}>{line}</p>;
+  });
+
+  return (
+    <ReactModal
+      isOpen={open}
+      style={DEFAULT_MODAL_STYLE}
+      ariaHideApp={false}
+      className={'z-40'}
+    >
+      <div className="w-[520px] mx-auto box-border rounded-lg  bg-white">
+        <div className="px-8 py-6 box-border">
+          <h1 className="text-[22px] text-[#161616] font-medium mb-3">
+            {titleText}
+          </h1>
+          {body && <div className="text-525252 text-base">{contentText}</div>}
+        </div>
+        <div className="flex justify-end items-center w-full gap-3 px-6 pb-6">
+          <Button
+            className="w-[94px] h-[42px]"
+            onClick={(e) => {
+              e.preventDefault();
+              onClose && onClose();
+            }}
+          >
+            확인
+          </Button>
+        </div>
+      </div>
+    </ReactModal>
+  );
+}
+
+export default Alert;

src/components/__common/Alert/hooks/useAlert.tsx

@@ -0,0 +1,37 @@
+import { useCallback, useEffect } from 'react';
+import { useRouter } from 'next/router';
+import { useAlertStore } from '@/stores';
+
+export function useAlert() {
+  const {
+    alertOpen,
+    alertContent,
+    setAlertOpen,
+    setAlertClose,
+    alertCallback,
+  } = useAlertStore();
+  const router = useRouter();
+  /**
+   * Alert Close Handler
+   */
+  const onCloseAlert = useCallback(() => {
+    if (alertOpen) {
+      setAlertClose();
+    }
+    if (alertCallback) alertCallback();
+  }, [alertCallback, alertOpen, setAlertClose]);
+
+  /**
+   * 라우터 변경 시 Alert Close
+   */
+  useEffect(() => {
+    if (alertOpen) {
+      setAlertClose();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [router]);
+
+  return { alertOpen, alertContent, setAlertOpen, setAlertClose, onCloseAlert };
+}
+
+export default useAlert;

src/components/__common/Alert/index.tsx

@@ -0,0 +1 @@
+export { default } from './Alert';

src/components/__common/Layout/Layout.tsx

@@ -0,0 +1,28 @@
+import Head from 'next/head';
+import useAlert from '../Alert/hooks/useAlert';
+import Alert from '../Alert';
+
+export default function Layout({ children }: { children: React.ReactElement }) {
+  const { alertOpen, alertContent, onCloseAlert } = useAlert();
+
+  return (
+    <div className="w-full overflow-hidden">
+      <Head>
+        <title>BlokWorks</title>
+        <meta name="description" content="BlokWorks" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+      <div className="flex pt-14">
+        <main className={`w-full p-12`}>{children}</main>
+      </div>
+
+      <Alert
+        open={alertOpen}
+        onClose={onCloseAlert}
+        title={alertContent.title}
+        body={alertContent.body}
+      />
+    </div>
+  );
+}

src/components/__common/Layout/constants/index.ts

@@ -0,0 +1,10 @@
+export const BLOKWORKS_LNB_MENU = [
+  {
+    title: '프로젝트 생성',
+    path: '/project/add',
+  },
+  {
+    title: '프로젝트 목록',
+    path: '/project',
+  },
+];

src/components/__common/Layout/index.tsx

@@ -0,0 +1 @@
+export { default } from './Layout';

src/components/__common/StyledComponentProvider/StyledComponentProvider.tsx

@@ -0,0 +1,28 @@
+"use client";
+import React, { useState } from "react";
+import { useServerInsertedHTML } from "next/navigation";
+import { ServerStyleSheet, StyleSheetManager } from "styled-components";
+
+export default function StyledComponentsRegistry({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  // Only create stylesheet once with lazy initial state
+  // x-ref: https://reactjs.org/docs/hooks-reference.html#lazy-initial-state
+  const [styledComponentsStyleSheet] = useState(() => new ServerStyleSheet());
+
+  useServerInsertedHTML(() => {
+    const styles = styledComponentsStyleSheet.getStyleElement();
+    styledComponentsStyleSheet.instance.clearTag();
+    return styles;
+  });
+
+  if (typeof window !== "undefined") return <>{children}</>;
+
+  return (
+    <StyleSheetManager sheet={styledComponentsStyleSheet.instance}>
+      {children}
+    </StyleSheetManager>
+  );
+}

src/components/__common/StyledComponentProvider/index.tsx

@@ -0,0 +1 @@
+export { default } from './StyledComponentProvider';

src/stores/index.ts

@@ -0,0 +1,2 @@
+export * from './useAuthStore';
+export * from './useAlertStore';

src/stores/useAlertStore.ts

@@ -0,0 +1,61 @@
+import { create } from 'zustand';
+import { devtools } from 'zustand/middleware';
+
+export interface AlertContentType {
+  title: string;
+  body: string;
+}
+
+export interface AlertOpenPayloadType extends Partial<AlertContentType> {
+  alertCallback?: Function;
+}
+/**
+ * Auth State Type
+ */
+export interface AlertStateType {
+  alertOpen: boolean;
+  alertContent: AlertContentType;
+  alertCallback: Function | null;
+}
+
+/**
+ * Alert Action Type
+ */
+
+export interface AlertActionType {
+  setAlertOpen: (by: AlertOpenPayloadType) => void;
+  setAlertClose: () => void;
+  alertCallback: Function | null;
+}
+
+export type AlertStoreType = AlertStateType & AlertActionType;
+
+export const useAlertStore = create<AlertStoreType>()(
+  devtools(
+    (set): AlertStoreType => ({
+      alertOpen: false,
+      alertContent: {
+        title: '',
+        body: '',
+      },
+      alertCallback: null,
+
+      setAlertOpen: (by: AlertOpenPayloadType) =>
+        set(() => ({
+          alertOpen: true,
+          alertContent: { title: by.title ?? '', body: by.body ?? '' },
+          alertCallback: by.alertCallback ? by.alertCallback : null,
+        })),
+      setAlertClose: () =>
+        set(() => ({
+          alertOpen: false,
+          alertContent: {
+            title: '',
+            body: '',
+          },
+          alertCallback: null,
+        })),
+    }),
+    { name: 'alert' },
+  ),
+);

src/stores/useAuthStore.ts

@@ -0,0 +1,53 @@
+import { create } from 'zustand';
+import { devtools } from 'zustand/middleware';
+
+export interface ProfileType {
+  id: string;
+  sub: string;
+  iat: number;
+  exp: number;
+}
+
+/**
+ * Auth State Type
+ */
+export interface AuthStateType {
+  loggedIn: boolean;
+  email: string | null;
+  profile: ProfileType | null;
+}
+
+/**
+ * Auth Action Type
+ */
+
+export interface AuthActionType {
+  setSignIn: (by: ProfileType) => void;
+  setEmail: (by: string) => void;
+  setSignOut: () => void;
+}
+
+export type AuthStoreType = AuthStateType & AuthActionType;
+
+export const useAuthStore = create<AuthStoreType>()(
+  devtools(
+    (set): AuthStoreType => ({
+      loggedIn: false,
+      email: null,
+      profile: null,
+
+      setSignIn: (by: ProfileType) =>
+        set(() => ({
+          profile: { ...by },
+          loggedIn: true,
+        })),
+      setEmail: (by: string) => set(() => ({ email: by })),
+      setSignOut: () =>
+        set(() => ({
+          loggedIn: false,
+          email: null,
+        })),
+    }),
+    { name: 'auth' },
+  ),
+);

src/styles/colors.ts

@@ -0,0 +1,113 @@
+/**
+ * Tailwind Status Color
+ */
+export const TAILWIND_STATUS_COLORS: any = {
+  primary: {
+    DEFAULT: '#007BFF',
+    hover: '#0069D9',
+    disable: '#58AAFF',
+  },
+  secondary: {
+    DEFAULT: '#6C757D',
+    hover: '#5A6268',
+    disable: '#B0B6BA',
+  },
+  success: {
+    DEFAULT: '#28A745',
+    hover: '#218838',
+    disable: '#74C686',
+  },
+  danger: {
+    DEFAULT: '#DC3545',
+    hover: '#C82333',
+    disable: '#E97B86',
+  },
+  warning: {
+    DEFAULT: '#FFC107',
+    hover: '#E0A800',
+    disable: '#FFD75E',
+  },
+  info: {
+    DEFAULT: '#17A2B8',
+    hover: '#138496',
+    disable: '#67C3D0',
+  },
+  light: {
+    DEFAULT: '#F8F9FA',
+    hover: '#E2E6EA',
+    disable: '#FAFCFC',
+  },
+  dark: {
+    DEFAULT: '#343A40',
+    hover: '#23272B',
+    disable: '#7A7E83',
+  },
+};
+
+/**
+ * Tailwind Main Color
+ */
+export const TAILWIND_MAIN_COLOR: any = {
+  main: {
+    DEFAULT: '#14B8A6',
+    50: '#FAFDF0',
+    100: `#CCFBF1`,
+    200: '#99F6E4',
+    300: '#5EEAD4',
+    400: '#2DD4BF',
+    500: '#14B8A6',
+    600: '#0D9488',
+    700: '#0F766E',
+    800: '#115E59',
+    900: '#134E4A',
+  },
+};
+
+/**
+ * Tailwind Etc Color
+ */
+export const TAILWIND_ETC_COLOR: any = {
+  'main-text': '#000000',
+  'sub-text': '#707070',
+  'divider-01': '#DEDEDE',
+  'bg-01': '#EFEFEF',
+  'bg-02': '#F8F8F8',
+};
+
+/**
+ * Tailwind hover color
+ */
+export const TAILWIND_HOVER_COLOR: any = {
+  '.opacity-hover': {
+    opacity: '0.85',
+  },
+  '.opacity-focus': {
+    opacity: '0.75',
+  },
+};
+
+/**
+ * Brand Color
+ */
+export const TAILWIND_BRAND_COLOR: any = {
+  '251327': '#251327',
+  FFF4E0: '#FFF4E0',
+  F26419: '#F26419',
+  FFD222: '#FFD222',
+  '4ECE89': '#4ECE89',
+  '08757B': '#08757B',
+  '6DA8D2': '#6DA8D2',
+  '6667AB': '#6667AB',
+  '3D77E2': '#3D77E2',
+};
+
+/**
+ * All Color Set
+ */
+export const SDT_TAILWIND_COLORS: any = {
+  ...TAILWIND_STATUS_COLORS,
+  ...TAILWIND_MAIN_COLOR,
+  ...TAILWIND_ETC_COLOR,
+  ...TAILWIND_HOVER_COLOR,
+  ...TAILWIND_BRAND_COLOR,
+};

src/styles/globals.css

@@ -0,0 +1,3 @@
+@import 'tailwindcss/base';
+@import 'tailwindcss/components';
+@import 'tailwindcss/utilities';

src/styles/style.ts

@@ -0,0 +1,35 @@
+import Modal from 'react-modal';
+/**
+ * 기본 Input style
+ */
+export const defaultInputStyle =
+  'border border-gray-200 bg-zinc-10 rounded-lg h-14 p-2 mt-2 focus:outline-none focus:border-blue-400';
+
+/**
+ * React modal default style
+ */
+export const DEFAULT_MODAL_STYLE: Modal.Styles = {
+  overlay: {
+    outline: 'none',
+    position: 'fixed',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: 'rgba(0 ,0, 0, 0.7)',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    zIndex: 50,
+  },
+  content: {
+    borderRadius: '50%',
+    width: '100%',
+    outline: 'none',
+  },
+};
+
+/**
+ * Table Item border, text-center
+ */
+export const TableItemClassName = 'table-auto border-collapse py-3';

src/styles/typography.ts

@@ -0,0 +1,134 @@
+import { css } from 'styled-components';
+
+export type FontKeyType =
+  | 'font-title-40'
+  | 'font-title-32'
+  | 'font-title-28'
+  | 'font-title-24'
+  | 'font-title-20'
+  | 'font-title-16'
+  | 'font-subtitle-14'
+  | 'font-body-22'
+  | 'font-body-20'
+  | 'font-body-18'
+  | 'font-body-16'
+  | 'font-body-14'
+  | 'font-body-12';
+
+/**
+ * Tailwind typograpy
+ */
+
+export const TAILWIND_TYPOGRAPY = {
+  '.font-title-40': {
+    fontSize: '2.5rem',
+    fontWeight: '500',
+  },
+  '.font-title-32': {
+    fontSize: '2rem',
+    fontWeight: '500',
+  },
+  '.font-title-28': {
+    fontSize: '1.75rem',
+    fontWeight: '500',
+  },
+  '.font-title-24': {
+    fontSize: '1.5rem',
+    fontWeight: '500',
+  },
+  '.font-title-20': {
+    fontSize: '1.25rem',
+    fontWeight: '500',
+  },
+  '.font-title-16': {
+    fontSize: '1rem',
+    fontWeight: '500',
+  },
+  '.font-subtitle-14': {
+    fontSize: '0.875rem',
+    fontWeight: '500',
+  },
+  '.font-body-22': {
+    fontSize: '1.375rem',
+    fontWeight: '400',
+  },
+  '.font-body-20': {
+    fontSize: '1.25rem',
+    fontWeight: '400',
+  },
+  '.font-body-18': {
+    fontSize: '1.125rem',
+    fontWeight: '400',
+  },
+  '.font-body-16': {
+    fontSize: '1rem',
+    fontWeight: '400',
+  },
+  '.font-body-14': {
+    fontSize: '0.875rem',
+    fontWeight: '400',
+  },
+  '.font-body-12': {
+    fontSize: '0.75rem',
+    fontWeight: '400',
+  },
+};
+
+/**
+ * Styled-Component typograpy
+ */
+
+export const getTypograpy = {
+  'font-title-40': css`
+    font-size: 2.5rem;
+    font-weight: 500;
+  `,
+  'font-title-32': css`
+    font-size: 2rem;
+    font-weight: 500;
+  `,
+  'font-title-28': css`
+    font-size: 1.75rem;
+    font-weight: 500;
+  `,
+  'font-title-24': css`
+    font-size: 1.5rem;
+    font-weight: 500;
+  `,
+  'font-title-20': css`
+    font-size: 1.25rem;
+    font-weight: 500;
+  `,
+  'font-title-16': css`
+    font-size: 1rem;
+    font-weight: 500;
+  `,
+  'font-subtitle-14': css`
+    font-size: 0.875rem;
+    font-weight: 500;
+  `,
+  'font-body-22': css`
+    font-size: 1.375rem;
+    font-weight: 400;
+  `,
+  'font-body-20': css`
+    font-size: 1.25rem;
+    font-weight: 400;
+  `,
+  'font-body-18': css`
+    font-size: 1.125rem;
+    font-weight: 400;
+  `,
+  'font-body-16': css`
+    font-size: 1rem;
+    font-weight: 400;
+  `,
+  'font-body-14': css`
+    font-size: 0.875rem;
+    font-weight: 400;
+  `,
+  'font-body-12': css`
+    font-size: 0.75rem;
+    font-weight: 400;
+  `,
+};

src/utils/cookies.ts

@@ -0,0 +1,25 @@
+import { Cookies } from 'react-cookie';
+import { CookieSetOptions } from 'universal-cookie';
+
+const cookies = new Cookies();
+
+export const REFREASH_TOKEN_NAME = 'SDT_RT';
+export const ACCESS_TOKEN_NAME = 'SDT_AT';
+
+export const setCookie = (
+  name: string,
+  value: string,
+  option: CookieSetOptions | undefined,
+) => {
+  return cookies.set(name, value, { ...option });
+};
+
+export const getCookie = (name: string) => {
+  return cookies.get(name);
+};
+
+export const removeCookie = (name: string) => {
+  return cookies.remove(name, {
+    path: '/',
+  });
+};

src/utils/index.ts

@@ -0,0 +1,3 @@
+export * from './cookies';
+export * from './setToken';
+export * from './reg';

src/utils/mesaure.ts

@@ -0,0 +1,23 @@
+/**
+ * 파일 크기에 따른 단위 변환
+ */
+export const handleSizeConvert = (size: number) => {
+  if (!size) {
+    return '';
+  }
+
+  let convertedSize = size;
+  let unit = 'KB';
+
+  if (convertedSize >= 1024 * 1024 * 1024) {
+    convertedSize = convertedSize / (1024 * 1024 * 1024);
+    unit = 'GB';
+  } else if (convertedSize >= 1024 * 1024) {
+    convertedSize = convertedSize / (1024 * 1024);
+    unit = 'MB';
+  } else if (convertedSize >= 1024) {
+    convertedSize = convertedSize / 1024;
+  }
+
+  return `${convertedSize.toFixed(2)} ${unit}`;
+};

src/utils/reg.ts

@@ -0,0 +1,49 @@
+/**
+ * 특수문자 제거
+ */
+
+export function regExp(str: string) {
+  var reg = /[\{\}\[\]\/?.,;:|\)*~`!^\-_+<>@\#$%&\\\=\(\'\"]/gi;
+  //특수문자 검증
+  if (reg.test(str)) {
+    //특수문자 제거후 리턴
+    return str.replace(reg, '');
+  } else {
+    //특수문자가 없으므로 본래 문자 리턴
+    return str;
+  }
+}
+
+/**
+ * 이메일 정규식
+ */
+export const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
+
+/**
+ * 비밀번호
+ */
+export const passwordRegex =
+  /^(?=.*\d)(?=.*[!@#$%^&*])(?=.*[a-z])(?=.*[A-Z]).{8,16}$/;
+
+/**
+ * 영문, 한글 이름
+ */
+export const englishKoreanRegex = /^[a-zA-Z\uAC00-\uD7A3 ]+$/;
+
+/**
+ * 조직 이름
+ */
+export const organizationNameRegex = /^[a-zA-Z\uAC00-\uD7A3-_.\s]+$/;
+
+/**
+ * 장비 이름 정규식
+ * 영문, 한글, 숫자, 특수문자 입력 가능
+ */
+export const engKorNumSymbolRegex =
+  /^[a-zA-Z가-힣ㄱ-ㅎ0-9!@#$%^&*()\-_=+[\]{}|;:'",.<>?/~`]+$/;
+
+/**
+ * 영문, 한글, 숫자, 특수문자, 스페이스 가능
+ */
+export const engKorNumSymbolSpaceRegex =
+  /^[a-zA-Z가-힣ㄱ-ㅎ0-9!@#$%^&*()\-_=+[\]{}|;:'",.<>?/~`\s]+$/;

src/utils/setToken.ts

@@ -0,0 +1,33 @@
+import { SignInResponseType } from '../api/oauth';
+import { ACCESS_TOKEN_NAME, REFREASH_TOKEN_NAME, setCookie } from './cookies';
+
+export function setToken(
+  loginResponse: SignInResponseType,
+  isRefresh?: boolean,
+) {
+  const { accessToken, refreshToken } = loginResponse;
+
+  const expires = new Date();
+  expires.setDate(Date.now() + 1000 * 60 * 60 * 24);
+
+  setCookie(ACCESS_TOKEN_NAME, accessToken, {
+    path: '/',
+    expires,
+  });
+
+  if (!isRefresh) {
+    setCookie(REFREASH_TOKEN_NAME, refreshToken, {
+      path: '/',
+      expires,
+    });
+  }
+}
+
+/**
+ * Token decode
+ */
+export const decodeToken = (token: string) => {
+  const base64Payload = token.split('.')[1];
+  const payload = Buffer.from(base64Payload, 'base64');
+  return JSON.parse(payload.toString());
+};

tailwind.config.ts

@@ -1,4 +1,7 @@
-import type { Config } from 'tailwindcss'
+import { SDT_TAILWIND_COLORS, TAILWIND_HOVER_COLOR } from './src/styles/colors';
+import { TAILWIND_TYPOGRAPY } from './src/styles/typography';
+import type { Config } from 'tailwindcss';
+const plugin = require('tailwindcss/plugin');
 
 const config: Config = {
   content: [
@@ -13,8 +16,15 @@ const config: Config = {
         'gradient-conic':
           'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
       },
+      colors: {
+        ...SDT_TAILWIND_COLORS,
+      },
     },
   },
-  plugins: [],
-}
-export default config
+  plugins: [
+    plugin(function ({ addComponents }: { addComponents: any }) {
+      addComponents({ ...TAILWIND_TYPOGRAPY, ...TAILWIND_HOVER_COLOR });
+    }),
+  ],
+};
+export default config;

tsconfig.json

@@ -1,7 +1,11 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -19,9 +23,19 @@
       }
     ],
     "paths": {
-      "@/*": ["./src/*"]
-    }
+      "@/*": [
+        "./src/*"
+      ]
+    },
+    "forceConsistentCasingInFileNames": true
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-  "exclude": ["node_modules"]
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
 }