{"id":21399231,"url":"https://github.com/osohyun0224/amica-frontend","last_synced_at":"2026-04-12T20:38:35.553Z","repository":{"id":184397939,"uuid":"671830418","full_name":"osohyun0224/Amica-Frontend","owner":"osohyun0224","description":"2023 멋쟁이사자처럼 중앙해커톤 제대로 기록하는 내 친구를 위한 현명한 소비, Amica! 프론트엔드 개발 레포","archived":false,"fork":false,"pushed_at":"2023-08-21T10:46:49.000Z","size":73877,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-03-11T02:12:17.500Z","etag":null,"topics":["axios","bootpay","dayjs","react-daum-postcode","reactjs","redux","redux-toolkit"],"latest_commit_sha":null,"homepage":"https://async-without-sync.vercel.app/","language":"JavaScript","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"Likelion-MainHackaton-2team/Amica_Frontend","license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/osohyun0224.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,"governance":null}},"created_at":"2023-07-28T08:30:32.000Z","updated_at":"2023-11-14T07:06:18.000Z","dependencies_parsed_at":"2023-08-20T11:11:47.456Z","dependency_job_id":"43fcad8e-dbfa-4f43-8d76-a9f1d740df8f","html_url":"https://github.com/osohyun0224/Amica-Frontend","commit_stats":null,"previous_names":["osohyun0224/frontend_dev_repo","osohyun0224/amica_frontend","osohyun0224/amica-frontend"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/osohyun0224%2FAmica-Frontend","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/osohyun0224%2FAmica-Frontend/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/osohyun0224%2FAmica-Frontend/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/osohyun0224%2FAmica-Frontend/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/osohyun0224","download_url":"https://codeload.github.com/osohyun0224/Amica-Frontend/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243892204,"owners_count":20364654,"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":["axios","bootpay","dayjs","react-daum-postcode","reactjs","redux","redux-toolkit"],"created_at":"2024-11-22T15:13:49.276Z","updated_at":"2026-04-12T20:38:30.497Z","avatar_url":"https://github.com/osohyun0224.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## 🎉 2023 멋쟁이사자처럼 대학 11주년 해커톤 출품작 , Amica! 🦁 \n\u003cdiv align=\"center\"\u003e\n제대로 기록하는 내 친구를 위한 현명한 소비, Amica! 개발 레포 ✍🏻\n\u003cbr/\u003e\u003cbr/\u003e\n\u003cimg src=\"https://github.com/osohyun0224/Amica_Frontend/assets/53892427/204e0745-2d3e-4ab7-98a4-9631a501ffa8\" width=80% /\u003e\n\u003c/div\u003e\n\n## 🔥 동기없는 비동기처리 팀\n| PM/DESIGN | FE  | FE | FE | BE | AI |\n| :---: | :---: | :---: | :---: | :---: | :---: |\n|  \u003cimg width=\"130px\" src=\"https://avatars.githubusercontent.com/u/117716667?v=4\" /\u003e | \u003cimg width=\"130px\" src=\"https://avatars.githubusercontent.com/u/53892427?v=4\"/\u003e |  \u003cimg width=\"130px\" src=\"https://avatars.githubusercontent.com/u/35104213?v=4\" /\u003e |  \u003cimg width=\"130px\" src=\"https://avatars.githubusercontent.com/u/101046600?v=4\" /\u003e |  \u003cimg width=\"130px\" src=\"https://avatars.githubusercontent.com/u/80760160?v=4\" /\u003e |  \u003cimg width=\"130px\" src=\"https://github.com/osohyun0224/Amica_Frontend/assets/53892427/e6318bed-3c99-4155-9fba-2a55bdaef169\" /\u003e\n| 최아리 | 오소현 | 김경재 | 허윤아 | 이동헌 | 박인성 |\n|[@ChoiARi](https://github.com/Akdbkahdkaka)  | [@osohyun0224](https://github.com/osohyun0224)   |  [@PortalCube](https://github.com/PortalCube)    | [@YoonA](https://github.com/yoona1110)   | [@Dong Heon Lee](https://github.com/Sirius506775)  |  [@InSung Bahk](https://github.com/insung3511) |\n\n## 📚 Amica Development (23.07.17 - 08.18)\n![Slack](https://img.shields.io/badge/slack-white?style=for-the-badge\u0026logo=slack\u0026logoColor=white\u0026color=4A154B)\n![Figma](https://img.shields.io/badge/figma-white?style=for-the-badge\u0026logo=figma\u0026logoColor=white\u0026color=F24E1E)\n![React.js](https://img.shields.io/badge/React.js-white?style=for-the-badge\u0026logo=React\u0026logoColor=black\u0026color=61DAFB)\n![Spring Boot](https://img.shields.io/badge/spring%20boot-Black?style=for-the-badge\u0026logo=springboot\u0026logoColor=white\u0026color=6DB33F)\n![scikitlearn](https://img.shields.io/badge/scikitlearn-white?style=for-the-badge\u0026logo=scikitlearn\u0026logoColor=white\u0026color=F7931E)\n![numpy](https://img.shields.io/badge/numpy-white?style=for-the-badge\u0026logo=numpy\u0026logoColor=white\u0026color=013243)\n![polars](https://img.shields.io/badge/polars-white?style=for-the-badge\u0026logo=polars\u0026logoColor=white\u0026color=CD792C)\n![Pycaret](https://img.shields.io/badge/Pycaret-white?style=for-the-badge\u0026logo=Pycaret\u0026logoColor=white\u0026color=40AEF0)\n\n## 👨🏻‍💻 FrontEnd Tech Stacks\n\n**Stack**|**Version**|**Why**\n:-------:|:---------:|:------:\nReact.js|`18.2.0`| CSR로 구현하여 사용자에게 빠르게 반응하는 인터페이스를 제공하기 위함. \u003cbr/\u003e 특히 상품 추천 알고리즘과 같은 동적인 기능 구현에 적합하다고 생각해 도입\nRedux|`8.1.1`| 프로젝트의 상태 변화를 예측 가능하고 관리하기 위해 도입\n@reduxjs/toolkit|`1.9.5`| Redux를 사용하면서 생기는 boilerplate 코드를 줄이고, \u003cbr/\u003e Redux 코드 작성에 필요한 도구와 헬퍼를 갖추기 위함. \u003cbr/\u003e 또한 불변성을 유지하면서 상태 업데이트를 간소화하고, \u003cbr/\u003e 비동기 작업을 쉽게 관리하기 위해 도입\nStyled-Components|`5.3.9`| 스타일 작성의 생산성 향상을 위하여 CSS-in-JS 도입\n@bootpay/client-js|`4.3.1`| 웹앱에서 결제 기능을 구현하기 위해 도입\nimmer \u003cbr/\u003e user-immer|`10.0.2` `0.9.0` | 불변성을 유지하면서 객체나 배열을 업데이트하기 쉽게 해주기 위해서 도입\naxios|`1.4.0`| API 통신에 사용하기 위해 도입\nreact-router-dom |`6.14.2`| 다른 페이지 이동 기능을 구현하기 위해 도입\ndayjs|`1.11.9`| Date 객체를 보다 편하게 다루기 위해서 도입\nreact-daum-postcode|`3.1.3`| 사용자가 물품을 주문할 때, 한국 주소 등록을 위해서 도입\nreact-indiana-drag-scroll|`3.0.3-alpha`| 스크롤 영역을 드래그하여 움직일 수 있도록 하기 위해서 도입\nreact-paginate|`8.2.0`| 페이지네이션 (페이징) 기능 구현을 위해 도입\nsimplebar-react|`3.2.4`| 사용자 지정 스크롤 바 기능 구현을 위해 도입\n\n## 👨🏻‍💻 System Architecture\n![image](https://github.com/osohyun0224/Amica_Frontend/assets/53892427/827096c5-d446-432e-9db2-2a9bd85fecf9)\n\n## 💡 Amica는 어떤 서비스 인가요?\n\n### 💭 기획 의도\n\u003cdiv align=\"center\"\u003e\n\u003cimg src=\"https://github.com/osohyun0224/Amica_Frontend/assets/53892427/e37d1de2-4ac9-45d4-8438-8830aaeae374\" width=80% /\u003e\n\u003cimg src=\"https://github.com/osohyun0224/Amica_Frontend/assets/53892427/b305562b-a0d4-4114-a1ca-d79e889a371e\" width=80% /\u003e\n\n\u003cbr/\u003e\nAmica는 반려동물을 기르는 사람들을 대상으로 제공하는 이커머스 웹앱 서비스입니다.\n\u003c/div\u003e\n\n### 🖐🏻 메인 기능 \n\u003cdiv align=\"center\"\u003e\n\u003cimg src=\"https://github.com/osohyun0224/Amica_Frontend/assets/53892427/a80b412a-ba2b-454f-8e28-8a9c111e9c16\" width=80% /\u003e\n\u003cimg src=\"https://github.com/osohyun0224/Amica_Frontend/assets/53892427/75d0b4a1-a63b-464e-b749-b0ef216ea0f4\" width=80% /\u003e\n\u003cimg src=\"https://github.com/osohyun0224/Amica_Frontend/assets/53892427/e2d823db-6fd8-4074-bf5f-05f33efb8ae1\" width=80% /\u003e\n\u003c/div\u003e\n\n### 📺 개발 화면\n[vercel 링크로 웹사이트 확인하기](https://async-without-sync.vercel.app)\n\n## 🐶 모든 기능 소개 \n\n\n\u003e 1. 로그인 및 회원가입\n- 웹사이트는 일반 유저(User)와 공동구매를 관리하는 관리자(admin)의 2가지 계정 유형이 존재합니다.\n  \n\u003cimg src=\"https://github.com/osohyun0224/Amica_Frontend/assets/53892427/e9020e91-ac37-44be-bbbe-58b4ee738c7b\" width=33% /\u003e\n\u003cimg src=\"https://github.com/osohyun0224/Amica_Frontend/assets/53892427/834cc01f-9283-4f81-82e2-d9405103d275\" width=33% /\u003e\n\n\u003cbr/\u003e\u003cbr/\u003e\n\n\u003e 2. MyPet 페이지\n- 사용자는 자신의 펫들의 대한 세부 정보를 등록 할 수 있습니다.\n- 개별적으로 펫들의 대한 대표적인 해시태그를 선택해 해당 펫과 관련된 제품을 AI 알고리즘을 기반으로 추천해줍니다.\n\n\u003cimg src=\"https://github.com/osohyun0224/Amica_Frontend/assets/53892427/1765cebf-a289-4c59-a80d-53adc2bc3552\" width=33% /\u003e\n\u003cimg src=\"https://github.com/osohyun0224/Amica_Frontend/assets/53892427/d613b6ce-219e-4405-9dc6-44caa5eb3579\" width=33% /\u003e\n\n\u003cbr/\u003e\u003cbr/\u003e\n\n\u003e 3. Main 페이지\n- 웹 서비스 메인 배너와 **카테고리 별**로 구매하고 싶은 제품들을 조회할 수 있습니다.\n- Mypet에서 등록한 펫들을 각각 설정하면 해당 펫과 AI 알고리즘을 기반으로 추천해준 관련된 제품을 \u003cbr/\u003e\n**구매 마감 임박 / 최근 구매 순 / 인기 순으로** 조회할 수 있습니다.\n  \n\u003cimg src=\"https://github.com/osohyun0224/Amica_Frontend/assets/53892427/2bad6f32-b2c2-4459-aae7-0119abd51ef8\" width=33% /\u003e\n\u003cimg src=\"https://github.com/osohyun0224/Amica_Frontend/assets/53892427/f26c94a5-8e6b-4c0c-b316-63a357cd1c3b\" width=33% /\u003e\n\n\u003cbr/\u003e\u003cbr/\u003e\n\n\u003e 4. 상품 세부 정보 페이지\n- 상품 각각의 세부 정보를 조회 할 수 있습니다.\n\u003cimg src=\"https://github.com/osohyun0224/Amica_Frontend/assets/53892427/34f2608b-3070-48e8-bb5c-d51217810d32\" width=33% /\u003e\n\n\u003cbr/\u003e\u003cbr/\u003e\n\n\u003e 5. 주문 및  **결제 하기**\n- 상품을 주문하고, 결제할 수 있습니다.\n\u003cimg src=\"https://github.com/osohyun0224/Amica_Frontend/assets/53892427/9bc54d5e-c83f-41ab-82e8-744a2493267a\" width=33% /\u003e\n\u003cimg src=\"https://github.com/osohyun0224/Amica_Frontend/assets/53892427/9b6d173d-6505-4d08-89c1-13a9f1561fd0\" width=33% /\u003e  \n\n\u003cbr/\u003e\u003cbr/\u003e\n\n\u003e 6. 가계부 페이지\n- 월 단위로 사용자 개인의 소비 내역을 달력으로 한 눈에 조회할 수 있습니다.\n- 소비한 카테고리 영역을 조회해 어느 카테고리에 많은 소비를 했는지 그래프로 확인이 가능합니다.\n- 가장 많이 소비한 날의 기록을 조회 할 수 있습니다.\n\u003cimg src=\"https://github.com/osohyun0224/Amica_Frontend/assets/53892427/36eec373-f5b6-441d-9104-1f1296382de9)\" width=33% /\u003e\n\n\u003cbr/\u003e\u003cbr/\u003e\n\n\u003e 7. 검색 페이지\n- 유저는 자신이 궁금한 단어에 대해 검색 할 수 있습니다.\n- 검색한 단어와 관련한 상품들의 리스트가 조회되고,  \u003cbr/\u003e 카테고리 / 최신 / 인기 / 높은 가격 / 낮은 가격 / 마감 임박 순으로 필터링 하여 조회 가능합니다.\n\u003cimg src=\"https://github.com/osohyun0224/Amica_Frontend/assets/53892427/0e1df5f6-6bd6-49ac-aec0-59b223c3246b\" width=33% /\u003e\n\n\u003cbr/\u003e\u003cbr/\u003e\n\n\u003e 8. User 마이페이지\n- 유저는 마이페이지에서 사용자 이름 / 비밀번호 / 주문한 내역을 조회 할 수 있습니다.\n\u003cimg src=\"https://github.com/osohyun0224/Amica_Frontend/assets/53892427/ff0a63c0-bf84-43f8-8264-7caa1c107016\" width=33% /\u003e\n\n\u003cbr/\u003e\u003cbr/\u003e\n\n\u003e 9. 관리자 공동구매 관련 페이지\n- admin은 공동구매 페이지를 직접 생성하고 수정 및 삭제가 가능합니다. \n\n\u003cimg src=\"https://github.com/osohyun0224/Amica_Frontend/assets/53892427/9ea86e3b-c986-418b-a32b-4c682d58ee30\" width=33% /\u003e\n\u003cimg src=\"https://github.com/osohyun0224/Amica_Frontend/assets/53892427/524855cf-e512-4922-b30c-6012e28f343a\" width=33% /\u003e\n\n## 🧾 Amica 개발 관련 문서 모음 \n- [Amica 최종 기능 명세서](https://www.notion.so/osohyun/2e9de48e1c9f4de5a17bcb3a9fef2bb6)\n- [Backend API 명세서-1](https://documenter.getpostman.com/view/25536437/2s9Y5SUjhs)\n- [Backend API 명세서-2](https://documenter.getpostman.com/view/25536437/2s9Y5SVQyW)\n- [Backend API 명세서-3](https://documenter.getpostman.com/view/25536437/2s9Y5SVR3m)\n- [AI Server API 명세서](https://documenter.getpostman.com/view/28690465/2s9Y5R3nHv)\n- [개발자 전체 칸반보드](https://github.com/orgs/Likelion-MainHackaton-2team/projects/1)\n\n## 💡 Developer Commit Convention\n\n|       Tags       |               Explanation               |\n| :--------------: | :-------------------------------------: |\n|       Feat       |            새로운 기능 추가             |\n|       Fix        |                버그 수정                |\n| !BREAKING CHANGE |         커다란 API 변경의 경우          |\n|     !HOTFIX      |          급한 치명적 버그 수정          |\n|      Build       |           빌드 관련 파일 수정           |\n|      Design      |        CSS를 포함 UI 디자인 변경        |\n|       Docs       |                문서 수정                |\n|      Style       | 코드 포맷팅, 세미콜론 누락, 코드 변경 X |\n|     Refactor     |              코드 리팩토링              |\n|     Comment      |        필요한 주석 추가 및 변경         |\n|       Test       |            테스트 코드 수정             |\n|      Rename      |         파일, 폴더명 이름 수정          |\n|      Remove      |             파일, 폴더 삭제             |\n|      Chore       |            빌드, 패키지 수정            |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fosohyun0224%2Famica-frontend","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fosohyun0224%2Famica-frontend","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fosohyun0224%2Famica-frontend/lists"}