diff --git a/package-lock.json b/package-lock.json index 2593127c..204f9941 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6657,9 +6657,10 @@ } }, "node_modules/framer-motion": { - "version": "10.17.6", - "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-10.17.6.tgz", - "integrity": "sha512-WPPm0vLGTbhLOsD7v1fEv3yjX1RrmzsVI3CZ6dpBJvVb7wKMA6mpZsQzTYiSUDz/YIlvTUHHY0Jum7iEHnLHDA==", + "version": "10.17.8", + "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-10.17.8.tgz", + "integrity": "sha512-Flmw+iVuE3xZGGCF+Oy45RxYuNot0aUg9HngeLf6EdzhC517yV7Kt/dqeazo1drr0xu/PCXEINDc2N96UzlGeQ==", + "dependencies": { "tslib": "^2.4.0" }, @@ -11182,9 +11183,9 @@ "dev": true }, "node_modules/vite": { - "version": "5.0.10", - "resolved": "https://registry.npmjs.org/vite/-/vite-5.0.10.tgz", - "integrity": "sha512-2P8J7WWgmc355HUMlFrwofacvr98DAjoE52BfdbwQtyLH06XKwaL/FMnmKM2crF0iX4MpmMKoDlNCB1ok7zHCw==", + "version": "5.0.11", + "resolved": "https://registry.npmjs.org/vite/-/vite-5.0.11.tgz", + "integrity": "sha512-XBMnDjZcNAw/G1gEiskiM1v6yzM4GE5aMGvhWTlHAYYhxb7S3/V1s3m2LDHa8Vh6yIWYYB0iJwsEaS523c4oYA==", "dev": true, "dependencies": { "esbuild": "^0.19.3", diff --git a/src/assets/plus.svg b/src/assets/plus.svg new file mode 100644 index 00000000..f144122b --- /dev/null +++ b/src/assets/plus.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/components/SideBar/SideBar.module.scss b/src/components/SideBar/SideBar.module.scss new file mode 100644 index 00000000..82bbc27c --- /dev/null +++ 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 new file mode 100644 index 00000000..c41214bb --- /dev/null +++ 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 ( + // + + + + + + + +
+
+
+ +
+
+

닉네임

+ + {"프로필 보기 >"} + +
+
+ + +
+ + + + ); +} + +export default SideBar; diff --git a/src/components/SideBar/TravelList/TravelList.module.scss b/src/components/SideBar/TravelList/TravelList.module.scss new file mode 100644 index 00000000..182e250e --- /dev/null +++ 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 new file mode 100644 index 00000000..98bed1d6 --- /dev/null +++ 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 ( +
+ + +
+ ); +} + +export default TravelList; diff --git a/src/types/sidebar.ts b/src/types/sidebar.ts new file mode 100644 index 00000000..41c83de1 --- /dev/null +++ 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[]; +};