2차프로젝트-Footer 구현하기

오늘은 오랜만에 2차 프로젝트에 대한 현황에 대해 기록하려고 한다.

 

로그인기능은 구현완료했지만!

스크럼에서 팀원들과 의견을 나눠본 결과,

로그인 시 회원가입 폼과 같이 발리데이트 폼을 적용하여 폼에 맞지 않으면 메시지를 출력하고,
또한 로그인버튼이 비활성화되는 기능과 버튼의 색이 달라지는 기능,

반대로 폼에 맞으면 메시지를 출력하고

로그인 버튼 활성과 같이 색이 원래대로 돌아오는 기능을 추가하기로 했다.

(물론 이 기능도 1차 프로젝트 때 정확히 구현을 해봤던 기능이었다. 하지만 중요한 건 그때는 활성화/비활성화 시 색깔이 변하는 기능이 정상적으로 작동되다가, 마지막에 api를 붙이고 jwt를 가져오는 과정에서 적용이 안돼서 빼버린 뼈아픈 경험이 있다.

하지만 이번엔 정상적으로 구현해 냈다!!!

코드는 저번 글과 비슷할 거 같아 생략하겠다)

 

그래서 오늘은 Header를 참고해서 Footer를 구현하는 과정을 정리해 보겠다.

Footer는 로그인 시 변하는 Header와 다르게 변하는 값이 없어 수월하게 작업했다.

//Footer.tsx


import React from "react";
import { StyledFooter,
    FooterName,
    FooterCt,
    FooterNum,
    FooterCt2,
    FooterNum2,
    FooterCopyright,


 } from './Footer.styles';

const Footer: React.FC = () => {
return(
    <StyledFooter>
        <FooterCt>
        <FooterName>Modding㈜</FooterName> 

        <FooterNum>
        대표 최윤혁
        <br/>
        통신판매업신고번호: 2023-앨리스1팀-3553
        <br/>
        이메일 상담: Weedh@modding.kr
        <br/>
        서울특별시 성동구 아차산로17길 48

        
        </FooterNum>
        </FooterCt>

      <FooterCt2>

        <FooterNum2>
        일부 상품의 경우 모딩은 통신판매중개자이며 통신판매 당사자가 아닙니다.
        <br/>
        해당되는 상품의 경우 상품, 상품정보, 거래에 관한 의무와 책임은 판매자에게 있으므로, 각 상품 페이지에서 구체적인 내용을 확인하시기 바랍니다.
      
        </FooterNum2>
        </FooterCt2>

  <FooterCopyright>© Modding Co., Ltd.
    </FooterCopyright>
      
</StyledFooter>
);
};

export default Footer;

 

//Footer.styles.tsx


import tw from "tailwind-styled-components";

export const StyledFooter = tw.footer`
flex flex-col items-center bg-gray-700 text-center dark:bg-neutral-900 lg:text-left
`;

export const FooterName = tw. h5`
mb-0.5 font-bold text-center text-3xl
`

export const FooterCt = tw. div`
container p-6 text-neutral-800 dark:text-neutral-200
grid gap-4 lg:grid-cols-2
mb-6 md:mb-0
`

export const FooterNum = tw. p`
mb-4 text-base 
`

export const FooterCt2 = tw. div`
mb-6 md:mb-0 
`


export const FooterNum2 = tw.p`
mb-4 ml-20 text-gray-300 text-center
`

export const FooterCopyright = tw.div`
w-full bg-neutral-200 p-4 text-center text-neutral-700 dark:bg-neutral-800 dark:text-neutral-200
`

 

 

Footer라 기능을 구현할게 별로?(거의) 없어서 css에 집중한 거 같다.

확실히 Tailwind-styled-component로 작업하니

코드의 가독성이 올라간 거 같아서 뿌듯했다.

또한 구조에 css를 직관적으로 먹일 수 있어서 css작업할 때 수월하게 한 거 같다.

(참고로 Footer.tsx에서 React:FC는 생략해도 된다고 코치님에게 티칭 받았지만,\

이미 팀들이 저런 식으로 진행하고 있으니 
컨벤션을 맞춰서 그냥 적으라고 하셨다.)

 

 

이러한 결과를 얻어냈다.
css는 계속 고쳐나갈 예정이다.

 

경로도 혹시 모르니 정리해 놓겠다.

 

//App.tsx


import { Routes, Route, BrowserRouter, Link } from "react-router-dom";
import SignUpPage from "./pages/sign-up/SignUpPage";
import MainPage from "./pages/main/MainPage";
import Header from "./components/header/Header";
import ErrorPage from "./pages/error/ErrorPage";
import Main from "./pages/hooks/custompopup/main";
import SignInPage from "./pages/sign-in/SignInPage";
import OptionsPage from "./pages/options/OptionsPage";
import PaymentPage from "./pages/payment/PaymentPage";
import FundingPage from "./pages/funding/FundingPage";
import Category from "./pages/category/Category";
import Footer from "./components/footer/Footer";

function App() {
  return (
    <BrowserRouter>
      <div className="scrollbar bg-[#03000C] min-w-[1440px] w-auto min-h-screen h-auto">
        <Header />
        <Routes>
          <Route path="/" element={<MainPage />} />
          <Route path="/sign-up" element={<SignUpPage />} />
          <Route path="/404" element={<ErrorPage />} />
          <Route path="/processing" element={<Main />} />
          <Route path="/sign-in" element={<SignInPage />} />
          <Route path="/options" element={<OptionsPage />} />
          <Route path="/payment" element={<PaymentPage />} />
          <Route path="/funding" element={<FundingPage />} />
          <Route path="/category" element={<Category />} />
        </Routes>
        <Footer />
      </div>
      
    </BrowserRouter>
  );
}

export default App;

 

이런 식으로 Header 아래 Routes 아래 Footer를 적용시켰다.
다음에는  Admin 페이지를 만들어볼 생각이다.

이것은 한 번도 해보지 않아서 많은 시간과 공부가 필요할 거 같아, 상세히 정리해 볼 생각이다!

 

프론트엔드 부트캠프, 엘리스 SW 엔지니어 트랙

 

프론트엔드 부트캠프, 엘리스 SW 엔지니어 트랙

 

 #엘리스트랙 #엘리스트랙후기 #리액트네이티브강좌 #온라인코딩부트캠프 #온라인코딩학원 #프론트엔드학원 #개발자국비지원 #개발자부트캠프 #국비지원부트캠프 #프론트엔드국비지원 #React #Styledcomponent #React Router Dom #Redux #Typescript #Javascript