[Feat] : 구매하기 상세페이지 UI 수정

package.json

@@ -10,15 +10,17 @@
     "@testing-library/jest-dom": "5.17.0",
     "@testing-library/react": "13.4.0",
     "@testing-library/user-event": "13.5.0",
-    "axios": "1.5.0",
+    "axios": "^1.5.0",
+    "fsevents": "^2.3.2",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-responsive": "^9.0.2",
     "react-router-dom": "^6.15.0",
-    "react-scripts": "5.0.1",
+    "react-scripts": "^5.0.1",
     "react-scroll-motion": "0.3.2",
     "styled-components": "^6.0.7",
     "swiper": "^10.2.0",
+    "uuid": "^9.0.1",
     "web-vitals": "2.1.4"
   },
   "scripts": {

src/components/header/Header.js

@@ -11,14 +11,19 @@ export default function Header() {
     navigate("/login");
   };
 
+  const handleBuyClick = () => {
+    navigate("/buy-list");
+  };
+
   return (
     <HeaderBox>
       <LeftBox>
         <MenuText>
           <Link to="/">
-            <img src={logo} alt="Hicardi" width="180px" />
+            <img src={logo} alt="Hicardi" width="130px" />
           </Link>
-
+          <a>
+          </a>
           <TextContent>
             <StyledLink to="/">서비스 소개</StyledLink>
             <SubMenu>
@@ -30,7 +35,7 @@ export default function Header() {
               </SubStyledLink>
             </SubMenu>
           </TextContent>
-          <TextContent>구매하기</TextContent>
+          <TextContent onClick={handleBuyClick}>구매하기</TextContent>
           <TextContent>FAQ</TextContent>
           <TextContent>
             <StyledLink to="">게시판</StyledLink>

src/pages/main/MainBanner.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { COLORS } from '../../styles/colors';
+import BannerVideo from '../../assets/BannerVideo.mp4'
 
 const bannerStyle = {
   position: 'relative',
@@ -49,7 +50,7 @@ const MainBanner = () => {
         loop
         style={videoStyle}
       >
-        <source src="" type="video/mp4" />
+        <source src={BannerVideo} type="video/mp4" />
       </video>
       <div style={textContainerStyle}>
         <p style={{ ...textStyle, ...responsiveTextStyle }}>하이카디가 24시간 환자의 곁을 지켜드려요</p>

src/pages/main/MainPage.js

@@ -16,16 +16,16 @@ export default function MainPage() {
   return (
     <div>
       <Header />
-      <div style={{ marginTop: "40px", marginBottom: "180px" }}>
+      <div style={{marginBottom: "180px" }}>
         <MainBanner />
       </div>
       <div style={{ marginBottom: "40px" }}>
         <MainFirstText />
       </div>
-      <div style={{ marginBottom: "40px" }}>
+      <div style={{ marginBottom: "40px", marginLeft: "40px", marginRight: "40px" }}>
         <MainAboutGroup />
       </div>
-      <div style={{ marginBottom: "40px" }}>
+      <div style={{ marginBottom: "40px", marginLeft: "40px", marginRight: "40px" }}>
         <MainSelectGroup />
       </div>
       <div style={{ marginBottom: "40px" }}>

src/pages/main/MainSelectGroup.js

@@ -12,53 +12,55 @@ const MainSelectGroupWrapper = styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding: 60px 16px; /* 위 아래 여백 60px, 좌우 여백 반응형 조절 */
-  gap: 48px; /* 아이템 컴포넌트 사이 간격 48px */
 
+  padding: 0px 16px; /* 위 아래 여백 60px, 좌우 여백 반응형 조절 */
+
   @media (min-width: 768px) {
     padding: 60px 162px; /* 화면이 768px 이상일 때 좌우 여백 162px로 변경 */
   }
 `;
 
 const MainSelectRow = styled.div`
   display: flex;
-  gap: 48px; /* MainSelectItem 컴포넌트 간격 48px */
-  margin-top: 54px; /* 위쪽 여백 54px */
+  flex-direction: column; /* 화면이 작을 때 세로로 쌓이도록 변경 */
+  margin-top: 24px; /* 위쪽 여백 24px */
+  width: 100%; /* 화면 너비에 따라 컨텐츠 가득 차도록 설정 */
+
+  @media (min-width: 768px) {
+    flex-direction: row; /* 화면이 768px 이상일 때 가로로 정렬 */
+    gap: 48px; /* MainSelectItem 컴포넌트 간격 48px */
+  }
 `;
 
 const MainSelectGroup = () => {
     return (
         <MainSelectGroupWrapper>
-            <div style={{ display: 'flex' }}>
-                <MainSelectRow>
-
-                    <MainSelectItem
-                        why={true}
-                        image={Logo}
-                    />
-                    <MainSelectItem
-                        why={false}
-                        image={Select1}
-                        title="높은 방수 등급 (IP67)"
-                        content={(
-                            <>
-                                하이카디는 높은 방수 등급 (IP67)을 가진<br />식약처 및 CE 인증 제품입니다.<br />간단한 샤워가 가능하여 탈착하지<br />않으므로 검사의 정확도가 월등합니다.
-                            </>
-                        )}
-                    />
-                    <MainSelectItem
-                        why={false}
-                        image={Select2}
-                        title="선형 모델의 구조적 문제 해결"
-                        content={(
-                            <>
-                                선형 모델은 선을 건드릴 경우<br />노이즈가 발생하여 데이터 정확도가<br />떨어지거나 탈착 가능성이 높습니다.<br />하이카디는 일체형 모델이므로<br />이러한 단점을 보완했습니다.
-                            </>
-                        )}
-                    />
-                </MainSelectRow>
-
-            </div>
+            <MainSelectRow>
+                <MainSelectItem
+                    why={true}
+                    image={Logo}
+                />
+                <MainSelectItem
+                    why={false}
+                    image={Select1}
+                    title="높은 방수 등급 (IP67)"
+                    content={(
+                        <>
+                            하이카디는 높은 방수 등급 (IP67)을 가진<br />식약처 및 CE 인증 제품입니다.<br />간단한 샤워가 가능하여 탈착하지<br />않으므로 검사의 정확도가 월등합니다.
+                        </>
+                    )}
+                />
+                <MainSelectItem
+                    why={false}
+                    image={Select2}
+                    title="선형 모델의 구조적 문제 해결"
+                    content={(
+                        <>
+                            선형 모델은 선을 건드릴 경우<br />노이즈가 발생하여 데이터 정확도가<br />떨어지거나 탈착 가능성이 높습니다.<br />하이카디는 일체형 모델이므로<br />이러한 단점을 보완했습니다.
+                        </>
+                    )}
+                />
+            </MainSelectRow>
             <MainSelectRow>
                 <MainSelectItem
                     why={false}

src/pages/main/MainSelectItem.js

@@ -3,13 +3,13 @@ import { COLORS } from '../../styles/colors';
 
 const itemStyle = {
     width: '500px',
-    height: '602px',
+    height: '450px',
     borderRadius: '30px',
     border: `2px solid ${COLORS.GRAY_200}`,
     display: 'flex',
     flexDirection: 'column',
     justifyContent: 'flex-start',
-    padding: '40px',
+    padding: '0px',
     boxSizing: 'border-box',
     position: 'relative', // 부모 요소로부터의 상대 위치 설정
 };
@@ -27,8 +27,8 @@ const imageStyle2 = {
     position: 'absolute',
     top: '60px', // 이미지의 위치를 조정
     left: '40px', // 좌측 여백 40px
-    width: '120px', // 이미지 넓이 120px로 설정
-    height: '120px', // 이미지 높이 120px로 설정
+    width: '90px', // 이미지 넓이 120px로 설정
+    height: '90px', // 이미지 높이 120px로 설정
 };
 
 const style1 = {
@@ -41,7 +41,7 @@ const style1 = {
 
 const style2 = {
     background: COLORS.WHITE,
-    marginBottom: '0px', // 여백을 0px로 설정
+    marginBottom: '60px', // 여백을 0px로 설정
     position: 'relative', // 부모 요소로부터의 상대 위치 설정
 };
 
@@ -52,14 +52,14 @@ const textContainerStyle = {
 };
 
 const titleStyle = {
-    fontSize: '32px',
+    fontSize: '28px',
     fontWeight: 'bold',
     color: COLORS.GRAY_900,
     marginBottom: '40px', // title과 content 사이 간격 설정
 };
 
 const contentStyle = {
-    fontSize: '24px',
+    fontSize: '18px',
     color: COLORS.GRAY_700,
     marginBottom: '40px', // title과 content 사이 간격 설정
 };

src/pages/product/ProductContainer.js

@@ -15,34 +15,42 @@ const ProductContainer = () => {
 
   const containerStyle = {
     display: "flex",
-    flexDirection: "row", 
-    justifyContent: "center", 
-    alignItems: "center",
-    height: "100vh",
-    padding: "16px 200px", 
+    flexDirection: "row", // 수평으로 정렬
+    alignItems: "center", // 중앙 정렬
+    padding: "16px", // 모든 화면 크기에 패딩 적용
   };
 
-
   const leftSideStyle = {
-    flex: 1,
+    flex: 1, // 왼쪽 이미지가 남은 공간을 모두 차지하도록 설정
   };
 
   const rightSideStyle = {
-    flex: 2,
+    flex: 1, // 오른쪽 내용이 남은 공간을 모두 차지하도록 설정
+    marginLeft: "16px", // 왼쪽과 오른쪽 사이 여백 추가
+  };
+
+  // 미디어 쿼리를 사용하여 웹 너비에 따라 스타일 조정
+  const responsiveStyle = {
+    "@media (max-width: 768px)": {
+      flexDirection: "column", // 화면이 좁아질 때 세로로 정렬
+      alignItems: "center", // 세로 정렬을 위해 중앙 정렬
+      padding: "8px", // 좁은 화면에 패딩 조정
+      marginLeft: "0", // 좁은 화면에 여백 제거
+    },
   };
 
   return (
-    <div style={containerStyle}>
+    <div style={{ ...containerStyle, ...responsiveStyle }}>
       <div style={leftSideStyle}>
-        <img src={ProductImage} alt="" width="800" height="800" />
+        <img src={ProductImage} alt="" style={{ width: "100%" }} />
       </div>
       <div style={rightSideStyle}>
-        <div className="text-box">
+        <div className="text-box" style={{ width: "100%" }}>
           <ProductTextBox {...productInfo} />
-          <div style={{ marginTop: "16px" }}>
+          <div style={{ marginTop: "16px", marginRight: "100px" }}>
             <ProductOption />
           </div>
-          <div style={{ marginTop: "16px" }}>
+          <div style={{ marginTop: "16px", marginRight: "100px" }}>
             <ProductPriceGroup />
             <ProductButtonGroup />
           </div>