2024-05-05

bsideproject · May 5, 2024 · b573714 · b573714
1 parent 6fe8efc
commit b573714
Show file tree

Hide file tree

Showing 13 changed files with 165 additions and 51 deletions.
diff --git a/src/assets/images/icon/Search.svg b/src/assets/images/icon/Search.svg
diff --git a/src/assets/images/icon/exchange.svg b/src/assets/images/icon/exchange.svg
diff --git a/src/components/common/RadioWrap.tsx b/src/components/common/RadioWrap.tsx
@@ -1,63 +1,58 @@
-import React, { Fragment, useEffect } from "react";
+import React, { Fragment, MouseEventHandler, useEffect, useState } from "react";
 import NullChecker from "../../utils/NullChecker";
-import InputTextBox from "./InputTextBox";
 
 interface Option {
     name: string,
     id: string,
     htmlFor: string,
     content: string,
     value: string,
-    friendRelation?: any
 }
 
 interface PropsType {
-    inputTitle: string,
+    inputTitle?: string,
     options: Option[],
     onSelect?: any,
-    handleRegister: any,
-    friendRelation?: any,
-    friendDirectInput?: string
+    default?: string,
 }
 
 const RadioWrap = (props: PropsType) => {
 
+    const [selected, setSelected] = useState<string>();
+
+    useEffect(() => {
+        setSelected(props.default);
+    }, []);
+
+    const onSelect = (id : string) => {
+        setSelected(id);
+        props.onSelect(id);
+    }
+
     return (
-        <div className="RelationWrap">
+        <div className="radio-title-wrap">
             {
                 !NullChecker.isEmpty(props.inputTitle) &&
                 <label className="input-title">{props.inputTitle}</label>
             }
 
-            <div className="relation-wrap">
+            <div className="radio-wrap">
                 {
                     props.options.map((option, key) => (
                         <Fragment key={key}>
                             <input
                                 type="radio"
                                 name={option.name}
                                 id={option.id}
-                                onClick={props.onSelect}
-                                onChange={props.handleRegister}
+                                onChange={() => onSelect(option.id)}
                                 value={option.value}
-                                checked={option.value === props.friendRelation}
+                                checked={option.id === selected}
                             />
                             <label htmlFor={option.htmlFor}>{option.content}</label>
                         </Fragment>
                     ))
                 }
             </div>
-            {
-                props.friendRelation === "directInput" ?
-                    <InputTextBox
-                        inputTitle=""
-                        placeholder="입력하세요 (최대 8자)"
-                        id="friendDirectInput"
-                        value={props.friendDirectInput}
-                        onChange={props.handleRegister}
-                        maxLength={8}
-                    /> : null
-            }
         </div>
     )
 }

diff --git a/src/components/detail/ExchangeWrap.tsx b/src/components/detail/ExchangeWrap.tsx
@@ -4,26 +4,35 @@ import RootStore from "../../store/RootStore";
 import { useNavigate } from "react-router-dom";
 import { MindGetResponseProto, MindResponseProto } from "../../prototypes/mind/MindResponseProto";
 import NullChecker from '../../utils/NullChecker';
+import RadioWrap from "../common/RadioWrap";
 
 interface params {
     detailInfo?: any,
     sequence?: any
 }
 
