Merge pull request #15 from junction-asia-2023/feat/home-preview

feat(home): Add home active

src/features/home/Container.tsx

@@ -3,6 +3,10 @@ import Profile from './components/Profile';
 import './home.scss';
 import Active from './components/Active';
 import GrayBar from './components/GrayBar';
+import Preview from './components/Preview';
+import Schedule from './components/Schedule';
+import Event from './components/Event';
+import Footer from './components/Footer';
 
 const HomeContainer = () => {
   useHomeContainer();
@@ -12,6 +16,12 @@ const HomeContainer = () => {
       <Profile />
       <GrayBar />
       <Active />
+      <Preview />
+      <GrayBar />
+      <Schedule />
+      <Event />
+      <GrayBar />
+      <Footer />
     </>
   );
 };

src/features/home/components/Active.tsx

@@ -19,8 +19,8 @@ const Active: FunctionComponent = () => {
         <div className="title">Active</div>
         <div className="description">Expressing myself</div>
       </div>
-      <div className="next">
-        <img className="next-icon" src={rightIcon} alt="next" />
+      <div>
+        <img src={rightIcon} alt="next" />
       </div>
     </section>
   );

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 (
+    <section className="preview-box" onClick={handleEventClick}>
+      <div className="icon-box">
+        <img className="icon" src={eventIcon} alt="event icon" />
+      </div>
+      <div className="content">
+        <div className="title">Event</div>
+      </div>
+      <div>
+        <img src={rightIcon} alt="next" />
+      </div>
+    </section>
+  );
+};
+
+export default Event;

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 (
+    <div className="footer-box">
+      <div className="description" onClick={handleDescriptionClick}>
+        Do you need to modify information?
+      </div>
+    </div>
+  );
+};
+
+export default Footer;

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 (
+    <section className="preview-box" onClick={handlePreviewClick}>
+      <div className="icon-box">
+        <img className="icon" src={previewIcon} alt="preview icon" />
+      </div>
+      <div className="content">
+        <div className="title">CardMe Preview</div>
+      </div>
+      <div>
+        <img src={rightIcon} alt="next" />
+      </div>
+    </section>
+  );
+};
+
+export default Preview;

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 (
+    <section className="preview-box" onClick={handleScheduleClick}>
+      <div className="icon-box">
+        <img className="icon" src={scheduleIcon} alt="schedule icon" />
+      </div>
+      <div className="content">
+        <div className="title">Schedule</div>
+      </div>
+      <div>
+        <img src={rightIcon} alt="next" />
+      </div>
+    </section>
+  );
+};
+
+export default Schedule;

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;
 	}
 }

src/features/shared/constants/url.ts

@@ -2,4 +2,7 @@ export enum URL {
   home = '/',
   login = '/login',
   setting = '/setting',
+  preview = '/preview',
+  schedule = '/schedule',
+  event = '/event',
 }