ssafé

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

소개

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

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

✨ SSAFE 바로가기 ✨

• 디자인 시스템
• 서비스 소개 영상
• Notion
• Figma

개발 기간

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을 사용했어요.

🌐 Network

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

💻 Testing

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

주요 기능

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

유저 인증 페이지

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

랜딩 페이지

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

메인 페이지

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

채용 공고 페이지

• 자유롭게 개설, 참여할 수 있는 스터디 📖

  스터디 페이지

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

커뮤니티 페이지

• 섬세한 반응형 구현 🎆

커뮤니티 페이지	스터디 페이지	채용 페이지

• 다크모드 지원 🌙

커뮤니티 페이지	스터디 페이지

• Footer에서 ssafe에 대한 추가 정보들을 살펴볼 수 있어요.

  커뮤니티 페이지

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

프로젝트 구성도

아키텍처(Architecture)

개발 팀 소개

진형준 Backend | Leader	왕수련 Backend	채연희 Frontend | Design	손상준 Frontend	이예원 Frontend

버전 기록

버전	업데이트 내용	업데이트 날짜
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. 원격 저장소 복제

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

2. 프로젝트 폴더로 이동

$ cd client

3. 필요한 node_modules 설치

$ yarn install

4. 개발 서버 실행

$ yarn start

server 실행

1. 원격 저장소 복제

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

2. 프로젝트 폴더로 이동

$ cd server

3. main 메서드 실행하기