Merge branch 'main' into feat/#71

src/app/editprofile/layout.tsx

@@ -0,0 +1,13 @@
+import Header from '@/components/shared/Header'
+
+type LayoutProps = {
+  children: React.ReactNode
+}
+export default function EditProfileLayout({ children }: LayoutProps) {
+  return (
+    <div className="pb-4 h-full">
+      <Header title={'프로필 수정'} />
+      <div className="h-[calc(100%-80px)]">{children}</div>
+    </div>
+  )
+}

src/app/editprofile/page.tsx

@@ -0,0 +1,37 @@
+'use client'
+import Button from '@/components/common/Button'
+import {
+  Company,
+  Email,
+  Experience,
+  JobGroup,
+  NickName,
+  ProfileImg,
+} from '@/components/domain/editprofile'
+
+function EditPofile() {
+  return (
+    <div className="px-4 flex flex-col justify-between gap-[5.375rem]">
+      <div className="flex flex-col gap-10">
+        <ProfileImg />
+        <Email />
+        <NickName />
+        <JobGroup />
+        <Company />
+        <Experience />
+      </div>
+
+      <div className="flex flex-col gap-4">
+        <div className="flex justify-between text-sub3">
+          <p className="text-onSurface-100">회원정보를 삭제하시겠어요?</p>
+          <p className="text-onSurface-200">회원탈퇴</p>
+        </div>
+        <Button isFullWidth type="gradient">
+          수정 완료
+        </Button>
+      </div>
+    </div>
+  )
+}
+
+export default EditPofile

src/app/profile/page.tsx

@@ -2,7 +2,7 @@
 
 import { JobGroup } from '@/components/domain/profile'
 import { CompanyAndExperience } from '@/components/domain/profile'
