feat: initiating events

apps/events/.eslintrc.js

@@ -0,0 +1,6 @@
+module.exports = {
+  extends: ["custom"],
+  rules: {
+    "@next/next/no-img-element": "off",
+  },
+};

apps/events/.npmrc

@@ -0,0 +1,2 @@
+always-auth=true
+recursive-install=false

apps/events/.prettierrc.js

@@ -0,0 +1,7 @@
+module.exports = {
+  plugins: [require("prettier-plugin-tailwindcss")],
+  trailingComma: "es5",
+  tabWidth: 2,
+  semi: false,
+  singleQuote: false,
+};

apps/events/README.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

apps/events/app/create-event/Form.tsx

@@ -0,0 +1,91 @@
+'use client';
+import BoxField from "@/ui/BoxField";
+import Input from "@/ui/Input";
+import Select from "@/ui/Select";
+import Tabs from "@/ui/Tabs";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+
+export default function Form() {
+    const [payment, setPayment] = useState('Permanent')
+    const router = useRouter();
+    return (
+        <form className="xl:max-w-7xl pb-6 border-2 md:py-6 md:px-8 p-5 border-primary rounded-lg">
+            <div className="flex lg:gap-12 gap-6 flex-wrap xl:gap-20">
+                <div className="flex flex-col gap-5 flex-1">
+                    <Tabs title="Event Type" options={['One-Time', 'Permanent']} name="payment" value={payment} onChange={e => setPayment(e.target.value)} />
+                    <Input title="Event Name" placeholder="Title" />
+                    {payment === 'Permanent' ? (
+                        <>
+                            <div className="flex gap-2">
+                                <Select title="Date">
+                                    <option>1</option>
+                                    <option>2</option>
+                                    <option>3</option>
+                                    <option>4</option>
+                                    <option>5</option>
+                                    <option>Every</option>
+                                </Select>
+                                <label className="mt-[2.25em]">Week</label>
+                            </div>
+                            <div className="flex gap-1 -mt-3">
+                                <BoxField title="S" name="day" />
+                                <BoxField title="T" name="day" />
+                                <BoxField title="W" name="day" />
+                                <BoxField title="T" name="day" />
+                                <BoxField title="F" name="day" />
+                                <BoxField title="S" name="day" />
+                            </div>
+                            <Input type="time" className="mt-auto" title="Time" />
+                        </>
+                    ) : (
+                        <>
+                            <div>
+                                <label>Start Date & Time</label>
+                                <div className="grid gap-1 grid-cols-2 mt-[0.25em]">
+                                    <input className="Form-Field" type="date" />
+                                    <input className="Form-Field" type="time" />
+                                </div>
+                            </div>
+                            <div>
+                                <label>End Date & Time</label>
+                                <div className="grid gap-1 grid-cols-2 mt-[0.25em]">
+                                    <input className="Form-Field" type="date" />
+                                    <input className="Form-Field" type="time" />
+                                </div>
+                            </div>
+                            <Input title="Application Deadline" type="date" />
+                        </>
+                    )}
+                </div>
+                <div className="flex flex-col gap-5 flex-1">
+                    <Input title="Location" placeholder="Offline location or online" />
+                    <Input title="Fee" placeholder="0000 YEN" />
+                    <Input title="Organizer" placeholder="Name + (Email)" />
+                    <Input title="Personnel" placeholder="minimum5" />
+                    <Input type="url" title="Chat Link" placeholder="Chat Link" />
+                </div>
+                <div className="flex flex-col xl:flex-2 w-full xl:w-[initial] xl:mr-3">
+                    <label htmlFor="description" className="pb-[0.25em]">Description</label>
+                    <div className="flex flex-col flex-1 relative">
+                        <label className="btn-icon text-xl absolute">
+                            <i className="fa-regular fa-image"></i>
+                            <input type="file" accept="images/*" className="hidden" />
+                        </label>
+                        <textarea id="description" className="Form-Field w-full flex-1 pt-14 peer" rows={10} />
+                        <label htmlFor="description" className="absolute top-14 px-[0.645em] peer-focus:hidden text-accent-10 opacity-90 z-1">
+                            Brief introduction, <br />
+                            What to bring, precautions, whether the event can be held depending on the weather, etc.
+                        </label>
+                    </div>
+                </div>
+            </div>
+            <div className="flex-middle">
+                <div className="grid grid-cols-2 h4 sm:gap-8 gap-4 mt-14">
+                    <button onClick={router.back} className="btn-primary rounded-lg bg-accent-9 text-black" type="button">Cancel</button>
+                    <button className="btn-primary rounded-lg sm:px-[2em] md:px-[3em]">Create Event</button>
+                </div>
+            </div>
+        </form>
+    )
+}

apps/events/app/create-event/page.tsx

@@ -0,0 +1,13 @@
+import MyEvents from "@/components/MyEvents";
+import PageLayout from "@/hoc/PageLayout";
+import Form from "./Form";
+
+export default function MyPage() {
+    return (
+        <PageLayout title="My Page">
+            <h2 className="subtitle mb-4 mt-12">Create Event</h2>
+            <Form />
+            <MyEvents />
+        </PageLayout>
+    )
+}

apps/events/app/event/Comments.tsx

