{"id":20975031,"url":"https://github.com/boostcampwm2023/web17_morak","last_synced_at":"2025-06-24T23:09:40.696Z","repository":{"id":205702661,"uuid":"714857818","full_name":"boostcampwm2023/web17_morak","owner":"boostcampwm2023","description":"Morak | 네이버 부스트캠프 내 모각코 모집/관리 플랫폼 🧑🏻‍💻👩🏻‍💻👨🏻‍💻","archived":false,"fork":false,"pushed_at":"2024-02-07T03:44:44.000Z","size":6200,"stargazers_count":31,"open_issues_count":23,"forks_count":7,"subscribers_count":3,"default_branch":"develop","last_synced_at":"2025-06-02T19:39:52.434Z","etag":null,"topics":["backend","frontend","nestjs","react","typescript"],"latest_commit_sha":null,"homepage":"https://morak.io","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/boostcampwm2023.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-11-06T01:37:38.000Z","updated_at":"2025-03-30T15:17:49.000Z","dependencies_parsed_at":"2024-02-07T04:40:39.557Z","dependency_job_id":null,"html_url":"https://github.com/boostcampwm2023/web17_morak","commit_stats":null,"previous_names":["boostcampwm2023/web17_morak"],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/boostcampwm2023/web17_morak","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/boostcampwm2023%2Fweb17_morak","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/boostcampwm2023%2Fweb17_morak/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/boostcampwm2023%2Fweb17_morak/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/boostcampwm2023%2Fweb17_morak/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/boostcampwm2023","download_url":"https://codeload.github.com/boostcampwm2023/web17_morak/tar.gz/refs/heads/develop","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/boostcampwm2023%2Fweb17_morak/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261771193,"owners_count":23207223,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["backend","frontend","nestjs","react","typescript"],"created_at":"2024-11-19T04:37:23.284Z","updated_at":"2025-06-24T23:09:40.671Z","avatar_url":"https://github.com/boostcampwm2023.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch2 align='center'\u003e🚚 repository 이사했어요 https://github.com/team-morak/morak\u003c/h2\u003e\n\u003cimg src='https://github.com/boostcampwm2023/web17_morak/assets/43867711/113814b6-0fc2-4ae0-adce-94238ecc2f6b' /\u003e\n\n\u003cp align='center'\u003e\u003ca href=\"https://hits.seeyoufarm.com\"\u003e\u003cimg src=\"https://hits.seeyoufarm.com/api/count/incr/badge.svg?url=https%3A%2F%2Fgithub.com%2Fboostcampwm2023%2Fweb17_morak\u0026count_bg=%231FAB70\u0026title_bg=%23A8AEAC\u0026icon=\u0026icon_color=%23E7E7E7\u0026title=hits\u0026edge_flat=false\"/\u003e\u003c/a\u003e\u003c/p\u003e\n\n\u003ch3 align='center'\u003e\u003ca href='https://morak.io/'\u003ehttps://morak.io\u003c/a\u003e\u003c/h3\u003e\n\u003ch4 align='center'\u003e\u003ca href='https://www.youtube.com/watch?v=T72DBsIXaYY\u0026list=PLzUx59pIXJDwdgQf6dNXFEOeG9792HGpX\u0026index=3'\u003e🎤 최종 발표\u003c/a\u003e\u003c/h4\u003e\n\n\u003cp align='center'\u003e\n\u003ca href='https://www.notion.so/Morak-11ea873b5f3d4ac8b741bb933ee41170?pvs=21'\u003e📒 팀 노션\u003c/a\u003e | \n\u003ca href='https://www.notion.so/e55bfedb723443adb14dfa0e3910cc42?pvs=21'\u003e🖋️ 그라운드 룰\u003c/a\u003e | \n\u003ca href='https://www.notion.so/af66c77dc0f648ce9317a33a37510f24?pvs=21'\u003e📜 기획서\u003c/a\u003e | \n\u003ca href='https://www.figma.com/file/ekdMdDQqhXwJBAf2bus6xJ/%EB%B6%80%EC%8A%A4%ED%8A%B8%EC%BA%A0%ED%94%84-%EB%AA%A8%EB%9D%BD?type=design\u0026node-id=2-1066\u0026mode=design\u0026t=8trPIWAnQYrLKd6J-0'\u003e🎨 디자인\u003c/a\u003e | \n\u003ca href='https://github.com/boostcampwm2023/web17_morak/wiki'\u003e🔍 위키\u003c/a\u003e\n\u003c/p\u003e\n\n# 모락 | Morak\n\n\u003e **네이버 부스트캠프 내 모각코 모집/관리 플랫폼**\n\n**모락**은 부스트캠프 웹·모바일 8기의 모각코 살롱 채널인 '카페인\\_cafe人' 채널로부터 아이디어를 얻어 출발했습니다.\n\n기존 슬랙 채널에 존재하던 정보 분산과 가독성 문제를 해결하고, 누구나 쉽고 빠르게 모각코를 열거나 참여할 수 있는 플랫폼을 목표로 개발된 서비스입니다.\n\n이후의 모든 부스트캠프 캠퍼들이 이 서비스를 통해 더욱 활발한 오프라인 모각코 문화를 만들어가길 소망합니다.\n\n## 기능 설명\n\n**📌 내가 속한 그룹의 모임 글을 리스트 형태로 볼 수 있습니다**\n\n\u003cimg width=\"1552\" alt=\"모임 글 리스트 캡처 화면\" src=\"https://github.com/boostcampwm2023/web17_morak/assets/43867711/eb832e09-b798-4866-bd7b-812a60b82402\"\u003e\n\n**🗓️ 내가 속한 그룹의 모임을 달력 뷰로 확인할 수 있습니다**\n\n\u003cimg width=\"1508\" alt=\"달력 뷰 캡처 화면\" src=\"https://github.com/boostcampwm2023/web17_morak/assets/43867711/d6cd8dbd-70e1-4149-bf33-30add3faf3b8\"\u003e\n\n**🗺️ 내가 속한 그룹의 모임을 지도 뷰로 확인할 수 있습니다**\n\u003cimg width=\"1552\" alt=\"지도 뷰 캡처 화면\" src=\"https://github.com/boostcampwm2023/web17_morak/assets/43867711/09a25d3c-2a0c-4bd7-82e5-cf6dbf505902\"\u003e\n\n**📌 달력과 지도 뷰에서 모임에 대한 상세 내용을 사이드 바로 확인할 수 있습니다**\n|\u003cimg width=\"1508\" alt=\"달력 뷰 사이드 바 캡처 화면\" src=\"https://github.com/boostcampwm2023/web17_morak/assets/43867711/8986f0c4-58e1-47f7-a118-ce2c84838f79\"\u003e|\u003cimg width=\"1552\" alt=\"지도 뷰 사이드 바 캡처 화면\" src=\"https://github.com/boostcampwm2023/web17_morak/assets/43867711/a357742e-1c18-4a2d-a213-9c82a73d5325\"\u003e|\n|:--:|:--:|\n\n**📌 참여한 모임에서는 채팅으로 소통할 수 있습니다**\n\u003cimg width=\"1552\" alt=\"채팅 캡처 화면\" src=\"https://github.com/boostcampwm2023/web17_morak/assets/43867711/b771289c-9b12-4211-82bd-1c683a193955\"\u003e\n\n**👥 그룹에서 참여하고 나갈 수 있습니다**\n\u003cimg width=\"1552\" alt=\"그룹 리스트 캡처 화면\" src=\"https://github.com/boostcampwm2023/web17_morak/assets/43867711/2cf1e4a6-2d44-499c-a7f8-bd0b73fabc88\"\u003e\n\n## 🧑‍💻 기술적 도전\n\n\n### **Monorepo With Turborepo**\n\n- 모노레포를 도입하여 코드 공유, 일관된 코드 스타일, 빌드 및 테스트 캐싱을 통해 효율성을 올렸습니다.\n    - 모노레포의 내부 패키지 사용으로 다음과 같은 이점을 얻었습니다.\n        - FrontEnd/BackEnd 간 타입 불일치 문제를 예방하고 인터페이스 변경에 신속하고 정확하게 대응할 수 있도록 공통 타입을 사용합니다.\n        - 공통 컴포넌트를 패키지화하여 컴포넌트의 재사용성을 높입니다.\n        - configuration 파일 재사용으로 초기 세팅 비용을 줄입니다.\n    - Turborepo의 캐싱 기능을 Docker 이미지 빌드에 적용하여 빌드 시간을 단축했습니다.\n    - [TurboRepo 설정](https://www.notion.so/fe9bbfaed0cd411e9a5d0aae7550a863?pvs=21) by 서지원\n\n### **Test Code**\n\n- 보다 더 효율적인 개발과 QA 방식을 위한 테스트 코드 작성에 대해 고민했습니다.\n    - [UI 테스트를 할 수 있는 방법은? (시각적 회귀 테스트)](https://www.notion.so/UI-ee39d501d6b6498a9583859cc64e8a38?pvs=21) by 이태림\n\n### **지도**\n\n- TMap API를 사용하여 사용자와 상호작용할 수 있는 지도 페이지를 개발했습니다.\n- 좋은 사용자 경험을 주기 위해 Vector와 Raster 지도 SDK를 개발자 도구 성능 탭으로 비교해 보고, 선택한 과정을 담았습니다.\n    - [Tmap API로 지도 렌더링](https://www.notion.so/TMap-API-06c9e324d093465ea8da56777d338aaa?pvs=21) by 이지원\n    - [폼 작성 시 장소 선택 TMap API 적용하기](https://www.notion.so/TMAP-API-1645d224b33d4f968ee81dca843bd8ae?pvs=21) by 이태림\n    - [느림의 미학 (feat. TMap 지도 성능 측정)](https://www.notion.so/TMap-063aa40efb0e4d0a95c61a990a188f45?pvs=21) by 이지원, 이태림\n\n### **채팅**\n\n- socket.io를 기반으로 사용자들이 실시간으로 대화를 나눌 수 있는 채팅 기능을 개발했습니다.\n- FE에서 채팅 구현 중 겪은 여러 문제 상황과 해결 과정에 대하여 기록하였습니다.\n    - [FE 채팅 기능 구현과 트러블슈팅](https://www.notion.so/9c866a10d5754c81bf86850a881486ef?pvs=21) by 맹지승\n\n### **OAuth2.0과 인증/인가**\n\n- NestJS에서 소셜 로그인에 대한 인증과 사용자 정보를 인지하여 인가 처리를 기록하였습니다.\n- 로그인을 통해 해당 사용자의 정보를 추출해내어 사용하는 방법을 기록하였습니다.\n    - [지금 접속한 당신 정체가 무엇이오?](https://www.notion.so/67f910a8f32140ccb43bf9d9622c8b84?pvs=21) by 임동혁\n    - [인증(Authentication)과 인가(Authorization)](https://www.notion.so/Cookie-ea27c771aeef406aadc02709f587c99e?pvs=21) by 임동혁\n\n### 기타\n\n- [assets는 왜, 어디에서 관리해야 할까요? public? src?](https://www.notion.so/assets-9b3e50f913cb4fdbabce2c0b5a06851f?pvs=21) by 이태림\n- [react-query와 컴포넌트 props 전달](https://www.notion.so/a86d59c0a6924b27b764e589df34af41?pvs=21) by 맹지승\n- [NestJS 빡치는 라우팅 시스템에 대해 알아보자](https://www.notion.so/f3d7e301dd5040d2950f423ca211ecae?pvs=21) by 임동혁\n- [Jest 경로를 일일히 지정해야 한다고?](https://www.notion.so/433965335b5845878257813e3e733cac?pvs=21) by 임동혁\n- [Jotai vs. Zustand](https://www.notion.so/Jotai-vs-Zustand-e0837b29d53e4fe2a3793dee1a6487c9?pvs=21) by 맹지승\n- [놀랍고 재미있는 접근성 개선](https://www.notion.so/5e26158dc5254aba9b6bff2d706be07d?pvs=21) by 맹지승\n- [모바일에서 폼 입력 시 화면이 확대되는 현상… 접근성과 관련 있다고?](https://www.notion.so/6f3bad0053f04f84afed52d562d78be6?pvs=21) by 이태림\n- [Nginx 설정](https://www.notion.so/dd2c18bdc779419b8928424f1a97048e?pvs=21) by 서지원\n- [Docker Registry 설정](https://www.notion.so/61b9b8ab5f1440eeb738248832cfaaba?pvs=21) by 서지원\n\n\n\u003e 이 외에도 [모락 팀의 개발 일지](https://www.notion.so/ttaerrim/be56a4fcbd3f4fe9a6f29525b492ab0c?pvs=4)를 구경해 보세요!\n\n\n## 기술 스택\n\n|      분류 | 스택                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |\n| :---------------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n|    **Common**     | \u003cimg src=\"https://img.shields.io/badge/TypeScript-5.0.2-3178C6?logo=typescript\u0026logoColor=white\u0026color=5C5C5C\u0026labelColor=3178C6\"/\u003e \u003cimg src=\"https://img.shields.io/badge/Node.js-20.9.0-339933?logo=Node.js\u0026color=5C5C5C\u0026labelColor=339933\u0026logoColor=white\"/\u003e \u003cimg src=\"https://img.shields.io/badge/npm-10.1.0-CB3837?logo=npm\u0026color=5C5C5C\u0026labelColor=CB3837\"/\u003e \u003cimg src=\"https://img.shields.io/badge/Turborepo-EF4444?logo=turborepo\u0026logoColor=white\"/\u003e \u003cimg src=\"https://img.shields.io/badge/Socket.io-4.7.2-010101?logo=Socket.io\u0026logoColor=white\u0026color=5C5C5C\u0026labelColor=010101\"/\u003e                                                                                                         |\n|   **FrontEnd**    | \u003cimg src=\"https://img.shields.io/badge/React-61DAFB?logo=react\u0026logoColor=5C5C5C\"/\u003e \u003cimg src=\"https://img.shields.io/badge/Vite-646CFF?logo=vite\u0026logoColor=white\"/\u003e \u003cimg src=\"https://img.shields.io/badge/React_Query-FF4154?logo=reactquery\u0026logoColor=white\"/\u003e \u003cimg src=\"https://img.shields.io/badge/Vanilla_Extract-CCFBF2?logo=vanillaextract\u0026logoColor=white\"/\u003e \u003cimg src=\"https://img.shields.io/badge/Jotai-171717?logo=ghostery\u0026logoColor=white\"/\u003e \u003cimg src=\"https://img.shields.io/badge/React_Hook_Form-EC5990?logo=reacthookform\u0026logoColor=white\"/\u003e \u003cimg src=\"https://img.shields.io/badge/Vitest-6E9F18?logo=vitest\u0026logoColor=white\"/\u003e                                                 |\n|    **BackEnd**    | \u003cimg src=\"https://img.shields.io/badge/NextJS-10.0.0-E0234E?logo=nestjs\u0026color=5C5C5C\u0026labelColor=E0234E\"/\u003e \u003cimg src=\"https://img.shields.io/badge/Prisma-5.5.2-2D3748?logo=prisma\u0026color=5C5C5C\u0026labelColor=2D3748\"/\u003e \u003cimg src=\"https://img.shields.io/badge/MySQL-8.2.0-4479A1?logo=mysql\u0026logoColor=white\u0026color=5C5C5C\u0026labelColor=4479A1\"/\u003e \u003cimg src=\"https://img.shields.io/badge/Redis-7.2.3-DC382D?logo=redis\u0026color=5C5C5C\u0026labelColor=DC382D\u0026logoColor=white\"/\u003e \u003cimg src=\"https://img.shields.io/badge/MongoDB-7.0.3-47A248?logo=mongodb\u0026color=5C5C5C\u0026labelColor=47A248\u0026logoColor=white\"/\u003e \u003cimg src=\"https://img.shields.io/badge/Jest-29.5.0-C21325?logo=jest\u0026color=5C5C5C\u0026labelColor=C21325\"/\u003e |\n|     **Infra**     | \u003cimg src=\"https://img.shields.io/badge/Github_Action-2088FF?logo=githubactions\u0026logoColor=white\"/\u003e \u003cimg src=\"https://img.shields.io/badge/Naver_Cloud_Platform-03C75A?logo=naver\u0026logoColor=white\"/\u003e \u003cimg src=\"https://img.shields.io/badge/Docker-24.0.7-2496ED?logo=docker\u0026color=5C5C5C\u0026labelColor=2496ED\u0026logoColor=white\"/\u003e \u003cimg src=\"https://img.shields.io/badge/Docker_Compose-2.21.0-2496ED?logo=docker\u0026color=5C5C5C\u0026labelColor=2496ED\u0026logoColor=white\"/\u003e \u003cimg src=\"https://img.shields.io/badge/nginx-1.25.3-009639?logo=nginx\u0026color=5C5C5C\u0026labelColor=009639\"/\u003e \u003cimg src=\"https://img.shields.io/badge/Vault-1.13.3-FFEC6E?logo=vault\u0026color=5C5C5C\u0026labelColor=FFEC6E\u0026logoColor=white\"/\u003e    |\n| **Collaboration** | \u003cimg src=\"https://img.shields.io/badge/Slack-4A154B?logo=slack\u0026logoColor=white\"/\u003e \u003cimg src=\"https://img.shields.io/badge/Notion-000000?logo=Notion\"\u003e \u003cimg src=\"https://img.shields.io/badge/Figma-F24E1E?logo=Figma\u0026logoColor=ffffff\"\u003e \u003cimg src=\"https://img.shields.io/badge/Discord-5865F2?logo=Discord\u0026logoColor=ffffff\"\u003e                                                                                                                                                                                                                                                                                                                                                                      |\n\n## 아키텍처 구조도\n\n![image](https://github.com/boostcampwm2023/web17_morak/assets/43867711/adf6c3ca-7fff-4cf0-a7ae-4ae79ac1e28f)\n\n## 브랜치 전략\n\n![image](https://github.com/boostcampwm2023/web17_morak/assets/43867711/ffc35dc4-7c48-4526-b14e-325521d007d9)\n\n1. upstream에서는 `main` 브랜치와 `develop` 브랜치만 관리한다.\n2. 개발 feature는 `develop` 브랜치에서 따서 작업 후 `develop` 브랜치로 머지한다.\n3. 협업으로 인한 추가 브랜치가 필요한 경우 upstream에서 `develop` 기준 `feature` 브랜치를 생성하여 2와 같은 방식으로 작업한다.\n\n## 🧑🏻‍💻 `command`\n\n### package install\n\n```bash\n$ npm install \u003cpackage-name\u003e -w=backend\n$ npm install \u003cpackage-name\u003e -w=frontend\n```\n\n### run\n\n```bash\n$ npm run start:dev -w=backend\n$ turbo run start:dev --filter backend\n\n$ npm run dev -w=frontend\n$ turbo run dev --filter frontend\n```\n\n- 이외 명령어들도 각 app 내의 script 명령어를 root(web17_morak)에서 `npm run \u003ccommand\u003e -w={workspace}` 형태로 입력하여 실행하면 됩니다.\n- turbo scripts를 이용하고 싶을 경우 `turbo.json`에 추가가 필요합니다.\n\n## 팀원\n\n|                                   FrontEnd                                   |                                   FrontEnd                                    |                                   FrontEnd                                   |                                   BackEnd                                    |                                   BackEnd                                    |\n| :--------------------------------------------------------------------------: | :---------------------------------------------------------------------------: | :--------------------------------------------------------------------------: | :--------------------------------------------------------------------------: | :--------------------------------------------------------------------------: |\n| \u003cimg src=\"https://avatars.githubusercontent.com/u/43867711?v=4\" width=\"100\"\u003e | \u003cimg src=\"https://avatars.githubusercontent.com/u/110762136?v=4\" width=\"100\"\u003e | \u003cimg src=\"https://avatars.githubusercontent.com/u/50646827?v=4\" width=\"100\"\u003e | \u003cimg src=\"https://avatars.githubusercontent.com/u/77393976?v=4\" width=\"100\"\u003e | \u003cimg src=\"https://avatars.githubusercontent.com/u/22430531?v=4\" width=\"100\"\u003e |\n|                    [이태림](https://github.com/ttaerrim)                     |                    [이지원](https://github.com/LEEJW1953)                     |                      [맹지승](https://github.com/js43o)                      |                   [임동혁](https://github.com/ldhbenecia)                    |                     [서지원](https://github.com/ccxz84)                      |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fboostcampwm2023%2Fweb17_morak","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fboostcampwm2023%2Fweb17_morak","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fboostcampwm2023%2Fweb17_morak/lists"}