[ Feat ] Group Ranking 퍼블리싱

src/api/group/type.ts

@@ -7,3 +7,21 @@ export interface GroupJoinResponse {
   description: string;
   owner: string;
 }
+
+export interface GroupInfoResponse {
+  id: number;
+  name: string;
+  startDate: string;
+  endDate: string;
+  introduction: string;
+  groupImage: string;
+  isOwner: boolean;
+  ownerNickname: string;
+}
+
+export interface GroupRankingResponse {
+  userNickname: string;
+  profileImage: string;
+  rank: number;
+  solvedCount: number;
+}

src/api/user/type.ts

@@ -0,0 +1,7 @@
+export type UserResponse = {
+  email?: string;
+  nickname?: string;
+  profileImage?: string;
+  bjNickname?: string;
+  desc?: string;
+};

src/app/group/my-solved/page.tsx

@@ -1,5 +1,13 @@
+import Sidebar from "@/common/component/Sidebar";
+import { sidebarWrapper } from "@/styles/shared.css";
+
 const MySolvedPage = () => {
-  return <div>MySolvedPage</div>;
+  return (
+    <div className={sidebarWrapper}>
+      <Sidebar />
+      {/* children */}
+    </div>
+  );
 };
 
 export default MySolvedPage;

src/app/group/page.tsx

@@ -1,49 +1,31 @@
-"use client";
+import type { GroupInfoResponse } from "@/api/group/type";
+import Sidebar from "@/common/component/Sidebar";
+import { mainWrapper, sidebarWrapper } from "@/styles/shared.css";
+import GroupSidebar from "@/view/group/dashboard/component/GroupSidebar";
+import Ranking from "@/view/group/dashboard/component/Ranking";
 
-import { IcnPlus, IcnSearch, IcnSquare } from "@/asset/svg";
-import TabGroup from "@/common/component/Tab";
+export const tmpGroupData: GroupInfoResponse = {
+  id: 0,
+  name: "숭실대학교 알고리즘 스터디",
+  startDate: "2024.08.13",
+  endDate: "2024.09.13",
+  introduction:
+    "BE Developer로 성장하고 싶은 숭실대학교 학생들이 푸는 알고리즘 스터디입니다",
+  groupImage: "",
+  isOwner: true,
+  ownerNickname: "jnary",
+};
 
 const GroupDashboardPage = () => {
   return (
-    <TabGroup.Tabs
-      tag="main"
-      style={{ width: "100%", height: "calc(100vh - 7.2rem)" }}
-    >
-      <TabGroup.TabList>
-        <TabGroup.Tab
-          renderedIcon={(className: string) => (
-            <IcnSquare className={className} width={24} height={24} />
-          )}
-          tabId="1"
-          mode="fill"
-        >
-          대시보드
-        </TabGroup.Tab>
-        <TabGroup.Tab
-          renderedIcon={(className: string) => (
-            <IcnPlus className={className} width={16} height={16} />
-          )}
-          tabId="2"
-          mode="stroke"
-        >
-          문제 리스트
-        </TabGroup.Tab>
-        <TabGroup.Tab
-          renderedIcon={(className: string) => (
-            <IcnSearch className={className} width={18.2} height={18.2} />
-          )}
-          tabId="3"
-          mode="stroke"
-        >
-          스터디 관리
-        </TabGroup.Tab>
-      </TabGroup.TabList>
-      <TabGroup.TabPanels>
-        <div>1번 패널</div>
-        <div>2번 패널</div>
-        <div>3번 패널</div>
-      </TabGroup.TabPanels>
-    </TabGroup.Tabs>
+    <div className={sidebarWrapper}>
+      <Sidebar>
+        <GroupSidebar info={tmpGroupData} />
+      </Sidebar>
+      <section className={mainWrapper}>
+        <Ranking />
+      </section>
+    </div>
   );
 };
 

src/app/group/problem-list/page.tsx

@@ -0,0 +1,15 @@
+import Sidebar from "@/common/component/Sidebar";
+import { sidebarWrapper } from "@/styles/shared.css";
+import ProblemSidebar from "@/view/group/index/component/ProblemSidebar";
+
+const ProblemListPage = () => {
+  const isOwner = true;
+  return (
+    <div className={sidebarWrapper}>
+      <Sidebar>{isOwner ? <ProblemSidebar /> : <></>}</Sidebar>
+      {/* children */}
+    </div>
+  );
+};
+
+export default ProblemListPage;

src/app/group/setting/page.tsx

@@ -1,5 +1,13 @@
+import Sidebar from "@/common/component/Sidebar";
+import { sidebarWrapper } from "@/styles/shared.css";
+
 const GroupSettingPage = () => {
-  return <div>GroupSettingPage</div>;
+  return (
+    <div className={sidebarWrapper}>
+      <Sidebar />
+      {/* children */}
+    </div>
+  );
 };
 
 export default GroupSettingPage;

src/app/user/layout.tsx

@@ -0,0 +1,15 @@
+import "@/styles/globalStyles.css";
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "AlgoHub 마이페이지",
+  description: "특정 유저가 참여한 그룹 리스트를 볼 수 있는 페이지",
+};
+
+export default function UserLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return <>{children}</>;
+}

src/app/user/page.tsx

@@ -1,5 +1,19 @@
+import Sidebar from "@/common/component/Sidebar";
+import { mainWrapper, sidebarWrapper } from "@/styles/shared.css";
+import UserCard from "@/view/user/index/component/UserCard";
+import { userCardWrapper } from "@/view/user/index/component/UserCard/index.css";
+
 const UserDashboardPage = () => {
-  return <div>UserDashboardPage</div>;
+  return (
+    <div className={sidebarWrapper}>
+      <Sidebar>
+        <div className={userCardWrapper}>
+          <UserCard />
+        </div>
+      </Sidebar>
+      <section className={mainWrapper}>{/**children */}</section>
+    </div>
+  );
 };
 
 export default UserDashboardPage;

src/app/user/setting/layout.tsx

@@ -0,0 +1,15 @@
+import "@/styles/globalStyles.css";
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "AlgoHub 마이페이지 - 설정",
+  description: "유저의 정보 및 시스템을 설정할 수 있는 페이지",
+};
+
+export default function UserLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return <>{children}</>;
+}

src/app/user/setting/page.tsx

@@ -1,5 +1,20 @@
+"use client";
+import Sidebar from "@/common/component/Sidebar";
+import { sidebarWrapper } from "@/styles/shared.css";
+import SettingStep from "@/view/user/setting/component/SettingStep";
+import type { SettingSteps } from "@/view/user/setting/type";
+import { useState } from "react";
+
 const UserSettingPage = () => {
-  return <div>UserSettingPage</div>;
+  const [step, setStep] = useState<SettingSteps>("my-profile");
+  return (
+    <div className={sidebarWrapper}>
+      <Sidebar>
+        <SettingStep step={step} setStep={setStep} />
+      </Sidebar>
+      {/* children */}
+    </div>
+  );
 };
 
 export default UserSettingPage;