[🎀 : style] 사이드 메뉴 + 홈 스타일링

- 공통 컴포넌트 관리 및 스타일 개편
- styles 레포 정리

src/App.tsx

@@ -7,7 +7,7 @@ import Profile from './routes/profile.tsx';
 import Auth from './routes/auth.tsx';
 import Layout from './components/layout.tsx';
 import LoadingScreen from './components/loading-screen.tsx';
-import * as S from './styles/App.ts';
+import * as S from './styles/app.ts';
 
 const router = createBrowserRouter([
   {
@@ -44,10 +44,10 @@ function App() {
     init();
   }, []);
   return (
-    <S.Wrapper>
+    <>
       <S.GlobalStyles />
       {isLoading ? <LoadingScreen /> : <RouterProvider router={router} />}
-    </S.Wrapper>
+    </>
   );
 }
 

src/components/layout.tsx

@@ -1,12 +1,14 @@
 import { Outlet } from 'react-router-dom';
+import Wrapper from '../styles/layout.ts';
 import Menu from './menu.tsx';
-import { Wrapper } from '../styles/layout.ts';
+import Search from './search.tsx';
 
 export default function Layout() {
   return (
     <Wrapper>
       <Menu />
       <Outlet />
+      <Search />
     </Wrapper>
   );
 }

src/components/menu.tsx

@@ -1,35 +1,77 @@
 import { Link, useNavigate } from 'react-router-dom';
+import { useEffect, useState } from 'react';
 import { auth } from '../firebase.ts';
-import * as S from '../styles/components/menu.ts';
+import WindowTop from './window-top.tsx';
+import * as W from '../styles/window.ts';
+import * as S from '../styles/menu.ts';
+import * as P from '../styles/popup.ts';
+import ImageComputer from '../assets/images/logo-small.png';
 import { ReactComponent as IconUser } from '../assets/images/i-user.svg';
 import { ReactComponent as IconHome } from '../assets/images/i-home.svg';
 import { ReactComponent as IconLogout } from '../assets/images/i-arrowleft.svg';
 
 export default function Menu() {
   const navigate = useNavigate();
+  const [logoutPopup, setLogoutPopup] = useState(false);
+  const toggleLogoutPopup = () => {
+    setLogoutPopup(!logoutPopup);
+  };
+  useEffect(() => {
+    const handleEscKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        setLogoutPopup(false);
+      }
+    };
+    document.addEventListener('keydown', handleEscKey);
+    return () => {
+      document.removeEventListener('keydown', handleEscKey);
+    };
+  }, [logoutPopup]);
   const onLogout = async () => {
-    // eslint-disable-next-line no-restricted-globals
-    const ok = confirm('로그아웃 하시겠습니까?');
-    if (ok) {
-      await auth.signOut();
-      navigate('/auth');
-    }
+    await auth.signOut();
+    navigate('/auth');
   };
   return (
-    <S.MenuList>
-      <S.MenuItem>
-        <Link to="/profile">
-          <IconUser />
-        </Link>
-      </S.MenuItem>
-      <S.MenuItem>
-        <Link to="/">
-          <IconHome />
-        </Link>
-      </S.MenuItem>
-      <S.MenuItem onClick={onLogout} className="log-out">
-        <IconLogout />
-      </S.MenuItem>
-    </S.MenuList>
+    <W.Window as="nav">
+      <WindowTop />
+      <S.Logo>
+        <S.LogoTitle>
+          <span>Z</span>witter
+        </S.LogoTitle>
+        <S.LogoImage src={ImageComputer}></S.LogoImage>
+      </S.Logo>
+      <S.MenuList>
+        <S.MenuItem>
+          <Link to="/">
+            <IconHome /> 홈
+          </Link>
+        </S.MenuItem>
+        <S.MenuItem>
+          <Link to="/profile">
+            <IconUser /> 프로필
+          </Link>
+        </S.MenuItem>
+        <S.MenuItem>
+          <S.Button onClick={toggleLogoutPopup}>
+            <IconLogout /> 로그아웃
+          </S.Button>
+        </S.MenuItem>
+        {logoutPopup ? (
+          <P.PopupWrapper>
+            <P.MiniPopup>
+              <P.Text>로그아웃 하시겠습니까?</P.Text>
+              <P.ButtonWrapper>
+                <P.Button onClick={onLogout} type="button">
+                  예
+                </P.Button>
+                <P.Button onClick={toggleLogoutPopup} type="button">
+                  아니요
+                </P.Button>
+              </P.ButtonWrapper>
+            </P.MiniPopup>
+          </P.PopupWrapper>
+        ) : null}
+      </S.MenuList>
+    </W.Window>
   );
 }

