[JR-622] 검색페이지 상단 퍼블리싱 (#123)

* fix: 오타수정 * feat: 검색 페이지 퍼블리싱 * add @emotion/is-prop-valid, react-is 패키지 설치 * feat StyleSheetManager 추가
choooz · Aug 15, 2023 · a8539fc · a8539fc
1 parent 5478085
commit a8539fc
Show file tree

Hide file tree

Showing 7 changed files with 117 additions and 11 deletions.
diff --git a/.pnp.cjs b/.pnp.cjs
diff --git a/apps/jurumarble/package.json b/apps/jurumarble/package.json
@@ -12,11 +12,13 @@
     "icon:build": "yarn gen:icon"
   },
   "dependencies": {
+    "@emotion/is-prop-valid": "^1.2.1",
     "@monorepo/hooks": "workspace:*",
     "@monorepo/ui": "workspace:*",
     "next": "13.4.12",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-is": "^18.2.0",
     "styled-components": "^6.0.7",
     "styled-reset": "^4.5.1"
   },
@@ -28,6 +30,7 @@
     "@types/eslint": "^8",
     "@types/node": "20.4.7",
     "@types/react": "18.2.18",
+    "@types/react-is": "^18",
     "@types/styled-components": "^5.1.26",
     "eslint-config-next": "13.4.12",
     "typescript": "5.1.6"

diff --git a/apps/jurumarble/src/app/search/page.tsx b/apps/jurumarble/src/app/search/page.tsx
@@ -0,0 +1,67 @@
+"use client";
+
+import BottomBar from "components/BottomBar";
+import SvgIcPrev from "src/assets/icons/components/IcPrev";
+import SvgIcX from "src/assets/icons/components/IcX";
+import styled, { css } from "styled-components";
+
+function Search() {
+  return (
+    <Container>
+      <SearchBox>
+        <SvgIcPrev width={24} height={24} />
+
+        <SearchInput placeholder="관심있는 술을 검색해보세요." />
+        <ResetIconBox>
+          <SvgIcX width={18} height={18} color="#CCCCCC" />
+        </ResetIconBox>
+      </SearchBox>
+
+      <BottomBar />
+    </Container>
+  );
+}
+
+const Container = styled.div`
+  height: 100vh;
+  overflow: hidden;
+`;
+
+const SearchBox = styled.div`
+  position: relative;
+  padding: 8px 20px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  box-shadow: 0px 16px 32px 0px rgba(235, 235, 235, 0.6);
+`;
+
+const SearchInput = styled.input`
+  flex: 1;
+  border-radius: 8px;
+  border: none;
+  padding: 12px;
+  &:focus {
+    outline: none;
+  }
+  ${({ theme }) => css`
+    ${theme.typography.body02};
+    background-color: ${theme.colors.bg_02};
+    color: ${theme.colors.black_01};
+    &::placeholder {
+      color: ${theme.colors.black_05};
+    }
+  `}
+`;
+
+const ResetIconBox = styled.div`
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+export default Search;
diff --git a/apps/jurumarble/src/components/BottomBar.tsx b/apps/jurumarble/src/components/BottomBar.tsx
@@ -6,7 +6,7 @@ import SvgIcHome from "src/assets/icons/components/IcHome";
 import SvgIcMapPin from "src/assets/icons/components/IcMapPin";
 import SvgIcMark from "src/assets/icons/components/IcMark";
 import SvgIcUser from "src/assets/icons/components/IcUser";
-import { css, styled } from "styled-components";
+import { styled } from "styled-components";
 
 const NAVIGATION_LIST = [
   {
@@ -44,9 +44,9 @@ function BottomBar() {
       <Inner>
         {NAVIGATION_LIST.map(({ icon, name, path }) => {
           // pathname이 "/" 일때 홈만 true이고, 그외일때 현재 url에 path가 포함되어 있으면 active
-          const active = pathName === "/" ? pathName === path : pathName.includes(path);
+          const isActive = pathName === "/" ? pathName === path : pathName.includes(path);
           return (
-            <BarItem key={`${name}`} active={active ? 1 : 0} onClick={() => router.push(path)}>
+            <BarItem key={`${name}`} isActive={isActive} onClick={() => router.push(path)}>
               {icon}
               <span>{name}</span>
             </BarItem>
@@ -74,15 +74,15 @@ const Inner = styled.div`
   ${({ theme }) => theme.typography.caption};
 `;
 
-const BarItem = styled.div<{ active: number }>`
+const BarItem = styled.div<{ isActive: boolean }>`
   padding: 10px 21px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 4px;
   white-space: nowrap;
-  color: ${({ active, theme }) => (active ? theme.colors.black_01 : theme.colors.black_05)};
+  color: ${({ isActive, theme }) => (isActive ? theme.colors.black_01 : theme.colors.black_05)};
 `;
 
 export default BottomBar;
