diff --git a/src/assets/svg/arrow-narrow-right.svg b/src/assets/svg/arrow-narrow-right.svg
new file mode 100644
index 00000000..5ff170ff
--- /dev/null
+++ b/src/assets/svg/arrow-narrow-right.svg
@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.33203 7H11.6654M11.6654 7L8.16536 3.5M11.6654 7L8.16536 10.5" stroke="#626273" stroke-width="1.20833" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/assets/svg/icn_clock.svg b/src/assets/svg/icn_clock.svg
new file mode 100644
index 00000000..30717cb5
--- /dev/null
+++ b/src/assets/svg/icn_clock.svg
@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.99935 3.50033V7.00033L9.33268 8.16699M12.8327 7.00033C12.8327 10.222 10.221 12.8337 6.99935 12.8337C3.77769 12.8337 1.16602 10.222 1.16602 7.00033C1.16602 3.77866 3.77769 1.16699 6.99935 1.16699C10.221 1.16699 12.8327 3.77866 12.8327 7.00033Z" stroke="#9090A0" stroke-width="1.16667" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/assets/svg/index.ts b/src/assets/svg/index.ts
index e69de29b..c7a67232 100644
--- a/src/assets/svg/index.ts
+++ b/src/assets/svg/index.ts
@@ -0,0 +1,9 @@
+import Icn_arrow_narrow_right from '@/assets/svg/arrow-narrow-right.svg?react';
+import Icn_clock from '@/assets/svg/icn_clock.svg?react';
+
+const Icons = {
+	Icn_clock,
+	Icn_arrow_narrow_right,
+};
+
+export default Icons;
diff --git a/src/components/common/textbox/TextInputDesc.tsx b/src/components/common/textbox/TextInputDesc.tsx
new file mode 100644
index 00000000..4496ae74
--- /dev/null
+++ b/src/components/common/textbox/TextInputDesc.tsx
@@ -0,0 +1,17 @@
+import styled from '@emotion/styled';
+
+import { SizeType } from '@/types/textInputType';
+
+const TextInputDesc = ({ type }: SizeType) => {
+	return <TextInputDescLayout placeholder="설명 추가" type={type} />;
+};
+
+const TextInputDescLayout = styled.textarea<{ type: string }>`
+	width: ${({ type }) => (type === 'long' ? '34.8rem' : '30.4rem')};
+	height: ${({ type }) => (type === 'long' ? '14.5rem' : '18rem')};
+
+	${({ theme }) => theme.fontTheme.BODY_02};
+	border: solid 1px ${({ theme }) => theme.palette.GREY_01};
+	border-radius: 5px;
+`;
+export default TextInputDesc;
diff --git a/src/components/common/textbox/TextInputStaging.tsx b/src/components/common/textbox/TextInputStaging.tsx
new file mode 100644
index 00000000..1cdee118
--- /dev/null
+++ b/src/components/common/textbox/TextInputStaging.tsx
@@ -0,0 +1,56 @@
+import styled from '@emotion/styled';
+
+type Props = {};
+
+const TextInputStaging = (props: Props) => {
+	return (
+		<StagingLayout>
+			<TextArea placeholder="해야하는 일들을 쏟아내보세요." />
+			<BtnWrapper>
+				<TmpBtn />
+				<TmpBtn />
+			</BtnWrapper>
+		</StagingLayout>
+	);
+};
+const StagingLayout = styled.div`
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+	box-sizing: border-box;
+	width: 31rem;
+	height: 7.4rem;
+	padding: 0.8rem;
+
+	border: solid 1px ${({ theme }) => theme.palette.GREY_02};
+	border-radius: 8px;
+`;
+
+const TextArea = styled.textarea`
+	width: 100%;
+	height: 100%;
+
+	border: none;
+
+	${({ theme }) => theme.fontTheme.LABEL_03};
+	&:focus {
+		outline: none;
+	}
+`;
+
+const BtnWrapper = styled.div`
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	width: 100%;
+	height: fit-content;
+`;
+
+/** 임시 버튼 */
+const TmpBtn = styled.div`
+	width: 5rem;
+	height: 2.2rem;
+
+	background-color: ${({ theme }) => theme.palette.GREY_04};
+`;
+export default TextInputStaging;
diff --git a/src/components/common/textbox/TextInputTime.tsx b/src/components/common/textbox/TextInputTime.tsx
new file mode 100644
index 00000000..52fc1450
--- /dev/null
+++ b/src/components/common/textbox/TextInputTime.tsx
@@ -0,0 +1,50 @@
+import styled from '@emotion/styled';
+
+import Icons from '@/assets/svg/index';
+
+interface TextInputTimeProps {
+	time: 'start' | 'end' | 'total';
+}
+
+const TextInputTime = ({ time }: TextInputTimeProps) => {
+	const isTotalTime = time === 'total';
+	return (
+		<InputTimeLayout time={time}>
+			{time === 'end' && <ArrowIcon />}
+			<InputTimeStyle type="text" time={time} maxLength={isTotalTime ? 2 : 10} />
+			{isTotalTime && <MinuteTxt>분</MinuteTxt>}
+		</InputTimeLayout>
+	);
+};
+const InputTimeLayout = styled.div<{ time: string }>`
+	display: flex;
+	align-items: center;
+	width: ${({ time }) => (time === 'total' ? '3.6rem' : '11.5rem')};
+	height: 3.2rem;
+	padding: 0.4rem 1rem;
+
+	${({ theme }) => theme.fontTheme.BODY_02};
+	background-color: ${({ theme, time }) => (time !== 'total' ? theme.palette.GRAY_DISABLED : theme.palette.WITHE)};
+	border-radius: 8px;
+`;
+const ArrowIcon = styled(Icons.Icn_arrow_narrow_right)`
+	width: 1.4rem;
+	height: 1.4rem;
+`;
+const MinuteTxt = styled.p`
+	${({ theme }) => theme.fontTheme.BODY_02};
+	padding-left: 0.4rem;
+`;
+const InputTimeStyle = styled.input<{ time: string }>`
+	width: ${({ time }) => (time === 'total' ? '3.6rem' : '100%')};
+	height: 100%;
+
+	background-color: ${({ theme, time }) => (time === 'total' ? theme.palette.GRAY_DISABLED : 'transparent')};
+	border: none;
+	border-radius: 8px;
+
+	&:focus {
+		outline: none;
+	}
+`;
+export default TextInputTime;
diff --git a/src/components/common/textbox/TextInputTitle.tsx b/src/components/common/textbox/TextInputTitle.tsx
new file mode 100644
index 00000000..d6f49294
--- /dev/null
+++ b/src/components/common/textbox/TextInputTitle.tsx
@@ -0,0 +1,22 @@
+import styled from '@emotion/styled';
+
+import { SizeType } from '@/types/textInputType';
+
+const TextInputTitle = ({ type }: SizeType) => {
+	return <TextInputTitleLayout placeholder="제목 추가" type={type} />;
+};
+const TextInputTitleLayout = styled.input<{ type: string }>`
+	${({ theme }) => theme.fontTheme.BODY_02};
+	display: flex;
+	width: ${({ type }) => (type === 'long' ? '34.8rem' : '30.4rem')};
+	height: 4.8rem;
+	padding: 1.2rem;
+
+	border: 1px solid ${({ theme }) => theme.palette.GREY_01};
+	border-radius: 5px;
+
+	&:focus {
+		outline: none;
+	}
+`;
+export default TextInputTitle;
diff --git a/src/components/common/textbox/TextboxDailydate.tsx b/src/components/common/textbox/TextboxDailydate.tsx
new file mode 100644
index 00000000..c023ad6c
--- /dev/null
+++ b/src/components/common/textbox/TextboxDailydate.tsx
@@ -0,0 +1,42 @@
+import styled from '@emotion/styled';
+
+import { SizeType } from '@/types/textInputType';
+
+import getNameOfDay from '@/utils/getNameOfDay';
+
+const TextboxDailydate = ({ type }: SizeType) => {
+	const today = new Date();
+	const date = today.getDate();
+	const dayOfTheWeek = today.getDay();
+
+	return (
+		<DailydateLayout type={type}>
+			<DailydateContainer>
+				<DateText>{date}일</DateText>
+				{/* CAPTION_02 추가 후 수정 필요 */}
+				<DayText>{getNameOfDay(dayOfTheWeek)}</DayText>
+			</DailydateContainer>
+		</DailydateLayout>
+	);
+};
+
+const DailydateLayout = styled.div<{ type: string }>`
+	display: flex;
+	align-items: center;
+	width: ${({ type }) => (type === 'long' ? '84rem' : '53.2rem')};
+	height: 5.6rem;
+	padding: 4px 8px;
+`;
+const DailydateContainer = styled.div`
+	display: flex;
+	gap: 1.2rem;
+	align-items: baseline;
+`;
+const DateText = styled.h1`
+	${({ theme }) => theme.fontTheme.HEADLINE_01};
+`;
+const DayText = styled.p`
+	${({ theme }) => theme.fontTheme.CAPTION_01};
+	color: ${({ theme }) => theme.palette.GREY_04};
+`;
+export default TextboxDailydate;
diff --git a/src/components/common/textbox/TextboxInput.tsx b/src/components/common/textbox/TextboxInput.tsx
new file mode 100644
index 00000000..e544e492
--- /dev/null
+++ b/src/components/common/textbox/TextboxInput.tsx
@@ -0,0 +1,75 @@
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+
+import Icons from '@/assets/svg/index';
+
+import { theme } from '@/styles/theme';
+
+interface TextboxInputProps {
+	variant: 'date' | 'time' | 'smallDate';
+}
+const TextboxInput = ({ variant }: TextboxInputProps) => {
+	return (
+		<InputContainer variant={variant}>
+			{variant === 'time' && <ClockIcon />}
+			<StyledInput
+				type="text"
+				placeholder={variant === 'time' ? '시간 없음' : '2024.07.11'}
+				maxLength={10}
+				variant={variant}
+			/>
+		</InputContainer>
+	);
+};
+const smallDateStyle = css`
+	width: 7.5rem;
+	padding: 0;
+`;
+const smallDateInputStyle = css`
+	padding: 0;
+
+	text-align: center;
+
+	&:focus {
+		outline: solid 1px ${theme.palette.BLUE_DEFAULT};
+	}
+`;
+const InputContainer = styled.div<{ variant: 'date' | 'time' | 'smallDate' }>`
+	display: flex;
+	gap: 0.5rem;
+	align-items: center;
+	width: 15.4rem;
+	height: 2.6rem;
+	padding: 0.3rem 1rem;
+
+	background-color: ${({ theme }) => theme.palette.GRAY_DISABLED};
+	border-radius: 8px;
+
+	&:focus-within {
+		background-color: ${({ theme }) => theme.palette.BLUE_DISABLED};
+	}
+
+	${({ variant }) => variant === 'smallDate' && smallDateStyle}
+`;
+const StyledInput = styled.input<{ variant: 'date' | 'time' | 'smallDate' }>`
+	width: 100%;
+	height: 100%;
+
+	${({ theme }) => theme.fontTheme.CAPTION_01};
+	background-color: transparent;
+	border: none;
+	border-radius: 8px;
+
+	&:focus {
+		outline: none;
+	}
+
+	${({ variant }) => variant === 'smallDate' && smallDateInputStyle}
+`;
+
+const ClockIcon = styled(Icons.Icn_clock)`
+	width: 1.4rem;
+	height: 1.4rem;
+`;
+
+export default TextboxInput;
diff --git a/src/pages/Today.tsx b/src/pages/Today.tsx
index 703cb184..53993d5c 100644
--- a/src/pages/Today.tsx
+++ b/src/pages/Today.tsx
@@ -1,7 +1,31 @@
+import TextInputDesc from '@/components/common/textbox/TextInputDesc';
+import TextInputStaging from '@/components/common/textbox/TextInputStaging';
+import TextInputTime from '@/components/common/textbox/TextInputTime';
+import TextInputTitle from '@/components/common/textbox/TextInputTitle';
+import TextboxDailydate from '@/components/common/textbox/TextboxDailydate';
+import TextboxInput from '@/components/common/textbox/TextboxInput';
+
 type Props = {};
 
 const Today = (props: Props) => {
-	return <div>Today</div>;
+	return (
+		<div>
+			Today
+			<TextboxInput variant="date" />
+			<TextboxInput variant="time" />
+			<TextboxInput variant="smallDate" />
+			<TextInputTitle type="long" />
+			<TextInputTitle type="short" />
+			<TextInputDesc type="long" />
+			<TextInputDesc type="short" />
+			<TextboxDailydate type="long" day="weekday" />
+			<TextboxDailydate type="short" day="weekday" />
+			<TextInputTime time="start" />
+			<TextInputTime time="end" />
+			<TextInputTime time="total" />
+			<TextInputStaging />
+		</div>
+	);
 };
 
 export default Today;
