feat: 다크모드 추가

Author: zooneon

src/components/PostList.js

@@ -1,6 +1,11 @@
 import React from 'react';
 import { Link } from 'gatsby';
 import styled from 'styled-components';
+import {
+  cardBackgroundColor,
+  cardBorderColor,
+  textColor,
+} from '../utils/theme';
 
 const PostListContainer = styled.div`
   display: flex;
@@ -9,14 +14,18 @@ const PostListContainer = styled.div`
 `;
 
 const PostItem = styled.article`
-  border: 1px solid #eee;
+  border: 1px solid ${cardBorderColor};
   border-radius: 8px;
   padding: 2rem;
   transition: all 0.2s ease;
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03);
+  background-color: ${cardBackgroundColor};
 
   &:hover {
-    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.07);
+    box-shadow: ${(props) =>
+      props.theme.mode === 'light'
+        ? '0 5px 15px rgba(0, 0, 0, 0.07)'
+        : '0 5px 15px rgba(255, 255, 255, 0.07)'};
     transform: translateY(-3px);
   }
 `;
@@ -27,12 +36,13 @@ const PostTitle = styled.h2`
   line-height: 1.4;
 
   a {
-    color: #333;
+    color: ${(props) => (props.theme.mode === 'light' ? '#333' : '#f0f0f0')};
     text-decoration: none;
     transition: color 0.2s ease;
 
     &:hover {
-      color: #3498db;
+      color: ${(props) =>
+        props.theme.mode === 'light' ? '#3498db' : '#64b5f6'};
     }
   }
 `;
@@ -42,7 +52,7 @@ const PostMeta = styled.div`
   align-items: center;
   margin-bottom: 1.5rem;
   font-size: 0.95rem;
-  color: #777;
+  color: ${(props) => (props.theme.mode === 'light' ? '#777' : '#d0d0d0')};
 `;
 
 const PostDate = styled.time`
@@ -66,36 +76,38 @@ const PostTags = styled.div`
 const PostTag = styled(Link)`
   font-size: 0.85rem;
   padding: 0.2rem 0.6rem;
-  background-color: #f5f5f5;
-  color: #666;
+  background-color: ${(props) =>
+    props.theme.mode === 'light' ? '#f5f5f5' : '#444'};
+  color: ${(props) => (props.theme.mode === 'light' ? '#666' : '#e0e0e0')};
   border-radius: 3px;
   text-decoration: none;
   transition: all 0.2s ease;
 
   &:hover {
-    background-color: #3498db;
+    background-color: ${(props) =>
+      props.theme.mode === 'light' ? '#3498db' : '#64b5f6'};
     color: white;
   }
 `;
 
 const PostExcerpt = styled.p`
   margin: 0;
-  color: #555;
+  color: ${(props) => (props.theme.mode === 'light' ? '#555' : '#d0d0d0')};
   line-height: 1.6;
   font-size: 1.1rem;
 `;
 
 const ReadMore = styled(Link)`
   display: inline-block;
   margin-top: 1.2rem;
-  color: #3498db;
+  color: ${(props) => (props.theme.mode === 'light' ? '#3498db' : '#64b5f6')};
   text-decoration: none;
   font-weight: 500;
   font-size: 0.95rem;
   transition: all 0.2s ease;
 
   &:hover {
-    color: #2980b9;
+    color: ${(props) => (props.theme.mode === 'light' ? '#2980b9' : '#90caf9')};
     text-decoration: underline;
   }
 

src/components/ThemeToggle.js

@@ -0,0 +1,72 @@
+import React, { useContext } from 'react';
+import styled from 'styled-components';
+import { ThemeContext } from '../context/ThemeContext';
+
+const ToggleContainer = styled.button`
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  padding: 8px;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  transition: all 0.3s ease;
+
+  &:hover {
+    background: ${(props) =>
+      props.theme.mode === 'light'
+        ? 'rgba(0, 0, 0, 0.05)'
+        : 'rgba(255, 255, 255, 0.1)'};
+  }
+
+  &:focus {
+    outline: none;
+  }
+`;
+
+const IconSVG = styled.svg`
+  width: 20px;
+  height: 20px;
+  fill: none;
+  stroke: ${(props) => (props.theme.mode === 'light' ? '#555' : '#eee')};
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  transition: all 0.3s ease;
+`;
+
+const ThemeToggle = () => {
+  const { mode, toggleTheme } = useContext(ThemeContext);
+
+  return (
+    <ToggleContainer
+      onClick={toggleTheme}
+      aria-label={`${mode === 'light' ? '다크모드로 전환' : '라이트모드로 전환'}`}
+      title={`${mode === 'light' ? '다크모드로 전환' : '라이트모드로 전환'}`}
+    >
+      {mode === 'light' ? (
+        <IconSVG viewBox="0 0 24 24">
+          <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
+        </IconSVG>
+      ) : (
+        <IconSVG viewBox="0 0 24 24">
+          <circle cx="12" cy="12" r="5" />
+          <line x1="12" y1="1" x2="12" y2="3" />
+          <line x1="12" y1="21" x2="12" y2="23" />
+          <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
+          <line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
+          <line x1="1" y1="12" x2="3" y2="12" />
+          <line x1="21" y1="12" x2="23" y2="12" />
+          <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
+          <line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
+        </IconSVG>
+      )}
+    </ToggleContainer>
+  );
+};
+
+export default ThemeToggle;

