⚡ :: matching View 일부 개발 #8

src/Components/Auth/signup/Email/index.tsx

@@ -2,8 +2,8 @@
 
 import React from "react";
 import * as S from "./style";
-import TextField from "src/Components/common/TextField";
-import useEmail from "src/hooks/Auth/signup/useEmail";
+import TextField from "src/components/common/TextField";
+import useEmail from "src/Hooks/Auth/signup/useEmail";
 
 const SignUpEmail = () => {
   const { ...hooks } = useEmail();

src/Components/Auth/signup/Info/index.tsx

@@ -2,7 +2,7 @@
 
 import React from "react";
 import * as S from "./style";
-import TextField from "src/Components/common/TextField";
+import TextField from "src/components/common/TextField";
 import useInfo from "src/hooks/Auth/signup/useInfo";
 
 const SignupInfo = () => {

src/Components/Auth/signup/Pw/index.tsx

@@ -2,7 +2,7 @@
 
 import React from "react";
 import * as S from "./style";
-import TextField from "src/Components/common/TextField";
+import TextField from "src/components/common/TextField";
 import usePassword from "src/hooks/Auth/signup/usePassword";
 
 const SignupPw = () => {

src/Components/Sidebar/index.tsx

@@ -0,0 +1,70 @@
+"use client";
+import React from "react";
+import Image from "next/image";
+import * as S from "./style";
+import Homelight from "src/asset/homeLight.svg";
+import Home1 from "src/asset/home.svg";
+import Chatlight from "src/asset/chatLight.svg";
+import Chat from "src/asset/chat.svg";
+import Findlight from "src/asset/findLight.svg";
+import Find from "src/asset/find.svg";
+import Communitylight from "src/asset/communityLight.svg";
+import Community from "src/asset/community.svg";
+import { useRouter } from "next/navigation";
+import useSidebar from "src/Hooks/common/sidebar/useSidebar";
+import Profile from "src/asset/Profile.jpeg";
+import Link from "next/link";
+
+export const Index = () => {
+  const { selectedItem, handleItemClick, userProfile, handleLogoclick, handleProfileClick } = useSidebar();
+  const router = useRouter();
+
+  return (
+    <S.Side>
+      <S.Logo onClick={handleLogoclick}>DEAR.</S.Logo>
+
+      <S.Option>
+        <Link href="/main" legacyBehavior style={{ textDecoration: "none", outline: "none" }}>
+          <S.Select isSelected={selectedItem === "home"} onClick={() => handleItemClick("home")}>
+            <Image src={selectedItem === "home" ? Homelight : Home1} alt="메인" width={30} height={30} />
+            메인
+          </S.Select>
+        </Link>
+
+        <Link href="/chat" style={{ textDecoration: "none" }}>
+          <S.Select isSelected={selectedItem === "chat"} onClick={() => handleItemClick("chat")}>
+            <Image src={selectedItem === "chat" ? Chatlight : Chat} alt="채팅" width={30} height={30} />
+            채팅
+          </S.Select>
+        </Link>
+
+        <Link href="/find" style={{ textDecoration: "none" }}>
+          <S.Select isSelected={selectedItem === "find"} onClick={() => handleItemClick("find")}>
+            <Image src={selectedItem === "find" ? Findlight : Find} alt="교수찾기" width={30} height={30} />
+            교수찾기
+          </S.Select>
+        </Link>
+
+        <Link href="/community" style={{ textDecoration: "none" }}>
+          <S.Select isSelected={selectedItem === "community"} onClick={() => handleItemClick("community")}>
+            <Image
+              src={selectedItem === "community" ? Communitylight : Community}
+              alt="커뮤니티 광장"
+              width={30}
+              height={30}
+            />
+            커뮤니티 광장
+          </S.Select>
+        </Link>
+      </S.Option>
+      <S.My onClick={handleProfileClick}>
+        <Image src={Profile} alt="프로필" width={45} height={45} style={{ borderRadius: "100%" }} />
+        <div>
+          <S.Name>{userProfile?.name}</S.Name>
+          <S.School>{userProfile?.schoolName}</S.School>
+        </div>
+      </S.My>
+    </S.Side>
+  );
+};
+export default Index;

src/Components/Sidebar/style.ts

@@ -0,0 +1,93 @@
+import styled from "styled-components";
+
+export const Side = styled.div`
+  margin: 0;
+  position: relative;
+  background: var(--White, #fff);
+  width: 250px;
+  display: flex;
+  justify-content: space-between;
+  flex-direction: column;
+`;
+
+export const Logo = styled.div`
+  display: flex;
+  font-size: 40px;
+  font-weight: 800;
+  font-family: Pretendard;
+  font-style: normal;
+  color: var(--New, #0e2764);
+  background: none;
+  justify-content: center;
+  height: 10%;
+  align-items: center;
+`;
+
+export const Option = styled.div`
+  height: 60%;
+  gap: 8%;
+  display: flex;
+  flex-direction: column;
+  background: none;
+  align-items: center;
+`;
+
+export const Select = styled.div<{ isSelected: boolean }>`
+  width: 230px;
+  height: 50px;
+  background: ${({ isSelected }) => (isSelected ? "#0e2764" : "transparent")};
+  color: ${({ isSelected }) => (isSelected ? "#ffffff" : "#000000")};
+  font-size: 25px;
+  font-family: Pretendard;
+  font-weight: 500;
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  border-radius: 10px;
+  border: none;
+  cursor: pointer;
+  outline: none;
+
+  & > img {
+    margin-left: 10px;
+    outline: none;
+  }
+`;
+
+export const My = styled.div`
+  margin-left: 5%;
+  margin-bottom: 5%;
+  display: flex;
+  width: 100%;
+  align-items: flex-end;
+  cursor: pointer; /* 추가: hover 시 pointer로 변경 */
+
+  &:hover {
+    text-decoration: underline; /* 추가: hover 시 밑줄 효과 */
+  }
+`;
+
+export const Name = styled.div`
+  color: var(--Black, #000);
+  font-family: Inter;
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: normal;
+`;
+
+export const School = styled.div`
+  color: var(--Gray500, #aaa);
+  font-family: Inter;
+  font-size: 13px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: normal;
+`;
+
+// export const Profile = styled.image`
+//   width: 50px;
+//   height: 50px;
+//   object-fit: fill;
+//   border-radius: 100%;
+// `;

src/Hooks/Auth/signup/useEmail.ts

@@ -1,7 +1,7 @@
 import axios from "axios";
 import React, { useCallback, useEffect, useState } from "react";
 import { useRecoilState } from "recoil";
-import { EmailAtom } from "src/store/Auth/signup/signup.store";
+import { EmailAtom } from "src/Store/Auth/signup/signup.store";
 import { ErrorStateAtom } from "src/store/common/common.store";
 import patternCheck from "src/util/check/patternCheck";
 import CONFIG from "src/config/config.json";

src/Hooks/common/sidebar/useSidebar.ts

@@ -0,0 +1,61 @@
+import { useState, useEffect, SetStateAction } from "react";
+import { usePathname, useRouter } from "next/navigation";
+import { UserProfile } from "src/types/profile/profile.type";
+import axios from "axios";
+
+const useSidebar = () => {
+  const [selectedItem, setSelectedItem] = useState("");
+  const [userProfile, setUserProfile] = useState<UserProfile | null>(null);
+  const pathname = usePathname();
+  const router = useRouter();
+
+  const handleLogoclick = () => {
+    router.push("/main");
+    setSelectedItem(""); // 로고 클릭 시 선택된 버튼 초기화
+    sessionStorage.removeItem("selectedItem"); // 세션 스토리지에서 선택된 버튼 정보 제거
+  };
+
+  const handleItemClick = (item: any) => {
+    setSelectedItem(item);
+    sessionStorage.setItem("selectedItem", item); // 선택된 버튼 정보를 세션 스토리지에 저장
+    if (item === "profile") {
+      router.push("/profile"); // 프로필 페이지로 이동
+    } else {
+      router.push(`/path/${item}`);
+    }
+  };
+  const handleProfileClick = () => {
+    handleItemClick("profile");
+  };
+
+  useEffect(() => {
+    const fetchUserProfile = async () => {
+      try {
+        const response = await axios.get("http://43.202.136.92:8080/profile");
+        setUserProfile(response.data);
+      } catch (error) {
+        console.error("Error fetching user profile:", error);
+      }
+    };
+
+    fetchUserProfile();
+
+    // 페이지 로드 시 세션 스토리지에서 선택된 버튼 정보를 읽어와 selectedItem 상태 업데이트
+    const storedItem = sessionStorage.getItem("selectedItem");
+    if (storedItem) {
+      setSelectedItem(storedItem);
+    }
+  }, []);
+
+  return {
+    selectedItem,
+    handleLogoclick,
+    handleItemClick,
+    handleProfileClick,
+    userProfile,
+    pathname,
+    router,
+  };
+};
+
+export default useSidebar;

src/Hooks/matching/useMatching.ts

@@ -0,0 +1,3 @@
+const useMatching = () => {
+
+}

src/app/layout.tsx

@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
-import Layout from "@/components/common/layout";
+import Layout from "src/components/common/layout/index";
 import StyledComponentsRegistry from "src/Libs/registry";
+import GlobalStyle from "src/style/global";
 export const metadata: Metadata = {
   title: "Dear",
   description: "Generated by create next app",
@@ -14,6 +15,7 @@ export default function RootLayout({
     <html lang="en">
       <body>
         <StyledComponentsRegistry>
+          <GlobalStyle />
           <Layout>{children}</Layout>
         </StyledComponentsRegistry>
       </body>

src/app/matching/page.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+import Find from "src/components/matching/index";
+const page = () => {
+  return (
+    <div>
+      <Find />
+    </div>
+  );
+};
+
+export default page;

src/app/matching/professor/page.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+import ProfessorDetail from "@/components/matching/professorDetail/index";
+
+const page = () => {
+  return (
+    <div>
+      <ProfessorDetail />
+    </div>
+  )
+}
+
+export default page

src/app/signup/email/page.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import React from "react";
-import SignUpEmail from "src/Components/Auth/signup/Email";
+import SignUpEmail from "src/components/Auth/signup/Email";
 
 const Page = () => {
   return (

src/app/signup/info/page.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import SignupInfo from "src/Components/Auth/signup/Info";
+import SignupInfo from "src/components/Auth/signup/Info";
 
 const Page = () => {
   return (

src/app/signup/password/page.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import SignupPw from "src/Components/Auth/signup/Pw";
+import SignupPw from "src/components/Auth/signup/Pw";
 
 const Page = () => {
   return (