From 39a8186ea876bba93ce1cef3ffb7091b0eadb0e3 Mon Sep 17 00:00:00 2001 From: Youngjin Park Date: Thu, 21 Sep 2023 15:18:44 +0900 Subject: [PATCH 01/23] =?UTF-8?q?refactor:=20=EA=B8=80=20=EB=B0=9C?= =?UTF-8?q?=ED=96=89=20api=20medium,=20tistory=EB=A1=9C=20=EB=B6=84?= =?UTF-8?q?=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/apis/writings.ts | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/frontend/src/apis/writings.ts b/frontend/src/apis/writings.ts index 471fcaa89..6995fcdea 100644 --- a/frontend/src/apis/writings.ts +++ b/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 => export const getWritingProperties = (writingId: number): Promise => 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 => From 122bc9d87242aad36cdc3600873b58c7db585647 Mon Sep 17 00:00:00 2001 From: Youngjin Park Date: Thu, 21 Sep 2023 15:19:42 +0900 Subject: [PATCH 02/23] =?UTF-8?q?feat:=20=EA=B8=80=20=EB=B0=9C=ED=96=89=20?= =?UTF-8?q?medium,=20tistory=20=EC=9A=94=EC=B2=AD=20=ED=83=80=EC=9E=85=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/types/apis/writings.ts | 24 +++++++++++++++++++----- 1 file changed, 19 insertions(+), 5 deletions(-) diff --git a/frontend/src/types/apis/writings.ts b/frontend/src/types/apis/writings.ts index 9524201af..1189ab5f4 100644 --- a/frontend/src/types/apis/writings.ts +++ b/frontend/src/types/apis/writings.ts @@ -19,13 +19,27 @@ export type GetWritingPropertiesResponse = { publishedDetails: PublishedDetail[]; }; -export type PublishWritingRequest = { - publishTo: Blog; -} & PublishingPropertyData; +export type PublishWritingToTistoryRequest = { + tags: string[]; + publishStatus: 'PUBLIC' | 'PRIVATE' | 'PROTECT'; + password: string; + categoryId: string; + publishTime: string; // TODO: "yyyy-MM-dd HH:mm:ss.SSS" 형식으로 +}; + +export type PublishWritingToTistoryArgs = { + writingId: number; + body: PublishWritingToTistoryRequest; +}; + +export type PublishWritingToMediumRequest = { + tags: string[]; + publishStatus: 'PUBLIC' | 'PRIVATE' | 'PROTECT'; +}; -export type PublishWritingArgs = { +export type PublishWritingToMediumArgs = { writingId: number; - body: PublishWritingRequest; + body: PublishWritingToMediumRequest; }; export type PublishedDetail = { From 5e9fc5642410ee8bb0b2d1f5cfbb42779345bd77 Mon Sep 17 00:00:00 2001 From: Youngjin Park Date: Thu, 21 Sep 2023 15:20:09 +0900 Subject: [PATCH 03/23] =?UTF-8?q?refactor:=20=EC=82=AC=EC=9A=A9=ED=95=98?= =?UTF-8?q?=EC=A7=80=20=EC=95=8A=EB=8A=94=20=EB=B0=9C=ED=96=89=20=EC=A0=95?= =?UTF-8?q?=EB=B3=B4=20=ED=83=80=EC=9E=85=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/types/domain.ts | 4 ---- 1 file changed, 4 deletions(-) diff --git a/frontend/src/types/domain.ts b/frontend/src/types/domain.ts index b68b01ca1..afd92724b 100644 --- a/frontend/src/types/domain.ts +++ b/frontend/src/types/domain.ts @@ -1,7 +1,3 @@ import { BLOG_LIST } from 'constants/blog'; export type Blog = (typeof BLOG_LIST)[keyof typeof BLOG_LIST]; - -export type PublishingPropertyData = { - tags: string[]; -}; From 282953adb8091d2b6ce294b7d958e78a71b6d6d9 Mon Sep 17 00:00:00 2001 From: Youngjin Park Date: Thu, 21 Sep 2023 15:22:22 +0900 Subject: [PATCH 04/23] =?UTF-8?q?feat:=20=ED=8B=B0=EC=8A=A4=ED=86=A0?= =?UTF-8?q?=EB=A6=AC,=20=EB=AF=B8=EB=94=94=EC=97=84=20=EB=B0=9C=ED=96=89?= =?UTF-8?q?=20=EC=A0=95=EB=B3=B4=20=ED=83=AD=20=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 스타일은 공통으로 가져감 --- .../MediumPublishingPropertySection.tsx | 83 +++++++++++++ .../PublishingPropertySection.stories.tsx | 12 +- .../PublishingPropertySection.tsx | 115 ------------------ .../PublishingPropertyStyle.ts | 65 ++++++++++ .../TistoryPublishingPropertySection.tsx | 106 ++++++++++++++++ .../useMediumPublishingPropertySection.ts | 41 +++++++ .../usePublishingPropertySection.ts | 46 ------- .../useTistoryPublishingPropertySection.ts | 63 ++++++++++ .../PublishingSection/PublishingSection.tsx | 11 +- .../WritingSideBar/WritingSideBar.tsx | 35 ++++-- 10 files changed, 404 insertions(+), 173 deletions(-) create mode 100644 frontend/src/components/PublishingPropertySection/MediumPublishingPropertySection.tsx delete mode 100644 frontend/src/components/PublishingPropertySection/PublishingPropertySection.tsx create mode 100644 frontend/src/components/PublishingPropertySection/PublishingPropertyStyle.ts create mode 100644 frontend/src/components/PublishingPropertySection/TistoryPublishingPropertySection.tsx create mode 100644 frontend/src/components/PublishingPropertySection/useMediumPublishingPropertySection.ts delete mode 100644 frontend/src/components/PublishingPropertySection/usePublishingPropertySection.ts create mode 100644 frontend/src/components/PublishingPropertySection/useTistoryPublishingPropertySection.ts diff --git a/frontend/src/components/PublishingPropertySection/MediumPublishingPropertySection.tsx b/frontend/src/components/PublishingPropertySection/MediumPublishingPropertySection.tsx new file mode 100644 index 000000000..af4bf859c --- /dev/null +++ b/frontend/src/components/PublishingPropertySection/MediumPublishingPropertySection.tsx @@ -0,0 +1,83 @@ +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 ( + + 글을 발행하고 있어요 + + + ); + + return ( + + + + 발행 정보 + + + + 발행 방식 +
+ +
+ + + + + Tags + +
+ +
+ + + + + ); +}; + +export default MediumPublishingPropertySection; diff --git a/frontend/src/components/PublishingPropertySection/PublishingPropertySection.stories.tsx b/frontend/src/components/PublishingPropertySection/PublishingPropertySection.stories.tsx index 0205a17f0..560ae74a8 100644 --- a/frontend/src/components/PublishingPropertySection/PublishingPropertySection.stories.tsx +++ b/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 = { +const meta: Meta = { title: 'publishing/PublishingPropertySection', - component: PublishingPropertySection, + component: MediumPublishingPropertySection, }; export default meta; @@ -13,7 +13,11 @@ type Story = StoryObj; export const Primary: Story = { render: () => ( - {}} /> + {}} + /> ), }; diff --git a/frontend/src/components/PublishingPropertySection/PublishingPropertySection.tsx b/frontend/src/components/PublishingPropertySection/PublishingPropertySection.tsx deleted file mode 100644 index 6de0eb178..000000000 --- a/frontend/src/components/PublishingPropertySection/PublishingPropertySection.tsx +++ /dev/null @@ -1,115 +0,0 @@ -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 { usePublishingPropertySection } from './usePublishingPropertySection'; -import type { Blog } from 'types/domain'; - -type Props = { - writingId: number; - publishTo: Blog; - selectCurrentTab: (tabKey: TabKeys) => void; -}; - -const PublishingPropertySection = ({ writingId, publishTo, selectCurrentTab }: Props) => { - const { isLoading, setTags, publishWritingToBlog } = usePublishingPropertySection({ - selectCurrentTab, - }); - - if (isLoading) - return ( - - 글을 발행하고 있어요 - - - ); - - return ( - - - - 발행 정보 - - - - - - Tags - -
- -
- - - - - ); -}; - -export default PublishingPropertySection; - -const S = { - 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` - padding: 0 0 1rem 0.9rem; - `, - PropertyRow: styled.div` - display: flex; - align-items: flex-start; - `, - PropertyName: styled.div` - display: flex; - align-items: center; - flex-shrink: 0; - width: 9.5rem; - height: 2.3rem; - 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; - `, -}; diff --git a/frontend/src/components/PublishingPropertySection/PublishingPropertyStyle.ts b/frontend/src/components/PublishingPropertySection/PublishingPropertyStyle.ts new file mode 100644 index 000000000..19497a385 --- /dev/null +++ b/frontend/src/components/PublishingPropertySection/PublishingPropertyStyle.ts @@ -0,0 +1,65 @@ +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: 0.5rem; + padding: 0 0 1rem 0.9rem; + `, + PropertyRow: styled.div` + display: flex; + align-items: center; + + select, + input { + padding: 1px; + } + `, + PropertyName: styled.div` + display: flex; + align-items: center; + flex-shrink: 0; + width: 9.5rem; + height: 2.3rem; + 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; + `, +}; + +export default PublishingPropertyStyle; diff --git a/frontend/src/components/PublishingPropertySection/TistoryPublishingPropertySection.tsx b/frontend/src/components/PublishingPropertySection/TistoryPublishingPropertySection.tsx new file mode 100644 index 000000000..a14222bd0 --- /dev/null +++ b/frontend/src/components/PublishingPropertySection/TistoryPublishingPropertySection.tsx @@ -0,0 +1,106 @@ +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 { useTistoryPublishingPropertySection } from './useTistoryPublishingPropertySection'; +import { default as S } from './PublishingPropertyStyle'; +import type { Blog } from 'types/domain'; + +type Props = { + writingId: number; + publishTo: Blog; + selectCurrentTab: (tabKey: TabKeys) => void; +}; + +enum TistoryPublishStatus { + 'PUBLIC' = '공개', + 'PRIVATE' = '비공개', + 'PROTECT' = '보호', +} + +const TistoryPublishStatusList = Object.keys( + TistoryPublishStatus, +) as (keyof typeof TistoryPublishStatus)[]; + +const TistoryPublishingPropertySection = ({ writingId, publishTo, selectCurrentTab }: Props) => { + const { + isLoading, + setTags, + setPublishStatus, + passwordRef, + setPublishTime, + publishWritingToTistory, + } = useTistoryPublishingPropertySection({ + selectCurrentTab, + }); + + if (isLoading) + return ( + + 글을 발행하고 있어요 + + + ); + + return ( + + + + 발행 정보 + + + + + 발행 방식 +
+ +
+ + + 비밀번호 +
+ +
+ + + 발행 시간 +
+ +
+ + + + + Tags + +
+ +
+ + + + + ); +}; + +export default TistoryPublishingPropertySection; diff --git a/frontend/src/components/PublishingPropertySection/useMediumPublishingPropertySection.ts b/frontend/src/components/PublishingPropertySection/useMediumPublishingPropertySection.ts new file mode 100644 index 000000000..db3381b59 --- /dev/null +++ b/frontend/src/components/PublishingPropertySection/useMediumPublishingPropertySection.ts @@ -0,0 +1,41 @@ +import { useMutation } from '@tanstack/react-query'; +import { publishWritingToMedium as publishWritingToMediumRequest } from 'apis/writings'; +import { TabKeys } from 'components/WritingSideBar/WritingSideBar'; +import { useToast } from 'hooks/@common/useToast'; +import { useState } from 'react'; +import type { PublishWritingToMediumRequest } from 'types/apis/writings'; +import { HttpError } from 'utils/apis/HttpError'; + +type Args = { + selectCurrentTab: (tabKey: TabKeys) => void; +}; + +export const useMediumPublishingPropertySection = ({ selectCurrentTab }: Args) => { + const [propertyFormInfo, setPropertyFormInfo] = useState({ + tags: [], + publishStatus: 'PUBLIC', + }); + const toast = useToast(); + const { mutate: publishWritingToMedium, isLoading } = useMutation( + (writingId: number) => publishWritingToMediumRequest({ writingId, body: propertyFormInfo }), + { + onSuccess: () => { + selectCurrentTab(TabKeys.WritingProperty); + toast.show({ type: 'success', message: '글 발행에 성공했습니다.' }); + }, + onError: (error) => { + if (error instanceof HttpError) toast.show({ type: 'error', message: error.message }); + }, + }, + ); + + const setTags = (tags: PublishWritingToMediumRequest['tags']) => { + setPropertyFormInfo((prev) => ({ ...prev, tags })); + }; + + const setPublishStatus = (publishStatus: PublishWritingToMediumRequest['publishStatus']) => { + setPropertyFormInfo((prev) => ({ ...prev, publishStatus })); + }; + + return { isLoading, setTags, setPublishStatus, publishWritingToMedium }; +}; diff --git a/frontend/src/components/PublishingPropertySection/usePublishingPropertySection.ts b/frontend/src/components/PublishingPropertySection/usePublishingPropertySection.ts deleted file mode 100644 index 8b9001121..000000000 --- a/frontend/src/components/PublishingPropertySection/usePublishingPropertySection.ts +++ /dev/null @@ -1,46 +0,0 @@ -import { useMutation } from '@tanstack/react-query'; -import { publishWriting as PublishWritingRequest } from 'apis/writings'; -import { TabKeys } from 'components/WritingSideBar/WritingSideBar'; -import { useToast } from 'hooks/@common/useToast'; -import { useState } from 'react'; -import { PublishWritingArgs } from 'types/apis/writings'; -import { Blog, PublishingPropertyData } from 'types/domain'; -import { HttpError } from 'utils/apis/HttpError'; - -type Args = { - selectCurrentTab: (tabKey: TabKeys) => void; -}; - -type PublishWritingToBlogArgs = { - writingId: number; - publishTo: Blog; -}; - -export const usePublishingPropertySection = ({ selectCurrentTab }: Args) => { - const [propertyFormInfo, setPropertyFormInfo] = useState({ tags: [] }); - const toast = useToast(); - const { mutate: publishWriting, isLoading } = useMutation(PublishWritingRequest, { - onSuccess: () => { - selectCurrentTab(TabKeys.WritingProperty); - toast.show({ type: 'success', message: '글 발행에 성공했습니다.' }); - }, - onError: (error) => { - if (error instanceof HttpError) toast.show({ type: 'error', message: error.message }); - }, - }); - - const publishWritingToBlog = ({ writingId, publishTo }: PublishWritingToBlogArgs) => { - const body = { - publishTo, - tags: propertyFormInfo.tags, - }; - - publishWriting({ writingId, body }); - }; - - const setTags = (tags: string[]) => { - setPropertyFormInfo((prev) => ({ ...prev, tags })); - }; - - return { isLoading, setTags, publishWritingToBlog }; -}; diff --git a/frontend/src/components/PublishingPropertySection/useTistoryPublishingPropertySection.ts b/frontend/src/components/PublishingPropertySection/useTistoryPublishingPropertySection.ts new file mode 100644 index 000000000..6630dca9f --- /dev/null +++ b/frontend/src/components/PublishingPropertySection/useTistoryPublishingPropertySection.ts @@ -0,0 +1,63 @@ +import { useMutation } from '@tanstack/react-query'; +import { publishWritingToTistory as publishWritingToTistoryRequest } from 'apis/writings'; +import { TabKeys } from 'components/WritingSideBar/WritingSideBar'; +import { useToast } from 'hooks/@common/useToast'; +import { useRef, useState } from 'react'; +import type { PublishWritingToTistoryRequest } from 'types/apis/writings'; +import { HttpError } from 'utils/apis/HttpError'; + +type Args = { + selectCurrentTab: (tabKey: TabKeys) => void; +}; + +export const useTistoryPublishingPropertySection = ({ selectCurrentTab }: Args) => { + const passwordRef = useRef(null); + const [propertyFormInfo, setPropertyFormInfo] = useState({ + tags: [], + publishStatus: 'PUBLIC', + password: '', + categoryId: '0', + publishTime: '', + }); + const toast = useToast(); + const { mutate: publishWritingToTistory, isLoading } = useMutation( + (writingId: number) => + publishWritingToTistoryRequest({ + writingId, + body: { + ...propertyFormInfo, + password: passwordRef.current?.value ?? '', + }, + }), + { + onSuccess: () => { + selectCurrentTab(TabKeys.WritingProperty); + toast.show({ type: 'success', message: '글 발행에 성공했습니다.' }); + }, + onError: (error) => { + if (error instanceof HttpError) toast.show({ type: 'error', message: error.message }); + }, + }, + ); + + const setTags = (tags: PublishWritingToTistoryRequest['tags']) => { + setPropertyFormInfo((prev) => ({ ...prev, tags })); + }; + + const setPublishStatus = (publishStatus: PublishWritingToTistoryRequest['publishStatus']) => { + setPropertyFormInfo((prev) => ({ ...prev, publishStatus })); + }; + + const setPublishTime = (publishTime: PublishWritingToTistoryRequest['publishTime']) => { + setPropertyFormInfo((prev) => ({ ...prev, publishTime })); + }; + + return { + isLoading, + setTags, + setPublishStatus, + passwordRef, + setPublishTime, + publishWritingToTistory, + }; +}; diff --git a/frontend/src/components/PublishingSection/PublishingSection.tsx b/frontend/src/components/PublishingSection/PublishingSection.tsx index 98c9104d3..690005c1e 100644 --- a/frontend/src/components/PublishingSection/PublishingSection.tsx +++ b/frontend/src/components/PublishingSection/PublishingSection.tsx @@ -12,7 +12,16 @@ type Props = { const PublishingSection = ({ onTabClick, onBlogButtonClick }: Props) => { const openPublishingPropertySection = (blog: Blog) => { onBlogButtonClick(blog); - onTabClick(TabKeys.PublishingProperty); + + switch (blog) { + case 'MEDIUM': + onTabClick(TabKeys.MediumPublishingProperty); + break; + + case 'TISTORY': + onTabClick(TabKeys.TistoryPublishingProperty); + break; + } }; return ( diff --git a/frontend/src/components/WritingSideBar/WritingSideBar.tsx b/frontend/src/components/WritingSideBar/WritingSideBar.tsx index c6e8768cd..50c0af968 100644 --- a/frontend/src/components/WritingSideBar/WritingSideBar.tsx +++ b/frontend/src/components/WritingSideBar/WritingSideBar.tsx @@ -1,4 +1,4 @@ -import PublishingPropertySection from 'components/PublishingPropertySection/PublishingPropertySection'; +import MediumPublishingPropertySection from 'components/PublishingPropertySection/MediumPublishingPropertySection'; import PublishingSection from 'components/PublishingSection/PublishingSection'; import { css, styled } from 'styled-components'; import { useCurrentTab } from './useCurrentTab'; @@ -8,17 +8,21 @@ import { Blog } from 'types/domain'; import WritingPropertySection from 'components/WritingPropertySection/WritingPropertySection'; import { useGlobalStateValue } from '@yogjin/react-global-state'; import { activeWritingInfoState } from 'globalState'; +import Button from 'components/@common/Button/Button'; +import TistoryPublishingPropertySection from 'components/PublishingPropertySection/TistoryPublishingPropertySection'; export enum TabKeys { WritingProperty = 'WritingProperty', Publishing = 'Publishing', - PublishingProperty = 'PublishingProperty', + MediumPublishingProperty = 'MediumPublishingProperty', + TistoryPublishingProperty = 'TistoryPublishingProperty', } const ariaLabelFromTabKeys = { [TabKeys.WritingProperty]: '글 정보', [TabKeys.Publishing]: '발행 하기', - [TabKeys.PublishingProperty]: '발행 정보', + [TabKeys.MediumPublishingProperty]: '미디엄 발행 정보', + [TabKeys.TistoryPublishingProperty]: '티스토리 발행 정보', }; type Props = { @@ -60,10 +64,21 @@ const WritingSideBar = ({ isPublishingSectionActive = true }: Props) => { ), }, { - key: TabKeys.PublishingProperty, - label: 'PublishingProperty', + key: TabKeys.MediumPublishingProperty, + label: 'MediumPublishingProperty', content: publishTo && ( - + ), + }, + { + key: TabKeys.TistoryPublishingProperty, + label: 'TistoryPublishingProperty', + content: publishTo && ( + { {menus - .filter((menu) => menu.key !== TabKeys.PublishingProperty) + .filter( + (menu) => + ![TabKeys.TistoryPublishingProperty, TabKeys.MediumPublishingProperty].includes( + // 이상함 + menu.key, + ), + ) .map((menu) => ( Date: Thu, 21 Sep 2023 19:21:49 +0900 Subject: [PATCH 05/23] =?UTF-8?q?chore:=20=EB=B9=84=EB=B0=80=EB=B2=88?= =?UTF-8?q?=ED=98=B8,=20=EB=B0=9C=ED=96=89,=20=EC=8B=9C=EA=B0=84=20svg=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/assets/icons/index.ts | 3 +++ frontend/src/assets/icons/password.svg | 12 ++++++++++++ frontend/src/assets/icons/publish.svg | 2 ++ frontend/src/assets/icons/time.svg | 5 +++++ 4 files changed, 22 insertions(+) create mode 100644 frontend/src/assets/icons/password.svg create mode 100644 frontend/src/assets/icons/publish.svg create mode 100644 frontend/src/assets/icons/time.svg diff --git a/frontend/src/assets/icons/index.ts b/frontend/src/assets/icons/index.ts index 56cf0ed01..4df980262 100644 --- a/frontend/src/assets/icons/index.ts +++ b/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'; diff --git a/frontend/src/assets/icons/password.svg b/frontend/src/assets/icons/password.svg new file mode 100644 index 000000000..b296f164d --- /dev/null +++ b/frontend/src/assets/icons/password.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/frontend/src/assets/icons/publish.svg b/frontend/src/assets/icons/publish.svg new file mode 100644 index 000000000..8fd420e74 --- /dev/null +++ b/frontend/src/assets/icons/publish.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/frontend/src/assets/icons/time.svg b/frontend/src/assets/icons/time.svg new file mode 100644 index 000000000..74ef7584c --- /dev/null +++ b/frontend/src/assets/icons/time.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file From 3a8a568339061087ace3aa658ce99c812e470c76 Mon Sep 17 00:00:00 2001 From: yogjin Date: Thu, 21 Sep 2023 19:22:40 +0900 Subject: [PATCH 06/23] =?UTF-8?q?refactor:=20`Tags`=20->=20`=ED=83=9C?= =?UTF-8?q?=EA=B7=B8`=20=EB=84=A4=EC=9D=B4=EB=B0=8D=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../MediumPublishingPropertySection.tsx | 2 +- .../TistoryPublishingPropertySection.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/src/components/PublishingPropertySection/MediumPublishingPropertySection.tsx b/frontend/src/components/PublishingPropertySection/MediumPublishingPropertySection.tsx index af4bf859c..47f43baa0 100644 --- a/frontend/src/components/PublishingPropertySection/MediumPublishingPropertySection.tsx +++ b/frontend/src/components/PublishingPropertySection/MediumPublishingPropertySection.tsx @@ -66,7 +66,7 @@ const MediumPublishingPropertySection = ({ writingId, publishTo, selectCurrentTa - Tags + 태그
diff --git a/frontend/src/components/PublishingPropertySection/TistoryPublishingPropertySection.tsx b/frontend/src/components/PublishingPropertySection/TistoryPublishingPropertySection.tsx index a14222bd0..acf198268 100644 --- a/frontend/src/components/PublishingPropertySection/TistoryPublishingPropertySection.tsx +++ b/frontend/src/components/PublishingPropertySection/TistoryPublishingPropertySection.tsx @@ -89,7 +89,7 @@ const TistoryPublishingPropertySection = ({ writingId, publishTo, selectCurrentT - Tags + 태그
From 0b3fa153377cbef56108b69b5c6df9b0d05e19c3 Mon Sep 17 00:00:00 2001 From: yogjin Date: Thu, 21 Sep 2023 19:27:29 +0900 Subject: [PATCH 07/23] =?UTF-8?q?style:=20=EB=B0=9C=ED=96=89=20=EC=A0=95?= =?UTF-8?q?=EB=B3=B4=20=EC=9E=85=EB=A0=A5=20=ED=83=AD=20=EC=95=84=EC=9D=B4?= =?UTF-8?q?=EC=BD=98=20=EC=B6=94=EA=B0=80=20=EB=B0=8F=20=EC=8A=A4=ED=83=80?= =?UTF-8?q?=EC=9D=BC=EB=A7=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../PublishingPropertyStyle.ts | 3 +- .../TistoryPublishingPropertySection.tsx | 30 ++++++++++++------- 2 files changed, 22 insertions(+), 11 deletions(-) diff --git a/frontend/src/components/PublishingPropertySection/PublishingPropertyStyle.ts b/frontend/src/components/PublishingPropertySection/PublishingPropertyStyle.ts index 19497a385..f6d748742 100644 --- a/frontend/src/components/PublishingPropertySection/PublishingPropertyStyle.ts +++ b/frontend/src/components/PublishingPropertySection/PublishingPropertyStyle.ts @@ -30,7 +30,7 @@ const PublishingPropertyStyle = { Properties: styled.div` display: flex; flex-direction: column; - gap: 0.5rem; + gap: 1rem; padding: 0 0 1rem 0.9rem; `, PropertyRow: styled.div` @@ -45,6 +45,7 @@ const PublishingPropertyStyle = { PropertyName: styled.div` display: flex; align-items: center; + gap: 0.6rem; flex-shrink: 0; width: 9.5rem; height: 2.3rem; diff --git a/frontend/src/components/PublishingPropertySection/TistoryPublishingPropertySection.tsx b/frontend/src/components/PublishingPropertySection/TistoryPublishingPropertySection.tsx index acf198268..410646613 100644 --- a/frontend/src/components/PublishingPropertySection/TistoryPublishingPropertySection.tsx +++ b/frontend/src/components/PublishingPropertySection/TistoryPublishingPropertySection.tsx @@ -2,12 +2,13 @@ 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 { LeftArrowHeadIcon, PasswordIcon, PublishIcon, TagIcon, TimeIcon } from 'assets/icons'; import { slideToLeft } from 'styles/animation'; import { TabKeys } from 'components/WritingSideBar/WritingSideBar'; import { useTistoryPublishingPropertySection } from './useTistoryPublishingPropertySection'; import { default as S } from './PublishingPropertyStyle'; import type { Blog } from 'types/domain'; +import Input from 'components/@common/Input/Input'; type Props = { writingId: number; @@ -59,7 +60,10 @@ const TistoryPublishingPropertySection = ({ writingId, publishTo, selectCurrentT - 발행 방식 + + + 발행 방식 +
+ + + + 비밀번호 + +
+ +
+ - 비밀번호 -
- -
- - - 발행 시간 + + + 발행 시간 +
- +
From 37a781c01b93ea9d3b0f1a7575b4fd32e238b1b8 Mon Sep 17 00:00:00 2001 From: yogjin Date: Thu, 21 Sep 2023 19:31:37 +0900 Subject: [PATCH 08/23] =?UTF-8?q?feat:=20`tistory`=20=EB=B0=9C=ED=96=89=20?= =?UTF-8?q?=EB=B0=A9=EC=8B=9D=EC=9D=B4=20`=EB=B3=B4=ED=98=B8`=20=EC=9D=BC?= =?UTF-8?q?=20=EB=95=8C=20=EB=B9=84=EB=B0=80=EB=B2=88=ED=98=B8=20input=20?= =?UTF-8?q?=EB=82=98=ED=83=80=EB=82=98=EA=B2=8C=20=ED=95=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../TistoryPublishingPropertySection.tsx | 5 +++++ .../useTistoryPublishingPropertySection.ts | 1 + 2 files changed, 6 insertions(+) diff --git a/frontend/src/components/PublishingPropertySection/TistoryPublishingPropertySection.tsx b/frontend/src/components/PublishingPropertySection/TistoryPublishingPropertySection.tsx index 410646613..17bb2e4f9 100644 --- a/frontend/src/components/PublishingPropertySection/TistoryPublishingPropertySection.tsx +++ b/frontend/src/components/PublishingPropertySection/TistoryPublishingPropertySection.tsx @@ -29,6 +29,7 @@ const TistoryPublishStatusList = Object.keys( const TistoryPublishingPropertySection = ({ writingId, publishTo, selectCurrentTab }: Props) => { const { isLoading, + propertyFormInfo, setTags, setPublishStatus, passwordRef, @@ -38,6 +39,8 @@ const TistoryPublishingPropertySection = ({ writingId, publishTo, selectCurrentT selectCurrentTab, }); + const { publishStatus } = propertyFormInfo; + if (isLoading) return ( @@ -78,6 +81,7 @@ const TistoryPublishingPropertySection = ({ writingId, publishTo, selectCurrentT
+ {publishStatus === 'PROTECT' && ( @@ -87,6 +91,7 @@ const TistoryPublishingPropertySection = ({ writingId, publishTo, selectCurrentT
+ )} diff --git a/frontend/src/components/PublishingPropertySection/useTistoryPublishingPropertySection.ts b/frontend/src/components/PublishingPropertySection/useTistoryPublishingPropertySection.ts index 6630dca9f..9872933e9 100644 --- a/frontend/src/components/PublishingPropertySection/useTistoryPublishingPropertySection.ts +++ b/frontend/src/components/PublishingPropertySection/useTistoryPublishingPropertySection.ts @@ -54,6 +54,7 @@ export const useTistoryPublishingPropertySection = ({ selectCurrentTab }: Args) return { isLoading, + propertyFormInfo, setTags, setPublishStatus, passwordRef, From c219a201de702ce74a0d56911ef4a2af3c698e42 Mon Sep 17 00:00:00 2001 From: yogjin Date: Thu, 21 Sep 2023 22:18:00 +0900 Subject: [PATCH 09/23] =?UTF-8?q?feat:=20`dateFormatter`=20=ED=98=95?= =?UTF-8?q?=EC=8B=9D=20`HH:MM`,=20`'YYYY-MM-DD'`=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/utils/date.ts | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/frontend/src/utils/date.ts b/frontend/src/utils/date.ts index eb5c41de4..97a9a1a0c 100644 --- a/frontend/src/utils/date.ts +++ b/frontend/src/utils/date.ts @@ -1,7 +1,13 @@ -type dateFormate = 'YYYY.MM.DD.' | 'YYYY/MM/DD HH:MM'; +type dateFormate = 'YYYY-MM-DD' | 'YYYY.MM.DD.' | 'YYYY/MM/DD HH:MM' | 'HH:MM'; export const dateFormatter = (date: Date, format: dateFormate) => { switch (format) { + case 'YYYY-MM-DD': + return new Intl.DateTimeFormat('en-CA', { + year: 'numeric', + month: '2-digit', + day: '2-digit', + }).format(date); case 'YYYY.MM.DD.': return new Intl.DateTimeFormat('ko-KR').format(new Date(date)); case 'YYYY/MM/DD HH:MM': @@ -13,5 +19,12 @@ export const dateFormatter = (date: Date, format: dateFormate) => { const minutes = String(d.getMinutes()).padStart(2, '0'); return `${year}/${month}/${day} ${hours}:${minutes}`; + case 'HH:MM': + const today = new Date(date); + + return `${String(today.getHours()).padStart(2, '0')}:${String(today.getMinutes()).padStart( + 2, + '0', + )}`; } }; From b0651524e11b2b5cdabdf8df18a9a3134515df8b Mon Sep 17 00:00:00 2001 From: yogjin Date: Thu, 21 Sep 2023 22:18:39 +0900 Subject: [PATCH 10/23] =?UTF-8?q?feat:=20`useOutsideClickEffect`=20?= =?UTF-8?q?=ED=9B=85=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../hooks/@common/useOutsideClickEffect.ts | 23 +++++++++++++++++++ 1 file changed, 23 insertions(+) create mode 100644 frontend/src/hooks/@common/useOutsideClickEffect.ts diff --git a/frontend/src/hooks/@common/useOutsideClickEffect.ts b/frontend/src/hooks/@common/useOutsideClickEffect.ts new file mode 100644 index 000000000..f21a6c5e5 --- /dev/null +++ b/frontend/src/hooks/@common/useOutsideClickEffect.ts @@ -0,0 +1,23 @@ +import { useEffect } from 'react'; + +/** + * 특정 엘리먼트 '외부'를 클릭했을 때 특정 함수를 실행함 + */ +const useOutsideClickEffect = ( + ref: React.RefObject, + onClickOutside: (e: React.MouseEvent) => void, +) => { + useEffect(() => { + const handleClickOutside = (e: any) => { + if (ref.current && !ref.current.contains(e.target)) { + onClickOutside(e); + } + }; + document.addEventListener('mousedown', handleClickOutside); + return () => { + document.removeEventListener('mousedown', handleClickOutside); + }; + }, [ref, onClickOutside]); +}; + +export default useOutsideClickEffect; From 13535a350df41911c7e80165c934199ca26959af Mon Sep 17 00:00:00 2001 From: yogjin Date: Thu, 21 Sep 2023 22:19:53 +0900 Subject: [PATCH 11/23] =?UTF-8?q?feat:=20=EB=B0=9C=ED=96=89=20=EB=82=A0?= =?UTF-8?q?=EC=A7=9C,=20=EC=8B=9C=EA=B0=84=20input=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../TistoryPublishingPropertySection.tsx | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/frontend/src/components/PublishingPropertySection/TistoryPublishingPropertySection.tsx b/frontend/src/components/PublishingPropertySection/TistoryPublishingPropertySection.tsx index 17bb2e4f9..7830d58ef 100644 --- a/frontend/src/components/PublishingPropertySection/TistoryPublishingPropertySection.tsx +++ b/frontend/src/components/PublishingPropertySection/TistoryPublishingPropertySection.tsx @@ -9,6 +9,7 @@ import { useTistoryPublishingPropertySection } from './useTistoryPublishingPrope import { default as S } from './PublishingPropertyStyle'; import type { Blog } from 'types/domain'; import Input from 'components/@common/Input/Input'; +import { dateFormatter } from 'utils/date'; type Props = { writingId: number; @@ -97,9 +98,14 @@ const TistoryPublishingPropertySection = ({ writingId, publishTo, selectCurrentT 발행 시간 -
- -
+ + + + From 7151e255172e349be9c14b0c6f1fccc67c400dd0 Mon Sep 17 00:00:00 2001 From: yogjin Date: Thu, 21 Sep 2023 22:20:17 +0900 Subject: [PATCH 12/23] =?UTF-8?q?style:=20=EB=B0=9C=ED=96=89=20=EC=A0=95?= =?UTF-8?q?=EB=B3=B4=20=EC=B9=B8=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../PublishingPropertySection/PublishingPropertyStyle.ts | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/frontend/src/components/PublishingPropertySection/PublishingPropertyStyle.ts b/frontend/src/components/PublishingPropertySection/PublishingPropertyStyle.ts index f6d748742..7602e011c 100644 --- a/frontend/src/components/PublishingPropertySection/PublishingPropertyStyle.ts +++ b/frontend/src/components/PublishingPropertySection/PublishingPropertyStyle.ts @@ -39,7 +39,7 @@ const PublishingPropertyStyle = { select, input { - padding: 1px; + padding: 0.6rem; } `, PropertyName: styled.div` @@ -61,6 +61,11 @@ const PublishingPropertyStyle = { gap: 4rem; font-size: 1.3rem; `, + PublishTimeInputContainer: styled.div` + display: flex; + flex-direction: column; + gap: 0.4rem; + `, }; export default PublishingPropertyStyle; From a6749243d3be07f3316a96c31d66cfc90b91e594 Mon Sep 17 00:00:00 2001 From: yogjin Date: Thu, 21 Sep 2023 22:46:29 +0900 Subject: [PATCH 13/23] =?UTF-8?q?feat:=20=EB=B0=9C=ED=96=89=20=EC=98=88?= =?UTF-8?q?=EC=95=BD=20=EA=B0=92=20=EB=84=A3=EA=B8=B0=20=EC=9C=84=ED=95=B4?= =?UTF-8?q?=20ref=20=EC=84=A4=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../TistoryPublishingPropertySection.tsx | 6 ++++-- .../useTistoryPublishingPropertySection.ts | 11 ++++++----- 2 files changed, 10 insertions(+), 7 deletions(-) diff --git a/frontend/src/components/PublishingPropertySection/TistoryPublishingPropertySection.tsx b/frontend/src/components/PublishingPropertySection/TistoryPublishingPropertySection.tsx index 7830d58ef..873b94031 100644 --- a/frontend/src/components/PublishingPropertySection/TistoryPublishingPropertySection.tsx +++ b/frontend/src/components/PublishingPropertySection/TistoryPublishingPropertySection.tsx @@ -34,7 +34,8 @@ const TistoryPublishingPropertySection = ({ writingId, publishTo, selectCurrentT setTags, setPublishStatus, passwordRef, - setPublishTime, + dateRef, + timeRef, publishWritingToTistory, } = useTistoryPublishingPropertySection({ selectCurrentTab, @@ -100,11 +101,12 @@ const TistoryPublishingPropertySection = ({ writingId, publishTo, selectCurrentT - + diff --git a/frontend/src/components/PublishingPropertySection/useTistoryPublishingPropertySection.ts b/frontend/src/components/PublishingPropertySection/useTistoryPublishingPropertySection.ts index 9872933e9..b5d1d70cc 100644 --- a/frontend/src/components/PublishingPropertySection/useTistoryPublishingPropertySection.ts +++ b/frontend/src/components/PublishingPropertySection/useTistoryPublishingPropertySection.ts @@ -12,6 +12,9 @@ type Args = { export const useTistoryPublishingPropertySection = ({ selectCurrentTab }: Args) => { const passwordRef = useRef(null); + const dateRef = useRef(null); + const timeRef = useRef(null); + const [propertyFormInfo, setPropertyFormInfo] = useState({ tags: [], publishStatus: 'PUBLIC', @@ -27,6 +30,7 @@ export const useTistoryPublishingPropertySection = ({ selectCurrentTab }: Args) body: { ...propertyFormInfo, password: passwordRef.current?.value ?? '', + publishTime: `${dateRef.current?.value} ${timeRef.current?.value}:59.999`, }, }), { @@ -48,17 +52,14 @@ export const useTistoryPublishingPropertySection = ({ selectCurrentTab }: Args) setPropertyFormInfo((prev) => ({ ...prev, publishStatus })); }; - const setPublishTime = (publishTime: PublishWritingToTistoryRequest['publishTime']) => { - setPropertyFormInfo((prev) => ({ ...prev, publishTime })); - }; - return { isLoading, propertyFormInfo, setTags, setPublishStatus, passwordRef, - setPublishTime, + dateRef, + timeRef, publishWritingToTistory, }; }; From 2a2f91687f64ecfe7f20031f72f55198224cfe0e Mon Sep 17 00:00:00 2001 From: yogjin Date: Fri, 22 Sep 2023 01:21:09 +0900 Subject: [PATCH 14/23] =?UTF-8?q?style:=20`WritingPropertySection`=20?= =?UTF-8?q?=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../WritingPropertySection/WritingPropertySection.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/frontend/src/components/WritingPropertySection/WritingPropertySection.tsx b/frontend/src/components/WritingPropertySection/WritingPropertySection.tsx index b20e212aa..693c58c6b 100644 --- a/frontend/src/components/WritingPropertySection/WritingPropertySection.tsx +++ b/frontend/src/components/WritingPropertySection/WritingPropertySection.tsx @@ -129,7 +129,7 @@ const S = { InfoContent: styled.div` display: flex; flex-direction: column; - gap: 0.8rem; + gap: 1.8rem; padding: 1.6rem 0.9rem; font-size: 1.3rem; line-height: 1.3rem; @@ -145,7 +145,6 @@ const S = { flex-shrink: 0; gap: 0.4rem; width: 9.5rem; - height: 2.3rem; color: ${({ theme }) => theme.color.gray8}; font-size: 1.3rem; font-weight: 600; From 06a308f8848dbc6dd0f6219b0d9fd09622f17c8a Mon Sep 17 00:00:00 2001 From: yogjin Date: Fri, 22 Sep 2023 01:22:02 +0900 Subject: [PATCH 15/23] =?UTF-8?q?fix:=20=EB=AF=B8=EB=94=94=EC=97=84=20?= =?UTF-8?q?=EB=B0=9C=ED=96=89=20=EB=B0=A9=EC=8B=9D=20`onChange`=20select?= =?UTF-8?q?=EC=97=90=20=EC=84=A0=EC=96=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../MediumPublishingPropertySection.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/frontend/src/components/PublishingPropertySection/MediumPublishingPropertySection.tsx b/frontend/src/components/PublishingPropertySection/MediumPublishingPropertySection.tsx index 47f43baa0..f4911597f 100644 --- a/frontend/src/components/PublishingPropertySection/MediumPublishingPropertySection.tsx +++ b/frontend/src/components/PublishingPropertySection/MediumPublishingPropertySection.tsx @@ -54,9 +54,11 @@ const MediumPublishingPropertySection = ({ writingId, publishTo, selectCurrentTa 발행 방식
- setPublishStatus(e.target.value as keyof typeof MediumPublishStatus)} + > {MediumPublishStatusList.map((value, index) => ( - ))} From 356dc2f0f63fb51edbfd9eca9b68a1a8029c961d Mon Sep 17 00:00:00 2001 From: yogjin Date: Fri, 22 Sep 2023 01:23:07 +0900 Subject: [PATCH 16/23] =?UTF-8?q?feat:=20=ED=8B=B0=EC=8A=A4=ED=86=A0?= =?UTF-8?q?=EB=A6=AC=20=EB=B0=9C=ED=96=89=20`=ED=98=84=EC=9E=AC=20|=20?= =?UTF-8?q?=EC=98=88=EC=95=BD`=20=EB=B2=84=ED=8A=BC=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../PublishingPropertyStyle.ts | 14 +++++- .../TistoryPublishingPropertySection.tsx | 48 +++++++++++++++---- 2 files changed, 51 insertions(+), 11 deletions(-) diff --git a/frontend/src/components/PublishingPropertySection/PublishingPropertyStyle.ts b/frontend/src/components/PublishingPropertySection/PublishingPropertyStyle.ts index 7602e011c..45c485e69 100644 --- a/frontend/src/components/PublishingPropertySection/PublishingPropertyStyle.ts +++ b/frontend/src/components/PublishingPropertySection/PublishingPropertyStyle.ts @@ -48,7 +48,6 @@ const PublishingPropertyStyle = { gap: 0.6rem; flex-shrink: 0; width: 9.5rem; - height: 2.3rem; color: ${({ theme }) => theme.color.gray8}; font-size: 1.3rem; font-weight: 600; @@ -66,6 +65,19 @@ const PublishingPropertyStyle = { 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; diff --git a/frontend/src/components/PublishingPropertySection/TistoryPublishingPropertySection.tsx b/frontend/src/components/PublishingPropertySection/TistoryPublishingPropertySection.tsx index 873b94031..8d0ed4389 100644 --- a/frontend/src/components/PublishingPropertySection/TistoryPublishingPropertySection.tsx +++ b/frontend/src/components/PublishingPropertySection/TistoryPublishingPropertySection.tsx @@ -10,6 +10,8 @@ import { default as S } from './PublishingPropertyStyle'; import type { Blog } from 'types/domain'; import Input from 'components/@common/Input/Input'; import { dateFormatter } from 'utils/date'; +import { useState } from 'react'; +import Divider from 'components/@common/Divider/Divider'; type Props = { writingId: number; @@ -40,9 +42,18 @@ const TistoryPublishingPropertySection = ({ writingId, publishTo, selectCurrentT } = useTistoryPublishingPropertySection({ selectCurrentTab, }); + const [isPublishTimeInputOpen, setIsPublishTimeInputOpen] = useState(false); const { publishStatus } = propertyFormInfo; + const openPublishTimeInput = () => { + setIsPublishTimeInputOpen(true); + }; + + const closePublishTimeInput = () => { + setIsPublishTimeInputOpen(false); + }; + if (isLoading) return ( @@ -95,19 +106,36 @@ const TistoryPublishingPropertySection = ({ writingId, publishTo, selectCurrentT )} - + 발행 시간 - - - - + + + + 현재 + + + + 예약 + + + {isPublishTimeInputOpen && ( + + + + + )} + From 6c04923b3e65fe37bfa8d7855edc163c7fdf6004 Mon Sep 17 00:00:00 2001 From: yogjin Date: Fri, 22 Sep 2023 02:16:25 +0900 Subject: [PATCH 17/23] =?UTF-8?q?fix:=20tistory=20=EB=B0=9C=ED=96=89=20?= =?UTF-8?q?=EC=98=88=EC=95=BD=EC=8B=9C=EA=B0=84=20=EC=97=86=EC=9D=84=20?= =?UTF-8?q?=EC=8B=9C=20`publishTime`=20=EB=B9=88=20=EB=AC=B8=EC=9E=90?= =?UTF-8?q?=EC=97=B4=EB=A1=9C=20=EC=84=A4=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../useTistoryPublishingPropertySection.ts | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/frontend/src/components/PublishingPropertySection/useTistoryPublishingPropertySection.ts b/frontend/src/components/PublishingPropertySection/useTistoryPublishingPropertySection.ts index b5d1d70cc..d9595cb74 100644 --- a/frontend/src/components/PublishingPropertySection/useTistoryPublishingPropertySection.ts +++ b/frontend/src/components/PublishingPropertySection/useTistoryPublishingPropertySection.ts @@ -24,15 +24,20 @@ export const useTistoryPublishingPropertySection = ({ selectCurrentTab }: Args) }); const toast = useToast(); const { mutate: publishWritingToTistory, isLoading } = useMutation( - (writingId: number) => - publishWritingToTistoryRequest({ + (writingId: number) => { + const publishTime = + dateRef.current && timeRef.current + ? `${dateRef.current.value} ${timeRef.current.value}:59.999` + : ''; + return publishWritingToTistoryRequest({ writingId, body: { ...propertyFormInfo, password: passwordRef.current?.value ?? '', - publishTime: `${dateRef.current?.value} ${timeRef.current?.value}:59.999`, + publishTime, }, - }), + }); + }, { onSuccess: () => { selectCurrentTab(TabKeys.WritingProperty); From 3029661e0a057ec478a80b996de3093b2d424e06 Mon Sep 17 00:00:00 2001 From: yogjin Date: Fri, 22 Sep 2023 02:39:12 +0900 Subject: [PATCH 18/23] =?UTF-8?q?refactor:=20`TODO`=20comment=20=EC=A0=9C?= =?UTF-8?q?=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/types/apis/writings.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/src/types/apis/writings.ts b/frontend/src/types/apis/writings.ts index 1189ab5f4..cebe0aa1c 100644 --- a/frontend/src/types/apis/writings.ts +++ b/frontend/src/types/apis/writings.ts @@ -1,4 +1,4 @@ -import { Blog, PublishingPropertyData } from 'types/domain'; +import { Blog } from 'types/domain'; import { CategoryResponse } from './category'; export type AddWritingRequest = FormData; @@ -24,7 +24,7 @@ export type PublishWritingToTistoryRequest = { publishStatus: 'PUBLIC' | 'PRIVATE' | 'PROTECT'; password: string; categoryId: string; - publishTime: string; // TODO: "yyyy-MM-dd HH:mm:ss.SSS" 형식으로 + publishTime: string; // "yyyy-MM-dd HH:mm:ss.SSS" 형식 }; export type PublishWritingToTistoryArgs = { From 557b8a3b786bba369a5fcbdf70f1202c7b1b346b Mon Sep 17 00:00:00 2001 From: yogjin Date: Fri, 22 Sep 2023 03:25:15 +0900 Subject: [PATCH 19/23] =?UTF-8?q?chore:=20`TODO:=20=EC=B9=B4=ED=85=8C?= =?UTF-8?q?=EA=B3=A0=EB=A6=AC=20=EC=84=A0=ED=83=9D=20=EA=B8=B0=EB=8A=A5`?= =?UTF-8?q?=20=EC=A3=BC=EC=84=9D=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../useTistoryPublishingPropertySection.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/components/PublishingPropertySection/useTistoryPublishingPropertySection.ts b/frontend/src/components/PublishingPropertySection/useTistoryPublishingPropertySection.ts index d9595cb74..6ba9712ce 100644 --- a/frontend/src/components/PublishingPropertySection/useTistoryPublishingPropertySection.ts +++ b/frontend/src/components/PublishingPropertySection/useTistoryPublishingPropertySection.ts @@ -19,7 +19,7 @@ export const useTistoryPublishingPropertySection = ({ selectCurrentTab }: Args) tags: [], publishStatus: 'PUBLIC', password: '', - categoryId: '0', + categoryId: '0', // TODO: 카테고리 선택 기능 추가 publishTime: '', }); const toast = useToast(); From d1694b19650ef0f544d09b99d7794826b101c05f Mon Sep 17 00:00:00 2001 From: yogjin Date: Fri, 22 Sep 2023 03:25:56 +0900 Subject: [PATCH 20/23] =?UTF-8?q?style:=20=EB=B0=9C=ED=96=89=EC=A0=95?= =?UTF-8?q?=EB=B3=B4=20=ED=83=9C=EA=B7=B8=20=EA=B9=A8=EC=A7=80=EB=8A=94=20?= =?UTF-8?q?=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/WritingPropertySection/WritingPropertySection.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/frontend/src/components/WritingPropertySection/WritingPropertySection.tsx b/frontend/src/components/WritingPropertySection/WritingPropertySection.tsx index 693c58c6b..0e37feeaa 100644 --- a/frontend/src/components/WritingPropertySection/WritingPropertySection.tsx +++ b/frontend/src/components/WritingPropertySection/WritingPropertySection.tsx @@ -141,7 +141,6 @@ const S = { PropertyName: styled.div` display: flex; align-items: center; - align-self: flex-start; flex-shrink: 0; gap: 0.4rem; width: 9.5rem; From db2fa4ffc4b0113bf8b4aab48639aee0a3daf439 Mon Sep 17 00:00:00 2001 From: yogjin Date: Fri, 22 Sep 2023 03:47:16 +0900 Subject: [PATCH 21/23] =?UTF-8?q?chore:=20=EC=A3=BC=EC=84=9D=20=EC=A0=9C?= =?UTF-8?q?=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/WritingSideBar/WritingSideBar.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/frontend/src/components/WritingSideBar/WritingSideBar.tsx b/frontend/src/components/WritingSideBar/WritingSideBar.tsx index 50c0af968..855ad3879 100644 --- a/frontend/src/components/WritingSideBar/WritingSideBar.tsx +++ b/frontend/src/components/WritingSideBar/WritingSideBar.tsx @@ -96,7 +96,6 @@ const WritingSideBar = ({ isPublishingSectionActive = true }: Props) => { .filter( (menu) => ![TabKeys.TistoryPublishingProperty, TabKeys.MediumPublishingProperty].includes( - // 이상함 menu.key, ), ) From 8202df0d1eb73eeec392747971e4ccd1fc9c5721 Mon Sep 17 00:00:00 2001 From: yogjin Date: Fri, 22 Sep 2023 04:08:48 +0900 Subject: [PATCH 22/23] =?UTF-8?q?refactor:=20`Menu`=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20`closeModal`=20prop=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/@common/Menu/Menu.stories.tsx | 5 ----- frontend/src/components/@common/Menu/Menu.tsx | 17 +---------------- 2 files changed, 1 insertion(+), 21 deletions(-) diff --git a/frontend/src/components/@common/Menu/Menu.stories.tsx b/frontend/src/components/@common/Menu/Menu.stories.tsx index 94d5386c7..aaa6e62ff 100644 --- a/frontend/src/components/@common/Menu/Menu.stories.tsx +++ b/frontend/src/components/@common/Menu/Menu.stories.tsx @@ -7,7 +7,6 @@ const meta = { title: 'common/Menu', args: { isOpen: true, - closeMenu: () => {}, verticalDirection: 'down', horizonDirection: 'left', }, @@ -15,9 +14,6 @@ const meta = { isOpen: { description: '메뉴의 상태입니다.', }, - closeMenu: { - description: '메뉴를 닫는 핸들러 함수입니다.', - }, verticalDirection: { description: '메뉴가 수직을 기준으로 렌더링 되는 위치입니다.', }, @@ -45,7 +41,6 @@ export const Playground: Story = { diff --git a/frontend/src/components/@common/Menu/Menu.tsx b/frontend/src/components/@common/Menu/Menu.tsx index fd2cbf363..77487d34b 100644 --- a/frontend/src/components/@common/Menu/Menu.tsx +++ b/frontend/src/components/@common/Menu/Menu.tsx @@ -1,4 +1,4 @@ -import { PropsWithChildren } from 'react'; +import { PropsWithChildren, forwardRef } from 'react'; import styled from 'styled-components'; import Item from './Item'; @@ -7,14 +7,12 @@ type HorizonDirection = 'left' | 'right'; type Props = { isOpen: boolean; - closeMenu: () => void; verticalDirection?: VerticalDirection; horizonDirection?: HorizonDirection; } & PropsWithChildren; const Menu = ({ isOpen, - closeMenu, verticalDirection = 'down', horizonDirection = 'left', children, @@ -23,7 +21,6 @@ const Menu = ({ return ( - {children} @@ -38,18 +35,6 @@ export default Menu; const S = { Menu: styled.div``, - Backdrop: styled.button` - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - width: 100vw; - height: 100vh; - - cursor: default; - opacity: 0.1; - `, - MenuList: styled.ul<{ $verticalDirection: VerticalDirection; $horizonDirection: HorizonDirection; From 59986a86dabf4bc6544a1c989d69d6bb0434f42e Mon Sep 17 00:00:00 2001 From: yogjin Date: Fri, 22 Sep 2023 04:09:17 +0900 Subject: [PATCH 23/23] =?UTF-8?q?feat:=20`useOutsideClickEffect`=20?= =?UTF-8?q?=EC=9D=B4=EC=9A=A9=ED=95=B4=20=EB=8F=84=EC=9B=80=EB=A7=90=20?= =?UTF-8?q?=ED=8C=A8=EB=84=90=20=EB=8B=AB=EA=B8=B0=20=EA=B8=B0=EB=8A=A5=20?= =?UTF-8?q?=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/HelpMenu/HelpMenu.tsx | 30 ++++++++++++------- 1 file changed, 19 insertions(+), 11 deletions(-) diff --git a/frontend/src/components/HelpMenu/HelpMenu.tsx b/frontend/src/components/HelpMenu/HelpMenu.tsx index 6ed63ab56..cd07da605 100644 --- a/frontend/src/components/HelpMenu/HelpMenu.tsx +++ b/frontend/src/components/HelpMenu/HelpMenu.tsx @@ -1,9 +1,15 @@ import Menu from 'components/@common/Menu/Menu'; -import { useState } from 'react'; +import useOutsideClickEffect from 'hooks/@common/useOutsideClickEffect'; +import { useRef, useState } from 'react'; import styled from 'styled-components'; const HelpMenu = () => { const [isOpen, setIsOpen] = useState(false); + const menuRef = useRef(null); + + const closeMenu = () => setIsOpen(false); + useOutsideClickEffect(menuRef, closeMenu); + const helpMenus = [ { title: '동글 위키보러 가기', @@ -18,17 +24,19 @@ const HelpMenu = () => { }, ]; - const closeMenu = () => setIsOpen(false); - return ( - setIsOpen(!isOpen)}> - ? - - {helpMenus.map(({ title, handleMenuItemClick }) => { - return ; - })} - - +
+ setIsOpen(!isOpen)}> + ? + + {helpMenus.map(({ title, handleMenuItemClick }) => { + return ( + + ); + })} + + +
); };