feat: 식단 페이지 디자인 변경

src/hooks/useOnclickOutside.ts

@@ -0,0 +1,32 @@
+import { useEffect } from 'react';
+
+function useOnClickOutside<T extends HTMLElement = HTMLElement>(
+  ref: React.RefObject<T>,
+  handler: (event?: Event | MouseEvent) => void,
+) {
+  useEffect(() => {
+    function onClickHandler(event: Event | MouseEvent) {
+      if (!ref?.current || ref?.current.contains(event?.target as Node)) {
+        return;
+      }
+      handler(event);
+    }
+
+    function onTouchHandler(event: TouchEvent) {
+      if (!ref?.current || ref?.current.contains(event?.target as Node)) {
+        return;
+      }
+      handler(event);
+    }
+
+    window.addEventListener('click', onClickHandler);
+    window.addEventListener('touchstart', onTouchHandler);
+
+    return () => {
+      window.removeEventListener('click', onClickHandler);
+      window.removeEventListener('touchstart', onTouchHandler);
+    };
+  }, [ref, handler]);
+}
+
+export default useOnClickOutside;

src/index.scss

@@ -23,6 +23,7 @@ html {
 button {
   border: none;
   font-family: Pretandard, sans-serif;
+  cursor: pointer;
 }
 
 a,

src/pages/Coop/Coop.module.scss

@@ -1,48 +1,11 @@
 .container {
   display: flex;
   flex-direction: column;
-  background-color: #f5f5f5;
-  height: 100%;
-  font-family: Pretendard, sans-serif;
 }
 
-.container-wrapper {
+.content {
   display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.place {
-  &__container {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    margin-top: 24px;
-    margin-left: 24px;
-  }
-
-  &__button--selected {
-    width: 60px;
-    height: 30px;
-    background-color: #175c8e;
-    color: #fff;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 999px;
-    cursor: pointer;
-  }
-
-  &__button--unselected {
-    width: 60px;
-    height: 30px;
-    background-color: #fff;
-    color: #175c8e;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border: solid 1px #175c8e;
-    border-radius: 999px;
-    cursor: pointer;
-  }
-}
+  flex-direction: column;
+  padding: 16px 24px;
+  gap: 12px;
+}

src/pages/Coop/components/Calendar/Calendar.module.scss

@@ -1,24 +1,92 @@
+.container {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  align-items: center;
+}
+
+.title-wrapper {
+  display: grid;
+  grid-template-areas:
+    "title-main title-main"
+    "title-sub button-container";
+  width: calc(100% - 48px);
+  margin: 8px 24px;
+}
+
+.title--main {
+  grid-area: title-main;
+  color:  #727272;
+
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 160%; /* 22.4px */
+}
+
+.title--sub {
+  grid-area: title-sub;
+  color:  #000;
+
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 160%; /* 32px */
+}
+
+.button-container {
+  grid-area: button-container;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8px;
+
+  & > button {
+    display: flex;
+    padding: 6px 14px;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+    border-radius: 12px;
+    background: none;
+
+    color: #727272;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 160%; /* 22.4px */
+
+    &__selected {
+      color: #4B4B4B;
+      background:  #EEE;
+    }
+  }
+}
+
+
+
 .calendar-body {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
+  width: calc(100% - 64px);
   gap: 8px;
-  max-width: 326px;
+  padding: 16px 32px;
 }
 
 .days {
   display: grid;
-  grid-template-columns: repeat(7, 28px);
+  width: 100%;
+  grid-template-columns: repeat(7,28px);
   grid-template-rows: repeat(1, 21px);
-  gap: 21px;
+  gap: 14px calc((100% - 196px) / 6);
 }
 
 .day {
-  color: #8E8E8E;
-  text-align: center;
+  color: #4B4B4B;
 
-  font-family: Pretendard;
+  text-align: center;
   font-size: 13px;
   font-style: normal;
   font-weight: 400;
@@ -29,7 +97,7 @@
   display: grid;
   grid-template-columns: repeat(7, 28px);
   grid-template-rows: repeat(6, 28px);
-  gap: 14px 21px;
+  gap: 14px calc((100% - 196px) / 6);
 
   width: 100%;
   height: 100%;