From fe8c9fb20e51879be1e6ca434d290f5fd407088c Mon Sep 17 00:00:00 2001 From: JSH99 Date: Wed, 17 Jan 2024 14:46:14 +0900 Subject: [PATCH 1/7] Design: change dimed color --- src/components/BottomSlide/BottomSlide.module.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/BottomSlide/BottomSlide.module.scss b/src/components/BottomSlide/BottomSlide.module.scss index a27c32ae..5e3196b2 100644 --- a/src/components/BottomSlide/BottomSlide.module.scss +++ b/src/components/BottomSlide/BottomSlide.module.scss @@ -5,7 +5,7 @@ top: 0; width: 450px; height: 100vh; - background-color: rgba(20, 20, 20, 0.8); + background-color: rgba(0, 0, 0, 0.6); z-index: 100; .slide { From 4595af61927aa3f449a4ea5a89841a41c956d7ee Mon Sep 17 00:00:00 2001 From: JSH99 Date: Wed, 17 Jan 2024 15:48:08 +0900 Subject: [PATCH 2/7] Feat: create add place bottom slide component --- .../Route/AddPlace/AddPlace.module.scss | 46 ++++++++++++++ src/components/Route/AddPlace/AddPlace.tsx | 37 +++++++++++ .../Route/DayRoute/DayRoute.module.scss | 2 + src/components/Route/DayRoute/DayRoute.tsx | 62 +++++++++++-------- .../RouteTabPanel/RouteTabPanel.module.scss | 1 - 5 files changed, 120 insertions(+), 28 deletions(-) create mode 100644 src/components/Route/AddPlace/AddPlace.module.scss create mode 100644 src/components/Route/AddPlace/AddPlace.tsx diff --git a/src/components/Route/AddPlace/AddPlace.module.scss b/src/components/Route/AddPlace/AddPlace.module.scss new file mode 100644 index 00000000..0bfb7228 --- /dev/null +++ b/src/components/Route/AddPlace/AddPlace.module.scss @@ -0,0 +1,46 @@ +@use "@/sass" as *; + +.container { + display: flex; + flex-direction: column; + align-items: center; + gap: 2rem; + + h1 { + @include typography(button); + color: $neutral700; + margin-top: -1.2rem; + } + + .buttonsContainer { + width: 100%; + display: flex; + justify-content: center; + gap: calc((100% - 14.4rem) / 5); + + .buttonContainer { + display: flex; + flex-direction: column; + align-items: center; + gap: 0.8rem; + width: 8.2rem; + + button { + background-color: $neutral0; + width: 4.8rem; + height: 4.8rem; + border-radius: 50%; + box-shadow: $shadow100; + padding: 12px; + display: flex; + justify-content: center; + align-items: center; + } + + p { + @include typography(tabLabel); + color: $neutral900; + } + } + } +} diff --git a/src/components/Route/AddPlace/AddPlace.tsx b/src/components/Route/AddPlace/AddPlace.tsx new file mode 100644 index 00000000..d852bbff --- /dev/null +++ b/src/components/Route/AddPlace/AddPlace.tsx @@ -0,0 +1,37 @@ +import { AiOutlineHeart as WishIcon } from "react-icons/ai"; +import { AiOutlineSearch as SearchIcon } from "react-icons/ai"; +import { BiTask as VoteIcon } from "react-icons/bi"; + +import styles from "./AddPlace.module.scss"; + +function AddPlace() { + return ( + <> +
+

일정 추가하기

+
+
+ +

장소 검색

+
+
+ +

찜 목록 검색

+
+
+ +

투표 불러오기

+
+
+
+ + ); +} + +export default AddPlace; diff --git a/src/components/Route/DayRoute/DayRoute.module.scss b/src/components/Route/DayRoute/DayRoute.module.scss index 028b2292..8d2d0679 100644 --- a/src/components/Route/DayRoute/DayRoute.module.scss +++ b/src/components/Route/DayRoute/DayRoute.module.scss @@ -1,6 +1,8 @@ @use "@/sass" as *; .dayRouteContainer { + padding: 0 20px; + .dayHeader { display: flex; justify-content: space-between; diff --git a/src/components/Route/DayRoute/DayRoute.tsx b/src/components/Route/DayRoute/DayRoute.tsx index 1118b066..e520fac0 100644 --- a/src/components/Route/DayRoute/DayRoute.tsx +++ b/src/components/Route/DayRoute/DayRoute.tsx @@ -1,43 +1,51 @@ +import { useDisclosure } from "@chakra-ui/react"; import { AiOutlinePlus as PlusIcon } from "react-icons/ai"; import styles from "./DayRoute.module.scss"; +import BottomSlide from "@/components/BottomSlide/BottomSlide"; + +import AddPlace from "../AddPlace/AddPlace"; import EmptyRoute from "../EmptyRoute/EmptyRoute"; import PlaceCard from "../PlaceCard/PlaceCard"; import { DayRouteProps } from "@/types/route"; function DayRoute({ day, date, placeList }: DayRouteProps) { + const { isOpen, onOpen, onClose } = useDisclosure(); return ( -
-
-
- DAY {day} - {date} -
- -
-
- -
- {placeList.length ? ( - placeList.map((place, index) => ( - - )) - ) : ( - - )} + <> +
+
+
+ DAY {day} + {date} +
+ +
+
+ +
+ {placeList.length ? ( + placeList.map((place, index) => ( + + )) + ) : ( + + )} +
-
+ } /> + ); } diff --git a/src/components/Route/RouteTabPanel/RouteTabPanel.module.scss b/src/components/Route/RouteTabPanel/RouteTabPanel.module.scss index 8f8107fa..35a5f7fe 100644 --- a/src/components/Route/RouteTabPanel/RouteTabPanel.module.scss +++ b/src/components/Route/RouteTabPanel/RouteTabPanel.module.scss @@ -21,7 +21,6 @@ display: flex; flex-direction: column; gap: 6.3rem; - padding: 0 20px; padding-bottom: 12rem; } } From e7a401902c730ad0b3a11cd7faed3b6113f18ad5 Mon Sep 17 00:00:00 2001 From: JSH99 Date: Thu, 18 Jan 2024 01:59:09 +0900 Subject: [PATCH 3/7] Feat: create place list component --- .../FromVote/PlaceList/PlaceList.module.scss | 66 +++++++++++++++++++ .../AddPlace/FromVote/PlaceList/PlaceList.tsx | 32 +++++++++ src/types/route.ts | 7 ++ 3 files changed, 105 insertions(+) create mode 100644 src/components/Route/AddPlace/FromVote/PlaceList/PlaceList.module.scss create mode 100644 src/components/Route/AddPlace/FromVote/PlaceList/PlaceList.tsx diff --git a/src/components/Route/AddPlace/FromVote/PlaceList/PlaceList.module.scss b/src/components/Route/AddPlace/FromVote/PlaceList/PlaceList.module.scss new file mode 100644 index 00000000..204c699d --- /dev/null +++ b/src/components/Route/AddPlace/FromVote/PlaceList/PlaceList.module.scss @@ -0,0 +1,66 @@ +@use "@/sass" as *; + +.container, +.clickedContainer { + display: flex; + justify-content: flex-start; + align-items: center; + border-radius: 8px; + padding: 16px; + width: 100%; + gap: 1.2rem; + + .imageContainer { + display: flex; + align-items: center; + position: relative; + + img { + width: 4rem; + height: 4rem; + border-radius: 8px; + object-fit: contain no-repeat; + background: + linear-gradient( + 0deg, + rgba(52, 51, 48, 0.3) 0%, + rgba(52, 51, 48, 0.3) 100% + ), + lightgray 50%; + } + + p { + @include typography(captionSmall); + color: $neutral0; + position: absolute; + left: calc(50% - 0.6rem); + } + } + + .textContainer { + display: flex; + flex-direction: column; + align-items: flex-start; + + h1, + h2 { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + + h1 { + @include typography(button); + color: $neutral900; + } + + h2 { + @include typography(captionSmall); + color: $neutral400; + } + } +} + +.clickedContainer { + background-color: $primary100; +} diff --git a/src/components/Route/AddPlace/FromVote/PlaceList/PlaceList.tsx b/src/components/Route/AddPlace/FromVote/PlaceList/PlaceList.tsx new file mode 100644 index 00000000..80cd682d --- /dev/null +++ b/src/components/Route/AddPlace/FromVote/PlaceList/PlaceList.tsx @@ -0,0 +1,32 @@ +import { useState } from "react"; + +import styles from "./PlaceList.module.scss"; + +import { PlaceListProps } from "@/types/route"; + +function PlaceList({ id, name, category, onSelect }: PlaceListProps) { + const [isChecked, setIsChecked] = useState(false); + + const handleSelect = () => { + setIsChecked(!isChecked); + onSelect(name); + }; + + return ( + + ); +} + +export default PlaceList; diff --git a/src/types/route.ts b/src/types/route.ts index 60915f28..1bf99b5d 100644 --- a/src/types/route.ts +++ b/src/types/route.ts @@ -56,3 +56,10 @@ export interface DateItem { export interface DayNavigationBarProps { dateList: DateItem[]; } + +export interface PlaceListProps { + id: number; + name: string; + category: string; + onSelect: (name: string) => void; +} From 7333eaadabaf2fb5b08dedefa4f5f6dd66df4f06 Mon Sep 17 00:00:00 2001 From: JSH99 Date: Thu, 18 Jan 2024 02:22:16 +0900 Subject: [PATCH 4/7] Feat: create vote card component --- .../FromVote/VoteCard/VoteCard.module.scss | 67 +++++++++++ .../AddPlace/FromVote/VoteCard/VoteCard.tsx | 113 ++++++++++++++++++ src/types/route.ts | 5 + 3 files changed, 185 insertions(+) create mode 100644 src/components/Route/AddPlace/FromVote/VoteCard/VoteCard.module.scss create mode 100644 src/components/Route/AddPlace/FromVote/VoteCard/VoteCard.tsx diff --git a/src/components/Route/AddPlace/FromVote/VoteCard/VoteCard.module.scss b/src/components/Route/AddPlace/FromVote/VoteCard/VoteCard.module.scss new file mode 100644 index 00000000..7e2cce98 --- /dev/null +++ b/src/components/Route/AddPlace/FromVote/VoteCard/VoteCard.module.scss @@ -0,0 +1,67 @@ +@use "@/sass" as *; + +.container { + .openedContainer { + border-radius: 16px; + border: 1px solid $primary300; + } + + .closedContainer { + border-radius: 16px; + border: none; + } + + .closedItem { + display: flex; + width: 100%; + padding: 20px 16px; + justify-content: space-between; + align-items: center; + border-radius: 16px; + border: 1px solid $neutral200; + } + + .openedItem { + display: flex; + width: 100%; + padding: 20px 16px; + justify-content: space-between; + align-items: center; + border: 1px solid transparent; + } + + .titleContainer, + .placesContainer { + width: calc((100% - 2.4rem) / 2); + height: 3rem; + display: flex; + align-items: center; + flex-shrink: 0; + padding-right: 0.8rem; + } + + .titleContainer { + justify-content: flex-start; + } + + .placesContainer { + justify-content: flex-end; + } + + h1, + h2 { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + + h1 { + @include typography(subTitle); + color: $neutral900; + } + + h2 { + @include typography(tabLabel); + color: $primary300; + } +} diff --git a/src/components/Route/AddPlace/FromVote/VoteCard/VoteCard.tsx b/src/components/Route/AddPlace/FromVote/VoteCard/VoteCard.tsx new file mode 100644 index 00000000..f1b640b1 --- /dev/null +++ b/src/components/Route/AddPlace/FromVote/VoteCard/VoteCard.tsx @@ -0,0 +1,113 @@ +import { + Accordion, + AccordionButton, + AccordionItem, + AccordionPanel, +} from "@chakra-ui/react"; +import { useState } from "react"; +import { AiFillCaretDown as DownIcon } from "react-icons/ai"; +import { AiFillCaretUp as UpIcon } from "react-icons/ai"; + +import styles from "./VoteCard.module.scss"; + +import PlaceList from "../PlaceList/PlaceList"; + +import { VoteCardProps } from "@/types/route"; + +function VoteCard({ id, title }: VoteCardProps) { + // get/:id + const candidates = [ + { + id: 0, + placeId: 0, + placeName: "성심당", + category: "카페", + amIVoted: false, + }, + { + id: 1, + placeId: 0, + placeName: "성심당을 위협하는 핫한 베이커리 카페", + category: "카페", + amIVoted: false, + }, + ]; + + const [selectedPlaces, setSelectedPlaces] = useState([]); + + const handlePlaceSelection = (placeName: string) => { + if (selectedPlaces.includes(placeName)) { + setSelectedPlaces((prevSelectedPlaces) => + prevSelectedPlaces.filter((place) => place !== placeName), + ); + } else { + setSelectedPlaces((prevSelectedPlaces) => [ + ...prevSelectedPlaces, + placeName, + ]); + } + }; + + return ( + <> +
+ + + {({ isExpanded }) => ( +
+ +
+
+

{title}

+
+
+ {selectedPlaces.length > 0 && ( +

{selectedPlaces.join(", ")}

+ )} +
+ {isExpanded ? ( + + ) : ( + + )} +
+ + + {candidates.map((candidate) => ( + + ))} + +
+ )} + + +
+ + ); +} + +export default VoteCard; diff --git a/src/types/route.ts b/src/types/route.ts index 1bf99b5d..00c50491 100644 --- a/src/types/route.ts +++ b/src/types/route.ts @@ -63,3 +63,8 @@ export interface PlaceListProps { category: string; onSelect: (name: string) => void; } + +export interface VoteCardProps { + id: number; + title: string; +} From 215ee731fef1dac100ce8790390cc282f22f3d9e Mon Sep 17 00:00:00 2001 From: JSH99 Date: Thu, 18 Jan 2024 18:41:44 +0900 Subject: [PATCH 5/7] Feat: create from vote component --- .../CompletedVote/CompletedVote.module.scss | 36 ++++++++ .../FromVote/CompletedVote/CompletedVote.tsx | 85 +++++++++++++++++++ .../InProgressVote/InProgressVote.module.scss | 26 ++++++ .../InProgressVote/InProgressVote.tsx | 73 ++++++++++++++++ 4 files changed, 220 insertions(+) create mode 100644 src/components/Route/AddPlace/FromVote/CompletedVote/CompletedVote.module.scss create mode 100644 src/components/Route/AddPlace/FromVote/CompletedVote/CompletedVote.tsx create mode 100644 src/components/Route/AddPlace/FromVote/InProgressVote/InProgressVote.module.scss create mode 100644 src/components/Route/AddPlace/FromVote/InProgressVote/InProgressVote.tsx diff --git a/src/components/Route/AddPlace/FromVote/CompletedVote/CompletedVote.module.scss b/src/components/Route/AddPlace/FromVote/CompletedVote/CompletedVote.module.scss new file mode 100644 index 00000000..be3a2f13 --- /dev/null +++ b/src/components/Route/AddPlace/FromVote/CompletedVote/CompletedVote.module.scss @@ -0,0 +1,36 @@ +@use "@/sass" as *; + +.completedVoteContainer { + padding: 8px 20px 36px 20px; + display: flex; + flex-direction: column; + gap: 1.6rem; + + header { + display: flex; + justify-content: space-between; + + div, + button { + display: flex; + align-items: center; + gap: 0.2rem; + + h2 { + @include typography(titleMedium); + color: $neutral900; + } + + span { + @include typography(tabLabel); + color: $neutral800; + } + } + } + + .voteListContainer { + display: flex; + flex-direction: column; + gap: 0.8rem; + } +} diff --git a/src/components/Route/AddPlace/FromVote/CompletedVote/CompletedVote.tsx b/src/components/Route/AddPlace/FromVote/CompletedVote/CompletedVote.tsx new file mode 100644 index 00000000..d6039fc7 --- /dev/null +++ b/src/components/Route/AddPlace/FromVote/CompletedVote/CompletedVote.tsx @@ -0,0 +1,85 @@ +import { GiRoundStar as CompletedIcon } from "react-icons/gi"; +import { MdOutlineReplay as ResetIcon } from "react-icons/md"; + +import styles from "./CompletedVote.module.scss"; + +import VoteCard from "@/components/Route/AddPlace/FromVote/VoteCard/VoteCard"; + +function CompletedVote() { + const voteList = [ + { + voteId: 0, + title: "카페 어디 갈 거야?", + voteStatus: "VOTING", + }, + { + voteId: 1, + title: "숙소 어디로 할까? 여기 어때? 저기 어때?", + voteStatus: "VOTING", + }, + { + voteId: 2, + title: "둘째 날 숙소 어디서 묵을래?", + voteStatus: "COMPLETED", + }, + { + voteId: 3, + title: "루프탑 카페 정하자~", + voteStatus: "COMPLETED", + }, + { + voteId: 4, + title: "여기 어때?", + voteStatus: "COMPLETED", + }, + { + voteId: 5, + title: "저기 어때?", + voteStatus: "COMPLETED", + }, + { + voteId: 6, + title: "요기요", + voteStatus: "COMPLETED", + }, + { + voteId: 7, + title: "겨울 여행", + voteStatus: "VOTING", + }, + { + voteId: 8, + title: "가자", + voteStatus: "VOTING", + }, + ]; + + const handleResetButtonClick = () => { + console.log("리셋"); + }; + + return ( +
+
+
+

결정 완료된 투표

+ +
+ +
+
+ {voteList.map( + (vote) => + vote.voteStatus === "COMPLETED" && ( + + ), + )} +
+
+ ); +} + +export default CompletedVote; diff --git a/src/components/Route/AddPlace/FromVote/InProgressVote/InProgressVote.module.scss b/src/components/Route/AddPlace/FromVote/InProgressVote/InProgressVote.module.scss new file mode 100644 index 00000000..8d30b96f --- /dev/null +++ b/src/components/Route/AddPlace/FromVote/InProgressVote/InProgressVote.module.scss @@ -0,0 +1,26 @@ +@use "@/sass" as *; + +.inProgressVoteContainer { + padding: 0 20px; + display: flex; + flex-direction: column; + gap: 1.6rem; + margin-bottom: 12rem; + + header { + display: flex; + justify-content: flex-start; + gap: 0.2rem; + + h2 { + @include typography(titleMedium); + color: $neutral900; + } + } + + .voteListContainer { + display: flex; + flex-direction: column; + gap: 0.8rem; + } +} diff --git a/src/components/Route/AddPlace/FromVote/InProgressVote/InProgressVote.tsx b/src/components/Route/AddPlace/FromVote/InProgressVote/InProgressVote.tsx new file mode 100644 index 00000000..7c3fafad --- /dev/null +++ b/src/components/Route/AddPlace/FromVote/InProgressVote/InProgressVote.tsx @@ -0,0 +1,73 @@ +import { AiOutlineComment as InProgressIcon } from "react-icons/ai"; + +import styles from "./InProgressVote.module.scss"; + +import VoteCard from "@/components/Route/AddPlace/FromVote/VoteCard/VoteCard"; +function InProgressVote() { + const voteList = [ + { + voteId: 0, + title: "카페 어디 갈 거야?", + voteStatus: "VOTING", + }, + { + voteId: 1, + title: "숙소 어디로 할까? 여기 어때? 저기 어때?", + voteStatus: "VOTING", + }, + { + voteId: 2, + title: "둘째 날 숙소 어디서 묵을래?", + voteStatus: "COMPLETED", + }, + { + voteId: 3, + title: "루프탑 카페 정하자~", + voteStatus: "COMPLETED", + }, + { + voteId: 4, + title: "여기 어때?", + voteStatus: "COMPLETED", + }, + { + voteId: 5, + title: "저기 어때?", + voteStatus: "COMPLETED", + }, + { + voteId: 6, + title: "요기요", + voteStatus: "COMPLETED", + }, + { + voteId: 7, + title: "겨울 여행", + voteStatus: "VOTING", + }, + { + voteId: 8, + title: "가자", + voteStatus: "VOTING", + }, + ]; + + return ( +
+
+

진행 중인 투표

+ +
+
+ {voteList.map( + (vote) => + vote.voteStatus === "COMPLETED" && ( + + ), + )} +
+
+ ); +} + +export default InProgressVote; From 87d795e50f95ceb94bc536176f464deb803653b4 Mon Sep 17 00:00:00 2001 From: JSH99 Date: Thu, 18 Jan 2024 18:47:19 +0900 Subject: [PATCH 6/7] Feat: create add place from vote page --- .../AddPlaceFromVote.module.scss | 27 ++++++++++++++++ .../AddPlaceFromVote/AddPlaceFromVote.tsx | 32 +++++++++++++++++++ src/routes/MainRouter/MainRouter.tsx | 2 ++ 3 files changed, 61 insertions(+) create mode 100644 src/pages/AddPlaceFromVote/AddPlaceFromVote.module.scss create mode 100644 src/pages/AddPlaceFromVote/AddPlaceFromVote.tsx diff --git a/src/pages/AddPlaceFromVote/AddPlaceFromVote.module.scss b/src/pages/AddPlaceFromVote/AddPlaceFromVote.module.scss new file mode 100644 index 00000000..6a86d3b5 --- /dev/null +++ b/src/pages/AddPlaceFromVote/AddPlaceFromVote.module.scss @@ -0,0 +1,27 @@ +@use "@/sass" as *; + +.FromVoteContainer { + -ms-overflow-style: none; + scrollbar-width: none; + ::-webkit-scrollbar { + display: none; + } + margin-top: 7rem; + + .navContainer { + position: fixed; + top: 0; + width: 100%; + min-width: 36rem; + max-width: 45rem; + display: flex; + justify-content: flex-start; + align-items: center; + gap: 1.2rem; + + h1 { + @include typography(button); + color: $neutral900; + } + } +} diff --git a/src/pages/AddPlaceFromVote/AddPlaceFromVote.tsx b/src/pages/AddPlaceFromVote/AddPlaceFromVote.tsx new file mode 100644 index 00000000..c74f6bf5 --- /dev/null +++ b/src/pages/AddPlaceFromVote/AddPlaceFromVote.tsx @@ -0,0 +1,32 @@ +import { Button } from "@chakra-ui/react"; + +import styles from "./AddPlaceFromVote.module.scss"; + +import useGoBack from "@/hooks/useGoBack"; + +import CompletedVote from "@/components/Route/AddPlace/FromVote/CompletedVote/CompletedVote"; +import InProgressVote from "@/components/Route/AddPlace/FromVote/InProgressVote/InProgressVote"; + +import BackIcon from "@/assets/back.svg?react"; + +function AddPlaceFromVote() { + const goBack = useGoBack(); + + return ( +
+ + + + +
+ ); +} + +export default AddPlaceFromVote; diff --git a/src/routes/MainRouter/MainRouter.tsx b/src/routes/MainRouter/MainRouter.tsx index 9f720865..9b4faab1 100644 --- a/src/routes/MainRouter/MainRouter.tsx +++ b/src/routes/MainRouter/MainRouter.tsx @@ -1,5 +1,6 @@ import { Route, Routes } from "react-router-dom"; +import AddPlaceFromVote from "@/pages/AddPlaceFromVote/AddPlaceFromVote"; import Alarm from "@/pages/Alarm/Alarm"; import FindPassword from "@/pages/Auth/FindPassword/FindPassword"; import Login from "@/pages/Auth/Login/Login"; @@ -35,6 +36,7 @@ function MainRouter() { } /> } /> } /> + } /> ); } From 1e588281fac835e1f929b0afe9f85f6edd87a091 Mon Sep 17 00:00:00 2001 From: JSH99 Date: Thu, 18 Jan 2024 19:01:40 +0900 Subject: [PATCH 7/7] Fix: fix unused error --- src/components/Route/AddPlace/FromVote/PlaceList/PlaceList.tsx | 3 +++ src/components/Route/AddPlace/FromVote/VoteCard/VoteCard.tsx | 3 +++ 2 files changed, 6 insertions(+) diff --git a/src/components/Route/AddPlace/FromVote/PlaceList/PlaceList.tsx b/src/components/Route/AddPlace/FromVote/PlaceList/PlaceList.tsx index 80cd682d..db22aa63 100644 --- a/src/components/Route/AddPlace/FromVote/PlaceList/PlaceList.tsx +++ b/src/components/Route/AddPlace/FromVote/PlaceList/PlaceList.tsx @@ -12,6 +12,9 @@ function PlaceList({ id, name, category, onSelect }: PlaceListProps) { onSelect(name); }; + // 임시 코드 + console.log(id); + return (