Merge pull request #8 from chohyundon/feature/teddy

Feature/teddy
GDSC-Daejin · Jun 12, 2024 · a07d6e7 · a07d6e7
2 parents c40da2e + ae65bd9
commit a07d6e7
Show file tree

Hide file tree

Showing 71 changed files with 994 additions and 20 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -1,5 +1,9 @@
 {
   "extends": "next/core-web-vitals",
-  "plugins": ["@stylexjs"],
-  "rules": { "@stylexjs/valid-styles": "error" }
-}
+  "plugins": [
+    "@stylexjs"
+  ],
+  "rules": {
+    "@stylexjs/valid-styles": "error"
+  }
+}
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -4,6 +4,8 @@ import '@/shared/ui/styles/globals.css';
 import stylex from '@stylexjs/stylex';
 import React from 'react';
 import { Navbar } from '@/widgets/navbar';
+import { ThemeProvider } from 'next-themes';
+import ThemeToggle from '@/widgets/ThemeToggle';
 
 export const metadata: Metadata = {
   title: 'GDSC DJU',
@@ -17,9 +19,15 @@ export default function RootLayout({
 }) {
   return (
     <html {...stylex.props(styles.html)} lang="en">
-      <body {...stylex.props(styles.body)}>
-        <Navbar />
-        <main>{children}</main>
+      <body
+        {...stylex.props(styles.body)}
+        className={`${styles.body} dark: ${styles.dark}`}
+      >
+        <ThemeProvider attribute="class">
+          <Navbar />
+          <ThemeToggle />
+          <main>{children}</main>
+        </ThemeProvider>
       </body>
     </html>
   );
@@ -35,6 +43,17 @@ const styles = stylex.create({
     padding: 0,
   },
   body: {
+    backgroundColor: 'white',
     color: 'rgb(20, 22, 27)',
   },
+  dark: {
+    backgroundColor: 'black',
+    color: 'white',
+  },
+  span: {
+    color: 'rgb(20, 22, 27)', // Default span color in light mode
+  },
+  spanDark: {
+    color: 'white', // Span color in dark mode
+  },
 });
diff --git a/app/members/alumnight/page.tsx b/app/members/alumnight/page.tsx
@@ -0,0 +1,5 @@
+import { AlumNightPage } from '@/widgets/memberPage/alumnight/index';
+
+export default function AlumNight() {
+  return <AlumNightPage></AlumNightPage>;
+}
diff --git a/app/members/android/page.tsx b/app/members/android/page.tsx
@@ -0,0 +1,5 @@
+import { AndroidPage } from '@/widgets/memberPage/android/index';
+
+export default function Android() {
+  return <AndroidPage></AndroidPage>;
+}
diff --git a/app/members/backend/page.tsx b/app/members/backend/page.tsx
@@ -0,0 +1,5 @@
+import { BackendPage } from '@/widgets/memberPage/backend/index';
+
+export default function Android() {
+  return <BackendPage></BackendPage>;
+}
diff --git a/app/members/beginner/page.tsx b/app/members/beginner/page.tsx
@@ -0,0 +1,5 @@
+import { BeginnerPage } from '@/widgets/memberPage/beginner/index';
+
+export default function Android() {
+  return <BeginnerPage></BeginnerPage>;
+}
diff --git a/app/members/designer/page.tsx b/app/members/designer/page.tsx
@@ -0,0 +1,5 @@
+import { DesignerPage } from '@/widgets/memberPage/designer/index';
+
+export default function Android() {
+  return <DesignerPage></DesignerPage>;
+}
diff --git a/app/members/frontend/page.tsx b/app/members/frontend/page.tsx
@@ -0,0 +1,5 @@
+import { FrontEndPage } from '@/widgets/memberPage/frontend/index';
+
+export default function Android() {
+  return <FrontEndPage></FrontEndPage>;
+}
diff --git a/app/members/layout.tsx b/app/members/layout.tsx
@@ -0,0 +1,31 @@
+import { MemberCategory } from '@/features/update-button/index';
+import type { Metadata } from 'next';
+import * as stylex from '@stylexjs/stylex';
+
+const styles = stylex.create({
+  container: {
+    width: '100%',
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
+
+export const metadata: Metadata = {
+  title: 'GDSC DJU | Members',
+  description: 'GDSC DJU Members website',
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <div {...stylex.props(styles.container)}>
+      <MemberCategory />
+      <main>{children}</main>
+    </div>
+  );
+}
diff --git a/app/members/ml/page.tsx b/app/members/ml/page.tsx
@@ -0,0 +1,5 @@
+import { MLPage } from '@/widgets/memberPage/ml/index';
+
+export default function Android() {
+  return <MLPage></MLPage>;
+}
diff --git a/app/members/page.tsx b/app/members/page.tsx
@@ -0,0 +1,5 @@
+import { MemberPage } from '@/views/member/ui/member';
+
+export default function MemberHomePage() {
+  return <MemberPage />;
+}
diff --git a/app/not-found.tsx b/app/not-found.tsx
@@ -0,0 +1,29 @@
+import Link from 'next/link';
+import * as stylex from '@stylexjs/stylex';
+import { sizes } from '../src/shared/ui/styles/tokens.stylex';
+
+export const styles = stylex.create({
+  container: {
+    position: 'absolute',
+    top: '50%',
+    left: '50%',
+    transform: 'translate(-50%, -50%)',
+    textAlign: 'center',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '20px',
+  },
+  header: {
+    fontSize: sizes.title1_bold,
+  },
+});
+
+export default function NotFound() {
+  return (
+    <div {...stylex.props(styles.container)}>
+      <h2 {...stylex.props(styles.header)}>찾을수 없습니다</h2>
+      <p>잘못된 경로로 접근했습니다!!</p>
+      <Link href="/">홈으로 돌아가기</Link>
+    </div>
+  );
+}
diff --git a/app/teddy/monthly/page.tsx b/app/teddy/monthly/page.tsx
diff --git a/app/wakatime/page.tsx b/app/wakatime/page.tsx
@@ -1,8 +1,7 @@
+import WakatimeMain from "@/views/wakatime/ui/wakatime-main"
 
 const Wakatime = () => {
-  return (
-    <div>page</div>
-  )
+  return <WakatimeMain/>
 }
 
 export default Wakatime
diff --git a/next.config.js b/next.config.js
@@ -9,6 +9,10 @@ module.exports = {
     rootDir: __dirname,
   })({}),
   images: {
-    domains: ['avatars.slack-edge.com'], // 이미지 호스트 추가
+    domains: [
+      'avatars.slack-edge.com',
+      'secure.gravatar.com',
+      'a.slack-edge.com',
+    ], // 이미지 호스트 추가
   },
 };
diff --git a/package.json b/package.json
@@ -12,6 +12,7 @@
     "@stylexjs/open-props": "^0.6.0",
     "@stylexjs/stylex": "^0.6.0",
     "next": "14.2.1",
+    "next-themes": "^0.3.0",
     "react": "^18",
     "react-dom": "^18"
   },
