보완(# issue 173)

package.json

@@ -23,6 +23,7 @@
     "@tanstack/react-query-devtools": "^5.64.1",
     "@uiw/react-md-editor": "^4.0.5",
     "axios": "^1.7.9",
+    "crypto-js": "^4.2.0",
     "date-fns": "^4.1.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
@@ -49,6 +50,7 @@
     "@storybook/test-runner": "^0.21.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.1.0",
+    "@types/crypto-js": "^4.2.2",
     "@types/react": "^18.3.18",
     "@types/react-dom": "^18.3.5",
     "@types/styled-components": "^5.1.34",

src/components/applyComponents/careersComponent/CareersComponent.tsx

@@ -38,6 +38,7 @@ const CareersComponent = ({
         size='primary'
         schema='primary'
         radius='primary'
+        type='button'
         onClick={() =>
           appendCareers({
             name: '',

src/components/applyComponents/careersComponent/careersInputComponent/CareersComponentInput.styled.ts

@@ -13,12 +13,12 @@ const dateStyle = css`
 export const CareerInput = styled.input`
   ${basicStyle}
   padding: 10px;
-  font-size: 16px;
+  font-size: ${({ theme }) => theme.heading.semiSmall.fontSize};
 
   &:nth-child(1),
   &:nth-child(4) {
     flex: 2;
-    font-size: ${({ theme }) => theme.heading.small.fontSize};
+    font-size: ${({ theme }) => theme.heading.semiSmall.fontSize};
   }
 
   &:nth-child(2),
@@ -29,13 +29,13 @@ export const CareerInput = styled.input`
   @media screen and ${({ theme }) => theme.mediaQuery.tablet} {
     width: 100%;
     margin-bottom: 12px;
-    font-size: 14px;
+    font-size: ${({ theme }) => theme.heading.small.fontSize};
   }
 `;
 
 export const FormError = styled.p`
   margin-top: 0.3px;
-  font-size: 1rem;
+  font-size: ${({ theme }) => theme.heading.small.fontSize};
   color: ${({ theme }) => theme.color.red};
   position: absolute;
   top: 100%;

src/components/applyComponents/phoneComponent/PhoneComponent.styled.ts

@@ -10,13 +10,13 @@ export const PhoneInputContainer = styled.div`
 
 export const Dash = styled.span`
   align-self: center;
-  font-size: 25px;
+  font-size: ${({ theme }) => theme.heading.semiLarge.fontSize};
   color: #888;
 `;
 
 export const FormError = styled.p`
   margin-top: 0.3px;
-  font-size: 0.9rem;
+  font-size: ${({ theme }) => theme.heading.small.fontSize};
   color: ${({ theme }) => theme.color.red};
   position: absolute;
   top: 115%;

src/components/applyComponents/phoneComponent/PhoneComponent.tsx

@@ -33,7 +33,15 @@ const PhoneComponent = ({ control, errors }: PhoneComponentProps) => {
       />
 
       {errors.phone && (
-        <S.FormError>{String(errors?.phone[0]?.message)}</S.FormError>
+        <S.FormError>
+          {String(
+            errors?.phone[0]?.message
+              ? errors?.phone[0]?.message
+              : errors?.phone[1]?.message
+              ? errors?.phone[1].message
+              : errors?.phone[2]?.message
+          )}
+        </S.FormError>
       )}
     </S.PhoneInputContainer>
   );

src/components/applyComponents/phoneComponent/phoneComponentInput/PhoneComponentInput.styled.ts

@@ -6,9 +6,9 @@ export const PhoneInput = styled.input`
   border: 1px solid ${({ theme }) => theme.color.border};
   border-radius: ${({ theme }) => theme.borderRadius.primary};
   text-align: center;
-  font-size: 17px;
+  font-size: ${({ theme }) => theme.heading.semiSmall.fontSize};
 
   @media screen and ${({ theme }) => theme.mediaQuery.tablet} {
-    font-size: 15px;
+    font-size: ${({ theme }) => theme.heading.small.fontSize};
   }
 `;

src/components/common/positionButton/PositionButton.tsx

@@ -15,7 +15,11 @@ export default function PositionButton({
 }: PositionButtonProps) {
   return (
     <S.Container onClick={onClick}>
-      <S.PositionButton $isSelected={isSelected} $isHover={isHover}>
+      <S.PositionButton
+        $isSelected={isSelected}
+        $isHover={isHover}
+        type='button'
+      >
         {position}
       </S.PositionButton>
     </S.Container>

src/components/projectFormComponents/editor/MarkdownEditor.styled.ts

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 
 export const StyledMDEditor = styled(MDEditor)`
   border: 1px solid ${({ theme }) => theme.color.border};
-  border-radius: ${({ theme }) => theme.borderRadius.primary};
+  border-radius: ${({ theme }) => theme.borderRadius.large};
   background-color: ${({ theme }) => theme.color.white};
   padding: 10px;
 `;

src/components/projectFormComponents/inputComponent/inputComponent.styled.ts

@@ -79,4 +79,8 @@ export const FormError = styled.p`
   top: 115%;
   left: 5px;
   white-space: nowrap;
+
+  @media screen and ${({ theme }) => theme.mediaQuery.tablet} {
+    font-size: ${({ theme }) => theme.heading.small.tabletFontSize};
+  }
 `;

src/components/projectFormComponents/projectInformationInput/ProjectInformationInput.styled.ts

@@ -6,13 +6,19 @@ export const InfoRow = styled.div`
   margin-bottom: 1.8rem;
   display: flex;
 
-  label {
-    font-size: 1rem;
-    font-weight: bold;
-    color: #333;
-  }
-
   p {
     font-size: 0.8rem;
   }
 `;
+
+export const InfoLabel = styled.label`
+  font-size: ${({ theme }) => theme.heading.small.fontSize};
+  font-weight: bold;
+  color: #333;
+`;
+
+export const welcomeSprout = styled.p`
+  font-size: 1rem;
+  font-weight: bold;
+  color: ${({ theme }) => theme.color.placeholder};
+`;

src/components/projectFormComponents/projectInformationInput/ProjectInformationInput.tsx

@@ -44,7 +44,7 @@ const ProjectInformationInput = ({
       {PROJECT_DATA.map((input, index) => (
         <>
           <S.InfoRow key={index}>
-            <label htmlFor={input.name}>{input.label}</label>
+            <S.InfoLabel htmlFor={input.name}>{input.label}</S.InfoLabel>
             <Input
               indexInfo={input.id}
               control={control}
@@ -53,12 +53,15 @@ const ProjectInformationInput = ({
               type={input.type}
               placeholder={input.placeholder}
             />
+            {input.type === 'checkbox' && (
+              <S.welcomeSprout>"새싹 멤버도 환영해요 !!"</S.welcomeSprout>
+            )}
           </S.InfoRow>
         </>
       ))}
 
       <S.InfoRow>
-        <label htmlFor='field'>진행 방식</label>
+        <S.InfoLabel htmlFor='field'>진행 방식</S.InfoLabel>
       </S.InfoRow>
       <FieldCategoryComponent
         name='field'
@@ -71,7 +74,7 @@ const ProjectInformationInput = ({
       />
 
       <S.InfoRow>
-        <label htmlFor='position'>모집 분야</label>
+        <S.InfoLabel htmlFor='position'>모집 분야</S.InfoLabel>
       </S.InfoRow>
       <MozipCategoryComponent
         name='position'
@@ -84,7 +87,7 @@ const ProjectInformationInput = ({
       />
 
       <S.InfoRow>
-        <label htmlFor='languages'>사용 언어</label>
+        <S.InfoLabel htmlFor='languages'>사용 언어</S.InfoLabel>
       </S.InfoRow>
       <LanguageComponent
         name='languages'

src/components/projectFormComponents/projectInformationInput/fieldCategoryComponent/FieldCategoryComponent.tsx

@@ -27,7 +27,7 @@ const FieldCategoryComponent = ({
 
   const handleClick = (idx: number) => {
     setSelectedMethod(idx);
-    setValue('field', idx);
+    setValue('field', idx + 1);
   };
 
   useEffect(() => {

src/components/projectFormComponents/projectInformationInput/positionComponent/PositionComponent.styled.ts

@@ -36,7 +36,7 @@ export const PositionButtonFeat = styled(PositionButton)<{
   }
 
   .name {
-    font-size: 0.7rem;
+    font-size: 0.8rem;
     font-weight: 200;
     color: ${({ isSelected, theme }) =>
       isSelected ? theme.color.white : theme.color.primary};

src/hooks/useUpdateProject.ts

@@ -4,6 +4,7 @@ import { FormData } from '../models/createProject';
 import { MODAL_MESSAGE } from '../constants/modalMessage';
 import { ROUTES } from '../constants/routes';
 import { useNavigate } from 'react-router-dom';
+import { managedProjectKey } from './queries/keys';
 
 interface UseUpdateProjectProps {
   id: number;
@@ -18,7 +19,7 @@ const useUpdateProject = ({ id, handleModalOpen }: UseUpdateProjectProps) => {
     mutationFn: (formData: FormData) => putProject(formData, id),
     onSuccess: () => {
       queryClient.invalidateQueries({
-        queryKey: ['projectDataAll', id],
+        queryKey: [managedProjectKey.detail, id],
         exact: true,
       });
       handleModalOpen(MODAL_MESSAGE.ModifyProjectSuccess);

src/pages/apply/Apply.styled.ts

@@ -8,37 +8,37 @@ export const Container = styled.div`
   font-family: Arial, sans-serif;
 
   @media screen and ${({ theme }) => theme.mediaQuery.tablet} {
-    padding: 25px;
+    padding: 20px;
   }
 `;
 
 export const Title = styled.h1`
-  font-size: 32px;
+  font-size: 2.3rem;
   font-weight: bold;
   margin-bottom: 50px;
 
   @media screen and ${({ theme }) => theme.mediaQuery.tablet} {
-    font-size: 27px;
+    font-size: 1.8rem;
   }
 `;
 
 export const Subtitle = styled.h2`
-  font-size: 25px;
+  font-size: 1.5rem;
   color: ${({ theme }) => theme.color.primary};
   margin-bottom: 20px;
 
   @media screen and ${({ theme }) => theme.mediaQuery.tablet} {
-    font-size: 22px;
+    font-size: 1.4rem;
   }
 `;
 
 export const Dates = styled.p`
-  font-size: 20px;
+  font-size: ${({ theme }) => theme.heading.small.fontSize};
   color: ${({ theme }) => theme.color.placeholder};
   margin-bottom: 50px;
 
   @media screen and ${({ theme }) => theme.mediaQuery.tablet} {
-    font-size: 16px;
+    font-size: ${({ theme }) => theme.heading.small.fontSize};
   }
 `;
 
@@ -56,12 +56,12 @@ export const Section = styled.div`
 `;
 
 export const Label = styled.label`
-  font-size: 20px;
+  font-size: 1.2rem;
   font-weight: bold;
   color: ${({ theme }) => theme.color.black};
 
   @media screen and ${({ theme }) => theme.mediaQuery.tablet} {
-    font-size: 18px;
+    font-size: 1.1rem;
   }
 `;