diff --git a/src/types/textInputType.ts b/src/types/textInputType.ts
new file mode 100644
index 00000000..0c259973
--- /dev/null
+++ b/src/types/textInputType.ts
@@ -0,0 +1,3 @@
+export interface SizeType {
+	type: 'long' | 'short';
+}
diff --git a/src/utils/getNameOfDay.ts b/src/utils/getNameOfDay.ts
new file mode 100644
index 00000000..292159c7
--- /dev/null
+++ b/src/utils/getNameOfDay.ts
@@ -0,0 +1,24 @@
+//0:일, 1:월, 2:화, 3:수, 4:목, 5:금, 6:토
+/** 0-6 number를 요일로 변환 */
+const getNameOfDay = (dayOfTheWeek: number) => {
+	switch (dayOfTheWeek) {
+		case 0:
+			return 'SUNDAY';
+		case 1:
+			return 'MONDAY';
+		case 2:
+			return 'TUESDAY';
+		case 3:
+			return 'WEDNESDAY';
+		case 4:
+			return 'THURSDAY';
+		case 5:
+			return 'FRIDAY';
+		case 6:
+			return 'SATURDAY';
+		default:
+			return 'UNKNOWN';
+	}
+};
+
+export default getNameOfDay;
diff --git a/yarn.lock b/yarn.lock
index 57c918f3..d59a6bb6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1639,7 +1639,6 @@
   resolved "https://registry.yarnpkg.com/@pkgr/core/-/core-0.1.1.tgz#1ec17e2edbec25c8306d424ecfbf13c7de1aaa31"
   integrity sha512-cq8o4cWH0ibXh9VGi5P20Tu9XF/0fFXl9EUinr9QfTM7a7p0oTA4iJRCQWppXR1Pg8dSM0UCItCkPwsk9qWWYA==
 
