Home page commit

src/app/david/home/container/HomeContainer.tsx

@@ -0,0 +1,58 @@
+import { message } from "antd";
+import { useState } from "react";
+import { PageWithModalContentCustomModal } from "~/components/Components/PageWithModalContentCustomModal/PageWithModalContentCustomModal";
+import { HomeTemplate } from "~/components/Templates/Home/HomeTemplate";
+import ModalStore from "~/store/ModalStore";
+
+export const HomeContainer = () => {
+  const [isCustomModalOpen, setIsCustomModalOpen] = useState(false);
+
+  const headerLeftIconClicked = () => {
+    void message.info("can't go back");
+  };
+
+  const headerRightSettingIconClicked = () => {
+    setIsCustomModalOpen(true);
+    console.log("CLicked")
+  };
+
+  const homeTemplateProps: React.ComponentProps<typeof HomeTemplate> = {
+    homeHeaderModuleProps: {
+      headerProps: {
+        title: "Proxima OS",
+        onClickLeftIcon: headerLeftIconClicked,
+        onClickRightIcon: headerRightSettingIconClicked,
+      },
+    },
+    homeContentModuleProps: {
+      image: "/images/mImg.png",
+      text: "Proxima",
+    },
+    homeFooterModuleProps: {
+      title: "HomeFooterModule",
+      images: [
+        "/images/dollar-circle.png",
+        "/images/message.png",
+        "/images/wallet.png",
+        "/images/History.png",
+      ],
+    },
+  };
+
+  const customModalProps = {
+    modalProps: {
+      isModalOpen: isCustomModalOpen,
+      setModalOpen: setIsCustomModalOpen,
+    },
+    title: "Transaction processing",
+    image: "/images/modal Img.png",
+    description: "Uploading your transaction to the node. please wait for a moment... This may take up to 2 minutes.",
+  };
+
+  return (
+    <>
+      <HomeTemplate {...homeTemplateProps} />
+      {isCustomModalOpen && <PageWithModalContentCustomModal {...customModalProps} />}
+    </>
+  );
+};

src/app/david/home/page.tsx

@@ -0,0 +1,8 @@
+"use client";
+import { HomeContainer } from "./container/HomeContainer";
+
+const Home = () => {
+  return <HomeContainer />;
+};
+
+export default Home;

src/app/david/pageWithModal/container/PageWithModalContainer.tsx

@@ -0,0 +1,38 @@
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { PageWithModalTemplate } from "~/components/Templates/PageWithModal/PageWithModalTemplate";
+import ModalStore from "~/store/ModalStore";
+
+export const PageWithModalContainer = () => {
+  const router = useRouter();
+  const [isCustomModalOpen, setIsCustomModalOpen] = useState(false);
+
+  const pagewithmodalTemplateProps: React.ComponentProps<
+    typeof PageWithModalTemplate
+  > = {
+    pageWithModalHeaderModuleProps: {
+      title: "PageWithModalHeaderModule",
+      onClickLeftIcon: () => router.back(),
+    },
+    pageWithModalContentModuleProps: {
+      onOpenSnapshotModal: () =>
+        ModalStore.open("TitleAndContent", {
+          TitleAndContent: {
+            title: "Modal Title",
+            description: "Modal Content",
+          },
+        }),
+      modalProps: {
+        modalProps: {
+          isModalOpen: isCustomModalOpen,
+          setModalOpen: setIsCustomModalOpen,
+        },
+        title: "Custom Modal Title",
+        description: "Custom Modal Description",
+        image: ""
+      },
+    },
+  };
+
+  return <PageWithModalTemplate {...pagewithmodalTemplateProps} />;
+};

src/app/david/pageWithModal/page.tsx

@@ -0,0 +1,8 @@
+"use client";
+import { PageWithModalContainer } from "./container/PageWithModalContainer";
+
+const PageWithModal = () => {
+  return <PageWithModalContainer />;
+};
+
+export default PageWithModal;

src/app/sample/pageWithModal/container/PageWithModalContainer.tsx

@@ -29,6 +29,7 @@ export const PageWithModalContainer = () => {
         },
         title: "Custom Modal Title",
         description: "Custom Modal Description",
+         image: ""
       },
     },
   };

src/components/Atoms/FooterAtom/FooterAtom.tsx

@@ -1,11 +1,22 @@
 type Props = {
   title: string;
+  images?: string[]; // Optional array of image URLs
 };
 
 export const FooterAtom = (props: Props) => {
   return (
-    <div className="flex h-full items-center justify-center bg-[#FFC96F]">
-      <div>{props.title}</div>
+    <div className="flex h-full items-center justify-center bg-[#262626]">
+      {props.images && props.images.length > 0 ? (
+        <div className="flex justify-around w-full h-full items-center">
+          {props.images.map((image, index) => (
+            <div key={index} className={`h-full w-full flex justify-center items-center ${index === 2 ? 'border-t-2 border-[#00EC97]' : ''}`}>
+            <img  src={image} alt={`Footer image ${index + 1}`} className={`w-[21px] h-[21px] text-[#8C8C8C]`} />
+            </div>
+          ))}
+        </div>
+      ) : (
+        <div>{props.title}</div>
+      )}
     </div>
   );
 };