-import useProfile from '@/hooks/profile/useProfile'
+import { useProfile } from '@/hooks/profile/useProfile'
 
 function Profile() {
   const {

src/components/domain/editprofile/ProfileImgBottomSheet/index.tsx

@@ -0,0 +1,65 @@
+import BottomSheet from '@/components/common/BottomSheet'
+import Button from '@/components/common/Button'
+import Image from 'next/image'
+import React from 'react'
+
+interface ProfileImgBottomSheetProps {
+  nickname: string
+  selectedImage: string
+  handleImageSelect: (src: string) => void
+  handleSave: () => void
+}
+export default function ProfileImgBottomSheet({
+  nickname,
+  selectedImage,
+  handleImageSelect,
+  handleSave,
+}: ProfileImgBottomSheetProps) {
+  const img = {
+    1: '/images/profile_01.svg',
+    2: '/images/profile_02.svg',
+    3: '/images/profile_03.svg',
+    4: '/images/profile_04.svg',
+    5: '/images/profile_05.svg',
+    6: '/images/profile_06.svg',
+    7: '/images/profile_07.svg',
+    8: '/images/profile_08.svg',
+    9: '/images/profile_09.svg',
+    10: '/images/profile_10.svg',
+  }
+
+  return (
+    <BottomSheet>
+      <p className="text-h2 mb-5">
+        {`${nickname}님,` + `\n` + '프로필 이미지를 꾸며보세요'}
+      </p>
+      <div className="flex flex-col gap-6">
+        <div className="flex justify-center">
+          <Image
+            src={selectedImage}
+            alt="profile.svg"
+            width={100}
+            height={100}
+          />
+        </div>
+        <div className="w-full flex flex-wrap justify-center gap-3">
+          {Object.values(img).map((src, index) => (
+            <div key={index} className="flex">
+              <Image
+                src={src}
+                alt={`profile_${index + 1}.svg`}
+                width={60}
+                height={60}
+                className="cursor-pointer"
+                onClick={() => handleImageSelect(src)}
+              />
+            </div>
+          ))}
+        </div>
+        <Button isFullWidth type="gradient" onClick={handleSave}>
+          저장
+        </Button>
+      </div>
+    </BottomSheet>
+  )
+}

src/components/domain/editprofile/company/Company.tsx

@@ -0,0 +1,26 @@
+import Image from 'next/image'
+import { accountData } from '@/constants/account'
+
+function Company() {
+  // API에서 받아오기(전역 상태 관리 필요)
+  // const [selectedCompanyValue, setSelectedCompanyValue] = useState(0)
+  return (
+    <div className="flex flex-col gap-3">
+      <p className="text-sub2 text-onSurface-200">기업</p>
+      <div className="p-4 flex justify-between bg-gray-700 rounded-lg">
+        <p className="text-onSurface-300 text-sub1">
+          {accountData.careerInfo.company}
+        </p>
+        <Image
+          src={'/icons/arrow_down.svg'}
+          alt="arrow_down.svg"
+          width={24}
+          height={24}
+          onClick={() => console.log('회사 수정')}
+        />
+      </div>
+    </div>
+  )
+}
+
+export default Company

src/components/domain/editprofile/company/index.ts

@@ -0,0 +1 @@
+export { default as Company } from './Company'

src/components/domain/editprofile/email/Email.tsx

@@ -0,0 +1,16 @@
+import { accountData } from '@/constants/account'
+
+function Email() {
+  return (
+    <div className="flex flex-col gap-3">
+      <p className="text-sub2 text-onSurface-100">이메일</p>
+      <input
+        readOnly
+        className="p-4 w-full bg-gray-800 text-sub1 text-onSurface-100 outline-none"
+        defaultValue={accountData.email}
+      />
+    </div>
+  )
+}
+
+export default Email

src/components/domain/editprofile/email/index.ts

@@ -0,0 +1 @@
+export { default as Email } from './Email'

src/components/domain/editprofile/experience/Experience.tsx

@@ -0,0 +1,26 @@
+import { accountData } from '@/constants/account'
+import Image from 'next/image'
+
+function Experience() {
+//   const [selectedExperienceValue, setSelectedExperienceValue] = useState(0)
+
+  return (
+    <div className="flex flex-col gap-3">
+      <p className="text-sub2 text-onSurface-200">경력</p>
+      <div className="p-4 flex justify-between bg-gray-700 rounded-lg">
+        <p className="text-onSurface-300 text-sub1">
+          {accountData.careerInfo.experience}
+        </p>
+        <Image
+          src={'/icons/arrow_down.svg'}
+          alt="arrow_down.svg"
+          width={24}
+          height={24}
+          onClick={() => console.log('경력 수정')}
+        />
+      </div>
+    </div>
+  )
+}
+
+export default Experience

src/components/domain/editprofile/experience/index.ts

@@ -0,0 +1 @@
+export { default as Experience } from './Experience'

src/components/domain/editprofile/index.ts

@@ -0,0 +1,6 @@
+export * from './email'
+export * from './nickname'
+export * from './jobgroup'
+export * from './company'
+export * from './experience'
+export * from './profileimg'

src/components/domain/editprofile/jobgroup/JobGroup.tsx

@@ -0,0 +1,33 @@
+import { accountData } from '@/constants/account'
+import { useState } from 'react'
+
+function JobGroup() {
+  // 초기값 API에서 받아오기
+  const [selected, setSelected] = useState(accountData.careerInfo.jobGroup)
+
+  const options = ['개발자', '디자이너', '기타']
+
+  const handleClick = (option: string) => {
+    setSelected(option)
+  }
+
+  return (
+    <div className="flex flex-col gap-3">
+      <p className="text-sub2 text-onSurface-200">직군</p>
+      <div className="w-full flex justify-between gap-3 text-center text-onSurface-300 text-sub1">
+        {options.map((option, idx) => (
+          <div
+            className={`w-full p-4 bg-gray-700 rounded-lg cursor-pointer ${selected === option ? 'bg-primary-0 border-solid border-[1px] border-primary-400' : 'bg-gray-700'}`}
+            key={idx}
+            // 우선은 수정 불가능 하도록
+            // onClick={() => handleClick(option)}
+          >
+            {option}
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+export default JobGroup

src/components/domain/editprofile/jobgroup/index.ts

@@ -0,0 +1 @@
+export { default as JobGroup } from './JobGroup'

src/components/domain/editprofile/nickname/NickName.tsx

@@ -0,0 +1,30 @@
+import React, { useState } from 'react'
+import { accountData } from '@/constants/account'
+
+function NickName() {
+  const [nickname, setNickname] = useState(accountData.nickname || '')
+
+  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setNickname(event.target.value)
+  }
+
+  return (
+    <div className="flex flex-col">
+      <div className="flex flex-col gap-3">
+        <p className="text-sub2 text-onSurface-200">닉네임</p>
+        <input
+          className="p-4 w-full rounded-lg bg-gray-800 text-sub1 text-onSurface-300 outline-none"
+          value={nickname}
+          onChange={handleInputChange}
+          placeholder="닉네임을 입력하세요"
+          maxLength={10}
+        />
+      </div>
+      <p className="text-right text-sub2 text-onSurface-100">
+        {nickname.length}/10
+      </p>
+    </div>
+  )
+}
+
+export default NickName

src/components/domain/editprofile/nickname/index.ts

@@ -0,0 +1 @@
+export { default as NickName } from './NickName'

src/components/domain/editprofile/profileimg/ProfileImg.tsx

@@ -0,0 +1,44 @@
+import { useState } from 'react'
+import { accountData } from '@/constants/account'
+import Image from 'next/image'
+import ProfileImgBottomSheet from '../ProfileImgBottomSheet'
+
+function ProfileImg() {
+  const [isProfileImgOpen, setIsProfileImgOpen] = useState(false)
+  const [selectedImage, setSelectedImage] = useState(accountData.profileImage)
+
+  const handleImageSelect = (src: string) => {
+    setSelectedImage(src)
+  }
+
+  const handleSave = () => {
+    setIsProfileImgOpen(false)
+  }
+
+  return (
+    <>
+      <div className="relative m-auto">
+        <Image src={selectedImage} width={100} height={100} alt="profile.svg" />
+        <div className="absolute bottom-0 right-0 p-2 w-[30px] h-[30px] bg-gray-800 rounded-full">
+          <Image
+            src={'icons/pen.svg'}
+            alt="pen.svg"
+            width={14}
+            height={14}
+            onClick={() => setIsProfileImgOpen((prev) => !prev)}
+          />
+        </div>
+      </div>
+      {isProfileImgOpen && (
+        <ProfileImgBottomSheet
+          nickname={accountData.nickname}
+          selectedImage={selectedImage}
+          handleImageSelect={handleImageSelect}
+          handleSave={handleSave}
+        />
+      )}
+    </>
+  )
+}
+
+export default ProfileImg

src/components/domain/editprofile/profileimg/index.ts

@@ -0,0 +1 @@
+export { default as ProfileImg } from './ProfileImg'

src/components/domain/mypage/information/Information.tsx

@@ -1,9 +1,13 @@
+'use client'
+
 import Image from 'next/image'
-import Button from '@/components/common/Button'
+import { useRouter } from 'next/navigation'
 import { accountData } from '@/constants/account'
 import { QuizStatus } from '../QuizStatus'
+import Button from '@/components/common/Button'
 
 function Information() {
+  const router = useRouter()
   return (
     <div className="flex flex-col gap-5 bg-gray-800 px-4 py-6 rounded-2xl">
       <div className="flex gap-2">
@@ -13,7 +17,7 @@ function Information() {
           width={40}
           height={40}
         />
-        <div className='flex flex-col gap-1'>
+        <div className="flex flex-col gap-1">
           <p className="text-body2 text-onSurface-300">
             {accountData.nickname}
           </p>
@@ -34,7 +38,11 @@ function Information() {
           </p>
         </div>
       </div>
-      <Button isFullWidth type={'light'}>
+      <Button
+        isFullWidth
+        type={'light'}
+        onClick={() => router.push('/editprofile')}
+      >
         프로필 편집하기
       </Button>
       <div className="flex justify-between">