[Feature] Admin Frontend 개발 (#120)

* feat(#98): admin ui 스티커/태크 CRUD 기능 개발

* fix(#98): admin sticker update 시 sticker 생성 오류 수정

* fix: github workflows 경로 수정

* fix: README 수정

* fix: README 수정

* fix: admin api port 수정

* feat(#98): Admin Dashboard용 통계 API

* feat(#98): index 페이지 Dashboard Component 추가

* fix(#98): Calendar Coponent 일정 제거

* fix: 일정 데이터 추가 (하드 코딩)

* fix: StickerList Compoenent 내 문구 수정

* feat(#98): antd message 적용

* feat(#98): 삭제 후 list 페이지로 router.push() 적용

* feat(#98): Dockerfile 추가 및 output: standalone 설정

* fix: Dockerfile FROM platform 추가

* fix(#98): default image 변경

* fix: github action workflow gradlew 경로 수정

---------

Co-authored-by: wkwon <[email protected]>

.github/workflows/admin-ci-cd.yml

@@ -23,12 +23,12 @@ jobs:
           distribution: 'temurin'
 
       - name: build with gradle
-        run: ./gradlew bootJar
+        run: ./backend/gradlew bootJar
 
       - name: push to dockerhub
         run: |
           docker login -u ${{ secrets.DOCKER_ID }} -p ${{ secrets.DOCKER_PASSWORD }}
-          docker build --no-cache -t ${{ secrets.DOCKER_ID }}/${{ secrets.DOCKER_ADMIN_REPO }} -f ./application/admin/Dockerfile  .
+          docker build --no-cache -t ${{ secrets.DOCKER_ID }}/${{ secrets.DOCKER_ADMIN_REPO }} -f ./backend/application/admin/Dockerfile  .
           docker push ${{ secrets.DOCKER_ID }}/${{ secrets.DOCKER_ADMIN_REPO }}
       - name: deploy
         uses: appleboy/ssh-action@master

.github/workflows/dev-api-ci-cd.yml

@@ -23,12 +23,12 @@ jobs:
           distribution: 'temurin'
 
       - name: build with gradle
-        run: ./gradlew bootJar
+        run: ./backend/gradlew bootJar
 
       - name: push to dockerhub
         run: |
           docker login -u ${{ secrets.DOCKER_ID }} -p ${{ secrets.DOCKER_PASSWORD }}
-          docker build --no-cache -t ${{ secrets.DOCKER_ID }}/${{ secrets.DOCKER_REPO_PATH }}:${{secrets.DOCKER_TAG_DEV}} -f ./application/api/Dockerfile  .
+          docker build --no-cache -t ${{ secrets.DOCKER_ID }}/${{ secrets.DOCKER_REPO_PATH }}:${{secrets.DOCKER_TAG_DEV}} -f ./backend/application/api/Dockerfile  .
           docker push ${{ secrets.DOCKER_ID }}/${{ secrets.DOCKER_REPO_PATH }}:${{secrets.DOCKER_TAG_DEV}}
       - name: deploy
         uses: appleboy/ssh-action@master

.github/workflows/live-api-ci-cd.yml

@@ -23,12 +23,12 @@ jobs:
           distribution: 'temurin'
 
       - name: build with gradle
-        run: ./gradlew bootJar
+        run: ./backend/gradlew bootJar
 
       - name: push to dockerhub
         run: |
           docker login -u ${{ secrets.DOCKER_ID }} -p ${{ secrets.DOCKER_PASSWORD }}
-          docker build --no-cache -t ${{ secrets.DOCKER_ID }}/${{ secrets.DOCKER_REPO_PATH }}:${{secrets.DOCKER_TAG_LIVE}} -f ./application/api/Dockerfile  .
+          docker build --no-cache -t ${{ secrets.DOCKER_ID }}/${{ secrets.DOCKER_REPO_PATH }}:${{secrets.DOCKER_TAG_LIVE}} -f ./backend/application/api/Dockerfile  .
           docker push ${{ secrets.DOCKER_ID }}/${{ secrets.DOCKER_REPO_PATH }}:${{secrets.DOCKER_TAG_LIVE}}
       - name: deploy
         uses: appleboy/ssh-action@master

.github/workflows/pull-request-gradle-build-test.yml

@@ -38,4 +38,4 @@ jobs:
       - name: Gradle Build
         if: steps.changes.outputs.application == 'true'
         run: |
-          ./gradlew build --no-build-cache
+          ./backend/gradlew build --no-build-cache

.gitignore

@@ -1,12 +1,10 @@
 .gradle
 build/
-!gradle/wrapper/gradle-wrapper.jar
-!**/src/main/**
-!**/src/test/**
+.DS_Store
 
 ### IDEA ###
-.idea
+.idea/
 *.iws
 *.iml
 *.ipr
-out/
+out/

admin-ui/.env

@@ -0,0 +1,5 @@
+NEXTAUTH_URL=
+NEXTAUTH_SECRET=
+NEXTAUTH_USERNAME=
+NEXTAUTH_PASSWORD=
+NEXT_PUBLIC_API_ENDPOINT=

admin-ui/.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

admin-ui/Dockerfile

@@ -0,0 +1,39 @@
+FROM --platform=linux/amd64 node:18-alpine AS base
+
+# Install dependencies only when needed
+FROM base AS deps
+RUN apk add --no-cache libc6-compat
+WORKDIR /usr/src/app
+
+# Install dependencies based on the preferred package manager
+COPY package.json ./
+RUN yarn --frozen-lockfile --production;
+RUN rm -rf ./.next/cache
+
+# Rebuild the source code only when needed
+FROM base AS builder
+WORKDIR /usr/src/app
+COPY --from=deps /usr/src/app/node_modules ./node_modules
+COPY . .
+RUN yarn build
+
+# Production image, copy all the files and run next
+FROM base AS runner
+WORKDIR /usr/src/app
+
+ENV NODE_ENV=production
+
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+
+COPY --from=builder /usr/src/app/public ./public
+COPY --from=builder --chown=nextjs:nodejs /usr/src/app/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /usr/src/app/.next/static ./.next/static
+
+USER nextjs
+
+EXPOSE 3030
+ENV PORT 3030
+ENV HOSTNAME "127.0.0.1"
+
+CMD ["node", "server.js"]

admin-ui/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 PurpleIO
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

admin-ui/README.md

@@ -0,0 +1,2 @@
+## Reference
+- [Purple Admin UI: Next.js와 Tailwind를 이용한 모-던 어드민 템플릿](https://github.com/purpleio/purple-admin-ui)

admin-ui/next.config.js

@@ -0,0 +1,8 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+  transpilePackages: ["antd"],
+  output: 'standalone'
+};
+
+module.exports = nextConfig;

admin-ui/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "bandiboodi-admin-ui",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "export": "next export",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@ant-design/cssinjs": "^1.16.1",
+    "@uiw/react-codemirror": "^4.21.9",
+    "antd": "^5.7.3",
+    "dayjs": "^1.11.9",
+    "framer-motion": "^10.15.0",
+    "ky": "^0.33.3",
+    "ky-universal": "^0.12.0",
+    "lucide-react": "^0.263.1",
+    "next": "13.4.12",
+    "next-auth": "^4.22.3",
+    "numeral": "^2.0.6",
+    "qs": "^6.11.2",
+    "react": "18.2.0",
+    "react-countup": "^6.4.2",
+    "react-dom": "18.2.0",
+    "react-quill": "^2.0.0",
+    "swr": "^2.2.0"
+  },
+  "devDependencies": {
+    "@types/node": "18.11.18",
+    "@types/numeral": "^2.0.2",
+    "@types/qs": "^6.9.7",
+    "@types/react": "18.2.17",
+    "@types/react-dom": "18.2.7",
+    "autoprefixer": "^10.4.14",
+    "eslint": "8.46.0",
+    "eslint-config-next": "13.4.12",
+    "eslint-config-prettier": "^8.9.0",
+    "postcss": "^8.4.27",
+    "prettier": "^3.0.0",
+    "tailwindcss": "^3.3.3",
+    "typescript": "5.1.6"
+  }
+}

admin-ui/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

admin-ui/public/browserconfig.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/bandiboodi.png" />
+            <TileColor>#da532c</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>

admin-ui/public/site.webmanifest

@@ -0,0 +1,14 @@
+{
+  "name": "Admin UI",
+  "short_name": "Admin UI",
+  "icons": [
+    {
+      "src": "/bandiboodi.png",
+      "sizes": "1080x1080",
+      "type": "image/png"
+    },
+  ],
+  "theme_color": "#ffffff",
+  "background_color": "#ffffff",
+  "display": "standalone"
+}

admin-ui/src/client/base.ts

@@ -0,0 +1,17 @@
+import ky from "ky-universal";
+
+export const fetcher = (input: URL | RequestInfo, init?: RequestInit | undefined) =>
+  ky(`${process.env.NEXT_PUBLIC_API_ENDPOINT}/${input}`, init).then((res) => res.json());
+
+export const fetchApi = ky.create({
+  prefixUrl: process.env.NEXT_PUBLIC_API_ENDPOINT,
+  headers: {
+    "Content-Type": "application/json",
+  },
+});
+
+export const uploadApi = ky.create({
+  prefixUrl: process.env.NEXT_PUBLIC_API_ENDPOINT,
+  // Content-Type: multipart/form-data를 헤더에 명시하면 오류
+  // 브라우저에서 자동으로 파일 타입을 지정해줌 (multipart/form-data; boundary-----)
+});

admin-ui/src/client/dashboard.ts

@@ -0,0 +1,29 @@
+import useSWR from "swr";
+
+export interface IDashboard {
+  userStatics: {
+    total: number;
+    todayIncrease: number;
+  };
+  goalStatics: {
+    total: number;
+    todayIncrease: number;
+  };
+  taskStatics: {
+    total: number;
+    todayIncrease: number;
+  };
+}
+
+export interface IDashboardResponse {
+  result: number;
+  body: IDashboard
+  error: {
+    code: string;
+    message: string;
+    data: object;
+  };
+}
+export const useDashboard = () => {
+  return useSWR<IDashboardResponse>(`dashboard`);
+};

admin-ui/src/client/sticker.ts

@@ -0,0 +1,63 @@
+import useSWR from "swr";
+import {fetchApi, uploadApi} from "@/client/base";
+
+export interface ISticker {
+    id: number;
+    name: string;
+    url: string;
+}
+
+export interface IStickerFormValue extends Omit<ISticker, "id" | "url"> {
+    image: {
+        file: File
+        fileList: File[]
+    }
+}
+
+export interface IStickersResponse {
+    result: number;
+    body: ISticker[]
+    error: {
+        code: string;
+        message: string;
+        data: object;
+    };
+}
+
+export interface IStickerResponse {
+    result: number;
+    body: ISticker
+    error: {
+        code: string;
+        message: string;
+        data: object;
+    };
+}
+
+export const useStickers = () => {
+    return useSWR<IStickersResponse>(`sticker`);
+};
+
+export const useSticker = (id: string | number) => {
+    return useSWR<IStickerResponse>(`sticker/${id}`);
+};
+
+export const createSticker = (value: IStickerFormValue) => {
+    const form = new FormData()
+    form.append("name", value.name)
+    form.append("image", value.image.file, value.image.file.name)
+
+    return uploadApi.post(`sticker`, { body: form });
+};
+
+export const updateSticker = (id: string, value: IStickerFormValue) => {
+    const form = new FormData()
+    form.append("name", value.name)
+    form.append("image", value.image.file, value.image.file.name)
+
+    return uploadApi.patch(`sticker/${id}`, { body: form });
+};
+
+export const deleteSticker = (id: string | number) => {
+    return fetchApi.delete(`sticker/${id}`);
+};