Merge pull request #81 from SOPT-all/feat/#78/profilePage

[Feat/#78] 프로필 페이지 구현 (타인이 봤을 때 마이페이지)

src/asset/svg/IcChevronLeft.tsx

@@ -0,0 +1,19 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+const SvgIcChevronLeft = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 21 21"
+    {...props}
+  >
+    <path
+      stroke="#222"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={1.5}
+      d="m13 15.5-5-5 5-5"
+    />
+  </svg>
+);
+export default SvgIcChevronLeft;

src/asset/svg/IcChevronRight.tsx

@@ -0,0 +1,19 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+const SvgIcChevronRight = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 29 29"
+    {...props}
+  >
+    <path
+      stroke="#222"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={1.5}
+      d="m11 21.5 7-7-7-7"
+    />
+  </svg>
+);
+export default SvgIcChevronRight;

src/asset/svg/IcPlus.tsx

@@ -0,0 +1,19 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+const SvgIcPlus = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 21 21"
+    {...props}
+  >
+    <path
+      stroke="#BEBEBE"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={1.5}
+      d="M10.5 4.667v11.666M4.667 10.5h11.667"
+    />
+  </svg>
+);
+export default SvgIcPlus;

src/asset/svg/IcSettings.tsx

@@ -0,0 +1,21 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+const SvgIcSettings = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 21 21"
+    {...props}
+  >
+    <g
+      stroke="#222"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={1.5}
+    >
+      <path d="M10.5 13a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5" />
+      <path d="M16.106 12.773a1.25 1.25 0 0 0 .25 1.379l.046.045a1.516 1.516 0 1 1-2.144 2.144l-.045-.046a1.25 1.25 0 0 0-1.38-.25 1.25 1.25 0 0 0-.757 1.144v.13a1.515 1.515 0 1 1-3.03 0v-.069a1.25 1.25 0 0 0-.818-1.144 1.25 1.25 0 0 0-1.38.25l-.045.046a1.516 1.516 0 1 1-2.144-2.144l.046-.046a1.25 1.25 0 0 0 .25-1.379 1.25 1.25 0 0 0-1.144-.757h-.129a1.515 1.515 0 1 1 0-3.03h.068a1.25 1.25 0 0 0 1.144-.819 1.25 1.25 0 0 0-.25-1.378L4.6 6.803A1.515 1.515 0 1 1 6.743 4.66l.045.046a1.25 1.25 0 0 0 1.379.25h.06a1.25 1.25 0 0 0 .758-1.144v-.13a1.515 1.515 0 1 1 3.03 0v.07a1.25 1.25 0 0 0 .758 1.143 1.25 1.25 0 0 0 1.379-.25l.045-.045a1.517 1.517 0 1 1 2.144 2.144l-.045.045a1.25 1.25 0 0 0-.25 1.379v.06a1.25 1.25 0 0 0 1.144.758h.129a1.515 1.515 0 1 1 0 3.03h-.069a1.25 1.25 0 0 0-1.144.758" />
+    </g>
+  </svg>
+);
+export default SvgIcSettings;

src/asset/svg/index.ts

@@ -1,23 +1,26 @@
-export { default as IcNormal } from "./IcNormal";
+export { default as Check } from "./Check";
 export { default as IcBottomSheetLine } from "./IcBottomSheetLine";
 export { default as IcEllipse57 } from "./IcEllipse57";
+export { default as IcNormal } from "./IcNormal";
 export { default as IcShape } from "./IcShape";
+export { default as IcChevronLeft } from "./IcChevronLeft";
+export { default as IcChevronRight } from "./IcChevronRight";
 export { default as IcClear } from "./IcClear";
 export { default as IcDelete } from "./IcDelete";
-export { default as IcLogo } from "./IcLogo";
 export { default as IcEllipses } from "./IcEllipses";
 export { default as IcLeftarrow } from "./IcLeftarrow";
+export { default as IcLogo } from "./IcLogo";
 export { default as IcMessage } from "./IcMessage";
+export { default as IcPlus } from "./IcPlus";
 export { default as IcSearch } from "./IcSearch";
 export { default as IcSearchFillter } from "./IcSearchFillter";
 export { default as IcSearchFillterBlue } from "./IcSearchFillterBlue";
-
-export { default as Check } from "./Check";
-export { default as IcUp } from "./IcUp";
+export { default as IcSettings } from "./IcSettings";
 export { default as IcTest } from "./IcTest";
+export { default as IcToastError } from "./IcToastError";
+export { default as IcUp } from "./IcUp";
 export { default as IcoMessage } from "./IcoMessage";
 export { default as IcoSkeleton } from "./IcoSkeleton";
 export { default as Plus } from "./Plus";
-export { default as IcToastError } from "./IcToastError";
 export { default as React } from "./React";
 export { default as Vite } from "./Vite";

src/common/component/Nav/Nav.css.ts

