From 71b8d413fd1393602fcecd387ecabd390a62093b Mon Sep 17 00:00:00 2001 From: jymaeng1234 <102141309+jymaeng1234@users.noreply.github.com> Date: Tue, 5 Nov 2024 17:03:23 +0900 Subject: [PATCH] =?UTF-8?q?feat=20:=20DiaryText=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EA=B5=AC=ED=98=84=20(#177)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/widgets/diary-text/model/type.ts | 9 +++ .../diary-text/ui/DiaryText.stories.tsx | 57 +++++++++++++++++++ src/widgets/diary-text/ui/DiaryText.styled.ts | 56 ++++++++++++++++++ src/widgets/diary-text/ui/DiaryText.tsx | 43 ++++++++++++++ 4 files changed, 165 insertions(+) create mode 100644 src/widgets/diary-text/model/type.ts create mode 100644 src/widgets/diary-text/ui/DiaryText.stories.tsx create mode 100644 src/widgets/diary-text/ui/DiaryText.styled.ts create mode 100644 src/widgets/diary-text/ui/DiaryText.tsx diff --git a/src/widgets/diary-text/model/type.ts b/src/widgets/diary-text/model/type.ts new file mode 100644 index 0000000..b511cc7 --- /dev/null +++ b/src/widgets/diary-text/model/type.ts @@ -0,0 +1,9 @@ +export interface DiaryTextProps { + titleDate: string; + title: string; + author: string; + updateDate: string; + diaryContent: string; + isPublic: boolean; + onVisibilityChange: (newVisibility: boolean) => void; +} diff --git a/src/widgets/diary-text/ui/DiaryText.stories.tsx b/src/widgets/diary-text/ui/DiaryText.stories.tsx new file mode 100644 index 0000000..d3853d7 --- /dev/null +++ b/src/widgets/diary-text/ui/DiaryText.stories.tsx @@ -0,0 +1,57 @@ +import React from 'react'; +import type { Meta, StoryObj } from '@storybook/react'; +import DiaryText from './DiaryText'; + +const meta: Meta = { + component: DiaryText, + title: 'Widgets/DiaryText', + tags: ['autodocs'], + docs: { + description: { + component: '이 컴포넌트는 일기의 제목, 공개 여부, 작성자, 날짜, 내용과 같은 정보를 표시합니다.' + } + }, + argTypes: { + titleDate: { + control: 'text', + description : '일기 주제 날짜' + }, + title: { + control: 'text', + description : '일기 제목' + }, + author: { + control: 'text', + description : '작성자 이름' + }, + updateDate: { + control: 'text', + description : '일기를 작성한 날짜' + }, + diaryContent: { + control: 'text', + description : '일기 내용' + }, + isPublic: { + control: 'boolean', + }, + onVisibilityChange: { action: 'visibilityChanged' }, + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + args: { + titleDate: '2024-11-05', + title: '오늘 나의 일기', + author: '홍길동', + updateDate: '2024-11-05', + diaryContent: `오늘은끝나고 카페에 가야지.\n스타벅스 뱅쇼를 사먹어야지.\n신난다.\n오예\n몇시에 갈까`, + isPublic: true, + onVisibilityChange: (newVisibility: boolean) => { + }, + }, +}; diff --git a/src/widgets/diary-text/ui/DiaryText.styled.ts b/src/widgets/diary-text/ui/DiaryText.styled.ts new file mode 100644 index 0000000..74005d9 --- /dev/null +++ b/src/widgets/diary-text/ui/DiaryText.styled.ts @@ -0,0 +1,56 @@ +import theme from '@/app/styles/theme'; +import styled from 'styled-components'; + +export const StyledDiaryTextContainer = styled.div``; + +export const StyledDiaryTitleContainer = styled.p` + display: flex; + justify-content: space-between; + width: 100%; + margin: 40px 0 0 0; + padding: 0; +`; + +export const StyledDiaryDate = styled.p` + font-size: 20px; + font-weight: 600; + text-align: center; + margin: 0; + padding: 0; +`; + +export const StyledDiaryTitle = styled.p` + font-size: 28px; + font-weight: 600; + text-align: center; + flex-grow: 1; + margin: 0; + padding: 0; +`; +export const StyledDiaryAuthor = styled.p` + font-size: 16px; + font-weight: 500; + color: #3a3a3a; + text-align: center; + margin: 0; + padding: 5px 0 0 0; +`; +export const StyledDiaryUpdateDate = styled.p` + font-size: 14px; + font-weight: 400; //regular + text-align: right; + margin: 0; + padding: 40px 0 0 0; +`; +export const StyledDiaryContent = styled.p` + font-size: 16px; + font-weight: 500; + color: ${theme.colors.gray_dark}; + background-color: #ffffff; + border-radius: 10px; + padding: 30px; + box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.13); + margin: 5px 0 0 0; + white-space: pre-wrap; /* 줄바꿈을 유지 */ + word-wrap: break-word; /* 긴 단어도 줄바꿈 처리 */ +`; diff --git a/src/widgets/diary-text/ui/DiaryText.tsx b/src/widgets/diary-text/ui/DiaryText.tsx new file mode 100644 index 0000000..21ab18e --- /dev/null +++ b/src/widgets/diary-text/ui/DiaryText.tsx @@ -0,0 +1,43 @@ +import React from 'react'; +import { DiaryVisibilityControls } from '@/widgets/diary-visibility-controls'; +import { DiaryTextProps } from '../model/type'; +import { + StyledDiaryAuthor, + StyledDiaryContent, + StyledDiaryDate, + StyledDiaryTextContainer, + StyledDiaryTitle, + StyledDiaryTitleContainer, + StyledDiaryUpdateDate +} from './DiaryText.styled'; +import { VisibilityButton } from '@/features/diary-write'; + +const DiaryText = ({ + titleDate, + title, + author, + updateDate, + diaryContent, + isPublic, + onVisibilityChange +}: DiaryTextProps) => { + return ( + /** 일기 본문 정보를 담는 컴포넌트입니다. */ + + {titleDate} + + {title} + onVisibilityChange(!isPublic)} // isPublic 값을 반전시켜서 전달 + /> + + {author} + {updateDate} + {diaryContent} + + ); +}; + +export default DiaryText;