Skip to content

Commit

Permalink
Merge pull request #34 from 100-hours-a-week/dev
Browse files Browse the repository at this point in the history
Dev
  • Loading branch information
lucy726j authored Aug 19, 2024
2 parents 0844bd0 + 9497733 commit 54df013
Show file tree
Hide file tree
Showing 45 changed files with 1,107 additions and 434 deletions.
20 changes: 20 additions & 0 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@
"react-router-dom": "^6.26.0",
"react-scripts": "^5.0.1",
"styled-components": "^6.1.12",
"sweetalert": "^2.1.2",
"typescript": "^4.9.5",
"web-vitals": "^2.1.4"
},
Expand Down
6 changes: 3 additions & 3 deletions src/.env
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
REACT_APP_GOOGLE_AUTH_CLIENT_ID=64814033153-55dta7lc3gu9ont7ln4vcle9eemuftu0.apps.googleusercontent.com
REACT_APP_GOOGLE_AUTH_REDIRECT_URI=http://localhost:3000/auth/callback
REACT_APP_GOOGLE_OAUTH_CLIENT_SECRET=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
REACT_APP_GOOGLE_AUTH_CLIENT_ID=61340273871-dlo0h0cc22cj8oeuhgirfamos6mcu9ck.apps.googleusercontent.com
REACT_APP_GOOGLE_AUTH_REDIRECT_URI=http://localhost:8080/login/oauth2/code/google
REACT_APP_GOOGLE_OAUTH_CLIENT_SECRET=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
9 changes: 5 additions & 4 deletions src/App.css
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,8 @@
}

.content {
width: 500px;
height: 100vh;
background-color: #fff;
}
width: 500px;
height: 100vh;
background-color: #fff;
box-shadow: 0px 4px 7px -2px #ada9bb;
}
37 changes: 35 additions & 2 deletions src/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,17 +3,50 @@ import React from "react";
import { GlobalStyle } from "./Styles/GlobalStyles";
import Router from "./Router";
import "./App.css";
// import { useAuth } from "./contexts/authContext";
// import GoogleLogin from "./Component/GoogleLogin/login";
// import Header from "./Component/Layout/Header/Header";
// import Profile from "./Component/Layout/Header/Profile";

function App() {
// const { user, login, logout } = useAuth();
return (
<>
<div>
{/* {user ? (
<>
<Header />
<Profile />
<GlobalStyle />
<div className="app-container">
<div className="content">
<Router />
</div>
</div>
</>
) : (
<div className="app-container">
<div
style={{
display: "flex",
width: "500px",
height: "100vh",
backgroundColor: "#fff",
alignContent: "center",
alignItems: "center",
justifyContent: "center",
}}
>
<GoogleLogin />
</div>
</div>
)} */}
<GlobalStyle />
<div className="app-container">
<div className="content">
<Router />
</div>
</div>
</>
</div>
);
}

