[FE] feat: 발행 시 설정할 수 있는 정보 추가, 도움말 패널 닫기 기능 구현

frontend/src/apis/writings.ts

@@ -6,10 +6,11 @@ import type {
   GetDetailWritingsResponse,
   GetWritingPropertiesResponse,
   GetWritingResponse,
-  PublishWritingArgs,
   UpdateWritingTitleArgs,
   UpdateWritingOrderArgs,
   GetHomeWritingsResponse,
+  PublishWritingToTistoryArgs,
+  PublishWritingToMediumArgs,
 } from 'types/apis/writings';
 
 // 글 생성(글 업로드): POST
@@ -38,9 +39,11 @@ export const getWriting = (writingId: number): Promise<GetWritingResponse> =>
 export const getWritingProperties = (writingId: number): Promise<GetWritingPropertiesResponse> =>
   http.get(`${writingURL}/${writingId}/properties`);
 
-// 글 발행하기: POST
-export const publishWriting = ({ writingId, body }: PublishWritingArgs) =>
-  http.post(`${writingURL}/${writingId}/publish`, { json: body });
+export const publishWritingToTistory = ({ writingId, body }: PublishWritingToTistoryArgs) =>
+  http.post(`${writingURL}/${writingId}/publish/tistory`, { json: body });
+
+export const publishWritingToMedium = ({ writingId, body }: PublishWritingToMediumArgs) =>
+  http.post(`${writingURL}/${writingId}/publish/medium`, { json: body });
 
 // 카테고리 글 상세 목록 조회 : GET
 export const getDetailWritings = (categoryId: number): Promise<GetDetailWritingsResponse> =>

frontend/src/assets/icons/index.ts

@@ -27,3 +27,6 @@ export { ReactComponent as DonggleIcon } from './donggle-logo.svg';
 export { ReactComponent as BlurBackgroundIcon } from './blur-background.svg';
 export { ReactComponent as HyperlinkIcon } from './hyperlink.svg';
 export { ReactComponent as HomeBorderIcon } from './home-border.svg';
+export { ReactComponent as TimeIcon } from './time.svg';
+export { ReactComponent as PasswordIcon } from './password.svg';
+export { ReactComponent as PublishIcon } from './publish.svg';

frontend/src/components/PublishingPropertySection/MediumPublishingPropertySection.tsx

@@ -0,0 +1,85 @@
+import { css, styled } from 'styled-components';
+import TagInput from '../@common/TagInput/TagInput';
+import Button from '../@common/Button/Button';
+import Spinner from 'components/@common/Spinner/Spinner';
+import { LeftArrowHeadIcon, TagIcon } from 'assets/icons';
+import { slideToLeft } from 'styles/animation';
+import { TabKeys } from 'components/WritingSideBar/WritingSideBar';
+import { useMediumPublishingPropertySection } from './useMediumPublishingPropertySection';
+import { default as S } from './PublishingPropertyStyle';
+import type { Blog } from 'types/domain';
+
+type Props = {
+  writingId: number;
+  publishTo: Blog;
+  selectCurrentTab: (tabKey: TabKeys) => void;
+};
+
+enum MediumPublishStatus {
+  'PUBLIC' = 'Public',
+  'PRIVATE' = 'Draft',
+  'PROTECT' = 'Unlisted',
+}
+
+const MediumPublishStatusList = Object.keys(
+  MediumPublishStatus,
+) as (keyof typeof MediumPublishStatus)[];
+
+const MediumPublishingPropertySection = ({ writingId, publishTo, selectCurrentTab }: Props) => {
+  const { isLoading, setTags, setPublishStatus, publishWritingToMedium } =
+    useMediumPublishingPropertySection({
+      selectCurrentTab,
+    });
+
+  if (isLoading)
+    return (
+      <S.LoadingWrapper>
+        글을 발행하고 있어요
+        <Spinner />
+      </S.LoadingWrapper>
+    );
+
+  return (
+    <S.PublishingPropertySection $blog={publishTo}>
+      <S.SectionHeader>
+        <button
+          onClick={() => selectCurrentTab(TabKeys.Publishing)}
+          aria-label='발행 블로그 플랫폼 선택란으로 이동'
+        >
+          <LeftArrowHeadIcon width={14} height={14} />
+        </button>
+        발행 정보
+      </S.SectionHeader>
+      <S.Properties>
+        <S.PropertyRow>
+          <S.PropertyName>발행 방식</S.PropertyName>
+          <div>
+            <select
+              onChange={(e) => setPublishStatus(e.target.value as keyof typeof MediumPublishStatus)}
+            >
+              {MediumPublishStatusList.map((value, index) => (
+                <option key={index} value={value}>
+                  {MediumPublishStatus[value]}
+                </option>
+              ))}
+            </select>
+          </div>
+        </S.PropertyRow>
+        <S.PropertyRow>
+          <S.PropertyName>
+            <TagIcon width={12} height={12} />
+            태그
+          </S.PropertyName>
+          <div>
+            <TagInput onChangeTags={setTags} />
+          </div>
+        </S.PropertyRow>
+      </S.Properties>
+      <Button block variant='secondary' onClick={() => publishWritingToMedium(writingId)}>
+        발행하기
+      </Button>
+    </S.PublishingPropertySection>
+  );
+};
+
+export default MediumPublishingPropertySection;

