본문 바로가기

Web_Project

 (28)
트러블슈팅 🖥️ Front-End ✅ 프로젝트에 사용되는 babel-preset-react-app이 @babel/plugin-proposal-private-property-in-object 패키지를 의존성으로 선언하지 않고 사용하고 있어서 경고 발생 // 설치로 해결 yarn add --dev @babel/plugin-proposal-private-property-in-object ✅ Promise가 state에 들어가 있어서 생긴 채널톡 오류. Redux state에는 비동기 작업 또는 Promise와 같은 값이 포함되어서는 안 되기 때문. // 오류 메시지 serializableStateInvariantMiddleware.ts:212 A non-serializable value was detected in th..
Front-End Convention ✅ Styled-Components 초기 세팅 styled-components 초기 세팅 🌼 내가 쓰려고 미리 만들어둔 styled-components 초기 세팅 boilerplate velog.io [styled-components] 초기 CSS 세팅하기(GlobalStyles, styled-reset, ThemeProvider) 🎯 Styled-Components 전역 스타일링 (Global Style) & styled-reset & ThemeProvider createGlobalStyle Styled Components는 createGlobalStyle()라는 함수를 제공하고 있다. 여러 컴포넌트에 걸쳐 공통된 css를 작업할 때 사용한 lakelouise.tistory.com ✅ BEM 개념 정리..
유저테스트 피드백 반영 📌 유저테스트 결과 리포트 바로가기 (스프레드 시트) 상세 피드백 반영 사항 바로가기 (노션) 🎯 테스트 결과 리포트 📊 운영체제 대체로 데스크탑/모바일 환경에서 테스트가 진행되었고, 운영체제인 윈도우와 맥의 비율은 비등했습니다. 📊 서비스 만족도 회원가입 및 로그인 기능 서비스에서는 7~10점을 주신 사용자 비율이 94%로 긍정적인 의견을 주셨습니다. 펀딩 기능 서비스에서는 7~10점을 주신 사용자 비율이 84.9%로 긍정적인 의견을 주셨습니다. 결제 기능 서비스에서는 7~10점 비율이 93.3%로 긍정적인 의견을 주셨습니다. 📊 사용성(UI/UX) UI/UX 부분에서 7~10점 비율이 81.8%로 대체적으로 만족한다는 응답을 주셨습니다. 📊 사이트 만족도 전체적인 사이트 만족도에서 7~10점 비율이 ..
[프로젝트 브로셔] Giftipie 프로젝트 상세설명 기프티파이에서 정말 원하는 선물을 주고 받아요! 원하는 선물을 받고 싶을 때, 한 사람을 통해 받기에는 부담되는 가격의 선물을 받고 싶을 때가 있습니다. 이때 선물 펀딩을 등록하여 지인들에게 링크를 공유하고, 지인들이 원하는 금액만큼 후원할 수 있는 서비스입니다. 🎁 Giftipie 바로가기 🖥️ Front-End Github 💻 Back-End Github 🏗️ 서비스 아키텍처 ✅ 전체 아키텍처 📌 기술적 의사결정 Redux Toolkit : 상태 관리와 관련하여 초기 설정에 필요한 보일러플레이트와 불필요한 반복 작업을 최소한 할 수 있는 상태 관리툴로 미들웨어를 쉽게 통합할 수 있어 비동기 작업 및 다양한 확장 기능을 쉽게 추가할 수 있어서 선택하였습니다. GitHub Actions : GitHub와..
[프로젝트 소개] Giftipie 선물펀딩 서비스 기프티파이에서 정말 원하는 선물을 주고 받아요! 원하는 선물을 받고 싶을 때, 한 사람을 통해 받기에는 부담되는 가격의 선물을 받고 싶을 때가 있습니다. 이때 선물 펀딩을 등록하여 지인들에게 링크를 공유하면 지인들이 원하는 금액만큼 후원할 수 있는 서비스입니다. ✨Giftipie 프로젝트 바로가기 Giftipie | 기프티파이 원하는 상품을 등록하면 친구들이 함께 카카오 결제를 통해 펀딩이 달성됩니다! 원하는 선물이 필요할 때 기프티파이와 함께하세요. 원하는 상품 펀딩 플랫폼 www.giftipie.me 📆 프로젝트 기간 2024.01.26 ~ 2024.03.11 😊 팀원 소개 Design : 윤다인 Front-end : [ 🖥️ Front-End Github ] 류지현(L), 이현진 Back-end :..
생성-수정-상세-후원자-결제페이지 import React, { useState } from 'react'; import { useNavigate } from 'react-router-dom'; import { postFundingCreate } from '../../../apis/funding'; import { useParams } from 'react-router-dom'; import CreateModal from './Modal/CreateModal'; import { infoToast } from '../../../components/toast'; import { IoIosArrowBack } from 'react-icons/io'; import { GrAdd } from 'react-icons/gr'; import theme ..
전체 데스크탑뷰 적용 import React, { useEffect, useState } from "react"; import { FaChevronRight } from "react-icons/fa"; import { FaPlus } from "react-icons/fa6"; import { useNavigate } from "react-router-dom"; import LoginModal from "../Home/Login/LoginModal"; import { useDispatch, useSelector } from "react-redux"; import { bootChannelTalk } from "../../redux/channelTalkSlice"; import Navbar from "../../components..
데스크탑뷰 import React, { useEffect, useState } from 'react'; import { FaChevronRight } from 'react-icons/fa'; import { FaPlus } from 'react-icons/fa6'; import { useNavigate } from 'react-router-dom'; import LoginModal from '../Home/Login/LoginModal'; import { useDispatch, useSelector } from 'react-redux'; import { bootChannelTalk } from '../../redux/channelTalkSlice'; import Navbar from '../../components..
생성-수정-결제페이지 import React, { useState } from 'react'; import { HiBell } from 'react-icons/hi'; import { BsPersonCircle } from 'react-icons/bs'; // 로그인 import { FaAngleLeft } from 'react-icons/fa6'; // import { RiLogoutBoxRLine } from "react-icons/ri"; import { IoLogOutSharp } from "react-icons/io5"; // 로그아웃 import { useNavigate } from 'react-router-dom'; import { NavbarIconContainer, NavbarNotificationIconDi..
로그인모달창, 회원가입, 로그인 import React from "react"; import { IoClose } from "react-icons/io5"; import { Link } from "react-router-dom"; import { useDispatch } from "react-redux"; import { googleLogin, kakaoLogin } from "../../../redux/authSlice"; import { ModalContainer, Background, IoCloseDiv, LoginModalImg, P, GoogleBtn, KakaoBtn, LoginModalBtn, } from "./LoginModalStyles"; const LoginModal = ({ closeModal }) => { con..

티스토리툴바