Expand Down
3 changes: 2 additions & 1 deletion src/Component/Button/button.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -23,4 +23,5 @@ const Button = ({onClick, children, ...styleprops}: ButtonProps) => {
export default Button;

// 버튼 사용 예시
{/* <Button state="normal" colorType="main" size="small">버튼</Button> */}
{/* <Button state="normal" colorType="main" size="small">버튼</Button> */}

89 changes: 74 additions & 15 deletions src/Component/Calculator/calculator.tsx
Original file line number Diff line number Diff line change
@@ -1,26 +1,85 @@
import styled from "styled-components";
import Dropdown from "../Dropdown/Dropdown";
import { Input } from "../Input/input";
import Button from "../Button/button";
import Img from "../../img/calcul.png";
import { Colors } from "../../Styles/Colors";

const Container = styled.div`
width: 450px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 10px;
padding: 50px;
border-radius: 10px;
box-shadow: 0px 4px 4px rgb(0, 0, 0, 0.25);
`;

const TitleContainer = styled.div`
display: flex;
flex-direction: row;
justify-content: center;
align-items: end;
gap: 5px;
`;

const User = styled.span`
color: ${Colors.main};
`;

const DropContainer = styled.div`
display: flex;
flex-direction: row;
gap: 3px;
`;

const Label = styled.div``;

const Calculator = () => {
// CHECK API 연결할 떄,, 현재 시점 보다 미래의 날짜를 했을 때, 검색 불가하게 막기 필요
// 없는 날짜를 검색하면 검색 불가하게 막기 필요
const year = [
2014, 2015, 2016, 2017, 2018, 2019, 2020, 2021, 2022, 2023, 2024,
];
const month = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
const day = [
1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21,
22, 23, 24, 25, 26, 27, 28, 29, 30, 31,
];

return (
<div>
<div>
<img src="" alt="" />
<span>만약 스껄님이 이 떄 샀다면?</span>
</div>
<Container>
<TitleContainer>
<img src={Img} alt="앵무새가 컴퓨터 보는 이미지" />
<span>
만약 <User>스껄</User>님이 이 때 샀다면?
</span>
</TitleContainer>
<div>
<div>년도월</div>
<div>
<Dropdown />
<Dropdown />
<Dropdown />
</div>
<Label>년도 월 일</Label>
<DropContainer>
<Dropdown dropList={year} />
<Dropdown dropList={month} />
<Dropdown dropList={day} />
</DropContainer>
</div>
<div>
<div>년도월</div>
<input />
<Label>금액</Label>
<Input
placeholder={"금액을 입력해주세요"}
size="small"
colorType="strokeType"
/>
</div>
<button>결과 확인하기</button>
</div>
<Button
children={"결과 확인하기"}
state="normal"
size="gradientBtn"
colorType="main"
/>
</Container>
);
};

Expand Down
18 changes: 14 additions & 4 deletions src/Component/Carousel/EmblaCarousel.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import React, { useCallback, useEffect, useRef } from "react";
import { useNavigate } from "react-router-dom"; // useNavigate import 추가
import { EmblaCarouselType, EmblaEventType, EmblaOptionsType } from "embla-carousel";
import useEmblaCarousel from "embla-carousel-react";
import { NextButton, PrevButton, usePrevNextButtons } from "./EmblaCarouselArrowButtons";
Expand All @@ -21,9 +22,9 @@ const EmblaCarousel: React.FC<PropType> = ({ data, options }) => {
const [emblaRef, emblaApi] = useEmblaCarousel(options);
const tweenFactor = useRef(0);
const tweenNodes = useRef<HTMLElement[]>([]);
const navigate = useNavigate(); // useNavigate hook 사용

const { selectedIndex, scrollSnaps, onDotButtonClick } =
useDotButton(emblaApi);
const { selectedIndex, scrollSnaps, onDotButtonClick } = useDotButton(emblaApi);

const {
prevBtnDisabled,
Expand Down Expand Up @@ -120,20 +121,29 @@ const EmblaCarousel: React.FC<PropType> = ({ data, options }) => {
};
}, [emblaApi, tweenScale, setTweenNodes, setTweenFactor]);

const handleSlideClick = (id: number) => {
navigate(`/portfolio/${id}`); // ID를 사용하여 라우팅
};

return (
<div className="embla">
<div className="embla__viewport" ref={emblaRef}>
<div className="embla__container">
{data.map((item) => (
<div className="embla__slide" key={item.id}>
<div
className="embla__slide"
key={item.id}
onClick={() => handleSlideClick(item.id)} // 클릭 이벤트 추가
style={{ cursor: 'pointer' }} // 커서 스타일 추가
>
<div className="embla__slide__number">
<div className="embla__slide__info">
<h3>{item.name}</h3>
<p>{formatPrice(item.price)}</p>
<p style={{ color: item.growth > 0 ? 'green' : '#D84343' }}>
{item.growth}%
</p>
<img src={myPortfolioImg} alt="Portfolio" /> {/* alt 속성 추가 */}
<img src={myPortfolioImg} alt="Portfolio" />
</div>
</div>
</div>
Expand Down
Loading

0 comments on commit 54df013

Please sign in to comment.