Skip to content

Commit

Permalink
Merge pull request #104 from teamViNO/feature-077
Browse files Browse the repository at this point in the history
feature-077: 수정사항 반영
  • Loading branch information
whistleJs authored Feb 18, 2024
2 parents 1b4801d + 1732b67 commit f910a81
Show file tree
Hide file tree
Showing 8 changed files with 84 additions and 37 deletions.
Binary file added src/assets/success-mail.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
48 changes: 33 additions & 15 deletions src/components/layout/footer/SendEmail.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,12 @@ import * as FooterStyle from '@/styles/layout/footer';
import { useState } from 'react';

import SendEmailImage from '@/assets/mail.png';
import SuccessSendEmailImage from '@/assets/success-mail.png';
import { postFeedback } from '@/apis/feedback';

const SendEmail = () => {
const [feedback, setFeedback] = useState<string>('');
const [successSend, setSuccessSend] = useState(false);

const handleInputFeedback = (e: React.ChangeEvent<HTMLInputElement>) =>
setFeedback(e.target.value);
Expand All @@ -14,27 +16,43 @@ const SendEmail = () => {
const res = await postFeedback(feedback);
if (res.data.success) {
setFeedback('');
setSuccessSend(true);
return;
}
alert('피드백을 전송하는 과정에서 오류가 발생했습니다.');
};

return (
<FooterStyle.SendEmailWrap>
<FooterStyle.SendEmailImage src={SendEmailImage} alt="메일 보내기" />
<FooterStyle.SendEmailInput
type="text"
placeholder="서비스를 이용하면서 불편하거나, 좋은 피드백이 있다면 보내주세요!"
value={feedback}
onChange={handleInputFeedback}
/>
<FooterStyle.SendEmailButton
onClick={onSendFeedback}
disabled={!feedback}
className={`${!feedback && 'disabled'}`}
>
보내기
</FooterStyle.SendEmailButton>
<FooterStyle.SendEmailWrap className={`${successSend && 'success-send'}`}>
{successSend && (
<>
<FooterStyle.SendEmailImage
src={SuccessSendEmailImage}
alt="메일 보내기"
/>
<FooterStyle.SuccessSendEmail>
소중한 피드백이 전달되었어요!
</FooterStyle.SuccessSendEmail>
</>
)}
{!successSend && (
<>
<FooterStyle.SendEmailImage src={SendEmailImage} alt="메일 보내기" />
<FooterStyle.SendEmailInput
type="text"
placeholder="서비스를 이용하면서 불편하거나, 좋은 피드백이 있다면 보내주세요!"
value={feedback}
onChange={handleInputFeedback}
/>
<FooterStyle.SendEmailButton
onClick={onSendFeedback}
disabled={!feedback}
className={`${!feedback && 'disabled'}`}
>
보내기
</FooterStyle.SendEmailButton>
</>
)}
</FooterStyle.SendEmailWrap>
);
};
Expand Down
5 changes: 3 additions & 2 deletions src/components/layout/sideBar/UserMode.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ const UserMode = () => {
const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
const [categoryName, setCategoryName] = useState('');
const [categoryId, setCategoryId] = useState<number | null>(null);
const [to, setTo] = useState('');
const categories = useRecoilValue(categoryState);
const [isSubCategoryModalOpen, setIsSubCategoryModalOpen] = useState(false);
const grabedCategory = useRef<ISubFolderProps | undefined>(undefined);
Expand Down Expand Up @@ -105,7 +106,7 @@ const UserMode = () => {
setCategoryName={setCategoryName}
setIsSuccessAddCategoryModalOpen={setIsSuccessAddCategoryModalOpen}
topCategoryId={topId}
setCategoryId={setCategoryId}
setTo={setTo}
/>
)}
{isDeleteModalOpen && (
Expand All @@ -119,7 +120,7 @@ const UserMode = () => {
categoryName={categoryName}
setCategoryName={setCategoryName}
setIsSuccessAddCategoryModalOpen={setIsSuccessAddCategoryModalOpen}
categoryId={categoryId}
to={to}
/>
)}
</>
Expand Down
10 changes: 5 additions & 5 deletions src/components/modals/AddCategoryModal.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ interface IAddTopCategoryModalProps extends ICommonModalProps {
isTopCategoryModalOpen: boolean;
setIsSubCategoryModalOpen: React.Dispatch<React.SetStateAction<boolean>>;
topCategoryId: number;
setCategoryId: React.Dispatch<React.SetStateAction<number | null>>;
setTo: React.Dispatch<React.SetStateAction<string>>;
}

const AddCategoryModal = ({
Expand All @@ -29,7 +29,7 @@ const AddCategoryModal = ({
setCategoryName,
setIsSuccessAddCategoryModalOpen,
topCategoryId,
setCategoryId,
setTo,
}: IAddTopCategoryModalProps) => {
const setIsTopCategoryModalOpen = useSetRecoilState(topCategoryModalState);
const { updateCategories } = useUpdateCategories();
Expand Down Expand Up @@ -58,10 +58,10 @@ const AddCategoryModal = ({
: await postSubCategroy(categoryName, topCategoryId);
if (response.isSuccess) {
updateCategories();
setCategoryId(
setTo(
isTopCategoryModalOpen
? response.result.categoryId
: response.result.topCategoryId,
? `${response.result.categoryId}`
: `${response.result.topCategoryId}/${response.result.categoryId}`,
);
setIsSuccessAddCategoryModalOpen(true);
}
Expand Down
6 changes: 3 additions & 3 deletions src/components/modals/SuccessAddCategoryModal.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,14 +10,14 @@ import { ICommonModalProps } from 'types/modal';
import FileImage from '@/assets/file.png';

interface ISuccessAddCategory extends ICommonModalProps {
categoryId: number | null;
to: string;
}

const SuccessAddCategoryModal = ({
categoryName,
setCategoryName,
setIsSuccessAddCategoryModalOpen,
categoryId,
to,
}: ISuccessAddCategory) => {
const onCloseModal = () => {
setIsSuccessAddCategoryModalOpen(false);
Expand All @@ -40,7 +40,7 @@ const SuccessAddCategoryModal = ({
생성 완료!
</SuccessAddCategoryStyles.Title>
<SuccessAddCategoryStyles.GoToCategoryButton
to={`/category/${categoryId}`}
to={`/category/${to}`}
onClick={onCloseModal}
>
보러가기
Expand Down
36 changes: 24 additions & 12 deletions src/pages/HomePage.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React, { useEffect, useRef, useState } from 'react';
import { useRecoilState, useRecoilValue } from 'recoil';
import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
import { IVideoProps } from 'types/videos';

import {
Expand All @@ -19,6 +19,7 @@ import { HomePageContainer } from '@/styles/HomepageStyle';
import { userTokenState } from '@/stores/user';
import { recommendationModalState } from '@/stores/modal';
import { toastListState } from '@/stores/toast';
import { isSideBarOpenState } from '@/stores/ui';

export interface Video {
id: string;
Expand All @@ -30,6 +31,7 @@ export interface Video {

const HomePage: React.FC = () => {
const userToken = useRecoilValue(userTokenState);
const setIsSideBarOpen = useSetRecoilState(isSideBarOpenState);
const isOpenModal = useRecoilValue(recommendationModalState);
const [recentVideos, setRecentVideos] = useState<IVideoProps[]>([]);
const [dummyVideos, setDummyVideos] = useState<IVideoProps[]>([]);
Expand Down Expand Up @@ -68,24 +70,34 @@ const HomePage: React.FC = () => {
setRecentVideos([]);
setDummyVideos(res.result.videos);
});
}, [userToken]);

setIsSideBarOpen(false);
}, [setIsSideBarOpen, userToken]);

return (
<>
<HomePageContainer>
<SearchYoutube searchRef={searchRef} />

{userToken ? (
<div>
<RecentVideos searchRef={searchRef} videos={recentVideos} />
<InsightVideos userToken={userToken} dummyVideos={dummyVideos} onFileClick={onFileClick} />
</div>
) : (
<div>
<InsightVideos userToken={userToken} dummyVideos={dummyVideos} onFileClick={onFileClick} />
<RecentVideos searchRef={searchRef} videos={recentVideos} />
</div>
)}
<div>
<RecentVideos searchRef={searchRef} videos={recentVideos} />
<InsightVideos
userToken={userToken}
dummyVideos={dummyVideos}
onFileClick={onFileClick}
/>
</div>
) : (
<div>
<InsightVideos
userToken={userToken}
dummyVideos={dummyVideos}
onFileClick={onFileClick}
/>
<RecentVideos searchRef={searchRef} videos={recentVideos} />
</div>
)}
</HomePageContainer>

{isOpenModal && <RecommendationModal />}
Expand Down
4 changes: 4 additions & 0 deletions src/styles/category/EmptyCard.style.ts
Original file line number Diff line number Diff line change
Expand Up @@ -26,4 +26,8 @@ export const Button = styled(Link)`
border-radius: 100px;
padding: 12px 32px;
${theme.typography.Subheader2}
&:hover {
color: ${theme.color.green400};
}
`;
12 changes: 12 additions & 0 deletions src/styles/layout/footer/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,18 @@ export const SendEmailWrap = styled.div`
margin: 40px 0px;
border-radius: 12px;
background-color: ${theme.color.white};
&.success-send {
justify-content: flex-start;
padding: 0;
background-color: ${theme.color.gray100};
}
`;

export const SuccessSendEmail = styled.span`
margin-left: 20px;
${theme.typography.Subheader2}
color: ${theme.color.blue};
`;

export const SendEmailImage = styled.img`
Expand Down

0 comments on commit f910a81

Please sign in to comment.