Skip to content

Commit 01466d4

Browse files
gihwan-devgihwan-dev
committed
Merge branch 'dev' of https://github.com/imaginer-dev/DateLeaf into 29-๊ทธ๋ฃน-์ผ์ •๊ณผ-๊ด€๋ จ๋œ-๋ฐ์ดํ„ฐ๋ฅผ-์ˆ˜์ •ํ• -์ˆ˜-์žˆ์–ด์•ผํ•œ๋‹ค
2 parents ad43918 + d224d6c commit 01466d4

File tree

16 files changed

+305
-86
lines changed

16 files changed

+305
-86
lines changed

โ€Žsrc/App.tsxโ€Ž

Lines changed: 2 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,7 @@
1-
import { Calendar } from './components/common/Calendar.tsx';
1+
import MyCalendarPage from './pages/MyCalendarPage';
22

33
function App() {
4-
return (
5-
<div>
6-
<header className="relative z-10">
7-
<div className="drawer">
8-
<input id="my-drawer-3" type="checkbox" className="drawer-toggle" />
9-
<div className="drawer-content flex flex-col">
10-
{/* Navbar */}
11-
<div className="navbar w-full">
12-
<div className="flex-none lg:hidden">
13-
<label htmlFor="my-drawer-3" aria-label="open sidebar" className="btn btn-square btn-ghost">
14-
<svg
15-
xmlns="http://www.w3.org/2000/svg"
16-
fill="none"
17-
viewBox="0 0 24 24"
18-
className="inline-block h-6 w-6 stroke-current"
19-
>
20-
<path
21-
strokeLinecap="round"
22-
strokeLinejoin="round"
23-
strokeWidth="2"
24-
d="M4 6h16M4 12h16M4 18h16"
25-
></path>
26-
</svg>
27-
</label>
28-
</div>
29-
<div className="flex-1">
30-
<h1 className="flex-end min-w-40 rounded bg-base-200 p-2 text-center text-sm">๊ฐœ์ธ ์ผ์ • ์บ˜๋ฆฐ๋”</h1>
31-
</div>
32-
</div>
33-
</div>
34-
<div className="drawer-side">
35-
<label htmlFor="my-drawer-3" aria-label="close sidebar" className="drawer-overlay"></label>
36-
<ul className="menu min-h-full w-80 bg-base-200 p-4">
37-
{/* Sidebar content here */}
38-
<li>
39-
<a>๊ทธ๋ฃน ์ผ์ • ์บ˜๋ฆฐ๋” 1</a>
40-
</li>
41-
<li>
42-
<a>๊ทธ๋ฃน ์ผ์ • ์บ˜๋ฆฐ๋” 2</a>
43-
</li>
44-
</ul>
45-
</div>
46-
</div>
47-
</header>
48-
<main className="z-1 relative flex-grow">
49-
<div className="ml-auto max-w-7xl px-4 sm:px-6 lg:px-8">
50-
<div className="rounded bg-white p-6 px-4 sm:px-0">
51-
<Calendar />
52-
</div>
53-
</div>
54-
</main>
55-
</div>
56-
);
4+
return <MyCalendarPage />;
575
}
586

597
export default App;

โ€Žsrc/assets/icons/IconClose.tsxโ€Ž

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import { FC } from 'react';
2+
3+
interface Props {
4+
style: string;
5+
}
6+
7+
const IconClose: FC<Props> = ({ style }) => {
8+
return (
9+
<svg
10+
xmlns="http://www.w3.org/2000/svg"
11+
fill="none"
12+
viewBox="0 0 24 24"
13+
strokeWidth="1.5"
14+
stroke="currentColor"
15+
className={`h-6 w-6 ${style}`}
16+
>
17+
<path strokeLinecap="round" strokeLinejoin="round" d="M6 18 18 6M6 6l12 12" />
18+
</svg>
19+
);
20+
};
21+
22+
export default IconClose;

