Merge branch 'dev' of https://github.com/TaePoong719/Summary-Card-Syn…

…chathon into dev
TaePoong719 · Oct 15, 2023 · cf31471 · cf31471
2 parents e3f0463 + d7de166
commit cf31471
Show file tree

Hide file tree

Showing 8 changed files with 95 additions and 51 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,6 +1,6 @@
 import { Route, Routes, useLocation } from 'react-router-dom'
-import Landing from './pages/Landing'
-import Home from './pages/Home'
+import Landing from './pages/Landing.jsx'
+import Home from './pages/Home.jsx'
 import Card from './pages/Card.jsx'
 import Login from './pages/Login.jsx'
 import SignUp from './pages/Signup.jsx'
@@ -24,20 +24,8 @@ function App() {
   const [isModalOpen, setIsModalOpen] = useState(false)
   // 로딩바 위한 전역상태
   const [loading, setLoading] = useState(false)
-
   const user = useContext(AuthContext)
 
-  // 서버에서 유저 카드 정보 가져오기 데모 코드 : 실제론 fetch 말고 axios 사용하는게 좋을 듯
-  // useEffect(() => {
-  //   const fetchData = async () => {
-  //     if (user) {
-  //       const res = await fetch('https://naver.com')
-  //       setUserCards(res.body)
-  //     }
-  //   }
-  //   fetchData()
-  // }, [user])
-
   useEffect(() => {
     const fetchData = async () => {
       try {

diff --git a/src/components/CardPrev.jsx b/src/components/CardPrev.jsx
@@ -1,4 +1,4 @@
-import styled, { css } from 'styled-components'
+import styled from 'styled-components'
 import '../style/CardPrev.css'
 
 const CardPrev = ({ card }) => {
@@ -14,16 +14,24 @@ const CardPrev = ({ card }) => {
           boxSizing: 'border-box',
         }}
       >
-        <CompanyImage src={`${import.meta.env.BASE_URL}company/${card.company}.svg`}></CompanyImage>
+        <CompanyImage company={card.company}></CompanyImage>
         <h3>{card.company}</h3>
       </div>
       <h1>{card.name}</h1>
       <h4>{card.date}</h4>
     </Container>
   )
 }
+const companies = ['교보생명', '롯데건설', '삼성물산', '삼성생명', '서울주택도시공사', '중앙건설']
+
+const CompanyImage = ({ company }) => {
+  let src = ''
+  if (companies.find((com) => com === company)) {
+    src = `${import.meta.env.BASE_URL}company/${company}.svg`
+  } else {
+    src = `${import.meta.env.BASE_URL}logo_40.svg`
+  }
 
-const CompanyImage = ({ src }) => {
   return (
     <CompanyWrap>
       <CompanyPhoto $src={src} />
@@ -34,8 +42,9 @@ const CompanyImage = ({ src }) => {
 const CompanyPhoto = styled.div`
   width: 100%;
   height: 100%;
-  background: url(${(props) => props.$src});
+  background: url(${(props) => props.$src}) no-repeat;
   background-position: center;
+  background-size: contain;
 `
 
 const CompanyWrap = styled.div`
@@ -57,6 +66,27 @@ const Container = styled.div`
   background: ${(props) => props.$color};
   box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.4);
   color: white;
+  text-align: center;
+  line-height: 1.5;
+  h1 {
+    display: -webkit-box;
+    width: 100%;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    text-overflow: ellipsis;
+    padding: 0 5px;
+    overflow: hidden;
+    margin: 0;
+    font-size: 1.5rem;
+  }
+  h3 {
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  h4 {
+    font-size: 1.1rem;
+  }
 `
 
 export default CardPrev
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
@@ -11,18 +11,18 @@ const Header = () => {
   const { pathname } = useLocation()
   const [userData, setUserData] = useState({})
 
-  useEffect(() => {
-    onAuthStateChanged(auth, (user) => {
-      if (user !== undefined) {
-        if (pathname === '/') {
-          navigate('/home')
-        }
-        setUserData(user)
-      } else {
-        navigate('/')
-      }
-    })
-  }, [])
+  // useEffect(() => {
+  //   onAuthStateChanged(auth, (user) => {
+  //     if (user !== undefined) {
+  //       if (pathname === '/') {
+  //         navigate('/home')
+  //       }
+  //       setUserData(user)
+  //     } else {
+  //       navigate('/')
+  //     }
+  //   })
+  // }, [])
 
   return (
     <Container>

diff --git a/src/components/Loading.jsx b/src/components/Loading.jsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react'
+import React from 'react'
 import '../style/Loading.css'
 
 const Loading = () => {

diff --git a/src/pages/Card.jsx b/src/pages/Card.jsx
@@ -3,6 +3,7 @@ import { useEffect, useRef, useState } from 'react'
 import { Link, useLocation, useNavigate, useParams } from 'react-router-dom'
 import useOnClickOutside from '../hooks/useOnClickOutside'
 import '../style/Card.css'
+import styled from 'styled-components'
 
 const Card = ({ userCards, setUserCards, setIsModalOpen }) => {
   // 카드 추가, 수정인지 아닌지 관리하는 상태
@@ -53,13 +54,13 @@ const Card = ({ userCards, setUserCards, setIsModalOpen }) => {
   const CardColorList = [
     '#DF6961',
     '#B290A9',
-    '#617797',
-    '#5289FF',
-    '#D9D9D9',
-    '#D9D9D9',
-    '#D9D9D9',
-    '#D9D9D9',
-    '#D9D9D9',
+    '#495A73',
+    '#3A71B0',
+    '#8C86C3',
+    '#CC938D',
+    '#BDACF0',
+    '#2F4666',
+    '#6CB07F',
     '#D9D9D9',
   ]
 
@@ -157,11 +158,7 @@ const Card = ({ userCards, setUserCards, setIsModalOpen }) => {
           <div className="UpperBox">
             <div className="InnerBox">
               <div className="ImgBox">
-                <img
-                  src={`${import.meta.env.BASE_URL}company/${CompanyName}.svg`}
-                  alt={`${CompanyName}로고`}
-                  style={{ backgroundColor: 'white' }}
-                />
+                <CompanyImage company={CompanyName} />
               </div>
               <div className="CompanySelect">
                 <select
@@ -214,7 +211,6 @@ const Card = ({ userCards, setUserCards, setIsModalOpen }) => {
           {!CardModifying && (
             <div className="CardSummary">
               <span>
-                {' '}
                 {card.summary
                   .trim()
                   .split('\n')
@@ -289,5 +285,35 @@ const Card = ({ userCards, setUserCards, setIsModalOpen }) => {
     </div>
   )
 }
+const companies = ['교보생명', '롯데건설', '삼성물산', '삼성생명', '서울주택도시공사', '중앙건설']
+
+const CompanyImage = ({ company }) => {
+  let src = ''
+  if (companies.find((com) => com === company)) {
+    src = `${import.meta.env.BASE_URL}company/${company}.svg`
+  } else {
+    src = `${import.meta.env.BASE_URL}logo_40.svg`
+  }
+  return (
+    <CompanyWrap>
+      <CompanyPhoto $src={src} />
+    </CompanyWrap>
+  )
+}
+
+const CompanyWrap = styled.div`
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  background-color: white;
+`
+
+const CompanyPhoto = styled.div`
+  width: 100%;
+  height: 100%;
+  background: url(${(props) => props.$src}) no-repeat;
+  background-position: center;
+  background-size: contain;
+`
 
 export default Card
diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
@@ -17,12 +17,12 @@ const Home = ({
   setLoading,
   isModalOpen,
 }) => {
+  const location = useLocation()
+
   useEffect(() => {
     setSearchedCards(userCards)
   }, [userCards])
 
-  const location = useLocation()
-
   return (
     <Container>
       <HeadlineContainer>

diff --git a/src/pages/Landing.jsx b/src/pages/Landing.jsx
@@ -75,7 +75,7 @@ const Landing = () => {
                 name: '이륜차 상해보험',
                 date: '2023-10-05',
                 company: '교보생명',
-                cardColor: '#DF6962',
+                cardColor: '#DF6961',
               }}
             />
           </div>
@@ -85,7 +85,7 @@ const Landing = () => {
                 name: '치아 보험',
                 date: '2023-10-13',
                 company: '교보생명',
-                cardColor: '#617797',
+                cardColor: '#B290A9',
               }}
             />
           </div>
@@ -95,7 +95,7 @@ const Landing = () => {
                 name: '암 보험',
                 date: '2023-10-23',
                 company: '교보생명',
-                cardColor: '#B290AA',
+                cardColor: '#3A71B0',
               }}
             />
           </div>
@@ -266,6 +266,7 @@ const Section3 = styled(Section)`
     position: absolute;
     bottom: 150px;
     right: 40px;
+    font-size: 1.25rem;
     font-weight: bold;
   }
 `

diff --git a/src/style/Card.css b/src/style/Card.css
@@ -28,14 +28,13 @@
   overflow: hidden;
   text-align: center;
   background-color: white;
-  background-size: cover;
   position: absolute;
 }
 
 img {
   width: 90%;
   height: 90%;
-  object-fit: cover;
+  object-fit: contain;
   margin: 0 auto; /* 좌우 여백을 자동으로 설정하여 가운데 정렬 */
   display: block; /* 이미지를 블록 요소로 설정하여 가로 중앙 정렬을 적용 */
 }