From 29c42438a6e8bd1385e49876db65933c359ee026 Mon Sep 17 00:00:00 2001
From: kiyeong <kjr07145@gmail.com>
Date: Thu, 8 Aug 2024 08:43:29 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EB=B2=84=ED=8A=BC=20=EC=9C=84=EC=B9=98?=
 =?UTF-8?q?=20=EC=A1=B0=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/HomePage/ContentsInfo.tsx      |  2 +-
 .../HomePage/TestersBox/Buttons.tsx           | 22 ++++++++++++++-----
 src/components/HomePage/TestersBox/index.tsx  |  2 +-
 src/pages/Home/index.tsx                      |  6 +++++
 4 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/src/components/HomePage/ContentsInfo.tsx b/src/components/HomePage/ContentsInfo.tsx
index 02b3960..c8c98fb 100644
--- 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
index 35d2062..17d2789 100644
--- a/src/components/HomePage/TestersBox/Buttons.tsx
+++ b/src/components/HomePage/TestersBox/Buttons.tsx
@@ -127,8 +127,6 @@ 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;
@@ -136,8 +134,15 @@ const ButtonsWrapper = styled.div`
   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
index 35e125d..0586c2e 100644
--- 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
index 3844c8a..1bb3a27 100644
--- 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 />