Merge pull request #156 from Igloo-Club/feat/landing

Feat/landing

src/common/assets/images/0_index.ts

@@ -1,5 +1,6 @@
 import kakaoLogin from './kakaoLogin.png';
 import logo from './logo.png';
 import Pin from './pin.png';
+import HeroImage from './hero.png';
 
-export { kakaoLogin, logo, Pin };
+export { kakaoLogin, logo, Pin, HeroImage };

src/common/components/ProfileCard.tsx

@@ -88,7 +88,7 @@ const Profile = {
     color: ${theme.colors.white};
     ${theme.fonts.body2b}
 
-    background: linear-gradient(116deg, #ff6264 0%, #ffa490 96.79%);
+    background: linear-gradient(116deg, #ff6264 0%, #ffa490 70.79%);
     border-radius: 15px;
   `,
 
@@ -133,5 +133,9 @@ const StDdaySection = styled.div`
   flex-direction: row;
   gap: 0.7rem;
   align-items: center;
-  ${({ theme }) => theme.fonts.body3}
+  width: 100%;
+  padding-top: 1.5rem;
+  margin-top: 2rem;
+  border-top: 1px solid ${({ theme }) => theme.colors.white};
+  ${({ theme }) => theme.fonts.body3};
 `;

src/login/index.tsx

@@ -1,7 +1,7 @@
 /**로그인 페이지입니다 */
 
 import { css } from '@emotion/react';
-import { logo } from '../common/assets/images/0_index';
+import { HeroImage } from '../common/assets/images/0_index';
 import styled from '@emotion/styled';
 import { 약관동의리스트 } from '../common/constants/memberAgreeConstants';
 import { useLocation } from 'react-router-dom';
@@ -15,7 +15,8 @@ const Login = () => {
   }, []);
 
   const Rest_api_key = import.meta.env.VITE_KAKAO_REST_API_KEY;
-  const redirect_uri = `${import.meta.env.VITE_REDIRECT_URI}`;
+  const redirect_uri = import.meta.env.VITE_REDIRECT_URI;
+  const guidement = '옆으로 넘겨 가이드 보기 >>>';
 
   const kakaoURL = `https://kauth.kakao.com/oauth/authorize?client_id=${Rest_api_key}&redirect_uri=${redirect_uri}&response_type=code`;
 
@@ -24,19 +25,10 @@ const Login = () => {
   };
 
   return (
-    <div
-      css={{
-        overflowY: 'scroll',
-        width: '100%',
-        height: 'calc(var(--vh, 1vh) * 100);',
-        padding: '2rem',
-      }}
-    >
+    <div css={{ overflowY: 'scroll', width: '100%' }}>
+      <img src={HeroImage} css={backgroundImage} />
       <div css={containerStyles}>
-        <div css={logoBoxStyles}>
-          <StLogo src={logo}></StLogo>
-          <StExplain>지금 눈길로 인연을 찾아보세요!</StExplain>
-        </div>
+        <StGuide>{guidement}</StGuide>
         <StButton onClick={handleLogin}>카카오톡으로 로그인하기</StButton>
       </div>
       <Footer>
@@ -67,31 +59,46 @@ const Login = () => {
 
 export default Login;
 
-const containerStyles = css`
-  display: flex;
-  flex-direction: column;
-  gap: 15rem;
-  align-items: center;
-  justify-content: center;
+const backgroundImage = css`
+  position: absolute;
+  z-index: 1;
   width: 100%;
   height: 100vh;
-  padding: 10rem 4rem;
 `;
-const logoBoxStyles = css`
+
+const containerStyles = css`
+  position: relative;
+  z-index: 2;
   display: flex;
   flex-direction: column;
   gap: 2rem;
   align-items: center;
-  justify-content: center;
+  justify-content: end;
+  width: 100%;
+  height: 100vh;
+  padding: 0 4rem 10rem;
 `;
 
-const StLogo = styled.img`
-  width: 10rem;
-`;
+// const logoBoxStyles = css`
+//   display: flex;
+//   flex-direction: column;
+//   gap: 2rem;
+//   align-items: center;
+//   justify-content: center;
+// `;
+
+// const StLogo = styled.img`
+//   width: 10rem;
+// `;
 
-const StExplain = styled.p`
-  color: ${({ theme }) => theme.colors.primary};
-  ${({ theme }) => theme.fonts.subtitle2b};
+// const StExplain = styled.p`
+//   color: ${({ theme }) => theme.colors.primary};
+//   ${({ theme }) => theme.fonts.subtitle2b};
+// `;
+
+const StGuide = styled.p`
+  color: ${({ theme }) => theme.colors.gray4};
+  color: ${({ theme }) => theme.fonts.body2b};
 `;
 
 const StButton = styled.button`
@@ -117,9 +124,13 @@ const StButton = styled.button`
 `;
 
 const Footer = styled.footer`
+  position: relative;
+  z-index: 2;
   display: flex;
   flex-direction: column;
   gap: 2rem;
+  padding-left: 2rem;
+  margin-bottom: 3rem;
 
   ${({ theme }) => theme.fonts.body3m};
 `;

src/main/pages/mainPage.tsx

@@ -168,7 +168,7 @@ const Middle = {
     margin-right: 2rem;
     margin-bottom: 2.9rem;
     margin-left: 2rem;
-    font-size: 13px;
+    font-size: 1.3rem;
     font-style: normal;
     font-weight: 600;
     color: ${theme.colors.gray9};
@@ -186,7 +186,7 @@ const Middle = {
   `,
 
   PrimaryText: css`
-    font-size: 13px;
+    font-size: 1.3rem;
     font-style: normal;
     font-weight: 700;
     color: ${theme.colors.primary};

src/nungilList/pages/receivedDetailPage.tsx

@@ -2,10 +2,12 @@ import { css } from '@emotion/react';
 import ArrowLeftNav from '../../common/components/ArrowLeftNav';
 import DetailProfile from '../../common/pages/detailprofile';
 import AcceptNungilBtn from '../components/AcceptBtn';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, useLocation } from 'react-router-dom';
 
 const ReceivedDetailPage = () => {
   const navigate = useNavigate();
+  const { state } = useLocation();
+  console.log(state.nungilId);
 
   const ClickArrowLeft = () => {
     navigate('/nungillist', { state: { selectedBtn: 'received' } });