From be753d49d08cf4f12d6af5733ab0afafa4b275e0 Mon Sep 17 00:00:00 2001 From: loveydev Date: Wed, 3 Jul 2024 15:30:14 +0900 Subject: [PATCH 01/33] Docs: Add README.md --- README.md | 29 +++++++++++++++++++++-------- 1 file changed, 21 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index 9fa347d00..c5edcdf05 100644 --- a/README.md +++ b/README.md @@ -1,15 +1,28 @@ -# 카카오 테크 캠퍼스 - 프론트엔드 카카오 선물하기 편 +

카카오 테크 캠퍼스 - 프론트엔드 카카오 선물하기 편

-[🔗 link](https://edu.nextstep.camp/s/hazAC9xa) +

2주차 체크 리스트

-## Week 1. 1단계 - 프로젝트 세팅 +- [ ] Header, Footer 와 같은 공통 컴포넌트 작성 -[🔗 link](https://edu.nextstep.camp/s/hazAC9xa/ls/QzgHvzRM) +- [ ] 각 Url Path 별로 페이지 만들기 -## Week 1. 2단계 - Storybook을 사용하여 재사용 가능한 컴포넌트 구현 + - Main page (`/`) -[🔗 link](https://edu.nextstep.camp/s/hazAC9xa/ls/4wYFPW1K) + - [ ] Theme 카테고리 섹션 추가 -## Week 2. 1단계 - 페이지 만들기 + - [ ] Theme 카테고리 Item 클릭 시 Theme page(`/theme/:themekey`) 로 이동 + + - Theme page (`/theme/:themekey`) + + - [ ] 재사용성을 고려하여 Header 섹션 추가 (themeKey에 따라 label, title, description, backgroundColor가 달라짐) + + - [ ] 상품 목록 섹션 추가 + + - Login page (`/login`) + + - [ ] ID와 PW를 입력하면 로그인이 되도록 구현 + + - My page (`/my-account`) + + - [ ] 로그아웃이 가능한 버튼 추가 -[🔗 link](https://edu.nextstep.camp/s/hazAC9xa/ls/QzV1ncxk) From 19420e1597ddc1ce8b04e0a9a2f08a3165878984 Mon Sep 17 00:00:00 2001 From: loveydev Date: Wed, 3 Jul 2024 15:32:31 +0900 Subject: [PATCH 02/33] Docs: modify README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index c5edcdf05..2f6196f11 100644 --- a/README.md +++ b/README.md @@ -14,7 +14,7 @@ - Theme page (`/theme/:themekey`) - - [ ] 재사용성을 고려하여 Header 섹션 추가 (themeKey에 따라 label, title, description, backgroundColor가 달라짐) + - [ ] 재사용성을 고려하여 Header 섹션 추가 - [ ] 상품 목록 섹션 추가 From dc14d2f98b4739d2a1b71dff96dfef4bc1cced47 Mon Sep 17 00:00:00 2001 From: loveydev Date: Wed, 3 Jul 2024 15:49:13 +0900 Subject: [PATCH 03/33] Refactor: rename files from index.tsx to component_name.tsx --- .vscode/settings.json | 5 +++++ .../common/Button/{index.stories.tsx => Button.stories.tsx} | 2 +- src/components/common/Button/{index.tsx => Button.tsx} | 0 src/components/common/GoodsItem/Default.tsx | 2 +- .../common/Image/{index.stories.tsx => Image.stories.tsx} | 3 ++- src/components/common/Image/{index.tsx => Image.tsx} | 0 .../Container/{index.stories.tsx => Container.stories.tsx} | 2 +- .../common/layouts/Container/{index.tsx => Container.tsx} | 0 .../layouts/Grid/{index.stories.tsx => Grid.stories.tsx} | 2 +- src/components/common/layouts/Grid/{index.tsx => Grid.tsx} | 0 10 files changed, 11 insertions(+), 5 deletions(-) create mode 100644 .vscode/settings.json rename src/components/common/Button/{index.stories.tsx => Button.stories.tsx} (96%) rename src/components/common/Button/{index.tsx => Button.tsx} (100%) rename src/components/common/Image/{index.stories.tsx => Image.stories.tsx} (94%) rename src/components/common/Image/{index.tsx => Image.tsx} (100%) rename src/components/common/layouts/Container/{index.stories.tsx => Container.stories.tsx} (96%) rename src/components/common/layouts/Container/{index.tsx => Container.tsx} (100%) rename src/components/common/layouts/Grid/{index.stories.tsx => Grid.stories.tsx} (97%) rename src/components/common/layouts/Grid/{index.tsx => Grid.tsx} (100%) diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 000000000..1f498fc26 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,5 @@ +{ + "cSpell.words": [ + "themekey" + ] +} \ No newline at end of file diff --git a/src/components/common/Button/index.stories.tsx b/src/components/common/Button/Button.stories.tsx similarity index 96% rename from src/components/common/Button/index.stories.tsx rename to src/components/common/Button/Button.stories.tsx index 55effd350..2642cac11 100644 --- a/src/components/common/Button/index.stories.tsx +++ b/src/components/common/Button/Button.stories.tsx @@ -1,6 +1,6 @@ import type { Meta, StoryObj } from '@storybook/react'; -import { Button } from './index'; +import { Button } from './Button'; // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export const meta = { diff --git a/src/components/common/Button/index.tsx b/src/components/common/Button/Button.tsx similarity index 100% rename from src/components/common/Button/index.tsx rename to src/components/common/Button/Button.tsx diff --git a/src/components/common/GoodsItem/Default.tsx b/src/components/common/GoodsItem/Default.tsx index 99e3753e1..8aceccebe 100644 --- a/src/components/common/GoodsItem/Default.tsx +++ b/src/components/common/GoodsItem/Default.tsx @@ -1,6 +1,6 @@ import styled from '@emotion/styled'; -import { Image } from '@/components/common/Image'; +import { Image } from '@/components/common/Image/Image'; export type DefaultGoodsItemsProps = { imageSrc: string; diff --git a/src/components/common/Image/index.stories.tsx b/src/components/common/Image/Image.stories.tsx similarity index 94% rename from src/components/common/Image/index.stories.tsx rename to src/components/common/Image/Image.stories.tsx index 7f9cb91ca..e42c70cf5 100644 --- a/src/components/common/Image/index.stories.tsx +++ b/src/components/common/Image/Image.stories.tsx @@ -1,6 +1,6 @@ import type { Meta, StoryObj } from '@storybook/react'; -import { Image } from '.'; +import { Image } from './Image'; // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export const meta = { @@ -8,6 +8,7 @@ const meta = { component: Image, tags: ['autodocs'], args: { + src: 'https://t1.kakaocdn.net/friends/www/talk/kakaofriends_talk_2018.png', }, } satisfies Meta; diff --git a/src/components/common/Image/index.tsx b/src/components/common/Image/Image.tsx similarity index 100% rename from src/components/common/Image/index.tsx rename to src/components/common/Image/Image.tsx diff --git a/src/components/common/layouts/Container/index.stories.tsx b/src/components/common/layouts/Container/Container.stories.tsx similarity index 96% rename from src/components/common/layouts/Container/index.stories.tsx rename to src/components/common/layouts/Container/Container.stories.tsx index 045058259..be653a0e2 100644 --- a/src/components/common/layouts/Container/index.stories.tsx +++ b/src/components/common/layouts/Container/Container.stories.tsx @@ -1,6 +1,6 @@ import type { Meta, StoryObj } from '@storybook/react'; -import { Container } from '.'; +import { Container } from './Container'; // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export const meta = { diff --git a/src/components/common/layouts/Container/index.tsx b/src/components/common/layouts/Container/Container.tsx similarity index 100% rename from src/components/common/layouts/Container/index.tsx rename to src/components/common/layouts/Container/Container.tsx diff --git a/src/components/common/layouts/Grid/index.stories.tsx b/src/components/common/layouts/Grid/Grid.stories.tsx similarity index 97% rename from src/components/common/layouts/Grid/index.stories.tsx rename to src/components/common/layouts/Grid/Grid.stories.tsx index e70475416..4e37fbca8 100644 --- a/src/components/common/layouts/Grid/index.stories.tsx +++ b/src/components/common/layouts/Grid/Grid.stories.tsx @@ -1,6 +1,6 @@ import type { Meta, StoryObj } from '@storybook/react'; -import { Grid } from '.'; +import { Grid } from './Grid'; const ChildComponent = () => ( <> diff --git a/src/components/common/layouts/Grid/index.tsx b/src/components/common/layouts/Grid/Grid.tsx similarity index 100% rename from src/components/common/layouts/Grid/index.tsx rename to src/components/common/layouts/Grid/Grid.tsx From f8955bb05caaf5da314c018f6e9b351bf4ee3bd7 Mon Sep 17 00:00:00 2001 From: loveydev Date: Thu, 4 Jul 2024 12:16:52 +0900 Subject: [PATCH 04/33] Feat: add 'lint' command to package.json --- package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package.json b/package.json index 8a3e091c7..e398932a6 100644 --- a/package.json +++ b/package.json @@ -6,6 +6,7 @@ "start": "craco start", "build": "craco build", "test": "craco test", + "lint": "eslint --fix src/", "storybook": "storybook dev -p 6006", "build-storybook": "storybook build" }, From 77c1780ef4366583aca42ae3db236c56b0bd6b23 Mon Sep 17 00:00:00 2001 From: loveydev Date: Thu, 4 Jul 2024 12:18:08 +0900 Subject: [PATCH 05/33] Feat: add Header & Footer components --- src/App.tsx | 28 ++++++--- .../common/layouts/Footer/Footer.tsx | 50 +++++++++++++++ .../common/layouts/Header/Header.tsx | 62 +++++++++++++++++++ 3 files changed, 130 insertions(+), 10 deletions(-) create mode 100644 src/components/common/layouts/Footer/Footer.tsx create mode 100644 src/components/common/layouts/Header/Header.tsx diff --git a/src/App.tsx b/src/App.tsx index 1df5ce256..46dca8ec7 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,18 +1,26 @@ import styled from '@emotion/styled'; -const App = () => { - const name = 'Josh Perez'; +import Footer from '@/components/common/Layouts/Footer/Footer'; +import Header from '@/components/common/Layouts/Header/Header'; + +const AppWrapper = styled.div` + display: flex; + flex-direction: column; + min-height: 100vh; +`; + +const MainContent = styled.div` + flex: 1; +`; +const App = () => { return ( -
- Hello, {name} -
+ +
+ +