Merge pull request #74 from ai-surfers/develop

24.12.28

src/components/Header/GuideButton/GuideButton.tsx

@@ -0,0 +1,27 @@
+import Button from "@/components/common/Button/Button";
+import Icon from "@/components/common/Icon";
+import Text from "@/components/common/Text/Text";
+
+const GuideButton = () => {
+    const handleOnGuide = () => {
+        window.open(
+            "https://pocket-prompt.notion.site/da477857a0cc44888b06dd23cf6682ff",
+            "_blank"
+        );
+    };
+    return (
+        <Button
+            onClick={handleOnGuide}
+            size={36}
+            hierarchy="normal"
+            style={{ padding: "8px 8px 8px 12px" }}
+        >
+            <Text font="b3_14_semi " color="primary">
+                Guide
+            </Text>
+            <Icon name="Book" />
+        </Button>
+    );
+};
+
+export default GuideButton;

src/components/Header/Header.tsx

@@ -14,6 +14,9 @@ import {
 import { MenuOutlined } from "@ant-design/icons";
 import { Menus } from "@/core/Menu";
 import useDeviceSize from "@/hooks/useDeviceSize";
+import { Flex } from "antd";
+import LogoutButton from "./LogoutButton/LogoutButton";
+import GuideButton from "./GuideButton/GuideButton";
 
 type HeaderProps = {
     onOpen: () => void;
@@ -66,9 +69,16 @@ export default function Header({ onOpen }: HeaderProps) {
                     {isUnderTablet ? (
                         <StyledMenuIcon onClick={onOpen} />
                     ) : userData.isLogin ? (
-                        <User />
+                        <Flex gap={16}>
+                            <GuideButton />
+                            <User />
+                            <LogoutButton isUnderTablet={false} />
+                        </Flex>
                     ) : (
-                        <LoginButton />
+                        <Flex gap={16}>
+                            <GuideButton />
+                            <LoginButton isUnderTablet={false} />
+                        </Flex>
                     )}
                 </HeaderRightContainer>
             </HeaderWrapper>
@@ -97,7 +107,7 @@ const HeaderContainer = styled.header`
 const HeaderWrapper = styled.div`
     width: 100%;
     height: 100%;
-    max-width: 1080px;
+    max-width: 1440px;
     margin: 0 auto;
     padding: 0 20px;
 

src/components/Header/LoginButton/LoginButton.tsx

@@ -1,5 +1,6 @@
 import { getUser, login } from "@/apis/auth/auth";
 import { auth, PROVIDER } from "@/apis/firebase";
+import Button from "@/components/common/Button/Button";
 import Text from "@/components/common/Text/Text";
 import { useUser } from "@/hooks/useUser";
 import {
@@ -8,9 +9,12 @@ import {
     setLocalStorage,
 } from "@/utils/storageUtils";
 import { GoogleAuthProvider, signInWithPopup } from "firebase/auth";
-import styled from "styled-components";
 
-export default function LoginButton() {
+interface LoginButtonProps {
+    isUnderTablet: boolean;
+}
+
+export default function LoginButton({ isUnderTablet }: LoginButtonProps) {
     const { setUser, setAccessToken, resetUserState } = useUser();
 
     async function handleLogin() {
@@ -54,20 +58,15 @@ export default function LoginButton() {
     }
 
     return (
-        <Button onClick={handleLogin}>
+        <Button
+            onClick={handleLogin}
+            size={isUnderTablet ? 44 : 36}
+            width={isUnderTablet ? "100%" : "auto"}
+            style={{ justifyContent: "center" }}
+        >
             <Text font="b2_16_semi" color="white">
                 로그인
             </Text>
         </Button>
     );
 }
-
-const Button = styled.div`
-    border-radius: 12px;
-    padding: 10px 12px;
-
-    background: ${({ theme }) => theme.colors.primary};
-    ${({ theme }) => theme.mixins.flexBox()}
-
-    cursor: pointer;
-`;

src/components/Header/LogoutButton/LogoutButton.tsx

@@ -0,0 +1,37 @@
+import Button from "@/components/common/Button/Button";
+import { useUser } from "@/hooks/useUser";
+import { LOCALSTORAGE_KEYS, removeLocalStorage } from "@/utils/storageUtils";
+import Text from "@/components/common/Text/Text";
+import { useNavigate } from "react-router-dom";
+
+interface LogoutButtonProps {
+    isUnderTablet: boolean;
+}
+
+const LogoutButton = ({ isUnderTablet }: LogoutButtonProps) => {
+    const { resetUserState } = useUser();
+    const navigate = useNavigate();
+
+    function handleLogout() {
+        removeLocalStorage(LOCALSTORAGE_KEYS.ACCESS_TOKEN);
+        resetUserState();
+        navigate("/", { replace: true });
+    }
+    return (
+        <Button
+            hierarchy="default"
+            size={isUnderTablet ? 44 : 36}
+            style={{ justifyContent: "center" }}
+            onClick={handleLogout}
+        >
+            <Text
+                font={isUnderTablet ? "b3_14_med" : "b3_14_semi"}
+                color="G_400"
+            >
+                로그아웃
+            </Text>
+        </Button>
+    );
+};
+
+export default LogoutButton;

src/components/Header/User/User.tsx

@@ -1,54 +1,36 @@
-import Button from "@/components/common/Button/Button";
 import { useUser } from "@/hooks/useUser";
 import { useNavigate } from "react-router-dom";
 import styled from "styled-components";
-import { LOCALSTORAGE_KEYS, removeLocalStorage } from "@/utils/storageUtils";
 import Text from "@/components/common/Text/Text";
+import Icon from "@/components/common/Icon";
 
 export default function User() {
-    const { userData, resetUserState } = useUser();
+    const { userData } = useUser();
     const navigate = useNavigate();
 
-    function handleLogout() {
-        removeLocalStorage(LOCALSTORAGE_KEYS.ACCESS_TOKEN);
-        resetUserState();
-        navigate("/", { replace: true });
-    }
-
     return (
-        <UserContainer onClick={() => navigate("/my")}>
-            <UserImage src={userData.user?.picture} />
-            <UserNickname>{userData.user?.nickname}</UserNickname>
-            <Button
-                hierarchy="default"
-                size={36}
-                style={{ justifyContent: "center" }}
-                onClick={handleLogout}
-            >
-                <Text font="b3_14_semi" color="G_400">
-                    로그아웃
+        <Wrapper onClick={() => navigate("/my")}>
+            <UserWrapper>
+                <Text font="b3_14_reg" color="G_800">
+                    {userData.user?.nickname}
                 </Text>
-            </Button>
-        </UserContainer>
+                <Icon name="User" color="G_800" />
+            </UserWrapper>
+        </Wrapper>
     );
 }
 
-const UserContainer = styled.div`
+const Wrapper = styled.div`
     ${({ theme }) => theme.mixins.flexBox()};
     gap: 10px;
 
     cursor: pointer;
 `;
 
-const UserImage = styled.img`
-    width: 24px;
-    height: 24px;
-    border-radius: 50%;
-`;
-
-const UserNickname = styled.div`
-    ${({ theme }) => theme.fonts.body3};
-    ${({ theme }) => theme.fonts.regular};
-
-    color: ${({ theme }) => theme.colors.black};
+const UserWrapper = styled.div`
+    ${({ theme }) => theme.mixins.flexBox()};
+    padding: 8px 8px 8px 12px;
+    gap: 10px;
+    background-color: #f1f2f6;
+    border-radius: 8px;
 `;

src/components/Sidebar/Sidebar.tsx

@@ -5,15 +5,25 @@ import GuideItem from "@/components/Sidebar/Item/GuideItem";
 import MenuItem from "@/components/Sidebar/Item/MenuItem";
 import { Menus } from "@/core/Menu";
 import { useUser } from "@/hooks/useUser";
-import { Drawer } from "antd";
+import { Drawer, Flex } from "antd";
 import styled from "styled-components";
+import Icon from "../common/Icon";
+import Text from "../common/Text/Text";
+import LogoutButton from "../Header/LogoutButton/LogoutButton";
+import { useNavigate } from "react-router-dom";
 
 type SidebarProps = {
     open: boolean;
     onClose: () => void;
 };
 export default function Sidebar({ open, onClose }: SidebarProps) {
     const { userData } = useUser();
+    const navigate = useNavigate();
+
+    const handleClickUser = () => {
+        navigate("my");
+        onClose();
+    };
 
     return (
         <StyledDrawer
@@ -30,9 +40,23 @@ export default function Sidebar({ open, onClose }: SidebarProps) {
             </HeaderContainer>
 
             <BodyContainer>
-                {!userData.isLogin && (
+                {userData.isLogin ? (
+                    <Flex
+                        flex={1}
+                        gap={12}
+                        style={{ padding: "12px", width: "100%" }}
+                    >
+                        <UserWrapper onClick={handleClickUser}>
+                            <Icon name="User" color="G_800" />
+                            <Text font="b2_16_med">
+                                {userData.user?.nickname}
+                            </Text>
+                        </UserWrapper>
+                        <LogoutButton isUnderTablet={true} />
+                    </Flex>
+                ) : (
                     <div style={{ margin: "12px 20px" }}>
-                        <LoginButton />
+                        <LoginButton isUnderTablet={true} />
                     </div>
                 )}
 
@@ -48,8 +72,7 @@ export default function Sidebar({ open, onClose }: SidebarProps) {
 const StyledDrawer = styled(Drawer)`
     .ant-drawer-body {
         padding: 0;
-        background: rgba(255, 255, 255, 0.9);
-        backdrop-filter: blur(40px);
+        background: white;
     }
 `;
 
@@ -59,9 +82,7 @@ const HeaderContainer = styled.header`
     height: 52px;
     padding: 4px 20px;
 
-    background: rgba(255, 255, 255, 0.6);
-    backdrop-filter: blur(40px);
-    box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.02);
+    background: white;
 
     position: sticky;
     top: 0;
@@ -75,3 +96,14 @@ const BodyContainer = styled.div`
     height: 100%;
     padding: 12px 0;
 `;
+
+const UserWrapper = styled.div`
+    ${({ theme }) => theme.mixins.flexBox()};
+    padding: 8px 12px 8px 16px;
+    gap: 10px;
+    background-color: var(--gray-100, #f1f2f6);
+    border-radius: 8px;
+    cursor: pointer;
+    flex: 8;
+    justify-content: flex-start;
+`;