feat(client): 마이페이지 퍼블리싱 및 input 컴포넌트 개선

apps/client/src/app/project/[id]/page.tsx

@@ -8,7 +8,7 @@ import { IoPeople } from 'react-icons/io5';
 
 const ProjectPage = () => {
   return (
-    <Container className="py-10 min-h-[100dvh] bg-gray-10">
+    <Container className="py-10 min-h-dvh bg-gray-10">
       <Wrapper>
         <div className="flex gap-6 h-[400px] border-b pb-5">
           <Image

apps/client/src/app/projects/page.tsx

@@ -13,7 +13,7 @@ const ProjectsPage = () => {
   console.log(projectStatus, projectOptions); // 백엔드로 요청보낼때 사용될 코드
 
   return (
-    <Container className="py-10 min-h-[100dvh] bg-gray-10">
+    <Container className="py-10 min-h-dvh bg-gray-10">
       <Wrapper>
         <div className="h-[40px] mb-5 flex items-center gap-[10px]">
           <ProjectSelectBox

apps/client/src/app/user/[id]/page.tsx

@@ -0,0 +1,17 @@
+import { Container, Wrapper } from '@/components/layouts';
+import { UserContactBox, UserProfile } from '@/components/user';
+import UserProjectContainer from '@/components/user/userProjectContainer/userProjectContainer';
+
+const User = () => {
+  return (
+    <Container className="min-h-dvh py-16">
+      <Wrapper className="flex flex-col gap-6">
+        <UserProfile />
+        <UserContactBox />
+        <UserProjectContainer />
+      </Wrapper>
+    </Container>
+  );
+};
+
+export default User;

apps/client/src/components/header/index.tsx

@@ -35,7 +35,9 @@ const Header = () => {
             height={22}
             alt="alarm"
           />
-          <div className="rounded-[50%] bg-gray-500 size-9 cursor-p" />
+          <Link href="/user/123">
+            <div className="rounded-[50%] bg-gray-500 size-9 cursor-p" />
+          </Link>
         </div>
       </Wrapper>
     </Container>

apps/client/src/components/landing/interviewJJoing.tsx

@@ -10,7 +10,7 @@ type InterviewJJoingProps = {
 
 const InterviewJJoing = ({ mouseRef }: InterviewJJoingProps) => {
   return (
-    <Container className="h-[100dvh] bg-white">
+    <Container className="h-dvh bg-white">
       <Wrapper
         className="h-full flex flex-col items-center justify-center gap-8"
         ref={mouseRef}

apps/client/src/components/user/index.ts

@@ -0,0 +1,3 @@
+export { default as UserContactBox } from './userContactBox';
+export { default as UserProfile } from './userProfile';
+export { default as userProjectContainer } from './userProjectContainer/userProjectContainer';

apps/client/src/components/user/userContactBox.tsx

@@ -0,0 +1,22 @@
+import { FaGithub } from 'react-icons/fa';
+import { MdOutlineMail } from 'react-icons/md';
+
+const UserContactBox = () => {
+  return (
+    <section className="flex flex-col gap-2">
+      <hr className="h-px bg-gray-20" />
+      <div className="flex gap-2.5 items-center">
+        <MdOutlineMail
+          color="#ADB5BD"
+          className="w-7 h-7 cursor-pointer duration-200 hover:brightness-[60%]"
+        />
+        <FaGithub
+          color="#ADB5BD"
+          className="w-6 h-6 cursor-pointer duration-200 hover:brightness-[60%]"
+        />
+      </div>
+    </section>
+  );
+};
+
+export default UserContactBox;

apps/client/src/components/user/userProfile.tsx

@@ -0,0 +1,25 @@
+import { Button, Text } from '@jjoing/ui';
+
+const UserProfile = () => {
+  return (
+    <section className="w-full flex justify-between">
+      <div className="flex gap-6">
+        {/* 차후 벡엔드 연동 시 이미지 추가 필요 */}
+        <div className="bg-gray-500 rounded-full w-36 h-36 flex-shrink-0"></div>
+        <div className="flex flex-col gap-2">
+          <Text type="body1">lheesung</Text>
+          <Text type="body3">부산소프트웨어마이스터고등학교 / Frontend</Text>
+          <Text type="body3">팔로워 0 팔로잉 0</Text>
+          <Text type="body3" className="text-gray-30 whitespace-pre-wrap">
+            카더가든 사모중 저랑 사귀실분 \n fwef wfwef wef wf we
+          </Text>
+        </div>
+      </div>
+      <Button height="h45" width={152}>
+        팔로우
+      </Button>
+    </section>
+  );
+};
+
+export default UserProfile;

apps/client/src/components/user/userProjectContainer/userProjectContainer.hooks.ts

@@ -0,0 +1,11 @@
+import { useState } from 'react';
+
+export const useSearchProcessingProject = () => {
+  const [searchProcessingProject, setSearchProcessingProject] = useState(true);
+
+  const handleSeachOptions = () => {
+    setSearchProcessingProject((prev) => !prev);
+  };
+
+  return { searchProcessingProject, handleSeachOptions };
+};

apps/client/src/components/user/userProjectContainer/userProjectContainer.tsx

@@ -0,0 +1,55 @@
+'use client';
+
+import { cn, Input, ProjectCard } from '@jjoing/ui';
+import { IoSearch } from 'react-icons/io5';
+import { useSearchProcessingProject } from './userProjectContainer.hooks';
+
+const UserProjectContainer = () => {
+  const { searchProcessingProject, handleSeachOptions } = useSearchProcessingProject();
+
+  return (
+    <section className="w-full flex flex-col gap-6">
+      <div className="w-full flex justify-between items-end">
+        <div className="flex w-[30%] h-fit relative shadow-[inset_0_-1px_0_#ADB5BD]">
+          <div
+            onClick={handleSeachOptions}
+            className={cn(
+              'w-1/2 p-2 text-center text-gray-20 cursor-pointer duration-200 hover:shadow-[inset_0_-2px_0_#ADB5BD]',
+              searchProcessingProject &&
+                'shadow-[inset_0_-2px_0_#2F9266] hover:shadow-[inset_0_-2px_0_#2F9266] text-primary'
+            )}
+          >
+            참여중인 프로젝트
+          </div>
+          <div
+            onClick={handleSeachOptions}
+            className={cn(
+              'w-1/2 p-2 text-center text-gray-20 cursor-pointer duration-200 hover:shadow-[inset_0_-2px_0_#ADB5BD]',
+              !searchProcessingProject &&
+                'shadow-[inset_0_-2px_0_#2F9266] hover:shadow-[inset_0_-2px_0_#2F9266] text-primary'
+            )}
+          >
+            참여했던 프로젝트
+          </div>
+        </div>
+        <Input color="black" placeholder="검색어를 입력해주세요." className="rounded-md">
+          <IoSearch color="#ADB5BD" />
+        </Input>
+      </div>
+      <div className="w-full grid grid-cols-3 justify-items-center gap-7">
+        {Array.from({ length: 20 }).map((_: any, i: any) => (
+          <ProjectCard
+            title="wefewf"
+            subTitle="efwefe"
+            projectDeadline="20202020"
+            maxProjectMembers={5}
+            currentProjectMembers={3}
+            key={`project-${i}`}
+          />
+        ))}
+      </div>
+    </section>
+  );
+};
+
+export default UserProjectContainer;

packages/ui/src/Input/index.tsx

@@ -1,5 +1,5 @@
 import { cva, VariantProps } from 'class-variance-authority';
-import { forwardRef, InputHTMLAttributes } from 'react';
+import { cloneElement, forwardRef, InputHTMLAttributes, ReactElement } from 'react';
 import { cn } from '../utils';
 
 const InputVariants = cva('', {
@@ -20,6 +20,7 @@ const InputVariants = cva('', {
 type InputProps = VariantProps<typeof InputVariants> &
   InputHTMLAttributes<HTMLInputElement> & {
     width?: number | '100%';
+    children?: ReactElement;
   };
 
 const Input = forwardRef<HTMLInputElement, InputProps>(
@@ -30,6 +31,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
       placeholder = '검색어를 입력해주세요.',
       onChange,
       className,
+      children,
       ...props
     },
     ref
@@ -38,16 +40,23 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
       <div
         className={cn(
           InputVariants({ color }),
-          'border-[1.5px] flex py-2 px-3 rounded-[0.6rem] h-11 border-gray-300 focus-within:border-gray-400 transition duration-80 ease-in-out',
+          'border-[1.5px] flex py-2 px-3 rounded-[0.6rem] border-gray-300 focus-within:border-gray-400 h-11 transition duration-80 ease-in-out relative',
           className
         )}
         style={{ width }}
       >
+        {children &&
+          cloneElement(children, {
+            className: 'absolute top-[50%] translate-y-[-50%] left-[5%]',
+          })}
         <input
           ref={ref}
           placeholder={placeholder}
           onChange={onChange}
-          className="outline-0 placeholder:text-gray-300 text-sm w-full"
+          className={cn(
+            'outline-0 placeholder:text-gray-300 text-sm w-full',
+            children && 'pl-[10%]'
+          )}
           {...props}
         />
       </div>

packages/ui/src/themes/colors.ts

@@ -8,5 +8,7 @@ export const colors = {
 
   gray: {
     10: '#F8F9FA',
+    20: '#ADB5BD',
+    30: '#6B7280',
   },
 };