init counsels

app/(main)/counsels/page.module.css

@@ -0,0 +1,57 @@
+.mainContainer {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  width: 100%;
+  min-height: 100vh;
+  height: 100%;
+}
+
+.buttonContainer {
+  display: flex;
+  flex-direction: column;
+  width: 200px;
+  background-color: #f8fafc;
+  padding: 20px;
+  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
+  height: 100%;
+}
+
+.content {
+  flex-grow: 1;
+  padding: 20px;
+}
+
+.navButton {
+  background-color: #f8fafc;
+  width: 100%;
+  padding: 8px;
+  margin: 5px 0;
+  border-radius: 10px;
+  color: #4b5563;
+  font-size: 16px;
+  font-weight: 500;
+  transition: background-color 0.3s, color 0.3s;
+  text-align: left;
+}
+
+.navButton:hover {
+  background-color: #e2e8f0;
+  color: #1d4ed8;
+}
+
+@media (max-width: 1023px) {
+  .mainContainer {
+    padding-top: 90px;
+  }
+  .buttonContainer {
+    padding-top: 90px;
+  }
+}
+
+@media (min-width: 1024px) {
+  .mainContainer {
+    padding-left: 144px;
+    padding-top: 64px;
+  }
+}

app/(main)/counsels/page.tsx

@@ -1,5 +1,34 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { useRouter } from "next/router";
+import { Card as UICard } from "@/components/ui/card";
+import React, { useState, useEffect } from "react";
+import styles from "../counsels/page.module.css";
+import Link from "next/link";
+
 const CounselPage = () => {
-  return <main>나의 상담 신청 내역을 조회하는 페이지(커피챗 앱의 나의 커피챗 페이지라고 생각하면 될듯)</main>;
+  const [view, setView] = useState("current");
+
+  return (
+    <main className={styles.mainContainer}>
+      <div className={styles.buttonContainer}>
+        <Button className={styles.navButton} onClick={() => setView("past")}>
+          지난 상담
+        </Button>
+        <Button className={styles.navButton} onClick={() => setView("current")}>
+          현재 상담
+        </Button>
+      </div>
+      <div className={styles.content}>
+        {view === "current" ? (
+          <div>현재 상담 내역을 여기에 표시합니다.</div>
+        ) : (
+          <div>지난 상담 내역을 여기에 표시합니다.</div>
+        )}
+      </div>
+    </main>
+  );
 };
 
 export default CounselPage;