refactoring to typescript

codeit-bootcamp-frontend · Oct 18, 2024 · 0c5bb5c · 0c5bb5c
1 parent 1437689
commit 0c5bb5c
Show file tree

Hide file tree

Showing 89 changed files with 20,129 additions and 6,483 deletions.
diff --git a/.gitignore b/.gitignore
@@ -12,7 +12,6 @@
 /build
 
 # backup
-/backups
 .bak
 
 # misc

diff --git a/declarations.d.ts b/declarations.d.ts
@@ -0,0 +1,11 @@
+declare module "*.svg" {
+  import * as React from "react";
+  export const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>;
+  const src: string;
+  export default src;
+}
+
+declare module "*.png" {
+  const value: string;
+  export default value;
+}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "fe10-sprint-mission7",
+  "name": "fe10-sprint-mission8",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
@@ -13,6 +13,7 @@
     "react-scripts": "5.0.1",
     "react-spinners": "^0.13.8",
     "styled-components": "^6.1.8",
+    "typescript": "^4.9.5",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
@@ -38,5 +39,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@types/styled-components": "^5.1.34"
   }
 }
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -3,14 +3,26 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="keywords" content="Codeit - FE10 Sprint Mission 7">
+    <meta name="keywords" content="Codeit - FE10 Sprint Mission 8">
     <meta name="author" content="[email protected]">
     <meta property="og:type" content="website" />
     <meta property="og:title" content="판다마켓" />
     <meta property="og:description" content="일상의 모든 물건을 거래해 보세요" />
     <meta property="og:image" content="/og-image.png" />
     <meta property="og:url" content="" />
     <title>판다마켓</title>
+
+    <link
+      rel="preload"
+      href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard.min.css"
+      as="style"
+      onload="this.onload=null;this.rel='stylesheet'"
+    />
+    <noscript
+      ><link
+        rel="stylesheet"
+        href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard.min.css"
+    /></noscript>
   </head>
   <body>
     <div id="root"></div>