@@ -0,0 +1,17 @@
+export default function Comments() {
+    return (
+        <div>
+            <h3>Comments</h3>
+            <div className="flex gap-2 mt-3 mb-6">
+                <input className="Form-Field flex-1 px-[1em] bg-surface-10 bg-opacity-80 rounded-[3em]" placeholder="Comments" />
+                <button className="btn-primary rounded-[2em] px-[1em]">Send</button>
+            </div>
+            <p className="border-y p-5">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+            </p>
+            <p className="border-y p-5">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+            </p>
+        </div>
+    )
+}

apps/events/app/event/Description.tsx

@@ -0,0 +1,16 @@
+import ImageWrapper from "@/ui/ImageWrapper";
+import Link from "next/link";
+
+export default function Description() {
+    return (
+        <div className="flex flex-col gap-7 mb-7 items-start">
+            <ImageWrapper src="/event-dummy.jpg" className="w-full" />
+            <h2>Title</h2>
+            <p className="-mt-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+            <Link href='/' className="btn-text no-underline gap-[0.7em] h6">
+                <i className="fa-regular fa-circle-user h3"></i>
+                Name (email)
+            </Link>
+        </div>
+    )
+}

apps/events/app/event/Summary.tsx

@@ -0,0 +1,33 @@
+import Link from "next/link";
+
+export default function Summary() {
+    return (
+        <div className="bg-ground lg:w-80 shadow-4 p-5 sticky top-0">
+            <small>One-Time</small>
+            <h3 className="mt-2 mb-1">Event Name</h3>
+            <h6>2023.11.30 &nbsp; 14:00</h6>
+            <div className="my-6 grid gap-4 items-start text-base">
+                <div className="flex-center gap-3">
+                    <i className="fa-solid h5 fa-location-dot"></i>
+                    Location
+                </div>
+                <div className="flex-center gap-4">
+                    <span className="h4 font-normal">¥</span> Fee
+                </div>
+                <Link href='/' className="btn-text mr-auto no-underline gap-[0.5em]">
+                    <i className="fa-regular fa-circle-user h4"></i>
+                    Name (email)
+                </Link>
+            </div>
+            <div className="grid gap-2">
+                <button className="btn-primary gap-[0.25em] w-full h6 flex-col">
+                    Apply
+                    <small className="text-xs text-[#FFA1B0]">~2023.11.29</small>
+                </button>
+                <button className="btn-primary py-[1.125em] bg-transparent text-black border border-primary h-full">
+                Chat
+                </button>
+            </div>
+        </div>
+    )
+}

apps/events/app/event/page.tsx

@@ -0,0 +1,19 @@
+import PageLayout from "@/hoc/PageLayout";
+import Description from "./Description";
+import Comments from "./Comments";
+import Summary from "./Summary";
+
+
+export default function MyPage() {
+    return (
+        <PageLayout title="Event">
+            <div className="mt-12 flex flex-col lg:flex-row gap-5 lg:items-start max-w-7xl">
+                <div className="flex-1">
+                    <Description />
+                    <Comments />
+                </div>
+                <Summary />
+            </div>
+        </PageLayout>
+    )
+}

apps/events/app/layout.tsx

@@ -0,0 +1,28 @@
+import type { Metadata } from 'next'
+import { Inter } from 'next/font/google'
+import '@/scss/styles.scss';
+import Theme from '@/components/Theme/Theme';
+import Script from 'next/script';
+
+const inter = Inter({ subsets: ['latin'] })
+
+export const metadata: Metadata = {
+  title: 'Create Next App',
+  description: 'Generated by create next app',
+}
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en">
+      <Script src="https://kit.fontawesome.com/f51f49f955.js" crossOrigin="anonymous" />
+      <body className={inter.className}>
+        <Theme />
+        {children}
+      </body>
+    </html>
+  )
+}

apps/events/app/my-page/page.tsx

@@ -0,0 +1,34 @@
+import EventItem from "@/components/EventItem";
+import MyEvents from "@/components/MyEvents";
+import PageLayout from "@/hoc/PageLayout";
+import Link from "next/link";
+
+export default function MyPage() {
+    return (
+        <PageLayout title="My Page">
+            <h2 className="subtitle mb-4 mt-12">My Event</h2>
+            <div className="grid max-w-6xl">
+                <div className="flex md:gap-6 xl:gap-14 gap-4 overflow-auto">
+                    <Link href='/create-event' className="min-w-[15.5rem] py-32 bg-surface-10 btn btn-hover rounded-lg h1 font-thin">
+                        <span className="scale-150">+</span>
+                    </Link>
+                    <EventItem
+                        className="w-[16.75rem]"
+                        title="1"
+                        imgURL="/event-dummy.jpg"
+                        description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+                        date="2023. 10. 25"
+                    />
+                    <EventItem
+                        className="w-[16.75rem]"
+                        title="2"
+                        imgURL="/event-dummy.jpg"
+                        description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+                        date="2023. 10. 25"
+                    />
+                </div>
+            </div>
+            <MyEvents />
+        </PageLayout>
+    )
+}

apps/events/app/page.tsx

@@ -0,0 +1,20 @@
+import EventItem from "@/components/EventItem";
+import All from "@/components/HomeComponents/All";
+import Reccomandation from "@/components/HomeComponents/Reccomandation";
+import PageLayout from "@/hoc/PageLayout";
+import AccountBox from "@/icons/AccoutBox";
+import Link from "next/link";
+
+export default function Home() {
+  return (
+    <PageLayout title="Event">
+      <div className="text-right">
+        <Link href='/' className="btn-text">
+          <AccountBox /> My Page
+        </Link>
+      </div>
+      <Reccomandation />
+      <All />
+    </PageLayout>
+  )
+}