feat: 메인페이지 스토리북 테스트

src/components/atoms/info-box/index.tsx

@@ -0,0 +1,20 @@
+import { CatInfoBox, Description, Image, ImageWrapper } from '@components/main/CatDetail.style';
+import { IMAGE_PATH } from '@utils/assets';
+import React from 'react';
+interface Props {
+  isValidUrl: boolean;
+  image: string;
+  description: string;
+}
+const InfoBox = ({isValidUrl, image, description}: Props) => {
+  return (
+    <CatInfoBox>
+      <ImageWrapper>
+        <Image src={isValidUrl ? image ?? IMAGE_PATH.DEFAULT : IMAGE_PATH.DEFAULT} />
+      </ImageWrapper>
+      <Description>{description}</Description>
+    </CatInfoBox>
+  );
+};
+
+export default InfoBox;

src/components/atoms/info-box/info-box.stories.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import InfoBox from './';
+import catImg from '@assets/icons/cat3.svg';
+
+export default {
+  title: 'Components/CatDetail/info-box',
+  component: InfoBox,
+} as ComponentMeta<typeof InfoBox>;
+
+const Template: ComponentStory<typeof InfoBox> = args => <InfoBox {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  isValidUrl: true,
+  image: catImg,
+  description: '귀여운 길고양이',
+};

src/components/atoms/like-button/index.tsx

@@ -0,0 +1,23 @@
+import Icon from '@components/icon';
+import { Button, LikeText } from '@components/main/CatDetail.style';
+import React from 'react';
+interface Props {
+  isLiked:boolean;
+  onLike: () => void;
+  likes: number;
+}
+const LikeButton = ({isLiked, onLike, likes}:Props) => {
+  return (
+    <>
+      {!isLiked ? (
+        <Button onClick={onLike}>Like</Button>
+      ) : (
+        <LikeText>
+          <Icon type='HEART' /> {likes}
+        </LikeText>
+      )}
+    </>
+  );
+};
+
+export default LikeButton;

src/components/atoms/like-button/like-button.stories.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import LikeButton from './';
+
+export default {
+  title: 'Components/CatDetail/like-button',
+  component: LikeButton,
+} as ComponentMeta<typeof LikeButton>;
+
+const Template: ComponentStory<typeof LikeButton> = args => <LikeButton {...args} />;
+
+export const UnLiked = Template.bind({});
+UnLiked.args = {
+  isLiked: false,
+  likes: 0,
+  onLike: () => ({}),
+};
+
+export const Liked = Template.bind({});
+Liked.args = {
+  isLiked: true,
+  likes: 1,
+  onLike: () => ({}),
+};

src/components/layout/TabBar.tsx

@@ -1,27 +1,28 @@
 import React from 'react';
 import { CustomLink, LayoutTabBar, TabBarName } from './Layout.style';
 import Icon from '@components/icon';
+import tw from 'twin.macro';
 
 const TabBar = () => {
   const TabItem = [
     {
       path: '/main',
-      icon: <Icon type='MAP' fill='black' />,
+      icon: <Icon type='MAP' fill='#4B4A47' />,
       text: '메인',
     },
     {
       path: '/ranking',
-      icon: <Icon type='RANK' fill='black' />,
+      icon: <Icon type='RANK' fill='#4B4A47' />,
       text: '짱 고양이',
     },
     {
       path: '/upload',
-      icon: <Icon type='UPLOAD' fill='black' />,
+      icon: <Icon type='UPLOAD' fill='#4B4A47' />,
       text: '업로드',
     },
     {
       path: '/my-page',
-      icon: <Icon type='PERSON' fill='black' />,
+      icon: <Icon type='PERSON' fill='#4B4A47' />,
       text: '집사',
     },
   ];

src/components/main/CatDetail.style.ts

@@ -36,13 +36,16 @@ export const Image = styled.img`
 
 export const Description = styled.div``;
 
-export const LikeButton = styled.button`
+export const Button = styled.button`
   padding: 8px 12px;
   border-radius: 8px;
   background-color: #fabe93;
   color: #fff;
 `;
 
 export const LikeText = styled.span`
+  display: flex;
+  align-items: center;
+  gap: 10px;
   font-weight: bold;
 `;

src/components/main/CatDetail.tsx

@@ -1,9 +1,9 @@
 import React, { useCallback } from 'react';
 import { Cat } from '@models/cat';
-import { CatInfoBox, Container, Description, Image, ImageWrapper, LikeButton, LikeText } from './CatDetail.style';
+import { Container } from './CatDetail.style';
 import { UseLike } from '@hooks/useLike';
-import defaultImg from '../../assets/images/defaultImg.png';
-import Icon from '@components/icon';
+import InfoBox from '@components/atoms/info-box';
+import LikeButton from '@components/atoms/like-button';
 
 interface Props {
   cat: Cat;
@@ -20,19 +20,8 @@ const CatDetail = ({ cat }: Props) => {
 
   return (
     <Container>
-      <CatInfoBox>
-        <ImageWrapper>
-          <Image src={isValidUrl ? cat?.image ?? defaultImg : defaultImg} />
-        </ImageWrapper>
-        <Description>{cat.description}</Description>
-      </CatInfoBox>
-      {!cat.isLiked ? (
-        <LikeButton onClick={onLike}>Like</LikeButton>
-      ) : (
-        <LikeText>
-          <Icon type='HEART'/> {cat._count.likes}
-        </LikeText>
-      )}
+      <InfoBox isValidUrl={isValidUrl} image={cat?.image} description={cat.description} />
+      <LikeButton isLiked={cat.isLiked} onLike={onLike} likes={cat._count.likes} />
     </Container>
   );
 };