Merge pull request #89 from Beside-Potenday/kiyeong

feat: 버튼 위치 조정
Beside-Potenday · Aug 7, 2024 · 2fa052c · 2fa052c
2 parents 53a4590 + 29c4243
commit 2fa052c
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 7 deletions.
diff --git a/src/components/HomePage/ContentsInfo.tsx b/src/components/HomePage/ContentsInfo.tsx
@@ -5,7 +5,7 @@ export const ContentsInfo = () => {
   return (
     <Wrapper>
       <LogoWrapper>
-        <Img src="/images/contentsInfoLogo.svg" alt="Logo" mb={-2} />
+        <Img src="/images/contentsInfoLogo.svg" alt="Logo" mb={5} />
         <Grid templateColumns="repeat(3, 1fr)" gap={6}>
           {cardContents.map((content, index) => (
             <StyledGridItem key={index}>

diff --git a/src/components/HomePage/TestersBox/Buttons.tsx b/src/components/HomePage/TestersBox/Buttons.tsx
@@ -127,17 +127,22 @@ const ButtonsWrapper = styled.div`
   width: 95px;
   height: 265px;
   border-radius: 132.5px;
-  background-color: rgba(255, 255, 255, 0.7);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: space-around;
   padding: 20px 0;
   z-index: 2;
   position: absolute;
-  top: 60%;
+  top: 10%;
   left: 5%;
+  background-clip: padding-box;
+
+  /* Using border and pseudo-element for gradient border */
+  border: 1px solid transparent;
+  background-image: linear-gradient(white, white), linear-gradient(to right, #6ab9f2, #7a89f0);
+  background-origin: border-box;
+  background-clip: padding-box, border-box;
 `;
 
 const ButtonContainer = styled.div`
@@ -152,11 +157,15 @@ const ExampleChangeIcon = styled.span`
   width: 24px;
   height: 24px;
   background-image: url('/images/exampleChangeIcon.svg');
-  background-size: cover;
+  background-size: contain; /* 이미지의 크기를 유지하면서 전체를 보여줌 */
+  background-position: center; /* 이미지를 중앙에 배치 */
+  background-repeat: no-repeat; /* 이미지를 반복하지 않음 */
   transition: background-image 0.3s ease;
 `;
 
 const ExampleButton = styled(Button)`
+  width: 90px;
+  margin-top: 28px;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -178,11 +187,14 @@ const MakeMailIcon = styled.span`
   width: 24px;
   height: 24px;
   background-image: url('/images/makeMailIcon.svg');
-  background-size: cover;
+  background-size: contain; /* 이미지의 크기를 유지하면서 전체를 보여줌 */
+  background-position: center; /* 이미지를 중앙에 배치 */
+  background-repeat: no-repeat; /* 이미지를 반복하지 않음 */
   transition: background-image 0.3s ease;
 `;
 
 const MailButton = styled(Button)`
+  width: 90px;
   display: flex;
   flex-direction: column;
   align-items: center;

diff --git a/src/components/HomePage/TestersBox/index.tsx b/src/components/HomePage/TestersBox/index.tsx
@@ -45,7 +45,7 @@ export const TestersBox = () => {
   return (
     <Wrapper>
       <LogoWrapper>
-        <Img src="/images/testerslogo.svg" style={{ marginBottom: '10px' }} />
+        <Img src="/images/testerslogo.svg" style={{ marginBottom: '-50px' }} />
         <ContentWrapper>
           <Grid
             w="100%"

diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx
@@ -1,7 +1,13 @@
+import { useEffect } from 'react';
 import { Contents } from '@/components/HomePage/Contents';
 import styled from '@emotion/styled';
 
+
 export const HomePage = () => {
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, []);
+
   return (
     <Wrapper>
       <Contents />