@@ -28,4 +29,4 @@
     "eslint-config-next": "14.2.1",
     "typescript": "^5.4.5"
   }
-}
+}
diff --git a/src/entities/member/api/getMemberData.ts b/src/entities/member/api/getMemberData.ts
@@ -0,0 +1,5 @@
+export const GetMemberData = async (dataType: string) => {
+  const data = await fetch(`https://backend.gdscdju.dev/api/v1/${dataType}`);
+  const memberData = data.json();
+  return memberData;
+};
diff --git a/src/entities/member/index.ts b/src/entities/member/index.ts
@@ -0,0 +1 @@
+export { GetMemberData } from './api/getMemberData';
diff --git a/src/features/update-button/index.ts b/src/features/update-button/index.ts
@@ -1 +1,3 @@
 export { TeddyCategory } from './ui/change-teddyCategory';
+export { MemberCategory } from './ui/change-memberCategory';
+export { ChangeNavBarColor } from './ui/change-navbarCategory';
diff --git a/src/features/update-button/ui/change-memberCategory.tsx b/src/features/update-button/ui/change-memberCategory.tsx
@@ -0,0 +1,94 @@
+'use client';
+
+import * as stylex from '@stylexjs/stylex';
+import { colors, sizes } from '../../../shared/ui/styles/tokens.stylex';
+import { useState } from 'react';
+import Link from 'next/link';
+import { useTheme } from 'next-themes';
+
+export const styles = stylex.create({
+  container: {
+    paddingTop: '32px',
+    display: 'flex',
+    gap: '24px',
+    width: '1200px',
+    justifyContent: 'flex-start',
+  },
+
+  categoryContainer: {
+    textDecoration: 'none',
+  },
+
+  category: {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: '27px',
+    width: '78px',
+    textDecoration: 'none',
+    height: '30px',
+    cursor: 'pointer',
+    fontSize: sizes.title2_medium,
+    backgroundColor: colors.grey200,
+    color: colors.grey900,
+  },
+
+  isActive: {
+    backgroundColor: colors.redCore,
+    color: colors.grey50,
+  },
+  bgDark: {
+    backgroundColor: colors.grey700,
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: '27px',
+    width: '78px',
+    textDecoration: 'none',
+    height: '30px',
+    cursor: 'pointer',
+    fontSize: sizes.title2_medium,
+    color: colors.white,
+  },
+});
+
+export const MemberCategory = () => {
+  const { theme } = useTheme();
+  const bgColor = theme === 'dark' ? styles.bgDark : styles.category;
+
+  const [isClick, setIsClick] = useState('');
+
+  const memberCategory = [
+    { name: 'Backend', path: '/backend' },
+    { name: 'Frontend', path: '/frontend' },
+    { name: 'Android', path: '/android' },
+    { name: 'ML', path: '/ml' },
+    { name: 'Designer', path: '/designer' },
+    { name: 'Beginner', path: '/beginner' },
+    { name: 'Alumnight', path: '/alumnight' },
+  ];
+
+  return (
+    <>
+      <ul {...stylex.props(styles.container)}>
+        {memberCategory.map((member, index) => (
+          <Link
+            href={`/members/${member.path}`}
+            key={index}
+            {...stylex.props(styles.categoryContainer)}
+          >
+            <li
+              onClick={() => setIsClick(member.name)}
+              {...stylex.props(
+                bgColor,
+                isClick === member.name ? styles.isActive : undefined,
+              )}
+            >
+              {member.name}
+            </li>
+          </Link>
+        ))}
+      </ul>
+    </>
+  );
+};
diff --git a/src/features/update-button/ui/change-navbarCategory.tsx b/src/features/update-button/ui/change-navbarCategory.tsx
@@ -0,0 +1,63 @@
+'use client';
+
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import * as stylex from '@stylexjs/stylex';
+import { colors } from '../../../shared/ui/styles/tokens.stylex';
+
+export const styles = stylex.create({
+  category: {
+    textDecoration: 'none',
+  },
+  categoryHover: {
+    color: {
+      default: 'black',
+      ':hover': colors.blueCore,
+    },
+    borderBottomWidth: {
+      ':hover': '1px',
+    },
+    borderColor: {
+      ':hover': colors.blueCore,
+    },
+    borderStyle: {
+      ':hover': 'solid',
+    },
+  },
+  active: {
+    color: colors.blueCore,
+  },
+});
+
+export const ChangeNavBarColor = () => {
+  const NavBarPath = usePathname();
+
+  const NavBarData = [
+    { name: 'wakatime', path: '/wakatime' },
+    { name: 'teddy', path: '/teddy' },
+    { name: 'members', path: '/members' },
+    { name: 'blog', path: '/blog' },
+  ];
+
+  const pathName = NavBarData.map((item) => item.name);
+
+  return (
+    <>
+      {NavBarData.map((category, index) => (
+        <Link
+          href={category.path}
+          key={index}
+          role="navigation"
+          aria-label={`${pathName}로 바로가기`}
+          {...stylex.props(
+            styles.category,
+            styles.categoryHover,
+            NavBarPath === category.path ? styles.active : undefined,
+          )}
+        >
+          {category.name}
+        </Link>
+      ))}
+    </>
+  );
+};
diff --git a/src/features/update-button/ui/style.ts b/src/features/update-button/ui/style.ts
@@ -3,7 +3,7 @@ import { colors, sizes } from '../../../shared/ui/styles/tokens.stylex';
 
 export const styles = stylex.create({
   teddyCategoryContainer: {
-    width: "1200px",
+    width: '1200px',
     margin: '0 auto',
     display: 'flex',
     paddingLeft: '120px',

diff --git a/src/shared/types/memberType.ts b/src/shared/types/memberType.ts
@@ -0,0 +1,8 @@
+export interface MemberType {
+  Name: string;
+  Nickname: string;
+  SlackID: string;
+  Role: string;
+  Position: string;
+  Image512: string;
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { GetMemberData } from './api/getMemberData';