부산대_FE_이민경_2주차_과제 Step 1

README.md

@@ -13,3 +13,99 @@
 ## Week 2. 1단계 - 페이지 만들기
 
 [🔗 link](https://edu.nextstep.camp/s/hazAC9xa/ls/QzV1ncxk)
+
+---
+
+# 구현 목록
+
+- [x] react router dom 세팅
+
+- 공통 컴포넌트 만들기
+	- [x] Header
+	- [x] Footer
+
+- 페이지 만들기
+	- 메인 페이지 (/)
+		- [x] Theme 카테고리 섹션 추가
+			- [x] Theme 페이지 이동
+		- [x] 실시간 급상승 선물랭킹
+			- [x] 필터 기능을 hooks를 사용하여 구현 (ex. 전체, 여성이, 남성이, 청소년이 / 받고 싶어한, 많이 선물한, 위시로 받은)
+			- [x] 상품 목록 접기
+			- [x] 상품 목록 펼치기
+	- Theme 페이지(/theme :themeKey)
+		- [x] Header 섹션 추가
+			- [x] 재사용성을 고려하여 Header 섹션 만들기 (themeKey에 따라 label, title, description, backgroundColor가 달라짐)
+		- [x] 상품 목록 섹션을 추가.
+	- 로그인 페이지(/login)
+		- [x] 로그인 기능 추가 (ID와 PW는 아무 값을 입력해도 통과되도록)
+	- 나의 페이지(/my-account)
+		- [x] 로그아웃 버튼 추가
+		- [x] 로그아웃 기능 추가
+
+
+
+
+
+
+# 폴더 구조
+
+```text
+src
+├── components
+│   ├── common
+│   │   ├── Button
+│   │   │   ├── index.stories.tsx
+│   │   │   ├── index.tsx
+│   │   ├── FilterButton
+│   │   │   ├── FilterButton.tsx
+│   │   ├── Form
+│   │   │   ├── Input
+│   │   │   │   ├── UnderlineTextField.stories.tsx
+│   │   │   │   ├── UnderlineTextField.tsx
+│   │   ├── GoodsItem
+│   │   │   ├── Default.stories.tsx
+│   │   │   ├── Default.tsx
+│   │   │   ├── Ranking.stories.tsx
+│   │   │   ├── Ranking.tsx
+│   │   ├── Image
+│   │   │   ├── index.stories.tsx
+│   │   │   ├── index.tsx
+│   │   ├── layouts
+│   │   │   ├── Container
+│   │   │   │   ├── index.stories.tsx
+│   │   │   │   ├── index.tsx
+│   │   │   ├── Grid
+│   │   │   │   ├── index.stories.tsx
+│   │   │   │   ├── index.tsx
+│   ├── Footer
+│   │   ├── Footer.tsx
+│   ├── GoodsCategory
+│   │   ├── GoodsCategory.tsx
+│   ├── Header
+│   │   ├── Header.tsx
+│   ├── Items
+│   │   ├── Items.tsx
+│   ├── Ranking
+│   │   ├── Detail
+│   │   │   ├── DetailButton.tsx
+│   │   ├── Filter
+│   │   │   ├── Filter.tsx
+│   │   │   ├── FilterTab.tsx
+│   │   │   ├── FilterTabs.tsx
+│   │   ├── RankingItems
+│   │   │   ├── RankingItems.tsx
+│   │   │   ├── RankingHeader.tsx
+│   ├── SelectFriend
+│   │   ├── SelectFriend.tsx
+│   ├── ThemeGoods
+│   │   ├── ThemeGoods.tsx
+│   ├── ThemeHeader
+│   │   ├── ThemeHeader.tsx
+├── pages
+│   ├── Home.tsx
+│   ├── Login.tsx
+│   ├── MyAccount.tsx
+├── routes
+│   ├── index.tsx
+
+```

package.json

@@ -25,11 +25,10 @@
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.24.0"
   },
   "devDependencies": {
-    "react-scripts": "5.0.1",
-    "typescript": "^4.9.5",
     "@craco/craco": "^7.1.0",
     "@emotion/eslint-plugin": "^11.11.0",
     "@storybook/addon-essentials": "^7.6.17",
@@ -65,8 +64,10 @@
     "eslint-plugin-storybook": "^0.8.0",
     "prettier": "^3.2.5",
     "prop-types": "^15.8.1",
+    "react-scripts": "5.0.1",
     "storybook": "^7.6.17",
     "tsconfig-paths-webpack-plugin": "^4.1.0",
+    "typescript": "^4.9.5",
     "webpack": "^5.90.3"
   },
   "overrides": {

src/App.tsx

@@ -1,18 +1,11 @@
-import styled from '@emotion/styled';
+import Router from './routes';
 
 const App = () => {
-  const name = 'Josh Perez';
-
   return (
-    <div>
-      <Title>Hello, {name}</Title>
-    </div>
+    <>
+    <Router />
+    </>
   );
 };
 
 export default App;
-
-const Title = styled.h1`
-  font-size: 1.5em;
-  color: gray;
-`;

src/components/Footer/Footer.tsx

@@ -0,0 +1,21 @@
+/** @jsxImportSource @emotion/react */
+import styled from '@emotion/styled';
+import React from "react";
+
+const FooterContainer = styled.footer`
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  height: 150px;
+  background-color: #f5f5f5;
+`;
+
+const Footer: React.FC = () => {
+	return (
+	<FooterContainer>
+	  <p css={{marginTop: '30px', marginLeft:'10px'}}>카카오톡 선물하기</p>
+	</FooterContainer>
+  );
+}
+
+export default Footer;

src/components/GoodsCategory/GoodsCategory.tsx

@@ -0,0 +1,52 @@
+import styled from "@emotion/styled";
+import React from "react";
+
+import { Grid } from "@/components/common/layouts/Grid";
+import Item from "@/components/Items/items";
+
+interface ItemType {
+	image: string;
+	label: string;
+	themekey: string;
+	radius?: 'circle' | number;
+  }
+
+  const imageUrls = {
+	  img: 'https://img1.daumcdn.net/thumb/S104x104/?fname=https%3A%2F%2Ft1.daumcdn.net%2Fgift%2Fhome%2Ftheme%2F292020231106_MXMUB.png',
+	  friendImg: 'https://gift-s.kakaocdn.net/dn/gift/images/m640/bg_profile_default.png'
+  };
+
+  const items: ItemType[] = [
+	{ image: imageUrls.img, label: '생일', themekey: 'birthday' },
+	{ image: imageUrls.img, label: '졸업선물', themekey: 'graduation'},
+	{ image: imageUrls.img, label: '명품선물', themekey: 'luxury'},
+	{ image: imageUrls.img, label: '스몰럭셔리', themekey: 'luxury'},
+	{ image: imageUrls.img, label: '결혼/집들이', themekey: 'wedding'},
+	{ image: imageUrls.img, label: '따뜻한선물' , themekey: 'warm'},
+	{ image: imageUrls.img, label: '가벼운선물' , themekey: 'light'},
+	{ image: imageUrls.img, label: '팬심저격', themekey: 'fan'},
+	{ image: imageUrls.img, label: '교환권', themekey: 'exchange'},
+	{ image: imageUrls.img, label: '건강/비타민', themekey: 'health'},
+	{ image: imageUrls.img, label: '과일/한우', themekey: 'fruit'},
+	{ image: imageUrls.img, label: '출산/키즈', themekey: 'kids'},
+  ];
+
+const GridWrapper = styled.div`
+  width: 95%;
+  margin: 0 auto;
+  align-items: center;
+`;
+
+const GoodsCatygory: React.FC = () => {
+	return (
+		<GridWrapper>
+		<Grid columns={4} gap={20}>
+		  {items.map((item, index) => (
+			<Item key={index} image={item.image} label={item.label} radius={item.radius} themekey={item.themekey}/>
+		  ))}
+		</Grid>
+    </GridWrapper>
+	);
+};
+
+export default GoodsCatygory;

src/components/Header/Header.tsx

@@ -0,0 +1,52 @@
+import styled from '@emotion/styled';
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+const HeaderContainer = styled.header`
+  display: flex;
+  justify-content: space-between;
+  padding: 10px 20px;
+  background-color: #fff;
+  border-bottom: 1px solid #ccc;
+`;
+
+const Nav = styled.nav`
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+`;
+
+const NavItem = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+const StyledLink = styled(Link)`
+  text-decoration: none;
+  color: black;
+  font-weight: bold;
+  outline: none;
+`;
+
+interface HeaderProps {
+  isLoggedIn: boolean;
+}
+
+const Header: React.FC<HeaderProps> = ({isLoggedIn}) => {
+  return (
+    <HeaderContainer>
+      <Nav>
+        <NavItem>
+          <StyledLink to="/">선물하기</StyledLink>
+        </NavItem>
+        <NavItem>
+          <StyledLink to={isLoggedIn ? '/my-account' : '/login'}>
+            {isLoggedIn ? '내 계정' : '로그인'}
+          </StyledLink>
+        </NavItem>
+      </Nav>
+    </HeaderContainer>
+  );
+};
+
+export default Header;

src/components/Items/items.tsx

@@ -0,0 +1,47 @@
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react';
+import React from 'react';
+import { Link }	from 'react-router-dom';
+
+import { Image } from '@/components/common/Image/index';
+
+const itemStyle = css`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin: 10px;
+  span {
+    margin-top: 10px;
+    font-size: 14px;
+  }
+`;
+
+const linkStyle = css`
+  outline: none;
+  &:focus,
+  &:active {
+    outline: none;
+  }
+`;
+
+interface ItemProps {
+  image: string;
+  label: string;
+  themekey: string;
+  radius?: 'circle' | number;
+}
+
+const Item: React.FC<ItemProps> = ({ image, label, radius, themekey}) => {
+	radius = 20;
+  return (
+    <div css={itemStyle}>
+	<Link to={`/theme/${themekey}`} css={linkStyle}>
+      <Image src={image} alt={label} radius={radius} ratio="square" css={{ width: 90, height: 90 }}/>
+	  </Link>
+      <span>{label}</span>
+    </div>
+  );
+};
+
+export default Item;
+