[FEAT] : 선거 결과 화면 구현

package.json

@@ -22,6 +22,7 @@
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-hook-form": "^7.56.4",
+    "react-icons": "^5.5.0",
     "tailwind-merge": "^3.3.0",
     "tailwindcss": "^4.1.7"
   },

src/app/global.css

@@ -26,6 +26,7 @@
 
   --spacing-normal: 20px;
   --spacing-normal-half: 10px;
+  --spacing-mt: 24px;
 
   --radius-lg: 20px;
   --radius-md: 12px;
@@ -86,6 +87,18 @@ input[type='number'] {
     scrollbar-width: none;
   }
 
+  .overlay {
+    position: fixed;
+    inset: 0;
+    z-index: 300;
+    background-color: rgba(0, 0, 0, 0);
+    transition: background-color 0.3s ease-in-out;
+  }
+
+  .overlay-visible {
+    background-color: rgba(0, 0, 0, 0.2);
+  }
+
   .logo {
     font-family: Fredoka;
   }
@@ -105,4 +118,12 @@ input[type='number'] {
   .shadow-noticeItem {
     box-shadow: 2px 8px 40px -3.034px rgba(50, 65, 96, 0.1);
   }
+
+  .shadow-resultItem {
+    box-shadow: 8px 8px 30px 0px rgba(55, 127, 248, 0.16);
+  }
+
+  .shadow-resultContent {
+    box-shadow: 11px 8px 30px rgba(55, 127, 248, 0.16);
+  }
 }

src/app/stackflow/Stack.tsx

@@ -6,10 +6,19 @@ import { LoginScreen } from '@/screen/login/ui';
 import { HomeScreen } from '@/screen/home/ui';
 import { NoticeScreen } from '@/screen/notice/ui';
 import { NoticeContentScreen } from '@/screen/notice-content/ui';