-
 "@radix-ui/primitive@1.1.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@radix-ui/primitive/-/primitive-1.1.0.tgz#42ef83b3b56dccad5d703ae8c42919a68798bbe2"
@@ -1761,14 +1760,12 @@
   resolved "https://registry.yarnpkg.com/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.0.tgz#3c2c8ce04827b26a39e442ff4888d9212268bd27"
   integrity sha512-+FPE0rOdziWSrH9athwI1R0HDVbWlEhd+FR+aSDk4uWGmSJ9Z54sdZVDQPZAinJhJXwfT+qnj969mCsT2gfm5w==
 
-"@rollup/pluginutils@^5.0.2", "@rollup/pluginutils@^5.0.5":
-
 "@remix-run/router@1.17.1":
   version "1.17.1"
   resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.17.1.tgz#bf93997beb81863fde042ebd05013a2618471362"
   integrity sha512-mCOMec4BKd6BRGBZeSnGiIgwsbLGp3yhVqAD8H+PxiRNEHgDpZb8J1TnrSDlg97t0ySKMQJTHCWBCmBpSmkF6Q==
 
-"@rollup/pluginutils@^5.0.5":
+"@rollup/pluginutils@^5.0.2", "@rollup/pluginutils@^5.0.5":
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-5.1.0.tgz#7e53eddc8c7f483a4ad0b94afb1f7f5fd3c771e0"
   integrity sha512-XTIWOPPcpvyKI6L1NHo0lFlCyznUEyPmPY1mc3KpPVDYulHSTvyeLNVW00QTLIAFNhR3kYnJTQHeGqU4M3n09g==
