Merge branch 'develop' into feat/#168/today-datBtn

TEAM-DAWM · Jul 17, 2024 · 0618b68 · 0618b68
2 parents 56e3314 + 5a81120
commit 0618b68
Show file tree

Hide file tree

Showing 15 changed files with 332 additions and 105 deletions.
diff --git a/.github/workflows/gradle.yaml b/.github/workflows/gradle.yaml
@@ -42,6 +42,11 @@ jobs:
           node-version: '20'
           cache: 'yarn'
 
+      - name: .env setting
+        run: |
+            echo "VITE_BASE_URL=${{ secrets.VITE_BASE_URL }}" >> .env
+            echo "VITE_GOOGLE_LOGIN_CLIENT_ID=${{ secrets.VITE_GOOGLE_LOGIN_CLIENT_ID }}" >> .env
+
       - name: Install dependencies
         run: yarn install --frozen-lockfile
 

diff --git a/.gitignore b/.gitignore
@@ -24,5 +24,4 @@ dist-ssr
 *.sw?
 
 *storybook.log
-
 .env
diff --git a/package.json b/package.json
@@ -24,6 +24,7 @@
 		"axios": "^1.7.2",
 		"fullcalendar": "^6.1.14",
 		"react": "^18.3.1",
+		"react-beautiful-dnd": "^13.1.1",
 		"react-datepicker": "^7.3.0",
 		"react-dom": "^18.3.1",
 		"react-router-dom": "^6.24.1",
@@ -41,6 +42,7 @@
 		"@storybook/test": "^8.1.11",
 		"@tanstack/eslint-plugin-query": "^5.51.1",
 		"@types/react": "^18.3.3",
+		"@types/react-beautiful-dnd": "^13.1.8",
 		"@types/react-datepicker": "^6.2.0",
 		"@types/react-dom": "^18.3.0",
 		"@typescript-eslint/eslint-plugin": "^7.13.1",

