feat : DiaryText 컴포넌트 구현 (#177)

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;
+}

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<typeof DiaryText> = {
+  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<typeof DiaryText>;
+
+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) => {
+    },
+  },
+};

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; /* 긴 단어도 줄바꿈 처리 */
+`;

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 (
+        /** 일기 본문 정보를 담는 컴포넌트입니다. */
+        <StyledDiaryTextContainer>
+            <StyledDiaryDate>{titleDate}</StyledDiaryDate>
+            <StyledDiaryTitleContainer>
+                <StyledDiaryTitle>{title}</StyledDiaryTitle>
+                <VisibilityButton
+                    isPublic={isPublic}
+                    isActive={false}
+                    onClick={() => onVisibilityChange(!isPublic)} // isPublic 값을 반전시켜서 전달
+                />
+            </StyledDiaryTitleContainer>
+            <StyledDiaryAuthor>{author}</StyledDiaryAuthor>
+            <StyledDiaryUpdateDate>{updateDate}</StyledDiaryUpdateDate>
+            <StyledDiaryContent>{diaryContent}</StyledDiaryContent>
+        </StyledDiaryTextContainer>
+    );
+};
+
+export default DiaryText;