โ€Žsrc/assets/icons/IconLeaf.tsxโ€Ž

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
const IconLeaf = () => {
2+
return (
3+
<svg width="46" height="48" viewBox="0 0 46 48" fill="none" xmlns="http://www.w3.org/2000/svg">
4+
<path
5+
d="M38.3476 42.3332C35.985 42.3332 33.3148 42.3332 30.3858 42.5167C22.9579 42.9754 12.9085 42.165 10.8371 32.1346C7.89185 17.8842 16.4363 6.20248 15.5463 9.04646C8.2155 32.3946 21.7118 37.9143 32.6028 40.7736C35.8879 41.6298 37.7327 41.8286 40.6294 37.5626C44.3514 32.1041 47.7012 21.9055 45.0472 16.9209C39.529 6.66119 19.0093 5.42268 20.2392 1.06498C21.6471 -3.88904 -1.12189 8.74065 0.0432616 32.7004C0.706751 46.3392 13.5234 52.1648 36.082 44.7643C38.3638 44.0151 38.3476 42.3485 38.3476 42.3485V42.3332Z"
6+
fill="#B8EA00"
7+
/>
8+
</svg>
9+
);
10+
};
11+
12+
export default IconLeaf;

โ€Žsrc/assets/icons/index.tsxโ€Ž

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import IconClose from './IconClose';
2+
import IconLeaf from './IconLeaf';
3+
import IconPlus from './IconPlus';
4+
import IconSearch from './IconSearch';
5+
import IconUserPlus from './IconUserPlus';
6+
7+
export { IconClose, IconLeaf, IconPlus, IconSearch, IconUserPlus };

โ€Žsrc/components/MyCalendar/CreateEventButton.tsxโ€Ž

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
import { useEventState } from '@/stores/myEventsStore.ts';
2+
import DialogButton from '@/components/common/DialogButton';
3+
import { InputRef } from '../common/InputForm.tsx';
4+
import { useState, useRef } from 'react';
5+
6+
const CreateEventButton = () => {
7+
const { addEvents } = useEventState();
8+
const [eventTitle, setTitle] = useState('');
9+
const [startDate, setStartDate] = useState('');
10+
const [endDate, setEndDate] = useState('');
11+
const titleRef = useRef<HTMLInputElement>(null);
12+
const startRef = useRef<HTMLInputElement>(null);
13+
const endRef = useRef<HTMLInputElement>(null);
14+
15+
const onTitleChanged = (event: React.ChangeEvent<HTMLInputElement>) => {
16+
setTitle(event.target.value);
17+
};
18+
19+
const onStartDateChanged = (event: React.ChangeEvent<HTMLInputElement>) => {
20+
setStartDate(event.target.value);
21+
};
22+
23+
const onEndDateChanged = (event: React.ChangeEvent<HTMLInputElement>) => {
24+
setEndDate(event.target.value);
25+
};
26+
27+
const onCreateClicked = () => {
28+
if (eventTitle !== '' && startDate !== '') {
29+
addEvents({ title: eventTitle, start: startDate, end: endDate === '' ? startDate : endDate });
30+
}
31+
setTitle('');
32+
setStartDate('');
33+
setEndDate('');
34+
if (titleRef.current) {
35+
titleRef.current.value = '';
36+
}
37+
if (startRef.current) {
38+
startRef.current.value = '';
39+
}
40+
if (endRef.current) {
41+
endRef.current.value = '';
42+
}
43+
};
44+
45+
const eventForm = (
46+
<div>
47+
<hr className="mt-1" />
48+
<InputRef title="์ผ์ • ์ œ๋ชฉ" placeholder="์ƒˆ ์ผ์ • ์ œ๋ชฉ" onChange={onTitleChanged} ref={titleRef} />
49+
<InputRef title="์‹œ์ž‘ ๋‚ ์งœ" placeholder="YYYY-MM-DD" onChange={onStartDateChanged} ref={startRef} />
50+
<InputRef title="๋ ๋‚ ์งœ" placeholder="YYYY-MM-DD" onChange={onEndDateChanged} ref={endRef} />
51+
<hr className="mb-2 mt-2" />
52+
<button className="btn w-full bg-primary text-base-100" onClick={onCreateClicked}>
53+
์ถ”๊ฐ€ํ•˜๊ธฐ
54+
</button>
55+
</div>
56+
);
57+
return (
58+
<div className="p-8">
59+
<DialogButton
60+
classname="btn bg-primary text-base-100 w-full"
61+
name={'์ƒˆ ์ผ์ • ์ถ”๊ฐ€ํ•˜๊ธฐ'}
62+
title={'์ผ์ • ์ถ”๊ฐ€'}
63+
desc={''}
64+
children={eventForm}
65+
/>
66+
</div>
67+
);
68+
};
69+
export default CreateEventButton;