diff --git a/src/components/DashboardPage/DashboardTask.tsx b/src/components/DashboardPage/DashboardTask.tsx
@@ -86,6 +86,7 @@ function DashboardTask({ text }: DashboardTaskProps) {
 						status={task.status}
 						deadLine={task.deadLine}
 						selectedTarget={selectedTarget}
+						preventDoubleClick
 						handleSelectedTarget={handleSelectedTarget}
 						iconType="active"
 					/>

diff --git a/src/components/common/BtnTask/BtnTask.tsx b/src/components/common/BtnTask/BtnTask.tsx
@@ -17,6 +17,8 @@ interface BtnTaskProps extends TaskType {
 	selectedTarget: TaskType | null;
 	iconType: 'stagingOrDelayed' | 'active';
 	btnStatus?: '진행중' | '미완료' | '완료' | '오늘로추가';
+	preventDoubleClick?: boolean;
+	isDragging?: boolean;
 }
 
 interface BorderColorProps {
@@ -25,11 +27,23 @@ interface BorderColorProps {
 	theme: Theme;
 	iconType: string;
 	status: string;
+	isDragging?: boolean;
 }
 
 function BtnTask(props: BtnTaskProps) {
-	const { id, name, deadLine, hasDescription, status, handleSelectedTarget, selectedTarget, iconType, btnStatus } =
-		props;
+	const {
+		id,
+		name,
+		deadLine,
+		hasDescription,
+		status,
+		handleSelectedTarget,
+		selectedTarget,
+		iconType,
+		btnStatus,
+		preventDoubleClick = false,
+		isDragging = false,
+	} = props;
 	const [isModalOpen, setModalOpen] = useState(false);
 	const [isHovered, setIsHovered] = useState(false);
 
@@ -46,6 +60,10 @@ function BtnTask(props: BtnTaskProps) {
 
 	/** 모달 띄우기 */
 	const handleDoubleClick = (e: React.MouseEvent) => {
+		if (preventDoubleClick) {
+			e.preventDefault();
+			return;
+		}
 		const rect = e.currentTarget.getBoundingClientRect();
 		const calculatedTop = rect.top;
 		const adjustedTop = Math.min(calculatedTop, MODAL.SCREEN_HEIGHT - MODAL.TASK_MODAL_HEIGHT);
@@ -85,6 +103,7 @@ function BtnTask(props: BtnTaskProps) {
 				onClick={handleClick}
 				theme={theme}
 				status={status}
+				isDragging={isDragging}
 			>
 				<BtnTaskContainer onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
 					<BtnTaskTextWrapper isDescription={hasDescription}>
@@ -107,12 +126,23 @@ function BtnTask(props: BtnTaskProps) {
 
 export default BtnTask;
 
-const getBorderColor = ({ isHovered, isClicked, theme, status }: BorderColorProps) => {
+const draggingStyle = (theme: Theme) => css`
+	background: ${theme.palette.Grey.White};
+	box-shadow: 0 16px 35px 0 rgb(72 87 120 / 25%);
+	border: 1px solid ${theme.palette.Blue.Blue7};
+	border-radius: 8px;
+`;
+
+const getBorderColor = ({ isHovered, isClicked, theme, status, isDragging }: BorderColorProps) => {
 	const defaultColor = theme.palette.Grey.Grey1;
 	const hoverColor = theme.palette.Blue.Blue3;
 	const clickColor = theme.palette.Primary;
 	const orangeColor = theme.palette.Orange.Orange8;
 	let borderColor = defaultColor;
+	if (isDragging && status !== '지연') {
+		return draggingStyle(theme);
+	}
+
 	if (status === '지연') {
 		borderColor = orangeColor;
 	} else if (isClicked) {

diff --git a/src/components/common/BtnTaskContainer.tsx b/src/components/common/BtnTaskContainer.tsx
@@ -7,8 +7,8 @@ const BtnTaskContainer = styled.div<{ type: string }>`
 	display: flex;
 	flex-direction: column;
 	gap: 1rem;
-	width: 100%;
-	height: ${({ type }) => (type === 'staging' ? '56.7rem' : '64rem')};
+	width: 31.8rem;
+	height: ${({ type }) => (type === 'staging' ? '56rem' : '61rem')};
 	overflow: auto;
 	overflow-y: scroll;
 

diff --git a/src/components/common/ScrollGradient.tsx b/src/components/common/ScrollGradient.tsx
@@ -12,8 +12,9 @@ function ScrollGradient() {
 export default ScrollGradient;
 
 const ScrollGradientLayout = styled.div`
-	position: sticky;
+	position: absolute;
 	bottom: 0;
+	left: 0;
 	z-index: 1;
 	display: flex;
 	flex-direction: column;

diff --git a/src/components/common/StagingArea/StagingArea.tsx b/src/components/common/StagingArea/StagingArea.tsx
@@ -1,4 +1,5 @@
 import styled from '@emotion/styled';
+import { Droppable } from 'react-beautiful-dnd';
 
 import StagingAreaTaskContainer from './StagingAreaTaskContainer';
 
@@ -8,14 +9,27 @@ import { TaskType } from '@/types/tasks/taskType';
 interface StagingAreaProps {
 	handleSelectedTarget: (task: TaskType | null) => void;
 	selectedTarget: TaskType | null;
+	tasks: TaskType[];
 }
-function StagingArea({ handleSelectedTarget, selectedTarget }: StagingAreaProps) {
+function StagingArea(props: StagingAreaProps) {
+	const { handleSelectedTarget, selectedTarget, tasks } = props;
 	return (
 		<StagingAreaLayout>
 			<StagingAreaContainer>
 				<StagingAreaUpContainer>
 					<StagingAreaTitle>쏟아내기</StagingAreaTitle>
-					<StagingAreaTaskContainer handleSelectedTarget={handleSelectedTarget} selectedTarget={selectedTarget} />
+					<Droppable droppableId="staging">
+						{(provided) => (
+							<div ref={provided.innerRef} {...provided.droppableProps}>
+								<StagingAreaTaskContainer
+									handleSelectedTarget={handleSelectedTarget}
+									selectedTarget={selectedTarget}
+									tasks={tasks}
+								/>
+								{provided.placeholder}
+							</div>
+						)}
+					</Droppable>
 				</StagingAreaUpContainer>
 				<TextInputStaging />
 			</StagingAreaContainer>
@@ -26,6 +40,7 @@ function StagingArea({ handleSelectedTarget, selectedTarget }: StagingAreaProps)
 export default StagingArea;
 
 const StagingAreaLayout = styled.div`
+	position: relative;
 	display: inline-flex;
 	gap: 0.8rem;
 	align-items: center;

diff --git a/src/components/common/StagingArea/StagingAreaTaskContainer.tsx b/src/components/common/StagingArea/StagingAreaTaskContainer.tsx
@@ -1,48 +1,50 @@
 import styled from '@emotion/styled';
+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';
 
 interface StagingAreaTaskContainerProps {
 	handleSelectedTarget: (task: TaskType | null) => void;
 	selectedTarget: TaskType | null;
+	tasks: TaskType[];
 }
-function StagingAreaTaskContainer({ handleSelectedTarget, selectedTarget }: StagingAreaTaskContainerProps) {
-	const dummyTaskList: TaskType[] = [
-		{
-			id: 3,
-			name: '김지원',
-			deadLine: {
-				date: '2024-06-30',
-				time: '12:30',
-			},
-			hasDescription: true,
-			status: '미완료',
-		},
-	];
+
+function StagingAreaTaskContainer(props: StagingAreaTaskContainerProps) {
+	const { handleSelectedTarget, selectedTarget, tasks } = props;
 
 	return (
 		<StagingAreaTaskContainerLayout>
 			<StagingAreaSetting />
 			<BtnTaskContainer type="staging">
-				{dummyTaskList.map((task) => (
-					<BtnTask
-						key={task.id + task.name}
-						iconType="stagingOrDelayed"
-						hasDescription={task.hasDescription}
-						id={task.id}
-						name={task.name}
-						status={task.status}
-						deadLine={task.deadLine}
-						selectedTarget={selectedTarget}
-						handleSelectedTarget={handleSelectedTarget}
-					/>
+				{tasks.map((task, index) => (
+					<Draggable key={task.id} draggableId={task.id.toString()} index={index}>
+						{(provided, snapshot) => (
+							<div
+								ref={provided.innerRef}
+								{...provided.draggableProps}
+								{...provided.dragHandleProps}
+								style={{ userSelect: 'none', ...provided.draggableProps.style }}
+							>
+								<BtnTask
+									key={task.id + task.name}
+									iconType="stagingOrDelayed"
+									hasDescription={task.hasDescription}
+									id={task.id}
+									name={task.name}
+									status={task.status}
+									deadLine={task.deadLine}
+									selectedTarget={selectedTarget}
+									handleSelectedTarget={handleSelectedTarget}
+									isDragging={snapshot.isDragging}
+								/>
+							</div>
+						)}
+					</Draggable>
 				))}
-				<ScrollGradient />
 			</BtnTaskContainer>
 		</StagingAreaTaskContainerLayout>
 	);

diff --git a/src/components/common/textbox/TextInputStaging.tsx b/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;

diff --git a/src/components/targetArea/TargetArea.tsx b/src/components/targetArea/TargetArea.tsx
@@ -1,5 +1,6 @@
 import styled from '@emotion/styled';
 import { useState } from 'react';
+import { Droppable } from 'react-beautiful-dnd';
 
 import TargetAreaDate from './TargetAreaDate';
 import TargetControlSection from './TargetControlSection';
@@ -10,8 +11,10 @@ import { TaskType } from '@/types/tasks/taskType';
 interface TargetAreaProps {
 	handleSelectedTarget: (task: TaskType | null) => void;
 	selectedTarget: TaskType | null;
+	tasks: TaskType[];
 }
-function TargetArea({ handleSelectedTarget, selectedTarget }: TargetAreaProps) {
+
+function TargetArea({ handleSelectedTarget, selectedTarget, tasks }: TargetAreaProps) {
 	const [targetDate, setTargetDate] = useState(new Date());
 
 	const handlePrevBtn = () => {
@@ -50,7 +53,18 @@ function TargetArea({ handleSelectedTarget, selectedTarget }: TargetAreaProps) {
 				targetDate={targetDate}
 			/>
 			{/* 태스크 목록 */}
-			<TargetTaskSection handleSelectedTarget={handleSelectedTarget} selectedTarget={selectedTarget} />
+			<Droppable droppableId="target">
+				{(provided) => (
+					<div ref={provided.innerRef} {...provided.droppableProps}>
+						<TargetTaskSection
+							handleSelectedTarget={handleSelectedTarget}
+							selectedTarget={selectedTarget}
+							tasks={tasks}
+						/>
+						{provided.placeholder}
+					</div>
+				)}
+			</Droppable>
 		</TargetAreaLayout>
 	);
 }
@@ -59,6 +73,7 @@ const TargetAreaLayout = styled.section`
 	flex-direction: column;
 	flex-shrink: 0;
 	align-items: flex-start;
+	width: 31.8rem;
 	height: 74.8rem;
 	margin: 1rem;
 	padding: 0 0.1rem 0 0.7rem;