📝 docs: update README.md

Author: kyubumjang

README.md

@@ -2,7 +2,74 @@
 
 반도체 업체 PNS 홈페이지
 
-- mvp 재정의 필요
-- 이슈에 있는 내용 진행 필요
-- 가장 우선순위가 높은 건 제품 소개 페이지 개발
-- 발주 시스템은 Order에서 따로 진행하여 배포할 예정
+### 소개
+
+부모님이 운영하는 회사 홈페이지이
+
+### 개발 일정
+
+- 리뉴얼: 2023.08.20 ~
+
+### 개발 환경
+
+#### 언어
+
+<div>
+  <img src="https://img.shields.io/badge/TypeScript-3178C6?style=flat-square&logo=TypeScript&logoColor=white"/>
+</div>
+
+#### 기술 스택
+
+<div>
+    <img src="https://img.shields.io/badge/React-61DAFB?style=flat-square&logo=React&logoColor=white"/>
+    <img src="https://img.shields.io/badge/Next.js-000000?style=flat-square&logo=nextdotjs&logoColor=white"/>
+  <br />
+    <img src="https://img.shields.io/badge/Emotion-BB6BB5.svg?style=flat-square&logo=emotion&logoColor=white"/>
+    <img src="https://img.shields.io/badge/Redux-764ABC?style=flat-square&logo=redux&logoColor=white"/>
+    <!-- <img src="https://img.shields.io/badge/Tailwind CSS-06B6D4?style=flat-square&logo=tailwindcss&logoColor=white"/> -->
+    <!-- <img src="https://img.shields.io/badge/Zustand-brown?style=flat-square&logo=Zerply&logoColor=white"/>
+    <img src="https://img.shields.io/badge/Recoil-blue?style=flat-square&logo=Recoil&logoColor=white"/>
+    <img src="https://img.shields.io/badge/React Query-FF4154?style=flat-square&logo=React Query&logoColor=white"/>
+    <img src="https://img.shields.io/badge/React Hook Form-EC5990?style=flat-square&logo=reacthookform&logoColor=white"/>
+    <img src="https://img.shields.io/badge/Sentry-362D59?style=flat-square&logo=sentry&logoColor=white"/> -->
+</div>
+
+#### 도구
+
+<div>
+    <img src="https://img.shields.io/badge/Visual%20Studio%20Code-007ACC.svg?&style=flat-square&logo=Visual%20Studio%20Code&logoColor=white" />
+    <img src="https://img.shields.io/badge/yarn-%232C8EBB.svg?style=flat-square&logo=yarn&logoColor=white" />
+    <img src="https://img.shields.io/badge/ESLint-4B32C3.svg?&style=flat-square&logo=ESLint&logoColor=white" />
+    <img src="https://img.shields.io/badge/Git-F05032.svg?&style=flat-square&logo=Git&logoColor=white" />
+    <img src="https://img.shields.io/badge/github-%23121011.svg?style=flat-square&logo=github&logoColor=white" />
+    <img src="https://img.shields.io/badge/figma-%23F24E1E.svg?style=flat-square&logo=figma&logoColor=white" />
+    <img src="https://img.shields.io/badge/Notion-%23000000.svg?style=flat-square&logo=notion&logoColor=white" />
+    <img src="https://img.shields.io/badge/Slack-4A154B?style=flat-square&logo=slack&logoColor=white" />
+</div>
+
+#### 주요 라이브러리
+
+- 프레임워크: Next.js 12에 대한 학습(CSS-in-JS 기반으로 코드를 짜둬서 Next.js 13은 현재 이슈가 있으므로 12 버전 사용)
+- 패키지 관리: Yarn
+- 코드관리: Git, Github
+- 컨벤션: Prettier, ESLint
+- 스타일: CSS-in-JS로 Mui와 NextJS에 적용하기 쉬운 emotion 사용, 가장 익숙한 스타일 툴인 Emotion 사용
+- 전역 상태관리: redux, redux toolkit의 익숙한 사용을 위해 redux로 상태 관리
+- 비동기 과정 처리: Axios
+- 폼 상태관리: React-hook-form
+- 에러 나는 부분 확인 및 로그: Sentry
+
+### 핵심 기능
+
+- 회사 소개(완료)
+- 제품 소개(진행 중)
+- 공지사항(게시판 형식)
+- 문의 사항(챗봇 형식)
+
+### 기술적 고민
+
+- 프로젝트 구조를 변경할 때 기존에 해둔 것을 기반으로 수정할 수 있는 부분이 있는지 검토(프로젝트 구조, 컴포넌트(Text, Button)) 후 리팩토링 대상 파악
+- 주요 기술인 Next.js, redux 추가적으로 학습 후 적용
+- 라이브러리를 추가 할 때 항상 의도를 가지고 설치할 수 있도록 고민함
+- SEO를 적용하여 회사 검색시 노출될 수 있도록 관련 내용 학습 및 적용할 예정
+- 제품을 3D 형식으로 보여주고 싶어 Three.js와 WebGL 관련 학습 및 적용해볼 예정

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "ambition",
+  "name": "pns-fe",
   "version": "0.1.0",
   "private": true,
   "scripts": {
@@ -21,8 +21,8 @@
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",
     "@svgr/webpack": "^6.5.1",
-    "@types/node": "18.11.0",
-    "@types/react": "18.0.21",
+    "@types/node": "20.5.1",
+    "@types/react": "18.2.20",
     "@types/react-dom": "18.0.6",
     "@types/react-redux": "^7.1.24",
     "@typescript-eslint/eslint-plugin": "^5.40.0",
@@ -34,6 +34,6 @@
     "prettier": "^2.7.1",
     "react-icons": "^4.6.0",
     "redux-logger": "^3.0.6",
-    "typescript": "4.8.4"
+    "typescript": "5.1.6"
   }
 }