โ€Žsrc/components/common/Calendar.tsxโ€Ž

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,9 @@ import FullCalendar from '@fullcalendar/react';
22
import dayGridPlugin from '@fullcalendar/daygrid';
33
import interactionPlugin from '@fullcalendar/interaction';
44
import { useRef, useState, useEffect } from 'react';
5+
import { useEventState } from '@/stores/myEventsStore';
56

6-
const events = [
7-
{ title: 'Meeting', start: new Date() },
8-
{ title: 'Meeting', start: '2024-05-08' },
9-
{ title: 'Meeting', start: '2024-05-08' },
10-
{ title: 'Meeting', start: '2024-05-08' },
11-
];
12-
13-
export function Calendar() {
7+
const Calendar: React.FC = () => {
148
const [calendarHeight, setCalendarHeight] = useState<string | number>('auto');
159
const calendarRef = useRef<FullCalendar | null>(null);
1610
const handlePrev = () => {
@@ -76,6 +70,7 @@ export function Calendar() {
7670
};
7771
}, [updateSize]);
7872

73+
const events = useEventState();
7974
return (
8075
<div>
8176
<FullCalendar
@@ -116,7 +111,7 @@ export function Calendar() {
116111
/>
117112
</div>
118113
);
119-
}
114+
};
120115

121116
interface EventInfo {
122117
timeText: string;
@@ -135,3 +130,5 @@ function renderEventContent(eventInfo: EventInfo) {
135130
</>
136131
);
137132
}
133+
134+
export default Calendar;

โ€Žsrc/components/common/InputForm.tsxโ€Ž

Lines changed: 29 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
import { HTMLProps } from 'react';
1+
import { HTMLProps, forwardRef } from 'react';
22

