[FEAT] : 홈 화면 구현

package.json

@@ -17,6 +17,7 @@
     "@tailwindcss/vite": "^4.1.7",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "framer-motion": "^12.12.1",
     "jotai": "^2.12.4",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",

src/app/global.css

@@ -10,6 +10,7 @@
   --color-s: #767676;
   --color-sd: #333;
   --color-sl: #dadada;
+  --color-sxl: #f5f5f5;
 
   --color-grad1: #5ba5f8;
   --color-grad2: #7c81ff;
@@ -20,7 +21,7 @@
   --text-xl: 20px;
 
   --text-lg: 18px;
-  --text-md: 16px;
+  --text-mid: 16px;
   --text-sm: 14px;
 
   --spacing-normal: 20px;
@@ -38,8 +39,8 @@
 
 :root {
   font-family:
-    Pretendard,
     'Pretendard Variable',
+    'Pretendard',
     -apple-system,
     BlinkMacSystemFont,
     system-ui,
@@ -55,6 +56,7 @@
     sans-serif;
   font-size: 16px;
   color: #111;
+  letter-spacing: -0.48px;
 }
 
 /* Chrome, Safari, Edge, Opera */
@@ -91,4 +93,12 @@ input[type='number'] {
   .shadow-login {
     box-shadow: 0px 4px 20px 0px rgba(55, 127, 248, 0.04);
   }
+
+  .shadow-card {
+    box-shadow: 8px 8px 30px rgba(55, 127, 248, 0.1);
+  }
+
+  .shadow-button {
+    box-shadow: 4px 4px 20px 0px rgba(55, 127, 248, 0.1);
+  }
 }

src/app/stackflow/Stack.tsx

@@ -1,11 +1,13 @@
 import { basicUIPlugin } from '@stackflow/plugin-basic-ui';
 import { basicRendererPlugin } from '@stackflow/plugin-renderer-basic';
 import { stackflow } from '@stackflow/react';
+
 import { LoginScreen } from '@/screen/login/ui';
+import { HomeScreen } from '@/screen/home/ui';
 
 export const { Stack, useFlow } = stackflow({
   transitionDuration: 350,
-  activities: { LoginScreen },
+  activities: { LoginScreen, HomeScreen },
   plugins: [
     basicRendererPlugin(),
     basicUIPlugin({

src/assets/icon/index.ts

@@ -0,0 +1,5 @@
+import UserIcon from './icon-user.png';
+import ResultIcon from './icon-result.svg';
+import NoticeIcon from './icon-notice.svg';
+
+export { UserIcon, ResultIcon, NoticeIcon };

src/assets/image/index.ts

@@ -1,3 +1,4 @@
 import LoginBg from './bg-login.png';
+import HomeBg from './bg-home.png';
 
-export { LoginBg };
+export { LoginBg, HomeBg };

src/features/home/mock/card.ts

@@ -0,0 +1,32 @@
+import type { CardProps } from '@/features/home/types';
+
+export const CARD_MOCK: CardProps[] = [
+  {
+    id: 1,
+    title: '2025 총학생회 선거',
+    campus: '수원캠',
+    status: '진행중',
+    date: '2024.04.15 - 2024.04.16',
+  },
+  {
+    id: 2,
+    title: '제 2회 총무 선거',
+    campus: '수원캠',
+    status: '진행중',
+    date: '2024.04.15 - 2024.04.16',
+  },
+  {
+    id: 3,
+    title: '제 3회 기획 선거',
+    campus: '수원캠',
+    status: '진행중',
+    date: '2024.04.15 - 2024.04.16',
+  },
+  {
+    id: 4,
+    title: '제 3회 기획 선거',
+    campus: '수원캠',
+    status: '진행중',
+    date: '2024.04.15 - 2024.04.16',
+  },
+];

src/features/home/mock/index.ts

@@ -0,0 +1 @@
+export * from './card';

src/features/home/types/card.ts

@@ -0,0 +1,7 @@
+export type CardProps = {
+  id: number;
+  title: string;
+  campus: string;
+  status: string;
+  date: string;
+};

src/features/home/types/index.ts

@@ -0,0 +1 @@
+export * from './card';

src/features/home/ui/Card.tsx

@@ -0,0 +1,33 @@
+import { Button } from '@/shared/ui';
+
+interface CardProps {
+  campus: string;
+  status: string;
+  title: string;
+  date: string;
+}
+
+export default function Card({ campus, status, title, date }: CardProps) {
+  return (
+    <>
+      <div className="mb-5 flex w-full justify-between">
+        <div className="flex gap-x-1">
+          <div className="bg-m/10 text-m rounded-full px-[12px] py-[6px] text-[13px] font-light">
+            {campus}
+          </div>
+          <div className="bg-m/10 text-m rounded-full px-[12px] py-[6px] text-[13px] font-light">
+            {status}
+          </div>
+        </div>
+        <div className="bg-sxl flex items-center rounded-full p-1.5 text-sm text-[#999]">
+          D-7
+        </div>
+      </div>
+      <p className="text-md mb-2.5 text-2xl font-semibold">{title}</p>
+      <p className="text-s mb-[34px] font-normal">{date}</p>
+      <Button intent="gradient" size="md">
+        투표하기
+      </Button>
+    </>
+  );
+}