Merge pull request #328 from boostcampwm-2024/dev

[Deploy] 6주차 4차 배포

Author: ShipFriend0516

backend/src/room/room.gateway.ts

@@ -51,12 +51,12 @@ export class RoomGateway implements OnGatewayDisconnect, OnGatewayInit, OnGatewa
 
     public async handleDisconnect(client: Socket) {
         await this.handleLeaveRoom(client);
-        this.logger.log(`Client disconnected: ${client.id}`);
+        this.logger.log(`Client disconnected: ${client.handshake.address}:${client.id}`);
         await this.infraService.removeSocketMetadata(client);
     }
 
     public async handleConnection(client: Socket) {
-        this.logger.log(`Client disconnected: ${client.id}`);
+        this.logger.log(`Client connected: ${client.handshake.address}:${client.id}`);
         await this.infraService.createSocketMetadata(client);
     }
 

backend/src/room/room.service.ts

@@ -59,8 +59,6 @@ export class RoomService {
 
         await this.roomRepository.setRoom(room);
 
-        socket.emit(EMIT_EVENT.CREATE, room);
-
         return {
             nickname: createRoomDto.nickname,
             participants: 0,

backend/src/room/services/room.service.ts

@@ -1,4 +1,4 @@
-import axios from "axios";
+import { api } from "@/api/config/axios.ts";
 
 interface QuestionListProps {
   page: number;
@@ -37,7 +37,7 @@ interface ApiResponse {
 }
 
 const getMyQuestionList = async ({ page, limit }: QuestionListProps) => {
-  const response = await axios.get<ApiResponse>("/api/question-list/my", {
+  const response = await api.get<ApiResponse>("/api/question-list/my", {
     params: {
       page,
       limit,

frontend/src/api/question-list/getMyQuestionList.ts

@@ -25,7 +25,7 @@ interface ApiResponse {
   success: boolean;
   message: string;
   data: {
-    questionLists: QuestionList[];
+    questionList: QuestionList[];
     meta: {
       itemsPerPage: number;
       totalItems: number;

frontend/src/api/question-list/getScrapQuestionList.ts

@@ -5,17 +5,25 @@ interface ButtonProps {
   type: "gray" | "green";
   icon?: IconType;
   onClick: () => void;
+  disabled?: boolean;
 }
 
-const DefaultButton = ({ text, type, icon: Icon, onClick }: ButtonProps) => {
+const DefaultButton = ({
+  text,
+  type,
+  icon: Icon,
+  onClick,
+  disabled,
+}: ButtonProps) => {
   const buttonColor =
     type === "gray"
       ? "bg-gray-200 text-gray-black"
       : "bg-green-200 text-gray-white";
 
   return (
     <button
-      className={`w-full h-12 flex flex-row items-center justify-center gap-2 rounded-custom-m text-semibold-r ${buttonColor} hover:opacity-80`}
+      disabled={disabled}
+      className={`w-full h-12 flex flex-row items-center justify-center gap-2 rounded-custom-m text-semibold-r ${buttonColor} hover:opacity-80 disabled:opacity-50   `}
       onClick={onClick}
     >
       {Icon ? <Icon /> : null}

frontend/src/components/common/Button/DefaultButton.tsx

@@ -20,7 +20,7 @@ const QuestionList = ({ tab, page }: ListProps) => {
   } = useGetScrapQuestionList({ page, limit: 8 });
 
   const currentQuestionList =
-    tab === "myList" ? myData?.myQuestionLists : scrapData?.questionLists;
+    tab === "myList" ? myData?.myQuestionLists : scrapData?.questionList;
   const isLoading = tab === "myList" ? isMyListLoading : isScrapListLoading;
   const error = tab === "myList" ? myListError : scrapListError;
 

frontend/src/components/mypage/QuestionList/index.tsx

@@ -1,6 +1,7 @@
 import Button from "@/components/common/Button/DefaultButton";
 import { FaBookmark, FaRegBookmark } from "react-icons/fa";
 import { IoMdShare } from "react-icons/io";
+import useAuth from "@hooks/useAuth.ts";
 
 interface ButtonSectionProps {
   scrapQuestionList: () => void;
@@ -15,6 +16,7 @@ const ButtonSection = ({
   isScrapped,
   shareQuestionList,
 }: ButtonSectionProps) => {
+  const { isLoggedIn } = useAuth();
   return (
     <div className="flex w-full gap-4 mt-4">
       <Button
@@ -24,6 +26,7 @@ const ButtonSection = ({
         onClick={shareQuestionList}
       />
       <Button
+        disabled={!isLoggedIn}
         text={isScrapped ? "스크랩 취소" : "스크랩하기"}
         type={isScrapped ? "gray" : "green"}
         icon={isScrapped ? FaBookmark : FaRegBookmark}

frontend/src/components/questions/detail/ButtonSection.tsx/index.tsx

@@ -41,7 +41,7 @@ const QuestionTitle = ({ questionId }: { questionId: string }) => {
         </div>
         <div className="flex gap-1 items-center">
           <FaRegBookmark />
-          <span>{question.usage}</span>
+          <span>{question.scrapCount}</span>
         </div>
       </div>
     </div>

frontend/src/components/questions/detail/QuestionTitle.tsx/index.tsx

@@ -4,6 +4,7 @@ import {
   MdMic,
   MdMicOff,
   MdThumbUp,
+  MdLink,
 } from "react-icons/md";
 import { IoChevronDownSharp } from "react-icons/io5";
 import Modal from "../common/Modal";
@@ -12,6 +13,7 @@ import { useNavigate } from "react-router-dom";
 import useToast from "@/hooks/useToast";
 import useModal from "@/hooks/useModal";
 import useSocket from "@/hooks/useSocket";
+import ToolTip from "@components/common/ToolTip";
 
 interface CommonToolsProps {
   handleVideoToggle: () => void;
@@ -60,6 +62,14 @@ const CommonTools = ({
     navigate("/sessions");
   };
 
+  const shareSessionLink = () => {
+    navigator.clipboard.writeText(window.location.href);
+    toast.success(
+      `현재 세션의 링크가 복사되었습니다.
+동료에게 공유해보세요!`
+    );
+  };
+
   const modalProps = isHost
     ? {
         title: "세션을 종료할까요?",
@@ -83,6 +93,15 @@ const CommonTools = ({
   return (
     <>
       <div className={"inline-flex gap-2"}>
+        <ToolTip text="세션 링크 복사">
+          <button
+            className="aspect-square px-3 bg-green-200 text-white rounded-custom-m border-custom-s  border-green-200 hover:bg-green-100"
+            aria-label={"세션 링크 복사"}
+            onClick={shareSessionLink}
+          >
+            <MdLink className="w-6 h-6" />
+          </button>
+        </ToolTip>
         <div className="relative">
           <select
             className="w-16 bg-white text-white py-3 rounded-custom-m border-custom-s border-gray-200"