https://github.com/codestates-seb/seb45_pre_021

🎙️ 당신의 최애가 되어줄 무대를 준비했습니다 ❣️
https://github.com/codestates-seb/seb45_pre_021

axios java react spring styled-components

Last synced: about 23 hours ago
JSON representation

🎙️ 당신의 최애가 되어줄 무대를 준비했습니다 ❣️

• Host: GitHub
• URL: https://github.com/codestates-seb/seb45_pre_021
• Owner: codestates-seb
• Created: 2023-08-02T04:45:23.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2023-10-22T18:03:33.000Z (about 1 year ago)
• Last Synced: 2023-10-22T19:21:40.729Z (about 1 year ago)
• Topics: axios, java, react, spring, styled-components
• Language: JavaScript
• Homepage: http://pre-project-oshinoko.s3-website.ap-northeast-2.amazonaws.com
• Size: 8.07 MB
• Stars: 3
• Watchers: 2
• Forks: 4
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


 📝 stackoverflow


![제목을-입력해주세요_-002](https://github.com/codestates-seb/seb45_pre_021/assets/85780501/eda7115e-f896-4f7b-bf9a-1c38b361a229)

 🎙️ 프로그래머를 위한 질의응답 커뮤니티 서비스인 'StackOverFlow'를


최애의 i 팀만의 식으로 녹여서 탄생한 커뮤니티입니다.





🌟 http://pre-project-oshinoko.s3-website.ap-northeast-2.amazonaws.com/ 🌟






## 🎤 Contributors

|                                                                        |                                                                          |                                                                              |                                                                              |                                                                              |                                                                             |

| :-------------------------------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------: |

|  |  |  |  |  |  |

|                                               [강성일](https://github.com/widrns15)                                               |                                             [한도석](https://github.com/Island-Fever)                                             |                                               [이지원](https://github.com/qazx960)                                               |                                              [김동훈](https://github.com/donghun-k)                                              |                                             [정승관](https://github.com/roycode7891)                                             |                                              [정창인](https://github.com/Hyeonbu)                                               |




## 🛠️ Technical Skills
















































## ✨ 커밋 컨벤션

```

✨ feat: 새로운 기능 추가

🐛 fix: 오류 또는 버그 수정

📝 docs: `readme.md`와 같은 문서 관련 변경사항

🎨 style: 코드 스타일 변화

💄 design: CSS 등 사용자 UI 디자인 변화

♻️ refactor: 기능과 관련없는 코드의 리팩토링

🥽 test: 테스트를 추가하거나 수정했을 때

⚙️ chore: build와 관련된 부분, 패키지 매니저 설정 등

```




## 📂 프로젝트 폴더 구조

```

🏠 최애의 i

├─ .github

│  └─ ISSUE_TEMPLATE  ─────────────── 📝 이슈 템플릿

│

├─ 📂 client

│  │─ .env.sample

│  │─ .eslintrc.json  ──────────────── ⚙️ eslint 설정 파일

│  │─ .gitignore

│  │─ .prettierrc.json ─────────────── ⚙️ prettier 설정 파일

│  │─ package-lock.json

│  │─ package.json

│  │

│  ├─ 📂 public ────────────────────── 📦 FE 공통 컴포넌트

│  │  ├─ 📂 data

│  │  │  ├─ allQuestions.json ──────── 🎭 질문 리스트 Mock 데이터

│  │  │  └─ questionDetail.json ────── 🎭 질문 상세 페이지 Mock 데이터

│  │  └─ index.html

│  │

│  └─ 📂 src

│     ├─ 📂 components ─────────────── 📦 모든 페이지에서 공통으로 사용되는 컴포넌트

│     │  ├─ 📂 detail ──────────────── 📦 질문 상세 페이지에서 사용되는 컴포넌트

│     │  │  ├─ AnswerSection.jsx

│     │  │  ├─ ProfileCard.jsx

│     │  │  ├─ QuestionSection.jsx

│     │  │  └─ TitleSection.jsx

│     │  ├─ 📂 myPage ──────────────── 📦 마이 페이지에서 사용되는 컴포넌트

│     │  │  ├─ ActivityBox.jsx

│     │  │  ├─ ProfileBox.jsx

│     │  │  ├─ SavesBox.jsx

│     │  │  └─ SettingBox.jsx

│     │  ├─ 📂 Post ────────────────── 📦 질문 작성 페이지에서 사용되는 컴포넌트

│     │  │  ├─ Card.jsx

│     │  │  ├─ DetailSection.jsx

│     │  │  ├─ NoticeSection.jsx

│     │  │  └─ TitileSection.jsx

│     │  ├─ Button.jsx

│     │  ├─ Editor.jsx

│     │  ├─ Footer.jsx

│     │  ├─ MyPageBoxes.jsx

│     │  ├─ Nav.jsx

│     │  ├─ ProfileIcon.jsx

│     │  ├─ RightSidebar.jsx

│     │  ├─ Sidebar.jsx

│     │  ├─ SignupDropdown.jsx

│     │  └─ Viewer.jsx

│     │

│     ├─ 📂 imgs   ─────────────────── 📦 모든 페이지에서 공통으로 사용되는 이미지 폴더

│     │  ├─ 📂 profile ─────────────── 📦 프로필 사진으로 사용되는 이미지

│     │  └─ ...

│     │

│     ├─ 📂 pages   ────────────────── 📦 라우팅이 적용된 API를 요청하는 페이지 폴더

│     │  ├─ 📂 questions

│     │  │  ├─ Detail.jsx ──────────── 📲 질문 상세 페이지

│     │  │  ├─ Edit.jsx ────────────── 📲 질문 수정 페이지

│     │  │  ├─ Main.jsx ────────────── 📲 질문 메인 페이지

│     │  │  ├─ Post.jsx ────────────── 📲 질문 작성 페이지

│     │  │  └─ Search.jsx ──────────── 📲 질문 검색 페이지

│     │  ├─ 📂 users

│     │  │  ├─ Login.jsx ───────────── 🙋‍♂️ 유저 로그인 페이지

│     │  │  ├─ Mypage.jsx ──────────── 🙋‍♂️ 유저 마이 페이지

│     │  │  └─ Register.jsx ────────── 🙋‍♂️ 유저 회원가입 페이지

│     │  ├─ Home.jsx ───────────────── 🏠 홈페이지

│     │  └─ NotFound.jsx ───────────── 🚫 404페이지

│     │

│     ├─ 📂 utils    ───────────────── 📡 공통으로 사용되는 유틸 함수 폴더

│     │  ├─ axios.js

│     │  └─ profiles.js

│     ├─ App.css

│     ├─ App.js

│     ├─ index.css

│     └─ index.js

│

└─ 📂 server

   │─ .gitignore

   │─ build.gradle

   │─ gradlew

   │─ gradlew.bat

   │─ settings.gradle

   │

   ├─ 📂 gradle-wrapper

   │  ├─ gradle-wrapper.jar

   │  └─ gradle-wrapper.properties

   │

   └─ 📂 src

      ├─ 📂 main

      │  ├─ 📂 java/com/teamtwentyone

      │  │  ├─ 📂 advice ────────────────────── 🤚 서버 내 api, service 계층에서 발생하는 에러를 처리하는 핸들러

      │  │  │  └─ GlobalExceptionAdvice.java

      │  │  ├─ 📂 auth ──────────────────────── 🍃 Spring Security 패키지

      │  │  │  ├─ 📂 config ─────────────────── 🍃 Spring Security 설정 class

      │  │  │  │  └─ SecurityConfig.java

      │  │  │  ├─ 📂 dto

      │  │  │  │  ├─ LoginDto.java ──────────── 🙋‍♂️ 유저의 로그인 정보를 담을 DTO class

      │  │  │  │  └─ PrincipalDto.java ──────── 🙋‍♂️ 유저의 인증 정보를 담을 DTO class

      │  │  │  ├─ 📂 filter ─────────────────── 🪪 JWT 인증, 인가 필터

      │  │  │  │  ├─ JwtAuthenticationFilter.java

      │  │  │  │  └─ JwtVerificationFilter.java

      │  │  │  ├─ 📂 handler ────────────────── 🤚 유저 인증/인가의 성공 및 실패를 처리하는 핸들러

      │  │  │  │  ├─ MemberAccessDeniedHandler.java

      │  │  │  │  ├─ MemberAuthenticationEntryPoint.java

      │  │  │  │  ├─ MemberAuthenticationFailureHandler.java

      │  │  │  │  └─ MemberAuthenticationSuccessHandler.java

      │  │  │  ├─ 📂 jwt ────────────────────── 🪪 JWT 토큰 생성을 위한 class

      │  │  │  │  └─ JwtTokenizer.java

      │  │  │  ├─ 📂 userdetails ────────────── 🔎 인증된 유저의 정보 조회 service class

      │  │  │  │  └─ MemberUserDetailService.java

      │  │  │  └─ 📂 utils ──────────────────── 📡 인증 정보의 권한 변환 및 에러처리

      │  │  │  │  ├─ CustomAuthorityUtils.java

      │  │  │  │  └─ ErrorResponseSender.java

      │  │  ├─ 📂 exception

      │  │  │  ├─ BusinessLoginException.java ─ 📡 비즈니스 로직에서 발생하는 예외 처리를 위한 class

      │  │  │  └─ ExceptionCode.java ────────── 📡 예외 코드 모음

      │  │  ├─ 📂 response

      │  │  │  └─ ErrorResponse.java ────────── 📡 예외 응답을 위한 DTO class

      │  │  ├─ 📂 time

      │  │  │  ├─ DateTimeEntity.java ───────── 📝 질문, 답변용 시간기록 Entity

      │  │  │  └─ UserDateEntity.java ───────── 📝 유저용 시간기록 Entity

      │  │  ├─ 📂 users

      │  │  │  ├─ 📂 Dto ────────────────────── 📡 회원 데이터의 계층간 교환을 위한 DTO class

      │  │  │  │  └─ UserDto.java

      │  │  │  ├─ 📂 controller ─────────────── 📡 회원 기능 api 컨트롤러

      │  │  │  │  └─ UserController.java

      │  │  │  ├─ 📂 entity ─────────────────── 📝 회원 데이터 객체

      │  │  │  │  └─ User.java

      │  │  │  ├─ 📂 mapper ─────────────────── 📝 회원 DTO와 Entity 간 매핑을 위한 mapper class

      │  │  │  │  └─ UserMapper.java

      │  │  │  ├─ 📂 repository ─────────────── 📝 Spring Data JPA 사용을 위한 회원 repository

      │  │  │  │  └─ UserRepository.java

      │  │  │  └─ 📂 service ────────────────── 🙋‍♂️ 회원 기능의 비즈니스 로직

      │  │  │     └─ UserService.java

      │  │  └─ BackendServerApplication.java ── 🏠 App 실행을 위한 main class

      │  └─ 📂 resources

      │     ├─ application-local.yml

      │     ├─ application-mysql.yml

      │     └─ application-server.yml

      │

      └─ 📂 test/java/com/teamtwentyone

         └─ BackendServerApplicationTests.java

```




## 🪵 GitHub Flow

![image](https://github.com/codestates-seb/seb45_pre_021/assets/85780501/34b1cf04-2be7-4f88-bd7f-ebec2c8b900d)




## 🎬 협업 무대 OFF_the_Record

> ### 🎤 1. Discord

![image](https://github.com/codestates-seb/seb45_pre_021/assets/85780501/e3bd9c0b-6299-4600-a199-8b1b9dcb65b6)

![image](https://github.com/codestates-seb/seb45_pre_021/assets/85780501/06d82fbc-270e-43ed-b99e-936b8942a54c)

![image](https://github.com/codestates-seb/seb45_pre_021/assets/85780501/c197d390-3bb8-4daf-8502-8faaac829475)

- 디스코드에서 주 5~6회 아침 회의에 진행 상황과 오늘의 TODO를 얘기나누고,


  이후 오후엔 FE BE 채널에 항시 대기하여 즉각적인 피드백과 문제해결이 가능하게 했다.

- 프로젝트를 진행하면서, 공유하고 싶은 문서나 코드는 따로 정보공유 방에서 공유했다.

- 하루 일과가 너무 바빴거나 정리가 원활히 되지 않았다면, 팀장 안내에 따라 회고를 작성했다.




> ### 🎤 2. 노션(Notion)

![image](https://github.com/codestates-seb/seb45_pre_021/assets/85780501/609e16d2-420d-48da-9ec2-71ec31fe000e)

- 노션으로 사용자 요구사항 정의서 및 개발자 테스트 체크리스트와 같은 공동 문서를 작성했다.




> ### 🎤 3. 피그마(Figma)

![image](https://github.com/codestates-seb/seb45_pre_021/assets/85780501/d3a37565-caa1-4dae-8709-071c0790e7f8)

- 피그마에서 디자인 공동 작업을 진행했다.

- 추가로 특정 로직을 설명할 때, 구두로 이해를 돕기 어렵다면 피그마에서 자유롭게 시각자료로 이해를 도왔다.




## 🌟 무대 둘러보기

### 🎙️ 페이지

|홈페이지|회원가입 페이지|로그인 페이지|

|---|---|---|

||![회원가입](https://github.com/codestates-seb/seb45_pre_021/assets/85780501/0558339c-b938-445b-a6d0-df791feef6ba)|![로그인](https://github.com/codestates-seb/seb45_pre_021/assets/85780501/0e95eaf7-11ec-46eb-826d-52a26a503ef3)|

|마이페이지|질문 페이지|질문 상세 페이지|

|---|---|---|

|![마이페이지](https://github.com/codestates-seb/seb45_pre_021/assets/85780501/3cb3bb43-5e31-4011-b69d-fd41661c5a9c)|![질문 페이지](https://github.com/codestates-seb/seb45_pre_021/assets/85780501/9d13c164-3927-49e2-a90e-2e3cc06a74f9)|![질문 상세 페이지](https://github.com/codestates-seb/seb45_pre_021/assets/85780501/602001a4-cfa5-460d-917f-b9b227b7887f)|




### 🎙️ 기능

|질문 작성|질문 검색|질문 수정|

|---|---|---|

|![질문 작성](https://github.com/codestates-seb/seb45_pre_021/assets/85780501/e57cca8b-4463-4c82-9940-2cd91a93c45f)|![질문 검색](https://github.com/codestates-seb/seb45_pre_021/assets/85780501/4d77a3d5-2a0d-4451-8a4d-e07f0945ec43)|![질문 수정](https://github.com/codestates-seb/seb45_pre_021/assets/85780501/b4a019aa-ee87-418f-a7aa-4d2e83ac4c9f)|

|질문 필터링|댓글 작성|댓글 수정|

|---|---|---|

|![질문 필터](https://github.com/codestates-seb/seb45_pre_021/assets/85780501/60453660-c696-4adb-9cf4-d82078301c09)|![질문 댓글 작성](https://github.com/codestates-seb/seb45_pre_021/assets/85780501/6dbafeaf-f6a1-4165-b6ee-2d6c7eebc863)|![질문 댓글 수정](https://github.com/codestates-seb/seb45_pre_021/assets/85780501/0f73bd97-ac82-4734-bdfe-6a3413c2b037)|

|댓글 삭제|에러 페이지|로그아웃|

|---|---|---|

![질문 댓글 삭제](https://github.com/codestates-seb/seb45_pre_021/assets/85780501/3f12bf2e-e215-47a3-a483-5ce9b8db549b)|![에러페이지](https://github.com/codestates-seb/seb45_pre_021/assets/85780501/bc2bef3c-0cc1-4a6f-9247-81e640f7814c)|![로그아웃](https://github.com/codestates-seb/seb45_pre_021/assets/85780501/dc854ded-244d-48ec-bfc1-5ac54a6ab4dc)|