Merge pull request #282 from Soohyuniii/feature/오픈채팅-UI-개발

feat: 오픈채팅(주제별채팅) 기능 홈 및 폼 UI 개발

Author: Soohyuniii

.nvmrc

@@ -0,0 +1 @@
+18.20.7 

src/components/Profile.tsx

@@ -5,14 +5,27 @@ import { VirtualFriend } from "@/types/virtualFreind";
 import trackClickEvent from "@/utils/trackClickEvent";
 
 interface ProfileProps {
-  info: VirtualFriend;
-  deleteIndex: number;
-  setVirtualFriendList: React.Dispatch<SetStateAction<VirtualFriend[]>>;
+  mode: "friend" | "topic";
+  info?: VirtualFriend;
+  deleteIndex?: number;
+  setVirtualFriendList?: React.Dispatch<SetStateAction<VirtualFriend[]>>;
+  topicData?: {
+    chatTitle: string;
+    description: string;
+  };
 }
-const Profile = ({ info, deleteIndex, setVirtualFriendList }: ProfileProps) => {
+const Profile = ({
+  mode,
+  info,
+  deleteIndex,
+  setVirtualFriendList,
+  topicData
+}: ProfileProps) => {
   const navigate = useNavigate();
 
   const handleDelete = async () => {
+    if (!info || !setVirtualFriendList || deleteIndex === undefined) return;
+
     trackClickEvent("홈", "친구 - 삭제");
     const res = await authInstance.delete(
       `/api/virtual-friend/${info.virtualFriendId}`
@@ -25,49 +38,104 @@ const Profile = ({ info, deleteIndex, setVirtualFriendList }: ProfileProps) => {
   };
 
   const handleNavigate = () => {
-    trackClickEvent("홈", "친구 - 바로 대화하기");
-    navigate("/chat", {
-      state: {
-        mode: "virtualFriend",
-        mbti: info.mbti,
-        id: info.virtualFriendId,
-        name: info.virtualFriendName
-      }
-    });
+    if (mode === "friend" && info) {
+      trackClickEvent("홈", "친구 - 바로 대화하기");
+      navigate("/chat", {
+        state: {
+          mode: "virtualFriend",
+          mbti: info.mbti,
+          id: info.virtualFriendId,
+          name: info.virtualFriendName
+        }
+      });
+    } else if (mode === "topic" && topicData) {
+      trackClickEvent("홈", "주제별 대화방"); //FIXME: 기획 내용 정해지면 수정
+      navigate("/select-info", {
+        state: {
+          type: "topicChat",
+          chatTitle: topicData.chatTitle,
+          description: topicData.description
+        }
+      });
+    }
+  };
+
+  const getImageSrc = () => {
+    if (mode === "friend" && info) {
+      return `/public/image/${info.mbti}_profile.png`;
+    } else if (mode === "topic" && topicData) {
+      //FIXME: 디자인 정해지면 수정
+      return "/icon/starbubble.svg";
+    }
+    return "";
+  };
+
+  const getTitle = () => {
+    if (mode === "friend" && info) {
+      return info.virtualFriendName;
+    } else if (mode === "topic" && topicData) {
+      return topicData.chatTitle;
+    }
+    return "";
+  };
+
+  const getSubtitle = () => {
+    if (mode === "friend" && info) {
+      return info.mbti;
+    } else if (mode === "topic" && topicData) {
+      return "";
+    }
+    return "";
+  };
+
+  const getDescription = () => {
+    if (mode === "friend" && info) {
+      return `${info.virtualFriendAge} · ${info.virtualFriendSex} · ${info.virtualFriendRelationship}`;
+    } else if (mode === "topic" && topicData) {
+      return topicData.description;
+    }
+    return "";
+  };
+
+  const getButtonText = () => {
+    return mode === "friend" ? "바로 대화하기" : "오픈채팅 입장하기";
   };
 
   return (
     <div className="relative h-[192px] w-[157px] overflow-hidden rounded-[8px] border border-[#EEEEEE] bg-white lg:w-[200px]">
-      <button onClick={handleDelete}>
-        <img
-          src="/icon/dustbin.svg"
-          alt="Delete"
-          className="absolute top-3 right-3 h-5 w-5 cursor-pointer"
-          width={16}
-          height={16}
-        />
-      </button>
+      {mode === "friend" && (
+        <button onClick={handleDelete}>
+          <img
+            src="/public/icon/dustbin.svg"
+            alt="Delete"
+            className="absolute top-3 right-3 h-5 w-5 cursor-pointer"
+            width={16}
+            height={16}
+          />
+        </button>
+      )}
       <img
-        src={`/image/${info.mbti}_profile.png`}
+        src={getImageSrc()}
         alt="Profile"
         className="absolute top-[12px] left-[11px] h-12 w-12 rounded-full object-cover"
       />
 
       <div className="px-4 pt-[69px]">
         <h2 className="flex items-center space-x-1 text-base">
-          <span className="font-bold">{info.virtualFriendName}</span>
-          <span className="font-light text-gray-600">{info.mbti}</span>
+          <span className="font-bold">{getTitle()}</span>
+          {getSubtitle() && (
+            <span className="font-light text-gray-600">{getSubtitle()}</span>
+          )}
         </h2>
-        <p className="mt-2 text-xs font-light text-gray-600">
-          {info.virtualFriendAge} · {info.virtualFriendSex} ·{" "}
-          {info.virtualFriendRelationship}
+        <p className="mt-2 text-sm font-normal text-gray-600">
+          {getDescription()}
         </p>
       </div>
       <button
         className="absolute bottom-0 h-[41px] w-full bg-primary-pale py-2 text-sm font-bold text-primary-normal"
         onClick={handleNavigate}
       >
-        바로 대화하기
+        {getButtonText()}
       </button>
     </div>
   );

src/components/ProfileContainer.tsx

@@ -15,6 +15,7 @@ const ProfileContainer = ({
       {list.map((el, index) => (
         <Profile
           key={index}
+          mode="friend"
           info={el}
           deleteIndex={index}
           setVirtualFriendList={setVirtualFriendList}

src/components/SubTitle.tsx

@@ -4,7 +4,11 @@ import trackClickEvent from "@/utils/trackClickEvent";
 import ActionConfirmModal from "@/components/modal/ActionConfirmModal";
 import useAuthStore from "@/store/useAuthStore";
 
-const SubTitle = ({ mode }: { mode: "빠른대화" | "친구목록" }) => {
+const SubTitle = ({
+  mode
+}: {
+  mode: "빠른대화" | "친구목록" | "주제별대화방";
+}) => {
   const [needLoginModalIsOpen, setNeedLoginModalIsOpen] = useState(false);
   const { isLoggedIn } = useAuthStore();
   const navigate = useNavigate();
@@ -17,6 +21,10 @@ const SubTitle = ({ mode }: { mode: "빠른대화" | "친구목록" }) => {
     친구목록: {
       title: "친구 목록",
       description: "친구 정보와 대화 내용을 저장해요."
+    },
+    주제별대화방: {
+      title: "주제별 대화방",
+      description: "관심 있는 주제로 대화해보세요"
     }
   };
 

src/components/TopicProfileContainer.tsx

@@ -0,0 +1,29 @@
+import Profile from "@/components/Profile";
+
+type TopicData = {
+  chatTitle: string;
+  description: string;
+};
+
+const topicData: TopicData[] = [
+  {
+    chatTitle: "T의 대화",
+    description: "mbti t인사람들 모임"
+  },
+  {
+    chatTitle: "F의 대화",
+    description: "mbti f인사람들 모임"
+  }
+];
+
+const TopicProfileContainer = () => {
+  return (
+    <div className="grid grid-cols-2 gap-7">
+      {topicData.map((topic, index) => (
+        <Profile key={index} mode="topic" topicData={topic} />
+      ))}
+    </div>
+  );
+};
+
+export default TopicProfileContainer;

src/pages/Home.tsx

@@ -11,6 +11,7 @@ import Header from "@/components/header/Header";
 import useAuthStore from "@/store/useAuthStore";
 import ProfileContainer from "@/components/ProfileContainer";
 import { Helmet } from "react-helmet";
+import TopicProfileContainer from "@/components/TopicProfileContainer";
 
 const Home = () => {
   const navigate = useNavigate();
@@ -47,6 +48,7 @@ const Home = () => {
           <section aria-label="콘텐츠 배너">
             <Banner />
           </section>
+
           <section className="mt-5" aria-label="빠른 대화">
             <div className="w-full px-[20px] py-[13px]">
               <SubTitle mode="빠른대화" />
@@ -55,11 +57,21 @@ const Home = () => {
               <ChatStartButton mode={"go-fast"} />
             </div>
           </section>
+
+          <section aria-label="주제별 대화방">
+            <div className="w-full px-[20px] py-[21px]">
+              <SubTitle mode="주제별대화방" />
+            </div>
+            <div className="flex justify-center pb-[11.35px]">
+              <TopicProfileContainer />
+            </div>
+          </section>
+
           <section aria-label="친구 목록">
             <div className="px-[20px] py-[21px]">
               <SubTitle mode="친구목록" />
             </div>
-            <div className="flex justify-center pb-[127px]">
+            <div className="flex justify-center pb-[12px]">
               {isLoggedIn && virtualFreindList.length > 0 ? (
                 <ProfileContainer
                   list={virtualFreindList}