Merge pull request #26 from Strong-Potato/4-feat-create-sidebar

Feat: create sidebar
Strong-Potato · Jan 7, 2024 · d3eca59 · d3eca59
2 parents 39282a8 + 60b8409
commit d3eca59
Show file tree

Hide file tree

Showing 7 changed files with 234 additions and 6 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/assets/plus.svg b/src/assets/plus.svg
diff --git a/src/components/SideBar/SideBar.module.scss b/src/components/SideBar/SideBar.module.scss
@@ -0,0 +1,31 @@
+@use "@/sass" as *;
+
+.container {
+  display: flex;
+  flex-direction: column;
+  ::-webkit-scrollbar {
+    display: none;
+  }
+  &__profile {
+    display: flex;
+    flex-direction: row;
+    display: flex;
+    padding: 0px 20px;
+    align-items: center;
+    gap: 16px;
+    margin-bottom: 8px;
+
+    &__nickName {
+      font-style: normal;
+      letter-spacing: -0.02rem;
+      @include typography(titleLarge);
+    }
+
+    &__editProfile {
+      color: $neutral400;
+      font-style: normal;
+      letter-spacing: -0.012rem;
+      @include typography(captionSmall);
+    }
+  }
+}
diff --git a/src/components/SideBar/SideBar.tsx b/src/components/SideBar/SideBar.tsx
@@ -0,0 +1,87 @@
+import {
+  Avatar,
+  CloseButton,
+  Divider,
+  Drawer,
+  DrawerBody,
+  DrawerContent,
+  DrawerHeader,
+  DrawerOverlay,
+} from "@chakra-ui/react";
+import { Link } from "react-router-dom";
+
+import styles from "./SideBar.module.scss";
+
+import TravelList from "./TravelList/TravelList";
+
+import { SideBarProps } from "@/types/sidebar";
+
+const travelList = [
+  { name: "여행 리스트 1 (여행지 미정)", date: "날짜 미정" },
+  { name: "여행 리스트 2 (여행지 미정)", date: "날짜 미정" },
+  { name: "여행 리스트 3 (여행지 미정)", date: "날짜 미정" },
+  { name: "여행 리스트 4 (여행지 미정)", date: "날짜 미정" },
+  { name: "여행 리스트 5 (여행지 미정)", date: "날짜 미정" },
+  { name: "여행 리스트 6 (여행지 미정)", date: "날짜 미정" },
+  { name: "여행 리스트 7 (여행지 미정)", date: "날짜 미정" },
+  { name: "여행 리스트 8 (여행지 미정)", date: "날짜 미정" },
+  { name: "여행 리스트 9 (여행지 미정)", date: "날짜 미정" },
+  { name: "여행 리스트 10 (여행지 미정)", date: "날짜 미정" },
+  { name: "여행 리스트 11 (여행지 미정)", date: "날짜 미정" },
+  { name: "여행 리스트 12 (여행지 미정)", date: "날짜 미정" },
+  { name: "여행 리스트 13 (여행지 미정)", date: "날짜 미정" },
+  { name: "여행 리스트 14 (여행지 미정)", date: "날짜 미정" },
+  { name: "여행 리스트 15 (여행지 미정)", date: "날짜 미정" },
+];
+
+function SideBar({ isSideOpen, sideClose }: SideBarProps) {
+  // const {
+  //   onOpen: sideOpen,
+  //   isOpen: isSideOpen,
+  //   onClose: sideClose,
+  // } = useDisclosure();
+  return (
+    // <button onClick={sideOpen}>Open</button>
+    <Drawer
+      isOpen={isSideOpen}
+      placement="right"
+      onClose={sideClose}
+      onEsc={sideClose}
+      size={"sm"}
+    >
+      <DrawerOverlay />
+      <DrawerContent>
+        <DrawerHeader display="flex" justifyContent="flex-end">
+          <CloseButton onClick={sideClose} size="lg" />
+        </DrawerHeader>
+        <DrawerBody padding={0}>
+          <div className={styles.container}>
+            <section className={styles.container__profile}>
+              <div>
+                <Avatar
+                  size="lg"
+                  name="Prosper Otemuyiwa"
+                  src="https://bit.ly/prosper-baba"
+                />
+              </div>
+              <div>
+                <p className={styles.container__profile__nickName}>닉네임</p>
+                <Link
+                  to="/user"
+                  onClick={sideClose}
+                  className={styles.container__profile__editProfile}
+                >
+                  {"프로필 보기 >"}
+                </Link>
+              </div>
+            </section>
+            <Divider />
+            <TravelList travelList={travelList} />
+          </div>
+        </DrawerBody>
+      </DrawerContent>
+    </Drawer>
+  );
+}
+
+export default SideBar;
diff --git a/src/components/SideBar/TravelList/TravelList.module.scss b/src/components/SideBar/TravelList/TravelList.module.scss
@@ -0,0 +1,56 @@
+@use "@/sass" as *;
+
+.travelSpaceList {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  &__addButton {
+    display: flex;
+    gap: 8px;
+    width: 24.3rem;
+    height: 7.2rem;
+    margin: 16px 0;
+    padding: 24px 16px;
+    align-items: center;
+    border-radius: 16px;
+    border: 1px solid $primary200;
+    background: $primary200;
+
+    &__text {
+      color: $neutral0;
+      font-style: normal;
+      @include typography(button);
+    }
+  }
+
+  &__items {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+
+    &__item {
+      display: flex;
+      flex-direction: column;
+      width: 24.3rem;
+      height: 7.8rem;
+      padding: 16px 0px 16px 16px;
+      border-radius: 16px;
+      border: 1px solid $primary200;
+      background: $neutral0;
+
+      &__name {
+        color: $neutral900;
+        font-style: normal;
+        @include typography(button);
+      }
+
+      &__date {
+        color: $neutral400;
+        font-style: normal;
+        letter-spacing: -0.012rem;
+        @include typography(captionSmall);
+      }
+    }
+  }
+}
diff --git a/src/components/SideBar/TravelList/TravelList.tsx b/src/components/SideBar/TravelList/TravelList.tsx
@@ -0,0 +1,34 @@
+import styles from "./TravelList.module.scss";
+
+import PlusIcon from "@/assets/plus.svg?react";
+
+import { TravelListProps } from "@/types/sidebar";
+
+function TravelList({ travelList }: TravelListProps) {
+  return (
+    <section className={styles.travelSpaceList}>
+      <button className={styles.travelSpaceList__addButton}>
+        <PlusIcon />
+        <p className={styles.travelSpaceList__addButton__text}>
+          새 여행 스페이스 만들기
+        </p>
+      </button>
+      <ul className={styles.travelSpaceList__items}>
+        {travelList.map((item, index) => (
+          <li key={index}>
+            <button className={styles.travelSpaceList__items__item}>
+              <p className={styles.travelSpaceList__items__item__name}>
+                {item.name}
+              </p>
+              <p className={styles.travelSpaceList__items__item__date}>
+                {item.date}
+              </p>
+            </button>
+          </li>
+        ))}
+      </ul>
+    </section>
+  );
+}
+
+export default TravelList;
diff --git a/src/types/sidebar.ts b/src/types/sidebar.ts
@@ -0,0 +1,13 @@
+export type SideBarProps = {
+  sideClose: () => void;
+  isSideOpen: boolean;
+};
+
+type TravelListItem = {
+  name: string;
+  date: string;
+};
+
+export type TravelListProps = {
+  travelList: TravelListItem[];
+};