나만의 작은 시니또

"디지털시대?! 나도 이제 두렵지 않아!"

👦🏻 세대와 👨🏻‍🦳세대를 이어주는 따뜻한 전화 📞

나만의 작은 시니또

🚀 배포 주소

✔️ Client

https://sinitto.life

✔️ Dummy Data Login

https://sinitto.site/dummy

비밀번호 1234

✨ Local 환경 실행 방법

project를 local 환경에 clone 합니다.

git clone https://github.com/kakao-tech-campus-2nd-step3/Team8_FE

node 를 설치하고, version을 확인합니다. (v20 이상을 권장합니다.)

Node.js 설치

node --version

-> v22.10.0

package-manager인 Pnpm을 설치한다.

npm install -g pnpm

프로젝트에 설치되어있는 라이브러리를 local 환경에 설치합니다.

pnpm install

local 환경으로 프로젝트를 실행합니다.

pnpm run dev

-> https://localhost:5173/

👥 팀원

Frontend	Frontend	Frontend

김강민	정지원	제유나

Backend	Backend	Backend	Backend

정성훈	이지호	이도훈	김은선

⚒️ 기술 스텍

Frontend

Backend

서비스 아키텍처

ERD

📁 폴더 구조

Note

해당 폴더 구조를 참고하였습니다.

프론트엔드 개발자 관점으로 바라보는 관심사의 분리와 좋은 폴더 구조 (feat. FSD)

.
├── README.md
├── __mocks__
│   ├── fileMock.d.ts
│   ├── fileMock.js
│   └── styleMock.js
├── babel.config.js
├── index.html
├── jest.config.ts
├── package.json
├── pnpm-lock.yaml
├── public
│   ├── favicon.ico
│   ├── icons
│   └── image
├── src
│   ├── App.tsx
│   ├── app
│   │   ├── index.ts
│   │   └── routes
│   │       ├── components
│   │       │   ├── index.ts
│   │       │   └── protected-route
│   │       ├── index.ts
│   │       ├── path.ts
│   │       └── router.tsx
│   ├── declaration.d.ts
│   ├── main.tsx
│   ├── pages
│   │   ├── assets
│   │   │   ├── index.ts
│   │   │   ├── main
│   │   │   ├── shared
│   │   │   └── sinitto-main
│   │   ├── common
│   │   │   ├── dummy-redirect
│   │   │   ├── index.ts
│   │   │   ├── onboard
│   │   │   │   ├── components
│   │   │   │   ├── index.ts
│   │   │   │   ├── types
│   │   │   │   └── ui
│   │   │   ├── redirect
│   │   │   │   ├── api
│   │   │   │   ├── components
│   │   │   │   ├── index.ts
│   │   │   │   ├── types
│   │   │   │   └── ui
│   │   │   ├── register
│   │   │   │   ├── api
│   │   │   │   ├── components
│   │   │   │   ├── data
│   │   │   │   ├── hooks
│   │   │   │   ├── index.ts
│   │   │   │   ├── types
│   │   │   │   └── ui
│   │   │   └── service-manual
│   │   │       ├── components
│   │   │       ├── index.ts
│   │   │       └── ui
│   │   ├── guard
│   │   │   ├── guard-main
│   │   │   │   ├── components
│   │   │   │   ├── hooks
│   │   │   │   ├── index.ts
│   │   │   │   └── ui
│   │   │   ├── guide-line
│   │   │   │   ├── api
│   │   │   │   ├── components
│   │   │   │   ├── data
│   │   │   │   ├── hooks
│   │   │   │   ├── index.ts
│   │   │   │   ├── types
│   │   │   │   └── ui
│   │   │   ├── hello-call-apply
│   │   │   │   ├── apis
│   │   │   │   ├── components
│   │   │   │   ├── data
│   │   │   │   ├── hooks
│   │   │   │   ├── index.ts
│   │   │   │   ├── types
│   │   │   │   └── ui
│   │   │   ├── hello-call-report
│   │   │   │   ├── apis
│   │   │   │   ├── components
│   │   │   │   ├── hooks
│   │   │   │   ├── index.ts
│   │   │   │   ├── types
│   │   │   │   └── ui
│   │   │   ├── index.ts
│   │   │   ├── mypage
│   │   │   │   ├── api
│   │   │   │   ├── components
│   │   │   │   ├── hooks
│   │   │   │   ├── index.ts
│   │   │   │   ├── types
│   │   │   │   └── ui
│   │   │   ├── register
│   │   │   │   ├── api
│   │   │   │   ├── components
│   │   │   │   ├── data
│   │   │   │   ├── hooks
│   │   │   │   ├── index.ts
│   │   │   │   ├── types
│   │   │   │   └── ui
│   │   │   ├── review
│   │   │   │   ├── api
│   │   │   │   ├── asset
│   │   │   │   ├── hooks
│   │   │   │   ├── index.ts
│   │   │   │   ├── types
│   │   │   │   └── ui
│   │   │   └── service-history
│   │   │       ├── apis
│   │   │       ├── components
│   │   │       ├── data
│   │   │       ├── hooks
│   │   │       ├── index.ts
│   │   │       ├── types
│   │   │       └── ui
│   │   ├── index.ts
│   │   └── sinitto
│   │       ├── call-back
│   │       │   ├── detail
│   │       │   │   ├── api
│   │       │   │   ├── assets
│   │       │   │   ├── components
│   │       │   │   ├── data
│   │       │   │   ├── hooks
│   │       │   │   ├── types
│   │       │   │   ├── ui
│   │       │   ├── index.ts
│   │       │   └── list
│   │       │   │   ├── api
│   │       │   │   ├── assets
│   │       │   │   ├── components
│   │       │   │   ├── data
│   │       │   │   ├── hooks
│   │       │   │   ├── index.ts
│   │       │   │   ├── types
│   │       │   │   └── ui
│   │       ├── guide-line
│   │       │   │   ├── api
│   │       │   │   ├── assets
│   │       │   │   ├── components
│   │       │   │   ├── data
│   │       │   │   ├── hooks
│   │       │   │   ├── index.ts
│   │       │   │   ├── types
│   │       │   │   └── ui
│   │       ├── hello-call-detail
│   │       │   │   ├── api
│   │       │   │   ├── assets
│   │       │   │   ├── components
│   │       │   │   ├── data
│   │       │   │   ├── hooks
│   │       │   │   ├── index.ts
│   │       │   │   ├── types
│   │       │   │   └── ui
│   │       ├── hello-call-list
│   │       │   ├── apis
│   │       │   ├── components
│   │       │   ├── hooks
│   │       │   ├── index.ts
│   │       │   ├── types
│   │       │   └── ui
│   │       ├── hello-call-report
│   │       │   ├── apis
│   │       │   ├── components
│   │       │   ├── hooks
│   │       │   ├── index.ts
│   │       │   ├── types
│   │       │   └── ui
│   │       ├── hello-call-service
│   │       │   ├── __test__
│   │       │   ├── apis
│   │       │   ├── components
│   │       │   ├── data
│   │       │   ├── hooks
│   │       │   ├── index.ts
│   │       │   ├── types
│   │       │   └── ui
│   │       ├── index.ts
│   │       ├── mypage
│   │       │   ├── api
│   │       │   ├── components
│   │       │   ├── data
│   │       │   ├── hooks
│   │       │   ├── index.ts
│   │       │   ├── types
│   │       │   └── ui
│   │       ├── point
│   │       ├── review
│   │       │   └── components
│   │       ├── service-history
│   │       │   ├── apis
│   │       │   ├── components
│   │       │   ├── data
│   │       │   ├── hooks
│   │       │   ├── index.ts
│   │       │   ├── types
│   │       │   └── ui
│   │       └── sinitto-main
│   │           ├── apis
│   │           ├── components
│   │           ├── hooks
│   │           ├── index.ts
│   │           ├── types
│   │           └── ui
│   ├── setupTests.ts
│   ├── shared
│   │   ├── api
│   │   │   ├── hooks
│   │   │   ├── index.ts
│   │   │   ├── instance
│   │   │   ├── logout.api.ts
│   │   │   ├── point
│   │   │   └── withdrawal.api.ts
│   │   ├── assets
│   │   ├── components
│   │   │   ├── common
│   │   │   │   ├── button
│   │   │   │   ├── guide-line-button
│   │   │   │   ├── index.ts
│   │   │   │   ├── layout
│   │   │   │   ├── modal
│   │   │   │   │   └── index.tsx
│   │   │   │   ├── page-layout
│   │   │   │   └── view
│   │   │   ├── features
│   │   │   │   ├── header
│   │   │   │   ├── index.ts
│   │   │   │   ├── mypage
│   │   │   │   │   ├── index.ts
│   │   │   │   │   ├── logout-button
│   │   │   │   │   ├── point-box
│   │   │   │   │   ├── point-log-box
│   │   │   │   │   └── withdrawal-button
│   │   │   │   └── notice
│   │   │   └── index.ts
│   │   ├── constants
│   │   │   ├── error-status
│   │   │   └── index.ts
│   │   ├── hooks
│   │   │   ├── hello-call
│   │   │   ├── index.ts
│   │   │   └── point
│   │   ├── index.ts
│   │   ├── provider
│   │   ├── styles
│   │   │   ├── index.ts
│   │   │   ├── reset.css
│   │   │   └── variants
│   │   │       └── index.ts
│   │   ├── theme
│   │   │   ├── global
│   │   │   └── index.ts
│   │   ├── types
│   │   └── utils
│   │       ├── dateUtils.ts
│   │       ├── formatPhoneNumber.ts
│   │       ├── handle-callback-error.ts
│   │       ├── index.ts
│   │       ├── statusUtils.ts
│   │       ├── storage
│   │       │   ├── authStorage.ts
│   │       │   └── index.ts
│   │       ├── test
│   │       │   ├── dateUtils.test.ts
│   │       │   ├── formatPhoneNumber.test.ts
│   │       │   ├── statusUtils.test.ts
│   │       │   └── validateInformation.test.ts
│   │       ├── validateAccountNumber.ts
│   │       ├── validateName.ts
│   │       └── validatePhoneNumber.ts
│   └── vite-env.d.ts
├── sw.js
├── tsconfig.json
├── tsconfig.node.json
├── tsconfig.test.json
└── vite.config.ts

🤔 시니또가 무엇인가요?

‘시니또’는 어르신을 뜻하는 ‘시니어’와 비밀 친구를 뜻하는 ‘마니또’를 합친 단어로, 디지털 서비스를 이용하기 어려운 어르신들과 디지털 서비스를 이용하는데 익숙한 젊은 세대를 이어주기 위한 ‘시니또’라는 명칭을 사용해보았습니다.

또한 ‘시니또’는 세대 간의 소통을 강조하며, 서로의 필요를 이해하고 지원하는 관계를 형성하고자 하는 취지를 담고 있습니다.

🧑🏻‍💻 어떤 서비스인가요?

과거에는 시니어들이 전화를 통해 배달 주문이나 서비스 이용을 비교적 쉽게 할 수 있었습니다. 그러나 스마트폰이 발달한 현재, 대부분의 서비스가 스마트폰 애플리케이션 기반으로 제공되고있어, 시니어들이 이러한 디지털 서비스를 이용하는 데 많은 어려움을 겪고 있습니다.

실제로 저희 조원 중 한 분의 할아버지께서는 스마트폰 사용에 어려움을 느끼셨고, 주로 조원분들에게 전화를 하여 도움을 요청하셨습니다. 이러한 문제점을 바탕으로 저희는 ‘어르신들이 예전에 자주 사용하시던 전화를 통해 디지털 서비스를 쉽게 이용할 수는 없을까?’ 라는 생각을 하게 되었고, 이를 ‘시니또’ 서비스의 핵심 기능으로 자리 잡게 되었습니다.

이 서비스는 어르신들이 보다 쉽게 디지털 서비스를 이용할 수 있도록 돕는 동시에, 젊은 세대가 그들과 소통하고 지원할 수 있는 기회를 제공하고자 합니다.

💬 핵심 기능 간략한 설명

‘시니또‘는 크게 두 가지의 핵심 기능이 있습니다.

콜백 서비스

어르신들이 전화 한 통으로 디지털 서비스를 이용할 수 있게 합니다.

이 서비스를 원활하게 이용할 수 있도록 보호자는 사전에 시니또 서비스에 시니어를 등록하고, 시니어가 요청할 내용이 담긴 가이드라인을 제공합니다.

안부 전화 서비스

평소 업무 등의 활동으로 인해 시니어분들과 연락할 시간이 부족한 보호자들을 위한 서비스입니다.

보호자는 사전에 웹사이트에 안부전화 서비스를 이용할 기간, 시간대, 전화 시간 및 전화로 확인했으면 하는 내용을 작성하고, 시니또는 해당 요청사항을 확인한 후 수락 버튼을 눌러 안부 전화 서비스를 수행하게 됩니다.

💡 핵심 기능 상세 설명

1. 공통

로그인

’카카오톡 로그인’ 버튼을 눌러 로그인을 진행합니다. 이전에 로그인을 한 적이 있을 경우 바로 로그인이 완료되며, 처음 이용할 경우 회원가입 창으로 이동하게 됩니다.

회원가입

사용자는 가입 유형인 ‘시니또‘와 ’보호자‘ 중 한 가지 유형을 선택합니다.

여기서 ’시니또‘는 시니어의 디지털 서비스를 수행하는 사람이며, ’보호자‘는 디지털 서비스를 필요로 하는 시니어를 등록하는 사람입니다.

사용자는 가입 유형을 선택한 후 이름 및 연락처를 입력하고, 아래의 서약서를 읽은 후 ’서약서의 내용에 동의합니다‘를 체크한 후에 ’가입하기‘ 버튼을 눌러 회원가입을 완료합니다.

2. 포인트

포인트 충전 (보호자)

‘보호자’는 포인트를 충전하여 시니어가 제공받는 서비스의 값을 제공합니다.

‘충전하기’ 버튼을 누른 후, 충전 금액을 입력하면 충전 요청이 완료되며, 이러한 요청은 관리자에게 전달됩니다.

그 후 카카오톡의 ‘나에게 보낸 메시지’를 확인하여 금액을 입금할 은행계좌와 입금자명을 확인하고, 해당 양식에 맞추어 입금을 진행합니다.

관리자는 입금 내역을 확인한 후 포인트를 지급합니다.

포인트 출금 (시니또)

‘시니또’는 콜백 서비스 및 안부전화 서비스를 통해 받은 포인트를 현금으로 환전할 수 있습니다.

최소 5000포인트 이상이 있어야 출금이 가능하며, 출금할 포인트를 입력한 후, ‘출금 신청’ 버튼을 눌러 출금 요청을 관리자에게 전송합니다.

관리자는 이를 확인한 후, 등록된 계좌번호로 수수료를 제외한 금액을 송금합니다.

3. 콜백 서비스

시니어 등록 (보호자)

‘보호자’는 디지털 서비스를 이용할 시니어를 등록합니다. 마이페이지의 ‘시니어 등록하기’버튼을 눌러 시니어를 등록합니다.

시니어를 등록하기 위해 시니어의 성함 및 전화번호를 입력해야 합니다.

가이드라인 등록 (보호자)

‘보호자’는 시니어를 등록한 후, 각 목록에 대한 가이드라인을 등록하여야 합니다. 택시 호출하기 , 음식 배달 주문하기 , 병원 접수 대행 , 여행 및 문화 생활 예약 대행 에 대한 가이드라인을 추가할 수 있으며, 가이드라인 제목 및 가이드라인 내용을 입력하여야 합니다.

‘시니또’가 이 내용을 확인한 후 디지털 서비스를 수행하기 때문에, 가능한 내용을 상세히 적어야 원할한 서비스 진행이 가능합니다.

전화를 통한 등록 (시니어)

‘시니어’는 메인 페이지에 적혀있는 번호로 전화를 하여 콜백 서비스를 요청합니다. 등록이 성공했을 경우 ‘감사합니다. 잠시만 기다려주세요.’ 라는 기계음이 들리며, ‘시니또’가 요청을 수락할 때까지 기다리고 있으면 됩니다.

콜백 요청 확인 (시니또)

‘시니또’는 시니어가 요청한 콜백 서비스의 리스트를 확인할 수 있습니다. 여러 요청들 중 하나를 선택하여 상세한 내용을 확인할 수 있습니다.

콜백 요청 수락 & 수행 (시니또)

‘시니또’는 시니어가 요청한 콜백 서비스의 리스트 중 하나를 선택하여 ‘요청 상세페이지’로 이동할 수 있습니다.

각 목록마다 버튼을 클릭하여 상세한 내용을 확인할 수 있으며, 내용을 확인하고 서비스를 수행할 수 있을 경우 ‘전화걸기 및 수락하기’ 버튼을 클릭하여 서비스를 시작합니다.

콜백 요청 완료 대기 (시니또)

‘시니또’가 ‘전화걸기 및 수락하기’ 버튼을 누르면 아래에 ‘시니어 전화번호’가 뜨게됩니다.

‘시니또’는 해당 전화번호로 전화를 걸어 시니어가 어떤 요청을 하는지 확인하고, 해당 서비스를 수행합니다.

이 때, 가이드라인과 벗어나는 내용을 부탁하거나, ‘시니또’가 수행할 수 없는 부탁을 할 경우 ‘도움 포기’ 버튼을 눌러 해당 요청을 거부할 수 있습니다.

요청을 완료한 후 ‘도움 완료’버튼을 눌러 완료 대기 상태로 전환할 수 있습니다.

콜백 요청 완료 (보호자)

'보호자'는 '시니또'가 완료 버튼을 누른 후, 시니어에게 해당 요청이 제대로 완료되었는지 확인합니다. 그 다음 '서비스 이용내역' 화면에서 완료 대기 상태인 콜백 서비스를 완료 상태로 변경할 수 있습니다.

만약 보호자가 이틀 동안 이 버튼을 누르지 않으면, 서비스는 자동으로 완료 상태로 변경됩니다.

4. 안부 전화 서비스

시니어 등록 (보호자)

‘보호자’는 디지털 서비스를 이용할 시니어를 등록합니다.

마이페이지의 ‘시니어 등록하기’버튼을 눌러 시니어를 등록합니다.

시니어를 등록하기 위해 시니어의 성함 및 전화번호를 입력해야 합니다.

안부전화 서비스 등록 (보호자)

‘보호자’는 안부전화 서비스를 받을 시니어를 선택하고, 서비스 이용 시간대 및 이용 시간을 선택합니다.

그 후 서비스 이용 기간을 선택하고, 아래의 ‘포인트 계산하기’ 버튼을 클릭하여 비용을 확인합니다.

그 후 ‘시니또’ 가 시니어와 나눌 대화의 주제를 입력하고, ‘신청하기’ 버튼을 클릭하여 안부전화 서비스 신청을 완료합니다.

안부전화 서비스 확인 (시니또)

‘시니또’는 ‘안부전화 서비스’에서 현재 대기 중인 안부전화 서비스 목록을 확인할 수 있습니다.

여러 목록들 중 하나를 선택하여 안부전화 서비스를 진행할 시간대를 확인하며, 아래의 ‘서비스 상세 확인하기’버튼을 클릭하여 시니어의 번호를 확인합니다.

안부전화 서비스 수락 & 수행 (시니또)

‘시니또’는 시니어의 전화번호 및 요청사항을 확인한 후, ‘서비스 수락하기’ 버튼을 클릭하여 안부전화 서비스를 수행합니다.

안부전화 서비스 완료 대기 (시니또)

‘시니또’는 지정된 기간 동안 안부전화 서비스를 수행하고, 서비스 수행기간이 끝나는 날짜 이후에 ‘안부전화 서비스 보고서‘를 작성할 수 있습니다.

보고서에는 안부전화 서비스 기간 동안 시니어와 나누었던 대화를 작성해야 하며, 내용을 작성한 후 ’보고서 제출하기‘ 버튼을 클릭하여 보고서를 제출합니다.

안부전화 서비스 완료 (보호자)

’보호자‘는 ’서비스 이용내역‘ 페이지에서 완료 대기 상태인 안부전화 서비스를 완료상태로 변경할 수 있습니다.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Repository files navigation

나만의 작은 시니또

"디지털시대?! 나도 이제 두렵지 않아!"

목차

🚀 배포 주소

✔️ Client

✔️ Dummy Data Login

✔️ Server

✔️ API 명세서 (Swagger)

✔️ Slack

✔️ Backend 최종 개발현황

✨ Local 환경 실행 방법

👥 팀원

⚒️ 기술 스텍

Frontend

Backend

서비스 아키텍처

ERD

📁 폴더 구조

🤔 시니또가 무엇인가요?

🧑🏻‍💻 어떤 서비스인가요?

💬 핵심 기능 간략한 설명

콜백 서비스

안부 전화 서비스

💡 핵심 기능 상세 설명

1. 공통

2. 포인트

3. 콜백 서비스

4. 안부 전화 서비스

About

Releases

Packages

Contributors 5

Languages

Name		Name	Last commit message	Last commit date
Latest commit History 875 Commits
.github		.github
__mocks__		__mocks__
public		public
src		src
.eslintignore		.eslintignore
.eslintrc.json		.eslintrc.json
.gitignore		.gitignore
.prettierignore		.prettierignore
.prettierrc.json		.prettierrc.json
README.md		README.md
babel.config.js		babel.config.js
index.html		index.html
jest.config.ts		jest.config.ts
package.json		package.json
pnpm-lock.yaml		pnpm-lock.yaml
sw.js		sw.js
tsconfig.json		tsconfig.json
tsconfig.node.json		tsconfig.node.json
tsconfig.test.json		tsconfig.test.json
vite.config.ts		vite.config.ts

kakao-tech-campus-2nd-step3/Team8_FE

Folders and files

Latest commit

History

Repository files navigation

나만의 작은 시니또

"디지털시대?! 나도 이제 두렵지 않아!"

목차

🚀 배포 주소

✔️ Client

✔️ Dummy Data Login

✔️ Server

✔️ API 명세서 (Swagger)

✔️ Slack

✔️ Backend 최종 개발현황

✨ Local 환경 실행 방법

👥 팀원

⚒️ 기술 스텍

Frontend

Backend

서비스 아키텍처

ERD

📁 폴더 구조

🤔 시니또가 무엇인가요?

🧑🏻‍💻 어떤 서비스인가요?

💬 핵심 기능 간략한 설명

콜백 서비스

안부 전화 서비스

💡 핵심 기능 상세 설명

1. 공통

2. 포인트

3. 콜백 서비스

4. 안부 전화 서비스

About

Resources

Stars

Watchers

Forks

Releases

Packages 0

Contributors 5

Languages

Packages