본문 바로가기

Web_Project

(28)
메인페이지 webkit-scrollbar 적용 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 { userLogout } from '../../re..
카카오페이 API 연동 import React, { useState, useEffect } from "react"; import { useNavigate } from "react-router-dom"; import { useParams } from "react-router-dom"; import { fetchFundingDetail } from "../../../api/api"; // 펀딩 상세 정보를 가져오는 API 함수 import import Navbar from "../../../components/Navbar"; // 추가된 코드 import { useDispatch, useSelector } from "react-redux"; // 추가된 코드 import { userLogout } from "../../../red..
API 연결 성공 import axios from 'axios'; import Cookies from 'js-cookie'; // Axios 인스턴스 생성 export const instance = axios.create({ baseURL: process.env.REACT_APP_API_URL, // 환경변수를 통한 API URL 설정 withCredentials: true, // 쿠키 전송을 위한 옵션 }); // 토큰을 쿠키에 저장하는 함수 const saveTokensToCookies = (accessToken, refreshToken) => { Cookies.set('accessToken', accessToken, { path: '/' }); // accessToken을 쿠키에 저장 Cookies.set('refr..
모달 구현 중 import React, { useState } from 'react'; import { useNavigate } from 'react-router-dom'; import { MainContainer, LeftContainer, Logo, P, Button, RightContainer, Navbar, NavbarBtn, ProducImgtDiv, InputTag, FundingImg, PlusImg, Body, FundingDiv, SponserDiv, RadioInput, SponserComment, TogetherDiv, } from './FundingCreateStyles'; import Modal from './Modal/Modal'; const FundingCreate = () => { cons..
반응형 페이지 구현 1️⃣ 펀딩 상세 페이지 /fundingdetail import React from 'react'; import { useNavigate } from 'react-router-dom'; import { MainContainer, LeftContainer, Logo, P, Button, RightContainer, Navbar, NavbarBtn, NavbarBtnDiv, Body, BannerImg, FundingDiv, SponserDiv, SponserComment, SponsorImg, ProgressBar, Progress, BetweenDiv, TogatherDiv, Footer, } from './FundingDetailStyles'; const FundingDetail = () => { co..
clonecoding_NEWNEEK 🦔 https://youtu.be/zoBAAoKpjZc ✨깃헙주소 : https://github.com/Clone-Coding-Unicorn/Clone-Coding-Unicorn-FE.git GitHub - Clone-Coding-Unicorn/Clone-Coding-Unicorn-FE Contribute to Clone-Coding-Unicorn/Clone-Coding-Unicorn-FE development by creating an account on GitHub. github.com 🔥클론코딩 트러블이슈🔥 ✅[ SignUp ] 회원가입 아이디, 비번 유효성 검사에서 ( button 클릭 후 보이게 조정 / RED 인풋창 ) X 코드 로직을 조정해 적용하지 못함 CheckBox 작동 후 버튼 활성화..
세 자리 수 맞추기 게임 숫자 야구 게임! 컴퓨터가 세 자리 숫자를 생성하였습니다. 정답을 맞춰보세요! [게임 진행 방식] 숫자의 값과 위치가 모두 일치하면 S 숫자의 값은 일치하지만 위치가 틀린다면 B 숫자 3개를 모두 맞춘 경우, 게임을 종료합니다. 시도 // 게임에 필요한 변수 초기화 let answer = generateRandomNumber(); let attempts = 0; // HTML 요소 가져오기 const output = document.getElementById('output'); const userInput = document.getElementById('userInput'); // 1. 메인 게임 로직 function checkGuess() { // HTML 입력값 가져오기 const guess = us..
오늘의 음식 메뉴 추천 홈페이지 ✅ 웹미니프로젝트로 진행된 웹플래너의 추가 기능으로 오늘의 메뉴 추천 페이지를 맡게 되었다. navbar와 footer는 웹플래너의 공통요소로 사용되었고 main부분을 맡아 진행하게 되었다. 🔥 트러블슈팅 1️⃣ 우선 가장 난관에 봉착한 부분은 음식 이미지를 가져올 API 주소가 필요했는데, API의 이미지 엔드포인트 URL을 생성해야 하는데 방법을 찾지 못했고 결국 API KEY를 받아서 요청받는 형태로는 진행하지 못했고, 구글링으로 다른 분이 공유해둔 음식 이미지 API 링크를 가져와서 활용하는 형식으로 대체하였다. 그렇다보니, 메뉴의 수가 29개만 랜덤되는 제한이 있었다. 그래도 음식 이미지는 맛스러운 것을 찾아서 다행이었다. 휴. 2️⃣ 이미지 아래 버튼을 클릭하면 다음 음식 이미지로 넘어갈 뿐 ..
momentum_체크박스+모달창 만들기 1️⃣ 중요한 일 나타내기 >> 2️⃣ 체크 박스, 삭제 아이콘 만들기 >> 3️⃣ 모달창 아이콘 만들기 >> 4️⃣ 모달창 클릭하면 나타내기 >> 5️⃣ 모달창이 뜨면 버튼 없애기 >> momentum_third.html Hello, Jessy. Today Publish Blog Post Add to the list
구글 모멘텀 앱 만들기 ✅ Plan >> 1. 구역 계획하기 ⇒ 2. HTML 쓰기 ⇒ 3. CSS 설정 하기 ⇒ 4. fetch 적용 하기 +30c 12:34 Hello, Jessy. What is your main focus for today? Have a nice day!