Merge pull request #33 from Qfeed-Dev/feature/#32

[Feat] Text 깨짐 및 Bottom navigation
Qfeed-Dev · Sep 1, 2023 · 51a0c79 · 51a0c79
2 parents b0ede98 + 71ff039
commit 51a0c79
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 26 deletions.
diff --git a/src/components/BottomNavigation/BottomNavigation.tsx b/src/components/BottomNavigation/BottomNavigation.tsx
@@ -4,6 +4,7 @@ import { colors } from "styles/theme";
 import { Route } from "src/constants/Route";
 import styled from "styled-components";
 import Icon from "../Icon";
+import Flex from "../common/Flex";
 
 interface Props {}
 
@@ -14,42 +15,54 @@ const BottomNavigation = ({}: Props) => {
     return (
         <BottomNavigationWrapper>
             <BottomNavigationInner>
-                <Icon
-                    icon="BHome"
-                    width={24}
-                    height={24}
+                <NavIconWrapper
                     onClick={() => {
                         router.push(Route.HOME());
                     }}
-                    selected={pathname === "/"}
-                />
-                <Icon
-                    icon="BChat"
-                    width={24}
-                    height={24}
+                >
+                    <Icon
+                        icon="BHome"
+                        width={24}
+                        height={24}
+                        selected={pathname === "/"}
+                    />
+                </NavIconWrapper>
+                <NavIconWrapper
                     onClick={() => {
                         router.push(Route.CHAT());
                     }}
-                    selected={Boolean(pathname.match("/((chat).*)"))}
-                />
-                <Icon
-                    icon="BSearch"
-                    width={24}
-                    height={24}
+                >
+                    <Icon
+                        icon="BChat"
+                        width={24}
+                        height={24}
+                        selected={Boolean(pathname.match("/((chat).*)"))}
+                    />
+                </NavIconWrapper>
+                <NavIconWrapper
                     onClick={() => {
                         router.push(Route.FRIEND());
                     }}
-                    selected={Boolean(pathname.match("/((friend).*)"))}
-                />
-                <Icon
-                    icon="BMypage"
-                    width={24}
-                    height={24}
+                >
+                    <Icon
+                        icon="BSearch"
+                        width={24}
+                        height={24}
+                        selected={Boolean(pathname.match("/((friend).*)"))}
+                    />
+                </NavIconWrapper>
+                <NavIconWrapper
                     onClick={() => {
                         router.push(Route.MYPAGE());
                     }}
-                    selected={Boolean(pathname.match("/((mypage).*)"))}
-                />
+                >
+                    <Icon
+                        icon="BMypage"
+                        width={24}
+                        height={24}
+                        selected={Boolean(pathname.match("/((mypage).*)"))}
+                    />
+                </NavIconWrapper>
             </BottomNavigationInner>
         </BottomNavigationWrapper>
     );
@@ -68,7 +81,7 @@ const BottomNavigationWrapper = styled.div`
 
 const BottomNavigationInner = styled.div`
     height: 100%;
-    padding: 0 48px;
+    padding: 0 1rem;
 
     color: ${colors.light_qwhite};
 
@@ -79,4 +92,6 @@ const BottomNavigationInner = styled.div`
     border-top: 1px solid ${colors.light_qwhite};
 `;
 
+const NavIconWrapper = styled(Flex)``;
+
 export default BottomNavigation;
diff --git a/src/components/common/Text.tsx b/src/components/common/Text.tsx
@@ -9,7 +9,6 @@ export const Text = styled.div<{
     color: ${({ color }) => color && theme.colors[color]};
     pointer-events: none;
     white-space: pre-line;
-    word-break: keep-all;
 `;
 
 export default Text;