feat: 이력서 작성 페이지 반응형

resumeme · Mar 7, 2024 · 598f0e6 · 598f0e6
1 parent d26a300
commit 598f0e6
Show file tree

Hide file tree

Showing 7 changed files with 76 additions and 50 deletions.
diff --git a/src/components/organisms/ResumeBasicInput/ResumeBasicInput.tsx b/src/components/organisms/ResumeBasicInput/ResumeBasicInput.tsx
@@ -46,8 +46,11 @@ const ResumeBasicInput = ({ basicInfo }: ResumeBasicInputProps) => {
     >
       <TitleInputForm defaultValue={defaultTitle} />
       <Box w={'full'}>
-        <Flex justifyContent={'space-between'}>
-          <Box w={'400px'}>
+        <Flex
+          justifyContent={'space-between'}
+          wrap={'wrap'}
+        >
+          <Box w={{ base: 'full', md: '45%' }}>
             <Flex
               direction={'column'}
               gap={5}
@@ -74,7 +77,7 @@ const ResumeBasicInput = ({ basicInfo }: ResumeBasicInputProps) => {
             </Flex>
           </Box>
           <BorderBox
-            w={'400px'}
+            w={{ base: 'full', md: '45%' }}
             height={'fit-content'}
             position={'relative'}
           >

diff --git a/src/components/organisms/ResumeForms/ActivityForm/ActivityForm.tsx b/src/components/organisms/ResumeForms/ActivityForm/ActivityForm.tsx
@@ -93,6 +93,7 @@ const ActivityForm = ({
             alignSelf={'start'}
             width={'100%'}
             gap={'1.63rem'}
+            wrap={'wrap'}
           >
             <FormLabel isRequired>활동 기간</FormLabel>
             <TermInput

diff --git a/src/components/organisms/ResumeForms/AwardForm/AwardForm.tsx b/src/components/organisms/ResumeForms/AwardForm/AwardForm.tsx
@@ -70,8 +70,8 @@ const AwardForm = ({
           <FormControl isInvalid={Boolean(errors.certificationTitle)}>
             <FormLabel
               htmlFor="certificationTitle"
-              w={'8.625rem'}
               isRequired
+              w={'fit-content'}
             >
               수상/취득 내용
             </FormLabel>
@@ -85,11 +85,12 @@ const AwardForm = ({
             />
           </FormControl>
           <Flex
-            w={'full'}
-            gap={'3rem'}
+            columnGap={'3rem'}
+            rowGap={'1rem'}
+            wrap={'wrap'}
           >
             <FormControl
-              w={'60%'}
+              w={'fit-content'}
               isInvalid={Boolean(errors.acquisitionDate)}
             >
               <FormLabel
@@ -106,13 +107,11 @@ const AwardForm = ({
               />
             </FormControl>
 
-            <FormControl isInvalid={Boolean(errors.issuingAuthority)}>
-              <FormLabel
-                htmlFor="issuingAuthority"
-                w={'fit-content'}
-              >
-                수여 기관
-              </FormLabel>
+            <FormControl
+              w={'fit-content'}
+              isInvalid={Boolean(errors.issuingAuthority)}
+            >
+              <FormLabel htmlFor="issuingAuthority">수여 기관</FormLabel>
               <FormTextInput
                 placeholder="수여 기관을 입력해주세요."
                 id="issuingAuthority"
@@ -123,12 +122,7 @@ const AwardForm = ({
             </FormControl>
           </Flex>
           <FormControl isInvalid={Boolean(errors.link)}>
-            <FormLabel
-              htmlFor="link"
-              w={'8.625rem'}
-            >
-              링크
-            </FormLabel>
+            <FormLabel htmlFor="link">링크</FormLabel>
             <FormTextInput
               placeholder="URL 입력"
               id="link"
@@ -145,12 +139,7 @@ const AwardForm = ({
           </FormControl>
 
           <FormControl isInvalid={Boolean(errors.description)}>
-            <FormLabel
-              htmlFor="description"
-              w={'8.625rem'}
-            >
-              기타
-            </FormLabel>
+            <FormLabel htmlFor="description">기타</FormLabel>
             <FormTextarea
               h={'3rem'}
               placeholder="기타 필요한 설명이 있다면 입력해주세요."

diff --git a/src/components/organisms/ResumeForms/CareerForm/CareerForm.tsx b/src/components/organisms/ResumeForms/CareerForm/CareerForm.tsx
@@ -148,6 +148,7 @@ const CareerForm = ({
             alignSelf={'start'}
             width={'100%'}
             gap={'1.63rem'}
+            wrap={'wrap'}
           >
             <FormLabel isRequired>재직기간</FormLabel>
             <TermInput

diff --git a/src/components/organisms/ResumeForms/LanguageForm/LanguageForm.tsx b/src/components/organisms/ResumeForms/LanguageForm/LanguageForm.tsx
@@ -74,10 +74,14 @@ const LanguageForm = ({
             />
           </FormControl>
           <Flex
-            alignSelf={'stretch'}
-            gap={'3rem'}
+            columnGap={'3rem'}
+            rowGap={'1rem'}
+            wrap={'wrap'}
           >
-            <FormControl isInvalid={Boolean(errors.examName)}>
+            <FormControl
+              w={'fit-content'}
+              isInvalid={Boolean(errors.examName)}
+            >
               <FormLabel isRequired>시험명</FormLabel>
               <FormTextInput
                 id="examName"
@@ -86,7 +90,10 @@ const LanguageForm = ({
                 error={errors.examName}
               />
             </FormControl>
-            <FormControl isInvalid={Boolean(errors.scoreOrGrade)}>
+            <FormControl
+              w={'fit-content'}
+              isInvalid={Boolean(errors.scoreOrGrade)}
+            >
               <FormLabel isRequired>점수 및 등급</FormLabel>
               <FormTextInput
                 id="scoreOrGrade"

diff --git a/src/components/organisms/ResumeForms/ProjectForm/ProjectForm.tsx b/src/components/organisms/ResumeForms/ProjectForm/ProjectForm.tsx
@@ -89,9 +89,15 @@ const ProjectForm = ({
         >
           <Flex
             w={'full'}
-            gap={'3rem'}
+            columnGap={'3rem'}
+            rowGap={'1rem'}
+            justifyContent={'space-between'}
+            wrap={'wrap'}
           >
-            <FormControl isInvalid={Boolean(errors.projectName)}>
+            <FormControl
+              w={{ base: 'full', md: '60%' }}
+              isInvalid={Boolean(errors.projectName)}
+            >
               <FormLabel
                 htmlFor="projectName"
                 isRequired
@@ -108,12 +114,11 @@ const ProjectForm = ({
               />
             </FormControl>
             <FormControl
-              w={'60%'}
+              w={'fit-content'}
               isInvalid={Boolean(errors.productionYear)}
             >
               <FormLabel
                 flexShrink={0}
-                w={'fit-content'}
                 isRequired
               >
                 제작 년도
@@ -144,9 +149,12 @@ const ProjectForm = ({
           </Flex>
           <Flex
             w={'full'}
-            gap={'3rem'}
+            columnGap={'3rem'}
+            rowGap={'1rem'}
+            justifyContent={'space-between'}
+            wrap={'wrap'}
           >
-            <FormControl w={'60%'}>
+            <FormControl w={'fit-content'}>
               <FormLabel flexShrink={0}>팀 구성</FormLabel>
               <Select
                 borderColor={'gray.300'}
@@ -158,11 +166,13 @@ const ProjectForm = ({
                 <option value="">개인</option>
               </Select>
             </FormControl>
-            <FormControl isInvalid={watch('team') ? Boolean(errors.teamMembers) : undefined}>
+            <FormControl
+              w={{ base: 'full', md: '70%' }}
+              isInvalid={watch('team') ? Boolean(errors.teamMembers) : undefined}
+            >
               <FormLabel
                 isRequired={watch('team')}
                 htmlFor="teamMembers"
-                w={'fit-content'}
               >
                 팀 구성원
               </FormLabel>

diff --git a/src/components/organisms/ResumeForms/TrainingForm/TrainingForm.tsx b/src/components/organisms/ResumeForms/TrainingForm/TrainingForm.tsx
@@ -68,18 +68,21 @@ const TrainingForm = ({
           gap={'1.25rem'}
         >
           <Flex
-            gap={'2rem'}
-            alignSelf={'start'}
+            columnGap={'3rem'}
+            rowGap={'1rem'}
+            wrap={'wrap'}
           >
-            <FormControl isInvalid={Boolean(errors.organization)}>
+            <FormControl
+              w={{ base: 'full', md: '60%' }}
+              isInvalid={Boolean(errors.organization)}
+            >
               <FormLabel
                 htmlFor="organization"
                 isRequired
               >
                 학교/기관
               </FormLabel>
               <FormTextInput
-                w={'12rem'}
                 placeholder="OO학교"
                 id="organization"
                 register={{
@@ -88,7 +91,10 @@ const TrainingForm = ({
                 error={errors.organization}
               />
             </FormControl>
-            <FormControl isInvalid={Boolean(errors.major)}>
+            <FormControl
+              w={'fit-content'}
+              isInvalid={Boolean(errors.major)}
+            >
               <FormLabel
                 w={'fit-content'}
                 htmlFor="major"
@@ -97,7 +103,6 @@ const TrainingForm = ({
                 전공
               </FormLabel>
               <FormTextInput
-                w={'12rem'}
                 placeholder="컴퓨터공학"
                 id="major"
                 register={{
@@ -106,9 +111,11 @@ const TrainingForm = ({
                 error={errors.major}
               />
             </FormControl>
-            <FormControl isInvalid={Boolean(errors.degree)}>
+            <FormControl
+              w={'fit-content'}
+              isInvalid={Boolean(errors.degree)}
+            >
               <FormLabel
-                w={'fit-content'}
                 htmlFor="degree"
                 isRequired
               >
@@ -127,6 +134,7 @@ const TrainingForm = ({
           <Flex
             gap={'2rem'}
             alignSelf={'start'}
+            wrap={'wrap'}
           >
             <FormControl
               w={'fit-content'}
@@ -152,7 +160,10 @@ const TrainingForm = ({
                 error={errors.admissionDate}
               />
             </FormControl>
-            <FormControl isInvalid={Boolean(errors.graduationDate)}>
+            <FormControl
+              w={'fit-content'}
+              isInvalid={Boolean(errors.graduationDate)}
+            >
               <FormLabel w={'fit-content'}>졸업(예정)</FormLabel>
               <FormDateInput
                 maxW={'12rem'}
@@ -169,8 +180,9 @@ const TrainingForm = ({
             </FormControl>
           </Flex>
           <Flex
-            gap={'3rem'}
-            alignSelf={'start'}
+            columnGap={'3rem'}
+            rowGap={'1rem'}
+            wrap={'wrap'}
           >
             <FormControl
               w={'fit-content'}
@@ -196,7 +208,10 @@ const TrainingForm = ({
                 error={errors.gpa}
               />
             </FormControl>
-            <FormControl isInvalid={Boolean(errors.maxGpa)}>
+            <FormControl
+              w={'fit-content'}
+              isInvalid={Boolean(errors.maxGpa)}
+            >
               <FormLabel htmlFor="maxGpa">최대 학점</FormLabel>
               <Select
                 defaultValue={4.5}