Merge pull request #11 from P-r4Tes/feat/asidebar

Feat/asidebar Sidebar Component
P-r4Tes · Mar 8, 2024 · 93143bf · 93143bf
2 parents bf5f58f + 6a5ea57
commit 93143bf
Show file tree

Hide file tree

Showing 23 changed files with 2,388 additions and 1,959 deletions.
diff --git a/.pnp.cjs b/.pnp.cjs
diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -1,5 +1,6 @@
 import type { StorybookConfig } from "@storybook/nextjs";
-import path, { join, dirname } from "path";
+
+import path, { dirname, join } from "path";
 
 /**
  * This function is used to resolve the absolute path of a package.
@@ -10,16 +11,7 @@ function getAbsolutePath(value: string): any {
 }
 const config: StorybookConfig = {
   stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
-  webpackFinal: async config => {
-    if (config.resolve) {
-      config.resolve.alias = {
-        ...config.resolve.alias,
-        "@": path.resolve(__dirname, "../src"),
-      };
-    }
-    return config;
-  },
-  staticDirs: ["../src/assets"],
+  staticDir: ["../public"],
   addons: [
     getAbsolutePath("@storybook/addon-links"),
     getAbsolutePath("@storybook/addon-essentials"),
@@ -42,5 +34,15 @@ const config: StorybookConfig = {
   docs: {
     autodocs: "tag",
   },
+
+  webpackFinal: async config => {
+    if (config.resolve) {
+      config.resolve.alias = {
+        ...config.resolve.alias,
+        "@": path.resolve(__dirname, "../src"),
+      };
+    }
+    return config;
+  },
 };
 export default config;
diff --git a/next.config.mjs b/next.config.mjs
@@ -1,4 +1,13 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {};
+const nextConfig = {
+  images: {
+    remotePatterns: [
+      {
+        protocol: "https",
+        hostname: "avatars.githubusercontent.com",
+      },
+    ],
+  }
+};
 
 export default nextConfig;
diff --git a/package.json b/package.json
@@ -16,8 +16,10 @@
   },
   "dependencies": {
     "@yarnpkg/plugin-typescript": "^4.0.0",
+    "clsx": "^2.1.0",
     "firebase": "^10.8.1",
     "next": "14.1.0",
+    "prettier-plugin-tailwindcss": "^0.5.11",
     "react": "^18",
     "react-dom": "^18"
   },

diff --git a/src/__test__/index.test.tsx b/src/__test__/index.test.tsx
@@ -6,7 +6,7 @@ describe("Page", () => {
   it("renders a heading", () => {
     render(<Page />);
 
-    const Text = screen.getByText("Calendar App");
-    expect(Text).toBeVisible();
+    const Element = screen.getByTestId("root-layout");
+    expect(Element).toBeInTheDocument();
   });
 });
diff --git a/src/api/groups.ts b/src/api/groups.ts
@@ -1,5 +1,7 @@
 import { isEmpty, isStringArgumentsValid } from "@/lib/functions/stringValidation";
 import { deleteFirebase, getFirebase, popFirebaseArray, postFirebase, pushFirebaseArray } from "./firebase";
+import { collection, getDocs } from "firebase/firestore";
+import { db } from "@/lib/firebaseConfig";
 
 export const postGroup = (body: group) => {
   if (isEmpty(body.name)) throw new Error("Invalid name");
@@ -36,3 +38,15 @@ export const popGroupSchedule = (id: string, value: string) => {
   if (!isStringArgumentsValid(id, value)) throw new Error("Invalid string arguments");
   popFirebaseArray<"groups">("groups", id, "schedules", value);
 };
+
+export const getAllGroups = async () => {
+  try {
+    const groupsRef = collection(db, "groups");
+    const querySnapshot = await getDocs(groupsRef);
+    const groups: (group & id)[] = querySnapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }) as group & id);
+    return groups;
+  } catch (error) {
+    console.error("Error getting documents: ", error);
+    throw new Error("Failed to fetch groups");
+  }
+};
diff --git a/src/app/[group]/page.tsx b/src/app/[group]/page.tsx
@@ -0,0 +1,3 @@
+export default function Page() {
+  return <p>hello</p>;
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,5 +1,8 @@
 import type { Metadata } from "next";
 import "./globals.css";
+import Header from "@/components/Header/Header";
+import { Suspense } from "react";
+import SidebarContainer from "@/components/Sidebar/SidebarContainer";
 
 export const metadata: Metadata = {
   title: "Calendar App",
@@ -13,7 +16,16 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="ko">
-      <body>{children}</body>
+      <body className="flex">
+        <Suspense>
+          <SidebarContainer />
+        </Suspense>
+
+        <div className="flex flex-col flex-1">
+          <Header />
+          {children}
+        </div>
+      </body>
     </html>
   );
 }
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -4,6 +4,7 @@ import { getGroup } from "@/api/groups";
 import { getSchedule } from "@/api/schedules";
 import { getTag } from "@/api/tags";
 import { getUser } from "@/api/users";
+import Calendar from "@/components/Calendar/Calendar";
 import { useEffect } from "react";
 
 export default function Home() {
@@ -21,14 +22,10 @@ export default function Home() {
 
     fetchData();
   }, []);
-  const handleButton = () => {
-    console.log("안녕하세요?");
-  };
 
   return (
-    <main className="flex min-h-screen flex-col items-center justify-between p-24">
-      <h1>Calendar App</h1>
-      <button onClick={() => handleButton()}>안녕하세요?</button>
+    <main className="flex flex-col min-h-screen" data-testid="root-layout">
+      <Calendar />
     </main>
   );
 }
diff --git a/src/components/Calendar/Calendar.tsx b/src/components/Calendar/Calendar.tsx
@@ -0,0 +1,35 @@
+import React, { useState } from "react";
+import { viewType } from "./types";
+import MonthView from "./Content/MonthView";
+
+const BUTTON_STYLE = "bg-blue-500 text-white rounded-md p-2";
+
+const Calendar = () => {
+  // 이 부분은 상당히 React스러운데 나중에 라우팅으로 돌리고 Next스럽게 리팩터링해도 좋을 것 같습니다.
+  const [viewType, setViewType] = useState<viewType>("month");
+
+  const handleClick = (e: React.MouseEvent<HTMLElement>) => {
+    const target = e.target as HTMLButtonElement;
+    const value = target.value as viewType;
+    setViewType(value);
+  };
+
+  return (
+    <div>
+      <section onClick={handleClick} className="flex gap-2">
+        <button className={BUTTON_STYLE} value={"month"}>
+          MONTH
+        </button>
+        <button className={BUTTON_STYLE} value={"week"}>
+          WEEK
+        </button>
+        <button className={BUTTON_STYLE} value={"day"}>
+          DAY
+        </button>
+      </section>
+      {viewType === "month" && <MonthView />}
+    </div>
+  );
+};
+
+export default Calendar;
diff --git a/src/components/Calendar/Content/MonthView.tsx b/src/components/Calendar/Content/MonthView.tsx
@@ -0,0 +1,18 @@
+import React from "react";
+
+const MonthView = () => {
+  const days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+  return (
+    <section className="flex flex-col flex-1">
+      <div className="flex w-full">
+        {days.map((day, index) => (
+          <div key={index} className="flex-1">
+            {day}
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+};
+
+export default MonthView;
diff --git a/src/components/Calendar/types.ts b/src/components/Calendar/types.ts
@@ -0,0 +1 @@
+export type viewType = "month" | "week" | "day";
diff --git a/src/components/Header/Header.stories.ts b/src/components/Header/Header.stories.ts
@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import Header from "./Header";
+
+const meta = {
+  title: "Header",
+  component: Header,
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ["autodocs"],
+  parameters: {
+    // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
+    layout: "fullscreen",
+  },
+} satisfies Meta<typeof Header>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+export const Default: Story = {
+  args: {
+    user: {
+      name: "Jane Doe",
+    },
+  },
+};
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
@@ -0,0 +1,14 @@
+import React from "react";
+
+const Header = () => {
+  return (
+    <header className="flex flex-col justify-center items-center bg-yellow-200">
+      <section>Search Section</section>
+      <section className="w-full">
+        <h1>2024 년 03월</h1>
+      </section>
+    </header>
+  );
+};
+
+export default Header;
diff --git a/src/components/Sidebar/AddGroup.tsx b/src/components/Sidebar/AddGroup.tsx
@@ -0,0 +1,15 @@
+import Link from "next/link";
+import PlusIcon from "@/components/Sidebar/PlusIcon";
+
+type GroupProps = {
+  href: string;
+};
+const AddGroup = ({ href }: GroupProps) => {
+  return (
+    <Link href={href} className="w-full h-auto rounded-full bg-slate-800 p-2">
+      <PlusIcon className="text-white" />
+    </Link>
+  );
+};
+
+export default AddGroup;
diff --git a/src/components/Sidebar/Group.tsx b/src/components/Sidebar/Group.tsx
@@ -0,0 +1,39 @@
+import Image from "next/image";
+import Link from "next/link";
+import clsx from "clsx";
+import { MouseEventHandler } from "react";
+
+// 임시 이미지
+const tempSrc = "https://avatars.githubusercontent.com/u/161491870?s=200&v=4";
+
+type GroupProps = Pick<group, "name"> & {
+  href: string;
+  selected: boolean;
+  onSelect?: MouseEventHandler<HTMLAnchorElement>;
+};
+const Group = ({ name, href, selected, onSelect }: GroupProps) => {
+  return (
+    <Link
+      href={href}
+      className={clsx("", {
+        "border-2 border-slate-100": selected,
+      })}
+      onClick={onSelect}
+    >
+      <Image
+        className="rounded-full"
+        src={tempSrc}
+        alt={`그룹 ${name}`}
+        sizes="100vw"
+        style={{
+          width: "100%",
+          height: "auto",
+        }}
+        width={360}
+        height={360}
+      />
+    </Link>
+  );
+};
+
+export default Group;
diff --git a/src/components/Sidebar/PlusIcon.tsx b/src/components/Sidebar/PlusIcon.tsx
@@ -0,0 +1,18 @@
+import { SVGProps } from "react";
+import clsx from "clsx";
+
+const PlusIcon = ({ ...props }: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    strokeWidth={3}
+    stroke="currentColor"
+    className={clsx("w-4 h-4", props?.className)}
+    {...props}
+  >
+    <path strokeLinecap="round" strokeLinejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
+  </svg>
+);
+
+export default PlusIcon;
diff --git a/src/components/Sidebar/Sidebar.stories.ts b/src/components/Sidebar/Sidebar.stories.ts
@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import Sidebar from "./Sidebar";
+
+const meta = {
+  title: "Sidebar",
+  component: Sidebar,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "fullscreen",
+  },
+} satisfies Meta<typeof Sidebar>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    groups: [
+      {
+        id: "test1",
+        name: "샘플",
+        users: ["user1"],
+        schedules: ["schedules"],
+      },
+    ],
+  },
+};
diff --git a/src/components/Sidebar/Sidebar.tsx b/src/components/Sidebar/Sidebar.tsx
@@ -0,0 +1,38 @@
+"use client";
+import React, { MouseEventHandler, useState } from "react";
+import Group from "@/components/Sidebar/Group";
+import AddGroup from "@/components/Sidebar/AddGroup";
+
+type SidebarProps = {
+  groups: (group & id)[];
+};
+const Sidebar = ({ groups }: SidebarProps) => {
+  const [selectedIdx, setSelectedIdx] = useState(0);
+  const height = groups.length * 80 + 80;
+
+  return (
+    <div className="flex h-screen">
+      <aside className={"flex items-center w-20 bg-[#383A57] rounded-l-3xl"} style={{ height: height }}>
+        <div className="flex flex-col items-center space-y-4 p-4">
+          {groups.map((group, idx) => {
+            const onSelect: MouseEventHandler<HTMLAnchorElement> = () => {
+              setSelectedIdx(idx);
+            };
+            return (
+              <Group
+                key={group.id}
+                name={group.name}
+                href={group.id}
+                selected={idx === selectedIdx}
+                onSelect={onSelect}
+              />
+            );
+          })}
+          <AddGroup href="." />
+        </div>
+      </aside>
+    </div>
+  );
+};
+
+export default Sidebar;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export type viewType = "month" \| "week" \| "day";