src/components/bio.js

@@ -50,10 +50,22 @@ const TagLine = styled.sub`
   display: block;
 `;
 
+const SocialIconWrapper = styled.a`
+  display: inline-block;
+  transition: all 0.3s ease;
+
+  &:hover {
+    transform: translateY(-3px);
+  }
+`;
+
 const SocialIcon = styled.img`
   height: 2.5rem;
   width: 2.5rem;
   padding: 1.5rem 1rem;
+  filter: ${(props) =>
+    props.theme.mode === 'dark' ? 'brightness(1.8)' : 'none'};
+  transition: all 0.3s ease;
 `;
 
 const Bio = () => (
@@ -66,27 +78,30 @@ const Bio = () => (
           <TextContainer>
             <Name>{author}</Name>
             <TagLine>{authorTagline}</TagLine>
-            <a
+            <SocialIconWrapper
               href={`https://github.com/${social.github}`}
               target="_blank"
               rel="noopener noreferrer"
+              aria-label="GitHub 프로필"
             >
               <SocialIcon src={github} alt="github" />
-            </a>
-            <a
+            </SocialIconWrapper>
+            <SocialIconWrapper
               href={`https://www.linkedin.com/in/${social.linkedin}`}
               target="_blank"
               rel="noopener noreferrer"
+              aria-label="LinkedIn 프로필"
             >
               <SocialIcon src={linkedin} alt="linkedin" />
-            </a>
-            <a
+            </SocialIconWrapper>
+            <SocialIconWrapper
               href={`mailto:${social.mail}`}
               target="_blank"
               rel="noopener noreferrer"
+              aria-label="이메일 보내기"
             >
               <SocialIcon src={mail} alt="mail" />
-            </a>
+            </SocialIconWrapper>
           </TextContainer>
           <ImageContainer>
             <Image fixed={data.avatar.childImageSharp.fixed} alt={author} />

src/components/header.js

@@ -4,6 +4,8 @@ import styled from 'styled-components';
 
 import StyledLink from '../utils/styled-link';
 import media from '../utils/media';
+import ThemeToggle from './ThemeToggle';
+import { headerBackgroundColor } from '../utils/theme';
 
 const Container = styled.nav`
   box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.05);
@@ -14,26 +16,44 @@ const Container = styled.nav`
   position: sticky;
   top: 0;
   z-index: 1000;
-  background-color: white;
-  transition: box-shadow 0.3s ease;
+  background-color: ${headerBackgroundColor};
+  transition: all 0.3s ease;
 
   &.scrolled {
     box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.1);
   }
 `;
 
+const HeaderContent = styled.div`
+  display: flex;
+  align-items: center;
+  width: 100%;
+  max-width: 1300px;
+  padding: 0 2rem;
+  position: relative;
+  justify-content: center;
+`;
+
 const Title = styled.h1`
   font-size: 1.6rem;
   font-weight: 800;
   letter-spacing: 0.1rem;
   text-transform: uppercase;
   margin: 0;
+  text-align: center;
 
   ${media.phone`
-    text-align: center;
+    font-size: 1.4rem;
   `}
 `;
 
+const ThemeToggleWrapper = styled.div`
+  position: absolute;
+  right: 2rem;
+  top: 50%;
+  transform: translateY(-50%);
+`;
+
 const Header = ({ title }) => {
   const [scrolled, setScrolled] = React.useState(false);
 
@@ -54,9 +74,14 @@ const Header = ({ title }) => {
 
   return (
     <Container className={scrolled ? 'scrolled' : ''}>
-      <StyledLink to={'/'}>
-        <Title>{title}</Title>
-      </StyledLink>
+      <HeaderContent>
+        <StyledLink to={'/'}>
+          <Title>{title}</Title>
+        </StyledLink>
+        <ThemeToggleWrapper>
+          <ThemeToggle />
+        </ThemeToggleWrapper>
+      </HeaderContent>
     </Container>
   );
 };