https://climbing-together.firebaseapp.com/ '벽을 보며 말해요'라는 클리이밍 커뮤니티 SNS이다클라이밍은 벽을 보고 길을 찾아 올라가는 실내 스포츠인데거기서 지인과 대화하던 중 작명 아이디어를 받았다  로고는 현존하는 로고를 보며 모작했다이미 계정이 있나요를 누르면 회원가입 화면으로 이동할 수 있다해결중인 문제는 Github 로그인이 잘 안된다는 점이다 연결이 제대로 안된 거 같기도 하다또 로그인 창이 이유를 아직 모르겠는데 로딩은 되는데 홈으로 못넘어갈 때가 간헐적으로 있다이 문제는 해결하여 이 포트폴리오의 마지막 포스팅 쯤 작성할 계획이다  한때 이용했던 고민 상담 어플리케이션 엔라이즈사의 '모씨'가 생각났다글을 많이 쓰면 카드가 터질 수 있다고 알림이 뜨고 터진 부..

/* 기본 스타일 초기화 */body { margin: 0; padding: 0; box-sizing: border-box; font-family: pretendard-regular; background-color: #282c34; color: white; text-align: center; height: 100vh; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; overflow-x: hidden;}/* 상단 고정 섹션 */#top-section { width: 100%; flex-shrink: 0; /* 상단 고정 */ text-align: center; pad..

import React, { useState, useEffect } from "react";import "./App.css";import { startClock } from "./js/clock";import { initializeQuotes } from "./js/quotes";import { initializeWeather } from "./js/weather";import Background from "./js/background";import FocusMode from "./jsx/FocusMode";function App() { const [username, setUsername] = useState(null); // 사용자의 이름을 저장하는 상태 변수 const [focusMode, se..

FocusMode.jsximport React from "react";import "../FocusMode.css";// 함수형 컴포넌트 FocusModefunction FocusMode({ onExit }) {// { onExit } : 버큰 클릭시 실행 return ( Exit Focus Mode Stay Focused! );}export default FocusMode; FocusMode.css.focus-mode-container { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0...

import React, { useState, useEffect } from "react";import styled from "styled-components";import axios from "axios";const BackgroundWrapper = styled.div` background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), // 배경 위에 반투명한 검은색 (50% 투명도)를 얹는 그라디언트 효과 url(${(props) => props.backgroundImage}); // backgroundImage 값을 받아 동적으로 배경 이미지를 설정 // props.backgroundImage가 "image.jpg"라면 ..

function getClock() { // 현재 시간을 가져와 시계를 업데이트하는 함수 const clockElement = document.getElementById("clock"); // HTML에서 id가 click인 요소를 가져온다 if (!clockElement) return; // clockElement가 없으면 종료 (안전장치) const now = new Date(); // Date 객체를 사용해 현재 시간을 가져온다 const hours = String(now.getHours()).padStart(2, "0"); const minutes = String(now.getMinutes()).padStart(2, "0"); const second..