Skip to content
This repository has been archived by the owner on Jul 29, 2024. It is now read-only.

[FE] fix: 티스토리 API 종료로 인한 퍼블리싱 버튼, 블로그 연결 버튼 제거 #615

Merged
merged 2 commits into from
Mar 11, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
29 changes: 2 additions & 27 deletions frontend/src/components/ConnectionSection/ConnectionSection.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { MediumLogoIcon, NotionIcon, TistoryLogoIcon } from 'assets/icons';
import { MediumLogoIcon, NotionIcon } from 'assets/icons';
import Button from 'components/@common/Button/Button';
import Input from 'components/@common/Input/Input';
import { ConnectionPlatforms } from 'constants/components/myPage';
Expand All @@ -10,12 +10,11 @@ import { useConnect } from './useConnect';
import { MAX_WIDTH } from 'constants/style';

type Props = {
tistory: TistoryConnection;
medium: MediumConnection;
notion: NotionConnection;
};

const ConnectionSection = ({ tistory, medium, notion }: Props) => {
const ConnectionSection = ({ medium, notion }: Props) => {
const { inputRef, escapeInput, isInputOpen, openInput, resetInput, isError, setIsError } =
useUncontrolledInput();
const { requestStoreMediumInfo, redirect, disconnect } = useConnect();
Expand All @@ -41,30 +40,6 @@ const ConnectionSection = ({ tistory, medium, notion }: Props) => {
<S.ConnectionContainer>
<S.ContentContainerTitle>블로그와 연결하기</S.ContentContainerTitle>
<S.ConnectionList>
<S.ConnectionItem>
<S.IconContainer>
<TistoryLogoIcon width={40} height={40} />
<S.PlatformTitle>티스토리</S.PlatformTitle>
</S.IconContainer>
{tistory.isConnected ? (
<Button
size='small'
onClick={() => disconnect(ConnectionPlatforms.tistory)}
aria-label='티스토리 연결 해제하기'
>
해제하기
</Button>
) : (
<Button
variant='secondary'
size='small'
onClick={() => redirect(ConnectionPlatforms.tistory)}
aria-label='티스토리 연결하기'
>
연결하기
</Button>
)}
</S.ConnectionItem>
<S.ConnectionItem>
<S.IconContainer>
<MediumLogoIcon width={40} height={40} />
Expand Down
14 changes: 4 additions & 10 deletions frontend/src/components/PublishingSection/PublishingSection.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,11 @@ type Props = {
};

const PublishingSection = ({ onTabClick, onBlogButtonClick }: Props) => {
const { tistory, medium } = useMember();
const { medium } = useMember();
const { goMyPage } = usePageNavigate();

const 블로그가하나라도연결되었는지 = tistory?.isConnected || medium?.isConnected;
const 모든블로그가연결되었는지 = tistory?.isConnected && medium?.isConnected;
const 블로그가하나라도연결되었는지 = medium?.isConnected;
const 모든블로그가연결되었는지 = medium?.isConnected;

const openPublishingPropertySection = (blog: Blog) => {
onBlogButtonClick(blog);
Expand All @@ -25,10 +25,6 @@ const PublishingSection = ({ onTabClick, onBlogButtonClick }: Props) => {
case 'MEDIUM':
onTabClick(TabKeys.MediumPublishingProperty);
break;

case 'TISTORY':
onTabClick(TabKeys.TistoryPublishingProperty);
break;
}
};

Expand All @@ -40,9 +36,7 @@ const PublishingSection = ({ onTabClick, onBlogButtonClick }: Props) => {
<S.BlogPublishButtonList>
{Object.values(BLOG_LIST).map((name) => {
// 연결 여부 확인을 위한 로직 추가
const shouldRenderButton =
(name === 'TISTORY' && tistory?.isConnected) ||
(name === 'MEDIUM' && medium?.isConnected);
const shouldRenderButton = name === 'MEDIUM' && medium?.isConnected;

// 연결이 확인되지 않으면, 버튼을 렌더링하지 않는다.
if (!shouldRenderButton) {
Expand Down
6 changes: 3 additions & 3 deletions frontend/src/pages/MyPage/MyPage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import { Link } from 'react-router-dom';
import { css, styled } from 'styled-components';

const MyPage = () => {
const { isLoading, name, tistory, medium, notion } = useMember();
const { isLoading, name, medium, notion } = useMember();
const { goSpacePage } = usePageNavigate();

if (isLoading)
Expand All @@ -22,7 +22,7 @@ const MyPage = () => {
</S.SpinnerContainer>
);

if (!name || !tistory || !medium || !notion) return null;
if (!name || !medium || !notion) return null;

return (
<S.Section>
Expand All @@ -40,7 +40,7 @@ const MyPage = () => {
<>
<Profile name={name} />
<S.ContentContainer>
<ConnectionSection tistory={tistory} medium={medium} notion={notion} />
<ConnectionSection medium={medium} notion={notion} />
</S.ContentContainer>
</>
) : (
Expand Down
Loading