Merge pull request #50 from doghae/kiyeong

feat: card 디자인 수정
doghae · Aug 5, 2024 · 16a77f8 · 16a77f8
2 parents a7b57c8 + f973385
commit 16a77f8
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 37 deletions.
diff --git a/src/components/HomePage/Contents.tsx b/src/components/HomePage/Contents.tsx
@@ -12,7 +12,7 @@ export const Contents = () => {
       <Grid
         h={{ base: "2000px", md: "2500px" }}
         w="100%"
-        templateRows={{ base: "repeat(4, 1fr)", md: "1fr 300px 300px 500px" }}
+        templateRows={{ base: "repeat(4, 1fr)", md: "1fr 300px 300px 400px" }}
         templateColumns={{ base: "1fr", md: "repeat(1, 1fr)" }}
         gap={{ base: 50, md: 100 }}
         p={{ base: 5, md: 8 }} /* 화면 크기에 따른 패딩 설정 */

diff --git a/src/components/MyPage/StageSelection.tsx b/src/components/MyPage/StageSelection.tsx
@@ -19,7 +19,7 @@ export const StageSelection = () => {
           <Subtitle>※ 단계를 선택해서 문제를 풀어보세요!</Subtitle>
         </Header>
         <CardContainer>
-          {stages.map(stage => (
+          {stages.map((stage) => (
             <StageCard key={stage} onClick={() => handleCardClick(stage)}>
               {stage}
             </StageCard>
@@ -43,6 +43,7 @@ const LogoWrapper = styled.div`
 `;
 
 const Header = styled(Flex)`
+  margin-top: 20px;x
   align-items: baseline;
   margin-bottom: 20px;
 `;
@@ -54,7 +55,7 @@ const StageTitle = styled(Text)`
 `;
 
 const Subtitle = styled(Text)`
-  font-size: 24px;
+  font-size: 20px;
   color: #c927f6;
   margin-left: 10px;
 `;
@@ -71,14 +72,15 @@ const CardContainer = styled(Grid)`
 const StageCard = styled(GridItem)`
   background: linear-gradient(180deg, #55cbcd 0%, #a2e1db 100%);
   border-radius: 10px;
+  border: 1px solid #a2e1db;
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 24px;
+  font-size: 30px;
   font-style: italic;
   color: white;
-  height: 100px;
-  cursor: pointer;  /* 추가된 스타일 */
+  height: 150px;
+  cursor: pointer;
   transition: transform 0.2s;
 
   &:hover {

diff --git a/src/components/RedirectHandler.tsx b/src/components/RedirectHandler.tsx
@@ -43,11 +43,9 @@ const kakaoLogin = async (code: string, navigate: any, setToken: (token: string
     const res = await api.get(`/oauth2/kakao/login?code=${code}`, {
       withCredentials: true,
     });
-    console.log("Response Headers:", res.headers);
 
     // Authorization 헤더 추출 시 여러 방법을 시도
     const ACCESS_TOKEN = res.headers['authorization'] || res.headers.Authorization;
-    console.log("ACCESS_TOKEN", ACCESS_TOKEN);
 
     // 토큰이 undefined인 경우 에러 처리
     if (!ACCESS_TOKEN) {

diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx
@@ -1,38 +1,12 @@
 import { Contents } from "@/components/HomePage/Contents";
-import { Main } from "@/components/MyPage/Main"
-import { useEffect } from "react";
+import { Main } from "@/components/MyPage/Main";
 import { useAuth } from "@/context/AuthContext";
-import axios from "axios";
 import styled from "@emotion/styled";
 
 export const HomePage = () => {
-  const { token} = useAuth();
+  const { token } = useAuth();
 
-  useEffect(() => {
-    // 토큰이 있을 때 stage/1에 대한 정보를 가져오기
-    if (token) {
-      fetchStageData(token);
-    }
-  }, [token]);
-
-  const fetchStageData = async (token: string) => {
-    try {
-      const response = await axios.get("https://doghae.site/stage/1", {
-        headers: {
-          Authorization: `Bearer ${token}`,
-        },
-      });
-      console.log(response.data); // 받아온 데이터 콘솔에 출력
-    } catch (error) {
-      console.error("데이터 가져오기 실패", error);
-    }
-  };
-
-  return (
-    <Wrapper>
-      {token ? <Main /> : <Contents />}
-    </Wrapper>
-  );
+  return <Wrapper>{token ? <Main /> : <Contents />}</Wrapper>;
 };
 
 const Wrapper = styled.div`