Merge pull request #120 from SOPT-all/develop

merge to main
SOPT-all · Nov 30, 2024 · 0012f4d · 0012f4d
2 parents 0c301bb + 3c23e07
commit 0012f4d
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 42 deletions.
diff --git a/README.md b/README.md
@@ -85,8 +85,7 @@
 
 ## 🌳 구현 View
 ### 🌿 상품구매 View
-<img width="1512" alt="KakaoTalk_20241130_004952323" src="https://github.com/user-attachments/assets/f47a4c58-4b48-4e0c-858c-d39192f3c629">
-
+<img width="1512" alt="KakaoTalk_20241130_004952323" src="https://github.com/user-attachments/assets/87c07b64-eecc-4884-81ba-483db513435c">
 
 ### 🌿 주문상세 View
 ![FireShot Capture 002 - AliExpress Korea - AND SOPT 35 - localhost](https://github.com/user-attachments/assets/fd11e1e0-f4f9-43ba-b050-e31964d88058)

diff --git 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
@@ -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
@@ -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};