{"id":22657317,"url":"https://github.com/anonymousrecords/touslesjours-admin","last_synced_at":"2025-03-29T08:13:57.440Z","repository":{"id":236476110,"uuid":"792633846","full_name":"anonymousRecords/touslesjours-admin","owner":"anonymousRecords","description":"행복한 뚜둥이 생활을 위하여~🥖","archived":false,"fork":false,"pushed_at":"2024-09-11T03:32:31.000Z","size":2446,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"develop","last_synced_at":"2025-03-24T03:42:05.717Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://touslesjours-admin.vercel.app/","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/anonymousRecords.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,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-04-27T05:57:46.000Z","updated_at":"2024-09-11T03:32:35.000Z","dependencies_parsed_at":"2024-05-04T13:37:59.624Z","dependency_job_id":"4274783c-23b7-40ab-86ed-c4e9f714721f","html_url":"https://github.com/anonymousRecords/touslesjours-admin","commit_stats":null,"previous_names":["anonymousrecords/touslesjours-admin"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anonymousRecords%2Ftouslesjours-admin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anonymousRecords%2Ftouslesjours-admin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anonymousRecords%2Ftouslesjours-admin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anonymousRecords%2Ftouslesjours-admin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/anonymousRecords","download_url":"https://codeload.github.com/anonymousRecords/touslesjours-admin/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246156416,"owners_count":20732397,"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":[],"created_at":"2024-12-09T10:25:43.397Z","updated_at":"2025-03-29T08:13:57.421Z","avatar_url":"https://github.com/anonymousRecords.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"```\n봉투 필요하실까요? 봉투 100원 추가되세요.\n할인 있으실까요?\n카드 앞에 꽂아주세요.\n적립하실까요? 앞에 전화번호 입력해 주세요.\n결제되셨습니다. 감사합니다.\n```\n\n## 🥖 행뚜둥 Log1\n### 요약\n\u003ctable\u003e\n    \u003ctr\u003e\n        \u003cth\u003e작업 기간\u003c/th\u003e\n        \u003ctd\u003e2024-04-27\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003cth\u003e작업 내역\u003c/th\u003e\n        \u003ctd\u003e주말 근무 냉판 담당자 할당 시스템\u003c/td\u003e\n    \u003c/tr\u003e\n\u003c/table\u003e\n\n### 모든 일의 시작은...\n\u003cimg width=\"200\" alt=\"image\" src=\"https://github.com/anonymousRecords/touslesjours-admin/assets/97885933/f94dc075-db37-4e7f-ba65-93f21bdcd34a\"\u003e\n\n- 과도한 냉판 업무로 손목 부상 🤕\n- 냉판 담당자를 통해, 공평한 업무 분배\n\n행복한 뚜둥이(이때 뚜둥이는 뚜레쥬르 아르바이트생을 지칭한다) 생활 6개월 차,,,   \n시련이 찾아왔다.\n\n주말 오픈 근무자의 주요 업무는 빵 포장이지만,   \n부수적으로 꼭 해야하는 업무로 `냉판 업무`가 있다.   \n이때 냉판은 빵을 구울 때 쓰는 판으로, 냉판을 다 닦고 유선지 등을 까는 작업까지 해야 한다.\n\n문제는 이 작업을 하면 팔목이 아프다는 점이다.   \n아르바이트생들이 기피하는 작업이기에, 눈치 싸움에 참여하기가 싫어서   \n매번 냉판 작업을 도맡아 하다 보니 팔목에 무리가 생겨 결국에는 팔목 보호대 신세가 되어버렸다.\n\n아르바이트를 그만두거나 사장님과 딜을 해야할 순간이 찾아왔다고 생각했다.  \n사장님은 아르바이트를 그만두기보다는,   \n냉판 담당자를 지정해 꼭 돌아가면서 작업하도록 하겠다고 약속할 테니 다시 생각해 봐달라고 말씀하셨다.  \n\n그래서 '냉판 담당자'라는 규칙은 세워졌으니,\n내 손목은 내가 지킨다는 마인드로 냉판 담당자 시스템을 직접 만들어 보았다.\n\n### 냉판 담당자 시스템 설계\n규칙은 간단하다.\n주말 오전 근무자는 총 3명으로, 하루에 두 명씩 담당자가 되어 냉판 업무를 맡는 것이다.   \n한 달 동안 최대한 공평하게 업무할 수 있도록 담당자를 할당하는 것이다.\n\n**1. 기술 스택 선정**\n\n\u003cimg width=\"452\" alt=\"image\" src=\"https://github.com/anonymousRecords/touslesjours-admin/assets/97885933/f2ca028b-da94-4dac-9d8a-ec9e9c50b8d0\"\u003e\n\n*(피그마로 작업한 프로젝트 와이어프레임 초안)*\n\n사장님과 통화를 마치고 몇 시간 동안 진행한 프로젝트이기 때문에, 소규모로 진행했다.   \n따라서 기술 스택 역시 간결하였다.   \n\n최근 app router를 공부하고 있기에 프레임워크로 `Next.js app router`를 선정하였고,(그런데 사실상 정적 페이지라 의미가 없었다...)    \n스타일 프레임워크로는 Next.js 공식 문서에도 언급된 `Tailwind`를 채택하였다.   \n나머지 라이브러리 및 기술 스택은 필요에 따라 추가하기로 하고 프로젝트를 시작하였다.   \n\n**2. util 함수 효용 극대화**   \n위에 언급한 규칙처럼 아주 간단한 프로젝트였다.   \n그래도 꼭 챙겨가고 싶었던 것은 ⭐️직관성이 높은 코드⭐️였다.    \n**따라서 util 폴더를 두어 별도로 함수를 관리하였다.**\n\n\u003cimg width=\"452\" alt=\"image\" src=\"https://github.com/anonymousRecords/touslesjours-admin/assets/97885933/d7675222-f75c-4b64-b5f4-0e172b0631f9\"\u003e\n\n냉판 담당자 할당에 사용한 함수들만 살펴보면,   \n\n`weekendArrayGenerator`   \n\nweekendArrayGenerator로 해당 달의 주말을 배열로 만들어주는 함수를 만들었다.   \n달을 매개변수로 넣어주면 { date: 6, person: ['', ''] }와 같은 형식으로 배열을 만들게 하였다.\n\n`assignedWorkers`\n\n그러면 weekendArrayGenerator를 통해 만든 배열에, 주말 배열에 작업자 할당하는 작업을 assignedWorkers 함수를 통해 구현하였다.   \n\n```\nexport const assignWorkers = (weekendArray: WeekendArray[]): AssignedWorkers[] =\u003e {\n  const workers = [];\n  let luckyPersonId = 0;\n\n  // 주말에 대해 반복\n  for (let i = 0; i \u003c weekendArray.length; i++) {\n    const date = weekendArray[i].date;\n    const worker1 = personList[luckyPersonId % personList.length].name;\n    luckyPersonId++;\n    const worker2 = personList[luckyPersonId % personList.length].name;\n    luckyPersonId++;\n    workers.push({ date, workers: [worker1, worker2] });\n  }\n  return workers;\n};\n```\nluckyPersonId 변수를 이용하여 배열에서 작업자를 선택할 수 있도록 하였다.   \nluckyPersonId를 personList.length로 나눈 나머지는 항상 0부터 personList.length - 1까지의 값 중 하나가 되기 때문에,   \nluckyPersonId를 personList.length로 나눈 나머지를 인덱스로 사용하여 personList 배열에서 작업자를 선택할 수 있게 하였다.    \n그리고 luckyPersonId++을 통해 현재 선택된 작업자가 다음 주말에 선택될 작업자를 가리키도록 변수를 증가시켰다.   \n\n이렇게 하여 매 주말마다 하루에 두 명의 작업자를 할당할 수 있었다.   \n\n### 그렇게 뚜둥이에게는 행복한 나날이 펼쳐졌을까요?   \n최소 기능으로 구현 후 사장님께 배포 링크를 공유드렸고,\n\n\u003cimg width=\"322\" alt=\"image\" src=\"https://github.com/anonymousRecords/touslesjours-admin/assets/97885933/d356df2e-7ff5-4626-81a4-9a11e83cd1c2\"\u003e\n\n다행히 사장님께서는 긍정적으로 받아들여 주셨다.   \n그리고 매 달마다 1번, 2번, 3번 뚜둥이를 지정해 주시기로 했다.\n\n**[완성 화면]**   \n배포 링크 : touslesjours-admin.netlify.app/\n\n\u003cdiv\u003e\n  \u003cimg width=\"200\" height=\"400\" alt=\"image\" src=\"https://github.com/anonymousRecords/touslesjours-admin/assets/97885933/114342ed-fa44-4a3a-8d8d-5a8cfa842b58\"\u003e\n  \u003cimg width=\"200\" height=\"400\" alt=\"image\" src=\"https://github.com/anonymousRecords/touslesjours-admin/assets/97885933/5a40b5d7-c1e0-4ddb-aa44-6ecb775e6d0b\"\u003e\n\u003c/div\u003e\n\n### To be continued...   \n**추가 기능 1.**    \n불가피하게 아르바이트를 빠지는 경우 역시 존재한다.   \n그렇게 되면 위 시스템은 공평하지 않게 될 수밖에 없다.   \n따라서 본래의 담당자가 변경되는 상황이 발생하면,    \n해당 날짜 이후로 새롭게 담당자가 할당되게 하는 기능을 추가할 예정이다.    \n\n**추가 기능 2.**    \n샌드위치의 경우, 요일 스티커를 붙인다.   \n현재 수작업으로 해당 날짜의 요일 스티커를 표시하는데, 이를 자동화하는 기능을 추가할 예정이다.  \n(주, 녹, 흰 이렇게 스티커가 매일 돌아가면서 붙여지는데, 현재는 해당 날짜의 스티커가 무슨 색인지 매일 동그라미로 체크하면서 운영되고 있다.)   \n\n## 🥖 행뚜둥 Log2\n### 요약\n\u003ctable\u003e\n    \u003ctr\u003e\n        \u003cth\u003e작업 기간\u003c/th\u003e\n        \u003ctd\u003e2024-05-04~05, 05-12\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003cth\u003e작업 내역\u003c/th\u003e\n        \u003ctd\u003eUI 변경 및 Supabase 추가\u003c/td\u003e\n    \u003c/tr\u003e\n\u003c/table\u003e\n\n### 1. Accordian을 이용한 UI 변경\n\n![ui](https://github.com/anonymousRecords/touslesjours-admin/assets/97885933/bce784d9-20c1-45dd-9e1d-09f53f1cc0b1)\n\n이전에는 내용을 모두 노출시키는 UI였다면,   \nAccordian을 사용하여 유저로 하여금 확인하고 싶은 내용을 선택할 수 있게 변경하였다.   \n이때 Accordian을 공통 컴포넌트로 설계하여 사용하였다.\n\n```\ninterface AccordianProps {\n  title: string;\n  children: ReactNode;\n  isAccordianOpen: boolean;\n  onClick: () =\u003e void;\n}\n```\ninterface의 경우, 위와 같이 설계하였는데   \nAccordian 안에 담기는 내용은 children으로 담아 보이게 하였다.   \n이렇게 하면 자유로운 장점은 있지만, 조금 더 구체적으로 설계해도 괜찮지 않았을까 하는 생각이 남는다.   \n\n### 2. Supabase 사용\n\n![change](https://github.com/anonymousRecords/touslesjours-admin/assets/97885933/e4d2d8bb-eefe-419d-a165-131d2da49e33)\n\n[Supabase](https://supabase.com/)를 사용하여 데이터를 관리하고자 하였다.   \n이전까지는 정적 렌더링 웹 사이트였다면, 할당된 작업자 수정을 통해 동적 웹 사이트로 변경되었다.   \n\nFirebase를 사용할 지 아니면 Supabase를 사용할 지 고민하다가,   \n**관계형데이터베이스의 스키마와 join을 사용한다는 측면에서** Supabase가 더 좋겠다는 판단 하에 supabase를 채택했다.\n\n## 🥖 행뚜둥 Log3\n### 요약\n\u003ctable\u003e\n    \u003ctr\u003e\n        \u003cth\u003e작업 기간\u003c/th\u003e\n        \u003ctd\u003e2024-06-09, 11\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003cth\u003e작업 내역\u003c/th\u003e\n        \u003ctd\u003e샌드위치 페이지 완성, 로그인 기능 추가\u003c/td\u003e\n    \u003c/tr\u003e\n\u003c/table\u003e\n\n🎉행뚜둥 Log1에서 언급한 추가 기능을 모두 구현하였다.🎉\n\n### 1. 샌드위치 스티커\n![2024-06-1111 13 17-ezgif com-video-to-gif-converter](https://github.com/anonymousRecords/touslesjours-admin/assets/97885933/df70a0a8-5e3b-4478-a94a-f4929b456bd8)\n\n오늘의 샌드위치 스티커 색상을 항상 전날 스티커 색상을 보고 직접 표시하다보니, 실수가 발생한 경우가 종종 있었다.    \n내가 샌드위치 재고 관리를 주로 맡기 때문에, 스티커 색상이 꼬이면 부수적인 작업이 생긴다.   \n스티커 색상 표시할 때 정신 차려서 하라고 말 할 수도 있지만, 손님이 많아서 정신이 없거나 실수는 생길 수 밖에 없다고 본다.    \n따라서 **사람의 능력에 의지하기 보다는, 시스템을 만들어서 실수를 막는 것이 필요하다고 생각하였다.**\n그 생각에서 만든게 바로 샌드위치 스티커 화면이다.\n\n해당 페이지에서 중요한 것은 바로 `SandwichTable` 컴포넌트이다.   \n🤔 샌드위치 스티커 색상을 변경했는데, 화면에 반영이 안 되었어요   \n🤔 주 기준으로 데이터가 안 불러와져요    \n🤔 전 날 스티커를 바탕으로, 오늘 샌드위치 스티커 색상을 어떻게 자동으로 채울까요?    \n...\n\n이전 작업들과 달리, 많은 이슈들이 있었다.    \n특히 '🤔 샌드위치 스티커 색상을 변경했는데, 화면에 반영이 안 되었어요'의 경우 컴포넌트 설계에 대해 다시 한 번 생각하게 된 계기가 되었다.\n\n### 2. 로그인 기능 추가 (feat. NextAuth.js)\n\u003cimg width=\"740\" alt=\"image\" src=\"https://github.com/anonymousRecords/touslesjours-admin/assets/97885933/20d3faa1-fc49-4f56-ad52-294d4dad6ea9\"\u003e\n\n실제로 운영을 하는 웹 사이트이기 때문에, 아무나 들어와서 데이터를 변경하는 것을 막아야 했다.   \n따라서 [NextAuth](https://next-auth.js.org/) 를 통해 로그인 기능을 추가하였다.\n\n### 3. 아 엠어 행뚜둥\n\u003cimg width=\"740\" alt=\"image\" src=\"https://github.com/anonymousRecords/touslesjours-admin/assets/97885933/fb571cdc-f83a-4402-805c-081c725432ef\"\u003e\n\n포스기에 웹 사이트 접속해서 실제로 잘 쓰고 있따 ^___^\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanonymousrecords%2Ftouslesjours-admin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fanonymousrecords%2Ftouslesjours-admin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanonymousrecords%2Ftouslesjours-admin/lists"}