fix: provide.placeholder가 필수값임에 따른 추가 및 기존 컴포넌트 위치 조정

src/components/common/BtnTaskContainer.tsx

@@ -8,7 +8,7 @@ const BtnTaskContainer = styled.div<{ type: string }>`
 	flex-direction: column;
 	gap: 1rem;
 	width: 31.8rem;
-	height: ${({ type }) => (type === 'staging' ? '56.7rem' : '64rem')};
+	height: ${({ type }) => (type === 'staging' ? '56rem' : '61rem')};
 	overflow: auto;
 	overflow-y: scroll;
 

src/components/common/ScrollGradient.tsx

@@ -14,6 +14,7 @@ export default ScrollGradient;
 const ScrollGradientLayout = styled.div`
 	position: absolute;
 	bottom: 0;
+	left: 0;
 	z-index: 1;
 	display: flex;
 	flex-direction: column;

src/components/common/StagingArea/StagingArea.tsx

@@ -26,6 +26,7 @@ function StagingArea(props: StagingAreaProps) {
 									selectedTarget={selectedTarget}
 									tasks={tasks}
 								/>
+								{provided.placeholder}
 							</div>
 						)}
 					</Droppable>
@@ -39,6 +40,7 @@ function StagingArea(props: StagingAreaProps) {
 export default StagingArea;
 
 const StagingAreaLayout = styled.div`
+	position: relative;
 	display: inline-flex;
 	gap: 0.8rem;
 	align-items: center;

src/components/common/StagingArea/StagingAreaTaskContainer.tsx

@@ -4,7 +4,6 @@ import { Draggable } from 'react-beautiful-dnd';
 import BtnTaskContainer from '../BtnTaskContainer';
 
 import BtnTask from '@/components/common/BtnTask/BtnTask';
-import ScrollGradient from '@/components/common/ScrollGradient';
 import StagingAreaSetting from '@/components/common/StagingArea/StagingAreaSetting';
 import { TaskType } from '@/types/tasks/taskType';
 
@@ -46,7 +45,6 @@ function StagingAreaTaskContainer(props: StagingAreaTaskContainerProps) {
 						)}
 					</Draggable>
 				))}
-				<ScrollGradient />
 			</BtnTaskContainer>
 		</StagingAreaTaskContainerLayout>
 	);

src/components/common/textbox/TextInputStaging.tsx

@@ -47,6 +47,8 @@ function TextInputStaging() {
 }
 
 const StagingLayout = styled.div`
+	position: absolute;
+	bottom: 2.8rem;
 	display: flex;
 	flex-direction: column;
 	justify-content: space-between;

src/components/targetArea/TargetArea.tsx

@@ -34,6 +34,7 @@ function TargetArea(props: TargetAreaProps) {
 							selectedTarget={selectedTarget}
 							tasks={tasks}
 						/>
+						{provided.placeholder}
 					</div>
 				)}
 			</Droppable>

src/components/targetArea/TargetTaskSection.tsx

@@ -2,7 +2,6 @@ import { Draggable } from 'react-beautiful-dnd';
 
 import BtnTask from '../common/BtnTask/BtnTask';
 import BtnTaskContainer from '../common/BtnTaskContainer';
-import ScrollGradient from '../common/ScrollGradient';
 
 import { TaskType } from '@/types/tasks/taskType';
 
@@ -40,7 +39,6 @@ function TargetTaskSection(props: TargetTaskSectionProps) {
 					)}
 				</Draggable>
 			))}
-			<ScrollGradient />
 		</BtnTaskContainer>
 	);
 }