Merge pull request #25 from MBTips/feature/TopicRecommend-컴포넌트-개발

feat: TopicRecommend.tsx 개발, pickMbtiImage util함수 구현

Author: junjeeong

src/App.tsx

@@ -2,4 +2,4 @@ function App() {
   return <></>;
 }
 
-export default App;
+export default App;

src/components/TopicRecommend.tsx

@@ -0,0 +1,27 @@
+import { Mbti } from "@/types/mbti";
+import pickMbtiImage from "@/utils/pickMbtiImage";
+
+const TopicRecommend = ({ mbti = "ESTP" }: { mbti: Mbti }) => {
+  const imageUrl = pickMbtiImage(mbti);
+
+  return (
+    <div className="flex flex-col rounded-xl rounded-tl-none w-[208px] h-[213px] overflow-hidden">
+      <img
+        className="block w-full h-auto"
+        src={imageUrl}
+        alt={mbti}
+        width={208}
+        height={88}
+      />
+      <div className="flex flex-col flex-auto justify-center items-center bg-white">
+        <h2 className="font-bold text-2lg">대화주제추천</h2>
+        <p className="mt-1 font-light text-lg">{mbti}와 나눌 주제 추천드려요</p>
+        <button className="flex justify-center items-center bg-gray-900 mt-2 rounded-sm w-[176px] h-[40px] font-medium text-2lg text-white">
+          자세히보기
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default TopicRecommend;

src/types/mbti.ts

@@ -0,0 +1,17 @@
+export type Mbti =
+  | "ISTJ"
+  | "ISFJ"
+  | "INFJ"
+  | "INTJ"
+  | "ISTP"
+  | "ISFP"
+  | "INFP"
+  | "INTP"
+  | "ESTP"
+  | "ESFP"
+  | "ENFP"
+  | "ENTP"
+  | "ESTJ"
+  | "ESFJ"
+  | "ENFJ"
+  | "ENTJ";

src/utils/pickMbtiImage.ts

@@ -0,0 +1,62 @@
+import { Mbti } from "@/types/mbti";
+
+const pickMbtiImage = (mbti: Mbti) => {
+  let mbtiImage = "";
+
+  switch (mbti) {
+    case "ISTJ":
+      mbtiImage = "/image/ISTJ.png";
+      break;
+    case "ISFJ":
+      mbtiImage = "/image/ISFJ.png";
+      break;
+    case "INFJ":
+      mbtiImage = "/image/INFJ.png";
+      break;
+    case "INTJ":
+      mbtiImage = "/image/INTJ.png";
+      break;
+    case "ISTP":
+      mbtiImage = "/image/ISTP.png";
+      break;
+    case "ISFP":
+      mbtiImage = "/image/ISFP.png";
+      break;
+    case "INFP":
+      mbtiImage = "/image/INFP.png";
+      break;
+    case "INTP":
+      mbtiImage = "/image/INTP.png";
+      break;
+    case "ESTP":
+      mbtiImage = "/image/ESTP.png";
+      break;
+    case "ESFP":
+      mbtiImage = "/image/ESFP.png";
+      break;
+    case "ENFP":
+      mbtiImage = "/image/ENFP.png";
+      break;
+    case "ENTP":
+      mbtiImage = "/image/ENTP.png";
+      break;
+    case "ESTJ":
+      mbtiImage = "/image/ESTJ.png";
+      break;
+    case "ESFJ":
+      mbtiImage = "/image/ESFJ.png";
+      break;
+    case "ENFJ":
+      mbtiImage = "/image/ENFJ.png";
+      break;
+    case "ENTJ":
+      mbtiImage = "/image/ENTJ.png";
+      break;
+    default:
+      break;
+  }
+
+  return mbtiImage;
+};
+
+export default pickMbtiImage;