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

frontend/.storybook/decorators.tsx

@@ -1,4 +1,5 @@
 import type { Decorator } from '@storybook/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import React from 'react';
 import { RecoilRoot } from 'recoil';
 import { ThemeProvider } from 'styled-components';
@@ -14,9 +15,12 @@ export const decorateGlobalStyle: Decorator = (Story) => (
   </ThemeProvider>
 );
 
-export const decorateToastRoot: Decorator = (Story) => (
-  <>
-    <div id="toast-root"></div>
-    <Story />
-  </>
-);
+export const decorateQueryClient: Decorator = (Story) => {
+  const queryClient = new QueryClient();
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      <Story />
+    </QueryClientProvider>
+  );
+};

frontend/.storybook/preview.tsx

@@ -1,11 +1,9 @@
 import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
 import type { Preview } from '@storybook/react';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { initialize, mswLoader } from 'msw-storybook-addon';
-import React from 'react';
 import { withRouter } from 'storybook-addon-react-router-v6';
 import { storybookHandlers } from '../src/mocks/storybookHandlers';
-import { decorateGlobalStyle } from './decorators';
+import { decorateGlobalStyle, decorateQueryClient } from './decorators';
 
 initialize({
   serviceWorker: {
@@ -24,18 +22,8 @@ const customViewPort = {
   },
 };
 
-const queryClient = new QueryClient();
-
 const preview: Preview = {
-  decorators: [
-    decorateGlobalStyle,
-    (Story) => (
-      <QueryClientProvider client={queryClient}>
-        <Story />
-      </QueryClientProvider>
-    ),
-    withRouter,
-  ],
+  decorators: [decorateGlobalStyle, decorateQueryClient, withRouter],
   parameters: {
     viewport: {
       viewports: { ...INITIAL_VIEWPORTS, ...customViewPort },

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

@@ -0,0 +1,47 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import GardenPostItem from '.';
+
+const meta: Meta<typeof GardenPostItem> = {
+  component: GardenPostItem,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof GardenPostItem>;
+
+const defaultArgs = {
+  createdAt: '1999-12-16',
+  updatedAt: '1999-12-16',
+  content: '한달차인데 저는 이거 이렇게 키우고있어요',
+  manageLevel: '초보자',
+  petPlant: {
+    imageUrl: 'https://images.unsplash.com/photo-1667342608690-828e1a839ead',
+    nickname: '초퍼',
+    location: '거실',
+    flowerpot: '플라스틱/유리/캔',
+    light: '창문 밖에서 해를 받아요',
+    wind: '창문이 없지만 바람이 통해요',
+    daySince: 32,
+    waterCycle: 7,
+  },
+} as const;
+
+export const Default: Story = {
+  args: defaultArgs,
+};
+
+export const LargeContent: Story = {
+  args: {
+    ...defaultArgs,
+    content: `
+      제가 LA에 있을때는 말이죠 정말 제가 꿈에 무대인 메이저리그로 진출해서 가는 식당마다 싸인해달라 기자들은 항상 붙어다니며 취재하고 제가 그 머~ 어~ 대통령이 된 기분이였어요 
+      그런데 17일만에 17일만에 마이너리그로 떨어졌어요 못던져서 그만두고 그냥 확 한국으로 가버리고 싶었어요 
+      그래서 집에 가는길에 그 맥주6개 달린거 있잖아요 맥주6개 그걸 사가지고 집으로 갔어요 
+      그전에는 술먹으면 야구 못하는줄 알았어요 그냥 한국으로
+    `,
+    petPlant: {
+      ...defaultArgs.petPlant,
+      nickname: '박찬호의 길고길고길고길고길고길고길고긴 식물이름',
+    },
+  },
+};

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

@@ -0,0 +1,133 @@
+import { styled } from 'styled-components';
+
+export const Wrapper = styled.li`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  width: 100%;
+  padding: 0 16px;
+
+  list-style: none;
+`;
+
+export const Header = styled.div`
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  height: 40px;
+`;
+
+export const PetPlantImage = styled.img`
+  width: 40px;
+  height: 40px;
+  border-radius: 8px;
+`;
+
+export const HeaderContent = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+
+  width: 192px;
+  height: 100%;
+  margin-right: auto;
+  margin-left: 16px;
+`;
+
+export const PetPlantNickname = styled.p`
+  overflow: hidden;
+
+  font-size: 1.8rem;
+  font-weight: 500;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+
+export const DaySince = styled.p`
+  font-size: 1.4rem;
+  font-weight: 500;
+  color: ${(props) => props.theme.color.sub};
+`;
+
+export const PostingDate = styled.p`
+  width: max-content;
+  margin-top: 4px;
+  font-size: 1.2rem;
+  color: ${(props) => props.theme.color.sub};
+`;
+
+export const Environment = styled.section`
+  display: flex;
+  flex-direction: column;
+  row-gap: 8px;
+  align-items: center;
+
+  width: 100%;
+  margin-top: 16px;
+  padding: 16px;
+
+  background-color: ${({ theme }) => theme.color.primary}13;
+  border-radius: 8px;
+`;
+
+export const EnvironmentItem = styled.p`
+  display: flex;
+  column-gap: 8px;
+  align-items: center;
+
+  width: 100%;
+
+  font-size: 1.4rem;
+`;
+
+export const EnvironmentTitle = styled.span`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  width: 24px;
+  height: 24px;
+
+  color: ${({ theme }) => theme.color.primary};
+
+  background: ${({ theme }) => theme.color.background};
+  border-radius: 50%;
+`;
+
+export const TagArea = styled.div`
+  display: flex;
+  width: 100%;
+  margin-top: 24px;
+
+  & > div + div {
+    margin-left: 8px;
+  }
+`;
+
+export const Tag = styled.div`
+  width: max-content;
+  padding: 8px 12px;
+
+  font-size: 1.2rem;
+  font-weight: 700;
+  color: ${(props) => props.theme.color.sub};
+
+  border: solid 1.6px;
+  border-radius: 16px;
+`;
+
+export const WaterCycleTag = styled(Tag)`
+  border-color: ${({ theme }) => theme.color.water};
+`;
+
+export const ManageLevelTag = styled(Tag)`
+  border-color: ${({ theme }) => theme.color.primary};
+`;
+
+export const Content = styled.div`
+  width: 100%;
+  margin-top: 24px;
+  font-size: 1.6rem;
+  color: ${(props) => props.theme.color.sub};
+`;

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

@@ -0,0 +1,116 @@
+import type { GardenPostItem as GardenPostItemType } from 'types/garden';
+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 { convertDateKorYear } from 'utils/date';
+import theme from 'style/theme.style';
+import {
+  Content,
+  DaySince,
+  Environment,
+  EnvironmentItem,
+  EnvironmentTitle,
+  Header,
+  HeaderContent,
+  ManageLevelTag,
+  PetPlantImage,
+  PetPlantNickname,
+  PostingDate,
+  TagArea,
+  WaterCycleTag,
+  Wrapper,
+} from './GardenPostItem.styles';
+
+type GardenPostItemProps = Omit<GardenPostItemType, 'id' | 'updatedAt'>;
+
+const GardenPostItem = ({ content, createdAt, manageLevel, petPlant }: GardenPostItemProps) => {
+  const postingDate = convertDateKorYear(createdAt).slice(5);
+
+  return (
+    <Wrapper>
+      <Header>
+        <PetPlantImage src={petPlant.imageUrl} />
+        <HeaderContent>
+          <PetPlantNickname>{petPlant.nickname}</PetPlantNickname>
+          <DaySince>
+            함께한지 <span>{petPlant.daySince}</span>일째
+          </DaySince>
+        </HeaderContent>
+        <PostingDate>{postingDate}</PostingDate>
+      </Header>
+      <Environment>
+        <EnvironmentItem>
+          <EnvironmentTitle>
+            <House
+              color={theme.color.primary}
+              aria-label="장소"
+              aria-describedby="반려 식물이 놓인 공간"
+              width="20px"
+              height="20px"
+            />
+          </EnvironmentTitle>
+          {petPlant.location}
+        </EnvironmentItem>
+        <EnvironmentItem>
+          <EnvironmentTitle>
+            <Flowerpot
+              color={theme.color.primary}
+              aria-label="화분"
+              aria-describedby="반려 식물이 담긴 화분의 재질"
+              width="20px"
+              height="20px"
+            />
+          </EnvironmentTitle>
+          {petPlant.flowerpot}
+        </EnvironmentItem>
+        <EnvironmentItem>
+          <EnvironmentTitle>
+            <Sun
+              color={theme.color.primary}
+              aria-label="채광"
+              aria-describedby="반려 식물이 빛을 얼마나 받고 있는지"
+              width="20px"
+              height="20px"
+            />
+          </EnvironmentTitle>
+          {petPlant.light}
+        </EnvironmentItem>
+        <EnvironmentItem>
+          <EnvironmentTitle>
+            <Wind
+              color={theme.color.primary}
+              aria-label="바람"
+              aria-describedby="반려 식물이 통풍이 잘 되는 위치인지"
+              width="20px"
+              height="20px"
+            />
+          </EnvironmentTitle>
+          {petPlant.wind}
+        </EnvironmentItem>
+      </Environment>
+      <TagArea>
+        <WaterCycleTag>물 주기: {petPlant.waterCycle}일</WaterCycleTag>
+        <ManageLevelTag>{manageLevel}에게 추천해요</ManageLevelTag>
+      </TagArea>
+      <Content>
+        {content
+          .trim()
+          .split(/(?:\r?\n)+/)
+          .map((paragraph, index) =>
+            index ? (
+              <>
+                <br />
+                <br />
+                {paragraph}
+              </>
+            ) : (
+              paragraph
+            )
+          )}
+      </Content>
+    </Wrapper>
+  );
+};
+
+export default GardenPostItem;

frontend/src/types/garden.ts

@@ -0,0 +1,21 @@
+import type { ManageLevel } from './dictionaryPlant';
+import type { PetPlantDetails } from './petPlant';
+
+export interface GardenPostItem {
+  id: number;
+  content: string;
+  createdAt: string;
+  updatedAt: string;
+  manageLevel: Exclude<ManageLevel, '정보없음'>;
+  petPlant: Pick<
+    PetPlantDetails,
+    | 'imageUrl'
+    | 'nickname'
+    | 'location'
+    | 'flowerpot'
+    | 'light'
+    | 'wind'
+    | 'daySince'
+    | 'waterCycle'
+  >;
+}