diff --git a/apps/jurumarble/src/lib/styles/StyledComponents.tsx b/apps/jurumarble/src/lib/styles/StyledComponents.tsx
@@ -2,17 +2,28 @@
 
 import StyledComponentsRegistry from "lib/registory";
 import { PropsWithChildren } from "react";
-import { ThemeProvider } from "styled-components";
+import { StyleSheetManager, ThemeProvider } from "styled-components";
 import { GlobalStyles } from "./globalStyles";
 import { jurumarbleTheme } from "./theme";
+import isPropValid from "@emotion/is-prop-valid";
 
 function StyledComponents({ children }: PropsWithChildren) {
   return (
     <StyledComponentsRegistry>
-      <ThemeProvider theme={jurumarbleTheme}>
-        <GlobalStyles />
-        {children}
-      </ThemeProvider>
+      {/*
+         @NOTE : 참고 https://styled-components.com/docs/api#stylesheetmanagers
+         porps를 전달할 때 isPropValid를 사용하여 styled-components에서 지원하지 않는 props를 제거한다.
+      */}
+      <StyleSheetManager
+        shouldForwardProp={(propName, elementToBeRendered) => {
+          return typeof elementToBeRendered === "string" ? isPropValid(propName) : true;
+        }}
+      >
+        <ThemeProvider theme={jurumarbleTheme}>
+          <GlobalStyles />
+          {children}
+        </ThemeProvider>
+      </StyleSheetManager>
     </StyledComponentsRegistry>
   );
 }

diff --git a/apps/jurumarble/src/lib/styles/theme.ts b/apps/jurumarble/src/lib/styles/theme.ts
@@ -82,7 +82,7 @@ const typography = {
     font-size: 16px;
     font-style: normal;
     font-weight: 400;
-    line-height: 130%
+    line-height: 130%;
     letter-spacing: -0.16px;
     `,
   body03: `

diff --git a/yarn.lock b/yarn.lock
@@ -3234,6 +3234,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@monorepo/jurumarble@workspace:apps/jurumarble"
   dependencies:
+    "@emotion/is-prop-valid": ^1.2.1
     "@monorepo/hooks": "workspace:*"
     "@monorepo/ui": "workspace:*"
     "@svgr/cli": ^8.0.1
@@ -3243,11 +3244,13 @@ __metadata:
     "@types/eslint": ^8
     "@types/node": 20.4.7
     "@types/react": 18.2.18
+    "@types/react-is": ^18
     "@types/styled-components": ^5.1.26
     eslint-config-next: 13.4.12
     next: 13.4.12
     react: 18.2.0
     react-dom: 18.2.0
+    react-is: ^18.2.0
     styled-components: ^6.0.7
     styled-reset: ^4.5.1
     typescript: 5.1.6
@@ -4198,6 +4201,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/react-is@npm:^18":
+  version: 18.2.1
+  resolution: "@types/react-is@npm:18.2.1"
+  dependencies:
+    "@types/react": "*"
+  checksum: b44c3262efa2c68fa6fe2beb9ef86170b18305469461a3f97aa14943cc033cb21a26944f718bdb6434eea6e8f7fcba251c4f45b65b897a3fcf751b5a6003cf82
+  languageName: node
+  linkType: hard
+
 "@types/react-slick@npm:^0":
   version: 0.23.10
   resolution: "@types/react-slick@npm:0.23.10"