feat(client): 백엔드 api를 사용하여 프리셋 저장, 수정, 삭제

docker-compose.yml

@@ -28,7 +28,7 @@ services:
             - "5432:5432"
         environment:
             POSTGRES_USER: "postgres"
-            POSTGRES_PASSWORD: "504201"
+            POSTGRES_PASSWORD: "postgres"
         stdin_open: true
         tty: true
         networks:

packages/client/src/dashboard/application/services/useBoard.tsx

@@ -9,6 +9,8 @@ import PresetService from '../../domain/preset/preset.service';
 import sectionDatasStore from '../../infrastructure/store/sectionDatas.store';
 import stickerDatasStore from '../../infrastructure/store/stickerDatas.store';
 import presetStore from '../../infrastructure/store/preset.store';
+import PresetListService from '../../domain/presetList/presetList.service';
+import presetListRepository from '../../infrastructure/presetList.repository';
 
 const boardDataService = new BoardDataService(boardDataRepository);
 const presetService = new PresetService(presetRepository);
@@ -19,6 +21,7 @@ function useBoard() {
   boardDataStore.subscribeToBoardData((newBoardData: BoardDataType) => {
     setBoardData(newBoardData);
   });
+
   const handleSavePreset = () => {
     const preset = presetStore.getPreset();
     if (!preset) return;
@@ -36,6 +39,11 @@ function useBoard() {
       info: preset.info,
     });
   };