yarn.lock

@@ -1488,10 +1488,10 @@
   resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
   integrity sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==
 
-"@types/node@18.11.0":
-  version "18.11.0"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-18.11.0.tgz#f38c7139247a1d619f6cc6f27b072606af7c289d"
-  integrity sha512-IOXCvVRToe7e0ny7HpT/X9Rb2RYtElG1a+VshjwT00HxrM2dWBApHQoqsI6WiY7Q03vdf2bCrIGzVrkF/5t10w==
+"@types/node@20.5.1":
+  version "20.5.1"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-20.5.1.tgz#178d58ee7e4834152b0e8b4d30cbfab578b9bb30"
+  integrity sha512-4tT2UrL5LBqDwoed9wZ6N3umC4Yhz3W3FloMmiiG4JwmUJWpie0c7lcnUNd4gtMKuDEO4wRVS8B6Xa0uMRsMKg==
 
 "@types/parse-json@^4.0.0":
   version "4.0.0"
@@ -1520,7 +1520,7 @@
     hoist-non-react-statics "^3.3.0"
     redux "^4.0.0"
 
-"@types/react@*", "@types/[email protected]":
+"@types/react@*":
   version "18.0.21"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.21.tgz#b8209e9626bb00a34c76f55482697edd2b43cc67"
   integrity sha512-7QUCOxvFgnD5Jk8ZKlUAhVcRj7GuJRjnjjiY/IUBWKgOlnvDvTMLD4RTF7NPyVmbRhNrbomZiOepg7M/2Kj1mA==
@@ -1529,6 +1529,15 @@
     "@types/scheduler" "*"
     csstype "^3.0.2"
 
+"@types/[email protected]":
+  version "18.2.20"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.20.tgz#1605557a83df5c8a2cc4eeb743b3dfc0eb6aaeb2"
+  integrity sha512-WKNtmsLWJM/3D5mG4U84cysVY31ivmyw85dE84fOCk5Hx78wezB/XEjVPWl2JTZ5FkEeaTJf+VgUAUn3PE7Isw==
+  dependencies:
+    "@types/prop-types" "*"
+    "@types/scheduler" "*"
+    csstype "^3.0.2"
+
 "@types/scheduler@*":
   version "0.16.2"
   resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.2.tgz#1a62f89525723dde24ba1b01b092bf5df8ad4d39"
@@ -3906,10 +3915,10 @@ typescript-tuple@^2.2.1:
   dependencies:
     typescript-compare "^0.0.2"
 
-typescript@4.8.4:
-  version "4.8.4"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.8.4.tgz#c464abca159669597be5f96b8943500b238e60e6"
-  integrity sha512-QCh+85mCy+h0IGff8r5XWzOVSbBO+KfeYrMQh7NJ58QujwcE22u+NUSmUxqF+un70P9GXKxa2HCNiTTMJknyjQ==
+typescript@5.1.6:
+  version "5.1.6"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.1.6.tgz#02f8ac202b6dad2c0dd5e0913745b47a37998274"
+  integrity sha512-zaWCozRZ6DLEWAWFrVDz1H6FVXzUSfTy5FUMWsQlU8Ym5JP9eO4xkTIROFCQvhQf61z6O/G6ugw3SgAnvvm+HA==
 
 unbox-primitive@^1.0.2:
   version "1.0.2"