feat: 마이페이지 구현

src/components/Common/SectionHeader/SectionHeader.tsx

@@ -13,10 +13,11 @@ interface SectionHeaderProps {
 const SectionHeader = ({ name, link, state }: SectionHeaderProps) => {
   return (
     <div className={container}>
+      {/* Heading 컴포넌트로 교체 weight bold */}
       <h1 className={title}>{name}</h1>
       {link && (
         <Link to={link} state={state}>
-          <SvgIcon variant="arrowRight" width={20} height={20} />
+          <SvgIcon variant="arrowRight" width={20} height={20} style={{ transform: 'translateY(2px)' }} />
         </Link>
       )}
     </div>

src/components/Common/SectionHeader/sectionHeader.css.ts

@@ -3,7 +3,6 @@ import { style } from '@vanilla-extract/css';
 export const container = style({
   display: 'flex',
   justifyContent: 'space-between',
-  padding: '0 20px',
 });
 
 export const title = style({

src/components/Common/StarRating/StarRating.stories.tsx

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import StarRating from './StarRating';
+
+const meta: Meta<typeof StarRating> = {
+  title: 'common/StarRating',
+  component: StarRating,
+  args: {
+    rating: 4.5,
+    createdAt: '2021-09-01T00:00:00.000Z',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

src/components/Common/StarRating/StarRating.tsx

@@ -0,0 +1,37 @@
+import { date, ratingInfo, ratingNumber, ratingWrapper } from './starRating.css';
+import SvgIcon from '../Svg/SvgIcon';
+import Text from '../Text/Text';
+
+import { vars } from '@/styles/theme.css';
+import { getRelativeDate } from '@/utils/date';
+
+interface StarRatingProps {
+  rating: number;
+  createdAt: string;
+}
+
+const StarRating = ({ rating, createdAt }: StarRatingProps) => {
+  return (
+    <div className={ratingWrapper}>
+      <div className={ratingInfo}>
+        <Text as="span" size="caption3" weight="medium" className={ratingNumber}>
+          {rating.toFixed(1)}
+        </Text>
+        {Array.from({ length: 5 }, (_, index) => (
+          <SvgIcon
+            key={`rating-${index}`}
+            variant="star2"
+            fill={index < rating ? vars.colors.icon.fill : vars.colors.icon.light}
+            width={13}
+            height={13}
+          />
+        ))}
+      </div>
+      <Text as="span" size="caption4" color="disabled" className={date}>
+        {getRelativeDate(createdAt)}
+      </Text>
+    </div>
+  );
+};
+
+export default StarRating;

src/components/Common/StarRating/starRating.css.ts

@@ -0,0 +1,23 @@
+import { vars } from '@/styles/theme.css';
+import { style } from '@vanilla-extract/css';
+
+export const ratingWrapper = style({
+  display: 'flex',
+  alignItems: 'center',
+  gap: 8,
+});
+
+export const ratingInfo = style({
+  display: 'flex',
+  alignItems: 'center',
+  gap: 4,
+});
+
+export const ratingNumber = style({
+  paddingTop: 4,
+  color: vars.colors.gray5,
+});
+
+export const date = style({
+  paddingTop: 2,
+});

src/components/Common/TopBar/TopBar.tsx

@@ -8,7 +8,6 @@ import LogoImage from '@/assets/logo.svg';
 import { PATH } from '@/constants/path';
 import { vars } from '@/styles/theme.css';
 
-
 interface TopBarProps {
   children?: React.ReactNode;
   title?: string;
@@ -31,7 +30,13 @@ const Logo = () => {
 const BackLink = ({ state }: TopBarProps) => {
   return (
     <Link to=".." relative="path" state={state}>
-      <SvgIcon variant="arrowLeft" stroke={vars.colors.gray5} width={20} height={20} />
+      <SvgIcon
+        variant="arrowLeft"
+        stroke={vars.colors.gray5}
+        width={20}
+        height={20}
+        style={{ transform: 'translateY(2px)' }}
+      />
     </Link>
   );
 };

src/components/Common/TopBar/topBar.css.ts

@@ -11,7 +11,6 @@ export const container = style({
   display: 'flex',
   justifyContent: 'space-between',
   alignItems: 'center',
-  padding: '0 20px',
   backgroundColor: vars.colors.white,
   transform: 'translateX(-50%)',
   zIndex: 1001,

src/components/Common/index.ts

@@ -25,3 +25,5 @@ export { default as PageHeader } from './PageHeader/PageHeader';
 export { default as Badge } from './Badge/Badge';
 export { default as WriteButton } from './WriteButton/WriteButton';
 export { default as Text } from './Text/Text';
+export { default as TopBar } from './TopBar/TopBar';
+export { default as StarRating } from './StarRating/StarRating';

src/components/Members/MemberImage/MemberImage.tsx

@@ -1,42 +1,32 @@
 import { useState } from 'react';
-import type { CSSProp } from 'styled-components';
-import styled from 'styled-components';
+
+import { container } from './memberImage.css';
 
 import DefaultMemberImage from '@/assets/defaultProfile.png';
 
 interface MemberImageProps {
   src: string;
-  alt: string;
   width?: number;
   height?: number;
-  css?: CSSProp;
 }
 
-const MemberImage = ({ src, alt, width = 45, height = 45, css }: MemberImageProps) => {
+const MemberImage = ({ src, width = 48, height = 48 }: MemberImageProps) => {
   const [isError, setIsError] = useState(false);
 
   const handleImageError = () => {
     setIsError(true);
   };
 
   return (
-    <StyledMemberImage
+    <img
+      className={container}
       src={isError ? DefaultMemberImage : src}
-      alt={alt}
+      alt="사용자 프로필"
       width={width}
       height={height}
-      css={css}
       onError={handleImageError}
     />
   );
 };
 
 export default MemberImage;
-
-const StyledMemberImage = styled.img`
-  border: 2px solid ${({ theme }) => theme.colors.primary};
-  border-radius: 50%;
-  background: ${({ theme }) => theme.backgroundColors.default};
-  object-fit: cover;
-  ${({ css }) => css};
-`;

src/components/Members/MemberImage/memberImage.css.ts

@@ -0,0 +1,6 @@
+import { style } from '@vanilla-extract/css';
+
+export const container = style({
+  borderRadius: '50%',
+  objectFit: 'cover',
+});

src/components/Members/MemberRecipeList/MemberRecipeList.tsx

@@ -1,90 +1,45 @@
-import { Link, Spacing, Text, theme } from '@fun-eat/design-system';
 import { useRef } from 'react';
-import { Link as RouterLink } from 'react-router-dom';
-import styled from 'styled-components';
 
-import { PATH } from '@/constants/path';
 import { useIntersectionObserver } from '@/hooks/common';
 import { useInfiniteMemberRecipeQuery } from '@/hooks/queries/members';
-import useDisplaySlice from '@/utils/displaySlice';
+import { DefaultRecipeItem } from '@/components/Recipe';
+import { container } from './memberRecipeList.css';
 
-interface MemberRecipeListProps {
-  isPreview?: boolean;
-}
-
-const MemberRecipeList = ({ isPreview = false }: MemberRecipeListProps) => {
+const MemberRecipeList = () => {
   const scrollRef = useRef<HTMLDivElement>(null);
 
   const { fetchNextPage, hasNextPage, data } = useInfiniteMemberRecipeQuery();
   const memberRecipes = data?.pages.flatMap((page) => page.recipes);
-  const recipeToDisplay = useDisplaySlice(isPreview, memberRecipes);
 
   useIntersectionObserver<HTMLDivElement>(fetchNextPage, scrollRef, hasNextPage);
 
-  const totalRecipeCount = data?.pages[0].page.totalDataCount;
-
-  if (totalRecipeCount === 0) {
-    return (
-      <ErrorContainer>
-        <Text size="lg" weight="bold">
-          앗, 작성한 꿀조합이 없네요 🥲
-        </Text>
-        <Spacing size={16} />
-        <RecipeLink as={RouterLink} to={`${PATH.RECIPE}`} block>
-          꿀조합 작성하러 가기
-        </RecipeLink>
-      </ErrorContainer>
-    );
-  }
+  // 추후 디자인 추가에 따라 변경 예정
+  // if (totalRecipeCount === 0) {
+  //   return (
+  //     <ErrorContainer>
+  //       <Text size="lg" weight="bold">
+  //         앗, 작성한 꿀조합이 없네요 🥲
+  //       </Text>
+  //       <Spacing size={16} />
+  //       <RecipeLink as={RouterLink} to={`${PATH.RECIPE}`} block>
+  //         꿀조합 작성하러 가기
+  //       </RecipeLink>
+  //     </ErrorContainer>
+  //   );
+  // }
 
   return (
-    <MemberRecipeListContainer>
-      {!isPreview && (
-        <TotalRecipeCount color={theme.colors.gray4}>
-          총 <strong>{totalRecipeCount}</strong>개의 꿀조합을 남겼어요!
-        </TotalRecipeCount>
-      )}
-      <Spacing size={20} />
-      <MemberRecipeListWrapper>
-        {recipeToDisplay?.map((recipe) => (
+    <>
+      <ul className={container}>
+        {memberRecipes.map((recipe) => (
           <li key={recipe.id}>
-            <Link as={RouterLink} to={`${PATH.RECIPE}/${recipe.id}`}>
-              {/* <RecipeItem recipe={recipe} isMemberPage={isPreview} /> */}
-            </Link>
+            <DefaultRecipeItem recipe={recipe} />
           </li>
         ))}
-      </MemberRecipeListWrapper>
+      </ul>
       <div ref={scrollRef} aria-hidden />
-    </MemberRecipeListContainer>
+    </>
   );
 };
 
 export default MemberRecipeList;
-
-const MemberRecipeListContainer = styled.section`
-  display: flex;
-  flex-direction: column;
-`;
-
-const MemberRecipeListWrapper = styled.ul`
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-`;
-
-const TotalRecipeCount = styled(Text)`
-  text-align: right;
-`;
-
-const ErrorContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  margin-top: 20px;
-`;
-
-const RecipeLink = styled(Link)`
-  padding: 12px 12px;
-  border: 1px solid ${({ theme }) => theme.colors.gray4};
-  border-radius: 8px;
-`;

src/components/Members/MemberRecipeList/memberRecipeList.css.ts

@@ -0,0 +1,9 @@
+import { style } from '@vanilla-extract/css';
+
+export const container = style({
+  display: 'grid',
+  gridTemplateColumns: 'repeat(2, 1fr)',
+  gridAutoRows: 'auto',
+  columnGap: 10,
+  rowGap: 20,
+});

src/components/Members/MemberReviewItem/MemberReviewItem.stories.tsx

@@ -8,15 +8,27 @@ const meta: Meta<typeof MemberReviewItem> = {
   args: {
     review: {
       reviewId: 1,
-      productId: 5,
-      productName: '구운감자슬림명란마요',
+      productId: 1,
+      productName: '새우깡',
+      image:
+        'https://i.namu.wiki/i/9wnvUaEa1EkDqG-M0Pbwfdf19FJQQXV_-bnlU2SYaNcG05y2wbabiIrfrGES1M4xSgDjY39RwOvLNggDd3Huuw.webp',
       content:
         '할머니가 먹을 거 같은 맛입니다. 1960년 전쟁 때 맛 보고 싶었는데 그때는 너무 가난해서 먹을 수 없었는데요 이것보다 긴 리뷰도 잘려 보인답니다',
       rating: 4.0,
-      favoriteCount: 1256,
-      categoryType: 'food',
+      createdAt: '2023-08-09T10:10:10',
+      tags: [
+        {
+          id: 5,
+          name: '단짠단짠',
+          tagType: 'TASTE',
+        },
+        {
+          id: 1,
+          name: '망고망고',
+          tagType: 'TASTE',
+        },
+      ],
     },
-    isPreview: true,
   },
 };