[#125] 프로필 등록 마크업 수정, API 연동

src/api/Planner.tsx

@@ -96,46 +96,22 @@ export const fetchPlannerPartners = async (plannerId: string) => {
   return data;
 };
 
+export interface AffiliatedCompany {
+  companyName: string;
+  description: string;
+  location: string;
+  primaryImageUrl: string;
+  tel: string;
+  type: string;
+}
+
 export interface PlannerRequest {
   affiliatedCompanyInfoDTO: {
     affiliatedCompanyId: number;
   };
-  affiliatedDressCompanyDTOList: [
-    {
-      commonAffiliateCompanyDTO: {
-        companyName: string;
-        description: string;
-        location: string;
-        primaryImageUrl: string;
-        tel: string;
-        type: string;
-      };
-    }
-  ];
-  affiliatedMakeupCompanyDTOList: [
-    {
-      commonAffiliateCompanyDTO: {
-        companyName: string;
-        description: string;
-        location: string;
-        primaryImageUrl: string;
-        tel: string;
-        type: string;
-      };
-    }
-  ];
-  affiliatedStudioCompanyDTOList: [
-    {
-      commonAffiliateCompanyDTO: {
-        companyName: string;
-        description: string;
-        location: string;
-        primaryImageUrl: string;
-        tel: string;
-        type: string;
-      };
-    }
-  ];
+  affiliatedDressCompanyDTOList: AffiliatedCompany[];
+  affiliatedMakeupCompanyDTOList: AffiliatedCompany[];
+  affiliatedStudioCompanyDTOList: AffiliatedCompany[];
   areaInfoDTO: {
     locationList: string[];
   };

src/page/profile/AssociateOrganization.tsx

@@ -31,18 +31,17 @@ const AssociateOrganization = ({ id, name, margin, handleStores }: Props) => {
   const registOrganization = async () => {
     if (!organizationName || organizations.length >= 10) return;
 
-    const store: SupportStore = {
+    const organization = {
       name: organizationName,
       previewImage: previewImage,
-      imageUrl: ''
+      imageFile: imageFile
     };
-    const organization = {
+    const s3ImageUrl = await upload(imageFile);
+    const store: SupportStore = {
       name: organizationName,
       previewImage: previewImage,
-      imageFile: imageFile
+      imageUrl: s3ImageUrl
     };
-    const response = await upload(imageFile);
-    console.dir(response);
     setOrganizations(organizations?.concat(organization));
     handleStores(store);
   };

src/page/profile/UserProfile.tsx

@@ -1,18 +1,49 @@
 import styled from 'styled-components';
 import { Content, FlexDiv, Title } from '../../component/style/style';
 import PButton from '../../component/PButton';
+import AccountDefault from '../../../src/assets/svg/ic_account_default.svg';
+import { useState } from 'react';
 
 const userProps = {
   name: '홍길동',
   type: '플래너'
 };
 
 const UserProfile = () => {
+  const [previewImage, setPreviewImage] = useState('');
+  const [imageFile, setImageFile] = useState(null);
+
+  const handleFile = (e: any) => {
+    const file = e.target.files[0];
+
+    if (file) {
+      setImageFile(file);
+      setImageFromFile(file);
+    }
+  };
+
+  const setImageFromFile = (file: any) => {
+    const reader = new FileReader();
+    reader.onloadend = () => {
+      const image = reader.result;
+      if (image) {
+        setPreviewImage(image.toString());
+      }
+    };
+    reader.readAsDataURL(file);
+  };
+
   return (
     <FlexDiv justify="flex-start" margin="0 0 0 0">
       <Box>
         <FlexDiv margin="0" direction="column">
-          <ProfileImageBox></ProfileImageBox>
+          <ProfileImageBox>
+            <ProfileImage src={previewImage ? previewImage : AccountDefault}></ProfileImage>
+            <Input id="profile-image-file" type="file" onChange={handleFile}></Input>
+            <Label htmlFor="profile-image-file">
+              <EditIcon></EditIcon>
+            </Label>
+          </ProfileImageBox>
           <Title height={'27px'} width={'auto'} fontSize={'18px'} lineHeight={'27px'} margin={'24px 0 7px 0'}>
             {userProps.name}
           </Title>
@@ -63,8 +94,40 @@ const Box = styled.div`
 `;
 
 const ProfileImageBox = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  align-items: flex-end;
+`;
+
+interface ImageProps {
+  src: string;
+}
+
+const ProfileImage = styled.img.attrs((props: ImageProps) => ({ src: props.src }))`
   height: 124px;
   width: 124px;
-  background-color: #adb5bd;
+  margin: 0;
   border-radius: 100%;
+  position: relative;
+`;
+
+const EditIcon = styled.img.attrs((props: ImageProps) => ({ src: props.src }))`
+  box-sizing: border-box;
+  height: 41px;
+  width: 41px;
+  border: 1px solid #ffffff;
+  background-color: #f1f3f5;
+  border-radius: 100%;
+  position: absolute;
+  cursor: pointer;
+`;
+
+const Label = styled.label`
+  display: flex;
+  justify-content: flex-end;
+  align-items: flex-end;
+`;
+
+const Input = styled.input`
+  display: none;
 `;

src/page/profile/dist/AssociateOrganization.js

@@ -56,26 +56,25 @@ var AssociateOrganization = function (_a) {
     var _d = react_1.useState(null), imageFile = _d[0], setImageFile = _d[1];
     var _e = react_1.useState([]), organizations = _e[0], setOrganizations = _e[1];
     var registOrganization = function () { return __awaiter(void 0, void 0, void 0, function () {
-        var store, organization, response;
+        var organization, s3ImageUrl, store;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
                     if (!organizationName || organizations.length >= 10)
                         return [2 /*return*/];
-                    store = {
-                        name: organizationName,
-                        previewImage: previewImage,
-                        imageUrl: ''
-                    };
                     organization = {
                         name: organizationName,
                         previewImage: previewImage,
                         imageFile: imageFile
                     };
                     return [4 /*yield*/, Image_1.upload(imageFile)];
                 case 1:
-                    response = _a.sent();
-                    console.dir(response);
+                    s3ImageUrl = _a.sent();
+                    store = {
+                        name: organizationName,
+                        previewImage: previewImage,
+                        imageUrl: s3ImageUrl
+                    };
                     setOrganizations(organizations === null || organizations === void 0 ? void 0 : organizations.concat(organization));
                     handleStores(store);
                     return [2 /*return*/];

src/page/profile/dist/UserProfile.js

@@ -0,0 +1,58 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+exports.__esModule = true;
+var styled_components_1 = require("styled-components");
+var style_1 = require("../../component/style/style");
+var PButton_1 = require("../../component/PButton");
+var ic_account_default_svg_1 = require("../../../src/assets/svg/ic_account_default.svg");
+var react_1 = require("react");
+var userProps = {
+    name: '홍길동',
+    type: '플래너'
+};
+var UserProfile = function () {
+    var _a = react_1.useState(''), previewImage = _a[0], setPreviewImage = _a[1];
+    var _b = react_1.useState(null), imageFile = _b[0], setImageFile = _b[1];
+    var handleFile = function (e) {
+        var file = e.target.files[0];
+        if (file) {
+            setImageFile(file);
+            setImageFromFile(file);
+        }
+    };
+    var setImageFromFile = function (file) {
+        var reader = new FileReader();
+        reader.onloadend = function () {
+            var image = reader.result;
+            if (image) {
+                setPreviewImage(image.toString());
+            }
+        };
+        reader.readAsDataURL(file);
+    };
+    return (React.createElement(style_1.FlexDiv, { justify: "flex-start", margin: "0 0 0 0" },
+        React.createElement(Box, null,
+            React.createElement(style_1.FlexDiv, { margin: "0", direction: "column" },
+                React.createElement(ProfileImageBox, null,
+                    React.createElement(ProfileImage, { src: previewImage ? previewImage : ic_account_default_svg_1["default"] }),
+                    React.createElement(Input, { id: "profile-image-file", type: "file", onChange: handleFile }),
+                    React.createElement(Label, { htmlFor: "profile-image-file" },
+                        React.createElement(EditIcon, null))),
+                React.createElement(style_1.Title, { height: '27px', width: 'auto', fontSize: '18px', lineHeight: '27px', margin: '24px 0 7px 0' }, userProps.name),
+                React.createElement(TypeBox, null,
+                    React.createElement(style_1.Content, { height: '19px', width: 'auto', color: '#D6336C', fontSize: '13px', lineHeight: '19px', margin: '2px 4px 2px 4px' }, userProps.type)),
+                React.createElement(style_1.FlexDiv, { margin: "18px 0 0 0", direction: "column" },
+                    React.createElement(PButton_1["default"], { fontSize: "14px", height: "41px", width: "98px" }, "\uACC4\uC815 \uC124\uC815"))))));
+};
+exports["default"] = UserProfile;
+var TypeBox = styled_components_1["default"].div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 22px;\n  border-radius: 3px;\n  background-color: #fff0f6;\n  display: flex;\n  justify-content: 'center';\n  align-items: 'center';\n"], ["\n  height: 22px;\n  border-radius: 3px;\n  background-color: #fff0f6;\n  display: flex;\n  justify-content: 'center';\n  align-items: 'center';\n"])));
+var Box = styled_components_1["default"].div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  box-sizing: border-box;\n  height: 340px;\n  width: 310px;\n  border: 1px solid #ced4da;\n  border-radius: 3px;\n  display: flex;\n  flex-direction: row;\n  justify-content: 'center';\n  align-items: 'center';\n"], ["\n  box-sizing: border-box;\n  height: 340px;\n  width: 310px;\n  border: 1px solid #ced4da;\n  border-radius: 3px;\n  display: flex;\n  flex-direction: row;\n  justify-content: 'center';\n  align-items: 'center';\n"])));
+var ProfileImageBox = styled_components_1["default"].div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  justify-content: flex-end;\n  align-items: flex-end;\n"], ["\n  display: flex;\n  justify-content: flex-end;\n  align-items: flex-end;\n"])));
+var ProfileImage = styled_components_1["default"].img.attrs(function (props) { return ({ src: props.src }); })(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  height: 124px;\n  width: 124px;\n  margin: 0;\n  border-radius: 100%;\n  position: relative;\n"], ["\n  height: 124px;\n  width: 124px;\n  margin: 0;\n  border-radius: 100%;\n  position: relative;\n"])));
+var EditIcon = styled_components_1["default"].img.attrs(function (props) { return ({ src: props.src }); })(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  box-sizing: border-box;\n  height: 41px;\n  width: 41px;\n  border: 1px solid #ffffff;\n  background-color: #f1f3f5;\n  border-radius: 100%;\n  position: absolute;\n  cursor: pointer;\n"], ["\n  box-sizing: border-box;\n  height: 41px;\n  width: 41px;\n  border: 1px solid #ffffff;\n  background-color: #f1f3f5;\n  border-radius: 100%;\n  position: absolute;\n  cursor: pointer;\n"])));
+var Label = styled_components_1["default"].label(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: flex;\n  justify-content: flex-end;\n  align-items: flex-end;\n"], ["\n  display: flex;\n  justify-content: flex-end;\n  align-items: flex-end;\n"])));
+var Input = styled_components_1["default"].input(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  display: none;\n"], ["\n  display: none;\n"])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

src/page/profile/dist/index.js

@@ -79,8 +79,61 @@ var Profile = function (_a) {
         makeUps.push(makeUp);
         setMakeUps(makeUps);
     };
-    var handleSubmit = function () {
-        // mutate(request);
+    var handleRegister = function () {
+        var affilicatedDress = dresses.map(function (dress) {
+            return {
+                companyName: dress.name,
+                description: '',
+                location: '',
+                primaryImageUrl: dress.imageUrl,
+                tel: '',
+                type: ''
+            };
+        });
+        var affilicatedStudios = studios.map(function (studio) {
+            return {
+                companyName: studio.name,
+                description: '',
+                location: '',
+                primaryImageUrl: studio.imageUrl,
+                tel: '',
+                type: ''
+            };
+        });
+        var affilicatedMakeUps = makeUps.map(function (makeUp) {
+            return {
+                companyName: makeUp.name,
+                description: '',
+                location: '',
+                primaryImageUrl: makeUp.imageUrl,
+                tel: '',
+                type: ''
+            };
+        });
+        var request = {
+            affiliatedCompanyInfoDTO: {
+                affiliatedCompanyId: 1
+            },
+            affiliatedDressCompanyDTOList: affilicatedDress,
+            affiliatedStudioCompanyDTOList: affilicatedStudios,
+            affiliatedMakeupCompanyDTOList: affilicatedMakeUps,
+            areaInfoDTO: {
+                locationList: regions
+            },
+            myProfileDTO: description,
+            snsInfoDTO: {
+                externalLinks: {
+                    blogLink: sns.blogUrl,
+                    facebookLink: sns.facebookUrl,
+                    instagramLink: sns.instagramUrl
+                },
+                webSiteUrl: sns.webUrl
+            },
+            supportInfoDTO: {
+                supportInfoList: offers
+            }
+        };
+        mutate(request);
     };
     return (React.createElement(Container, null,
         React.createElement(InnerContainer, null,
@@ -99,7 +152,7 @@ var Profile = function (_a) {
                 React.createElement(AssociateOrganization_1["default"], { id: "dress", name: "\uB4DC\uB808\uC2A4", margin: "0 0 72px 0", handleStores: handleDress }),
                 React.createElement(AssociateOrganization_1["default"], { id: "makeup", name: "\uBA54\uC774\uD06C\uC5C5", margin: "0 0 24px 0", handleStores: handleMakeUp }),
                 React.createElement(style_1.FlexDiv, { direction: "row", margin: "0 0 320px 48px", justify: "flex-start" },
-                    React.createElement(PButton_1["default"], { color: "pink", fontSize: "14px", height: "40px", width: "312px", fontWeight: "bold" }, isUpdate ? '수정하기' : '등록하기'))))));
+                    React.createElement(PButton_1["default"], { color: "pink", fontSize: "14px", height: "40px", width: "312px", fontWeight: "bold", onClick: handleRegister }, isUpdate ? '수정하기' : '등록하기'))))));
 };
 exports["default"] = Profile;
 var Container = styled_components_1["default"].div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin: 16px auto;\n"], ["\n  margin: 16px auto;\n"])));