frontend/src/components/PublishingPropertySection/PublishingPropertySection.stories.tsx

@@ -1,10 +1,10 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { StoryContainer } from 'styles/storybook';
-import PublishingPropertySection from './PublishingPropertySection';
+import MediumPublishingPropertySection from './MediumPublishingPropertySection';
 
-const meta: Meta<typeof PublishingPropertySection> = {
+const meta: Meta<typeof MediumPublishingPropertySection> = {
   title: 'publishing/PublishingPropertySection',
-  component: PublishingPropertySection,
+  component: MediumPublishingPropertySection,
 };
 
 export default meta;
@@ -13,7 +13,11 @@ type Story = StoryObj<typeof meta>;
 export const Primary: Story = {
   render: () => (
     <StoryContainer>
-      <PublishingPropertySection writingId={1} publishTo={'MEDIUM'} selectCurrentTab={() => {}} />
+      <MediumPublishingPropertySection
+        writingId={1}
+        publishTo={'MEDIUM'}
+        selectCurrentTab={() => {}}
+      />
     </StoryContainer>
   ),
 };

frontend/src/components/PublishingPropertySection/PublishingPropertyStyle.ts

@@ -0,0 +1,83 @@
+import { css, styled } from 'styled-components';
+import { slideToLeft } from 'styles/animation';
+import { Blog } from 'types/domain';
+
+const PublishingPropertyStyle = {
+  PublishingPropertySection: styled.section<{ $blog: Blog }>`
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+    animation: ${slideToLeft} 0.5s;
+
+    ${({ theme, $blog }) => css`
+      & > button {
+        outline-color: ${theme.color[$blog.toLowerCase()]};
+        background-color: ${theme.color[$blog.toLowerCase()]};
+
+        &:hover {
+          background-color: ${theme.color[$blog.toLowerCase()]};
+        }
+      }
+    `};
+  `,
+  SectionHeader: styled.h1`
+    display: flex;
+    gap: 1.5rem;
+    font-size: 1.5rem;
+    font-weight: 700;
+    line-height: 1.5rem;
+  `,
+  Properties: styled.div`
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    padding: 0 0 1rem 0.9rem;
+  `,
+  PropertyRow: styled.div`
+    display: flex;
+    align-items: center;
+
+    select,
+    input {
+      padding: 0.6rem;
+    }
+  `,
+  PropertyName: styled.div`
+    display: flex;
+    align-items: center;
+    gap: 0.6rem;
+    flex-shrink: 0;
+    width: 9.5rem;
+    color: ${({ theme }) => theme.color.gray8};
+    font-size: 1.3rem;
+    font-weight: 600;
+  `,
+  LoadingWrapper: styled.div`
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 4rem;
+    font-size: 1.3rem;
+  `,
+  PublishTimeInputContainer: styled.div`
+    display: flex;
+    flex-direction: column;
+    gap: 0.4rem;
+  `,
+  PublishButtonContainer: styled.div`
+    display: flex;
+    align-items: center;
+    gap: 0.6rem;
+  `,
+  PublishButton: styled.button<{ selected: boolean }>`
+    color: ${({ theme, selected }) => !selected && theme.color.gray5};
+  `,
+  PublishButtonAndTimeInputContainer: styled.div`
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  `,
+};
+
+export default PublishingPropertyStyle;