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

#315 feat: 이메일 예약 발송, 설문조사 링크 발송 페이지 UI 수정 및 API 연동 #316

Merged
merged 6 commits into from
Sep 20, 2024
Merged

#315 feat: 이메일 예약 발송, 설문조사 링크 발송 페이지 UI 수정 및 API 연동 #316

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
2024111
#315 feat: 이메일 발송 페이지들 UI 수정
misung-dev Sep 20, 2024
026f0cb
#315 design: 버튼 컴포넌트 높이 수정
misung-dev Sep 20, 2024
372016c
#315 feat: 설문조사 링크 조회 API 연동
misung-dev Sep 20, 2024
aa3464f
#315 feat: 메일 제목 불러오는 API 연동
misung-dev Sep 20, 2024
d5f50f7
#315 design: 버튼 반응형 적용 및 이메일 페이지 UI 재수정
misung-dev Sep 20, 2024
e4c4620
#315 feat: 이메일 수정하는 함수 추가
misung-dev Sep 20, 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
10 changes: 8 additions & 2 deletions src/components/Button/Button.style.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,19 @@ export const Button = styled.button`
align-items: center;
border-radius: 8px;
padding: 13px 22px;
height: 45px;
background: ${(props) => props.backgroundColor};
color: ${(props) => props.textColor};
font-size: 16px;
font-weight: 600;

@media (max-width: ${BREAKPOINTS[0]}px) {
@media (max-width: ${BREAKPOINTS[1]}px) {
padding: 10px 18px;
font-size: 14px;
height: 35px;
font-size: 12px;
}
@media (max-width: ${BREAKPOINTS[0]}px) {
padding: 6px 10px;
height: 30px;
}
`;
64 changes: 47 additions & 17 deletions src/pages/DashboardPage/DashboardEmailPage/DashboardEmailPage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,21 @@
import { useState, useEffect } from 'react';
import { PageLayout } from '@/Layout';
import * as S from './DashboardEmailPage.style';
import { Sidebar, Button, TopNavigation, Textarea } from '@/components';
import { Sidebar, Button, TopNavigation, Textarea, Input } from '@/components';
import { useRecoilValue } from 'recoil';
import { eventDetail, eventIDState } from '@/recoil/atoms/state';
import { axiosInstance } from '@/axios';

