-
+
+
);
diff --git a/src/features/home/components/Event.tsx b/src/features/home/components/Event.tsx
new file mode 100644
index 0000000..d9b4a8b
--- /dev/null
+++ b/src/features/home/components/Event.tsx
@@ -0,0 +1,28 @@
+import { FunctionComponent } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import rightIcon from '/svg/right.svg';
+import eventIcon from '/svg/event.svg';
+
+import { URL } from '../../shared/constants/url';
+
+const Event: FunctionComponent = () => {
+ const navigate = useNavigate();
+ const handleEventClick = () => navigate(URL.event);
+
+ return (
+
+
+
+
+
+
+ );
+};
+
+export default Event;
diff --git a/src/features/home/components/Footer.tsx b/src/features/home/components/Footer.tsx
new file mode 100644
index 0000000..2b0f39c
--- /dev/null
+++ b/src/features/home/components/Footer.tsx
@@ -0,0 +1,17 @@
+import { FunctionComponent } from 'react';
+
+const Footer: FunctionComponent = () => {
+ const handleDescriptionClick = () => {
+ window.location.href = 'https://www.naver.com';
+ };
+
+ return (
+
+
+ Do you need to modify information?
+
+
+ );
+};
+
+export default Footer;
diff --git a/src/features/home/components/Preview.tsx b/src/features/home/components/Preview.tsx
new file mode 100644
index 0000000..56df3a1
--- /dev/null
+++ b/src/features/home/components/Preview.tsx
@@ -0,0 +1,28 @@
+import { FunctionComponent } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import rightIcon from '/svg/right.svg';
+import previewIcon from '/svg/preview.svg';
+
+import { URL } from '../../shared/constants/url';
+
+const Preview: FunctionComponent = () => {
+ const navigate = useNavigate();
+ const handlePreviewClick = () => navigate(URL.preview);
+
+ return (
+
+
+
+
+
+
+ );
+};
+
+export default Preview;
diff --git a/src/features/home/components/Schedule.tsx b/src/features/home/components/Schedule.tsx
new file mode 100644
index 0000000..1e78f1b
--- /dev/null
+++ b/src/features/home/components/Schedule.tsx
@@ -0,0 +1,28 @@
+import { FunctionComponent } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import rightIcon from '/svg/right.svg';
+import scheduleIcon from '/svg/schedule.svg';
+
+import { URL } from '../../shared/constants/url';
+
+const Schedule: FunctionComponent = () => {
+ const navigate = useNavigate();
+ const handleScheduleClick = () => navigate(URL.schedule);
+
+ return (
+
+
+
+
+
+
+ );
+};
+
+export default Schedule;
diff --git a/src/features/home/home.scss b/src/features/home/home.scss
index f5166b2..8b68bc2 100644
--- a/src/features/home/home.scss
+++ b/src/features/home/home.scss
@@ -1,5 +1,37 @@
@import '../shared/style/color';
+@mixin icon-box {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+
+ cursor: pointer;
+
+ height: 72px;
+ padding: 0px 16px;
+ gap: 16px;
+
+ .icon-box {
+ width: 36px;
+ height: 36px;
+ }
+
+ .content {
+ width: 100%;
+ padding: 0px 12px;
+
+ .title {
+ font-weight: 500;
+ line-height: 24px;
+ }
+
+ .description {
+ color: $description-sub;
+ font-size: 14px;
+ }
+ }
+}
+
.profile-box {
display: flex;
flex-direction: column;
@@ -41,35 +73,24 @@
height: 12px;
background-color: $other-area-color;
}
-.active-box {
+.active-box,.preview-box,.event-box,.schedule-box {
+ @include icon-box();
+}
+.footer-box {
display: flex;
+ padding-top: 6px;
+ justify-content: center;
align-items: center;
- justify-content: space-between;
-
- cursor: pointer;
-
- height: 72px;
- padding: 8px 16px;
- gap: 16px;
-
- .icon-box {
- width: 36px;
- height: 36px;
- }
-
- .content {
- // width: 260px;
- width: 100%;
- padding: 0px 12px;
-
- .title {
- font-weight: 500;
- line-height: 24px;
- }
+ background-color: $other-area-color;
+ height: 48px;
- .description {
- color: $description-sub;
- font-size: 14px;
- }
+ .description {
+ cursor: pointer;
+ text-decoration: underline;
+ color: #1D1D6B;
+ font-size: 14px;
+ font-weight: 500;
+ line-height: 24px;
+ letter-spacing: 0em;
}
}
\ No newline at end of file
diff --git a/src/features/shared/constants/url.ts b/src/features/shared/constants/url.ts
index 52b8bb6..1380180 100644
--- a/src/features/shared/constants/url.ts
+++ b/src/features/shared/constants/url.ts
@@ -2,4 +2,7 @@ export enum URL {
home = '/',
login = '/login',
setting = '/setting',
+ preview = '/preview',
+ schedule = '/schedule',
+ event = '/event',
}