OGSM(Objective, Goal, Strategy, Measure) Modal이란 장기적인 측면에서 우리가 달성하고자 하는 것이 무엇이고, 그것을 어떻게 달성하고 있는가를 알게 해주는 툴이다.
프로젝트명: OGSM
기획 및 제작: yeonsu
제작 기간: 2023.11 - 2023.12 (v1.0)
주요 기능: 구글 로그인, OGSM 추가/수정/삭제
- Frontend: Next.js, TypeScript, CSS, MUI
- Backend: Firebase
https://ogsm.vercel.app/
- Firebase Authentication를 활용한 구글 로그인 및 관리
- Cloud FireStore를 활용한 사용자별 OGSM 데이터 관리
- Goal, 디데이, 러닝데이 정보가 표시된다.
- Switch Toggle을 통해 Done State를 변경한다.
- 로그인 상태가 아니거나 OGSM 데이터가 없는 경우 문구로 대체한다.
![](https://camo.githubusercontent.com/0c4c2411fa452e7e118077a90337d54777c8ccda68b5c76c51fbdf97998aa1f4/68747470733a2f2f76656c6f672e76656c63646e2e636f6d2f696d616765732f79656f6e73756261656b2f706f73742f37386131313433352d653963632d346366612d386436642d3030396433663631353238332f696d6167652e706e67) |
![](https://camo.githubusercontent.com/466a4698fa32e324b093c5e195ef8abb005972d28553a85108f5dbdbc6d6b309/68747470733a2f2f76656c6f672e76656c63646e2e636f6d2f696d616765732f79656f6e73756261656b2f706f73742f36383264356435612d376431342d346266662d613232642d3031343031363039383163642f696d6167652e706e67) |
![](https://camo.githubusercontent.com/dc5cd849944d95c1bf015e36f338db682d2e3e4101d899f999c85167985c8375/68747470733a2f2f76656c6f672e76656c63646e2e636f6d2f696d616765732f79656f6e73756261656b2f706f73742f36663935373665372d396137662d343532362d383762322d3333366132396235643037392f696d6167652e706e67) |
![](https://camo.githubusercontent.com/86e285bf87f8665ccaee49b987790790fa579788d6b79f17d5d6b58ae7d5a9e5/68747470733a2f2f76656c6f672e76656c63646e2e636f6d2f696d616765732f79656f6e73756261656b2f706f73742f32656539326433382d633161342d343862302d626135622d3761333436306238643161312f696d6167652e706e67) |
로그인 X |
로그인 O 데이터 X |
로그인 O 데이터 O |
Done State 변경 |
- Objective, Goal, Strategy, Measure, Start Date, End Date를 작성한다.
- 글자 수 또는 값 중복 제한과 같은 유효성 검사를 실시한다.
- 필수 값 여부에 따라 저장 버튼 활성화가 결정된다.
![](https://camo.githubusercontent.com/9a51997b1d6f915aeeb07e8e034d66fa13827b79aac45465ff6df8fe590af923/68747470733a2f2f76656c6f672e76656c63646e2e636f6d2f696d616765732f79656f6e73756261656b2f706f73742f35366236636632612d356635362d346233362d623135322d3363373236303931313432642f696d6167652e706e67) |
![](https://camo.githubusercontent.com/6365be9529b772944c7b1a24f0feea73d8ee22257e6283f530ac1289bef2af99/68747470733a2f2f76656c6f672e76656c63646e2e636f6d2f696d616765732f79656f6e73756261656b2f706f73742f63326563333434312d323233382d343038612d613138312d3761383934326163373434372f696d6167652e706e67) |
![](https://camo.githubusercontent.com/8e2de691059436fd0573dcd08c7dce5524fd3f7c37d33ae87c64fb60e7aa96c7/68747470733a2f2f76656c6f672e76656c63646e2e636f6d2f696d616765732f79656f6e73756261656b2f706f73742f32383339333566302d303733632d343033362d623330342d3666333563343966393639362f696d6167652e706e67) |
![](https://camo.githubusercontent.com/ab78e3da3b831e605124dd295fb3f2bfd1c4197c1720ab50d48fd36a68bd45dc/68747470733a2f2f76656c6f672e76656c63646e2e636f6d2f696d616765732f79656f6e73756261656b2f706f73742f30343232636364382d623436612d346332342d613734382d3232333036633562626138312f696d6167652e706e67) |
입력 값이 빈 경우 |
유효성 검사 실패 |
저장 성공 |
저장 실패 |
- Objective, Goal, Strategy, Measure, Start Date, End Date, Done State를 수정한다.
- 수정 사항이 없는 경우 저장 버튼을 비활성화 한다.
![](https://camo.githubusercontent.com/88d7753bbc1211f4dd6295ae0aef3f05dc4e29167c10fc14c44d94fb9f8f978c/68747470733a2f2f76656c6f672e76656c63646e2e636f6d2f696d616765732f79656f6e73756261656b2f706f73742f30653231326261312d666537612d346634332d616334662d3739623762333936393061352f696d6167652e706e67) |
![](https://camo.githubusercontent.com/2b946ab0ddbf5baa769b1ef9c5df863aefcd49cea3de23a2002117a17fe97c11/68747470733a2f2f76656c6f672e76656c63646e2e636f6d2f696d616765732f79656f6e73756261656b2f706f73742f66356333383231342d393839332d346461612d626130302d3831386366393733303064332f696d6167652e706e67) |
수정 성공 |
수정 실패 |
- Modal 하단 삭제 버튼으로 OGSM을 삭제한다.
![](https://camo.githubusercontent.com/3ebb3b2230c3995fe0b24cb959248fc04099b607289b35fdf409985c32f2f837/68747470733a2f2f76656c6f672e76656c63646e2e636f6d2f696d616765732f79656f6e73756261656b2f706f73742f64643539663235622d363530632d343038332d393065322d6666306262363237323936322f696d6167652e706e67) |
![](https://camo.githubusercontent.com/7db5c9fd2710a9c58eb46804a405f7b19a3ad2f1d66d937a6b113550cb938350/68747470733a2f2f76656c6f672e76656c63646e2e636f6d2f696d616765732f79656f6e73756261656b2f706f73742f31326430323266312d323438652d346561652d383132632d6534353165316535663837662f696d6167652e706e67) |
삭제 성공 |
삭제 실패 |
For building and running the application you need:
Node.js 18.16.0
Npm 9.5.1
git clone https://github.com/YeonsuBaek/OGSM.git
npm install
npm run dev
📦src
┣ 📂app
┃ ┣ 📂main
┃ ┃ ┗ 📜page.tsx
┃ ┣ 📂providers
┃ ┃ ┗ 📜index.tsx
┃ ┣ 📜index.css
┃ ┣ 📜layout.tsx
┃ ┗ 📜page.tsx
┣ 📂components
┃ ┣ 📂blocks
┃ ┃ ┣ 📂button
┃ ┃ ┃ ┗ 📜OgsmAddButton.tsx
┃ ┃ ┣ 📂form
┃ ┃ ┃ ┣ 📜DatePickerForm.tsx
┃ ┃ ┃ ┣ 📜SwitchForm.tsx
┃ ┃ ┃ ┗ 📜TextFieldForm.tsx
┃ ┃ ┣ 📂modal
┃ ┃ ┃ ┗ 📜OgsmModal.tsx
┃ ┣ 📂features/main
┃ ┃ ┣ 📜Content.tsx
┃ ┃ ┣ 📜Header.tsx
┃ ┃ ┣ 📜OgsmItem.tsx
┃ ┗ ┗ 📜OgsmList.tsx
┣ 📂hooks
┃ ┣ 📜useAuth.tsx
┃ ┣ 📜useGetOgsm.tsx
┃ ┣ 📜useLoginOgsm.tsx
┃ ┣ 📜useLogoutOgsm.tsx
┃ ┣ 📜useMutationOgsm.tsx
┃ ┗ 📜useSaveOgsm.tsx
┣ 📂types
┗ ┗ 📜index.tsx