가이드라인 페이지 기능 추가 및 기타 코드 수정 (#111)

가이드라인 페이지 기능 추가 및 기타 코드 수정

src/pages/guard/guard-main/GuardMainPage.tsx

@@ -7,7 +7,6 @@ import styled from '@emotion/styled';
 
 export const GuardMainPage = () => {
   const [currentSenior, setCurrentSenior] = useState<number | null>(null);
-  console.log(currentSenior);
   return (
     <GuardMainPageLayout>
       <Header

src/pages/guard/guide-line/GuideLinePage.tsx

@@ -35,10 +35,11 @@ export const GuideLinePage = () => {
         alignItems='center'
         flexGrow={1}
         overflowY='auto'
+        height='60vh'
       >
         {guidelineData?.map((guideline) => (
           <GuideLineInfo
-            key={guideline.Id}
+            key={guideline.id}
             refetch={refetch}
             guideline={guideline}
             seniorId={Number(seniorId)}

src/pages/guard/guide-line/api/delete-guideline.api.ts

@@ -0,0 +1,12 @@
+import { fetchInstance } from '@/shared/api/instance';
+
+export const deleteGuidelinePath = () => '/api/guardguidelines/delete';
+
+export const deleteGuidelineQueryKey = () => [deleteGuidelinePath()];
+
+export const deleteGuideline = async (guidelineId: number) => {
+  const response = await fetchInstance.delete(deleteGuidelinePath(), {
+    params: { guidelineId },
+  });
+  return response.data;
+};

src/pages/guard/guide-line/api/hooks/index.ts

@@ -2,3 +2,4 @@ export { useGetViewSpecificGuideline } from './useGetViewSpecificGuideline';
 export { useGetSeniorAllGuidelines } from './useGetSeniorAllGuideines';
 export { useModifyGuideline } from './useModifyGuideline';
 export { useAddGuideline } from './useAddGuideline';
+export { useDeleteGuideline } from './useDeleteGuideline';

src/pages/guard/guide-line/api/hooks/useDeleteGuideline.ts

@@ -0,0 +1,18 @@
+import { deleteGuideline } from '../delete-guideline.api';
+import { useMutation, UseMutationResult } from '@tanstack/react-query';
+
+export const useDeleteGuideline = (
+  refetchCallback: () => void,
+  guidelineId: number
+): UseMutationResult<string, Error, number> => {
+  return useMutation({
+    mutationFn: () => deleteGuideline(guidelineId),
+    onSuccess: (data: string) => {
+      alert(data);
+      refetchCallback();
+    },
+    onError: (error: Error) => {
+      console.error(error);
+    },
+  });
+};

src/pages/guard/guide-line/api/index.ts

@@ -2,4 +2,5 @@ export { getViewSpecificGuideline } from './view-specific-guideline.api';
 export { getSeniorAllGuidelines } from './view-senior-all-guideline.api';
 export { modifyGuideline } from './modify-guideline.api';
 export { addGuideline } from './add-guideline.api';
+export { deleteGuideline } from './delete-guideline.api';
 export * from './hooks';

src/pages/guard/guide-line/api/view-senior-all-guideline.api.ts

@@ -1,7 +1,7 @@
 import { fetchInstance } from '@/shared/api/instance';
 
 export type SeniorAllGuideLineResponse = {
-  Id: number;
+  id: number;
   type: string;
   title: string;
   content: string;
@@ -30,6 +30,5 @@ export const getSeniorAllGuidelines = async ({
   const response = await fetchInstance.get(
     getSeniorAllGuidelinesPath(seniorId, guidelineType)
   );
-  console.log(response.data);
   return response.data;
 };

src/pages/guard/guide-line/components/guide-info-box/GuideLineInfo.tsx

@@ -1,12 +1,12 @@
 import { useState } from 'react';
 
-import { useModifyGuideline } from '@/pages/guard';
+import { useDeleteGuideline, useModifyGuideline } from '@/pages/guard';
 import { arrowIcon, deleteIcon, editIcon } from '@/shared/assets';
 import { Box, Flex, Text, Image, Input } from '@chakra-ui/react';
 import styled from '@emotion/styled';
 
 type GuidelineInfo = {
-  Id: number;
+  id: number;
   type: string;
   title: string;
   content: string;
@@ -24,7 +24,8 @@ const GuideLineInfo = ({ guideline, refetch, seniorId }: Props) => {
   const [guidelineTitle, setGuidelineTitle] = useState(guideline.title);
   const [guidelineContent, setGuidelineContent] = useState(guideline.content);
 
-  const editMutation = useModifyGuideline(refetch, guideline.Id);
+  const editMutation = useModifyGuideline(refetch, guideline.id);
+  const deleteMutation = useDeleteGuideline(refetch, guideline.id);
 
   const toggleContent = () => {
     setIsMore(!isMore);
@@ -40,7 +41,9 @@ const GuideLineInfo = ({ guideline, refetch, seniorId }: Props) => {
     setIsEditing(false);
   };
 
-  const handleDelete = () => {};
+  const handleDelete = () => {
+    deleteMutation.mutate(guideline.id);
+  };
 
   return (
     <GuideLineInfoContainer>
@@ -99,9 +102,9 @@ const GuideLineInfo = ({ guideline, refetch, seniorId }: Props) => {
             alignItems='center'
             cursor='pointer'
           >
-            <Text fontSize='1rem' fontWeight={700}>
+            <Box fontSize='1rem' fontWeight={700} width='70%'>
               {guideline.title}
-            </Text>
+            </Box>
             <Box display='flex' flexDir='row' gap={1}>
               <Image src={deleteIcon} onClick={handleDelete} w={4} h={4} />
               <Image

src/pages/guard/guide-line/components/guide-register-box/GuideFormField.tsx

@@ -42,26 +42,27 @@ const FieldContainer = styled(Box)`
   display: flex;
   flex-direction: column;
   width: 100%;
+  height: auto;
 `;
 
 const Label = styled(Text)`
   font-size: 18px;
   font-weight: bold;
-  margin-bottom: 0.5rem;
+  margin-bottom: 0.2rem;
 `;
 
 const StyledInput = styled(Input)`
   background-color: var(--color-white);
   border: none;
   font-size: 0.8rem;
-  margin-bottom: 0.5rem;
+  margin-bottom: 0.2rem;
 `;
 
 const StyledTextarea = styled(Textarea)`
   background-color: var(--color-white);
   border: none;
   font-size: 0.8rem;
-  margin-bottom: 0.5rem;
+  margin-bottom: 0.2rem;
   min-height: 100px;
   resize: vertical;
 `;

src/pages/guard/guide-line/components/guide-register-box/GuidelineRegisterBox.tsx

@@ -27,7 +27,6 @@ const GuidelineRegisterBox = ({ refetch, seniorId, guidelineType }: Props) => {
       title: data.title,
       content: data.content,
     };
-    console.log(requestGuidelineData);
     postGuideline(requestGuidelineData);
   };
   return (
@@ -65,7 +64,8 @@ const RegisterBox = styled(Box)`
   position: absolute;
   bottom: 0;
   width: 100%;
-  height: 350px;
+  height: auto;
+  min-height: 350px;
   left: 50%;
   transform: translateX(-50%);
   max-width: 370px;
@@ -83,11 +83,12 @@ const InputBox = styled(Box)`
   display: flex;
   flex-direction: column;
   margin: 0.5rem;
+  margin-bottom: 1rem;
 `;
 
 const StyledButton = styled.button`
   position: absolute;
-  bottom: 1rem;
+  bottom: 0.5rem;
   width: 300px;
   height: 40px;
   background-color: #c69090;

src/pages/guard/review/SinittoReviewPage.tsx

@@ -2,7 +2,7 @@ import { useState } from 'react';
 
 import starIcon from './asset/star-icon.svg';
 import { BasicButton, Notice } from '@/shared/components';
-import { Text, Flex, Box, Textarea, Image, Button } from '@chakra-ui/react';
+import { Text, Flex, Box, Textarea, Image } from '@chakra-ui/react';
 import styled from '@emotion/styled';
 
 export const SinittoReviewPage = () => {
@@ -120,13 +120,15 @@ const Star = styled(Image)`
   transition: opacity 0.2s;
 `;
 
-const EvalButton = styled(Button)<{ isGood: boolean }>`
+const EvalButton = styled.button<{ isGood: boolean }>`
   background-color: ${({ isGood }) =>
     isGood ? 'var(--color-primary)' : '#cfcfcf'};
   color: ${({ isGood }) => (isGood ? 'var(--color-white)' : 'black')};
-  width: 50px;
+  width: 4rem;
   height: 35px;
   font-size: 16px;
+  border: 1px solid var(--color-white-gray);
+  border-radius: 10px;
 
   &:hover {
     background-color: var(--color-primary);