diff --git a/frontend/src/assets/images/icons/delete_choice.svg b/frontend/src/assets/images/icons/delete_choice.svg
new file mode 100644
index 000000000..935b8b963
--- /dev/null
+++ b/frontend/src/assets/images/icons/delete_choice.svg
@@ -0,0 +1,4 @@
+
diff --git a/frontend/src/assets/images/icons/delete_question.svg b/frontend/src/assets/images/icons/delete_question.svg
new file mode 100644
index 000000000..fd89ec148
--- /dev/null
+++ b/frontend/src/assets/images/icons/delete_question.svg
@@ -0,0 +1,4 @@
+
diff --git a/frontend/src/components/application/questionTypes/Choice.styles.ts b/frontend/src/components/application/questionTypes/Choice.styles.ts
index 66b10b1e5..4e51a069f 100644
--- a/frontend/src/components/application/questionTypes/Choice.styles.ts
+++ b/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;
`;
diff --git a/frontend/src/components/application/questionTypes/Choice.tsx b/frontend/src/components/application/questionTypes/Choice.tsx
index 14b0466e2..c55790d4c 100644
--- a/frontend/src/components/application/questionTypes/Choice.tsx
+++ b/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);
}}
>
- 삭제
+ 
)}
diff --git a/frontend/src/components/common/CustomTextArea/CustomTextArea.styles.ts b/frontend/src/components/common/CustomTextArea/CustomTextArea.styles.ts
index cb6115ded..b227c85d1 100644
--- a/frontend/src/components/common/CustomTextArea/CustomTextArea.styles.ts
+++ b/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 {
diff --git a/frontend/src/pages/AdminPage/components/QuestionBuilder/QuestionBuilder.styles.ts b/frontend/src/pages/AdminPage/components/QuestionBuilder/QuestionBuilder.styles.ts
index 05d359afe..37cff899a 100644
--- a/frontend/src/pages/AdminPage/components/QuestionBuilder/QuestionBuilder.styles.ts
+++ b/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);
+ }
`;
diff --git a/frontend/src/pages/AdminPage/components/QuestionBuilder/QuestionBuilder.tsx b/frontend/src/pages/AdminPage/components/QuestionBuilder/QuestionBuilder.tsx
index 77b673dc4..6c553a69b 100644
--- a/frontend/src/pages/AdminPage/components/QuestionBuilder/QuestionBuilder.tsx
+++ b/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 && (
-
+ onRemoveQuestion()}>
+ 삭제
+
)}
diff --git a/frontend/src/pages/AdminPage/tabs/ApplicationEditTab/ApplicationEditTab.styles.ts b/frontend/src/pages/AdminPage/tabs/ApplicationEditTab/ApplicationEditTab.styles.ts
index e7bccb892..61130b3fe 100644
--- a/frontend/src/pages/AdminPage/tabs/ApplicationEditTab/ApplicationEditTab.styles.ts
+++ b/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;
`;