diff --git a/public/og-image.png b/public/og-image.png
diff --git a/src/App.js b/src/App.js
diff --git a/src/App.tsx b/src/App.tsx
@@ -0,0 +1,62 @@
+// 최신 Typescript 버전(v5.4.5)은 기존에 설치했던 리액트 프로젝트(CRA)의 react-scripts 패키지 버전에서 서포트되지 않는다는 문제가 있어요.
+// 새로운 패키지를 설치할 때, compatibility 이슈가 발생하지는 않는지 확인할 필요가 있어요. 그래서 안정적인 버전을 사용하기 위해 일부러 최신 버전이 아닌 예전 major update 버전을 설치하기도 해요.
+// Typescript의 경우엔 약간의 구글링과 각 패키지 문서를 참고해 v4.9.5로 다운그레이드 해주었어요.
+
+// 자바스크립트 파일을 타입스크립트로 점진적으로 변환하는 경우에는 jsx와 tsx 파일을 혼합해서 사용하기 위해서 `tsconfig.json` 파일이 꼭 필요해요.
+// 프로젝트의 루트 디렉토리에 `tsconfig.json` 파일을 생성해놓았으니 참고해 주세요!
+// + 타입스크립트 파일 내에서 자바스크립트 파일을 불러올 때는 해당 파일의 확장자까지 붙여주세요!
+
+// TypeScript에서는 React 컴포넌트를 사용할 때 React를 명시적으로 import해야 해요. (import React from "react";)
+// 만약 매번 React를 import하는 과정이 번거롭다면 `tsconfig.json` 파일에 별도로 `"allowSyntheticDefaultImports": true`를 설정해주는 방법도 있어요.
+
+import React from "react";
+import { BrowserRouter, Route, Routes, useLocation } from "react-router-dom";
+import HomePage from "./pages/HomePage/HomePage";
+import LoginPage from "./pages/auth/LoginPage";
+import SignupPage from "./pages/auth/SignupPage";
+import MarketPage from "./pages/MarketPage/MarketPage";
+import AddItemPage from "./pages/AddItemPage/AddItemPage";
+import CommunityFeedPage from "./pages/CommunityFeedPage/CommunityFeedPage";
+import Header from "./components/Layout/Header";
+import ItemPage from "./pages/ItemPage/ItemPage";
+import PolicyPage from "./pages/PolicyPage/PolicyPage";
+import FaqPage from "./pages/FaqPage/FaqPage";
+
+// useLocation 훅을 사용하기 위해 router 컴포넌트를 분리했어요.
+const MainContent: React.FC = () => {
+  const location = useLocation();
+  const isAuthPage =
+    location.pathname === "/login" || location.pathname === "/signup";
+  // 네비게이션바를 숨김 처리하고자 하는 pathname 목록
+  const hideHeader = isAuthPage;
+
+  return (
+    <>
+      {!hideHeader && <Header />}
+
+      <main className={isAuthPage ? "" : "withHeader"}>
+        <Routes>
+          <Route index element={<HomePage />} />
+          <Route path="login" element={<LoginPage />} />
+          <Route path="signup" element={<SignupPage />} />
+          <Route path="items" element={<MarketPage />} />
+          <Route path="items/:productId" element={<ItemPage />} />
+          <Route path="additem" element={<AddItemPage />} />
+          <Route path="community" element={<CommunityFeedPage />} />
+          <Route path="privacy" element={<PolicyPage />} />
+          <Route path="faq" element={<FaqPage />} />
+        </Routes>
+      </main>
+    </>
+  );
+};
+
+function App() {
+  return (
+    <BrowserRouter>
+      <MainContent />
+    </BrowserRouter>
+  );
+}
+
+export default App;
diff --git a/src/api/itemApi.js b/src/api/itemApi.js
@@ -1,5 +1,4 @@
 export async function getProducts(params = {}) {
-  // Using URLSearchParams allows for easy automatic encoding of parameter values.
   const query = new URLSearchParams(params).toString();
 
   try {

diff --git a/src/assets/images/home/bottom-banner-image.png b/src/assets/images/home/bottom-banner-image.png
diff --git a/src/assets/images/home/feature1-image.png b/src/assets/images/home/feature1-image.png
diff --git a/src/assets/images/home/feature2-image.png b/src/assets/images/home/feature2-image.png
diff --git a/src/assets/images/home/feature3-image.png b/src/assets/images/home/feature3-image.png
diff --git a/src/assets/images/home/hero-image.png b/src/assets/images/home/hero-image.png
diff --git a/src/assets/images/icons/eye-invisible.svg b/src/assets/images/icons/eye-invisible.svg
diff --git a/src/assets/images/icons/eye-visible.svg b/src/assets/images/icons/eye-visible.svg
diff --git a/src/assets/images/social/facebook-logo.svg b/src/assets/images/social/facebook-logo.svg
diff --git a/src/assets/images/social/google-logo.png b/src/assets/images/social/google-logo.png
diff --git a/src/assets/images/social/instagram-logo.svg b/src/assets/images/social/instagram-logo.svg
diff --git a/src/assets/images/social/kakao-logo.png b/src/assets/images/social/kakao-logo.png
diff --git a/src/assets/images/social/twitter-logo.svg b/src/assets/images/social/twitter-logo.svg
diff --git a/src/assets/images/social/youtube-logo.svg b/src/assets/images/social/youtube-logo.svg
diff --git a/src/components/Layout/Footer.tsx b/src/components/Layout/Footer.tsx
@@ -0,0 +1,95 @@
+import styled from "styled-components";
+import facebookLogo from "../../assets/images/social/facebook-logo.svg";
+import twitterLogo from "../../assets/images/social/twitter-logo.svg";
+import youtubeLogo from "../../assets/images/social/youtube-logo.svg";
+import instagramLogo from "../../assets/images/social/instagram-logo.svg";
+import { Link } from "react-router-dom";
+
+const FooterContainer = styled.footer`
+  background-color: var(--gray-900);
+  color: var(--gray-400);
+  font-size: 16px;
+  padding: 32px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 60px;
+
+  @media ${({ theme }) => theme.mediaQuery.tablet} {
+    padding: 32px 104px 108px 104px;
+  }
+
+  @media ${({ theme }) => theme.mediaQuery.desktop} {
+    padding: 32px 200px 108px 200px;
+  }
+`;
+
+const Copyright = styled.div`
+  order: 3;
+  flex-basis: 100%;
+
+  @media ${({ theme }) => theme.mediaQuery.tablet} {
+    flex-basis: auto;
+    order: 0;
+  }
+`;
+
+const FooterMenu = styled.div`
+  display: flex;
+  gap: 30px;
+  color: var(--gray-200);
+`;
+
+const SocialMedia = styled.div`
+  display: flex;
+  gap: 12px;
+`;
+
+const Footer: React.FC = () => (
+  <FooterContainer>
+    <Copyright>©codeit - 2024</Copyright>
+
+    <FooterMenu>
+      <Link to="/privacy">Privacy Policy</Link>
+      <Link to="/faq">FAQ</Link>
+    </FooterMenu>
+
+    <SocialMedia>
+      <a
+        href="https://www.facebook.com/"
+        target="_blank"
+        rel="noopener noreferrer"
+        aria-label="판다마켓 페이스북"
+      >
+        <img src={facebookLogo} alt="페이스북" width="20" />
+      </a>
+      <a
+        href="https://twitter.com/"
+        target="_blank"
+        rel="noopener noreferrer"
+        aria-label="판다마켓 트위터"
+      >
+        <img src={twitterLogo} alt="트위터" width="20" />
+      </a>
+      <a
+        href="https://www.youtube.com/"
+        target="_blank"
+        rel="noopener noreferrer"
+        aria-label="판다마켓 유튜브"
+      >
+        <img src={youtubeLogo} alt="유튜브" width="20" />
+      </a>
+      <a
+        href="https://www.instagram.com/"
+        target="_blank"
+        rel="noopener noreferrer"
+        aria-label="판다마켓 인스타그램"
+      >
+        <img src={instagramLogo} alt="인스타그램" width="20" />
+      </a>
+    </SocialMedia>
+  </FooterContainer>
+);
+
+export default Footer;
diff --git a/src/components/Layout/Header.css b/src/components/Layout/Header.css
-Original file line number
+Diff line change
@@ Expand Up / @@ -12,7 +12,6 @@ @@
     /build
     # backup
-    /backups
     .bak
     # misc
@@ Expand Down @@