Merge pull request #45 from ShipFriend0516/feature/lightmode

[Feature] Footer 다크모드 지원

Author: ShipFriend0516

app/entities/common/Footer.tsx

@@ -1,28 +1,26 @@
+'use client';
 import Link from 'next/link';
+import useToast from '@/app/hooks/useToast';
 
 const Footer = () => {
+  const toast = useToast();
+
   return (
     <footer
-      className={'w-screen bg-gray-950 min-h-96 flex flex-col justify-between'}
+      className={
+        'w-screen bg-neutral-200 dark:bg-gray-950  min-h-96 flex flex-col justify-between'
+      }
     >
       <section
         className={'footer w-full flex flex-col md:flex-row justify-center'}
       >
         <div className={'footer-col'}>
           <b>BLOG</b>
-          <div>
-            <p
-              className={
-                'text-left text-gray-100 font-serif whitespace-pre-wrap'
-              }
-            >
+          <div className={'text-weak'}>
+            <p className={'text-left font-serif whitespace-pre-wrap'}>
               a developer who never stops growing.
             </p>
-            <p
-              className={
-                'text-left text-gray-100 font-serif whitespace-pre-wrap'
-              }
-            >
+            <p className={'text-left font-serif whitespace-pre-wrap'}>
               성장을 멈추지 않는 개발자.
             </p>
           </div>
@@ -48,7 +46,7 @@ const Footer = () => {
         <div className={'footer-col'}>
           <b>Subscribe</b>
           <form className={'flex flex-col gap-4'}>
-            <p className={'text-gray-300'}>새 글을 구독해보세요</p>
+            <p className={'text-default'}>새 글을 구독해보세요</p>
             <input
               className={
                 'border-b bg-transparent px-4 py-1.5 inset-3 outline-black'
@@ -63,9 +61,13 @@ const Footer = () => {
             />
             <button
               className={
-                'rounded-md border bg-transparent py-3 w-1/2  shadow-lg hover:bg-white hover:text-black transition'
+                'rounded-md border bg-transparent py-3 w-1/2 border-black hover:shadow-lg hover:bg-white hover:text-black transition'
               }
               aria-label={'구독 버튼'}
+              onClick={(e) => {
+                e.preventDefault();
+                toast.error('새 글 구독은 아직 지원하지 않는 기능입니다.');
+              }}
             >
               Subscribe
             </button>

app/globals.css

@@ -11,6 +11,7 @@
   --text-default: #000000;
   --text-overlay: #FFFFFF;
   --bg-overlay: #1e201e;
+  --text-weak: #474b4e;
 }
 .dark {
   --background: #1e201e;
@@ -19,6 +20,7 @@
   --text-default: #FFFFFF;
   --text-overlay: #000000;
   --bg-overlay: #ededed;
+  --text-weak: rgba(255, 255, 255, 0.7);
 }
 
 
@@ -118,6 +120,11 @@ section.footer > div.footer-col b {
   font-weight: bold;
 }
 
+section.footer input {
+  background-color: white;
+  border-radius: 4px;
+}
+
 section.footer a:hover {
   border-bottom: 1px solid white;
 }

app/page.tsx

@@ -24,6 +24,10 @@ export default function Home() {
     getPosts();
   }, []);
 
+  const linkedinLink =
+    'https://www.linkedin.com/in/%EC%A0%95%EC%9A%B0-%EC%84%9C-9a0b79312/';
+  const githubLink = 'https://github.com/ShipFriend0516';
+
   return (
     <main className="w-full max-w-4xl mx-auto grid gap-16 p-8">
       {/* Hero Section */}
@@ -66,16 +70,11 @@ export default function Home() {
             학습과 성장을 추구합니다.
           </p>
           <div className="flex gap-4">
-            <a href={'https://github.com/ShipFriend0516'} target={'_blank'}>
-              <FaGithub className="w-5 h-5 text-default hover:text-gray-100 hover:scale-125 transition cursor-pointer" />
+            <a href={githubLink} target={'_blank'}>
+              <FaGithub className="w-5 h-5 text-default hover:scale-125 transition cursor-pointer" />
             </a>
-            <a
-              href={
-                'https://www.linkedin.com/in/%EC%A0%95%EC%9A%B0-%EC%84%9C-9a0b79312/'
-              }
-              target={'_blank'}
-            >
-              <FaLinkedin className="w-5 h-5 text-default hover:text-gray-100 hover:scale-125 transition cursor-pointer" />
+            <a href={linkedinLink} target={'_blank'}>
+              <FaLinkedin className="w-5 h-5 text-default hover:scale-125 transition cursor-pointer" />
             </a>
           </div>
         </div>

app/series/page.tsx

@@ -32,7 +32,7 @@ const SeriesListPage = () => {
   }
 
   return (
-    <section className={'w-full p-10'}>
+    <section className={'w-full p-10 max-w-5xl mx-auto'}>
       <h1 className={'text-4xl font-bold mt-4'}>시리즈</h1>
       <p className={'text-lg mb-4'}>시리즈별로 글을 확인해보세요.</p>
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">

tailwind.config.ts

@@ -6,13 +6,15 @@ const config: Config = {
     './components/**/*.{js,ts,jsx,tsx,mdx}',
     './app/**/*.{js,ts,jsx,tsx,mdx}',
   ],
+  darkMode: 'class',
   theme: {
     extend: {
       colors: {
         default: 'var(--text-default)',
         background: 'var(--background)',
         foreground: 'var(--foreground)',
         overlay: 'var(--bg-overlay)',
+        weak: 'var(--text-weak)',
       },
       textColor: {
         overlay: 'var(--text-overlay)',