diff --git a/public/images/Count.png b/public/images/Count.png new file mode 100644 index 0000000..2a3c158 Binary files /dev/null and b/public/images/Count.png differ diff --git a/public/images/History.png b/public/images/History.png new file mode 100644 index 0000000..15fb9f1 Binary files /dev/null and b/public/images/History.png differ diff --git a/public/images/dollar-circle.png b/public/images/dollar-circle.png new file mode 100644 index 0000000..fc14f4b Binary files /dev/null and b/public/images/dollar-circle.png differ diff --git a/public/images/eth.png b/public/images/eth.png new file mode 100644 index 0000000..4797ed4 Binary files /dev/null and b/public/images/eth.png differ diff --git a/public/images/mImg.png b/public/images/mImg.png new file mode 100644 index 0000000..b2f22f0 Binary files /dev/null and b/public/images/mImg.png differ diff --git a/public/images/message.png b/public/images/message.png new file mode 100644 index 0000000..15c7725 Binary files /dev/null and b/public/images/message.png differ diff --git a/public/images/modal Img.png b/public/images/modal Img.png new file mode 100644 index 0000000..d534cc5 Binary files /dev/null and b/public/images/modal Img.png differ diff --git a/public/images/nv.png b/public/images/nv.png new file mode 100644 index 0000000..6825853 Binary files /dev/null and b/public/images/nv.png differ diff --git a/public/images/wallet.png b/public/images/wallet.png new file mode 100644 index 0000000..34eab69 Binary files /dev/null and b/public/images/wallet.png differ diff --git a/src/app/david/home/container/HomeContainer.tsx b/src/app/david/home/container/HomeContainer.tsx new file mode 100644 index 0000000..11ad53a --- /dev/null +++ b/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 = { + 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 ( + <> + + {isCustomModalOpen && } + + ); +}; diff --git a/src/app/david/home/page.tsx b/src/app/david/home/page.tsx new file mode 100644 index 0000000..05d2570 --- /dev/null +++ b/src/app/david/home/page.tsx @@ -0,0 +1,8 @@ +"use client"; +import { HomeContainer } from "./container/HomeContainer"; + +const Home = () => { + return ; +}; + +export default Home; \ No newline at end of file diff --git a/src/app/david/pageWithForm/index.tsx b/src/app/david/pageWithForm/index.tsx new file mode 100644 index 0000000..e69de29 diff --git a/src/app/david/pageWithModal/container/PageWithModalContainer.tsx b/src/app/david/pageWithModal/container/PageWithModalContainer.tsx new file mode 100644 index 0000000..eb07f50 --- /dev/null +++ b/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 ; +}; diff --git a/src/app/david/pageWithModal/page.tsx b/src/app/david/pageWithModal/page.tsx new file mode 100644 index 0000000..e8690ea --- /dev/null +++ b/src/app/david/pageWithModal/page.tsx @@ -0,0 +1,8 @@ +"use client"; +import { PageWithModalContainer } from "./container/PageWithModalContainer"; + +const PageWithModal = () => { + return ; +}; + +export default PageWithModal; diff --git a/src/app/sample/pageWithModal/container/PageWithModalContainer.tsx b/src/app/sample/pageWithModal/container/PageWithModalContainer.tsx index 9480f14..ddbc563 100644 --- a/src/app/sample/pageWithModal/container/PageWithModalContainer.tsx +++ b/src/app/sample/pageWithModal/container/PageWithModalContainer.tsx @@ -29,6 +29,7 @@ export const PageWithModalContainer = () => { }, title: "Custom Modal Title", description: "Custom Modal Description", + image: "" }, }, }; diff --git a/src/components/Atoms/FooterAtom/FooterAtom.tsx b/src/components/Atoms/FooterAtom/FooterAtom.tsx index a241405..a6eb98c 100644 --- a/src/components/Atoms/FooterAtom/FooterAtom.tsx +++ b/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 ( -
-
{props.title}
+
+ {props.images && props.images.length > 0 ? ( +
+ {props.images.map((image, index) => ( +
+ {`Footer +
+ ))} +
+ ) : ( +
{props.title}
+ )}
); }; diff --git a/src/components/Atoms/HeaderAtom/HeaderAtom.tsx b/src/components/Atoms/HeaderAtom/HeaderAtom.tsx index 414c1a8..34957a6 100644 --- a/src/components/Atoms/HeaderAtom/HeaderAtom.tsx +++ b/src/components/Atoms/HeaderAtom/HeaderAtom.tsx @@ -9,24 +9,24 @@ type Props = { export const HeaderAtom = (props: Props) => { return ( -
+
{/* Sample using custom svg */} {props.onClickLeftIcon && (
- +
)} -
{props.title}
+
{props.title}
{/* Sample using Antd icon */} {props.onClickRightIcon && (
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} >
diff --git a/src/components/Atoms/ModalContainer/ModalContainer.tsx b/src/components/Atoms/ModalContainer/ModalContainer.tsx index 4f9a392..4d5f730 100644 --- a/src/components/Atoms/ModalContainer/ModalContainer.tsx +++ b/src/components/Atoms/ModalContainer/ModalContainer.tsx @@ -10,7 +10,7 @@ export const ModalContainer = (props: PropsWithChildren) => { return (
{ + return ( +
+ Messages +
+ Sample +

{props.text}

+
+
+ ); + }; + \ No newline at end of file diff --git a/src/components/Components/PageWithModalContentCustomModal/PageWithModalContentCustomModal.tsx b/src/components/Components/PageWithModalContentCustomModal/PageWithModalContentCustomModal.tsx index edd9a9b..33ec032 100644 --- a/src/components/Components/PageWithModalContentCustomModal/PageWithModalContentCustomModal.tsx +++ b/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; + 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 ( - +
-

{props.title}

-

{props.description}

- +

{title}

+ +

{description}

 ); diff --git a/src/components/Modules/Home/HomeContentModule.tsx b/src/components/Modules/Home/HomeContentModule.tsx index c6e8de5..d6e7e74 100644 --- a/src/components/Modules/Home/HomeContentModule.tsx +++ b/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 ( +
+ +
+ ); + } + return (
- + {props.sampleLinks && }
); }; diff --git a/src/components/Modules/Home/HomeFooterModule.tsx b/src/components/Modules/Home/HomeFooterModule.tsx index 9456859..3f3f609 100644 --- a/src/components/Modules/Home/HomeFooterModule.tsx +++ b/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 ; + return ; }; diff --git a/src/components/Modules/HomeDescription/HomeDescriptionModule.tsx b/src/components/Modules/HomeDescription/HomeDescriptionModule.tsx index 9a68f3a..407b61b 100644 --- a/src/components/Modules/HomeDescription/HomeDescriptionModule.tsx +++ b/src/components/Modules/HomeDescription/HomeDescriptionModule.tsx @@ -1,6 +1,6 @@ export const HomeDescriptionModule = () => { return ( -
+
{/* 우리가 해외 개발자에게 원하는 최소 능력 1. 우리의 페이지 구성 규칙을 이해하고, 이 규칙을 따라 요청 페이지를 제작하는 것 @@ -17,58 +17,40 @@ export const HomeDescriptionModule = () => { translate korean description to English and make markdown */} -
- Simple explanation of the roles of sample pages -
    -
  1. - Empty: A page where you can check the page configuration rules, prop - usage rules, and basic layout -
    2. -
  2. - PageWithModal: A page where you can check how to use the basic - component, Modal component -
    3. -
  3. - PageWithForm: A page where you can check how to use the basic - component, Form component -
    4. -
-
+ -
- Minimum ability we want from developers -
    -
  1. - Understanding our page configuration rules and creating a requested - page following these rules -
    2. -
  2. - Handling volatile elements or elements containing business logic in - the *Container.tsx file -
    3. -
  3. Following the convention for each code file
    4. -
  4. - Understanding and using basic components shown through the Sample - Link -
    5. -
-
+ +
+
+ eth +
+
+
+

ETH

+

User: namulabs is fantasic company...

+
+
+

8:50pm

+

+
+
+
-
- Maximum ability we want from developers -
    -
  1. - 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) -
    2. -
  2. - 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) -
    3. -
+
+
+ nv +
+
+
+

Nvir

+

User: namulabs is fantasic company...

+
+
+

8:50pm

+
+
+
-
+ ); }; diff --git a/src/components/Templates/Home/HomeTemplate.tsx b/src/components/Templates/Home/HomeTemplate.tsx index 689a99c..d2cb312 100644 --- a/src/components/Templates/Home/HomeTemplate.tsx +++ b/src/components/Templates/Home/HomeTemplate.tsx @@ -18,8 +18,8 @@ export const HomeTemplate = (props: Props) => { - - + +