GDSC-Daejin · chohyundon · May 17, 2024 · May 17, 2024 · May 21, 2024 · May 21, 2024
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,11 @@ const styles = stylex.create({
     padding: 0,
   },
   body: {
+    backgroundColor: 'white',
     color: 'rgb(20, 22, 27)',
   },
+  dark: {
+    backgroundColor: 'black',
+    color: 'white',
+  },
 });
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/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/features/update-button/index.ts b/src/features/update-button/index.ts
@@ -1 +1,2 @@
 export { TeddyCategory } from './ui/change-teddyCategory';
+export { ChangeNavBarColor } from './ui/change-navbarCategory';
diff --git a/src/features/update-button/ui/change-navbarCategory.tsx b/src/features/update-button/ui/change-navbarCategory.tsx
@@ -0,0 +1,59 @@
+'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' },
+  ];
+
+  return (
+    <>
+      {NavBarData.map((category, index) => (
+        <Link
+          href={category.path}
+          key={index}
+          {...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/ui/icons/1등 메달.svg b/src/shared/ui/icons/1등 메달.svg
diff --git a/src/shared/ui/icons/2등 메달.svg b/src/shared/ui/icons/2등 메달.svg
diff --git a/src/shared/ui/icons/3등 메달.svg b/src/shared/ui/icons/3등 메달.svg
diff --git a/src/shared/ui/icons/leftButton.svg b/src/shared/ui/icons/leftButton.svg
diff --git a/src/shared/ui/icons/rightButton.svg b/src/shared/ui/icons/rightButton.svg
diff --git a/src/shared/ui/styles/tokens.stylex.ts b/src/shared/ui/styles/tokens.stylex.ts
@@ -74,6 +74,7 @@ export const sizes = stylex.defineVars({
   title1_bold: '20px',
   title2_medium: '14px',
   body1_medium: '18px',
+  body1_medium_16: '16px',
   body2_regular: '16px',
   body3_regular: '14px',
   caption1_regular: '12px',

diff --git a/src/views/teddy/ui/teddy-monthly.tsx b/src/views/teddy/ui/teddy-monthly.tsx
diff --git a/src/views/teddy/ui/teddy-weekly.tsx b/src/views/teddy/ui/teddy-weekly.tsx
@@ -6,7 +6,6 @@ export const styles = stylex.create({
   container: {
     width: '1200px',
     margin: '0 auto',
-    paddingLeft: '120px',
     paddingTop: '115px',
   },
 });

diff --git a/src/views/wakatime/index.tsx b/src/views/wakatime/index.tsx
diff --git a/src/views/wakatime/ui/style.ts b/src/views/wakatime/ui/style.ts
@@ -0,0 +1,15 @@
+import * as stylex from '@stylexjs/stylex';
+import {
+  colors,
+  sizes,
+  fontWeight,
+} from '../../../shared/ui/styles/tokens.stylex';
+
+export const styles = stylex.create({
+  container: {
+    width: '1200px',
+    margin: '0 auto',
+    paddingLeft: '120px',
+    paddingTop: '115px',
+  },
+});
diff --git a/src/views/wakatime/ui/wakatime-main.tsx b/src/views/wakatime/ui/wakatime-main.tsx
@@ -0,0 +1,13 @@
+import Image from 'next/image';
+import { styles } from './style';
+import stylex from '@stylexjs/stylex';
+
+const WakatimeMain = () => {
+  return (
+    <div {...stylex.props(styles.container)}>
+      wakatime-main
+    </div>
+  )
+}
+
+export default WakatimeMain
diff --git a/src/widgets/Navbar/ui/navbar.tsx b/src/widgets/Navbar/ui/navbar.tsx
@@ -1,9 +1,12 @@
+'use client';
+
 import React from 'react';
 import Link from 'next/link';
 import stylex from '@stylexjs/stylex';
 import Image from 'next/image';
 import Logo from '@/shared/ui/icons/GDSCLogo.svg';
 import { styles } from './styles';
+import { ChangeNavBarColor } from '@/features/update-button/ui/change-navbarCategory';
 
 export const Navbar = () => {
   return (
@@ -16,7 +19,7 @@ export const Navbar = () => {
           href="/wakatime"
           {...stylex.props(styles.category, styles.categoryHover)}
         >
-          <span>wakatime</span>
+          <p>wakatime</p>
         </Link>
         <Link
           href="/teddy"

diff --git a/src/widgets/ThemeToggle.tsx b/src/widgets/ThemeToggle.tsx
@@ -0,0 +1,36 @@
+'use client';
+
+import stylex from '@stylexjs/stylex';
+
+import { useTheme } from 'next-themes';
+import { useEffect, useState } from 'react';
+
+const ThemeToggle = () => {
+  const { theme, setTheme } = useTheme();
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) return null;
+
+  return (
+    <button
+      {...stylex.props(styles.themeButton)}
+      onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}
+    >
+      Toggle Theme
+    </button>
+  );
+};
+
+const styles = stylex.create({
+  themeButton: {
+    position: 'absolute',
+    right: 50,
+    top: 20,
+  },
+});
+
+export default ThemeToggle;
diff --git a/src/widgets/teddyIntro/ui/style.ts b/src/widgets/teddyIntro/ui/style.ts
@@ -31,7 +31,8 @@ export const styles = stylex.create({
   },
 
   content: {
-    fontSize: sizes.body1_medium,
+    fontSize: sizes.body1_medium_16,
+    lineHeight: '130%',
   },
 
   contentsContainer: {

diff --git a/src/widgets/teddyIntro/ui/teddyIntro.tsx b/src/widgets/teddyIntro/ui/teddyIntro.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import { styles } from './style';
 import stylex from '@stylexjs/stylex';
 

diff --git a/src/widgets/teddyMonthly/index.ts b/src/widgets/teddyMonthly/index.ts
diff --git a/src/widgets/teddyMonthly/ui/style.ts b/src/widgets/teddyMonthly/ui/style.ts
diff --git a/src/widgets/teddyMonthly/ui/teddyMonthlyMember.tsx b/src/widgets/teddyMonthly/ui/teddyMonthlyMember.tsx
diff --git a/tsconfig.json b/tsconfig.json
@@ -41,4 +41,4 @@
   "exclude": [
     "node_modules"
   ]
-}
+}
Original file line number	Diff line number	Diff line change
		@@ -1 +1,2 @@
		export { TeddyCategory } from './ui/change-teddyCategory';
		export { ChangeNavBarColor } from './ui/change-navbarCategory';
-Original file line number
+Diff line change
@@ Expand Up / @@ -41,4 +41,4 @@ @@
       "exclude": [
         "node_modules"
       ]
-    }
+    }