diff --git a/src/components/header/orderHeader/OrderHeaderStyle.ts b/src/components/header/orderHeader/OrderHeaderStyle.ts index c2b4ef7..f3367c1 100644 --- a/src/components/header/orderHeader/OrderHeaderStyle.ts +++ b/src/components/header/orderHeader/OrderHeaderStyle.ts @@ -2,8 +2,9 @@ import { Theme, css } from '@emotion/react'; export const headerStyle = (theme: Theme) => css` display: flex; + gap: 78rem; align-items: center; - justify-content: space-between; + justify-content: center; width: 100%; height: 5.4rem; padding: 0.9rem 5.2rem; diff --git a/src/components/header/productHeader/ProductHeader.tsx b/src/components/header/productHeader/ProductHeader.tsx index 009481b..57ef2a0 100644 --- a/src/components/header/productHeader/ProductHeader.tsx +++ b/src/components/header/productHeader/ProductHeader.tsx @@ -71,48 +71,50 @@ const ProductHeader = () => { {/* 유틸리티 섹션 */} {/* 앱 다운로드 */} -
- -
-

AliExpress

-

앱 다운로드

-
-
- - {/* 국가 및 통화 */} -
- -
+
+
+
-

KO/

-

KRW

+

AliExpress

+

앱 다운로드

- -
-
+ - {/* 사용자 계정 */} -
togglePopup('info')}> - -
-
-

환영합니다!/

-

로그인/회원가입

+ {/* 국가 및 통화 */} +
+ +
+
+

KO/

+

KRW

+
+
- -
- {/* 카테고리 팝업 */} - {activePopup === 'info' && } -
+ - {/* 장바구니 */} -
- -
-

0

-

장바구니

-
-
+ {/* 사용자 계정 */} +
togglePopup('info')}> + +
+
+

환영합니다!/

+

로그인/회원가입

+
+ +
+ {/* 카테고리 팝업 */} + {activePopup === 'info' && } +
+ + {/* 장바구니 */} +
+ +
+

0

+

장바구니

+
+
+ ); }; diff --git a/src/components/header/productHeader/ProductHeaderStyle.ts b/src/components/header/productHeader/ProductHeaderStyle.ts index 938275b..47ca821 100644 --- a/src/components/header/productHeader/ProductHeaderStyle.ts +++ b/src/components/header/productHeader/ProductHeaderStyle.ts @@ -7,10 +7,10 @@ export const relativeStyle = css` export const headerStyle = (theme: Theme) => css` display: flex; gap: 1.6rem; - justify-content: space-between; + justify-content: center; width: 100vw; height: 5.4rem; - padding: 0.5rem 5.6rem 0.5rem 2.6rem; + padding: 0.5rem 5.6rem; background-color: ${theme.colors.gray10};