[feature] 지원서 관리 페이지 디자인을 적용한다

frontend/src/components/application/questionTypes/Choice.styles.ts

@@ -20,11 +20,10 @@ export const ItemWrapper = styled.div`
 `;
 
 export const DeleteButton = styled.button`
+  position: relative;
+  right: 45px;
   font-size: 0.75rem;
-  padding: 4px 8px;
-  border-radius: 4px;
-  background-color: #ffecec;
-  color: #e33;
-  border: 1px solid #f99;
+  background-color: transparent;
+  border: none;
   cursor: pointer;
 `;

frontend/src/components/application/questionTypes/Choice.tsx

@@ -5,6 +5,7 @@ import InputField from '@/components/common/InputField/InputField';
 import { APPLICATION_FORM } from '@/constants/APPLICATION_FORM';
 import { ChoiceProps } from '@/types/application';
 import ChoiceItem from '@/pages/ApplicationFormPage/components/ChoiceItem/ChoiceItem';
+import DeleteIcon from '@/assets/images/icons/delete_choice.svg';
 
 const MIN_ITEMS = 1;
 const MAX_ITEMS = 6;
@@ -113,7 +114,7 @@ const Choice = ({
                   handleDeleteItem(index);
                 }}
               >
-                삭제
+                <img src={DeleteIcon} />
               </Styled.DeleteButton>
             )}
           </Styled.ItemWrapper>

frontend/src/components/common/CustomTextArea/CustomTextArea.styles.ts

@@ -13,6 +13,7 @@ export const Label = styled.label`
   font-size: 1.125rem;
   margin-bottom: 12px;
   font-weight: 600;
+  color: #787878;
 `;
 
 export const TextAreaWrapper = styled.div`
@@ -25,8 +26,9 @@ export const TextArea = styled.textarea<{ hasError?: boolean }>`
   flex: 1;
   height: 45px;
   padding: 12px 18px;
-  border: 1px solid ${({ hasError }) => (hasError ? 'red' : '#c5c5c5')};
-  border-radius: 6px;
+  border: 1px solid ${({ hasError }) => (hasError ? 'red' : '#f5f5f5')};
+  border-radius: 10px;
+  background: var(--f5, #f5f5f5);
   outline: none;
   font-size: 1.125rem;
   letter-spacing: 0;
@@ -38,7 +40,7 @@ export const TextArea = styled.textarea<{ hasError?: boolean }>`
     border-color: ${({ hasError }) => (hasError ? 'red' : '#007bff')};
     box-shadow: 0 0 3px
       ${({ hasError }) =>
-    hasError ? 'rgba(255, 0, 0, 0.5)' : 'rgba(0, 123, 255, 0.5)'};
+        hasError ? 'rgba(255, 0, 0, 0.5)' : 'rgba(0, 123, 255, 0.5)'};
   }
 
   &:disabled {

frontend/src/pages/AdminPage/components/QuestionBuilder/QuestionBuilder.styles.ts

@@ -75,9 +75,29 @@ export const SelectionToggleButton = styled.button<{ active: boolean }>`
     color 0.2s ease;
 `;
 
-export const QuestionWrapper = styled.div<{readOnly?: boolean}>`
+export const DeleteButton = styled.button`
   display: flex;
-  gap: 36px;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  width: 100%;
+  height: 20px;
+  border-radius: 6px;
+  border: 1px solid #ffded2;
+  background: #fff;
+  cursor: pointer;
+`;
+
+export const QuestionWrapper = styled.div<{ readOnly?: boolean }>`
+  display: flex;
+  padding: 26px 20px;
+  gap: 20px;
+  border-radius: 10px;
+  border: 1px solid #f0f0f0;
   pointer-events: ${({ readOnly }) => (readOnly ? 'none' : 'auto')};
   cursor: ${({ readOnly }) => (readOnly ? 'not-allowed' : 'auto')};
+
+  &:hover {
+    box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
+  }
 `;

frontend/src/pages/AdminPage/components/QuestionBuilder/QuestionBuilder.tsx

@@ -8,6 +8,7 @@ import { QUESTION_LABEL_MAP } from '@/constants/APPLICATION_FORM';
 import { DROPDOWN_OPTIONS } from '@/constants/APPLICATION_FORM';
 import * as Styled from './QuestionBuilder.styles';
 import CustomDropdown from '@/components/common/CustomDropDown/CustomDropDown';
+import DeleteIcon from '@/assets/images/icons/delete_question.svg';
 
 const QuestionBuilder = ({
   id,
@@ -135,7 +136,9 @@ const QuestionBuilder = ({
         />
         {renderSelectionToggle()}
         {!readOnly && (
-          <button onClick={() => onRemoveQuestion()}>삭제</button>
+          <Styled.DeleteButton type='button' onClick={() => onRemoveQuestion()}>
+            삭제 <img src={DeleteIcon} alt='' aria-hidden='true' />
+          </Styled.DeleteButton>
         )}
       </Styled.QuestionMenu>
       <Styled.QuestionFieldContainer>

frontend/src/pages/AdminPage/tabs/ApplicationEditTab/ApplicationEditTab.styles.ts

@@ -1,11 +1,16 @@
 import styled from 'styled-components';
 
 export const FormTitle = styled.input`
+  width: 100%;
+  padding: 10px 12px;
+  align-items: center;
+  border-radius: 10px;
+  background: var(--f5, #f5f5f5);
   font-size: 2.5rem;
   font-weight: 700;
   border: none;
   outline: none;
-  margin: 76px 0;
+  margin: 60px 0px 35px 0px;
 
   &::placeholder {
     color: #c5c5c5;
@@ -20,7 +25,7 @@ export const FormTitle = styled.input`
 export const QuestionContainer = styled.div`
   display: flex;
   flex-direction: column;
-  margin-top : 40px;
+  margin-top: 40px;
   gap: 83px;
 `;