From 1e6a98f05ee2d8d6ea6d18f1f54f3de02be88095 Mon Sep 17 00:00:00 2001
From: yarimu <yhli0320@naver.com>
Date: Fri, 29 Nov 2024 19:23:11 +0900
Subject: [PATCH 1/2] =?UTF-8?q?design:=20=ED=97=A4=EB=8D=94=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../header/orderHeader/OrderHeaderStyle.ts    |  1 +
 .../header/productHeader/ProductHeader.tsx    | 76 ++++++++++---------
 .../productHeader/ProductHeaderStyle.ts       |  4 +-
 3 files changed, 42 insertions(+), 39 deletions(-)

diff --git a/src/components/header/orderHeader/OrderHeaderStyle.ts b/src/components/header/orderHeader/OrderHeaderStyle.ts
index c2b4ef7..6725285 100644
--- a/src/components/header/orderHeader/OrderHeaderStyle.ts
+++ b/src/components/header/orderHeader/OrderHeaderStyle.ts
@@ -2,6 +2,7 @@ import { Theme, css } from '@emotion/react';
 
 export const headerStyle = (theme: Theme) => css`
 	display: flex;
+	gap: 1.6rem;
 	align-items: center;
 	justify-content: space-between;
 	width: 100%;
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 = () => {
 
 			{/* 유틸리티 섹션 */}
 			{/* 앱 다운로드 */}
-			<section css={appLogLayout} aria-labelledby="app-download">
-				<IcQrcodeWhite24 />
-				<div css={textContainer}>
-					<p css={fontEnAppStyle}>AliExpress</p>
-					<p css={fontMStyle}>앱 다운로드</p>
-				</div>
-			</section>
-
-			{/* 국가 및 통화 */}
-			<section css={flagLayout} aria-labelledby="language-currency">
-				<ImgFlagKorL />
-				<div css={flagContainer}>
+			<div>
+				<section css={appLogLayout} aria-labelledby="app-download">
+					<IcQrcodeWhite24 />
 					<div css={textContainer}>
-						<p css={fontEnAppStyle}>KO/</p>
-						<p css={fontKRWStyle}>KRW</p>
+						<p css={fontEnAppStyle}>AliExpress</p>
+						<p css={fontMStyle}>앱 다운로드</p>
 					</div>
-					<IcArrowbottomSWhite12 css={arrowStyle} />
-				</div>
-			</section>
+				</section>
 
-			{/* 사용자 계정 */}
-			<section css={[appLogLayout, relativeStyle]} aria-labelledby="user-account" onClick={() => togglePopup('info')}>
-				<IcUserWhite24 />
-				<div css={flagContainer}>
-					<div css={textContainer}>
-						<p css={fontMStyle}>환영합니다!/</p>
-						<p css={fontBStyle}>로그인/회원가입</p>
+				{/* 국가 및 통화 */}
+				<section css={flagLayout} aria-labelledby="language-currency">
+					<ImgFlagKorL />
+					<div css={flagContainer}>
+						<div css={textContainer}>
+							<p css={fontEnAppStyle}>KO/</p>
+							<p css={fontKRWStyle}>KRW</p>
+						</div>
+						<IcArrowbottomSWhite12 css={arrowStyle} />
 					</div>
-					<IcArrowbottomSWhite12 css={arrowStyle} />
-				</div>
-				{/* 카테고리 팝업 */}
-				{activePopup === 'info' && <MyList />}
-			</section>
+				</section>
 
-			{/* 장바구니 */}
-			<section css={cartLayout} aria-labelledby="cart">
-				<IcCartWhite24 />
-				<div css={textContainer}>
-					<p css={[fontKRWStyle, numBackStyle]}>0</p>
-					<p css={fontMStyle}>장바구니</p>
-				</div>
-			</section>
+				{/* 사용자 계정 */}
+				<section css={[appLogLayout, relativeStyle]} aria-labelledby="user-account" onClick={() => togglePopup('info')}>
+					<IcUserWhite24 />
+					<div css={flagContainer}>
+						<div css={textContainer}>
+							<p css={fontMStyle}>환영합니다!/</p>
+							<p css={fontBStyle}>로그인/회원가입</p>
+						</div>
+						<IcArrowbottomSWhite12 css={arrowStyle} />
+					</div>
+					{/* 카테고리 팝업 */}
+					{activePopup === 'info' && <MyList />}
+				</section>
+
+				{/* 장바구니 */}
+				<section css={cartLayout} aria-labelledby="cart">
+					<IcCartWhite24 />
+					<div css={textContainer}>
+						<p css={[fontKRWStyle, numBackStyle]}>0</p>
+						<p css={fontMStyle}>장바구니</p>
+					</div>
+				</section>
+			</div>
 		</header>
 	);
 };
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};
 

From 58f717a5351bb052034b6f2db85dddf1a59439fc Mon Sep 17 00:00:00 2001
From: yarimu <yhli0320@naver.com>
Date: Fri, 29 Nov 2024 19:26:31 +0900
Subject: [PATCH 2/2] =?UTF-8?q?design:=20order=20=ED=97=A4=EB=8D=94=20?=
 =?UTF-8?q?=EA=B0=84=EA=B2=A9=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/header/orderHeader/OrderHeaderStyle.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/header/orderHeader/OrderHeaderStyle.ts b/src/components/header/orderHeader/OrderHeaderStyle.ts
index 6725285..f3367c1 100644
--- a/src/components/header/orderHeader/OrderHeaderStyle.ts
+++ b/src/components/header/orderHeader/OrderHeaderStyle.ts
@@ -2,9 +2,9 @@ import { Theme, css } from '@emotion/react';
 
 export const headerStyle = (theme: Theme) => css`
 	display: flex;
-	gap: 1.6rem;
+	gap: 78rem;
 	align-items: center;
-	justify-content: space-between;
+	justify-content: center;
 	width: 100%;
 	height: 5.4rem;
 	padding: 0.9rem 5.2rem;