Merge remote-tracking branch 'refs/remotes/origin/main'

resumeme · Dec 2, 2023 · 2d91617 · 2d91617
2 parents f0d33c9 + b627abd
commit 2d91617
Show file tree

Hide file tree

Showing 14 changed files with 84 additions and 45 deletions.
diff --git a/index.html b/index.html
@@ -16,6 +16,12 @@
       content="upgrade-insecure-requests"
     />
     <title>이력, 써 resume.me</title>
+    <link
+      rel="stylesheet"
+      as="style"
+      crossorigin
+      href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/variable/pretendardvariable.min.css"
+    />
   </head>
   <body>
     <div id="root"></div>

diff --git a/public/fonts/PretendardVariable.woff2 b/public/fonts/PretendardVariable.woff2
diff --git a/src/App.tsx b/src/App.tsx
@@ -7,7 +7,6 @@ import CONSTANTS from './constants/index';
 import { ResumeMeErrorResponse } from './types/errorResponse';
 import router from '~/routes/router';
 import theme from '~/theme';
-import Fonts from '~/theme/typography/fonts';
 
 const { toast } = createStandaloneToast({ theme });
 
@@ -48,7 +47,6 @@ const App = () => {
         theme={theme}
         toastOptions={{ defaultOptions: { position: 'top', duration: 2000 } }}
       >
-        <Fonts />
         <RouterProvider router={router} />
       </ChakraProvider>
     </QueryClientProvider>

diff --git a/src/components/atoms/Button/Button.tsx b/src/components/atoms/Button/Button.tsx
@@ -16,6 +16,12 @@ const Button = forwardRef<ButtonProps, 'button'>(
       size={size}
       {...props}
       ref={ref}
+      _hover={{
+        opacity: '80%',
+      }}
+      _groupHover={{
+        opacity: '80%',
+      }}
     >
       {children}
     </ChakraButton>

diff --git a/src/components/molecules/CategoryAddHeader/CategoryAddHeader.tsx b/src/components/molecules/CategoryAddHeader/CategoryAddHeader.tsx
@@ -23,6 +23,9 @@ const CategoryAddHeader = ({ categoryTitle, onAddItem }: CategoryAddHeaderProps)
         borderRadius={'1.22rem'}
         bg={'none'}
         onClick={onAddItem}
+        _hover={{
+          bg: 'primary.100',
+        }}
       >
         <AddIcon color={'primary.900'} />
       </Button>

diff --git a/src/components/molecules/EventGridItem/EventGridItem.tsx b/src/components/molecules/EventGridItem/EventGridItem.tsx
@@ -37,6 +37,10 @@ const EventGridItem = ({ event: { info, mentorInfo } }: { event: EventListItem }
         overflow={'hidden'}
         role="group"
         position={'relative'}
+        _hover={{
+          boxShadow: '1px 2px 5px 0 rgba(0, 0, 0, 0.2)',
+          transition: '.5s',
+        }}
       >
         <Box
           overflow={'hidden'}

diff --git a/src/components/organisms/FeedbackManagementItem/FeedbackManagementItem.tsx b/src/components/organisms/FeedbackManagementItem/FeedbackManagementItem.tsx
@@ -1,4 +1,5 @@
 import { Box, Flex, Icon, Link, Spacer, Text, Tooltip, useToast } from '@chakra-ui/react';
+import { BiCommentError } from 'react-icons/bi';
 import { FiFileText } from 'react-icons/fi';
 import { useNavigate } from 'react-router-dom';
 import { Link as ReactRouterLink } from 'react-router-dom';
@@ -158,7 +159,7 @@ const FeedbackManagementItem = ({
         gap={'0.69rem'}
       >
         <Icon
-          as={FiFileText}
+          as={!isReject ? FiFileText : BiCommentError}
           color={!isReject ? 'gray.600' : 'red.600'}
           boxSize={'1rem'}
         />
@@ -178,7 +179,7 @@ const FeedbackManagementItem = ({
             noOfLines={1}
             color={!isReject ? 'gray.600' : 'red.600'}
           >
-            {!isReject ? resumeTitle : rejectMessage}
+            {!isReject ? resumeTitle : `반려 메시지: ${rejectMessage}`}
           </Text>
         </Tooltip>
         <Spacer />

diff --git a/src/components/organisms/Profile/EventItem.tsx b/src/components/organisms/Profile/EventItem.tsx
@@ -109,15 +109,6 @@ const EventItem = ({
                 {title}
               </Text>
             </Tooltip>
-
-            {/* <Text
-            fontSize={'1.25rem'}
-            fontWeight={600}
-            color={'gray.800'}
-            noOfLines={1}
-          >
-            {title}
-          </Text> */}
           </Link>
         </Flex>
         <Flex direction={'column'}>

diff --git a/src/components/organisms/ResumeCategoryCareer/CareerForm.tsx b/src/components/organisms/ResumeCategoryCareer/CareerForm.tsx
@@ -1,4 +1,4 @@
-import { AddIcon, DeleteIcon } from '@chakra-ui/icons';
+import { AddIcon } from '@chakra-ui/icons';
 import {
   VStack,
   Text,
@@ -8,6 +8,7 @@ import {
   Flex,
   Tooltip,
   Box,
+  Icon,
 } from '@chakra-ui/react';
 import React, { useEffect } from 'react';
 import {
@@ -19,6 +20,7 @@ import {
   useForm,
   useWatch,
 } from 'react-hook-form';
+import { LuDelete } from 'react-icons/lu';
 import { useParams } from 'react-router-dom';
 import { postResumeCareer } from '~/api/resume/create/postResumeCareer';
 import { patchResumeCareer } from '~/api/resume/edit/patchResumeCareer';
@@ -299,14 +301,30 @@ const DutyForm = ({
         m={'1.5rem'}
         borderColor={'gray.300'}
       />
-      <ChakraButton
-        w={0}
-        h={0}
-        alignSelf={'self-end'}
-        onClick={() => remove(index)}
+      <Tooltip
+        placement="left-end"
+        label="삭제하기"
+        bg={'gray.800'}
+        color={'gray.100'}
+        hasArrow
       >
-        <DeleteIcon />
-      </ChakraButton>
+        <ChakraButton
+          w={'fit-content'}
+          minW={'fit-content'}
+          h={'fit-content'}
+          _hover={{
+            bg: 'gray.200',
+          }}
+          p={0}
+          alignSelf={'self-end'}
+          onClick={() => remove(index)}
+        >
+          <Icon
+            as={LuDelete}
+            boxSize={6}
+          />
+        </ChakraButton>
+      </Tooltip>
       <FormControl isInvalid={Boolean(errors.duties && errors.duties[index]?.title)}>
         <FormLabel
           htmlFor="dutyTitle"

diff --git a/src/components/organisms/ResumeDetails/CareerDetails.tsx b/src/components/organisms/ResumeDetails/CareerDetails.tsx
@@ -110,7 +110,14 @@ const CareerDetails = ({
                 ))}
               </Flex>
             )}
-            {careerContent && <Text mt={5}>{careerContent}</Text>}
+            {careerContent && (
+              <Text
+                mt={5}
+                whiteSpace={'pre-line'}
+              >
+                {careerContent}
+              </Text>
+            )}
           </Flex>
         </Flex>
         {duties?.map((duty) => (
@@ -133,7 +140,7 @@ const CareerDetails = ({
                 >
                   {duty.startDate} - {duty.endDate}
                 </Text>
-                <Text>{duty.description}</Text>
+                <Text whiteSpace={'pre-line'}>{duty.description}</Text>
               </Flex>
             </Flex>
           </Box>

diff --git a/src/theme/components/checkbox.ts b/src/theme/components/checkbox.ts
@@ -0,0 +1,23 @@
+import { checkboxAnatomy } from '@chakra-ui/anatomy';
+import { createMultiStyleConfigHelpers } from '@chakra-ui/react';
+
+const { definePartsStyle, defineMultiStyleConfig } = createMultiStyleConfigHelpers(
+  checkboxAnatomy.keys,
+);
+
+const baseStyle = definePartsStyle({
+  control: {
+    _checked: {
+      bg: 'primary.700',
+      borderColor: 'primary.700',
+      _hover: {
+        bg: 'primary.900',
+        borderColor: 'primary.900',
+      },
+    },
+  },
+});
+
+const Checkbox = defineMultiStyleConfig({ baseStyle });
+
+export { Checkbox };
diff --git a/src/theme/components/index.ts b/src/theme/components/index.ts
@@ -1,6 +1,7 @@
 import { Avatar } from './avatar';
 import { Button } from './button';
+import { Checkbox } from './checkbox';
 import { Input } from './input';
 import { Textarea } from './textarea';
 
-export { Input, Button, Avatar, Textarea };
+export { Input, Button, Avatar, Textarea, Checkbox };
diff --git a/src/theme/index.tsx b/src/theme/index.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable */
 
 import { StyleFunctionProps, extendTheme } from '@chakra-ui/react';
-import { Input, Button, Avatar, Textarea } from '~/theme/components';
+import { Input, Button, Avatar, Textarea, Checkbox } from '~/theme/components';
 
 const theme = extendTheme({
   breakpoints: {
@@ -79,7 +79,7 @@ const theme = extendTheme({
     '8xl': '6rem',
     '9xl': '8rem',
   },
-  components: { Input, Button, Avatar, Textarea },
+  components: { Input, Button, Avatar, Textarea, Checkbox },
 });
 
 export default theme;
diff --git a/src/theme/typography/fonts.tsx b/src/theme/typography/fonts.tsx