-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
add : 이전 외출
- Loading branch information
Showing
10 changed files
with
247 additions
and
56 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,44 @@ | ||
| import { useState, useRef, useEffect } from "react"; | ||
|
|
||
| const ScheduleFix = () => { | ||
| const [isOptionsVisible, setOptionsVisible] = useState(false); | ||
| const dropdownRef = useRef<HTMLDivElement>(null); | ||
|
|
||
| const toggleOptions = () => { | ||
| setOptionsVisible(!isOptionsVisible); | ||
| }; | ||
|
|
||
| useEffect(() => { | ||
| const handleClickOutside = (event: MouseEvent) => { | ||
| if ( | ||
| dropdownRef.current && | ||
| !dropdownRef.current.contains(event.target as Node) | ||
| ) { | ||
| setOptionsVisible(false); | ||
| } | ||
| }; | ||
|
|
||
| document.addEventListener("mousedown", handleClickOutside); | ||
| return () => { | ||
| document.removeEventListener("mousedown", handleClickOutside); | ||
| }; | ||
| }, []); | ||
|
|
||
| return ( | ||
| <div className="relative group cursor-grab" onClick={toggleOptions}> | ||
| <div className="group flex flex-col gap-0.5"> | ||
| <div className="rounded-full w-1 h-1 bg-neutral-400"></div> | ||
| <div className="rounded-full w-1 h-1 bg-neutral-400"></div> | ||
| <div className="rounded-full w-1 h-1 bg-neutral-400"></div> | ||
| </div> | ||
| {isOptionsVisible && ( | ||
| <div className="bg-white rounded w-16 shadow-lg text-caption3 absolute right-0 text-nowrap"> | ||
| <div className=" flex p-1">수정하기</div> | ||
| <div className="flex p-1">삭제하기</div> | ||
| </div> | ||
| )} | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default ScheduleFix; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
| "use client"; | ||
|
|
||
| import Image from "next/image"; | ||
| import { useState } from "react"; | ||
| import arrow from "@/assets/img/Icon/chevron-right.svg"; | ||
| import downarrow from "@/assets/img/Icon/downarrow.svg"; | ||
|
|
||
| const PreviousList = () => { | ||
| const [isDropdownVisible, setIsDropdownVisible] = useState<boolean>(false); | ||
|
|
||
| return ( | ||
| <> | ||
| <div className="group bg-white left-5 top-5 rounded-lg p-4 text-label1 w-77 flex justify-between"> | ||
| <div>{"이름"}</div> | ||
| <Image | ||
| src={isDropdownVisible ? `${arrow.src}` : `${downarrow.src}`} | ||
| width={24} | ||
| height={24} | ||
| alt="" | ||
| /> | ||
| </div> | ||
| <BeforeList /> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export default PreviousList; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,118 @@ | ||
| "use client"; | ||
| import React, { useState } from "react"; | ||
| import moment from "moment"; | ||
| import Button from "../../Button"; | ||
| import Input from "../../input"; | ||
| import { AddSchedule } from "@/apis/outList/list"; | ||
|
|
||
| export interface ChangeProps { | ||
| text: string; | ||
| name: string; | ||
| } | ||
|
|
||
| interface ModalProps { | ||
| heading1?: string; | ||
| onCancel: () => void; | ||
| onSuccess: () => void; | ||
| initialDate: Date | null; | ||
| } | ||
|
|
||
| interface ScheduleData { | ||
| eventName: string; | ||
| date: string; | ||
| } | ||
|
|
||
| const PostSchedule: React.FC<ModalProps> = ({ | ||
| heading1, | ||
| onCancel, | ||
| initialDate, | ||
| onSuccess, | ||
| }) => { | ||
| const [selectedDate, setSelectedDate] = useState<Date | null>(null); | ||
| const [scheduleData, setScheduleData] = useState<ScheduleData>({ | ||
| eventName: "", | ||
| date: "", | ||
| }); | ||
| const { mutate: addScheduleMutate } = AddSchedule(); | ||
|
|
||
| const handleChangeDate = (date: Date) => { | ||
| setSelectedDate(date); | ||
| }; | ||
|
|
||
| const handleModalCancel = () => { | ||
| onCancel(); | ||
| }; | ||
|
|
||
| const handleModalConfirm = async () => { | ||
| try { | ||
| const formattedDate = selectedDate | ||
| ? moment(selectedDate).format("YYYY-MM-DD") | ||
| : null; | ||
| const newScheduleData: ScheduleData = { | ||
| eventName: scheduleData.eventName, | ||
| date: formattedDate || "", | ||
| }; | ||
| setScheduleData(newScheduleData); | ||
| await addScheduleMutate(newScheduleData, { | ||
| onSuccess: () => { | ||
| alert("일정이 추가되었습니다"); | ||
| }, | ||
| onError: (error) => { | ||
| console.log(error); | ||
| }, | ||
| }); | ||
| } catch (error) { | ||
| console.log(error); | ||
| } | ||
| }; | ||
|
|
||
| const changeSchedule = ({ text, name }: ChangeProps) => { | ||
| setScheduleData({ ...scheduleData, [name]: text }); | ||
| }; | ||
|
|
||
| return ( | ||
| <div className=" z-10 fixed inset-0 flex items-center justify-center bg-gray-800 bg-opacity-30"> | ||
| <div className=" bg-white rounded-xl px-24 py-13 w-155"> | ||
| <div className="flex flex-col gap-8 items-center"> | ||
| <div className="text-neutral-50 text-center"> | ||
| {heading1 && ( | ||
| <div className="flex gap-1 text-heading6-M max-w-none"> | ||
| <div className="text-primary-400"> | ||
| {initialDate && moment(initialDate).format("M월 DD일")} | ||
| </div> | ||
| <div>{heading1}</div> | ||
| </div> | ||
| )} | ||
| </div> | ||
| <Input | ||
| type="text" | ||
| label="제목*" | ||
| onChange={changeSchedule} | ||
| value={scheduleData.eventName} | ||
| name="eventName" | ||
| placeholder="일정 제목" | ||
| width="92" | ||
| /> | ||
| </div> | ||
| <div className="flex gap-6"> | ||
| <Button | ||
| colorType="ghost" | ||
| buttonSize="large" | ||
| onClick={handleModalCancel} | ||
| > | ||
| 취소 | ||
| </Button> | ||
| <Button | ||
| colorType="primary" | ||
| buttonSize="large" | ||
| onClick={handleModalConfirm} | ||
| > | ||
| 확인 | ||
| </Button> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default PostSchedule; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,38 @@ | ||
| "use client"; | ||
| import Header from "@/app/components/common/Header"; | ||
| import Dropdown from "@/app/components/common/dropdown"; | ||
| import PreviousList from "@/app/components/common/list/before"; | ||
| import Link from "next/link"; | ||
|
|
||
| const Previous = () => { | ||
| return ( | ||
| <div className="flex flex-col"> | ||
| <Header /> | ||
| <div className=" self-center flex flex-col gap-7 py-16 h-90dvh w-3/5"> | ||
| <div className="text-neutral-200 text-sub-title3-B text-nowrap"> | ||
| <Link href="/main">홈</Link> > | ||
| <Link href="/outAccept"> 외출 수락</Link> > 외출 기록 보기 | ||
| </div> | ||
| <div className=" flex justify-between items-center gap-3 flex-wrap"> | ||
| <div className=" text-nowrap flex justify-center items-center font-sans text-heading4 text-gray-900"> | ||
| 외출 기록 보기 | ||
| </div> | ||
| <div className=" flex items-center gap-3"> | ||
| <Dropdown type="grade" /> | ||
| <Dropdown type="class" /> | ||
| </div> | ||
| </div> | ||
| <div className="w-full gap-4 rounded-xl bg-primary-1200 h-full px-10 py-10 overflow-y-scroll scrollbar-hide "> | ||
| <div className="flex gap-4 flex-wrap justify-between"> | ||
| <PreviousList /> | ||
| <PreviousList /> | ||
| <PreviousList /> | ||
| <PreviousList /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default Previous; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters