V5 241111 (#243)

AboutClan · Nov 11, 2024 · cae9158 · cae9158
1 parent 99f88c2
commit cae9158
Show file tree

Hide file tree

Showing 61 changed files with 1,280 additions and 743 deletions.
diff --git a/components/BottomNav.tsx b/components/BottomNav.tsx
@@ -7,6 +7,7 @@ import styled from "styled-components";
 
 import { useHandleMove } from "../@natives/useHandleBottomNav";
 import { USER_LOCATION } from "../constants/keys/localStorage";
+import { useTypeToast } from "../hooks/custom/CustomToast";
 import { getStudyStandardDate } from "../libs/study/date/getStudyStandardDate";
 import { slideDirectionState } from "../recoils/navigationRecoils";
 import { ActiveLocation } from "../types/services/locationTypes";
@@ -69,12 +70,24 @@ export default function BottomNav() {
 }
 
 function NavButton({ text, url, activeIcon, defaultIcon, isActive, idx }: INavButton) {
+  const { data: session } = useSession();
+  const typeToast = useTypeToast();
+  const isGuest = session?.user.role === "guest";
   const setSlideDirection = useSetRecoilState(slideDirectionState);
   const handleMove = useHandleMove(setSlideDirection);
 
+  const onClick = (e) => {
+    if (isGuest && text === "스터디") {
+      e.preventDefault();
+      typeToast("guest");
+      return;
+    }
+    handleMove();
+  };
+
   return (
     <NavLink
-      onClick={handleMove}
+      onClick={onClick}
       href={url}
       isactive={isActive.toString() as "true" | "false"}
       replace={!text}

diff --git a/components/Icons/CircleIcons.tsx b/components/Icons/CircleIcons.tsx
@@ -21,7 +21,13 @@ export function CheckCircleIcon({
             fillRule="evenodd"
             clipRule="evenodd"
             d="M8.6035 5.1075L5.812 7.8995C5.71796 7.9929 5.59079 8.04532 5.45825 8.04532C5.32571 8.04532 5.19854 7.9929 5.1045 7.8995L3.3965 6.1915C3.35008 6.14508 3.31325 6.08997 3.28813 6.02931C3.26301 5.96866 3.25008 5.90365 3.25008 5.838C3.25008 5.70541 3.30275 5.57825 3.3965 5.4845C3.49025 5.39075 3.61741 5.33808 3.75 5.33808C3.88259 5.33808 4.00975 5.39075 4.1035 5.4845L5.458 6.839L7.8965 4.4005C7.94292 4.35408 7.99803 4.31725 8.05869 4.29213C8.11934 4.26701 8.18435 4.25408 8.25 4.25408C8.31565 4.25408 8.38066 4.26701 8.44131 4.29213C8.50197 4.31725 8.55708 4.35408 8.6035 4.4005C8.64992 4.44692 8.68675 4.50203 8.71187 4.56269C8.73699 4.62334 8.74992 4.68835 8.74992 4.754C8.74992 4.81965 8.73699 4.88466 8.71187 4.94531C8.68675 5.00597 8.64992 5.06108 8.6035 5.1075ZM6 0.5C2.9625 0.5 0.5 2.9625 0.5 6C0.5 9.0375 2.9625 11.5 6 11.5C9.0375 11.5 11.5 9.0375 11.5 6C11.5 2.9625 9.0375 0.5 6 0.5Z"
-            fill="white"
+            fill={
+              color === "mint"
+                ? "var(--color-mint)"
+                : color === "gray"
+                ? "var(--gray-300)"
+                : "white"
+            }
           />
         </g>
         <defs>

diff --git a/components/Icons/DotIcons.tsx b/components/Icons/DotIcons.tsx
@@ -1,10 +1,19 @@
-export function EllipsisIcon() {
-  return <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
-    <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M4.16667 11.6674C3.94774 11.6674 3.73097 11.6242 3.52873 11.5404C3.32649 11.4565 3.14275 11.3337 2.98798 11.1788C2.83322 11.024 2.71047 10.8402 2.62674 10.6379C2.54301 10.4356 2.49995 10.2188 2.5 9.99992C2.50005 9.78099 2.54323 9.56422 2.62706 9.36199C2.71089 9.15975 2.83373 8.976 2.98857 8.82124C3.14341 8.66647 3.32722 8.54372 3.5295 8.45999C3.73178 8.37626 3.94858 8.3332 4.1675 8.33325C4.60964 8.33336 5.03362 8.50911 5.34618 8.82182C5.65874 9.13454 5.83428 9.55861 5.83417 10.0008C5.83406 10.4429 5.65831 10.8669 5.34559 11.1794C5.03288 11.492 4.6088 11.6675 4.16667 11.6674ZM9.80917 11.6674C9.36714 11.6674 8.94322 11.4918 8.63066 11.1793C8.31809 10.8667 8.1425 10.4428 8.1425 10.0008C8.1425 9.55872 8.31809 9.1348 8.63066 8.82224C8.94322 8.50968 9.36714 8.33409 9.80917 8.33409C10.2512 8.33409 10.6751 8.50968 10.9877 8.82224C11.3002 9.1348 11.4758 9.55872 11.4758 10.0008C11.4758 10.4428 11.3002 10.8667 10.9877 11.1793C10.6751 11.4918 10.2512 11.6674 9.80917 11.6674ZM15.4508 11.6674C15.2319 11.6674 15.0151 11.6242 14.8129 11.5404C14.6107 11.4565 14.4269 11.3337 14.2721 11.1788C14.1174 11.024 13.9946 10.8402 13.9109 10.6379C13.8272 10.4356 13.7841 10.2188 13.7842 9.99992C13.7842 9.78099 13.8274 9.56422 13.9112 9.36199C13.9951 9.15975 14.1179 8.976 14.2727 8.82124C14.4276 8.66647 14.6114 8.54372 14.8137 8.45999C15.016 8.37626 15.2327 8.3332 15.4517 8.33325C15.8938 8.33336 16.3178 8.50911 16.6304 8.82182C16.9429 9.13454 17.1184 9.55861 17.1183 10.0008C17.1182 10.4429 16.9425 10.8669 16.6298 11.1794C16.317 11.492 15.893 11.6675 15.4508 11.6674Z"
-      fill="#BDBDBD"
-    />
-  </svg>
+export function EllipsisIcon({ size }: { size: "sm" | "md" }) {
+  const width = size === "sm" ? 12 : 20;
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={width}
+      height={width}
+      viewBox="0 0 20 20"
+      fill="none"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M4.16667 11.6674C3.94774 11.6674 3.73097 11.6242 3.52873 11.5404C3.32649 11.4565 3.14275 11.3337 2.98798 11.1788C2.83322 11.024 2.71047 10.8402 2.62674 10.6379C2.54301 10.4356 2.49995 10.2188 2.5 9.99992C2.50005 9.78099 2.54323 9.56422 2.62706 9.36199C2.71089 9.15975 2.83373 8.976 2.98857 8.82124C3.14341 8.66647 3.32722 8.54372 3.5295 8.45999C3.73178 8.37626 3.94858 8.3332 4.1675 8.33325C4.60964 8.33336 5.03362 8.50911 5.34618 8.82182C5.65874 9.13454 5.83428 9.55861 5.83417 10.0008C5.83406 10.4429 5.65831 10.8669 5.34559 11.1794C5.03288 11.492 4.6088 11.6675 4.16667 11.6674ZM9.80917 11.6674C9.36714 11.6674 8.94322 11.4918 8.63066 11.1793C8.31809 10.8667 8.1425 10.4428 8.1425 10.0008C8.1425 9.55872 8.31809 9.1348 8.63066 8.82224C8.94322 8.50968 9.36714 8.33409 9.80917 8.33409C10.2512 8.33409 10.6751 8.50968 10.9877 8.82224C11.3002 9.1348 11.4758 9.55872 11.4758 10.0008C11.4758 10.4428 11.3002 10.8667 10.9877 11.1793C10.6751 11.4918 10.2512 11.6674 9.80917 11.6674ZM15.4508 11.6674C15.2319 11.6674 15.0151 11.6242 14.8129 11.5404C14.6107 11.4565 14.4269 11.3337 14.2721 11.1788C14.1174 11.024 13.9946 10.8402 13.9109 10.6379C13.8272 10.4356 13.7841 10.2188 13.7842 9.99992C13.7842 9.78099 13.8274 9.56422 13.9112 9.36199C13.9951 9.15975 14.1179 8.976 14.2727 8.82124C14.4276 8.66647 14.6114 8.54372 14.8137 8.45999C15.016 8.37626 15.2327 8.3332 15.4517 8.33325C15.8938 8.33336 16.3178 8.50911 16.6304 8.82182C16.9429 9.13454 17.1184 9.55861 17.1183 10.0008C17.1182 10.4429 16.9425 10.8669 16.6298 11.1794C16.317 11.492 15.893 11.6675 15.4508 11.6674Z"
+        fill="#BDBDBD"
+      />
+    </svg>
+  );
 }
diff --git a/components/Icons/HeartIcons.tsx b/components/Icons/HeartIcons.tsx
@@ -5,7 +5,7 @@ export function HeartIcon({
 }: {
   size?: "sm" | "md";
   fill?: boolean;
-  color?: "gray" | "red" | "orange";
+  color: "gray" | "red" | "orange";
 }) {
   const width = size === "sm" ? 12 : 16;
   return (
@@ -19,8 +19,8 @@ export function HeartIcon({
           ? color === "gray"
             ? "var(--gray-300)"
             : color === "red"
-              ? "var(--color-red)"
-              : "var(--color-orange)"
+            ? "var(--color-red)"
+            : "var(--color-orange)"
           : "none"
       }
     >
@@ -38,8 +38,8 @@ export function HeartIcon({
             ? color === "gray"
               ? "var(--gray-300)"
               : color === "red"
-                ? "var(--color-red)"
-                : "var(--color-orange)"
+              ? "var(--color-red)"
+              : "var(--color-orange)"
             : "white"
         }
         strokeWidth="1"

diff --git a/components/Icons/MathIcons.tsx b/components/Icons/MathIcons.tsx
@@ -1,11 +1,20 @@
-export function PlusIcon() {
-  return (
-    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
+export function PlusIcon({ color, size }: { color: "white" | "mint"; size: "sm" | "md" }) {
+  return size === "sm" ? (
+    <svg xmlns="http://www.w3.org/2000/svg" width={12} height={12} viewBox="0 0 12 12" fill="none">
       <path
         fillRule="evenodd"
         clipRule="evenodd"
         d="M10.1589 5.40005H6.65889V1.90005C6.65889 1.74092 6.59567 1.58831 6.48315 1.47578C6.37063 1.36326 6.21802 1.30005 6.05889 1.30005C5.89976 1.30005 5.74714 1.36326 5.63462 1.47578C5.5221 1.58831 5.45889 1.74092 5.45889 1.90005V5.40005H1.95889C1.79976 5.40005 1.64714 5.46326 1.53462 5.57578C1.4221 5.68831 1.35889 5.84092 1.35889 6.00005C1.35889 6.15918 1.4221 6.31179 1.53462 6.42431C1.64714 6.53683 1.79976 6.60005 1.95889 6.60005H5.45889V10.1C5.45889 10.2592 5.5221 10.4118 5.63462 10.5243C5.74714 10.6368 5.89976 10.7 6.05889 10.7C6.21802 10.7 6.37063 10.6368 6.48315 10.5243C6.59567 10.4118 6.65889 10.2592 6.65889 10.1V6.60005H10.1589C10.318 6.60005 10.4706 6.53683 10.5832 6.42431C10.6957 6.31179 10.7589 6.15918 10.7589 6.00005C10.7589 5.84092 10.6957 5.68831 10.5832 5.57578C10.4706 5.46326 10.318 5.40005 10.1589 5.40005Z"
-        fill="#00C2B3"
+        fill={color === "mint" ? "#00C2B3" : "white"}
+      />
+    </svg>
+  ) : (
+    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M14.9317 7.00008H9.09835V1.16675C9.09835 0.901532 8.99299 0.647178 8.80545 0.459641C8.61792 0.272105 8.36356 0.166748 8.09835 0.166748C7.83313 0.166748 7.57878 0.272105 7.39124 0.459641C7.2037 0.647178 7.09835 0.901532 7.09835 1.16675V7.00008H1.26501C0.999798 7.00008 0.745444 7.10544 0.557908 7.29297C0.370372 7.48051 0.265015 7.73486 0.265015 8.00008C0.265015 8.2653 0.370372 8.51965 0.557908 8.70719C0.745444 8.89472 0.999798 9.00008 1.26501 9.00008H7.09835V14.8334C7.09835 15.0986 7.2037 15.353 7.39124 15.5405C7.57878 15.7281 7.83313 15.8334 8.09835 15.8334C8.36356 15.8334 8.61792 15.7281 8.80545 15.5405C8.99299 15.353 9.09835 15.0986 9.09835 14.8334V9.00008H14.9317C15.1969 9.00008 15.4513 8.89472 15.6388 8.70719C15.8263 8.51965 15.9317 8.2653 15.9317 8.00008C15.9317 7.73486 15.8263 7.48051 15.6388 7.29297C15.4513 7.10544 15.1969 7.00008 14.9317 7.00008Z"
+        fill="white"
       />
     </svg>
   );

diff --git a/components/Icons/UserIcons.tsx b/components/Icons/UserIcons.tsx
@@ -24,8 +24,8 @@ export function UserPlusIcon() {
   return (
     <svg xmlns="http://www.w3.org/2000/svg" width="12" height="10" viewBox="0 0 12 10" fill="none">
       <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
+        fillRule="evenodd"
+        clipRule="evenodd"
         d="M11.5 4.05002H10.45V3.00002C10.4461 2.88334 10.397 2.77273 10.3131 2.69156C10.2292 2.6104 10.117 2.56502 10.0003 2.56502C9.8835 2.56502 9.77132 2.6104 9.6874 2.69156C9.60348 2.77273 9.55439 2.88334 9.5505 3.00002V4.05002H8.5C8.38066 4.05002 8.2662 4.09743 8.18181 4.18183C8.09741 4.26622 8.05 4.38068 8.05 4.50002C8.05 4.61937 8.09741 4.73383 8.18181 4.81822C8.2662 4.90261 8.38066 4.95002 8.5 4.95002H9.5505V6.00002C9.54849 6.06035 9.55864 6.12046 9.58033 6.17678C9.60203 6.23311 9.63483 6.28449 9.6768 6.32787C9.71876 6.37126 9.76902 6.40576 9.82459 6.42932C9.88016 6.45288 9.9399 6.46502 10.0003 6.46502C10.0606 6.46502 10.1204 6.45288 10.1759 6.42932C10.2315 6.40576 10.2817 6.37126 10.3237 6.32787C10.3657 6.28449 10.3985 6.23311 10.4202 6.17678C10.4419 6.12046 10.452 6.06035 10.45 6.00002V4.95002H11.5C11.6194 4.95002 11.7338 4.90261 11.8182 4.81822C11.9026 4.73383 11.95 4.61937 11.95 4.50002C11.95 4.38068 11.9026 4.26622 11.8182 4.18183C11.7338 4.09743 11.6194 4.05002 11.5 4.05002ZM5 4.72802C5.57738 4.72802 6.13111 4.49866 6.53937 4.09039C6.94764 3.68213 7.177 3.1284 7.177 2.55102C7.177 1.97365 6.94764 1.41992 6.53937 1.01165C6.13111 0.603385 5.57738 0.374023 5 0.374023C4.42263 0.374023 3.8689 0.603385 3.46063 1.01165C3.05236 1.41992 2.823 1.97365 2.823 2.55102C2.823 3.1284 3.05236 3.68213 3.46063 4.09039C3.8689 4.49866 4.42263 4.72802 5 4.72802ZM5 5.39402C1.8655 5.39402 0.647003 7.38852 0.647003 8.31652C0.647003 9.24402 3.2415 9.49102 5 9.49102C6.7585 9.49102 9.353 9.24402 9.353 8.31602C9.353 7.38852 8.1345 5.39402 5 5.39402Z"
         fill="#A0AEC0"
       />

diff --git a/components/atoms/BottomCommentInput.tsx b/components/atoms/BottomCommentInput.tsx
@@ -0,0 +1,56 @@
+import { Box } from "@chakra-ui/react";
+
+import { SECRET_USER_SUMMARY } from "../../constants/serviceConstants/userConstants";
+import { useKeypadHeight } from "../../hooks/custom/useKeypadHeight";
+import { ReplyProps } from "../../pageTemplates/square/SecretSquare/SecretSquareComments";
+import { DispatchType } from "../../types/hooks/reactTypes";
+import { IUserSummary } from "../../types/models/userTypes/userInfoTypes";
+import { iPhoneNotchSize } from "../../utils/validationUtils";
+import UserCommentInput from "../molecules/UserCommentInput";
+
+interface BottomCommentInputProps {
+  isFixed?: boolean;
+  onSubmit: (value: string) => void;
+  type?: "comment" | "message";
+  replyName: string;
+  user: IUserSummary;
+  setReplyProps: DispatchType<ReplyProps>;
+}
+
+function BottomCommentInput({
+  isFixed = true,
+  onSubmit,
+  type = "comment",
+  replyName,
+  user,
+  setReplyProps,
+}: BottomCommentInputProps) {
+  const keypadHeight = useKeypadHeight();
+
+  return (
+    <Box
+      position={isFixed ? "fixed" : "static"}
+      borderTop="var(--border)"
+      borderBottom={isFixed ? null : "var(--border)"}
+      mt={isFixed ? null : 5}
+      bottom="0"
+      flex={1}
+      w="100%"
+      backgroundColor="white"
+      maxW="var(--max-width)"
+      pb={`${keypadHeight === 0 ? iPhoneNotchSize() : 0}px`}
+    >
+      <Box py={2} borderBottom="var(--border)" px={5}>
+        <UserCommentInput
+          user={user || SECRET_USER_SUMMARY}
+          onSubmit={onSubmit}
+          type={type}
+          replyName={replyName}
+          setReplyProps={setReplyProps}
+        />
+      </Box>
+    </Box>
+  );
+}
+
+export default BottomCommentInput;
diff --git a/components/atoms/BottomFixedButton.tsx b/components/atoms/BottomFixedButton.tsx
@@ -0,0 +1,27 @@
+import { Box, Button } from "@chakra-ui/react";
+
+import { iPhoneNotchSize } from "../../utils/validationUtils";
+
+interface BottomFixedButton {
+  text: string;
+  func: () => void;
+}
+
+function BottomFixedButton({ text, func }: BottomFixedButton) {
+  return (
+    <Box w="full" position="fixed" py={2} px={5} bottom={`${iPhoneNotchSize()}px`}>
+      <Button
+        size="lg"
+        w="100%"
+        maxW="var(--view-max-width)"
+        borderRadius="12px"
+        onClick={func}
+        colorScheme={func ? "mint" : "blackAlpha"}
+      >
+        {text}
+      </Button>
+    </Box>
+  );
+}
+
+export default BottomFixedButton;
diff --git a/components/atoms/Select.tsx b/components/atoms/Select.tsx
@@ -13,7 +13,7 @@ interface ISelect {
   setValue: DispatchType<string> | DispatchType<ActiveLocation>;
   isBorder?: boolean;
   type?: "location";
-  size: "sm" | "md" | "lg";
+  size: "xs" | "sm" | "md" | "lg";
   isEllipse?: boolean;
   isFullSize?: boolean;
   isActive?: boolean;
@@ -26,7 +26,7 @@ export default function Select({
   setValue: setParentValue,
   isBorder = true,
   type,
-  size = "sm",
+  size,
   isFullSize,
   isEllipse = true,
   isActive = true,
@@ -53,7 +53,7 @@ export default function Select({
   const adjustWidth = () => {
     if (selectRef.current) {
       const textLength = selectRef.current.selectedOptions[0].text.length;
-      const addSize = size === "sm" ? 44 : size === "md" ? 60 : 0;
+      const addSize = size === "xs" ? 44 : size === "sm" ? 48 : size === "md" ? 60 : 0;
       selectRef.current.style.width = `${textLength * 6.5 + addSize}px`;
     }
   };
@@ -64,8 +64,9 @@ export default function Select({
         <Flex
           justify="center"
           pr={size === "lg" && 4}
+          ml="auto"
           align="center"
-          fontSize={size === "sm" ? "12px" : "12px"}
+          fontSize={size === "xs" ? "12px" : "12px"}
           pointerEvents="none"
         >
           <Box>
@@ -75,34 +76,61 @@ export default function Select({
       }
       ref={selectRef}
       focusBorderColor="#00c2b3"
-      size={size === "sm" ? "xs" : size === "md" ? "md" : "lg"}
+      size={size}
       color="primary"
       value={value}
       onChange={onChange}
       borderRadius={
-        !isEllipse ? undefined : size === "sm" ? "9999px" : size === "md" ? "20px" : "12px"
+        !isEllipse
+          ? undefined
+          : size === "xs"
+          ? "9999px"
+          : size === "sm"
+          ? "8px"
+          : size === "md"
+          ? "20px"
+          : "12px"
       }
       border={!isBorder ? "none" : undefined}
       borderColor="var(--gray-200)"
       bgColor="white"
       fontSize={
-        size === "sm" && !isBorder ? "12px" : size === "sm" || size === "md" ? "11px" : "13px"
+        size === "sm"
+          ? "12px"
+          : size === "xs" && !isBorder
+          ? "12px"
+          : size === "xs" || size === "md"
+          ? "11px"
+          : "13px"
       }
       outline={size === "md" ? "1px solid var(--gray-100)" : undefined}
-      fontWeight={size === "sm" ? 500 : isThick ? 600 : 500}
+      fontWeight={isThick ? 600 : 500}
       isDisabled={!isActive}
-      height={size === "sm" ? (isBorder ? "24px" : "16px") : size === "md" ? "32px" : "52px"}
+      height={
+        size === "xs"
+          ? isBorder
+            ? "24px"
+            : "16px"
+          : size === "sm"
+          ? "28px"
+          : size === "md"
+          ? "32px"
+          : "52px"
+      }
       width={!isFullSize ? "max-content" : "100%"}
-      mr={size === "sm" && !isBorder && "-6px"}
+      mr={size === "xs" && !isBorder && "-6px"}
       sx={{
         paddingInlineStart: !isEllipse
           ? "12px"
-          : size === "sm"
+          : size === "xs"
           ? "8px"
+          : size === "sm"
+          ? "12px"
           : size === "md"
           ? "16px"
           : "20px", // padding-left
-        paddingInlineEnd: !isEllipse ? "16px" : "20px", // padding-right (아이콘 오른쪽에 여유 공간)
+        paddingInlineEnd: size === "sm" ? "4px" : !isEllipse ? "16px" : "20px", // padding-right (아이콘 오른쪽에 여유 공간)
+        paddingBottom: 0,
       }}
       _focus={{
         outline: isBorder ? "var(--border)" : "none",

diff --git a/components/atoms/buttons/MenuButton.tsx b/components/atoms/buttons/MenuButton.tsx
@@ -22,12 +22,17 @@ function MenuButton({ menuArr }: MenuButtonProps) {
         <>
           <ChakraMenuButton isActive={isOpen} as={Button} variant="unstyled">
             <ButtonWrapper>
-              <EllipsisIcon />
+              <EllipsisIcon size="md" />
             </ButtonWrapper>
           </ChakraMenuButton>
           <MenuList fontSize="14px">
             {menuArr.map((menu) => (
-              <MenuItem key={menu?.text || "kakao"} onClick={menu?.func} bg="white">
+              <MenuItem
+                as={menu?.kakaoOptions ? "div" : "button"}
+                key={menu?.text || "kakao"}
+                onClick={menu?.func}
+                bg="white"
+              >
                 {menu?.text}
                 {menu?.kakaoOptions && <KakaoShareBtn variant="unstyled" {...menu.kakaoOptions} />}
               </MenuItem>

diff --git a/components/layouts/Header.tsx b/components/layouts/Header.tsx
@@ -44,8 +44,11 @@ export default function Header({
             </Box>
           )}
         </Flex>
-        {isCenter && <CenterTitle>{title}</CenterTitle>}
-        {isCenter && !children && <Box w={5} />}
+        {isCenter && (
+          <Box fontWeight="bold" flex={1} textAlign="center" fontSize="16px">
+            {title}
+          </Box>
+        )}
         <div>{children}</div>
       </HeaderContainer>
     );
@@ -82,10 +85,3 @@ const HeaderContainer = styled.header<{
   max-width: var(--max-width);
   margin: 0 auto;
 `;
-
-const CenterTitle = styled.div`
-  flex: 1;
-  font-weight: "bold";
-  color: var(--gray-800); /* text-gray-1 - 색상은 예시입니다 */
-  text-align: center;
-`;