+
+  const handleDeletePreset = async (id: string) => {
+    await presetService.deletePreset(id);
+  };
+
   const handleSectionAdd = (sectionId: string | undefined) => {
     if (sectionId === undefined) return;
     const newLayout = [
@@ -74,6 +82,7 @@ function useBoard() {
     handleSectionLayoutChange,
     handleSectionRemove,
     handleSavePreset,
+    handleDeletePreset,
   };
 }
 

packages/client/src/dashboard/application/services/usePreset.tsx

@@ -15,6 +15,8 @@ import StickerDataType from '../../domain/stickerDatas/stickerData.type';
 import presetListRepository from '../../infrastructure/presetList.repository';
 import PresetListService from '../../domain/presetList/presetList.service';
 import useMode from '../../application/services/useMode';
+import { log } from 'console';
+import axios from 'axios';
 
 const presetService = new PresetService(presetRepository);
 const presetListService = new PresetListService(presetListRepository);
@@ -52,7 +54,7 @@ function usePreset() {
   }, []);
 
   useEffect(() => {
-    if (preset) {
+    if (preset && preset.data) {
       boardDataStore.setBoardData(preset.data.boardData);
       sectionDatasStore.setSectionDatas(preset.data.sectionDatas);
       stickerDatasStore.setStickerDatas(preset.data.stickerDatas);
@@ -95,6 +97,10 @@ function usePreset() {
     setControlMode('edit');
   };
 
+  // const deletePreset = async (id: string) => {
+  //   await presetService.deletePreset(id);
+  // };
+
   const changePresetLabel = async (id: string, label: string) => {
     const presetData = await presetService.getPreset(id);
     if (presetData && presetList) {
@@ -116,7 +122,14 @@ function usePreset() {
       });
     }
   };
-  return { preset, presetList, createPreset, changePreset, changePresetLabel };
+  return {
+    preset,
+    presetList,
+    createPreset,
+    changePreset,
+    // deletePreset,
+    changePresetLabel,
+  };
 }
 
 export default usePreset;

packages/client/src/dashboard/domain/preset/preset.repository.interface.ts

@@ -4,7 +4,7 @@ interface PresetRepositoryInterface {
   getPreset(id: string): Promise<PresetType | null>;
   setPreset(preset: PresetType): Promise<void>;
   addPreset(preset: PresetType): Promise<void>;
-  // deletePreset(id: string): Promise<void>;
+  deletePreset(id: string): Promise<void>;
 }
 
 export default PresetRepositoryInterface;

packages/client/src/dashboard/domain/preset/preset.service.ts

@@ -16,9 +16,9 @@ class PresetService {
     return this.presetRepository.addPreset(preset);
   }
 
-  // deletePreset(id: string): Promise<void> {
-  //   return this.presetRepository.deletePreset(id);
-  // }
+  public async deletePreset(id: string): Promise<void> {
+    return this.presetRepository.deletePreset(id);
+  }
 }
 
 export default PresetService;

packages/client/src/dashboard/infrastructure/preset.repository.ts

@@ -1,22 +1,66 @@
 import PresetRepositoryInterface from '../domain/preset/preset.repository.interface';
 import PresetType from '../domain/preset/preset.type';
 import presetStore from './store/preset.store';
+import axios from 'axios';
 
 class PresetRepository implements PresetRepositoryInterface {
   public async getPreset(id: string): Promise<PresetType | null> {
-    //여기가 http로 Preset Type 받아오는거
-    const preset = localStorage.getItem(`preset-${id}`);
-    return preset ? (JSON.parse(preset) as PresetType) : null;
+    const preset = await axios
+      .get(`http://dashboard42.com:3000/user-information/getOnePreSet/${id}`, {
+        withCredentials: true,
+      })
+      .then((res) => {
+        return res.data[0];
+      });
+    return preset;
   }
 
   public async setPreset(preset: PresetType): Promise<void> {
     presetStore.setPreset(preset);
   }
 
   public async addPreset(preset: PresetType): Promise<void> {
-    //graphQl로 프리셋 데이터 저장
     const { id } = preset;
-    localStorage.setItem(`preset-${id}`, JSON.stringify(preset));
+    let isExist = false;
+    await axios
+      .get('http://dashboard42.com:3000/user-information/getAllPreSet', {
+        withCredentials: true,
+      })
+      .then((res) => {
+        for (let i = 0; i < res.data.length; i++) {
+          if (res.data[i].id === id) isExist = true;
+        }
+      });
+    if (isExist) {
+      await axios.put(
+        `http://dashboard42.com:3000/user-information/updateOnePreSet/${id}`,
+        preset,
+        {
+          withCredentials: true,
+        },
+      );
+    } else {
+      await axios.post(
+        'http://dashboard42.com:3000/user-information/addPreSet',
+        preset,
+        {
+          withCredentials: true,
+        },
+      );
+    }
+  }
+
+  public async deletePreset(id: string): Promise<void> {
+    await axios
+      .delete(
+        `http://dashboard42.com:3000/user-information/deleteOnePreset/${id}`,
+        {
+          withCredentials: true,
+        },
+      )
+      .then((res) => {
+        console.log('delete result: ', res);
+      });
   }
 }
 

packages/client/src/dashboard/infrastructure/presetList.repository.ts

@@ -2,19 +2,22 @@ import PresetType, { PresetInfoType } from './../domain/preset/preset.type';
 import PresetListRepositoryInterface from '../domain/presetList/presetList.repository.interface';
 import PresetListType from '../domain/presetList/presetList.type';
 import presetlistStore from './store/presetList.store';
+import axios from 'axios';
 
 class PresetListRepository implements PresetListRepositoryInterface {
   public async getPresetList(): Promise<PresetListType> {
-    // 여기가 http로 Preset List 받아오는거
     const presetInfos = Array<PresetInfoType>();
 
-    for (let i = 0; i < localStorage.length; ++i) {
-      const key = localStorage.key(i);
-      if (key && key.includes('preset')) {
-        const preset = JSON.parse(localStorage.getItem(key)!) as PresetType;
-        presetInfos.push(preset.info);
-      }
-    }
+    await axios
+      .get('http://dashboard42.com:3000/user-information/getAllPreSet', {
+        withCredentials: true,
+      })
+      .then((res) => {
+        for (let i = 0; i < res.data.length; i++) {
+          presetInfos.push(res.data[i].info);
+        }
+      });
+    console.log('presetList: ', presetInfos);
     return { presetInfos };
   }
 

packages/client/src/dashboard/presentation/components/Board/Section.tsx

@@ -35,14 +35,17 @@ export default function Section(props: SectionProps) {
   function drawStickers() {
     return stickerLayouts.map((sticker: Layout, idx) => (
       <div key={sticker.i}>
-        <Sticker
-          id={sticker.i}
-          data={stickerDatas[idx].data}
-          handleStickerRemove={(stickerId) => {
-            removeSticker(stickerId);
-            handleStickerRemove(id, stickerId);
-          }}
-        />
+        {/* TODO(sonkang) : 나중에 더 좋은 방법을 찾아보기 */}
+        {stickerDatas[idx] && (
+          <Sticker
+            id={sticker.i}
+            data={stickerDatas[idx].data}
+            handleStickerRemove={(stickerId) => {
+              removeSticker(stickerId);
+              handleStickerRemove(id, stickerId);
+            }}
+          />
+        )}
       </div>
     ));
   }

packages/client/src/dashboard/presentation/components/SideBar/PresetListItem.tsx

@@ -1,10 +1,12 @@
 import { SvgIconComponent } from '@mui/icons-material';
 import { ListItemButton, ListItemIcon, ListItemText } from '@mui/material';
 import EditIcon from '@mui/icons-material/Edit';
+import DeleteIcon from '@mui/icons-material/Delete';
 import useMode from '../../../application/services/useMode';
 import { useState } from 'react';
 import TextField from '@mui/material/TextField';
-
+import useBoard from '../../../application/services/useBoard';
+import usePreset from '../../../application/services/usePreset';
 export interface PresetListItemProps {
   icon: SvgIconComponent; // mui/icons-material 에 있는 아이콘 타입
   label: string;
@@ -20,6 +22,7 @@ function PresetListItem(props: PresetListItemProps) {
   const [edit, setEdit] = useState(false);
   const [presetLabel, setPresetLabel] = useState(label);
   const { getControlMode } = useMode();
+  const { handleDeletePreset } = useBoard();
   const IconType = icon;
 
   function myOnClickHandler(e: any) {
@@ -28,6 +31,11 @@ function PresetListItem(props: PresetListItemProps) {
     setEdit(!edit);
   }
 
+  async function deletePreset(id: string) {
+    await handleDeletePreset(id);
+    console.log('deletePreset: ', id);
+  }
+
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setPresetLabel(event.target.value);
   };
@@ -38,7 +46,11 @@ function PresetListItem(props: PresetListItemProps) {
       selected={selected || false}
     >
       <ListItemIcon>
-        <IconType />
+        {selected && getControlMode() === 'edit' && !edit ? (
+          <DeleteIcon color="disabled" onClick={() => deletePreset(id)} />
+        ) : (
+          <IconType />
+        )}
       </ListItemIcon>
       {selected && getControlMode() === 'edit' && !edit ? (
         <>

packages/server/src/auth/auth.controller.ts

@@ -44,11 +44,11 @@ export class AuthController {
     const access_token = await this.authService.authentication(code);
     res.cookie('access_token', `${access_token}`, {
       httpOnly: true,
-      // domain: 'dashboard42.com',
+      domain: 'localhost',
     }); //res.cookie()는 하나만 적용됨. 여러개 호출하면 제일 마지막에 호출된것만 적용됨(??)
     // res.setHeader('WWW-authenticate', `Bearer: realm="DashBoard"`);
-    res.redirect('http://localhost:3000/auth/test'); //redirection해도 됨. 나중에 front Home으로 redirection되게 할 예정.
-    // res.redirect('http://www.dashboard42.com:3000/dashboard'); //for hybae
+    // res.redirect('http://localhost:3000/auth/test'); //redirection해도 됨. 나중에 front Home으로 redirection되게 할 예정.
+    res.redirect('http://www.dashboard42.com:3000/dashboard'); //for hybae
     // res.send('login success!!');
   }
 

packages/server/src/schema.gql

@@ -63,6 +63,7 @@ type Query {
   getUserBlackhole(column: String, duplicated: String!): [UserBlackhole!]!
   getUserComputationFund(column: String, duplicated: String!): [UserComputationFund!]!
   getUserCourseExtension(column: String, duplicated: String!): [UserCourseExtension!]!
+  getUserEducationFundState(column: String, duplicated: String!): [UserEducationFundState!]!
   getUserEmploymentStatus(column: String, duplicated: String!): [UserEmploymentStatus!]!
   getUserHrdNetUtilize(column: String, duplicated: String!): [UserHrdNetUtilize!]!
   getUserHrdNetUtilizeConsent(column: String, duplicated: String!): [UserHrdNetUtilizeConsent!]!

packages/server/src/user_information/user_information.controller.ts

@@ -128,7 +128,7 @@ export class UserInformationController {
     for (const index in bocal['preSetArray']) {
       ret[index] = {};
       const onePreSet = bocal['preSetArray'][index];
-      ret[index]['id'] = JSON.parse(onePreSet['id']);
+      ret[index]['id'] = onePreSet['id'];
       ret[index]['data'] = JSON.parse(onePreSet['preSetData']);
       ret[index]['info'] = JSON.parse(onePreSet['info']);
     }
@@ -153,7 +153,7 @@ export class UserInformationController {
     for (const index in bocal['preSetArray']) {
       ret[index] = {};
       const onePreSet = bocal['preSetArray'][index];
-      ret[index]['id'] = JSON.parse(onePreSet['id']);
+      ret[index]['id'] = onePreSet['id'];
       ret[index]['data'] = JSON.parse(onePreSet['preSetData']);
       ret[index]['info'] = JSON.parse(onePreSet['info']);
     }
@@ -171,30 +171,37 @@ export class UserInformationController {
     // 당연히 bocal에서도 삭제될것. (실제 DB에서 fk를 가진 튜플을 삭제한거니까)
     // 이 경우는 onDelete 옵션 안써도 되는거
     const preSet = await preSetRepository.delete({
-      id: Equal(uuid),
+      id: uuid,
     });
-    if (preSet) return 'entity not found!';
+    if (!preSet) return 'entity not found!';
     return 'delete success';
   }
 
   @Put('/updateOnePreSet/:uuid')
-  @ApiParam({
+  // @ApiParam({
+  //   required: true,
+  //   name: 'uuid',
+  // })
+  @ApiBody({
     required: true,
-    name: 'uuid',
   })
   @UseGuards(AuthGuard('jwt'))
-  async updateOnePreSet(@Param('uuid') uuid, @Body() body) {
+  async updateOnePreSet(@Body() body) {
+    const uuid = body['id'];
     const preSetRepository = await this.dataSource.getRepository(PreSet);
+    if (!(await preSetRepository.findOne({ where: { id: Equal(uuid) } }))) {
+      return 'entity not found';
+    }
     const preSet = await preSetRepository.update(
       {
-        id: Equal(uuid),
+        id: uuid,
       },
       {
         preSetData: JSON.stringify(body['data']),
         info: JSON.stringify(body['info']),
       },
     );
-    if (!preSet) return 'entity not found';
+    console.log(preSet);
     return 'update success';
   }
 }