Skip to content

Commit

Permalink
Merge pull request #144 from JNU-econovation/FE
Browse files Browse the repository at this point in the history 
feat: 생성모달 세부필터 백엔드 연동
  • Loading branch information
@mlnwns
mlnwns authored Jul 23, 2024
2 parents 000496c + bf6afd4 commit 38eb1ce
Show file tree
Hide file tree
Showing 3 changed files with 92 additions and 68 deletions.
5 changes: 1 addition & 4 deletions FE/error/src/components/EconoCalendar.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,12 +26,9 @@ const EconoCalendar = ({ isLoggedIn, setIsLoggedIn }) => {
const uri = isUserLoggedIn
? "/api/calendar/all"
: "/api/calendar/all/public";
const config = isUserLoggedIn
? { headers: { Authorization: `Bearer ${storedToken}` } }
: {};

axios
.get(uri, config)
.get(uri, { headers: { Authorization: `Bearer ${storedToken}` } })
.then((res) => {
const fetchedEvents = res.data.data.map((event) => ({
title: event.eventName,
Expand Down
74 changes: 39 additions & 35 deletions FE/error/src/components/scheduleCreate/CreateModal.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ const CreateModal = ({
const [eventEndTime, setEventEndTime] = useState("00:00");
const [selectedFilter, setSelectedFilter] = useState(null);
const [activeDropdown, setActiveDropdown] = useState(null);
const storedToken = localStorage.getItem("slackToken");
const [privateFilters, setPrivateFilters] = useState([]);

useEffect(() => {
if (isOpen && selectedDate) {
Expand All @@ -39,16 +39,32 @@ const CreateModal = ({
setEventInfo("");
setEventPlace("");
setEventMemo("");
setEventStartTime("00:00"); // 초기화 추가
setEventEndTime("00:00"); // 초기화 추가
setNewStartDate(selectedDate + "T00:00"); // 수정
setNewEndDate(selectedDate + "T00:00"); // 수정

setEventStartTime("00:00");
setEventEndTime("00:00");
setNewStartDate(selectedDate + "T00:00");
setNewEndDate(selectedDate + "T00:00");
setSelectedFilter(null);
setActiveDropdown(null);

fetchFilters();
}
}, [isOpen, selectedDate]);

const storedToken = localStorage.getItem("slackToken");

const fetchFilters = async () => {
try {
const response = await axios.get("/api/filter", {
headers: { Authorization: `Bearer ${storedToken}` },
});
if (response.data && response.data.data) {
setPrivateFilters(response.data.data);
}
} catch (error) {
console.error("필터 정보를 가져오는 데 실패했습니다:", error);
}
};

const isFilterSelected = () => {
return selectedFilter && selectedFilter.category && selectedFilter.filter;
};
Expand Down Expand Up @@ -83,7 +99,6 @@ const CreateModal = ({
setEventStartTime(time);
setNewStartDate(`${StartDate}T${time}`);

// 시작 시간이 종료 시간보다 늦을 경우, 종료 시간을 시작 시간과 같게 설정
if (StartDate === EndDate && time > eventEndTime) {
setEventEndTime(time);
setNewEndDate(`${EndDate}T${time}`);
Expand All @@ -92,7 +107,6 @@ const CreateModal = ({

const handleEndTimeSelect = (time) => {
if (StartDate === EndDate && time < eventStartTime) {
// 종료 시간이 시작 시간보다 이를 경우, 시작 시간을 종료 시간과 같게 설정
setEventStartTime(time);
setNewStartDate(`${StartDate}T${time}`);
}
Expand Down Expand Up @@ -123,11 +137,11 @@ const CreateModal = ({
return selectedFilter.filter;
}
switch (category) {
case "econo":
case "public":
return "에코노";
case "group":
return "그룹";
case "personal":
case "private":
return "개인";
default:
return "";
Expand All @@ -147,7 +161,7 @@ const CreateModal = ({

const saveData = () => {
if (!eventName || !isFilterSelected()) {
return; // 추가적인 안전장치
return;
}

const data = {
Expand All @@ -156,9 +170,8 @@ const CreateModal = ({
eventEndDate: eventEndDate,
eventPlace: eventPlace,
eventInfo: eventMemo,
eventCategory: {
[selectedFilter.category]: selectedFilter.filter,
},
scheduleType: selectedFilter.category,
filterName: selectedFilter.filter,
};

axios
Expand Down Expand Up @@ -200,7 +213,7 @@ const CreateModal = ({
<IconWrapper>
<FaWindowRestore />
</IconWrapper>
{["econo", "group", "personal"].map((category) => (
{["public", "group", "private"].map((category) => (
<DropdownContainer key={category}>
<Button
content={getButtonContent(category)}
Expand All @@ -211,7 +224,7 @@ const CreateModal = ({
/>
{activeDropdown === category && (
<DropdownMenu>
{category === "econo" && (
{category === "public" && (
<>
<DropdownItem
onClick={() => handleFilterSelect(category, "공식행사")}
Expand All @@ -229,38 +242,29 @@ const CreateModal = ({
<>
<DropdownItem
onClick={() =>
handleFilterSelect(category, "그룹필터1")
handleFilterSelect(category, "28기 신입모집 TF")
}
>
그룹필터1
28기 신입모집 TF
</DropdownItem>
<DropdownItem
onClick={() =>
handleFilterSelect(category, "그룹필터2")
}
onClick={() => handleFilterSelect(category, "행사부")}
>
그룹필터2
행사부
</DropdownItem>
</>
)}
{category === "personal" && (
<>
{category === "private" &&
privateFilters.map((filter) => (
<DropdownItem
key={filter.filterId}
onClick={() =>
handleFilterSelect(category, "개인필터1")
handleFilterSelect(category, filter.filterName)
}
>
개인필터1
{filter.filterName}
</DropdownItem>
<DropdownItem
onClick={() =>
handleFilterSelect(category, "개인필터2")
}
>
개인필터2
</DropdownItem>
</>
)}
))}
</DropdownMenu>
)}
</DropdownContainer>
Expand Down
81 changes: 52 additions & 29 deletions FE/error/src/pages/MainPage.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,46 +42,37 @@ const MainPage = () => {
filterName: filter.filterName,
filterColor: filter.filterColor,
}));
/*[
{
filterId: 1,
filterName: 'hi',
filterColor: 'pink'
},
{
filterId: 2,
filterName: 'hi',
filterColor: 'pink'
}
]*/
setFilterIndividualLists(fetchedFilter);
})
.catch((err) => {
console.log("Error fetching events:", err);
});
}, []);

return (
<div>
<CalendarPage>
<SideBar>
<Logo>ERROR</Logo>
<LineBox />
<ProfileBar />
<FilterFrame>
<PublicFilter />
{isLoggedIn && (
<>
<GroupFilter
filterLists={filterGroupLists}
addNewFilter={addNewGroupFilter}
/>
<IndividualFilter
filterLists={filterIndividualLists}
addNewFilter={addNewIndividualFilter}
/>
</>
)}
</FilterFrame>
<ScrollableContent>
<ProfileBar />
<FilterFrame>
<PublicFilter />
{isLoggedIn && (
<>
<GroupFilter
filterLists={filterGroupLists}
addNewFilter={addNewGroupFilter}
/>
<IndividualFilter
filterLists={filterIndividualLists}
addNewFilter={addNewIndividualFilter}
/>
</>
)}
</FilterFrame>
</ScrollableContent>
</SideBar>
<EconoCalendar isLoggedIn={isLoggedIn} setIsLoggedIn={setIsLoggedIn} />
</CalendarPage>
Expand All @@ -95,6 +86,8 @@ const SideBar = styled.div`
width: 15.625rem;
height: 98.1vh;
margin-top: 1rem;
display: flex;
flex-direction: column;
`;

const CalendarPage = styled.div`
Expand All @@ -107,7 +100,7 @@ const LineBox = styled.div`
height: 1.25rem;
border: 1px solid #ddd;
border-right: none;
margin-top: 1.63em;
margin-top: 0.65rem;
`;

const Logo = styled.div`
Expand All @@ -119,6 +112,36 @@ const Logo = styled.div`
margin-bottom: 1rem;
`;

const ScrollableContent = styled.div`
flex-grow: 1;
overflow-y: auto;
overflow-x: hidden;
/* 기본적으로 스크롤바를 숨김 */
scrollbar-width: thin;
scrollbar-color: transparent transparent;
/* 호버 시 스크롤바 표시 */
&:hover {
scrollbar-color: #c6c6c6 transparent;
}
/* Webkit 브라우저 (Chrome, Safari 등)를 위한 스타일 */
&::-webkit-scrollbar {
width: 8px;
}
&::-webkit-scrollbar-track {
background: transparent;
}
&::-webkit-scrollbar-thumb {
background-color: transparent;
border-radius: 20px;
border: 3px solid transparent;
}
`;

const FilterFrame = styled.div`
display: flex;
flex-direction: column;
Expand Down

0 comments on commit 38eb1ce

Please sign in to comment.