client

KO | EN

gitlite — search

#javascript #python #hacktoberfest #react #ai #typescript #llm #go #golang #android #machine-learning #rust #deep-learning #linux

★ 13 Open GitHub ↗

당신이 찾던 싸피만의 커뮤니티, ssafé ✨

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

![image](https://user-images.githubusercontent.com/87457066/148544212-28d824f9-a31d-4b6e-b950-1716654d0030.png)

# ssafé

[![Hits](https://hits.seeyoufarm.com/api/count/incr/badge.svg?url=https%3A%2F%2Fgithub.com%2Fmoramoram%2Fclient%2F&count_bg=%234A83EF&title_bg=%23555555&icon=&icon_color=%23E7E7E7&title=hits&edge_flat=false)](https://hits.seeyoufarm.com)
[![](https://img.shields.io/github/stars/moramoram/client?label=star&style=social)](https://github.com/moramoram/client)

</div>

1. [**소개**](#소개)
2. [**개발 기간**](#개발-기간)
3. [**기술 스택**](#기술-스택)
4. [**주요 기능**](#주요-기능)
5. [**프로젝트 구성도**](#프로젝트-구성도)
6. [**개발 팀 소개**](#개발-팀-소개)
7. [**버전 기록**](#버전-기록)
8. [**실행 방법**](#실행-방법)

## 소개

> 당신이 찾던 싸피만의 커뮤니티, ssafé
>

![image](https://user-images.githubusercontent.com/87457066/154912522-8c883ba7-ece3-4db7-8fea-1c2af77d6476.png)

- 싸피인들이 카페에서 처럼 편안하게 이야기를 나누는 공간이 되기를 바라며 만들었어요. ☕
- 취업 정보, 스터디 모집 플랫폼, 커뮤니티 기능을 모두 담았어요.
- PC, Mobile 어디에서나 이용할 수 있어요. 다크모드를 지원해요.

### ✨ [SSAFE 바로가기 ](http://i6a604.p.ssafy.io) ✨

- [디자인 시스템](http://ssafe-design-system.netlify.app/)
- [서비스 소개 영상](https://www.youtube.com/watch?v=pDnROgpKGXM)
- [Notion](https://endurable-wanderer-fa3.notion.site/moramoram-09fa48957b0c4d4f885f04af6365e664)
- [Figma](<https://www.figma.com/file/KKHRfTcEuNC1vChK7ExJLU/ssafe-(public)?node-id=0%3A1>)

## 개발 기간

### 2022.01.03 ~ 2022.02.17 (7주)

## 기술 스택

### 💻 Front-end

- React 로 사용자와의 상호작용이 많은 웹 페이지를 효율적으로 구현하고 관리했어요.
- React Query, Recoil로 UI 상태와 서버 상태를 분리하고 API 응답 데이터를 캐싱함으로써 서버 통신 비용을 줄였어요.
- Story book 기반의 컴포넌트 주도 개발로 UI와 비즈니스 로직을 분리해 재사용성을 높였어요.

### 💻 Back-end

- Springboot 로 웹 어플리케이션 서버를 구축했어요.
- Spring Data JPA(Hibernate) 로 객체 지향 데이터 로직을 작성했어요.
- QueryDSL 로 컴파일 시점에 SQL 오류를 감지해요. 더 가독성 높은 코드를 작성했어요.

### 💎 DB

- 데이터 베이스는 MySQL을 사용했어요.

<!-- ## ⭐ Infra Structure

- AWS EC2 와 Docker 를 사용해 서버를 구축했어요.
- AWS S3 이미지 스토리지 서버를 사용하고 있어요.
 -->

### 🌐 Network

- Nginx 를 웹서버로 사용하고 있어요.

### 💻 Testing

- JMeter 를 통해 성능 테스트를 진행했어요.

## 주요 기능

- #### 오직 싸피인들만 사용할 수 있는 신뢰 있는 사이트🤓

- #### 눈을 사로잡는 랜딩 페이지 ✨

- #### 로그인 후, 사이트의 주요 게시물들을 한 눈에 볼 수 있는 메인 페이지 🌟

- #### 한 눈에 볼 수 있는 채용 공고들 🖊

- #### 싸피생들 간의 연결고리, 커뮤니티 🗣

|           커뮤니티 페이지            |
| :----------------------------------: |
| ![](https://github.com/moramoram/ssafe-service/blob/main/assets/06-community.gif) |

- #### 섬세한 반응형 구현 🎆

|           커뮤니티 페이지            |            스터디 페이지             |             채용 페이지              |
| :----------------------------------: | :----------------------------------: | :----------------------------------: |
| ![](https://github.com/moramoram/ssafe-service/blob/main/assets/07-01-community.gif) | ![](https://github.com/moramoram/ssafe-service/blob/main/assets/07-02-study.gif) | ![](https://github.com/moramoram/ssafe-service/blob/main/assets/07-03-job.gif) |

- #### 다크모드 지원 🌙

|           커뮤니티 페이지            |            스터디 페이지             |
| :----------------------------------: | :----------------------------------: |
| ![](https://github.com/moramoram/ssafe-service/blob/main/assets/08-01-community.gif) | ![](https://github.com/moramoram/ssafe-service/blob/main/assets/08-02-study.gif) |

- #### Footer에서 ssafe에 대한 추가 정보들을 살펴볼 수 있어요.
  |           커뮤니티 페이지            |
  | :----------------------------------: |
  | ![](https://github.com/moramoram/ssafe-service/blob/main/assets/09-footer.gif) |

- #### 콘솔에 깜짝 메세지를 숨겨 뒀어요 :D

## 프로젝트 구성도

|        아키텍처(Architecture)        |
| :----------------------------------: |
| ![image](https://user-images.githubusercontent.com/74908906/158919393-278e3803-d120-4f74-80d9-1182c9612e4a.png) |

## 개발 팀 소개

<table>
 <tr height="205px">
 <td align="center" width="200px">
 <a href="https://github.com/jhj0602/"><img src="public/images/Hyoungjun.svg"/></a>
 </td>
 <td align="center" width="200px">
 <a href="https://github.com/wangsuuu/"><img src="public/images/Suruen.svg"/></a>
 </td>
 <td align="center" width="200px">
 <a href="https://github.com/devpla"><img src="public/images/Yeonhee.svg"/></a>
 </td>
 <td align="center" width="200px">
 <a href="https://github.com/SonSangjoon/"><img src="public/images/Sangjoon.svg"/></a>
 </td>
 <td align="center" width="200px">
 <a href="https://github.com/Yewonn/"><img src="public/images/Yewon.svg"/></a>
 </td>
 </tr>
 <tr>
 <td align="center" width="200px">
 <a href="https://github.com/jhj0602/">진형준</a> Backend | Leader
 </td>
 <td align="center" width="200px">
 <a href="https://github.com/wangsuuu/">왕수련</a> Backend
 </td>
 <td align="center" width="200px">
 <a href="https://github.com/devpla/">채연희</a> Frontend | Design
 </td>
 <td align="center" width="200px">
 <a href="https://github.com/SonSangjoon/">손상준</a> Frontend
 </td>
 <td align="center" width="200px">
 <a href="https://github.com/Yewonn/">이예원</a> Frontend
 </td>
 </tr>
</table>

## 버전 기록

| 버전 | 업데이트 내용 | 업데이트 날짜 |
| ------ | ------------------------------------------------------------------------------------------------------------------------------------------ | ------------- |
| v0.1.0 | - SSAFE 서비스 오픈 | 22.02.12 |
| v0.1.1 | - footer 내용 생성(만든 사람, 이용 약관, 개인정보처리방침 등) 및 링크 연결 - 첫 접속 시 랜딩 페이지 type error 수정 - 채용 상세보기 시 관련 스터디가 로딩되지 않는 오류 수정 | 22.02.20 |
| v0.1.2 | - 디테일 페이지에서 Refresh시 Home redirect 현상 수정 - main 페이지 carousel banner 연결 - 취업 정보 페이지 마감임박 버튼 수정 | 22.02.24 |

## 실행 방법

### client 실행

1. **원격 저장소 복제**

```bash
$ git clone https://lab.ssafy.com/s06-webmobile2-sub2/S06P12A604.git
```

2. **프로젝트 폴더로 이동**

```bash
$ cd client
```

3. **필요한 node_modules 설치**

```bash
$ yarn install
```

4. **개발 서버 실행**

```bash
$ yarn start
```

### server 실행

1. **원격 저장소 복제**

```bash
$ git clone https://lab.ssafy.com/s06-webmobile2-sub2/S06P12A604.git
```

2. **프로젝트 폴더로 이동**

```bash
$ cd server
```

3. **main 메서드 실행하기**

client

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README