Merge branch 'develop' into feat/#52/targetlistarea-view

.eslintrc.cjs

@@ -32,7 +32,11 @@ module.exports = {
 		'no-shadow': 'off',
 		'@typescript-eslint/no-shadow': [
 			'error',
-			{ ignoreTypeValueShadow: true, ignoreFunctionTypeParameterNameValueShadow: true, allow: ['theme'] },
+			{
+				ignoreTypeValueShadow: true,
+				ignoreFunctionTypeParameterNameValueShadow: true,
+				allow: ['theme', 'size', 'color', 'mode'],
+			},
 		],
 		'import/order': [
 			'error',

src/assets/svg/index.ts

@@ -2,6 +2,10 @@ import Icn_arrow_narrow_right from '@/assets/svg/arrow-narrow-right.svg?react';
 import Arrow_up from '@/assets/svg/arrow-up.svg?react';
 import Icn_calander from '@/assets/svg/calendar-minus-01.svg?react';
 import Icn_date_clock from '@/assets/svg/clock.svg?react';
+import IcnArrangeCalendar from '@/assets/svg/icn_arrange_calendar.svg?react';
+import IcnArrangeLeft from '@/assets/svg/icn_arrange_left.svg?react';
+import IcnArrangeRight from '@/assets/svg/icn_arrange_right.svg?react';
+import IcnArrangeSet from '@/assets/svg/icn_arrange_set.svg?react';
 import DeleteIcon from '@/assets/svg/Delete.svg?react';
 import DoneIcon from '@/assets/svg/DoneIcon.svg?react';
 import TimelineDelete from '@/assets/svg/ic_delete.svg?react';
@@ -36,6 +40,12 @@ const Icons = {
 		Icn_nav_setting,
 		Icn_nav_today,
 	},
+	ArrangeBtn: {
+		IcnArrangeRight,
+		IcnArrangeLeft,
+		IcnArrangeSet,
+		IcnArrangeCalendar,
+	},
 	Arrow_up,
 	Refresh,
 	SelectedBox,

src/components/common/NavBar.tsx

@@ -28,6 +28,8 @@ function NavBar() {
 	);
 }
 const NavBarLayout = styled.div`
+	position: fixed;
+	left: 0;
 	display: flex;
 	flex-direction: column;
 	gap: 12rem;

src/components/common/arrangeBtn/ArrangeBtn.tsx

@@ -0,0 +1,51 @@
+import styled from '@emotion/styled';
+import { FunctionComponent, SVGProps } from 'react';
+
+import { bigSize, smallSize } from './arrangeBtnStyle';
+
+import Icons from '@/assets/svg/index';
+import { ArrangeBtnType } from '@/types/arrangeBtnType';
+
+const iconMap: Record<string, FunctionComponent<SVGProps<SVGSVGElement>>> = {
+	right: Icons.ArrangeBtn.IcnArrangeRight,
+	left: Icons.ArrangeBtn.IcnArrangeLeft,
+	set: Icons.ArrangeBtn.IcnArrangeSet,
+	calendar: Icons.ArrangeBtn.IcnArrangeCalendar,
+};
+function ArrangeBtn({ type, mode, color, size }: ArrangeBtnType) {
+	const IconComponent = iconMap[type];
+	const StyledIcon = styled(IconComponent)<{ size: string; color: string; mode: string }>`
+		${({ size }) => (size === 'small' ? smallSize : bigSize)};
+		path {
+			stroke: ${({ theme }) => theme.button[color][mode].ICON};
+		}
+
+		rect {
+			fill: ${({ theme }) => theme.button[color][mode].BG};
+		}
+
+		&:hover {
+			path {
+				stroke: ${({ theme }) => theme.button[color].HOVER.ICON};
+			}
+
+			rect {
+				fill: ${({ theme }) => theme.button[color].HOVER.BG};
+			}
+		}
+
+		&:active {
+			path {
+				stroke: ${({ theme }) => theme.button[color].PRESSED.ICON};
+			}
+
+			rect {
+				fill: ${({ theme }) => theme.button[color].PRESSED.BG};
+			}
+		}
+	`;
+
+	return <StyledIcon size={size} color={color} mode={mode} />;
+}
+
+export default ArrangeBtn;

src/components/common/arrangeBtn/arrangeBtnStyle.ts

@@ -0,0 +1,10 @@
+import { css } from '@emotion/react';
+
+export const smallSize = css`
+	width: 2.6rem;
+	height: 2.6rem;
+`;
+export const bigSize = css`
+	width: 3.2rem;
+	height: 3.2rem;
+`;

src/pages/Calendar.tsx

@@ -1,11 +1,5 @@
-import NavBar from '@/components/common/NavBar';
-
 function Calendar() {
-	return (
-		<div>
-			<NavBar />
-		</div>
-	);
+	return <div>calendar</div>;
 }
 
 export default Calendar;

src/pages/DashBoard.tsx

@@ -1,11 +1,61 @@
-import NavBar from '@/components/common/NavBar';
+import styled from '@emotion/styled';
+
+import ArrangeBtn from '@/components/common/arrangeBtn/ArrangeBtn';
 
 function DashBoard() {
 	return (
-		<div>
-			<NavBar />
-		</div>
+		<>
+			{/* right */}
+			<Wrapper>
+				<ArrangeBtn type="right" color="BLUE" mode="DEFAULT" size="small" />
+				<ArrangeBtn type="right" color="BLUE" mode="DISABLED" size="small" />
+
+				<ArrangeBtn type="right" color="WHITE" mode="DEFAULT" size="small" />
+				<ArrangeBtn type="right" color="WHITE" mode="DISABLED" size="small" />
+
+				<ArrangeBtn type="right" color="BLACK" mode="DEFAULT" size="small" />
+				<ArrangeBtn type="right" color="BLACK" mode="DISABLED" size="small" />
+			</Wrapper>
+
+			{/* left */}
+			<Wrapper>
+				<ArrangeBtn type="left" color="BLUE" mode="DEFAULT" size="small" />
+				<ArrangeBtn type="left" color="BLUE" mode="DISABLED" size="small" />
+
+				<ArrangeBtn type="left" color="WHITE" mode="DEFAULT" size="small" />
+				<ArrangeBtn type="left" color="WHITE" mode="DISABLED" size="small" />
+
+				<ArrangeBtn type="left" color="BLACK" mode="DEFAULT" size="small" />
+				<ArrangeBtn type="left" color="BLACK" mode="DISABLED" size="small" />
+			</Wrapper>
+
+			{/* set */}
+			<Wrapper>
+				<ArrangeBtn type="set" color="BLUE" mode="DEFAULT" size="small" />
+				<ArrangeBtn type="set" color="BLUE" mode="DISABLED" size="small" />
+
+				<ArrangeBtn type="set" color="WHITE" mode="DEFAULT" size="small" />
+				<ArrangeBtn type="set" color="WHITE" mode="DISABLED" size="small" />
+
+				<ArrangeBtn type="set" color="BLACK" mode="DEFAULT" size="small" />
+				<ArrangeBtn type="set" color="BLACK" mode="DISABLED" size="small" />
+			</Wrapper>
+
+			{/* calendar */}
+			<Wrapper>
+				<ArrangeBtn type="calendar" color="BLUE" mode="DEFAULT" size="small" />
+				<ArrangeBtn type="calendar" color="BLUE" mode="DISABLED" size="small" />
+
+				<ArrangeBtn type="calendar" color="WHITE" mode="DEFAULT" size="small" />
+				<ArrangeBtn type="calendar" color="WHITE" mode="DISABLED" size="small" />
+
+				<ArrangeBtn type="calendar" color="BLACK" mode="DEFAULT" size="small" />
+				<ArrangeBtn type="calendar" color="BLACK" mode="DISABLED" size="small" />
+			</Wrapper>
+		</>
 	);
 }
-
+const Wrapper = styled.div`
+	display: flex;
+`;
 export default DashBoard;

src/pages/MainLayout.tsx

@@ -1,14 +1,18 @@
+import styled from '@emotion/styled';
 import { Outlet } from 'react-router-dom';
 
 import NavBar from '@/components/common/NavBar';
 
 function MainLayout() {
 	return (
-		<>
+		<MainLayOutContainer>
 			<NavBar />
 			<Outlet />
-		</>
+		</MainLayOutContainer>
 	);
 }
+const MainLayOutContainer = styled.div`
+	padding-left: 7.2rem;
+`;
 
 export default MainLayout;

src/pages/Today.tsx

@@ -1,6 +1,5 @@
 import BtnDate from '@/components/common/BtnDate/BtnDate';
 import BtnStagingDate from '@/components/common/BtnDate/BtnStagingDate';
-import NavBar from '@/components/common/NavBar';
 import TextboxDailydate from '@/components/common/textbox/TextboxDailydate';
 import TextboxInput from '@/components/common/textbox/TextboxInput';
 import TextInputDesc from '@/components/common/textbox/TextInputDesc';
@@ -11,8 +10,7 @@ import TargetArea from '@/components/targetArea/TargetArea';
 
 function Today() {
 	return (
-		<div>
-			<NavBar />
+		<>
 			<TextboxInput variant="date" />
 			<TextboxInput variant="time" />
 			<TextboxInput variant="smallDate" />
@@ -28,8 +26,7 @@ function Today() {
 			<TextInputStaging />
 			<BtnDate date="2024.07.11" size="big" />
 			<BtnStagingDate />
-			<TargetArea />
-		</div>
+		</>
 	);
 }
 

src/types/arrangeBtnType.ts

@@ -0,0 +1,6 @@
+export interface ArrangeBtnType {
+	type: 'right' | 'left' | 'set' | 'calendar';
+	mode: 'DISABLED' | 'DEFAULT';
+	color: 'BLUE' | 'WHITE' | 'BLACK';
+	size: 'big' | 'small';
+}

vercel.json

@@ -0,0 +1,9 @@
+{
+    "routes": [
+        {
+            "src": "/[^.]+",
+            "dest": "/",
+            "status": 200
+        }
+    ]
+}