@@ -7106,7 +7103,6 @@ react-refresh@^0.14.2:
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.14.2.tgz#3833da01ce32da470f1f936b9d477da5c7028bf9"
   integrity sha512-jCvmsr+1IUSMUyzOkRcvnVbX3ZYC6g9TDrDbFuFmRDq7PD4yaGbLKNQL6k2jnArV8hjYxh7hVhAZB6s9HDGpZA==
 
-
 react-remove-scroll-bar@^2.3.4:
   version "2.3.6"
   resolved "https://registry.yarnpkg.com/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.6.tgz#3e585e9d163be84a010180b18721e851ac81a29c"
@@ -7126,17 +7122,6 @@ react-remove-scroll@2.5.7:
     use-callback-ref "^1.3.0"
     use-sidecar "^1.1.2"
 
-react-style-singleton@^2.2.1:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/react-style-singleton/-/react-style-singleton-2.2.1.tgz#f99e420492b2d8f34d38308ff660b60d0b1205b4"
-  integrity sha512-ZWj0fHEMyWkHzKYUr2Bs/4zU6XLmq9HsgBURm7g5pAVfyn49DgUiNgY2d4lXRlYSiCif9YBGpQleewkcqddc7g==
-  dependencies:
-    get-nonce "^1.0.0"
-    invariant "^2.2.4"
-    tslib "^2.0.0"
-
-"react@^16.8.0 || ^17.0.0 || ^18.0.0", react@^18.3.1:
-
 react-router-dom@^6.24.1:
   version "6.24.1"
   resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.24.1.tgz#b1a22f7d6c5a1bfce30732bd370713f991ab4de4"
@@ -7152,7 +7137,16 @@ react-router@6.24.1:
   dependencies:
     "@remix-run/router" "1.17.1"
 
-react@^18.3.1:
+react-style-singleton@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/react-style-singleton/-/react-style-singleton-2.2.1.tgz#f99e420492b2d8f34d38308ff660b60d0b1205b4"
+  integrity sha512-ZWj0fHEMyWkHzKYUr2Bs/4zU6XLmq9HsgBURm7g5pAVfyn49DgUiNgY2d4lXRlYSiCif9YBGpQleewkcqddc7g==
+  dependencies:
+    get-nonce "^1.0.0"
+    invariant "^2.2.4"
+    tslib "^2.0.0"
+
+"react@^16.8.0 || ^17.0.0 || ^18.0.0", react@^18.3.1:
   version "18.3.1"
   resolved "https://registry.yarnpkg.com/react/-/react-18.3.1.tgz#49ab892009c53933625bd16b2533fc754cab2891"
   integrity sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==