feat: 모두의 정원 게시글 아이템 구현

frontend/src/components/@common/SeeMoreContentBox/SeeMoreContentBox.stories.tsx

@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import SeeMoreContentBox from '.';
+
+const meta: Meta<typeof SeeMoreContentBox> = {
+  component: SeeMoreContentBox,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof SeeMoreContentBox>;
+
+export const ShortContent: Story = {
+  args: {
+    maxHeight: '32px',
+    children: '안녕하세요',
+  },
+};
+
+export const LongContent: Story = {
+  args: {
+    maxHeight: '32px',
+    children: `
+      제가 LA에 있을때는 말이죠 정말 제가 꿈에 무대인 메이저리그로 진출해서 가는 식당마다 싸인해달라 기자들은 항상 붙어다니며 취재하고 제가 그 머~ 어~ 대통령이 된 기분이였어요 
+      그런데 17일만에 17일만에 마이너리그로 떨어졌어요 못던져서 그만두고 그냥 확 한국으로 가버리고 싶었어요 
+      그래서 집에 가는길에 그 맥주6개 달린거 있잖아요 맥주6개 그걸 사가지고 집으로 갔어요 
+      그전에는 술먹으면 야구 못하는줄 알았어요 그냥 한국으로
+    `,
+  },
+};

frontend/src/components/@common/SeeMoreContentBox/SeeMoreContentBox.styles.ts

@@ -0,0 +1,29 @@
+import { styled } from 'styled-components';
+
+export const Wrapper = styled.div<{ hiddenOver: boolean; maxHeight: string }>`
+  position: relative;
+  width: 100%;
+  height: ${({ hiddenOver, maxHeight }) => (hiddenOver ? maxHeight : 'max-content')};
+`;
+
+export const ContentBox = styled.div<{ hiddenOver: boolean; maxHeight: string }>`
+  overflow: hidden;
+  max-height: ${({ hiddenOver, maxHeight }) => (hiddenOver ? `calc(${maxHeight} - 1.4rem)` : '')};
+`;
+
+export const SeeMoreButtonArea = styled.div`
+  position: absolute;
+  z-index: ${(props) => props.theme.zIndex.fixed};
+  bottom: 0;
+
+  display: flex;
+  justify-content: start;
+
+  width: 100%;
+`;
+
+export const SeeMoreButton = styled.button`
+  width: max-content;
+  height: 1.2rem;
+  font-size: 1.2rem;
+`;

frontend/src/components/@common/SeeMoreContentBox/hooks/useShowState.ts

@@ -0,0 +1,25 @@
+import { useState } from 'react';
+
+type ShowState = 'NOT_OVER' | 'HIDDEN_OVER' | 'SHOW_OVER';
+
+const useShowState = (maxHeight: `${number}px`) => {
+  const [showState, setShowState] = useState<ShowState>('NOT_OVER');
+
+  const wrapperRef = (instance: HTMLDivElement | null) => {
+    if (!instance) return;
+
+    const maxHeightNumber = Number(maxHeight.slice(0, -2));
+
+    if (showState === 'NOT_OVER' && instance.offsetHeight > maxHeightNumber) {
+      setShowState('HIDDEN_OVER');
+    }
+  };
+
+  const showOver = () => {
+    setShowState('SHOW_OVER');
+  };
+
+  return { showState, wrapperRef, showOver };
+};
+
+export default useShowState;

frontend/src/components/@common/SeeMoreContentBox/index.tsx

@@ -0,0 +1,34 @@
+import { ContentBox, SeeMoreButton, SeeMoreButtonArea, Wrapper } from './SeeMoreContentBox.styles';
+import useShowState from './hooks/useShowState';
+
+interface SeeMoreContentBoxProps {
+  children: string;
+  maxHeight?: `${number}px`;
+}
+
+const SeeMoreContentBox = ({ children: content, maxHeight = '64px' }: SeeMoreContentBoxProps) => {
+  const { showState, wrapperRef, showOver } = useShowState(maxHeight);
+  const paragraphList = content.trim().split(/(?:\r?\n)+/);
+
+  return (
+    <Wrapper ref={wrapperRef} maxHeight={maxHeight} hiddenOver={showState === 'HIDDEN_OVER'}>
+      <ContentBox maxHeight={maxHeight} hiddenOver={showState === 'HIDDEN_OVER'}>
+        {paragraphList.shift()}
+        {paragraphList.map((paragraph) => (
+          <>
+            <br />
+            <br />
+            {paragraph}
+          </>
+        ))}
+      </ContentBox>
+      {showState === 'HIDDEN_OVER' && (
+        <SeeMoreButtonArea>
+          <SeeMoreButton onClick={showOver}>더보기</SeeMoreButton>
+        </SeeMoreButtonArea>
+      )}
+    </Wrapper>
+  );
+};
+
+export default SeeMoreContentBox;

frontend/src/components/dictionaryPlant/DictionaryPlantContent/index.tsx

@@ -5,6 +5,7 @@ import PottedPlant from 'components/@common/Icons/PottedPlant';
 import ThermometerSnow from 'components/@common/Icons/ThermometerSnow';
 import ThermometerSun from 'components/@common/Icons/ThermometerSun';
 import Warning from 'components/@common/Icons/Warning';
+import SeeMoreContentBox from 'components/@common/SeeMoreContentBox';
 import TagBox from 'components/dictionaryPlant/TagBox';
 import TagSwitch from 'components/dictionaryPlant/TagSwitch';
 import {
@@ -159,22 +160,9 @@ const DictionaryPlantContent = (props: DictionaryPlantExtendCycles) => {
         <ManageInfoBox>
           <p>특별 관리 정보</p>
           <span>
-            {specialManageInfo !== NO_INFORMATION
-              ? specialManageInfo
-                  .trim()
-                  .split(/(?:\r?\n)+/)
-                  .map((paragraph, index) =>
-                    index ? (
-                      <>
-                        <br />
-                        <br />
-                        {paragraph}
-                      </>
-                    ) : (
-                      paragraph
-                    )
-                  )
-              : '관련 정보가 없어요😇'}
+            <SeeMoreContentBox>
+              {specialManageInfo !== NO_INFORMATION ? specialManageInfo : '관련 정보가 없어요😇'}
+            </SeeMoreContentBox>
           </span>
         </ManageInfoBox>
       </ContentBox>

frontend/src/components/garden/GardenPostItem/GardenPostItem.stories.tsx

@@ -1,17 +1,28 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import { ComponentProps } from 'react';
 import GardenPostItem from '.';
 
 const meta: Meta<typeof GardenPostItem> = {
   component: GardenPostItem,
+  argTypes: {
+    createdAt: {
+      table: {
+        type: {
+          summary: 'DateFormat',
+          detail: 'YYYY-MM-DD 형식의 문자열',
+        },
+      },
+      control: 'text',
+    },
+  },
 };
 
 export default meta;
 
 type Story = StoryObj<typeof GardenPostItem>;
 
-const defaultArgs = {
+const defaultArgs: ComponentProps<typeof GardenPostItem> = {
   createdAt: '1999-12-16',
-  updatedAt: '1999-12-16',
   content: '한달차인데 저는 이거 이렇게 키우고있어요',
   manageLevel: '초보자',
   petPlant: {
@@ -24,7 +35,7 @@ const defaultArgs = {
     daySince: 32,
     waterCycle: 7,
   },
-} as const;
+};
 
 export const Default: Story = {
   args: defaultArgs,

frontend/src/components/garden/GardenPostItem/GardenPostItem.styles.ts

@@ -29,7 +29,7 @@ export const HeaderContent = styled.div`
   flex-direction: column;
   justify-content: space-between;
 
-  width: 192px;
+  width: 176px;
   height: 100%;
   margin-right: auto;
   margin-left: 16px;
@@ -53,7 +53,7 @@ export const DaySince = styled.p`
 export const PostingDate = styled.p`
   width: max-content;
   margin-top: 4px;
-  font-size: 1.2rem;
+  font-size: 1rem;
   color: ${(props) => props.theme.color.sub};
 `;
 
@@ -125,7 +125,7 @@ export const ManageLevelTag = styled(Tag)`
   border-color: ${({ theme }) => theme.color.primary};
 `;
 
-export const Content = styled.div`
+export const ContentArea = styled.div`
   width: 100%;
   margin-top: 24px;
   font-size: 1.6rem;

frontend/src/components/garden/GardenPostItem/index.tsx

@@ -3,10 +3,11 @@ import Flowerpot from 'components/@common/Icons/Flowerpot';
 import House from 'components/@common/Icons/House';
 import Sun from 'components/@common/Icons/Sun';
 import Wind from 'components/@common/Icons/Wind';
+import SeeMoreContentBox from 'components/@common/SeeMoreContentBox';
 import { convertDateKorYear } from 'utils/date';
 import theme from 'style/theme.style';
 import {
-  Content,
+  ContentArea,
   DaySince,
   Environment,
   EnvironmentItem,
@@ -25,12 +26,12 @@ import {
 type GardenPostItemProps = Omit<GardenPostItemType, 'id' | 'updatedAt'>;
 
 const GardenPostItem = ({ content, createdAt, manageLevel, petPlant }: GardenPostItemProps) => {
-  const postingDate = convertDateKorYear(createdAt).slice(5);
+  const postingDate = convertDateKorYear(createdAt);
 
   return (
     <Wrapper>
       <Header>
-        <PetPlantImage src={petPlant.imageUrl} />
+        <PetPlantImage src={petPlant.imageUrl} alt="반려식물" />
         <HeaderContent>
           <PetPlantNickname>{petPlant.nickname}</PetPlantNickname>
           <DaySince>
@@ -93,22 +94,9 @@ const GardenPostItem = ({ content, createdAt, manageLevel, petPlant }: GardenPos
         <WaterCycleTag>물 주기: {petPlant.waterCycle}일</WaterCycleTag>
         <ManageLevelTag>{manageLevel}에게 추천해요</ManageLevelTag>
       </TagArea>
-      <Content>
-        {content
-          .trim()
-          .split(/(?:\r?\n)+/)
-          .map((paragraph, index) =>
-            index ? (
-              <>
-                <br />
-                <br />
-                {paragraph}
-              </>
-            ) : (
-              paragraph
-            )
-          )}
-      </Content>
+      <ContentArea>
+        <SeeMoreContentBox>{content}</SeeMoreContentBox>
+      </ContentArea>
     </Wrapper>
   );
 };

frontend/src/types/garden.ts

@@ -1,11 +1,12 @@
+import type { DateFormat } from './date';
 import type { ManageLevel } from './dictionaryPlant';
 import type { PetPlantDetails } from './petPlant';
 
 export interface GardenPostItem {
   id: number;
   content: string;
-  createdAt: string;
-  updatedAt: string;
+  createdAt: DateFormat;
+  updatedAt: DateFormat;
   manageLevel: Exclude<ManageLevel, '정보없음'>;
   petPlant: Pick<
     PetPlantDetails,