src/components/Atoms/HeaderAtom/HeaderAtom.tsx

@@ -9,24 +9,24 @@ type Props = {
 
 export const HeaderAtom = (props: Props) => {
   return (
-    <div className="relative flex h-full w-full items-center justify-center bg-[#FFC96F]">
+    <div className="relative flex h-full w-full items-center justify-center bg-[#262626]">
       {/* Sample using custom svg */}
       {props.onClickLeftIcon && (
         <div
           className="absolute left-0 z-[1] flex w-[50px] cursor-pointer items-center justify-center"
           onClick={props.onClickLeftIcon}
         >
-          <SVGAtom iconName="arrowLeft" width={20} height={20} color="black" />
+          <SVGAtom iconName="arrowLeft" width={20} height={20} color="#CACACA" />
         </div>
       )}
 
-      <div>{props.title}</div>
+      <div className="text-white text-[16px] font-medium">{props.title}</div>
 
       {/* Sample using Antd icon */}
       {props.onClickRightIcon && (
         <div
-          className="absolute right-0 z-[1] flex w-[50px] cursor-pointer items-center justify-center"
-          onClick={() => console.log("Antd icon clicked")}
+          className="absolute right-0 z-[1] flex w-[50px] cursor-pointer items-center justify-center text-[#CACACA]"
+          onClick={props.onClickRightIcon}
         >
           <SettingOutlined className="!text-gray-header cursor-pointer text-[20px]" />
         </div>

src/components/Atoms/ModalContainer/ModalContainer.tsx

@@ -10,7 +10,7 @@ export const ModalContainer = (props: PropsWithChildren<Props>) => {
   return (
     <div
       className={cn(
-        "relative left-1/2 top-1/2 z-[1] h-fit w-fit translate-x-[-50%] translate-y-[-50%] overflow-hidden rounded-[14px] bg-slate-50 shadow-lg ",
+        "relative left-1/2 top-1/2 z-[1] h-[358px] w-[340px] translate-x-[-50%] translate-y-[-50%] overflow-hidden rounded-[14px] bg-[#2C2D30] shadow-lg ",
         props.className,
       )}
       style={props.style}

src/components/Components/ContentDisplay.tsx/ContentDisplay.tsx

@@ -0,0 +1,17 @@
+type ContentDisplayProps = {
+    image: string;
+    text: string;
+  };
+
+  export const ContentDisplay = (props: ContentDisplayProps) => {
+    return (
+      <div >
+        <b className="text-[28px] text-white">Messages</b>
+        <div className="flex flex-col justify-center items-center w-[65px] h-[93px] mt-[19px]">
+        <img src={props.image} alt="Sample" className="w-[68px] h-[68px]" />
+        <p className="text-[16px] mt-[9px] text-[#CACACA]">{props.text}</p>
+        </div>
+      </div>
+    );
+  };
+

src/components/Components/PageWithModalContentCustomModal/PageWithModalContentCustomModal.tsx

@@ -2,20 +2,24 @@ import { Button } from "antd";
 import Modal from "~/components/Atoms/Modal/Modal";
 
 type Props = {
-  modalProps: React.ComponentProps<typeof Modal>;
+  modalProps: {
+    isModalOpen: boolean; // Ensure this matches your Modal component's expected prop
+    setModalOpen: (isOpen: boolean) => void;
+  };
   title: string;
   description: string;
+  image: string
 };
 
 export const PageWithModalContentCustomModal = (props: Props) => {
+  const { modalProps, title, description, image } = props;
+
   return (
-    <Modal {...props.modalProps}>
+    <Modal isModalOpen={modalProps.isModalOpen} setModalOpen={modalProps.setModalOpen}>
       <div className="flex h-fit w-80 flex-col gap-4 p-8">
-        <h1 className="text-2xl">{props.title}</h1>
-        <p>{props.description}</p>
-        <Button onClick={() => props.modalProps.setModalOpen(false)}>
-          close
-        </Button>
+        <h1 className="text-2xl font-bold text-white">{title}</h1>
+        <img src={image} className="w-full h-full object-contain"/>
+        <p className="text-[16px] text-white">{description}</p>
       </div>
     </Modal>
   );

src/components/Modules/Home/HomeContentModule.tsx

@@ -1,13 +1,24 @@
 import { LinkList } from "~/components/Components/LinkList/LinkList";
+import { ContentDisplay } from "~/components/Components/ContentDisplay.tsx/ContentDisplay";
 
 type Props = {
-  sampleLinks: string[];
+  sampleLinks?: string[]; 
+  image?: string; 
+  text?: string;
 };
 
 export const HomeContentModule = (props: Props) => {
+  if (props.image && props.text) {
+    return (
+      <div className="py-3">
+        <ContentDisplay image={props.image} text={props.text} />
+      </div>
+    );
+  }
+
   return (
     <div className="py-3">
-      <LinkList links={props.sampleLinks} />
+      {props.sampleLinks && <LinkList links={props.sampleLinks} />}
     </div>
   );
 };

src/components/Modules/Home/HomeFooterModule.tsx

@@ -2,8 +2,9 @@ import { FooterAtom } from "~/components/Atoms/FooterAtom/FooterAtom";
 
 type Props = {
   title: string;
+  images?: string[];
 };
 
 export const HomeFooterModule = (props: Props) => {
-  return <FooterAtom title={props.title} />;
+  return <FooterAtom title={props.title} images={props.images} />;
 };

src/components/Modules/HomeDescription/HomeDescriptionModule.tsx

@@ -1,6 +1,6 @@
 export const HomeDescriptionModule = () => {
   return (
-    <div className="flex flex-col gap-2">
+    <div className="absolute left-0 right-0 mt-5 max-w-[500px] w-full h-[58.8vh] bg-[#2C2D30]  m-auto rounded-t-3xl p-5 overflow-y-auto">
       {/* 
         우리가 해외 개발자에게 원하는 최소 능력
           1. 우리의 페이지 구성 규칙을 이해하고, 이 규칙을 따라 요청 페이지를 제작하는 것
@@ -17,58 +17,40 @@ export const HomeDescriptionModule = () => {
 
           translate korean description to English and make markdown
         */}
-      <div className="flex flex-col gap-1 text-[14px]">
-        <b>Simple explanation of the roles of sample pages</b>
-        <ol className="list-outside list-decimal pl-7">
-          <li>
-            Empty: A page where you can check the page configuration rules, prop
-            usage rules, and basic layout
-          </li>
-          <li>
-            PageWithModal: A page where you can check how to use the basic
-            component, Modal component
-          </li>
-          <li>
-            PageWithForm: A page where you can check how to use the basic
-            component, Form component
-          </li>
-        </ol>
-      </div>
+
 
-      <div className="flex flex-col gap-1 text-[14px]">
-        <b>Minimum ability we want from developers</b>
-        <ol className="list-outside list-decimal pl-7">
-          <li>
-            Understanding our page configuration rules and creating a requested
-            page following these rules
-          </li>
-          <li>
-            Handling volatile elements or elements containing business logic in
-            the *Container.tsx file
-          </li>
-          <li>Following the convention for each code file</li>
-          <li>
-            Understanding and using basic components shown through the Sample
-            Link
-          </li>
-        </ol>
-      </div>
+
+        <div className="flex gap-4 p-4">
+          <div>
+            <img src="/images/eth.png" alt="eth" className="w-[44px] h-[44px]"/>
+          </div>
+          <div className="flex justify-between gap-2">
+            <div>
+              <p className="text-[16px] text-white font-bold">ETH</p>
+              <p className="text-[16px] text-[#CACACA]">User: namulabs is fantasic company...</p>
+            </div>
+            <div className="flex flex-col items-center gap-2">
+              <p className="text-[14px] text-white">8:50pm</p>
+              <p><img src="/images/Count.png"/></p>
+            </div>
+          </div>
+        </div>
 
-      <div className="flex flex-col gap-1 text-[14px]">
-        <b>Maximum ability we want from developers</b>
-        <ol className="list-outside list-decimal pl-7">
-          <li>
-            Finding the inadequacies of our page configuration rules and
-            improving them to reflect the results (In this case, you must write
-            an explanation through comments)
-          </li>
-          <li>
-            Finding the inadequacies of the basic components provided in the
-            Sample code and improving them to reflect the results (In this case,
-            you must write an explanation through comments)
-          </li>
-        </ol>
+        <div className="flex gap-4 p-4">
+          <div>
+            <img src="/images/nv.png" alt="nv" className="w-[44px] h-[44px] object-cover"/>
+          </div>
+          <div className="flex justify-between gap-2">
+            <div>
+              <p className="text-[16px] text-white font-bold">Nvir</p>
+              <p className="text-[16px] text-[#CACACA]">User: namulabs is fantasic company...</p>
+            </div>
+            <div className="flex flex-col items-center gap-2">
+              <p className="text-[14px] text-white">8:50pm</p>
+            </div>
+          </div>
+        </div>
       </div>
-    </div>
+
   );
 };

src/components/Templates/Home/HomeTemplate.tsx

@@ -18,8 +18,8 @@ export const HomeTemplate = (props: Props) => {
         <HomeHeaderModule {...props.homeHeaderModuleProps} />
       </Header>
 
-      <Content style={{ overflow: "auto", padding: "20px" }}>
-        <HomeContentModule {...props.homeContentModuleProps} />
+      <Content className="overflow-auto p-5 bg-[#262626]">
+        <HomeContentModule {...props.homeContentModuleProps}/>
         <HomeDescriptionModule />
       </Content>