fix(gurubu-client): resolve conflicts

.github/CODEOWNERS

@@ -1 +1 @@
-* @armagandalkiran
+* @armagandalkiran @aahmetcakir @mertcanaltin

.github/workflows/commit-lint.yml

@@ -0,0 +1,21 @@
+name: Validate Commit Messages
+
+on:
+  pull_request:
+    types: [opened, synchronize]
+
+jobs:
+  validate-commit-message:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out code
+        uses: actions/checkout@v2
+
+      - name: Validate commit messages
+        run: |
+          git log --format=%s ${{ github.event.before }}..${{ github.sha }} -- | while read -r line; do
+            if ! [[ "$line" =~ ^(build|chore|ci|docs|feat|fix|perf|refactor|revert|style|test){1}(\([\w\-\.]+\))?(!)?: ([\w ])+([\s\S]*)$ ]]; then
+              echo "Invalid commit message format: $line"
+              exit 1
+            fi
+          done

gurubu-client/src/app/components/room/connecting-info.tsx

@@ -1,8 +1,8 @@
 import { useEffect } from "react";
 import { notFound } from "next/navigation";
-import { RoomService } from "../../services/roomService";
-import { ROOM_STATUS } from "../../room/[id]/enums";
-import { useGroomingRoom } from "../../contexts/GroomingRoomContext";
+import { RoomService } from "@/services/roomService";
+import { ROOM_STATUS } from "@/room/[id]/enums";
+import { useGroomingRoom } from "@/contexts/GroomingRoomContext";
 
 interface IProps {
   roomId: string;

gurubu-client/src/app/components/room/grooming-board-error-popup.tsx

@@ -1,7 +1,7 @@
-import { useGroomingRoom } from "../../contexts/GroomingRoomContext";
-import { useSocket } from "../../contexts/SocketContext";
-import { getCurrentLobby } from "../../shared/helpers/lobbyStorage";
 import classNames from "classnames";
+import { useGroomingRoom } from "@/contexts/GroomingRoomContext";
+import { useSocket } from "@/contexts/SocketContext";
+import { getCurrentLobby } from "@/shared/helpers/lobbyStorage";
 
 interface IProps {
   title: string;

gurubu-client/src/app/components/room/grooming-board-participants.tsx

@@ -1,7 +1,7 @@
 import classNames from "classnames";
-import { useGroomingRoom } from "../../contexts/GroomingRoomContext";
 import { Fragment } from "react";
 import { IconCheck, IconChessRookFilled, IconPlugX } from "@tabler/icons-react";
+import { useGroomingRoom } from "@/contexts/GroomingRoomContext";
 
 const GroomingBoardParticipants = () => {
   const { groomingInfo } = useGroomingRoom();

gurubu-client/src/app/components/room/grooming-board-profile.tsx

@@ -1,7 +1,7 @@
 import { SetStateAction, useEffect, useState } from "react";
-import { IconUserCircle } from "@tabler/icons-react";
-import { useGroomingRoom } from "../../contexts/GroomingRoomContext";
-import { useSocket } from "../../contexts/SocketContext";
+import Image from "next/image";
+import { useGroomingRoom } from "@/contexts/GroomingRoomContext";
+import { useSocket } from "@/contexts/SocketContext";
 
 const GroomingBoardProfile = () => {
   const socket = useSocket();
@@ -65,8 +65,10 @@ const GroomingBoardProfile = () => {
         id="grooming-board-profile"
         onClick={handleClick}
       >
-        <p>{userInfo.nickname}</p>
-        <IconUserCircle />
+        <div className="grooming-board-profile__icon">
+          <Image src="/icon-user.svg" width={10} height={10} alt="User information" />
+        </div>
+        <p className="grooming-board-profile__text">{userInfo.nickname}</p>
       </button>
       {showProfileBar && (
         <div

gurubu-client/src/app/components/room/grooming-board.tsx

@@ -1,20 +1,20 @@
 import { useEffect, useState } from "react";
-import { useSocket } from "../../contexts/SocketContext";
+import classNames from "classnames";
+import Image from "next/image";
+import { notFound } from "next/navigation";
+import { useSocket } from "@/contexts/SocketContext";
 import {
   checkUserJoinedLobbyBefore,
   getCurrentLobby,
-} from "../../shared/helpers/lobbyStorage";
-import { useGroomingRoom } from "../../contexts/GroomingRoomContext";
+} from "@/shared/helpers/lobbyStorage";
+import { useGroomingRoom } from "@/contexts/GroomingRoomContext";
 import VotingStick from "./voting-stick";
-import classNames from "classnames";
-import Image from "next/image";
 import MetricAverages from "./metric-averages";
 import GroomingBoardParticipants from "./grooming-board-participants";
 import { IconEdit, IconReportAnalytics } from "@tabler/icons-react";
 import { ROOM_STATUS } from "../../room/[id]/enums";
-import { EncounteredError, GroomingInfo } from "../../shared/interfaces";
-import { notFound } from "next/navigation";
-import { ENCOUTERED_ERROR_TYPE } from "../../shared/enums";
+import { EncounteredError, GroomingInfo } from "@/shared/interfaces";
+import { ENCOUTERED_ERROR_TYPE } from "@/shared/enums";
 import GroomingBoardErrorPopup from "./grooming-board-error-popup";
 
 interface IProps {

gurubu-client/src/app/components/room/grooming-navbar.tsx

@@ -1,12 +1,11 @@
-import { useGroomingRoom } from "../../contexts/GroomingRoomContext";
+import { useGroomingRoom } from "@/contexts/GroomingRoomContext";
 import {
   IconClipboardCheck,
-  IconCopy,
-  IconUserFilled,
 } from "@tabler/icons-react";
-import { ROOM_STATUS } from "../../room/[id]/enums";
+import { ROOM_STATUS } from "@/room/[id]/enums";
 import { useState } from "react";
 import GroomingBoardProfile from "./grooming-board-profile";
+import Image from "next/image";
 
 interface IProps {
   showNickNameForm: boolean;
@@ -47,23 +46,23 @@ const GroomingNavbar = ({ showNickNameForm }: IProps) => {
     <nav className="grooming-navbar">
       <div className="grooming-navbar__actions">
         <div className="grooming-navbar__participants">
-          <p>Participants:</p>
-          <div className="grooming-navbar__participant-number">
-            <IconUserFilled width={20} />
-            <p>{groomingInfo.totalParticipants || "0"}</p>
+          <div className="grooming-navbar__participant-number-section">
+            <Image src="/icon-user-group.svg" width={12} height={12} alt="Participants" />
+            <p className="grooming-navbar__participant-number">{groomingInfo.totalParticipants || "0"}</p>
           </div>
+          <p className="grooming-navbar__participant-text">Participants is here</p>
         </div>
         <div>
           <button
             className="grooming-navbar__copy-link"
             onClick={handleCopyGroomingLinkClick}
           >
-            Copy Grooming Link
             {isGroomingLinkCopied ? (
-              <IconClipboardCheck width={20} color="green" />
+              <IconClipboardCheck stroke={3} width={14} height={14} />
             ) : (
-              <IconCopy width={20} />
-            )}
+              <Image src="/icon-copy.svg" width={14} height={14} alt="Copy link" />
+              )}
+            Copy Link
           </button>
         </div>
       </div>

gurubu-client/src/app/components/room/metric-averages.tsx

@@ -1,4 +1,4 @@
-import { useGroomingRoom } from "../../contexts/GroomingRoomContext";
+import { useGroomingRoom } from "@/contexts/GroomingRoomContext";
 
 const MetricAverages = () => {
   const { groomingInfo } = useGroomingRoom();

gurubu-client/src/app/components/room/nickname-form.tsx

@@ -1,10 +1,10 @@
 "use client";
 
-import { SetStateAction, useEffect, useMemo, useRef, useState } from "react";
-import { RoomService } from "../../services/roomService";
+import { SetStateAction, useEffect, useRef, useState } from "react";
+import { RoomService } from "@/services/roomService";
 import Image from "next/image";
 import classNames from "classnames";
-import { GroomingType } from "../../shared/enums";
+import { GroomingType } from "@/shared/enums";
 
 interface IProps {
   roomId?: string;

gurubu-client/src/app/components/room/vote-card.tsx

@@ -1,5 +1,5 @@
-import { useGroomingRoom } from "../../contexts/GroomingRoomContext";
-import { useSocket } from "../../contexts/SocketContext";
+import { useGroomingRoom } from "@/contexts/GroomingRoomContext";
+import { useSocket } from "@/contexts/SocketContext";
 import classNames from "classnames";
 
 interface IProps {

gurubu-client/src/app/contexts/GroomingRoomContext.tsx

@@ -1,14 +1,7 @@
-import React, {
-  ReactNode,
-  createContext,
-  useContext,
-  useEffect,
-  useMemo,
-  useState,
-} from "react";
-import { ROOM_STATUS } from "../room/[id]/enums";
-import { getCurrentLobby } from "../shared/helpers/lobbyStorage";
-import { EncounteredError, GroomingInfo, UserInfo, UserVote } from "../shared/interfaces";
+import React, { ReactNode, createContext, useContext, useEffect, useMemo, useState } from "react";
+import { ROOM_STATUS } from "@/room/[id]/enums";
+import { getCurrentLobby } from "@/shared/helpers/lobbyStorage";
+import { EncounteredError, GroomingInfo, UserInfo, UserVote } from "@/shared/interfaces";
 
 interface GroomingContextValues {
   roomStatus: keyof typeof ROOM_STATUS;
@@ -31,10 +24,7 @@ export function useGroomingRoom() {
   return useContext(GroomingRoomContext);
 }
 
-export function GroomingRoomProvider({
-  children,
-  roomId,
-}: GroomingRoomProviderProps) {
+export function GroomingRoomProvider({ children, roomId }: GroomingRoomProviderProps) {
   const [roomStatus, setRoomStatus] = useState(ROOM_STATUS.CHECKING);
   const [userInfo, setUserinfo] = useState({} as UserInfo);
   const [groomingInfo, setGroomingInfo] = useState({} as GroomingInfo);
@@ -69,7 +59,7 @@ export function GroomingRoomProvider({
       encounteredError,
       setEncounteredError,
       showErrorPopup,
-      setShowErrorPopup
+      setShowErrorPopup,
     }),
     [
       roomStatus,
@@ -83,14 +73,10 @@ export function GroomingRoomProvider({
       encounteredError,
       setEncounteredError,
       showErrorPopup,
-      setShowErrorPopup
+      setShowErrorPopup,
     ]
   );
-  return (
-    <GroomingRoomContext.Provider value={values}>
-      {children}
-    </GroomingRoomContext.Provider>
-  );
+  return <GroomingRoomContext.Provider value={values}>{children}</GroomingRoomContext.Provider>;
 }
 
 type GroomingRoomProviderProps = {

gurubu-client/src/app/contexts/SocketContext.tsx

@@ -1,7 +1,7 @@
 import React, { ReactNode, createContext, useContext, useEffect } from "react";
 import io from "socket.io-client";
 import { useGroomingRoom } from "./GroomingRoomContext";
-import { ROOM_STATUS } from "../../app/room/[id]/enums";
+import { ROOM_STATUS } from "@/room/[id]/enums";
 
 const socket = io(process.env.NEXT_PUBLIC_API_URL || "", {
   autoConnect: false,
@@ -24,9 +24,7 @@ export function SocketProvider({ children }: SocketProviderProps) {
     };
   }, [roomStatus]);
 
-  return (
-    <SocketContext.Provider value={socket}>{children}</SocketContext.Provider>
-  );
+  return <SocketContext.Provider value={socket}>{children}</SocketContext.Provider>;
 }
 
 type SocketProviderProps = {

gurubu-client/src/app/create/room/page.tsx

@@ -1,5 +1,5 @@
-import NicknameForm from "../../components/room/nickname-form";
-import "../../styles/room/style.scss";
+import NicknameForm from "@/components/room/nickname-form";
+import "@/styles/room/style.scss";
 
 const CreateRoom = () => {
   return (

gurubu-client/src/app/layout.tsx

@@ -1,7 +1,7 @@
 import type { Metadata } from "next";
 import { Inter, Space_Grotesk } from "next/font/google";
 import classNames from "classnames";
-import "./styles/globals.scss";
+import "@/styles/globals.scss";
 
 const inter = Inter({ subsets: ["latin"], variable: '--font-inter' });
 const spaceGrotesk = Space_Grotesk({ subsets: ["latin"], variable: '--font-space-grotesk' });

gurubu-client/src/app/page.tsx

@@ -1,9 +1,9 @@
-import Footer from "./components/common/footer";
-import Navbar from "./components/common/navbar";
-import Greeting from "./components/page/greeting";
-import Howto from "./components/page/howto";
-import Testimonial from "./components/page/testimonial";
-import "./styles/page/style.scss";
+import Footer from "@/components/common/footer";
+import Navbar from "@/components/common/navbar";
+import Greeting from "@/components/page/greeting";
+import Howto from "@/components/page/howto";
+// import Testimonial from "./components/page/testimonial";
+import "@/styles/page/style.scss";
 
 export default function Home() {
   return (

gurubu-client/src/app/room/[id]/page.tsx

@@ -1,13 +1,16 @@
 "use client";
-import { useState } from "react";
-import ConnectingInfo from "../../components/room/connecting-info";
-import GroomingBoard from "../../components/room/grooming-board";
-import NicknameForm from "../../components/room/nickname-form";
-import GroomingNavbar from "../../components/room/grooming-navbar";
-import { SocketProvider } from "../../contexts/SocketContext";
-import { GroomingRoomProvider } from "../../contexts/GroomingRoomContext";
+
 import classnames from "classnames";
-import "../../styles/room/style.scss";
+import { useState } from "react";
+
+import ConnectingInfo from "@/components/room/connecting-info";
+import GroomingBoard from "@/components/room/grooming-board";
+import NicknameForm from "@/components/room/nickname-form";
+import GroomingNavbar from "@/components/room/grooming-navbar";
+import { SocketProvider } from "@/contexts/SocketContext";
+import { GroomingRoomProvider } from "@/contexts/GroomingRoomContext";
+
+import "@/styles/room/style.scss";
 
 const GroomingRoom = ({ params }: { params: { id: string } }) => {
   const [showNickNameForm, setShowNickNameForm] = useState(false);
@@ -18,18 +21,15 @@ const GroomingRoom = ({ params }: { params: { id: string } }) => {
         <main
           className={classnames("grooming-room", {
             "nickname-form-active": showNickNameForm,
-          })}
-        >
+          })}>
           <ConnectingInfo roomId={params.id} />
           <GroomingNavbar showNickNameForm={showNickNameForm} />
           <GroomingBoard
             roomId={params.id}
             showNickNameForm={showNickNameForm}
             setShowNickNameForm={setShowNickNameForm}
           />
-          {showNickNameForm && (
-            <NicknameForm roomId={params.id} />
-          )}
+          {showNickNameForm && <NicknameForm roomId={params.id} />}
         </main>
       </SocketProvider>
     </GroomingRoomProvider>

gurubu-client/src/app/services/roomService.ts

@@ -1,5 +1,5 @@
 import axios from "axios";
-import { HTTP_STATUS } from "../shared/enums";
+import { HTTP_STATUS } from "@/shared/enums";
 
 export class RoomService {
   baseUrl: string;
@@ -36,7 +36,7 @@ export class RoomService {
     try {
       const response = await axios.post(url, payload);
       if (response.status === HTTP_STATUS.OK) return response.data;
-      
+
       return null;
     } catch (e) {
       return null;