feat: 마이페이지> 친구 페이지 친구추가 탭 화면 구현

src/components/organisms/BulletNoticeBox.tsx

@@ -0,0 +1,22 @@
+import { DotIcon } from '@/assets/icons';
+import React from 'react';
+
+const BulletNoticeBox: React.FC<{
+  title: string;
+  content: string;
+}> = ({ title, content }) => {
+  return (
+    <div className="mb-[16px]">
+      <p>
+        <DotIcon width={4} height={4} fill="#52C5A6" className="inline" />
+        <span className="ml-[4px] body2-semibold text-gray7">{title}</span>
+      </p>
+      <p
+        className="pl-[8px] body2-semibold text-gray6"
+        dangerouslySetInnerHTML={{ __html: content }}
+      />
+    </div>
+  );
+};
+
+export default BulletNoticeBox;

src/components/organisms/index.ts

@@ -8,3 +8,4 @@ export { default as FriendsFridgeList } from './FriendsFridgeList';
 export { default as OrderListModal } from './OrderListModal';
 export { default as NavWhiteBox } from './NavWhiteBox';
 export { default as FriendListItem } from './FriendListItem';
+export { default as BulletNoticeBox } from './BulletNoticeBox';

src/components/templates/AddFriendTemplate.tsx

@@ -0,0 +1,68 @@
+import React, { useEffect, useState } from 'react';
+
+import { BulletNoticeBox } from '../organisms';
+
+const MY_INVITATION_CODE = 'AB12CD3EF';
+
+const AddFriendTemplate: React.FC = () => {
+  const [myCode, setMyCode] = useState<string>('');
+
+  const onCopy: () => void = () => {
+    navigator.clipboard
+      .writeText(myCode)
+      .then(() => null)
+      .catch(() => null);
+  };
+
+  useEffect(() => {
+    setMyCode(MY_INVITATION_CODE);
+  }, []);
+
+  return (
+    <div className="pt-[72px] px-[20px]">
+      <div className="mb-[20px] px-[20px] py-[16px] bg-white rounded-[12px]">
+        <p className="mb-[12px] body1-semibold text-gray8">내 초대 코드</p>
+        <div className="flex">
+          <span className="flex-1 outline-none mr-[10px] border-none p-[10px] bg-gray1 rounded-[6px] text-gray8 body1-medium">
+            {myCode}
+          </span>
+
+          <button
+            onClick={onCopy}
+            className="px-[16px] p-[10px] bg-primary2 rounded-[6px] text-white"
+          >
+            복사
+          </button>
+        </div>
+      </div>
+
+      <div className="mb-[20px] px-[20px] py-[16px] bg-white rounded-[12px]">
+        <p className="mb-[12px] body1-semibold text-gray8">
+          상대 초대 코드 입력
+        </p>
+        <div className="flex">
+          <input
+            placeholder="상대 초대 코드를 입력해주세요."
+            className="flex-1 outline-none mr-[10px] border-none p-[10px] bg-gray1 rounded-[6px] text-gray8 body1-medium"
+          />
+          <button className="px-[16px] py-[10px] bg-white rounded-[6px] border border-gray3 text-gray3">
+            추가
+          </button>
+        </div>
+      </div>
+
+      <BulletNoticeBox
+        title={'친구 추가 및 입력 방법'}
+        content={`복사 및 복사 아이콘을 눌러 초대 코드를 복사할 수 있습니다.
+                <br /> 복사한 초대 코드는 친구 관계를 맺고자 하는 이에게 전달해주세요.`}
+      />
+      <BulletNoticeBox
+        title={'상대에게 초대 코드 전달받을 시'}
+        content={`상대 초대 코드 입력란에 입력하시면 상대방과 친구가 됩니다.
+                <br /> 상대방과 친구가 된다면, 친구의 냉장고를 구경할 수 있습니다.`}
+      />
+    </div>
+  );
+};
+
+export default AddFriendTemplate;

src/components/templates/index.ts

@@ -1,2 +1,3 @@
 export { default as Layout } from './Layout';
 export { default as FriendListTemplate } from './FriendListTemplate';
+export { default as AddFriendTemplate } from './AddFriendTemplate';

src/pages/mypage/friendslist/index.tsx

@@ -1,7 +1,7 @@
 import { SettingIcon } from '@/assets/icons';
 import { TabButton } from '@/components/atoms';
 import Header from '@/components/organisms/Header';
-import { FriendListTemplate } from '@/components/templates';
+import { AddFriendTemplate, FriendListTemplate } from '@/components/templates';
 import { type TabLabel } from '@/types/common';
 
 import { type NextPage } from 'next';
@@ -37,7 +37,7 @@ const FriendsListPage: NextPage = () => {
         </div>
       </div>
 
-      {curTab.value === 'list' ? <FriendListTemplate /> : null}
+      {curTab.value === 'list' ? <FriendListTemplate /> : <AddFriendTemplate />}
     </div>
   );
 };