Merge pull request #55 from NOW-SOPT-CDSP-WEB3/develop

release 1.0v
NOW-SOPT-CDSP-WEB3 · May 24, 2024 · 4d1b8bf · 4d1b8bf
2 parents 68bb93f + 0bb8632
commit 4d1b8bf
Show file tree

Hide file tree

Showing 121 changed files with 3,885 additions and 59 deletions.
diff --git a/.github/workflows/auto-sync.yml b/.github/workflows/auto-sync.yml
@@ -0,0 +1,40 @@
+name: Auto Sync
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  sync:
+    name: Sync forked repository
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          token: ${{ secrets.AUTO_SYNC }}
+
+      - name: Use Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 21.4.0
+
+      - name: Install dependencies
+        run: yarn install
+
+      - name: Build project
+        run: yarn run build
+
+      - name: Add remote URL
+        run: |
+          git remote add forked_repo https://suwonthugger:${{ secrets.AUTO_SYNC }}@github.com/suwonthugger/hyundai_redesign_client
+          git config user.name suwonthugger
+          git config user.email [email protected]
+
+      - name: Push Changes to forked_repo
+        run: |
+          git push -f forked_repo main
+
+      - name: Clean up
+        run: |
+          git remote remove forked_repo
diff --git a/.prettierrc b/.prettierrc
@@ -24,6 +24,7 @@
     "^@/utils/(.*)$",
     "^@/constants/(.*)$",
     "^@/styles/(.*)$",
+    "^@/layout/(.*)$",
     "^[./]"
   ],
   "importOrderSeparation": true,

