[feat] #4 마이페이지 기능 및 디자인

kdt-8-4 · Jan 22, 2024 · 1b629e7 · 1b629e7
2 parents feb3c34 + d83cb5c
commit 1b629e7
Show file tree

Hide file tree

Showing 13 changed files with 186 additions and 28 deletions.
diff --git a/weatherfit_refactoring/src/Components/Atoms/Button/ButtonStore.tsx b/weatherfit_refactoring/src/Components/Atoms/Button/ButtonStore.tsx
@@ -60,7 +60,7 @@ export default function ButtonStore({
       case ButtonStyle.CATEGORY_BTN_Y:
         return (
           <button
-            className={`${style} bg-yellow-200 border border-black rounded-2xl px-1.5 py-0.5`}
+            className={`${style} bg-yellow-200 border border-black rounded-2xl pb-[5px]`}
             onClick={onClickFunction}>
             {children}
           </button>

diff --git a/weatherfit_refactoring/src/Components/Atoms/Icon/IconStore.tsx b/weatherfit_refactoring/src/Components/Atoms/Icon/IconStore.tsx
@@ -187,6 +187,7 @@ export default function IconStore({
             width={size}
             height={size}
             className={`${style}`}
+            onClick={onClickFunction}
           />
         )
       case IconStyle.ETC:

diff --git a/weatherfit_refactoring/src/Components/Atoms/Input/InputStore.tsx b/weatherfit_refactoring/src/Components/Atoms/Input/InputStore.tsx
@@ -8,6 +8,7 @@ export enum InputStyle {
 
 interface Props {
   inputStyle: InputStyle
+  inputType?: string
   placeholderContents?: string
   value?: string
   style?: string
@@ -16,6 +17,7 @@ interface Props {
 
 export default function InputStore({
   inputStyle,
+  inputType,
   placeholderContents,
   style,
   onChageFunction,
@@ -25,7 +27,7 @@ export default function InputStore({
       case InputStyle.INPUT_WHITE:
         return (
           <input
-            type="text"
+            type={inputType}
             className={`border rounded-lg bg-white border-gray-500 p-1 ${style}`}
             placeholder={placeholderContents}
           />

diff --git a/weatherfit_refactoring/src/Components/Molecules/Header.tsx b/weatherfit_refactoring/src/Components/Molecules/Header.tsx
@@ -13,6 +13,7 @@ interface Props {
   iconStyleCase2?: IconStyle
   buttonStyleCase?: ButtonStyle
   onClickFunction?: MouseEventHandler<HTMLButtonElement> | undefined
+  onClickFunction2?: () => void
 }
 
 export default function Header({
@@ -23,9 +24,10 @@ export default function Header({
   iconStyleCase2,
   buttonStyleCase,
   onClickFunction,
+  onClickFunction2,
 }: Props) {
   return (
-    <div className="flex items-center justify-between h-[50px]">
+    <div className="flex items-center justify-between h-[50px] my-[10px]">
       <IconStore
         iconStyle={iconStyleCase}
         size={20}
@@ -38,7 +40,12 @@ export default function Header({
         style="px-2 h-[30px] font-neurimboGothic text-[22px] pb-[5px] shadow-[7px_7px_1px] flex items-center"
       />
       {isIcon && iconStyleCase2 != null ? (
-        <IconStore iconStyle={iconStyleCase2} size={17} style={'mr-[10px]'} />
+        <IconStore
+          iconStyle={iconStyleCase2}
+          size={17}
+          style={'mr-[10px] cursor-pointer'}
+          onClickFunction={onClickFunction2}
+        />
       ) : buttonStyleCase != null ? (
         <ButtonStore
           buttonStyle={buttonStyleCase}

diff --git a/weatherfit_refactoring/src/Components/Molecules/ProfileModalInfo.tsx b/weatherfit_refactoring/src/Components/Molecules/ProfileModalInfo.tsx
@@ -0,0 +1,13 @@
+interface Props {
+  title: string
+  value: string
+}
+
+export default function ProfileModalInfo({ title, value }: Props) {
+  return (
+    <div className="flex font-gmarketsans text-[11px] ">
+      <p>{title}:</p>
+      <p className="text-[gray]">&nbsp;{value}</p>
+    </div>
+  )
+}
diff --git a/weatherfit_refactoring/src/Components/Organisms/ProfileBoard.tsx b/weatherfit_refactoring/src/Components/Organisms/ProfileBoard.tsx
@@ -0,0 +1,13 @@
+import React, { useState } from 'react'
+import ProfilePostBar from '../Molecules/ProfilePostBar'
+
+export default function ProfileBoard() {
+  // 여기서 게시물 수 불러오기
+
+  return (
+    <>
+      <ProfilePostBar />
+      <ProfileBoard />
+    </>
+  )
+}
diff --git a/weatherfit_refactoring/src/Components/Organisms/ProfileEditModal.tsx b/weatherfit_refactoring/src/Components/Organisms/ProfileEditModal.tsx
@@ -0,0 +1,77 @@
+'use client'
+
+import IconStore, { IconStyle } from '../Atoms/Icon/IconStore'
+import BoxStore, { BoxStyle } from '../Atoms/Box/BoxStore'
+import InputStore, { InputStyle } from '../Atoms/Input/InputStore'
+import ButtonStore, { ButtonStyle } from '@/Components/Atoms/Button/ButtonStore'
+import ProfileModalInfo from '../Molecules/ProfileModalInfo'
+
+interface Props {
+  onClickFunction?: () => void
+}
+
+export default function ProfileEditModal({ onClickFunction }: Props) {
+  return (
+    <div className="fixed top-0 left-0 w-[100%] h-[100%] bg-[#00000066] z-[100] flex justify-center items-center">
+      <div className="bg-[#ffffff] w-[70vw] h-[85vh] rounded-md z-[200]">
+        {/* 헤더 부분 */}
+        <div className="flex justify-center items-center relative my-[10px]">
+          <IconStore
+            iconStyle={IconStyle.PREV2}
+            size={20}
+            style="ml-[10px] cursor-pointer absolute left-0"
+            onClickFunction={onClickFunction}
+          />
+          <BoxStore
+            boxStyle={BoxStyle.BOX_BLUE}
+            style="px-2 h-[21px] font-neurimboGothic text-[17px] pb-[5px] shadow-[7px_7px_1px] flex items-center">
+            프로필 편집
+          </BoxStore>
+        </div>
+        <div className="p-[20px]">
+          <hr className="my-[10px]" />
+          {/* 이메일, 이름, 닉네임 부분 */}
+          <div className="fix_info">
+            <ProfileModalInfo title="이메일" value="user@test.com" />
+            <ProfileModalInfo title="이름" value="가나다" />
+            <ProfileModalInfo title="닉네임" value="깜찍이" />
+          </div>
+          <hr className="my-[10px]" />
+          {/* 비밀번호 부분 */}
+          <form className="flex flex-col items-center ">
+            <div className="pw_box">
+              <p className="font-gmarketsans text-[11px] mb-[5px]">
+                비밀번호 (8~20자 영문, 숫자, 특수기호 조합)
+              </p>
+              <div className="mb-[5px]">
+                <InputStore
+                  inputStyle={InputStyle.INPUT_WHITE}
+                  inputType="password"
+                  placeholderContents="현재 비밀번호"
+                  style="w-[40vw] h-[4vh] text-[12px] mb-[5px]"
+                />
+                <InputStore
+                  inputStyle={InputStyle.INPUT_WHITE}
+                  inputType="password"
+                  placeholderContents="변경 비밀번호"
+                  style="w-[40vw] h-[4vh] text-[12px] mb-[5px]"
+                />
+                <InputStore
+                  inputStyle={InputStyle.INPUT_WHITE}
+                  inputType="password"
+                  placeholderContents="변경 비밀번호 재확인"
+                  style="w-[40vw] h-[4vh] text-[12px] mb-[5px]"
+                />
+              </div>
+            </div>
+            <ButtonStore
+              buttonStyle={ButtonStyle.CATEGORY_BTN_Y}
+              style="font-neurimboGothic w-[20vw]">
+              수정
+            </ButtonStore>
+          </form>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/weatherfit_refactoring/src/Components/Organisms/ProfileHeader.tsx b/weatherfit_refactoring/src/Components/Organisms/ProfileHeader.tsx
@@ -1,18 +1,32 @@
 'use client'
 
+import React, { useState, MouseEventHandler } from 'react'
 import { ButtonStyle } from '../Atoms/Button/ButtonStore'
 import { IconStyle } from '../Atoms/Icon/IconStore'
 import Header from '../Molecules/Header'
+import ProfileEditModal from './ProfileEditModal'
 
 export default function ProfileHeader() {
+  const [isModalOpen, setIsModalOpen] = useState(false)
+
+  const handleModalOpen = () => {
+    setIsModalOpen(true)
+  }
+
+  const handleModalClose = () => {
+    setIsModalOpen(false)
+  }
+
   return (
     <>
       <Header
         isIcon={true}
         title="프로필"
         iconStyleCase={IconStyle.PREV2}
         iconStyleCase2={IconStyle.SETTING}
+        onClickFunction2={handleModalOpen}
       />
+      {isModalOpen && <ProfileEditModal onClickFunction={handleModalClose} />}
     </>
   )
 }
diff --git a/weatherfit_refactoring/src/Components/molecules/ProfileInfo.tsx b/weatherfit_refactoring/src/Components/molecules/ProfileInfo.tsx
@@ -1,6 +1,6 @@
 export default function ProfileInfo() {
   return (
-    <div className="flex items-center justify-evenly">
+    <div className="flex items-center justify-evenly my-[10px]">
       <div className="flex items-center flex-col font-Cafe24SsurroundAir">
         <div className="bg-[black] h-[80px] rounded-[50%] w-[80px]"></div>
         <p className="font-bold">깜찍이</p>

diff --git a/weatherfit_refactoring/src/Components/molecules/ProfilePost.tsx b/weatherfit_refactoring/src/Components/molecules/ProfilePost.tsx
@@ -1,11 +1,14 @@
 export default function ProfilePost() {
-    return(
-        <>
-        <div className="flex">
-            <div className="bg-[salmon] h-[180px] rounded-[2%] w-[115px]"></div>
-            <div className="bg-[salmon] h-[180px] rounded-[2%] w-[115px]"></div>
-            <div className="bg-[salmon] h-[180px] rounded-[2%] w-[115px]"></div>
-        </div>
-        </>
-    )
-}
+  return (
+    <div className="grid grid-rows-[25vh_25vh_25vh] grid-cols-[1fr_1fr_1fr] gap-[1%] p-[10px]">
+      {/* <div className="bg-[salmon] h-[180px] rounded-[2%] w-[115px]"></div> */}
+      <div className="bg-[salmon] rounded-lg"></div>
+      <div className="bg-[salmon] rounded-lg"></div>
+      <div className="bg-[salmon] rounded-lg"></div>
+      <div className="bg-[salmon] rounded-lg"></div>
+      <div className="bg-[salmon] rounded-lg"></div>
+      <div className="bg-[salmon] rounded-lg"></div>
+      <div className="bg-[salmon] rounded-lg"></div>
+    </div>
+  )
+}
diff --git a/weatherfit_refactoring/src/Components/molecules/ProfilePostBar.tsx b/weatherfit_refactoring/src/Components/molecules/ProfilePostBar.tsx
@@ -1,12 +1,42 @@
-import ButtonStore, { ButtonStyle } from "../Atoms/Button/ButtonStore";
+'use client'
+import { useState } from 'react'
+import ButtonStore, { ButtonStyle } from '../Atoms/Button/ButtonStore'
 
 export default function ProfilePostBar() {
-    return (
-        <>
-        <div className="flex justify-evenly">
-            <ButtonStore buttonStyle={ButtonStyle.DEFAULT_BTN_FILL} style="font-neurimboGothic w-[100px]">피드</ButtonStore>
-            <ButtonStore buttonStyle={ButtonStyle.DEFAULT_BTN} style="font-neurimboGothic w-[100px]">좋아요</ButtonStore>
-        </div>
-        </>
-    )
-}
+  const [isFeedSelected, setIsFeedSelected] = useState<boolean>(true)
+
+  const handleFeedClike = () => {
+    setIsFeedSelected(true)
+  }
+
+  const handleLikeClick = () => {
+    setIsFeedSelected(false)
+  }
+
+  return (
+    <>
+      <div className="flex justify-evenly my-[10px]">
+        <ButtonStore
+          buttonStyle={
+            isFeedSelected
+              ? ButtonStyle.DEFAULT_BTN_FILL
+              : ButtonStyle.DEFAULT_BTN
+          }
+          style="font-neurimboGothic w-[100px]"
+          onClickFunction={handleFeedClike}>
+          피드
+        </ButtonStore>
+        <ButtonStore
+          buttonStyle={
+            !isFeedSelected
+              ? ButtonStyle.DEFAULT_BTN_FILL
+              : ButtonStyle.DEFAULT_BTN
+          }
+          style="font-neurimboGothic w-[100px]"
+          onClickFunction={handleLikeClick}>
+          좋아요
+        </ButtonStore>
+      </div>
+    </>
+  )
+}
diff --git a/weatherfit_refactoring/src/app/mypage/page.tsx b/weatherfit_refactoring/src/app/mypage/page.tsx
@@ -9,11 +9,8 @@ export default function Mypage() {
   return (
     <>
       <ProfileHeader />
-      <br />
       <ProfileInfo />
-      <br />
       <ProfilePostBar />
-      <br />
       <ProfilePost />
     </>
   )

diff --git a/weatherfit_refactoring/src/app/page.tsx b/weatherfit_refactoring/src/app/page.tsx
@@ -9,6 +9,7 @@ export default function Home() {
       <IconStore iconStyle={IconStyle.UNLIKE} size={16} />
       <InputStore
         inputStyle={InputStyle.INPUT_WHITE}
+        inputType="text"
         placeholderContents="아이디 입력"
         style="w-[130px]"
       />