강원대 FE_정다연 2주차 STEP1

.prettierignore

@@ -1,3 +1,3 @@
 /.vscode
 /node_modules
-
+README.md

.prettierrc

@@ -1,7 +1,7 @@
 {
   "singleQuote": true,
   "semi": true,
-  "tabWidth": 2,
+  "tabWidth": 4,
   "trailingComma": "all",
   "printWidth": 100,
   "arrowParens": "always"

.vscode/extensions.json

@@ -0,0 +1,5 @@
+{
+    "recommendations": [
+        "esbenp.prettier-vscode"
+    ]
+}

README.md

@@ -1,15 +1,36 @@
 # 카카오 테크 캠퍼스 - 프론트엔드 카카오 선물하기 편
 
-[🔗 link](https://edu.nextstep.camp/s/hazAC9xa)
+## project structure
 
-## Week 1. 1단계 - 프로젝트 세팅
+이 프로젝트는 카카오 테크 캠퍼스의 프론트엔드 카카오 선물하기 편 프로젝트입니다. 다음은 프로젝트의 주요 디렉토리 및 파일 구조에 대한 설명입니다.
 
-[🔗 link](https://edu.nextstep.camp/s/hazAC9xa/ls/QzgHvzRM)
+- `src/`: 소스 코드가 위치하는 디렉토리입니다. 주요 하위 디렉토리 및 파일은 다음과 같습니다.
+  - `components/`: 재사용 가능한 컴포넌트들이 위치하는 디렉토리입니다.
+   	- `common/`: 공통 컴포넌트들이 위치하는 디렉토리입니다.
+   	- `Footer/`, `Header/`: 푸터 및 헤더 컴포넌트가 위치하는 디렉토리입니다.
+  - `pages/`: 각 페이지 컴포넌트들이 위치하는 디렉토리입니다. 로그인, 메인 페이지 등이 포함됩니다.
+  - `styles/`: 전역 스타일 및 CSS 변수가 정의된 파일들이 위치하는 디렉토리입니다.
+  - `App.tsx`, `index.tsx`: 애플리케이션의 진입점 및 루트 컴포넌트 파일입니다.
 
-## Week 1. 2단계 - Storybook을 사용하여 재사용 가능한 컴포넌트 구현
+## page
 
-[🔗 link](https://edu.nextstep.camp/s/hazAC9xa/ls/4wYFPW1K)
+|메인|테마|
+|---|---|
+|![localhost_3000_](https://github.com/dandamdandam/react-gift-ui-flow/assets/102032954/df2712af-c58d-40ff-99d3-c1d036bac3a0)|![localhost_3000_ (1)](https://github.com/dandamdandam/react-gift-ui-flow/assets/102032954/090a2a21-90a4-4101-a52a-a33235de23ed)|
+|로그인|마이페이지|
+|![image](https://github.com/dandamdandam/react-gift-ui-flow/assets/102032954/cfaa18c0-04ba-42b2-a6bd-03c4376c3e0f)|![image](https://github.com/dandamdandam/react-gift-ui-flow/assets/102032954/a6ae9247-29cd-4b5d-9a9b-2e9c6374e72a)|
 
-## Week 2. 1단계 - 페이지 만들기
+## 🎸
 
-[🔗 link](https://edu.nextstep.camp/s/hazAC9xa/ls/QzV1ncxk)
+### 과제 수행 일지
+
+- [프로젝트 세팅 및 react-router-dom 추가](https://www.notion.so/Day-8-17d5af7315af4ad8a9b5dd72da8d52b8?pvs=4#f4809a6fe3bf4546be35fb7c72513dbf)
+- [메인페이지 테마섹션 구현, 실시간 급상승 선물랭킹 구상](https://www.notion.so/Day-9-4ab00c0835fd4171b27ba7e21a3e81d1?pvs=4#ed06422429ae481487a706b9cbbe26b6)
+- [나머지 페이지(theme, 로그인, 마이페이지) 구현](https://www.notion.so/Day-10-f35d03c898934bff9edbf4f150db8104?pvs=4#2be7062e72e543b89d5803e6aa13bb44`)
+
+### 궁금한 점
+
+- 같이 편집되는 빈도 수가 높은 것 끼리 묶으려 하니까 컴포넌트를 page에 두어야 할지 component에 두어야 할지 판단이 잘 서지 않습니다.
+  - 전역적으로 사용되는 component만 component에 넣으면 되는 걸까요?
+  - RankingView같은 경우에는 타입선언 파일마저 한 폴더에 넣었는데, 많이 낮선구조로 보이나요..?
+- 스타일을 지정할 때 flex에 많이 의존하는 편인데, 성능저하가 되거나 코드의 가독성이 떨이지는 등의 문제는 없을까요?

package.json

@@ -22,14 +22,14 @@
     ]
   },
   "dependencies": {
+    "@emotion/css": "^11.11.2",
     "@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.1"
   },
   "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 +65,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,42 @@
-import styled from '@emotion/styled';
+import { createBrowserRouter, RouterProvider } from 'react-router-dom';
 
-const App = () => {
-  const name = 'Josh Perez';
+import Footer from './components/Footer';
+import Error from './pages/Error';
+import Login from './pages/Login';
+import Main from './pages/Main';
+import MyAccount from './pages/MyAccount';
+import Theme from './pages/Theme';
 
-  return (
-    <div>
-      <Title>Hello, {name}</Title>
-    </div>
-  );
+const App = () => {
+    return (
+        <div>
+            <RouterProvider router={router} />
+            <Footer />
+        </div>
+    );
 };
 
-export default App;
+const router = createBrowserRouter([
+    {
+        path: '/',
+        element: <Main />,
+    },
+    {
+        path: '/login',
+        element: <Login />,
+    },
+    {
+        path: '/my-account',
+        element: <MyAccount />,
+    },
+    {
+        path: '/error/:http_status',
+        element: <Error />,
+    },
+    {
+        path: '/theme/:themeKey',
+        element: <Theme />,
+    },
+]);
 
-const Title = styled.h1`
-  font-size: 1.5em;
-  color: gray;
-`;
+export default App;

src/components/Footer/index.tsx

@@ -0,0 +1,18 @@
+import styled from '@emotion/styled';
+
+import { Grid } from '../common/layouts/Grid';
+
+export default () => {
+    return (
+        <Footar>
+            <Grid columns={2}>
+                <div>카카오톡 선물하기</div>
+            </Grid>
+        </Footar>
+    );
+};
+
+const Footar = styled.footer({
+    padding: '28px 16px 88px',
+    backgroundColor: 'rgb(250, 250, 252)',
+});

src/components/Header/index.tsx

@@ -0,0 +1,62 @@
+import { css } from '@emotion/css';
+import styled from '@emotion/styled';
+import { useEffect, useState } from 'react';
+import type { NavigateFunction } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
+
+import { Image } from '../common/Image';
+
+export default () => {
+    const navigate = useNavigate();
+
+    return (
+        <div>
+            <header className={headerStyle}>
+                <FlexContainer>
+                    <Image
+                        alt={'카카오 선물하기 로그인'}
+                        src={'https://gift-s.kakaocdn.net/dn/gift/images/m640/pc_gift_logo.png'}
+                        height={'54px'}
+                        onClick={() => navigate('/')}
+                    />
+                    <UserButton navigate={navigate} />
+                </FlexContainer>
+            </header>
+            <div
+                className={css`
+                    height: 54px;
+                `}
+            ></div>
+        </div>
+    );
+};
+
+const headerStyle = css`
+    position: fixed;
+    width: 100%;
+    background-color: #ffffff;
+`;
+const FlexContainer = styled.div({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    padding: '0px 20px',
+});
+
+const UserButton = ({ navigate }: { navigate: NavigateFunction }) => {
+    const [isLogined, setIsLogined] = useState<boolean>(false);
+    useEffect(() => {
+        setIsLogined(sessionStorage.getItem('user') ? true : false);
+    }, []);
+
+    return (
+        // TODO 마이페이지 또는 로그인페이지로
+        <div>
+            {isLogined ? (
+                <button onClick={() => navigate('/my-account')}>내 계정</button>
+            ) : (
+                <button onClick={() => navigate('/login')}>로그인</button>
+            )}
+        </div>
+    );
+};

src/components/common/Button/index.stories.tsx

@@ -4,37 +4,38 @@ import { Button } from './index';
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
 const meta = {
-  title: 'Common/Button',
-  tags: ['autodocs'],
-  args: {
-    children: '버튼',
-    theme: 'kakao',
-    size: 'responsive',
-    onClick: () => {
-      alert('버튼 클릭');
+    title: 'Common/Button',
+    component: Button,
+    tags: ['autodocs'],
+    args: {
+        children: '버튼',
+        theme: 'kakao',
+        size: 'responsive',
+        onClick: () => {
+            alert('버튼 클릭');
+        },
     },
-  },
-  argTypes: {
-    // theme: {
-    //   control: {
-    //     type: 'radio',
-    //     options: ['kakao', 'outline', 'black', 'lightGray', 'darkGray'],
-    //     default: 'kakao',
-    //   },
-    // },
-    // size: {
-    //   control: {
-    //     type: 'radio',
-    //     options: ['large', 'small', 'responsive'],
-    //     default: 'responsive',
-    //   },
-    // },
-  },
-  render: (props) => (
-    <div style={{ width: '120px' }}>
-      <Button {...props} />
-    </div>
-  ),
+    argTypes: {
+        // theme: {
+        //   control: {
+        //     type: 'radio',
+        //     options: ['kakao', 'outline', 'black', 'lightGray', 'darkGray'],
+        //     default: 'kakao',
+        //   },
+        // },
+        // size: {
+        //   control: {
+        //     type: 'radio',
+        //     options: ['large', 'small', 'responsive'],
+        //     default: 'responsive',
+        //   },
+        // },
+    },
+    render: (props) => (
+        <div style={{ width: '120px' }}>
+            <Button {...props} />
+        </div>
+    ),
 } satisfies Meta<typeof Button>;
 
 export default meta;