Merge pull request #73 from KDT-hahahoho/Feat/#72

푸터 컴포넌트 ui 작업

.gitignore

@@ -22,5 +22,5 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
-
+/prompt
 .env

src/components/Auth/CheckAgreement.tsx

@@ -3,9 +3,7 @@ import styled from '@emotion/styled';
 import Button from '@components/common/Button';
 import variables from '@styles/Variables';
 import checkArrow from '@assets/Images/checkArrow.svg';
-import checkedArrow from '@assets/Images/checkedArrow.svg'; // 체크된 상태의 아이콘
 
-// TODO - 모든 동의가 완료되면 가입이 진행되도록 수정해야함
 interface CheckAgreementProps {
   submitSignup: () => void | undefined;
   onClose?: () => void;
@@ -34,8 +32,11 @@ const CheckAgreement = ({ submitSignup }: CheckAgreementProps) => {
   return (
     <BottomSheetContainer isVisible={true}>
       <CheckboxAgreeAllbox>
-        <CheckAgreeAll>
-          <AllAgreeButton onClick={handleMainCheckboxChange} />
+        <CheckAgreeAll isChecked={isChecked}>
+          <AllAgreeButton
+            onClick={handleMainCheckboxChange}
+            isChecked={isChecked} // 색상 변경을 위한 상태 전달
+          />
           <AgreeTitle>약관에 모두 동의</AgreeTitle>
         </CheckAgreeAll>
       </CheckboxAgreeAllbox>
@@ -103,29 +104,32 @@ const CheckboxAgreeAllbox = styled.div`
   padding-top: ${variables.layoutPadding};
 `;
 
-const CheckAgreeAll = styled.div`
-  border: 1px solid #ddd;
+const CheckAgreeAll = styled.div<{ isChecked: boolean }>`
+  border: 0.1rem solid #ddd;
   width: 100%;
   height: 6rem;
-
   border-radius: ${variables.borderRadius};
+  background-color: ${({ isChecked }) =>
+    isChecked ? `${variables.colors.primarySoft}` : '#fff'}; // 체크된 경우 색상 변경
   display: flex;
   align-items: center;
   padding: 1.2rem;
 `;
 
-const AllAgreeButton = styled.div`
+const AllAgreeButton = styled.div<{ isChecked: boolean }>`
   width: 3.3rem;
   height: 3.3rem;
   border-radius: 50%;
-  background-color: #fff;
+  background-color: ${({ isChecked }) =>
+    isChecked ? `${variables.colors.primaryStrong}` : '#fff'}; // 체크된 경우 색상 변경
   border: 1px solid #ddd;
   background-image: url(${checkArrow});
   background-position: center;
   background-repeat: no-repeat;
   cursor: pointer;
 `;
 
+// AgreeTitle 스타일
 const AgreeTitle = styled.h2`
   margin-left: 1.7rem;
   font-size: ${variables.size.large};
@@ -151,14 +155,6 @@ const Checkbox = styled.input`
   height: 3.3rem;
   margin-right: 1rem;
   cursor: pointer;
-
-  &:checked {
-    background-image: url(${checkedArrow});
-  }
-
-  &:not(:checked) {
-    background-image: url(${checkArrow});
-  }
 `;
 
 const CheckboxLabel = styled.label`

src/components/Auth/SetupSubfertility.tsx

@@ -41,7 +41,6 @@ const SetupSubfertility = ({ onNext, value, onChange }: SetupSubfertilityProps)
             checked={selectedOption === 'true'}
             onChange={handleChange}
           />
-          <CustomRadioButton selected={selectedOption === 'true'} />
           네, 진단을 받았어요.
         </Label>
         <Label>
@@ -52,7 +51,6 @@ const SetupSubfertility = ({ onNext, value, onChange }: SetupSubfertilityProps)
             checked={selectedOption === 'false'}
             onChange={handleChange}
           />
-          <CustomRadioButton selected={selectedOption === 'false'} />
           아니요, 진단은 받지 않았어요.
         </Label>
       </SubfertilityCheckboxContainer>
@@ -85,7 +83,7 @@ const SubfertilityCheckboxContainer = styled.div`
 `;
 
 const SubfertilityCheckbox = styled.input`
-  display: none !important;
+  margin-right: 0.5rem; /* 라디오 버튼과 텍스트 사이의 간격 조정 */
 `;
 
 const Label = styled.label`
@@ -94,16 +92,4 @@ const Label = styled.label`
   cursor: pointer;
 `;
 
-const CustomRadioButton = styled.div<{ selected: boolean }>`
-  width: 20px;
-  height: 20px;
-  border-radius: 50%;
-  border: 2px solid ${({ selected }) => (selected ? variables.colors.primary : 'gray')};
-  background-color: ${({ selected }) => (selected ? variables.colors.primary : 'transparent')};
-  margin-right: 0.5rem;
-  transition:
-    background-color 0.2s,
-    border-color 0.2s;
-`;
-
 export default SetupSubfertility;

src/components/common/Footer.tsx

@@ -1,23 +1,33 @@
 import styled from '@emotion/styled';
 import variables from '@styles/Variables';
-import React from 'react';
 import { Link } from 'react-router-dom';
 
 const Footer = () => {
   return (
     <FooterContainer>
       <FooterNav>
         <FooterItem>
-          <StyledLink to="/users/login">로그인</StyledLink>
+          <StyledLink to="/home">
+            <FooterIcon src="/img/footer-01.svg" alt="홈 아이콘" />홈
+          </StyledLink>
         </FooterItem>
         <FooterItem>
-          <StyledLink to="/users/signup">회원가입</StyledLink>
+          <StyledLink to="/emotion/record">
+            <FooterIcon src="/img/footer-02.svg" alt="회원가입 아이콘" />
+            감정기록
+          </StyledLink>
         </FooterItem>
         <FooterItem>
-          <StyledLink to="/counseling">심리 상담</StyledLink>
+          <StyledLink to="/counseling">
+            <FooterIcon src="/img/footer-03.svg" alt="심리 상담 아이콘" />
+            스트레스
+          </StyledLink>
         </FooterItem>
         <FooterItem>
-          <StyledLink to="/emotion/record">감정 기록</StyledLink>
+          <StyledLink to="/emotion/record">
+            <FooterIcon src="/img/footer-04.svg" alt="감정 기록 아이콘" />
+            AI 심리상담
+          </StyledLink>
         </FooterItem>
       </FooterNav>
     </FooterContainer>
@@ -27,36 +37,57 @@ const Footer = () => {
 const FooterContainer = styled.footer`
   position: fixed;
   bottom: 0;
-  width: auto;
-  height: 8.3rem;
-  left: ${variables.layoutPadding};
-  right: ${variables.layoutPadding};
-  background-color: #f8f9fa;
+  width: 100%;
+  margin: calc(-1 * ${variables.layoutPadding});
+  height: 10rem;
+  background-color: ${variables.colors.white};
   display: flex;
   justify-content: center;
-  border-radius: ${variables.borderRadius};
-  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
+  align-items: center;
+  border-top-left-radius: ${variables.borderRadius}+ 2.2rem;
+  border-top-right-radius: ${variables.borderRadius}+ 2.2rem;
+  box-shadow: ${variables.BoxShadow};
+  @media (min-width: 500px) {
+    width: 100%;
+  }
 `;
 
 const FooterNav = styled.ul`
   list-style: none;
   display: flex;
-  gap: 2rem;
+  gap: 4rem;
   padding: 0;
   margin: 0;
 `;
 
 const FooterItem = styled.li`
-  display: inline;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+
+const FooterIcon = styled.img`
+  width: 2.4rem;
+  height: 2.4rem;
+  transition: filter 0.3s ease;
+
+  &:hover,
+  &:focus {
+    filter: brightness(0.6) sepia(1) hue-rotate(200deg);
+  }
 `;
 
 const StyledLink = styled(Link)`
   text-decoration: none;
-  color: #007bff;
-  font-size: 2rem;
-  &:hover {
-    text-decoration: underline;
-    color: #0056b3;
+  color: ${variables.colors.gray50};
+  font-size: 1.2rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.6rem;
+  &:focus {
+    color: ${variables.colors.primaryStrong};
+    font-weight: bold;
   }
 `;
 

src/pages/Home/Home.tsx

@@ -6,7 +6,7 @@ import styled from '@emotion/styled';
 import CoupleInfomation from '@components/home/CoupleInfomation';
 
 //  홈에서 쓰는 컴포넌트
-// <HomePageTitle /> = 제목 컴포넌트   |  <CoupleInfomation /> = 부부연동 ,미션  | <Footer> =푸터는 메인에서만 필요해서 호출
+// <HomePageTitle /> = 제목 컴포넌트   |  <CoupleInfomation /> = 부부연동 ,미션  | <Footer> = 푸터는 메인에서만 필요해서 호출
 
 const Home = () => {
   return (
@@ -24,6 +24,7 @@ const HompageContainer = styled.div`
   display: flex;
   flex-direction: column;
   height: 100vh;
+  margin-top: 9rem;
 `;
 
 const ContentWrapper = styled.div`