src/components/post-tweet-form.tsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import { addDoc, collection, updateDoc } from 'firebase/firestore';
 import { getDownloadURL, ref, uploadBytes } from 'firebase/storage';
 import { auth, db, storage } from '../firebase.ts';
-import * as S from '../styles/components/post-tweet-form.ts';
+import * as S from '../styles/post-tweet-form.ts';
 import { ReactComponent as IconPhoto } from '../assets/images/i-photo.svg';
 
 export default function PostTweetForm() {

src/components/search.tsx

@@ -0,0 +1,33 @@
+import React, { useState } from 'react';
+import WindowTop from './window-top.tsx';
+import * as W from '../styles/window.ts';
+import * as S from '../styles/search.ts';
+import LoadingScreen from './loading-screen.tsx';
+
+export default function Search() {
+  const [error, setError] = useState('');
+  const [isLoading, setLoading] = useState(false);
+  const [searchKeyword, setSearchKeyword] = useState('');
+  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setSearchKeyword(e.target.value);
+  };
+  return isLoading ? (
+    <LoadingScreen />
+  ) : (
+    <W.Window>
+      <WindowTop />
+      <S.Form>
+        <S.FormInput
+          onChange={onChange}
+          name="searchKeyword"
+          value={searchKeyword}
+          placeholder="검색하기"
+          type="text"
+          required
+        ></S.FormInput>
+        <button type="submit">검색</button>
+        {error ? <p>{error}</p> : null}
+      </S.Form>
+    </W.Window>
+  );
+}

src/components/timeline.tsx

@@ -9,7 +9,7 @@ import {
 import { Unsubscribe } from 'firebase/auth';
 import { db } from '../firebase.ts';
 import Tweet from './tweet.tsx';
-import * as S from '../styles/layout.ts';
+import TimelineWrapper from '../styles/timeline.ts';
 import ITweet from '../interfaces/ITweet.ts';
 
 export default function Timeline() {
@@ -45,10 +45,10 @@ export default function Timeline() {
     };
   }, []);
   return (
-    <S.TimeLineWrapper>
+    <TimelineWrapper>
       {tweets.map((tweet) => (
         <Tweet key={tweet.id} {...tweet} />
       ))}
-    </S.TimeLineWrapper>
+    </TimelineWrapper>
   );
 }

src/components/tweet.tsx

@@ -3,7 +3,7 @@ import { deleteObject, ref } from 'firebase/storage';
 import { auth, db, storage } from '../firebase.ts';
 import ITweet from '../interfaces/ITweet.ts';
 import FormattedDate from '../utils/formattedDate.tsx';
