chore: 이미지 예시 추가

DDD-Community · Jan 24, 2024 · 57c9b6a · 57c9b6a
1 parent 0940f1e
commit 57c9b6a
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 9 deletions.
diff --git a/src/assets/profile.png b/src/assets/profile.png
diff --git a/src/components/atoms/Icon.tsx b/src/components/atoms/Icon.tsx
@@ -350,3 +350,23 @@ export const SearchSVG: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
     />
   </svg>
 );
+
+export const ArrowRightGray: React.FC<React.SVGProps<SVGSVGElement>> = (
+  props,
+) => (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M5 14L11 8L5 2"
+      stroke="#CCCFD7"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+);
diff --git a/src/components/molecules/FriendsFridgeItem.tsx b/src/components/molecules/FriendsFridgeItem.tsx
@@ -1,5 +1,8 @@
 import Link from 'next/link';
 import React from 'react';
+import profileImg from '@/assets/profile.png';
+import Image from 'next/image';
+import { ArrowRightGray } from '../atoms/Icon';
 
 interface FriendsFridgeItemProps {
   name: string;
@@ -13,17 +16,21 @@ const FriendsFridgeItem: React.FC<FriendsFridgeItemProps> = ({
   linkTo,
 }) => {
   return (
-    <div className="w-full flex justify-between">
+    <div className="w-full flex items-center justify-between">
       <div className="flex gap-[12px]">
-        <div>프로필</div>
+        <div>
+          <Image src={profileImg} alt={`누군가의 프로필`} />
+        </div>
         <div className="flex flex-col">
           <div className="heading4-semibold text-gray7">{name}</div>
           <div className="body2-medium text-gray5">
             냉장고 저장 목록 {ingredientCount}개
           </div>
         </div>
       </div>
-      <Link href={`${linkTo}`}>이동</Link>
+      <Link href={`${linkTo}`}>
+        <ArrowRightGray />
+      </Link>
     </div>
   );
 };

diff --git a/src/components/organisms/FridgeListModal.tsx b/src/components/organisms/FridgeListModal.tsx
@@ -37,9 +37,11 @@ const FridgeListModal: React.FC<{
         )}
       </div>
       <div className="flex w-full gap-[8px]">
-        <button className="p-[13px] border-2 border-2 rounded-[12px]">
-          <TrashcanSVG />
-        </button>
+        {!isMyFridgeList && (
+          <button className="p-[13px] border-2 border-2 rounded-[12px]">
+            <TrashcanSVG />
+          </button>
+        )}
         <Button className="flex-grow bg-primary2" text="이동하기" />
       </div>
     </ModalBottom>

diff --git a/src/components/organisms/FriendsRecentBoard.tsx b/src/components/organisms/FriendsRecentBoard.tsx
@@ -1,7 +1,14 @@
 import React from 'react';
 import { GreenArrowButton, WhiteBox } from '../atoms';
+import { AppleIcon } from '@/components/atoms/IngredientIcons';
+import Link from 'next/link';
 
 const FriendsRecentBoard: React.FC = () => {
+  const INGREDIENT_LIST = [
+    { isToday: true },
+    { isToday: false },
+    { isToday: false },
+  ];
   return (
     <WhiteBox className="flex">
       <div className="text-primary2 body2-semibold">최신근황</div>
@@ -14,10 +21,22 @@ const FriendsRecentBoard: React.FC = () => {
         그밖에 신선한 재료를 구경할 수 있어요.
       </div>
       <div className="flex w-full justify-center gap-[6px]">
-        <div className="">고기</div>
-        <div>고기</div>
+        {INGREDIENT_LIST.map((ingredient) => (
+          <div
+            className={`flex flex-col items-center gap-[9.5px] ${ingredient.isToday ? 'bg-[#FFD5C6]' : 'bg-gray1'} p-[12px] rounded-[12px]`}
+          >
+            <AppleIcon width={38} height={38} />
+            <div
+              className={`body2-semibold ${ingredient.isToday ? 'text-point3' : ''}`}
+            >
+              오늘 추가
+            </div>
+          </div>
+        ))}
       </div>
-      <GreenArrowButton className="bg-primary2" text="친구 냉장고 보러가기" />
+      <Link className="w-full" href="/friend/12">
+        <GreenArrowButton className="bg-primary2" text="친구 냉장고 보러가기" />
+      </Link>
     </WhiteBox>
   );
 };