diff --git a/README.md b/README.md
@@ -1,4 +1,16 @@
-<h1> 현대카드 리디자인 </h1>
+<div align="center">
+
+# 💳 현대 카드 💳
+
+**NOW SOPT WEB TEAM 3**
+<br />
+![image](https://github.com/NOW-SOPT-CDSP-WEB3/client/assets/52481403/5e9928e6-e79c-442e-9ab8-85884103e08e)
+</div>
+
+## 📌 합동 세미나 - 현대 카드
+
+- 디자인 파트원들이 UX개선을 위해 기존의 서비스를 리디자인 해온 것을 서버파트와 함께 협업하여 구현하고 디자인 파트, 기획파트와 협업을 경험해볼 수 있는 세미나입니다.
+- 웹 3팀은 **현대카드** 리디자인은 진행했어요!
 
 <br/>
 
@@ -15,3 +27,258 @@
 | Version Control      | ![Git](https://img.shields.io/badge/git-%23F05033.svg?style=for-the-badge&logo=git&logoColor=white) ![GitHub](https://img.shields.io/badge/github-%23121011.svg?style=for-the-badge&logo=github&logoColor=white)                                                                                                              |
 
 <br />
+
+
+## 🌳 구현 View
+### 🌿 Main View
+
+| <img width="400" height="225" alt="homepage_1" src="https://github.com/NOW-SOPT-CDSP-WEB3/client/assets/52481403/2b3bbb1f-ceae-4ff3-8549-fd170a8db774"> | <img width="400" height="255" alt="homepage_2" src="https://github.com/NOW-SOPT-CDSP-WEB3/client/assets/52481403/d6c8713b-da19-468f-9b51-3894c56c859e"> | 
+| :---: | :---: |
+
+
+
+### 🌿 Card View
+
+| <img width="400" height="225" alt="cardpage_1" src="https://github.com/NOW-SOPT-CDSP-WEB3/client/assets/52481403/74b20fa0-cb5d-4d9e-8576-d2478fccce50" > | <img width="400" height="255" alt="cardpage_2" src="https://github.com/NOW-SOPT-CDSP-WEB3/client/assets/52481403/40620b0a-0d10-491e-8a97-782e084da329" > | 
+| :---: | :---: |
+
+
+### 🌿 Benefit View
+
+| <img width="400" height="225" alt="benefitpage_1" src="https://github.com/NOW-SOPT-CDSP-WEB3/client/assets/52481403/8d485bd4-002d-4028-8ad6-a887f24ddfdc" > | <img width="400" height="255" alt="benefitpage_2" src="https://github.com/NOW-SOPT-CDSP-WEB3/client/assets/52481403/7c0adc59-508f-4706-adf3-806e850c2286"> | 
+| :---: | :---: |
+
+
+
+### 🌿 Culture View
+
+| <img width="400" height="225" alt="culturepage_1" src="https://github.com/NOW-SOPT-CDSP-WEB3/client/assets/52481403/70746fe9-ccd3-4d24-9290-564738fe4f38"> | <img width="400" height="255" alt="homepage_2" src="https://github.com/NOW-SOPT-CDSP-WEB3/client/assets/52481403/ca106648-f343-47ec-814f-3bfcc7036afb"> | 
+| :---: | :---: |
+
+<br/>
+
+## [📚 컨벤션](https://unnamedwritings.notion.site/4428b3ba2d4b48f4b5e9e0c1eac53535?pvs=4)
+
+<details>
+<summary>  1️⃣ Commit 컨벤션  </summary>
+
+### commit 규칙
+
+**키워드: 내용**
+
+- **예시:**
+  - `init: 초기 세팅`
+  - `feat: 기능 개발`
+
+<br/>
+
+**Commit 메시지 종류 설명**
+
+
+| 제목         | 내용                                                                 |
+| ------------ | -------------------------------------------------------------------- |
+| feat         | 새로운 기능을 추가할 경우                                            |
+| style        | 기능에 영향을 주지 않는 커밋, 코드 순서, css 등의 포맷에 관한 커밋  |
+| fix          | 버그를 고친 경우                                                    |
+| refactor     | 프로덕션 코드 리팩토링                                              |
+| docs         | 문서를 수정한 경우, 파일 삭제, 파일명 수정 등 ex) README.md          |
+| chore        | 빌드 테스트 업데이트, 패키지 매니저를 설정하는 경우, 주석 추가, 자잘한 문서 수정 |
+| code review  | 코드 리뷰 반영                                                      |
+</details>
+
+
+<details>
+<summary> 2️⃣ Branch 전략 </summary>
+
+### 브랜치 전략
+
+`feat/#이슈번호/이슈이름`
+
+### Git Branch
+
+- **GitHub-Flow** 전략 + **develop**
+- 브랜치 운영
+  - `feat/#이슈번호/이슈이름` (camelCase): 기능을 개발하면서 각자가 사용한 브랜치
+    - `main`: 완전히 안전하다고 판단되었을 때, 즉 배포가 가능한 최종 merge하는 브랜치
+    - `develop`: 배포하기 전 개발 중일 때 각자의 브랜치에서 merge하는 브랜치 (default 브랜치)
+      - `feat/#이슈번호/기능명`: feature 브랜치. 새로운 기능 개발. 개발이 완료되면 develop 브랜치로 병합
+      - `fix/#이슈번호/기능명`: feature 브랜치 생성 후 버그가 생겼을 때 수정하는 브랜치
+      - 그 외 `hotfix`, `release` 등은 사용 X
+
+</details>
+
+<details>
+<summary> 3️⃣ 코딩 컨벤션 </summary>
+<br/>
+
+1. **변수명, 함수명을 고민을 우선적으로 하되, 주석이 필요한 경우는 어떤 역할을 하는지 다른 사람이 이해할 수 있도록 작성하자**
+2. **해야 할 사항이 있다면 `// TODO:` 주석으로 표시하자**
+3. **컴포넌트 파일의 확장자는 `.tsx`, `.jsx`로 정한다**
+4. **컴포넌트와 일반 기능을 구현하는 함수 구분**
+   - 컴포넌트: 일반 함수 `function`을 사용
+     ```tsx
+     // Bad
+     const skrr = () => {
+         return <div>skrr</div>
+     }
+
+     export default skrr
+
+     // Good
+     function skrr() {
+         return <div>skrr</div>
+     }
+
+     export default skrr
+     ```
+   - 기능을 구현하는 함수: `const`를 사용
+     ```tsx
+     // Bad
+     function handleskrr(number) {
+         return number + 1
+     }
+
+     // Good
+     const handleSkrr = (number) => {
+         return number + 1
+     }
+     ```
+
+     <br/>
+
+5. **변수/함수명은 20자 미만, 주석으로 변수 설명**
+   - 변수/함수명은 이해할 수 있을 정도로 고민
+     ```tsx
+     // Bad
+     const isLoading = true;
+
+     // Good
+     const isUserDataLoading = true;
+     ```
+   - 대부분의 경우 `카멜 케이스`를 사용
+     ```tsx
+     // Bad
+     const is_snake_case = 'Bad';
+
+     // Good
+     const camelCase = 'Good';
+     ```
+   - 상수는 영문 대문자 스네이크 표기법 사용
+     ```tsx
+     const SYMBOLIC_CONSTANT = 'value';
+     ```
+   - 클래스 생성자/생성자 함수는 대문자 카멜 케이스 사용
+     ```tsx
+     // 클래스
+     class ClassName {}
+
+     // 생성자 함수
+     function Person() {}
+     ```
+   - URL, HTML 같은 대문자 약어는 그대로 사용
+     ```tsx
+     const parseHTML = () => {}
+     const parseXML = () => {}
+     ```
+
+     <br/>
+
+6. **이벤트 핸들러명은 `handle`로 시작**
+   ```tsx
+   // Good
+   const handleClick = () => {}
+
+   // Bad
+   const clickHandler = () => {}
+   const onClick = () => {}
+   const onSubmit = () => {}
+   const onClickHandler = () => {}
+
+</details>
+
+
+<br/>
+
+<h2> 📁 폴더 구조 </h2>
+
+```
+|-- 📁 node_modules
+|-- 📁 public
+|-- 📁 src
+  |-- 📁 apis
+  |-- 📁 assets
+  |-- 📁 components
+  |-- 📁 layout
+  |-- 📁 pages
+  |-- 📁 routes
+  |-- 📁 store
+  |-- 📁 styles
+|-- .env
+|-- .eslintrc.cjs
+|-- .gitignore
+|-- .prettierrc
+|-- .stylelintrc
+|-- index.html
+|-- package.json
+|-- README.md
+|-- tsconfig.json
+|-- tsconfig.node.json
+|-- vite.config.js
+|-- yarn.lock
+```
+<br />
+
+
+## 🧑🏻‍💻 FE Developers 👩🏻‍💻
+<table align="center">
+    <tr align="center"> 
+    <td style="min-width: 150px;" background-color="white">
+            <a href="https://github.com/seong-hui">
+              <img src="https://github.com/NOW-SOPT-CDSP-WEB3/client/assets/52481403/1fa04cb3-e05c-4cc5-a4a6-feb84cffe2ac" width="200" height="150" style="object-fit :cover">
+              <br />
+              <b>문성희</b>
+            </a> 
+        </td>
+        <td style="min-width: 150px;">
+            <a href="https://github.com/suwonthugger">
+              <img src="https://github.com/NOW-SOPT-CDSP-WEB3/client/assets/52481403/d4bd6428-7482-4106-8477-7c09f9e1f7f5" width="200" height="150" style="object-fit :cover">
+              <br />
+              <b>서대원</b>
+            </a>
+        </td>
+        <td style="min-width: 150px;" background-color="white">
+            <a href="https://github.com/yarimu">
+              <img src="https://github.com/NOW-SOPT-CDSP-WEB3/client/assets/52481403/cc5f7a1a-ba99-44fd-9c3a-c5d94e7d8c79" width="200" height="150" style="object-fit :cover">
+              <br />
+              <b>이예림</b>
+            </a> 
+        </td>
+        <td style="min-width: 150px;">
+            <a href="https://github.com/cindy-chaewon">
+              <img src="https://github.com/NOW-SOPT-CDSP-WEB3/client/assets/52481403/1043a90f-676a-4d89-bf63-a86d05f9e780" width="200" height="150" style="object-fit :cover">
+              <br />
+              <b>이채원</b>
+            </a>
+        </td>
+    </tr>
+    <tr align="center">
+        <td>
+            Home View<br />
+           이벤트 리스트 조회 API
+        </td>
+        <td>
+            Benefit View <br/>
+            로그인 API <br />회원가입 API <br /> 레이아웃 구현
+      </td>
+        <td>
+            Culture View <br />
+            컬쳐 리스트 조회 API 
+        </td>
+        <td>
+            Card View<br />
+           전체 카드 조회 API <br />카드 북마크 API<br />카드 필터링 조회 API
+        </td>
+    </tr>
+
+</table>
+
diff --git a/index.html b/index.html
@@ -1,10 +1,19 @@
 <!doctype html>
-<html lang="en">
+<html lang="ko">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/logo_hyundaicard_scr.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <meta name="description" content="NOW SOPT 현대카드 리디자인" />
+
+    <meta property="og:locale" content="ko_KR" />
+    <meta property="og:type" content="website" />
+    <meta property="og:url" content="http://3.24.252.216:5173/" />
+    <meta property="og:site_name" content="현대카드 리디자인" />
+    <meta property="og:title" content="NOW SOPT | 현대카드 리디자인" />
+    <meta property="og:description" content="NOW SOPT 현대카드 리디자인" />
+    <meta property="og:image" href="/logo_hyundaicard_scr.svg" />
+    <title>현대카드</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/package.json b/package.json
@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "@tanstack/react-query": "^5.36.0",
+    "axios": "^1.6.8",
     "jotai": "^2.8.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",