+enum FilterType {
+    ALL = "ALL",
+    GIVEN = "GIVEN",
+    TAKEN = "TAKEN",
+}
+
 const ExchangeWrap = ({ detailInfo, sequence }: params) => {
 
     const [sort, setSort] = useState("ASC");
     const [exchangeData, setExchangeData] = useState<MindGetResponseProto>();
 
+    const [filterType, setFilterType] = useState<FilterType>(FilterType.ALL);
+
     const navigate = useNavigate();
 
     useEffect(() => {
         handleApiCall("DESC");
     }, []);
 
     useEffect(() => {
-        console.log("exchangeData : " + JSON.stringify(exchangeData));
-    }, [exchangeData])
+        console.log("filterType.toString() : " + filterType.toString());
+    }, [filterType]);
 
     const handleFilter = async () => {
 
@@ -49,9 +58,36 @@ const ExchangeWrap = ({ detailInfo, sequence }: params) => {
                     <span>{sort === "DESC" ? "과거순" : "최신순"}</span>
                 </div>
             </div>
+            <RadioWrap 
+                options={[
+                    {
+                        name: 'filter',
+                        id : 'ALL',
+                        htmlFor : 'ALL',
+                        content : '전체',
+                        value : '전체',
+                    }, {
+                        name: 'filter',
+                        id : 'GIVEN',
+                        htmlFor : 'GIVEN',
+                        content : '준 마음',
+                        value : '준 마음',
+                    }, {
+                        name: 'filter',
+                        id : 'TAKEN',
+                        htmlFor : 'TAKEN',
+                        content : '받은 마음',
+                        value : '받은 마음',
+                    }
+                ]}
+                onSelect={setFilterType}
+                default="ALL"
+            />
             {exchangeData ?
                 <ul className="exchange-wrap">
                     {exchangeData.minds && exchangeData.minds.map((item: MindResponseProto, key: any) => (
+                        (filterType === FilterType.ALL 
+                        || item?.type?.toString() === filterType.toString()) ?
                         <li className="exchange-cont" key={key} onClick={() => navigate(`/page/relationship/${sequence}/${detailInfo?.nickname}/${item?.sequence}`)}>
                             <i className={item?.type === "TAKEN" ? "exchanged-circle tak" : item?.type === "GIVEN" ? "exchanged-circle giv" : "exchanged-circle giv"}></i>
                             <h4 className={item?.type === "TAKEN" ? "taken" : ""}>
@@ -74,7 +110,7 @@ const ExchangeWrap = ({ detailInfo, sequence }: params) => {
                             {item?.type === "TAKEN" &&
                                 <span className="exchanged-givtak tak">받은 마음</span>
                             }
-                        </li>
+                        </li> : null
                     ))}
                 </ul>
                 :

diff --git a/src/components/detail/LevelCard.tsx b/src/components/detail/LevelCard.tsx
@@ -107,7 +107,7 @@ const LevelCard = (detailInfo: any) => {
                         <div className="other-info-cont">{detailInfo && detailInfo?.detailInfo?.birth?.date?.year}{detailInfo?.detailInfo?.birth?.date?.year && "년"}&nbsp;
                             {detailInfo && detailInfo?.detailInfo?.birth?.date?.month}{detailInfo?.detailInfo?.birth?.date?.month && "월"}&nbsp;
                             {detailInfo && detailInfo?.detailInfo?.birth?.date?.day}{detailInfo?.detailInfo?.birth?.date?.day && "일"}&nbsp;
-                            {detailInfo && detailInfo?.detailInfo?.birth?.isLunar === "N" ? "(양력)" : detailInfo?.detailInfo?.birth?.isLunar === "Y" ? "(음력)" : null}</div> : null
+                        </div> : null
                     }
                 </div>
                 <div className="other-info">

diff --git a/src/components/main/MainFilterBtn.tsx b/src/components/main/MainFilterBtn.tsx
@@ -1,6 +1,6 @@
 import React, {useState} from "react";
 // import IcFilterBtn from "../../assets/images/icon/ic_filter_btn.svg";
-import Exchange from "../../assets/images/icon/exchange.png";
+import Exchange from "../../assets/images/icon/exchange.svg";
 
 const FilterBtn = (props:any) => {
 

diff --git a/src/pages/detail/Detail.tsx b/src/pages/detail/Detail.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { Fragment, useEffect, useState } from "react";
 import TitleWrap from "../../components/common/TitleWrap";
 import ImgModifyIcon from "../../assets/images/icon/ic_modify_btn.png";
 import LevelCard from "../../components/detail/LevelCard";
@@ -8,6 +8,7 @@ import Sheet, { type SheetProps } from "react-dynamic-bottom-sheet";
 import { useNavigate } from "react-router-dom";
 import MainRegister from "../../components/main/MainRegister";
 import IcPlusBtn from "../../assets/images/icon/ic_plus_btn_white.svg";
+import RegisterFriendModal from "../mind/RegisterFriendModal";
 
 const Detail = () => {
 
@@ -16,6 +17,8 @@ const Detail = () => {
     const [detailInfo, setDetailInfo] = useState<any>();
     const [registerBtn, setRegisterBtn] = useState<boolean>(false);
 
+    const [isOpen, setOpen] = useState<boolean>(false);
+
     const sheetProps: SheetProps = {
         isVisible: true,
         isEdge: true,
@@ -41,21 +44,30 @@ const Detail = () => {
     }
 
     return (
-        <div className="Detail inner">
-            <TitleWrap detail={true} title={detailInfo && detailInfo.nickname} relation={detailInfo && detailInfo.relationship} />
-            <span className="modify-icon" onClick={() => navigate(`/page/friend?sequence=${getSequence}&edit=edit`)}><img src={ImgModifyIcon} alt="modify-icon" /></span>
-            <LevelCard detailInfo={detailInfo && detailInfo} />
-
-            <ExchangeWrap
-                detailInfo={detailInfo}
-                sequence={getSequence}
-            />
+        <Fragment>
+            <div className="Detail inner">
+                <TitleWrap detail={true} title={detailInfo && detailInfo.nickname} relation={detailInfo && detailInfo.relationship} />
+                <span className="modify-icon" onClick={() => setOpen(true)}><img src={ImgModifyIcon} alt="modify-icon" /></span>
+                <LevelCard detailInfo={detailInfo && detailInfo} />
 
-            <button type="button" className="add-btn" onClick={() => navigate('/page/relationship', { state: { friendData: detailInfo } })}>
-                <span className="add-btn-plus"><img src={IcPlusBtn} alt="ic_plus_btn" /></span>
-            </button>
+                <ExchangeWrap
+                    detailInfo={detailInfo}
+                    sequence={getSequence}
+                />
 
-        </div>
+                <button type="button" className="add-btn" onClick={() => navigate('/page/relationship', { state: { friendData: detailInfo } })}>
+                    <span className="add-btn-plus"><img src={IcPlusBtn} alt="ic_plus_btn" /></span>
+                </button>
+
+            </div>
+            <RegisterFriendModal 
+                isOpen={isOpen}
+                setOpen={setOpen}
+                name={detailInfo?.nickname}
+                birthday={detailInfo?.birthday}
+                memo={detailInfo?.memo}
+            />
+        </Fragment>
     )
 }
 

diff --git a/src/pages/friend/Friend.tsx b/src/pages/friend/Friend.tsx
@@ -275,9 +275,6 @@ const Friend = () => {
                 }
                 <RadioWrap
                     inputTitle='관계'
-                    handleRegister={handleRegister}
-                    friendRelation={friendRelation}
-                    friendDirectInput={friendDirectInput}
                     options={
                         [{
                             name: 'relation',

diff --git a/src/pages/main/Main.tsx b/src/pages/main/Main.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import IcSettingBtn from "../../assets/images/icon/ic_setting_btn.svg";
 import IcPlusBtnOg from "../../assets/images/icon/ic_plus_btn_white.svg";
-import IcSearch from "../../assets/images/icon/Search.png";
+import IcSearch from "../../assets/images/icon/Search.svg";
 import { inject, observer } from 'mobx-react';
 import MainText from "../../components/main/MainText";
 import MainExchangedCount from "../../components/main/MainExchangedCount";

diff --git a/src/pages/mind/RegisterFriendModal.tsx b/src/pages/mind/RegisterFriendModal.tsx
@@ -1,4 +1,4 @@
-import React, { Dispatch, SetStateAction, useRef, useState } from 'react';
+import React, { Dispatch, SetStateAction, useEffect, useRef, useState } from 'react';
 import DateUtil from '../../utils/DateUtil';
 import ModalConfirm from '../../components/common/ModalConfirm';
 import RootStore from '../../store/RootStore';
@@ -8,12 +8,16 @@ interface PropsType {
     isOpen: boolean,
     setOpen: Dispatch<SetStateAction<boolean>>,
     name?: string,
+    birthday? : string,
+    memo? : string,
 }
 
 const RegisterFriendModal = ({
     isOpen,
     setOpen,
-    name
+    name,
+    birthday,
+    memo,
 }: PropsType) => {
 
     const [isSaveOpen, setSaveOpen] = useState<boolean>(false);
@@ -28,6 +32,14 @@ const RegisterFriendModal = ({
     const birthdayRef = useRef<HTMLInputElement>(null);
     const memoRef = useRef<HTMLInputElement>(null);
 
+    useEffect(() => {
+        setFormData({
+            inputName: NullChecker.fixNullString(name),
+            birthday: NullChecker.fixNullString(birthday),
+            memo: NullChecker.fixNullString(memo),
+        })
+    }, [isOpen]);
+
     const close = () => {
         setOpen(false);
         setSaveOpen(false);
@@ -82,6 +94,7 @@ const RegisterFriendModal = ({
                                         placeholder='이름을 입력하세요.'
                                         ref={nameRef}
                                         onChange={(e) => handleInputChange(e, 'inputName')}
+                                        defaultValue={name}
                                     />
                                 </div>
                             </div>
@@ -93,6 +106,7 @@ const RegisterFriendModal = ({
                                         placeholder={DateUtil.getTodayString()}
                                         ref={birthdayRef}
                                         onChange={(e) => handleInputChange(e, 'birthday')}
+                                        defaultValue={birthday}
                                     />
                                 </div>
                             </div>
@@ -104,6 +118,7 @@ const RegisterFriendModal = ({
                                         placeholder='메모를 입력하세요.'
                                         ref={memoRef}
                                         onChange={(e) => handleInputChange(e, 'memo')}
+                                        defaultValue={memo}
                                     />
                                 </div>
                             </div>

diff --git a/src/styles/abstracts/_common.scss b/src/styles/abstracts/_common.scss
@@ -456,4 +456,37 @@
   .cancel-btn{
     background-color: $inactive-block-color;
   }
+}
+
+.radio-title-wrap {
+  .input-title{
+    font-weight: 500;
+    font-size: 4vw;
+    display: block;
+    padding: 3.33vw 0;
+  }
+
+  .radio-wrap{
+    display: flex;
+    padding: 8px 0px;
+    align-items: flex-start;
+    gap: 8px;
+    input[type="radio"]{display: none;}
+    label{
+      font-weight: 500;
+      font-size: 3.7vw;
+      color: #C0C0C0;
+      padding: 2.5vw 3vw;
+      border: 1px solid #C0C0C0;
+      border-radius: 8px;
+      margin-right: 1.5vw;
+      display: inline-block;
+      transition: .3s;
+      &:last-child{margin: 0;}
+    }
+    input[type="radio"]:checked + label{
+      border: 1px solid #FA7F64;
+      color: #FA7F64;
+    }
+  }
 }