export default function DashboardEmailPage() {
const eventId = useRecoilValue(eventIDState) || eventDetail.id;
const [surveyUrl, setSurveyUrl] = useState('');
const [isModified, setIsModified] = useState(false);
const [isSaving, setIsSaving] = useState(false);
const [emailTitle, setEmailTitle] = useState('');
const [emailContent, setEmailContent] = useState('');
const [isLoading, setIsLoading] = useState(true);

useEffect(() => {
const fetchEmailContent = async () => {
const getEmailContent = async () => {
try {
const response = await axiosInstance.get(
`/api/v1/events/mail/content/${eventId}`,
Expand All @@ -26,7 +26,9 @@ export default function DashboardEmailPage() {
},
);
if (response.status === 200) {
setEmailContent(response.data.content);
setEmailContent(response.data.mailContent);
setEmailTitle(response.data.mailTitle);
console.log(response);
}
} catch (error) {
console.error('이메일 내용 불러오기 실패:', error);
Expand All @@ -35,14 +37,21 @@ export default function DashboardEmailPage() {
}
};

fetchEmailContent();
getEmailContent();
}, [eventId]);

// 메일 제목 수정 핸들러
const handleTitleChange = (e) => {
const newEmailTitle = e.target.value;
setEmailTitle(newEmailTitle);
setIsModified(newEmailTitle !== '' || emailContent !== '');
};

// 메일 내용 수정 핸들러
const handleTextareaChange = (e) => {
const newEmailContent = e.target.value;

setEmailContent(newEmailContent);
setIsModified(newEmailContent !== '');
setIsModified(newEmailContent !== '' || emailTitle !== '');
};

// 저장하기 버튼
Expand All @@ -54,6 +63,10 @@ export default function DashboardEmailPage() {
try {
const response = await axiosInstance.put(
`/api/v1/events/mail/content/${eventId}`,
{
mailTitle: emailTitle,
mailContent: emailContent,
},
);

if (response.status === 200) {
Expand Down Expand Up @@ -82,6 +95,11 @@ export default function DashboardEmailPage() {
<Button
label={isSaving ? '저장 중...' : '저장하기'}
onClick={handleSaveButtonClick}
disabled={!isModified || isSaving}
style={{
backgroundColor: isModified ? '#007bff' : '#ccc',
cursor: isModified ? 'pointer' : 'not-allowed',
}}
/>
</S.ButtonContainer>
</S.TopContainer>
Expand All @@ -94,17 +112,29 @@ export default function DashboardEmailPage() {
<em>행사 안내 메일 내용</em>을 수정해 주세요.
</S.ContentDesc>
</S.Content>

{isLoading ? (
<p>로딩 중...</p>
) : (
<Textarea
placeholder="행사 안내 메일 내용을 작성해 주세요."
value={emailContent}
onChange={handleTextareaChange}
height="300px"
<S.Content>
<S.ContentTitle>메일 제목</S.ContentTitle>
<Input
placeholder="행사 안내 메일 제목을 작성해 주세요."
value={emailTitle}
onChange={handleTitleChange}
/>
)}
</S.Content>

<S.Content>
<S.ContentTitle>메일 내용</S.ContentTitle>

{isLoading ? (
<p>로딩 중...</p>
) : (
<Textarea
placeholder="행사 안내 메일 내용을 작성해 주세요."
value={emailContent}
onChange={handleTextareaChange}
height="300px"
/>
)}
</S.Content>
</S.ContentContainer>
</S.DashboardEmailPage>
</PageLayout>
Expand Down
55 changes: 39 additions & 16 deletions src/pages/DashboardPage/DashboardSurveyPage/DashboardSurveyPage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { useState } from 'react';
import { useEffect, useState } from 'react';
import { PageLayout } from '@/Layout';
import * as S from './DashboardSurveyPage.style';
import { Sidebar, Button, TopNavigation, Input } from '@/components';
Expand All @@ -12,17 +12,28 @@ export default function DashboardSurveyPage() {
const [isModified, setIsModified] = useState(false);
const [isSaving, setIsSaving] = useState(false);

const handleInputChange = (e) => {
const newValue = e.target.value;
setSurveyUrl(newValue);
// 설문조사 링크 가져오기
useEffect(() => {
const getSurveyUrl = async () => {
try {
const response = await axiosInstance.get(
`/api/v1/events/survey/${eventId}`,
);

if (newValue !== '') {
setIsModified(true);
} else {
setIsModified(false);
}
};
if (response.status === 200 && response.data) {
setSurveyUrl(response.data);
} else {
console.error(response);
}
} catch (error) {
console.error('설문 조사 링크를 불러오는 중 오류 발생:', error);
}
};

getSurveyUrl();
}, [eventId]);

// 설문조사 링크 수정
const handleSaveButtonClick = async () => {
if (!isModified) return;

Expand All @@ -47,14 +58,26 @@ export default function DashboardSurveyPage() {
}
};

// 저장하기 버튼
const handleInputChange = (e) => {
const newValue = e.target.value;
setSurveyUrl(newValue);

if (newValue !== '') {
setIsModified(true);
} else {
setIsModified(false);
}
};

return (
<PageLayout
topNavigation={<TopNavigation eventTitle={eventDetail.eventTitle} />}
sideBar={<Sidebar />}
>
<S.DashboardSurveyPage>
<S.TopContainer>
<S.Title>설문 조사 링크 발송</S.Title>
<S.Title>WISE 설문 조사 링크 발송</S.Title>
<S.ButtonContainer>
<Button
label={isSaving ? '저장 중...' : '저장하기'}
Expand All @@ -76,12 +99,12 @@ export default function DashboardSurveyPage() {
<em>설문조사 링크</em>를 등록해 주세요. <br /> 링크가 등록되지
않으면, 행사 등록 시 입력한 WISE 링크로 대신 발송됩니다.
</S.ContentDesc>
<Input
placeholder="https://wise.sookmyung.ac.kr/ko/module/eco/@poll/write/4625/0"
value={surveyUrl}
onChange={handleInputChange}
/>
</S.Content>
<Input
placeholder="https://wise.sookmyung.ac.kr/ko/module/eco/@poll/write/4625/0"
value={surveyUrl}
onChange={handleInputChange}
/>
</S.ContentContainer>
</S.DashboardSurveyPage>
</PageLayout>
Expand Down