Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: 생성모달 세부필터 백엔드 연동 #144

Merged
merged 6 commits into from
Jul 23, 2024
Merged

feat: 생성모달 세부필터 백엔드 연동 #144

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
9a30ec4
feat: 일정 조회 경로 수정
mlnwns Jul 23, 2024
294e282
feat: 생성 모달 개인 세부 필터 백엔드 연동
mlnwns Jul 23, 2024
056f5a0
feat: 사이드바 스크롤 기능 구현
mlnwns Jul 23, 2024
d527eeb
feat: get요청 헤더에 토큰 첨부
mlnwns Jul 23, 2024
2b9471c
Merge branch 'FE' into feat/134/filter-name-link
mlnwns Jul 23, 2024
bf6afd4
Merge pull request #143 from JNU-econovation/feat/134/filter-name-link
mlnwns Jul 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 1 addition & 4 deletions FE/error/src/components/EconoCalendar.jsx
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading