누구에게나 물어보고 싶었던 질문, 이제는 자유롭게 말하세요! 오픈 마인드와 함께
오픈 마인드는
익명으로 고민을 나누고, 서로 질문과 답변을 주고받는 1인 피드 기반 커뮤니티입니다.
실명, 팔로우, 좋아요 수의 부담 없이 가상의 이름만으로 계정을 만들고,
오직 콘텐츠와 대화에 집중할 수 있는 심리적 안전지대형 익명 SNS입니다.
| 항목 | 사용 기술 |
|---|---|
| 개발 언어 | JavaScript, HTML, CSS |
| 코드 에디터 | Visual Studio Code (VSC) |
| 프레임워크 | React |
| 포매터 | ESLint, Prettier |
| 번들링 | Vite |
| 형상 관리 | Git |
| 스타일링 | styled-components |
| 배포 | Netlify |
| 라우팅 | React Router |
| 데이터 패칭 | axios |
- React
- 컴포넌트화를 통해 추후 유지보수와 재사용성을 고려했습니다.
- 버튼, 모달, 토스트 등 중복되어 사용되는 부분이 많아 컴포넌트화를 통해 리소스 절약이 가능했습니다.
- styled-component
- props를 이용한 조건부 스타일링을 활용하여 상황에 알맞은 스타일을 적용시킬 수 있었습니다.
- 빌드될 때 고유한 클래스 이름이 부여되어 네이밍 컨벤션을 정하는 비용을 절약할 수 있었습니다.
- SPA(Single Page Application) 특성에 맞게 페이지 이동 시 전체 리로드 없이 컴포넌트만 변경되어 사용자 경험이 향상되었습니다.
- BrowserRouter, Routes, Route 등을 활용해 명확한 라우팅 구조를 구성할 수 있었고,
유지보수 시 페이지별 컴포넌트 위치를 직관적으로 파악할 수 있었습니다. - 중첩 라우팅과 URL 파라미터, 쿼리스트링 등을 통해 동적인 페이지 구성에도 유연하게 대응할 수 있었습니다.
- SVG 파일을 리액트 컴포넌트처럼 사용할 수 있어 아이콘이나 일러스트 등을 재사용하기 쉬웠습니다.
- JSX 문법을 그대로 사용할 수 있어 SVG에 props를 전달하거나 조건부 렌더링을 적용하는 등 유연한 UI 구성이 가능했습니다.
- 정해진 규칙에 따라 자동적으로 코드 스타일을 정리해 코드의 일관성을 유지하고자 했습니다.
- 코드 품질 관리는 eslint에, 코드 포맷팅은 prettier에 일임해 사용했습니다.
- airbnb의 코딩 컨벤션을 참고해 사용했고, 예외 규칙은 팀원들과 협의했습니다.
| 이름 | 역할 |
|---|---|
| main | 배포(프로덕션)용 코드. 항상 안정된 상태 유지 |
| feature/xxx | 새로운 기능, 작업 단위별 브랜치 |
| fix/xxx | 버그 수정 브랜치 |
📦 open-mind/
|
├── public/
│ └── images/
├── src/
│ ├── assets/
│ │ ├── icons/
│ │ └── images/
│ ├── components/
│ ├── context/
│ ├── pages/
│ │ ├── PostPage/
│ │ │ └── components/
│ │ ├── HomePage/
│ │ └── ListPage/
│ ├── styles/
│ ├── hooks/
│ ├── functions/
│ └── services/
├── .eslintrc.cjs
├── .prettierrc
├── vite.config.js
├── jsconfig.json
├── package.json
└── README.md
- 사용자는 접속 즉시 이름 입력 창을 확인합니다.
- 가상의 이름을 입력하면:
- 고유 ID와 함께 계정이 생성됩니다.
- 이름과 ID가 브라우저의 Local Storage에 저장됩니다.
- 이후 다시 이름을 입력하면:
- 저장된 ID와 이름이 일치할 경우 → 기존 계정의 피드로 이동
- 일치하지 않으면 → 새로운 피드 생성 불가
- 해당 페이지로 이동하면 '최신순'으로 여러 사용자를 확인할 수 있습니다.
- 사용자의 카드를 클릭하면 해당 사용자의 피드 페이지로 이동합니다.
- 정렬 셀렉터를 통해 '이름순', '최신순'을 골라서 정렬할 수 있습니다.
- 하단의 페이지네이션을 통해 페이지를 넘길 수 있습니다.
- 답변하기를 클릭했을 때
- 로컬스토리지에 계정정보가 등록되지 않은 경우 [초기화면]으로 돌아갑니다.
- 계정정보가 존재할 경우 해당 계정의 피드 페이지로 이동합니다.
- 스크롤을 내려 다른 유저에게 달린 질문들을 확인할 수 있습니다.
- 질문 작성하기를 통해 다른 유저에게 질문을 남길 수 있습니다.
- 복사하기 버튼을 통해 페이지의 주소를 클립보드에 복사할 수 있습니다.
- 카카오톡, 페이스북 공유하기 버튼을 통해 해당 서비스에서 공유할 수 있습니다.
- 나에게 달린 질문들을 스크롤을 내려 확인할 수 있습니다.
- 아직 답을 달지 않았을 때
- 미답변 상태로 표시됩니다.
- 텍스트 에어리어에 답변을 작성 후 '답변완료' 버튼을 통해 답을 달 수 있습니다.
- 답을 달았을 때
- 답변 완료 상태로 표시됩니다.
- 미트볼 버튼을 통해 답변을 수정할 수 있습니다.
- 답변을 거절할 수도 있습니다.
- 해당 질문을 삭제할 수도 있습니다.
- 현재 계정을 삭제하고 싶을 때
- 답변 목록 상단에 삭제하기 버튼을 눌러 나에게 달린 질문들과 회원정보를 삭제합니다.
