{"id":25570037,"url":"https://github.com/team-withme/withme_fe","last_synced_at":"2026-04-11T09:39:41.640Z","repository":{"id":37964962,"uuid":"494437917","full_name":"Team-WithMe/WithMe_FE","owner":"Team-WithMe","description":"📚 WithMe 프론트엔드 레포지토리","archived":false,"fork":false,"pushed_at":"2022-12-11T14:57:24.000Z","size":28621,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-06-01T16:01:16.471Z","etag":null,"topics":["emotion","nextjs","react","redux","redux-toolkit","typescript"],"latest_commit_sha":null,"homepage":"","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/Team-WithMe.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":null,"security":null,"support":null}},"created_at":"2022-05-20T11:30:39.000Z","updated_at":"2024-04-18T13:39:05.000Z","dependencies_parsed_at":"2023-01-27T01:31:36.954Z","dependency_job_id":null,"html_url":"https://github.com/Team-WithMe/WithMe_FE","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Team-WithMe/WithMe_FE","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Team-WithMe%2FWithMe_FE","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Team-WithMe%2FWithMe_FE/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Team-WithMe%2FWithMe_FE/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Team-WithMe%2FWithMe_FE/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Team-WithMe","download_url":"https://codeload.github.com/Team-WithMe/WithMe_FE/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Team-WithMe%2FWithMe_FE/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279013417,"owners_count":26085274,"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","status":"online","status_checked_at":"2025-10-12T02:00:06.719Z","response_time":53,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["emotion","nextjs","react","redux","redux-toolkit","typescript"],"created_at":"2025-02-21T00:53:24.756Z","updated_at":"2025-10-12T23:04:50.760Z","avatar_url":"https://github.com/Team-WithMe.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cbr /\u003e\n\u003cp align=\"middle\"\u003e\n  \u003cimg src=\"https://user-images.githubusercontent.com/80776262/170056261-7f960215-a2af-49a5-9f90-e651f9fe1b41.png\" style=\"width: 80%\" /\u003e\n\u003c/p\u003e\n\u003cbr /\u003e\n\n---\n\n\u003cbr /\u003e\n\n## 📚 With Me FE\n\n**위드미 (With Me)** 스터디 매칭 서비스 입니다.\n\u003cbr /\u003e\n\u003cbr /\u003e\n\n## 🗄 Links\n\n- \u003ca href=\"https://www.npmjs.com/package/@with-me/ui\"\u003eWithMe 디자인 시스템 npm\u003c/a\u003e\n- \u003ca href=\"https://with-me-ui.netlify.app/?path=/docs/assets-icons--base\"\u003eWithMe 스토리북 디자인 시스템 가이드\u003c/a\u003e\n- \u003ca href=\"https://github.com/Team-WithMe/WithMe_BE\"\u003eWithMe 백엔드 레포지토리\u003c/a\u003e\n\n\u003cbr /\u003e\n\n## 🪄 eslint plugin\n\n- eslint-plugin-sort-keys-custom-order: type과 object의 키를 자동으로 정렬 해주는 플러그인\n- eslint-plugin-simple-import-sort: import/export를 자동으로 정렬해주는 플러그인\n- eslint-plugin-import: eslint-plugin-simple-import-sort와 함께 사용하여 기능 확장\n- eslint-plugin-unused-imports: 사용하지 않는 것을 삭제하거나 누락 된 것을 자동으로 추가하는 플러그인\n\n\u003cbr /\u003e\n\n## 👨‍💻 Member\n\n|                    [LeeBonHoon](https://github.com/LeeBonHoon)                    |                   [changyuyeo](https://github.com/changyuyeo)                    |                   [KimTeaSick](https://github.com/KimTeaSick)                    |\n| :-------------------------------------------------------------------------------: | :------------------------------------------------------------------------------: | :------------------------------------------------------------------------------: |\n| \u003cimg src=\"https://avatars.githubusercontent.com/u/100823427?v=4\" width=\"100px\" /\u003e | \u003cimg src=\"https://avatars.githubusercontent.com/u/80776262?v=4\" width=\"100px\" /\u003e | \u003cimg src=\"https://avatars.githubusercontent.com/u/88377392?v=4\" width=\"100px\" /\u003e |\n\n- `Lee-bonhoon`: 메인 페이지, 팀 리스트\n- `changyuyeo`: 호스트 페이지, 상세 페이지\n- `KimTeaSick`: 마이 페이지\n\n\u003cbr /\u003e\n\u003cbr /\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u0026nbsp;🗂 Branches\u003c/summary\u003e\n\u003cdiv markdown=\"1\"\u003e\n\n## 🗂 branches\n\n각자 브랜치에서 작업, 작업이 완료 되었다면 master브랜치에 PR 후 merge 요청 \u003cbr /\u003e\nmerge가 완료되면 `다른 개발자에게 pull 요청하기` \u003cbr /\u003e\nmaster 브랜치가 업데이트 되면 항상 pull 받아줘야 충돌이 나지 않습니다!\n\n```\n// 새 브랜치 만들기\ngit checkout -b \"새 브랜치 이름\"\n\n// 브랜치 이동\ngit checkout \"브랜치 이름\"\n```\n\n\u003cbr /\u003e\n\n\u003c/div\u003e\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u0026nbsp;🪝 Hooks\u003c/summary\u003e\n\u003cdiv markdown=\"1\"\u003e\n\n### 🪝 Hooks\n\n### useModal 사용법\n\n```tsx\nimport { FC } from 'react';\nimport useModal from '@hooks/useModal';\n\n//* 모달창 안에 들어갈 컨텐츠\nconst TestModal: FC\u003c{ onCloseModal: () =\u003e void }\u003e = ({ onCloseModal }) =\u003e (\n\t\u003cdiv\n\t\tstyle={{\n\t\t\tbackground: 'white',\n\t\t\twidth: '568px',\n\t\t\theight: '400px',\n\t\t\tborderRadius: '10px',\n\t\t\tpadding: '20px'\n\t\t}}\n\t\u003e\n\t\t모달 내용... \u003cbr /\u003e \u003cbutton onClick={onCloseModal}\u003e모달창 닫기\u003c/button\u003e\n\t\u003c/div\u003e\n);\n\nconst HostPage = () =\u003e {\n\t//* useModal 사용\n\t//* ModalPortal: root-modal 이라는 id에 모달 랜더링 (children 으로 모달 컴포넌트 만들어서 넣어주면 됩니다.)\n\t//* onCloseModal: 모달창 오픈 이벤트\n\t//* onOpenModal: 모달창 닫는 이벤트\n\tconst { ModalPortal, onCloseModal, onOpenModal } = useModal();\n\n\treturn (\n\t\t\u003c\u003e\n\t\t\t\u003cbutton onClick={onOpenModal}\u003e모달창 열기\u003c/button\u003e\n\t\t\t\u003cModalPortal\u003e\n\t\t\t\t\u003cTestModal onCloseModal={onCloseModal} /\u003e\n\t\t\t\u003c/ModalPortal\u003e\n\t\t\u003c/\u003e\n\t);\n};\n\nexport default HostPage;\n```\n\n- `useModal`을 사용해 ModalPortal, onCloseModal, onOpenModal을 사용해서 모달창을 관리하면 됩니다.\n- `onOpenModal` 메소드를 사용 시 모달창이 오픈되며 id가 root-modal 이라는 요소에 `ModalPortal` 컴포넌트를 랜더링 하게 됩니다. (react-portal 활용)\n- `onCloseModal` 이벤트 발생 시 해당 모달창은 닫히게 됩니다.\n- 중복되는 부분을 커스텀 훅으로 만들었으며 react portal 를 활용해 root의 바깥에서 랜더링 하기 때문에 훨씬 편리하게 사용이 가능합니다.\n\n\u003cbr /\u003e\n\n### portal를 사용해서 구현한 이유\n\n\u003e DOM Tree 상에서의 부모-자식 간의 제약에서 자유로워지기 위해 Portal 기능을 사용하게 되는 것입니다. \u003cbr /\u003e\n\u003e 또한, Portal에 렌더링된 자식요소는 이벤트 버블링이 반영되기 때문에 부모요소와의 통신 측면에서도 유용합니다.\n\n\u003ca href=\"https://ko.reactjs.org/docs/portals.html\" target=\"_blank\" rel=\"noreferrer noopener\"\u003ePortals 참고 문서\u003c/a\u003e\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n\u003c/div\u003e\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u0026nbsp;🖥 Available URI\u003c/summary\u003e\n\u003cdiv markdown=\"1\"\u003e\n\n## 🖥 Available URI\n\n- / : 메인 페이지\n- /host : 새로운 팀 만들기 페이지\n- /...\n\n\u003cbr /\u003e\n\n\u003c/div\u003e\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u0026nbsp;📂 Skeleton\u003c/summary\u003e\n\u003cdiv markdown=\"1\"\u003e\n\n## 📂 Skeleton\n\n```\n|-- /src\n| |-- /assets\n| | |-- ...\n| |-- /components\n| | |-- ...\n| |-- /hooks\n| | |-- useInput.ts\n| | |-- useModal.tsx\n| |-- /lib\n| | |-- /api\n| | | |-- ...\n| |-- /pages\n| | |-- \\_app.tsx\n| | |-- \\_document.tsx\n| | |-- ...\n| |-- /store\n| | |-- index.ts\n| | |-- rootReducer.ts\n| | |-- ...\n| |-- /styles\n| |-- /typings\n| |-- ...\n```\n\n\u003cbr /\u003e\n\n\u003c/div\u003e\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u0026nbsp;📝 Conventional Commits\u003c/summary\u003e\n\u003cdiv markdown=\"1\"\u003e\n\n## 📝 Conventional Commits\n\n[사용 라이브러리 참고](https://www.conventionalcommits.org/ko/v1.0.0/)\n\n\u003cbr /\u003e\n\n| message  | descripton                                                                                   |\n| -------- | -------------------------------------------------------------------------------------------- |\n| feat     | 새로운 기능 추가                                                                             |\n| fix      | 버그 수정                                                                                    |\n| test     | Test 관련한 코드의 추가, 수정                                                                |\n| refactor | 코드를 리펙토링                                                                              |\n| chore    | (코드의 수정 없이) 설정을 변경                                                               |\n| docs     | 문서의 수정                                                                                  |\n| style    | (코드의 수정 없이) 스타일(style)만 변경\u003cbr /\u003e(들여쓰기 같은 포맷이나 세미콜론을 빼먹은 경우) |\n\n\u003cbr /\u003e\n\n~~commit example~~\n\n```\ngit commit -m \"feat: 유저 로그인 기능 추가\"\n```\n\n\u003cbr /\u003e\n\nCommitizen 라이브러리 사용으로 위 방법보다는 아래방법을 추천합니다.\n\u003cbr /\u003e\n\n```\nyarn commit\n```\n\n\u003cbr /\u003e\n\n`yarn commit` 을 해주시고 커밋의 타입, 제목, 설명 등 가이드대로 입력한 후 각각 브랜치에 push 해주시면 됩니다!\n\n\u003e yarn commit 명령어는 제일 먼저 git add를 해주기 때문에 git add 명령어는 따로 입력안해주셔도 됩니다!\n\n\u003cbr /\u003e\n\n\u003c/div\u003e\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u0026nbsp;⚙ Settings\u003c/summary\u003e\n\u003cdiv markdown=\"1\"\u003e\n\n## ⚙ Settings\n\ndev server\n\n```\nyarn dev\n```\n\nnode -v\n\n```\nv16.14.2\n```\n\n.env\n\n```\nNEXT_PUBLIC_API_URL=...\n```\n\netc...\n\n```\n// clone 후 git hook이 정상적으로 동작하지 않는다면 다음 명령어 실행\nchmod +x .husky/pre-commit\n```\n\n\u003cbr /\u003e\n\n\u003c/div\u003e\n\u003c/details\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fteam-withme%2Fwithme_fe","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fteam-withme%2Fwithme_fe","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fteam-withme%2Fwithme_fe/lists"}