33
interface Props extends HTMLProps<HTMLInputElement> {
44
title: string;
55
placeholder: string;
6-
hint: string;
6+
hint?: string;
77
onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
88
error?: boolean;
99
errorText?: string;
@@ -33,4 +33,31 @@ const InputForm: React.FC<Props> = ({ title, placeholder, hint, onChange, error
3333
);
3434
};
3535

36+
export const InputRef: React.FC<Props> = forwardRef(
37+
({ title, placeholder, hint, onChange, error = false, errorText = '', ...rest }, ref) => {
38+
return (
39+
<label htmlFor={rest.id} className="form-control w-full">
40+
<div className="label">
41+
<span className="label-text">{title}</span>
42+
</div>
43+
<input
44+
id={rest.id}
45+
placeholder={placeholder}
46+
className="input input-bordered w-full"
47+
onChange={onChange}
48+
ref={ref}
49+
{...rest}
50+
/>
51+
{error || hint ? (
52+
<div className="label flex h-8 flex-row items-center">
53+
<span className={`label-text-alt ${error ? 'text-error' : ''}`}>{error ? errorText : hint}</span>
54+
</div>
55+
) : (
56+
''
57+
)}
58+
</label>
59+
);
60+
},
61+
);
62+
3663
export default InputForm;

โ€Žsrc/components/common/UserInvite.tsxโ€Ž

Lines changed: 14 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,25 @@
11
import { FC } from 'react';
22
import DialogButton from '@/components/common/DialogButton';
3-
import IconUserPlus from '@/assets/icons/IconUserPlus';
3+
import { IconUserPlus } from '@/assets/icons';
44
import UserInviteDialog from '@/components/common/UserInviteDialog';
55

6-
const AddCalendarPage: FC = () => {
6+
export const UserInvite: FC = () => {
77
return (
88
<div>
99
๋ฉค๋ฒ„ ์ดˆ๋Œ€ํ•˜๊ธฐ *
10-
<DialogButton
11-
classname={'userInvite bg-base-200 hover:bg-base-300'}
12-
name={<IconUserPlus />}
13-
title={'๋ฉค๋ฒ„ ์ฐพ๊ธฐ'}
14-
desc={''}
15-
children={<UserInviteDialog />}
16-
/>
10+
<ul className="flex gap-2">
11+
<li>
12+
<DialogButton
13+
classname={'userInvite bg-base-200 hover:bg-base-300'}
14+
name={<IconUserPlus />}
15+
title={'๋ฉค๋ฒ„ ์ฐพ๊ธฐ'}
16+
desc={''}
17+
children={<UserInviteDialog />}
18+
/>
19+
</li>
20+
</ul>
1721
</div>
1822
);
1923
};
2024

21-
export default AddCalendarPage;
25+
export default UserInvite;

โ€Žsrc/components/common/UserInviteDialog.tsxโ€Ž

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import InputForm from './InputForm.tsx';
22
import { searchUser } from '../../apis/authApis.ts';
33
import { FC, useState } from 'react';
4-
import IconSearch from '@/assets/icons/IconSearch.tsx';
4+
import { IconSearch } from '@/assets/icons';
55
import UserInviteList from './UserInviteList.tsx';
66

77
const UserInvite: FC = () => {
@@ -13,8 +13,16 @@ const UserInvite: FC = () => {
1313
};
1414

1515
const onSearchClick = () => {
16-
searchUser(email).then((value) => {
17-
setList(value.map(({ user_nickname, id }) => <UserInviteList user_nickname={user_nickname} id={id} />));
16+
searchUser(email).then((nickNames) => {
17+
if (!nickNames.length) {
18+
alert('ํ•ด๋‹น ๋‹‰๋„ค์ž„์„ ์ฐพ์„ ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค.');
19+
return;
20+
}
21+
setList(
22+
nickNames.map(({ user_nickname, id }) => {
23+
return <UserInviteList user_nickname={user_nickname} id={id} />;
24+
}),
25+
);
1826
return list;
1927
});
2028
};

โ€Žsrc/components/common/UserInviteList.tsxโ€Ž

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,22 @@
11
import { FC } from 'react';
2-
import IconPlus from '@/assets/icons/IconPlus.tsx';
2+
import { IconPlus } from '@/assets/icons';
33

44
interface Props {
55
user_nickname: any;
66
id: string;
77
}
88

9-
const UserPlusList: FC<Props> = ({ user_nickname, id }) => {
9+
const UserInviteList: FC<Props> = ({ user_nickname, id }) => {
1010
return (
1111
<li key={id} className="border-b">
12-
<button className="ju btn block flex w-full justify-between border-none bg-transparent" onClick={onPlusClick}>
12+
<button className="ju btn block flex w-full justify-between border-none bg-transparent" onClick={onClick}>
1313
{user_nickname}
1414
<IconPlus />
1515
</button>
1616
</li>
1717
);
1818
};
1919

20-
const onPlusClick = () => {
21-
console.log('aa');
22-
};
20+
const onClick = () => {};
2321

24-
export default UserPlusList;
22+
export default UserInviteList;

0 commit comments

Comments
ย (0)