WithTimeFE/src/components/dateCourse/dateCourse.tsx at 949c8c8077de5ab818014a5809ffe77d5b31b49f · WithTime12/WithTimeFE · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
import { useEffect, useRef, useState } from 'react';

import Info from './info';
import Timeline from './timeline';
import DeleteBookmarkModal from '../modal/deleteBookmarkModal';

import BookmarkBlank from '@/assets/icons/Bookmark_Blank.svg?react';
import BookmarkFill from '@/assets/icons/Bookmark_Fill.svg?react';
import KeyboardArrowDown from '@/assets/icons/keyboard_arrow_down_False.svg?react';

function DateCourse({ defaultOpen = false }: { defaultOpen?: boolean }) {
    const [open, setOpen] = useState(defaultOpen || false);
    const [openEdit, setOpenEdit] = useState(false);
    const [openModal, setOpenModal] = useState(false);
    const [isBookmarked, setIsBookmarked] = useState(false);
    const moreRef = useRef<HTMLDivElement>(null);
    const clickBookmark = () => {
        if (isBookmarked) {
            setOpenModal(true);
        } else {
            setIsBookmarked(!isBookmarked);
        }
    };

    useEffect(() => {
        const handleClickOutside = (event: MouseEvent) => {
            if (openEdit && moreRef.current && !moreRef.current.contains(event.target as Node)) {
                setOpenEdit(false);
            }
        };

        document.addEventListener('mousedown', handleClickOutside);
        return () => document.removeEventListener('mousedown', handleClickOutside);
    }, [openEdit]);

    return (
        <div className="flex flex-col h-fit w-full min-w-[250px] self-center rounding-32 border-b-[1px] border-r-[1px] border-l-[1px] border-primary-700 bg-default-gray-100">
            <div
                className={`w-full rounding-32 flex border-primary-700 px-[24px] py-[16px] bg-default-gray-100 shadow-default
                    ${open ? 'border-[1px]' : 'border-t-[1px]'}
                `}
            >
                <div className="flex w-full justify-between items-center">
                    <div className="flex items-center hover:cursor-pointer" onClick={() => setOpen(!open)}>
                        {open ? <KeyboardArrowDown /> : <KeyboardArrowDown className="rotate-270" />}

                        <div className="text-default-gray-800 gap-[4px] select-none flex flex-col sm:flex-row pl-[4px]">
                            <span>2025.06.01</span> <span>데이트코스</span>
                        </div>
                    </div>
                    <div className="flex">
                        {isBookmarked ? (
                            <BookmarkFill fill="#4b4b4b" className="hover:cursor-pointer" onClick={clickBookmark} />
                        ) : (
                            <BookmarkBlank stroke="#212121" className="hover:cursor-pointer" onClick={clickBookmark} />
                        )}
                    </div>
                </div>
            </div>

            {open && (
                <div className="w-full flex h-fit bg-default-gray-100 rounding-32 justify-center items-start self-stretch">
                    <div className="w-full lg:px-[48px] px-[24px] py-[40px] gap-[48px] flex justify-between h-fit lg:flex-row flex-col">
                        <div className="flex flex-col lg:w-[60%] gap-[16px]">
                            <Timeline
                                title="브리비트 성수"
                                time="12:00"
                                address="서울 성동구 왕십리로2길 30 1층"
                                price="평균 5000원"
                                tags={['감성 카페', '디저트 맛집']}
                                menu="카라멜 밀크"
                            />
                            <Timeline
                                title="라블랑 성수"
                                time="13:00"
                                address="서울 성동구 왕십리로2길 30 1층"
                                price="평균 5000원"
                                tags={['감성 카페', '디저트 맛집']}
                                menu="카라멜 밀크"
                            />
                            <Timeline end={true} time="14:00" />
                        </div>
                        <div className="border-[0.5px] border-default-gray-700 w-full lg:w-[1px]" />
                        <div className="flex flex-col lg:w-[50%]">
                            <Info
                                cashTag={'3만원 이상'}
                                locationTag={'서울 성수동'}
                                timeTag={'3~4시간'}
                                MealTag={'점심'}
                                keywordTags={[
                                    '감성 카페',
                                    '디저트 맛집',
                                    '디저트 맛집',
                                    '로컬 푸드',
                                    '감성 카페',
                                    '디저트',
                                    '감성',
                                    '디저트 맛집',
                                    '감성 카페',
                                    '디저트 맛집',
                                    '감성 카페',
                                    '디저트 맛집',
                                ]}
                            />
                        </div>
                    </div>
                </div>
            )}
            {openModal && (
                <DeleteBookmarkModal
                    onClose={() => {
                        setOpenModal(false);
                    }}
                    changeState={(state: boolean) => {
                        setIsBookmarked(state);
                    }}
                    isOpen={openModal}
                />
            )}
        </div>
    );
}

export default DateCourse;