-import * as S from '../styles/components/tweet.ts';
+import * as S from '../styles/tweet.ts';
 
 export default function Tweet({
   id,

src/components/user-timeline.tsx

@@ -9,7 +9,7 @@ import {
 } from 'firebase/firestore';
 import { auth, db } from '../firebase.ts';
 import Tweet from './tweet.tsx';
-import * as S from '../styles/layout.ts';
+import TimelineWrapper from '../styles/timeline.ts';
 import ITweet from '../interfaces/ITweet.ts';
 
 export default function UserTimeline() {
@@ -40,10 +40,10 @@ export default function UserTimeline() {
     fetchTweets();
   }, []);
   return (
-    <S.UserTimeLineWrapper>
+    <TimelineWrapper>
       {tweets.map((tweet) => (
         <Tweet key={tweet.id} {...tweet} />
       ))}
-    </S.UserTimeLineWrapper>
+    </TimelineWrapper>
   );
 }

src/components/window-top.tsx

@@ -0,0 +1,16 @@
+import * as W from '../styles/window.ts';
+import { ReactComponent as IconWindow1 } from '../assets/images/i-window1.svg';
+import { ReactComponent as IconWindow2 } from '../assets/images/i-window2.svg';
+import { ReactComponent as IconWindow3 } from '../assets/images/i-window3.svg';
+
+export default function WindowTop() {
+  return (
+    <W.TopBar>
+      <W.IconWrapper>
+        <IconWindow1 />
+        <IconWindow2 />
+        <IconWindow3 />
+      </W.IconWrapper>
+    </W.TopBar>
+  );
+}

src/routes/home.tsx

@@ -1,12 +1,14 @@
+import WindowTop from '../components/window-top.tsx';
 import PostTweetForm from '../components/post-tweet-form.tsx';
 import Timeline from '../components/timeline.tsx';
-import * as S from '../styles/layout.ts';
+import * as W from '../styles/window.ts';
 
 export default function Home() {
   return (
-    <S.HomeCenterWrapper>
+    <W.Window>
+      <WindowTop />
       <PostTweetForm />
       <Timeline />
-    </S.HomeCenterWrapper>
+    </W.Window>
   );
 }

src/routes/profile.tsx

@@ -2,7 +2,9 @@ import React, { useState } from 'react';
 import { getDownloadURL, ref, uploadBytes } from 'firebase/storage';
 import { updateProfile } from 'firebase/auth';
 import { auth, storage } from '../firebase.ts';
+import WindowTop from '../components/window-top.tsx';
 import UserTimeline from '../components/user-timeline.tsx';
+import * as W from '../styles/window.ts';
 import * as S from '../styles/profile.ts';
 import { ReactComponent as IconUser } from '../assets/images/i-user.svg';
 
@@ -24,18 +26,21 @@ export default function Profile() {
     }
   };
   return (
-    <S.Wrapper>
-      <S.AvatarUpload htmlFor="avatar">
-        {avatar ? <S.AvatarImage src={avatar} /> : <IconUser />}
-      </S.AvatarUpload>
-      <S.AvatarInput
-        onChange={onAvatarChange}
-        id="avatar"
-        type="file"
-        accept="image/*"
-      />
-      <S.Name>{user?.displayName ?? 'Anonymous'}</S.Name>
+    <W.Window>
+      <WindowTop />
+      <S.Avatar>
+        <S.AvatarUpload htmlFor="avatar">
+          {avatar ? <S.AvatarImage src={avatar} /> : <IconUser />}
+        </S.AvatarUpload>
+        <S.AvatarInput
+          onChange={onAvatarChange}
+          id="avatar"
+          type="file"
+          accept="image/*"
+        />
+        <S.Name>{user?.displayName ?? 'Anonymous'}</S.Name>
+      </S.Avatar>
       <UserTimeline />
-    </S.Wrapper>
+    </W.Window>
   );
 }

src/routes/search-result.tsx

@@ -0,0 +1,3 @@
+export default function SearchResult() {
+  return null;
+}

src/styles/App.ts

@@ -1,16 +1,13 @@
-import { createGlobalStyle, styled } from 'styled-components';
+import { createGlobalStyle } from 'styled-components';
 import reset from 'styled-reset';
 
 export const primaryColor = '#FF7AB2';
 export const grayColor = '#A7A7A7';
 export const blackColor = '#070707';
 export const whiteColor = '#FAFAFA';
 
-export const Wrapper = styled.div`
-  display: flex;
-  justify-content: center;
-  height: 100vh;
-`;
+export const LogoTextShadow = (offset: number) =>
+  `${-offset}px 0px ${blackColor}, 0px ${offset}px ${blackColor}, ${offset}px 0px ${blackColor}, 0px ${-offset}px ${blackColor}`;
 
 export const GlobalStyles = createGlobalStyle`
   ${reset};
@@ -34,6 +31,7 @@ export const GlobalStyles = createGlobalStyle`
   }
   button {
     cursor: pointer;
+    transition: all 0.5s ease;
     &:hover,
     &:active {
       opacity: 0.8;

src/styles/auth.ts

@@ -1,5 +1,5 @@
 import { styled } from 'styled-components';
-import { blackColor, primaryColor, whiteColor } from './App.ts';
+import { LogoTextShadow, blackColor, primaryColor, whiteColor } from './app.ts';
 import { LineButton, SolidButton, Input } from './button.ts';
 
 export const Wrapper = styled.div`
@@ -28,11 +28,7 @@ export const Image = styled.img`
 export const Intro = styled.h2`
   font-size: 64px;
   color: ${whiteColor};
-  text-shadow:
-    -3px 0px ${blackColor},
-    0px 3px ${blackColor},
-    3px 0px ${blackColor},
-    0px -3px ${blackColor};
+  text-shadow: ${LogoTextShadow(3)};
   span {
     color: ${primaryColor};
   }

src/styles/button.ts

@@ -1,5 +1,5 @@
 import { styled } from 'styled-components';
-import { blackColor, grayColor, primaryColor, whiteColor } from './App.ts';
+import { blackColor, grayColor, primaryColor, whiteColor } from './app.ts';
 
 const Button = styled.button`
   width: 100%;