+import { VoteResultScreen } from '@/screen/vote-result/ui';
+import { VoteResultContentScreen } from '@/screen/vote-result-content/ui';
 
 export const { Stack, useFlow } = stackflow({
   transitionDuration: 350,
-  activities: { NoticeScreen, NoticeContentScreen, LoginScreen, HomeScreen },
+  activities: {
+    NoticeScreen,
+    NoticeContentScreen,
+    VoteResultScreen,
+    VoteResultContentScreen,
+    LoginScreen,
+    HomeScreen,
+  },
   plugins: [
     basicRendererPlugin(),
     basicUIPlugin({

src/assets/icon/index.ts

@@ -3,5 +3,13 @@ import ResultIcon from './icon-result.svg';
 import NoticeIcon from './icon-notice.svg';
 import NotificationIcon from './icon-notification.svg';
 import MessageIcon from './icon-message.svg';
+import VoteIcon from './icon-vote.svg';
 
-export { UserIcon, ResultIcon, NoticeIcon, NotificationIcon, MessageIcon };
+export {
+  UserIcon,
+  ResultIcon,
+  NoticeIcon,
+  NotificationIcon,
+  MessageIcon,
+  VoteIcon,
+};

src/features/notice/ui/NoticeItem.tsx

@@ -12,7 +12,7 @@ export default function NoticeItem({ id, title, type, date }: Notice) {
   return (
     <button
       name={`${id}`}
-      className="flex w-full cursor-pointer items-center overflow-hidden px-5 py-6 focus:outline-none"
+      className="flex w-full cursor-pointer items-center overflow-hidden py-6 focus:outline-none"
       onClick={() =>
         push(PATH.NOTICE_CONTENT, { notice: { id, title, type, date } })
       }

src/screen/notice-content/ui/NoticeContentScreen.tsx

@@ -11,11 +11,7 @@ const NoticeContentScreen: ActivityComponentType<{ notice: Notice }> = ({
   params: { notice: Notice };
 }) => {
   return (
-    <AppScreen
-      preventSwipeBack
-      backgroundColor="#fff"
-      appBar={TitleAppBar('공지사항')}
-    >
+    <AppScreen backgroundColor="#fff" appBar={TitleAppBar('공지사항')}>
       <NoticeContentContainer title={params.notice.title} />
     </AppScreen>
   );

src/screen/notice/ui/NoticeScreen.tsx

@@ -5,11 +5,7 @@ import { NoticeContainer } from '@/widgets/notice/ui';
 
 export default function NoticeScreen() {
   return (
-    <AppScreen
-      preventSwipeBack
-      backgroundColor="#fff"
-      appBar={TitleAppBar('공지사항')}
-    >
+    <AppScreen backgroundColor="#fff" appBar={TitleAppBar('공지사항')}>
       <NoticeContainer />
     </AppScreen>
   );

src/screen/vote-result-content/ui/VoteResultContentScreen.tsx

@@ -0,0 +1,14 @@
+import { AppScreen } from '@stackflow/plugin-basic-ui';
+
+import { TitleAppBar } from '@/shared/ui';
+import { VoteResultContentContainer } from '@/widgets/vote-result-content/ui';
+
+export default function VoteResultContentScreen() {
+  return (
+    <>
+      <AppScreen backgroundColor="#fff" appBar={TitleAppBar()}>
+        <VoteResultContentContainer />
+      </AppScreen>
+    </>
+  );
+}

src/screen/vote-result-content/ui/index.ts

@@ -0,0 +1 @@
+export { default as VoteResultContentScreen } from './VoteResultContentScreen';

src/screen/vote-result/ui/VoteResultScreen.tsx

@@ -0,0 +1,23 @@
+import { useState } from 'react';
+import { AppScreen } from '@stackflow/plugin-basic-ui';
+
+import { TitleAppBar } from '@/shared/ui';
+import {
+  VoteResultBottomSheet,
+  VoteResultContainer,
+} from '@/widgets/vote-result/ui';
+
+export default function VoteResultScreen() {
+  const [selectedYear, setSelectedYear] = useState<number>(2024);
+  return (
+    <>
+      <AppScreen backgroundColor="#fff" appBar={TitleAppBar('선거결과')}>
+        <VoteResultContainer selectedYear={selectedYear} />
+      </AppScreen>
+      <VoteResultBottomSheet
+        selectedYear={selectedYear}
+        setSelectedYear={setSelectedYear}
+      />
+    </>
+  );
+}

src/screen/vote-result/ui/index.ts

@@ -0,0 +1 @@
+export { default as VoteResultScreen } from './VoteResultScreen';

src/shared/atom/bottomSheet.ts

@@ -0,0 +1,33 @@
+import { atom } from 'jotai';
+
+import type { BottomSheetItem } from '../types';
+import { BOTTOM_SHEET } from '../constants';
+
+type BottomSheetInfo = {
+  [key in BottomSheetItem]: { isOpen: boolean; isVisible: boolean };
+};
+
+const bottomSheet = Object.fromEntries(
+  Object.keys(BOTTOM_SHEET).map(key => [
+    key,
+    { isOpen: false, isVisible: false },
+  ]),
+) as BottomSheetInfo;
+
+export const bottomSheetAtom = atom<BottomSheetInfo>(bottomSheet);
+
+export const updateBottomSheet = atom(
+  null,
+  (
+    get,
+    set,
+    update: { key: BottomSheetItem; isOpen: boolean; isVisible: boolean },
+  ) => {
+    const currentBottomSheet = get(bottomSheetAtom);
+    const updatedBottomSheet = {
+      ...currentBottomSheet,
+      [update.key]: { isOpen: update.isOpen, isVisible: update.isVisible },
+    };
+    set(bottomSheetAtom, updatedBottomSheet);
+  },
+);

src/shared/atom/index.ts

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

src/shared/constants/bottomSheet.ts

@@ -0,0 +1,3 @@
+export const BOTTOM_SHEET = {
+  VOTE_RESULT: 'VoteResultBottomSheet',
+} as const;

src/shared/constants/index.ts

@@ -1 +1,2 @@
 export * from './path';
+export * from './bottomSheet';

src/shared/constants/path.ts

@@ -3,4 +3,6 @@ export const PATH = {
   LOGIN: 'LoginScreen',
   NOTICE: 'NoticeScreen',
   NOTICE_CONTENT: 'NoticeContentScreen',
+  VOTE_RESULT: 'VoteResultScreen',
+  VOTE_RESULT_CONTENT: 'VoteResultContentScreen',
 } as const;

src/shared/hook/index.ts

@@ -0,0 +1 @@
+export { default as useBottomSheet } from './useBottomSheet';

src/shared/hook/useBottomSheet.ts

@@ -0,0 +1,34 @@
+import { useAtomValue, useSetAtom } from 'jotai';
+
+import { bottomSheetAtom, updateBottomSheet } from '../atom';
+import type { BottomSheetItem } from '../types';
+
+export default function useBottomSheet() {
+  const bottomSheet = useAtomValue(bottomSheetAtom);
+  const setBottomSheet = useSetAtom(updateBottomSheet);
+
+  const bottomSheetState = (key: BottomSheetItem) =>
+    bottomSheet[key] || { isOpen: false };
+
+  const openBottomSheet = (key: BottomSheetItem) => {
+    setBottomSheet({ key, isOpen: true, isVisible: false });
+    setTimeout(
+      () => setBottomSheet({ key, isOpen: true, isVisible: true }),
+      100,
+    );
+  };
+
+  const closeBottomSheet = (key: BottomSheetItem) => {
+    setBottomSheet({ key, isOpen: true, isVisible: false });
+    setTimeout(
+      () => setBottomSheet({ key, isOpen: false, isVisible: false }),
+      300,
+    );
+  };
+
+  return {
+    bottomSheetState,
+    openBottomSheet,
+    closeBottomSheet,
+  };
+}

src/shared/types/bottomSheet.ts

@@ -0,0 +1,3 @@
+import { BOTTOM_SHEET } from '../constants';
+
+export type BottomSheetItem = (typeof BOTTOM_SHEET)[keyof typeof BOTTOM_SHEET];

src/shared/types/index.ts

@@ -1 +1,2 @@
 export * from './path';
+export * from './bottomSheet';

src/shared/ui/AppBar.tsx

@@ -3,7 +3,7 @@
 
 const baseStyle = { height: '58px', border: false };
 
 export const BasicAppBar = {
   ...baseStyle,
   backgroundImage: `url(${LoginBg})`,
   renderLeft: () => (
@@ -11,7 +11,7 @@
   ),
 };
 
 export const HomeAppBar = {
   ...baseStyle,
   backgroundImage: `url(${HomeBg})`,
   renderLeft: () => (
@@ -20,8 +20,8 @@
   renderRight: () => <img src={UserIcon} alt="user" className="mr-[4px]" />,
 };
 
-export const TitleAppBar = (title: string) => ({
+export const TitleAppBar = (title?: string) => ({
   ...baseStyle,
   backgroundColor: '#fff',
-  title: title,
+  title: title || '',
 });

src/shared/ui/BottomSheet.tsx

@@ -0,0 +1,34 @@
+import { type ReactNode } from 'react';
+
+import { cn } from '../utils';
+import type { BottomSheetItem } from '../types';
+import { useBottomSheet } from '../hook';
+
+interface BottomSheetProps {
+  children: ReactNode;
+  sheetKey: BottomSheetItem;
+}
+
+export default function BottomSheet({ children, sheetKey }: BottomSheetProps) {
+  const { closeBottomSheet, bottomSheetState } = useBottomSheet();
+  const { isVisible } = bottomSheetState(sheetKey);
+  const onClose = () => closeBottomSheet(sheetKey);
+
+  return (
+    <>
+      <div
+        className={cn('overlay', isVisible && 'overlay-visible')}
+        onClick={onClose}
+      />
+      <div
+        className={cn(
+          'fixed bottom-0 left-0 z-400 flex h-fit w-full flex-col rounded-t-[32px] bg-white px-[20px] pt-8 pb-18 shadow-lg transition-transform duration-300',
+          isVisible ? 'translate-y-0' : 'translate-y-full',
+          isVisible ? 'box-shadow-bottom-sheet block' : '',
+        )}
+      >
+        {children}
+      </div>
+    </>
+  );
+}

src/shared/ui/index.ts

@@ -1,3 +1,4 @@
 export * from './AppBar';
 export { default as Button } from './Button';
 export { default as Input } from './Input';
+export { default as BottomSheet } from './BottomSheet';

src/widgets/home/ui/HomeContainer.tsx

@@ -22,7 +22,7 @@ export default function HomeContainer() {
           title="선거결과"
           description="역대 선거결과를 확인해보세요"
           icon={ResultIcon}
-          to={PATH.HOME}
+          to={PATH.VOTE_RESULT}
         />
         <ServiceButton
           title="공지사항"

src/widgets/notice-content/ui/NoticeContentContainer.tsx

@@ -4,7 +4,7 @@ export default function NoticeContainer({ title }: { title: string }) {
 
   return (
     <div className="p-normal scrollbar-hide flex size-full flex-col overflow-scroll">
-      <p className="mt-6 text-lg font-semibold">{title}</p>
+      <p className="mt-mt text-lg font-semibold">{title}</p>
       <p className="mb-[14px] text-sm font-normal tracking-wide text-[#999]">
         2025.03.19
       </p>