@@ -16,10 +16,12 @@ export const container = style([
 export const navItem = recipe({
   base: {
     display: "flex",
+    width: "5.6rem",
     flexDirection: "column",
     justifyContent: "center",
     alignItems: "center",
     padding: "0 1.2rem",
+    whiteSpace: "nowrap",
   },
   variants: {
     state: {

src/common/component/Nav/Nav.tsx

@@ -40,7 +40,7 @@ const Nav = () => {
               state: activeItem === item.id,
             })}
           >
-            <SvgComponent />
+            <SvgComponent  />
             {item.label}
           </button>
         );

src/common/component/Tab/Tab.tsx

@@ -2,13 +2,14 @@ import * as styles from "./Tab.css";
 
 interface TabPropTypes {
   children: string;
+  width?: string;
   active?: boolean;
   onClick?: () => void;
 }
 
-const Tab = ({ children, onClick, active = false }: TabPropTypes) => {
+const Tab = ({ children, width, onClick, active = false }: TabPropTypes) => {
   return (
-    <div className={styles.tab} onClick={onClick}>
+    <div style={{ width: width }} className={styles.tab} onClick={onClick}>
       <div className={styles.tabContent}>{children}</div>
       <div className={styles.tabBar({ active: active })} />
     </div>

src/page/main/index/Main.tsx

@@ -1,55 +1,18 @@
-import Divider from "@common/component/Divider/Divider";
-import Spacing from "@common/component/Spacing/Spacing";
-import { Button } from "@common/component/Button";
-import { IcTest } from "@asset/svg";
-import SimpleBottomSheet from "@common/component/SimpleBottomSheet/SimpleBottomSheet";
-import CommentList from "@common/component/Comment/CommentList";
-import mockComments from "@shared/constant/mockComment";
-
+import Nav from "@common/component/Nav/Nav";
+import FilterBottomSheet from "@shared/component/FilterBottomSheet/FilterBottomSheet";
+import { useFilterStore } from "@store/filter";
+import { useEffect } from "react";
 const Main = () => {
   // const { category, categoryData, setOpen, toggleOpen } = useFilterStore();
+  const { setOpen } = useFilterStore();
 
+  useEffect(() => {
+    setOpen(true);
+  }, [setOpen]);
   return (
     <>
-      <div style={{ margin: "3rem", display: "flex", gap: "1rem" }}>
-        <Button label="Button" size="small" variant="solidPrimary" disabled={true} />
-        <Button label="Button" size="small" variant="solidPrimary" disabled={false} />
-        <Button label="Button" size="medium" variant="solidPrimary" disabled={false} />
-        <Button label="Button" size="large" variant="solidPrimary" disabled={false} />
-      </div>
-      <div style={{ margin: "3rem", display: "flex", gap: "1rem" }}>
-        <Button label="Button" size="small" variant="solidNeutral" disabled={true} />
-        <Button label="Button" size="small" variant="solidNeutral" disabled={false} />
-        <Button label="Button" size="medium" variant="solidNeutral" disabled={false} />
-        <Button label="Button" size="large" variant="solidNeutral" disabled={false} />
-      </div>
-      <div style={{ margin: "3rem", display: "flex", gap: "1rem" }}>
-        <Button label="Button" size="small" variant="outlinePrimary" disabled={true} />
-        <Button label="Button" size="small" variant="outlinePrimary" disabled={false} />
-        <Button label="Button" size="medium" variant="outlinePrimary" disabled={false} />
-        <Button label="Button" size="large" variant="outlinePrimary" disabled={false} />
-      </div>
-
-      <div style={{ margin: "3rem", display: "flex", gap: "1rem" }}>
-        <Button label="Button" leftIcon={<IcTest />} size="medium" variant="solidPrimary" disabled={false} />
-        <Button label="Button" rightIcon={<IcTest />} size="medium" variant="solidPrimary" disabled={false} />
-        <Button
-          label="Button"
-          leftIcon={<IcTest />}
-          rightIcon={<IcTest />}
-          size="medium"
-          variant="solidPrimary"
-          disabled={false}
-        />
-      </div>
-
-      <span>main</span>
-      <SimpleBottomSheet />
-      <Spacing marginBottom="10" />
-      <Divider size="small" />
-      <Spacing marginBottom="10" />
-      <Divider />
-      <CommentList comments={mockComments} />
+      <Nav />
+      <FilterBottomSheet />
     </>
   );
 };

src/page/mypage/index/constant.ts

@@ -0,0 +1,58 @@
+//사용자 조회 api get 예시
+interface UserProfilePropTypes {
+  nickname: string;
+  profileImage: string;
+}
+
+export const USER_PROFILE: UserProfilePropTypes = {
+  nickname: "콩콩",
+  profileImage:
+    "https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2F3v1Ml%2FbtsLIeLDyWf%2FTXKkhRXKirJsqdHNoK9A5K%2Fimg.jpg",
+};
+
+//반려 동물 조회 api get 예시
+
+interface Disease {
+  id: number;
+  name: string;
+}
+
+interface Symptom {
+  id: number;
+  name: string;
+}
+
+interface PetProfilePropTypes {
+  petId: number;
+  petImage: string;
+  petName: string;
+  petAge: number;
+  petGender: "M" | "F";
+  breedId: number;
+  breed: string;
+  animalId: number;
+  animal: string;
+  diseases: Disease[];
+  symptoms: Symptom[];
+}
+
+export const PET_PROFILE: PetProfilePropTypes = {
+  petId: 1,
+  petImage: "url",
+  petName: "펫이름",
+  petAge: 16,
+  petGender: "F",
+  breedId: 1,
+  breed: "포메라니안",
+  animalId: 1,
+  animal: "강아지",
+  diseases: [
+    { id: 1, name: "질병1" },
+    { id: 2, name: "질병2" },
+    { id: 3, name: "질병3" },
+  ],
+  symptoms: [
+    { id: 1, name: "증상1" },
+    { id: 2, name: "증상2" },
+  ],
+};