From bdbb441a3de43f6b561907e7f54fb13ad4cac40c Mon Sep 17 00:00:00 2001
From: afds4567 <33995840+afds4567@users.noreply.github.com>
Date: Sun, 30 Jul 2023 21:36:32 +0900
Subject: [PATCH 01/22] =?UTF-8?q?fix:=20lint=20=EC=84=A4=EC=A0=95=20?=
=?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.eslintrc.cjs | 29 +++++++++++++++--------------
1 file changed, 15 insertions(+), 14 deletions(-)
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index 926756e..99df7f1 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -4,23 +4,24 @@ module.exports = {
es2021: true,
},
extends: [
- "standard-with-typescript",
- "plugin:react/recommended",
- "prettier",
- "plugin:prettier/recommended",
- "plugin:storybook/recommended",
+ 'standard-with-typescript',
+ 'plugin:react/recommended',
+ 'prettier',
+ 'plugin:prettier/recommended',
+ 'plugin:storybook/recommended',
+ 'eslint-config-prettier',
],
parserOptions: {
- ecmaVersion: "latest",
- sourceType: "module",
- project: "./tsconfig.json",
+ ecmaVersion: 'latest',
+ sourceType: 'module',
+ project: './tsconfig.json',
},
- plugins: ["react", "@typescript-eslint"],
+ plugins: ['react', '@typescript-eslint'],
rules: {
- "react/react-in-jsx-scope": "off",
- "@typescript-eslint/explicit-function-return-type": "off",
- "@typescript-eslint/triple-slash-reference": "off",
- "@typescript-eslint/no-non-null-assertion": "off",
+ 'react/react-in-jsx-scope': 'off',
+ '@typescript-eslint/explicit-function-return-type': 'off',
+ '@typescript-eslint/triple-slash-reference': 'off',
+ '@typescript-eslint/no-non-null-assertion': 'off',
},
- ignorePatterns: [".eslintrc.cjs", "vite.config.ts"],
+ ignorePatterns: ['.eslintrc.cjs', 'vite.config.ts'],
};
From 6be2277b3321fb9a7a1dbcc29390ae395410d8fa Mon Sep 17 00:00:00 2001
From: afds4567 <33995840+afds4567@users.noreply.github.com>
Date: Sat, 5 Aug 2023 14:24:49 +0900
Subject: [PATCH 02/22] =?UTF-8?q?feat:=20=EC=B6=94=EC=96=B5=EC=9D=98=20?=
=?UTF-8?q?=EC=A1=B0=EA=B0=81=20=EC=96=91=EC=8B=9D=EC=9D=84=20=EB=A7=8C?=
=?UTF-8?q?=EB=93=A0=EB=8B=A4.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.eslintrc.cjs | 2 +-
src/App.tsx | 413 ++++++++++++++++++++++++++++++++++++-
src/component/Click.css.ts | 72 +++++++
src/component/Click.tsx | 106 ++++++++++
src/index.css | 2 +-
tsconfig.json | 2 +-
tsconfig.node.json | 3 +-
7 files changed, 594 insertions(+), 6 deletions(-)
create mode 100644 src/component/Click.css.ts
create mode 100644 src/component/Click.tsx
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index 99df7f1..870bd85 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -14,7 +14,7 @@ module.exports = {
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module',
- project: './tsconfig.json',
+ //project: './tsconfig.json',
},
plugins: ['react', '@typescript-eslint'],
rules: {
diff --git a/src/App.tsx b/src/App.tsx
index 2a73e54..fc386d1 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,7 +1,416 @@
import './App.css';
+import Click from './component/Click';
+
+// App.tsx or App.js
function App() {
- return hello, world! ;
-}
+ const handleClick = () => {
+ console.log("CLICK")
+ window.location.href = 'https://www.google.com';
+ };
+ return (
+
+
+
+ 2022.11.23
+ 버튼
+
+ 강원도에서의 겨울
+
+ 국경의 긴 터널을 빠져나오자, 설국이었다.
+ 밤의 아랫쪽이 하얘졌다. 신호소에 기차가 멈춰 섰다.
+ 건너편 좌석의 여자가 일어서 다가오더니, 시마무라 앞의 유리창을 열어젖혔다.
+ 눈의 냉기가 흘러들었다.
+ 여자는 한껏 창 밖으로 몸을 내밀어 멀리 외치는 듯이,
+ "역장니임, 역장니임ー"
+ 등불을 들고 천천히 눈을 밟고 온 남자는 목도리를 콧등까지 두르고, 귀에 모자의 모피를 드리우고 있었다.
+
+
+
+
+
+ 2023.07.23
+ 버튼
+
+ 강원도에서의 여름
+
+ 국경의 긴 터널을 빠져나오자, 설국이었다.
+ 밤의 아랫쪽이 하얘졌다. 신호소에 기차가 멈춰 섰다.
+ 건너편 좌석의 여자가 일어서 다가오더니, 시마무라 앞의 유리창을 열어젖혔다.
+ 눈의 냉기가 흘러들었다.
+ 여자는 한껏 창 밖으로 몸을 내밀어 멀리 외치는 듯이,
+ "역장니임, 역장니임ー"
+ 등불을 들고 천천히 눈을 밟고 온 남자는 목도리를 콧등까지 두르고, 귀에 모자의 모피를 드리우고 있었다.
+
+
+
+
+
+ 2023.07.23
+ 버튼
+
+ 강원도에서의 여름
+
+ 국경의 긴 터널을 빠져나오자, 설국이었다.
+ 밤의 아랫쪽이 하얘졌다. 신호소에 기차가 멈춰 섰다.
+ 건너편 좌석의 여자가 일어서 다가오더니, 시마무라 앞의 유리창을 열어젖혔다.
+ 눈의 냉기가 흘러들었다.
+ 여자는 한껏 창 밖으로 몸을 내밀어 멀리 외치는 듯이,
+ "역장니임, 역장니임ー"
+ 등불을 들고 천천히 눈을 밟고 온 남자는 목도리를 콧등까지 두르고, 귀에 모자의 모피를 드리우고 있었다.
+
+
+
+
+
+ 2023.07.23
+ 버튼
+
+ 강원도에서의 여름
+
+ 국경의 긴 터널을 빠져나오자, 설국이었다.
+ 밤의 아랫쪽이 하얘졌다. 신호소에 기차가 멈춰 섰다.
+ 건너편 좌석의 여자가 일어서 다가오더니, 시마무라 앞의 유리창을 열어젖혔다.
+ 눈의 냉기가 흘러들었다.
+ 여자는 한껏 창 밖으로 몸을 내밀어 멀리 외치는 듯이,
+ "역장니임, 역장니임ー"
+ 등불을 들고 천천히 눈을 밟고 온 남자는 목도리를 콧등까지 두르고, 귀에 모자의 모피를 드리우고 있었다.
+
+
+
+
+
+ 2023.07.23
+ 버튼
+
+ 강원도에서의 여름
+
+ 국경의 긴 터널을 빠져나오자, 설국이었다.
+ 밤의 아랫쪽이 하얘졌다. 신호소에 기차가 멈춰 섰다.
+ 건너편 좌석의 여자가 일어서 다가오더니, 시마무라 앞의 유리창을 열어젖혔다.
+ 눈의 냉기가 흘러들었다.
+ 여자는 한껏 창 밖으로 몸을 내밀어 멀리 외치는 듯이,
+ "역장니임, 역장니임ー"
+ 등불을 들고 천천히 눈을 밟고 온 남자는 목도리를 콧등까지 두르고, 귀에 모자의 모피를 드리우고 있었다.
+
+
+
+
+ 2023.07.23
+ 버튼
+
+ 강원도에서의 여름
+
+ 국경의 긴 터널을 빠져나오자, 설국이었다.
+ 밤의 아랫쪽이 하얘졌다. 신호소에 기차가 멈춰 섰다.
+ 건너편 좌석의 여자가 일어서 다가오더니, 시마무라 앞의 유리창을 열어젖혔다.
+ 눈의 냉기가 흘러들었다.
+ 여자는 한껏 창 밖으로 몸을 내밀어 멀리 외치는 듯이,
+ "역장니임, 역장니임ー"
+ 등불을 들고 천천히 눈을 밟고 온 남자는 목도리를 콧등까지 두르고, 귀에 모자의 모피를 드리우고 있었다.
+
+
+
+
+
+ 2023.07.23
+ 버튼
+
+ 강원도에서의 여름
+
+ 국경의 긴 터널을 빠져나오자, 설국이었다.
+ 밤의 아랫쪽이 하얘졌다. 신호소에 기차가 멈춰 섰다.
+ 건너편 좌석의 여자가 일어서 다가오더니, 시마무라 앞의 유리창을 열어젖혔다.
+ 눈의 냉기가 흘러들었다.
+ 여자는 한껏 창 밖으로 몸을 내밀어 멀리 외치는 듯이,
+ "역장니임, 역장니임ー"
+ 등불을 들고 천천히 눈을 밟고 온 남자는 목도리를 콧등까지 두르고, 귀에 모자의 모피를 드리우고 있었다.
+
+
+
+
+
+ 2023.07.23
+ 버튼
+
+ 강원도에서의 여름
+
+ 국경의 긴 터널을 빠져나오자, 설국이었다.
+ 밤의 아랫쪽이 하얘졌다. 신호소에 기차가 멈춰 섰다.
+ 건너편 좌석의 여자가 일어서 다가오더니, 시마무라 앞의 유리창을 열어젖혔다.
+ 눈의 냉기가 흘러들었다.
+ 여자는 한껏 창 밖으로 몸을 내밀어 멀리 외치는 듯이,
+ "역장니임, 역장니임ー"
+ 등불을 들고 천천히 눈을 밟고 온 남자는 목도리를 콧등까지 두르고, 귀에 모자의 모피를 드리우고 있었다.
+
+
+
+
+ 2023.07.23
+ 버튼
+
+ 강원도에서의 여름
+
+ 국경의 긴 터널을 빠져나오자, 설국이었다.
+ 밤의 아랫쪽이 하얘졌다. 신호소에 기차가 멈춰 섰다.
+ 건너편 좌석의 여자가 일어서 다가오더니, 시마무라 앞의 유리창을 열어젖혔다.
+ 눈의 냉기가 흘러들었다.
+ 여자는 한껏 창 밖으로 몸을 내밀어 멀리 외치는 듯이,
+ "역장니임, 역장니임ー"
+ 등불을 들고 천천히 눈을 밟고 온 남자는 목도리를 콧등까지 두르고, 귀에 모자의 모피를 드리우고 있었다.
+
+
+
+
+ 2023.07.23
+ 버튼
+
+ 강원도에서의 여름
+
+ 국경의 긴 터널을 빠져나오자, 설국이었다.
+ 밤의 아랫쪽이 하얘졌다. 신호소에 기차가 멈춰 섰다.
+ 건너편 좌석의 여자가 일어서 다가오더니, 시마무라 앞의 유리창을 열어젖혔다.
+ 눈의 냉기가 흘러들었다.
+ 여자는 한껏 창 밖으로 몸을 내밀어 멀리 외치는 듯이,
+ "역장니임, 역장니임ー"
+ 등불을 들고 천천히 눈을 밟고 온 남자는 목도리를 콧등까지 두르고, 귀에 모자의 모피를 드리우고 있었다.
+
+
+
+
+ 2023.07.23
+ 버튼
+
+ 강원도에서의 여름
+
+ 국경의 긴 터널을 빠져나오자, 설국이었다.
+ 밤의 아랫쪽이 하얘졌다. 신호소에 기차가 멈춰 섰다.
+ 건너편 좌석의 여자가 일어서 다가오더니, 시마무라 앞의 유리창을 열어젖혔다.
+ 눈의 냉기가 흘러들었다.
+ 여자는 한껏 창 밖으로 몸을 내밀어 멀리 외치는 듯이,
+ "역장니임, 역장니임ー"
+ 등불을 들고 천천히 눈을 밟고 온 남자는 목도리를 콧등까지 두르고, 귀에 모자의 모피를 드리우고 있었다.
+
+
+
+
+ 2023.07.23
+ 버튼
+
+ 강원도에서의 여름
+
+ 국경의 긴 터널을 빠져나오자, 설국이었다.
+ 밤의 아랫쪽이 하얘졌다. 신호소에 기차가 멈춰 섰다.
+ 건너편 좌석의 여자가 일어서 다가오더니, 시마무라 앞의 유리창을 열어젖혔다.
+ 눈의 냉기가 흘러들었다.
+ 여자는 한껏 창 밖으로 몸을 내밀어 멀리 외치는 듯이,
+ "역장니임, 역장니임ー"
+ 등불을 들고 천천히 눈을 밟고 온 남자는 목도리를 콧등까지 두르고, 귀에 모자의 모피를 드리우고 있었다.
+
+
+
+
+ 2023.07.23
+ 버튼
+
+ 강원도에서의 여름
+
+ 국경의 긴 터널을 빠져나오자, 설국이었다.
+ 밤의 아랫쪽이 하얘졌다. 신호소에 기차가 멈춰 섰다.
+ 건너편 좌석의 여자가 일어서 다가오더니, 시마무라 앞의 유리창을 열어젖혔다.
+ 눈의 냉기가 흘러들었다.
+ 여자는 한껏 창 밖으로 몸을 내밀어 멀리 외치는 듯이,
+ "역장니임, 역장니임ー"
+ 등불을 들고 천천히 눈을 밟고 온 남자는 목도리를 콧등까지 두르고, 귀에 모자의 모피를 드리우고 있었다.
+
+
+
+
+
+ 2023.07.23
+ 버튼
+
+ 강원도에서의 여름
+
+ 국경의 긴 터널을 빠져나오자, 설국이었다.
+ 밤의 아랫쪽이 하얘졌다. 신호소에 기차가 멈춰 섰다.
+ 건너편 좌석의 여자가 일어서 다가오더니, 시마무라 앞의 유리창을 열어젖혔다.
+ 눈의 냉기가 흘러들었다.
+ 여자는 한껏 창 밖으로 몸을 내밀어 멀리 외치는 듯이,
+ "역장니임, 역장니임ー"
+ 등불을 들고 천천히 눈을 밟고 온 남자는 목도리를 콧등까지 두르고, 귀에 모자의 모피를 드리우고 있었다.
+
+
+
+
+ 2023.07.23
+ 버튼
+
+ 강원도에서의 여름
+
+ 국경의 긴 터널을 빠져나오자, 설국이었다.
+ 밤의 아랫쪽이 하얘졌다. 신호소에 기차가 멈춰 섰다.
+ 건너편 좌석의 여자가 일어서 다가오더니, 시마무라 앞의 유리창을 열어젖혔다.
+ 눈의 냉기가 흘러들었다.
+ 여자는 한껏 창 밖으로 몸을 내밀어 멀리 외치는 듯이,
+ "역장니임, 역장니임ー"
+ 등불을 들고 천천히 눈을 밟고 온 남자는 목도리를 콧등까지 두르고, 귀에 모자의 모피를 드리우고 있었다.
+
+
+
+
+ 2023.07.23
+ 버튼
+
+ 강원도에서의 여름
+
+ 국경의 긴 터널을 빠져나오자, 설국이었다.
+ 밤의 아랫쪽이 하얘졌다. 신호소에 기차가 멈춰 섰다.
+ 건너편 좌석의 여자가 일어서 다가오더니, 시마무라 앞의 유리창을 열어젖혔다.
+ 눈의 냉기가 흘러들었다.
+ 여자는 한껏 창 밖으로 몸을 내밀어 멀리 외치는 듯이,
+ "역장니임, 역장니임ー"
+ 등불을 들고 천천히 눈을 밟고 온 남자는 목도리를 콧등까지 두르고, 귀에 모자의 모피를 드리우고 있었다.
+
+
+
+
+ 2023.07.23
+ 버튼
+
+ 강원도에서의 여름
+
+ 국경의 긴 터널을 빠져나오자, 설국이었다.
+ 밤의 아랫쪽이 하얘졌다. 신호소에 기차가 멈춰 섰다.
+ 건너편 좌석의 여자가 일어서 다가오더니, 시마무라 앞의 유리창을 열어젖혔다.
+ 눈의 냉기가 흘러들었다.
+ 여자는 한껏 창 밖으로 몸을 내밀어 멀리 외치는 듯이,
+ "역장니임, 역장니임ー"
+ 등불을 들고 천천히 눈을 밟고 온 남자는 목도리를 콧등까지 두르고, 귀에 모자의 모피를 드리우고 있었다.
+
+
+
+
+ 2023.07.23
+ 버튼
+
+ 강원도에서의 여름
+
+ 국경의 긴 터널을 빠져나오자, 설국이었다.
+ 밤의 아랫쪽이 하얘졌다. 신호소에 기차가 멈춰 섰다.
+ 건너편 좌석의 여자가 일어서 다가오더니, 시마무라 앞의 유리창을 열어젖혔다.
+ 눈의 냉기가 흘러들었다.
+ 여자는 한껏 창 밖으로 몸을 내밀어 멀리 외치는 듯이,
+ "역장니임, 역장니임ー"
+ 등불을 들고 천천히 눈을 밟고 온 남자는 목도리를 콧등까지 두르고, 귀에 모자의 모피를 드리우고 있었다.
+
+
+
+
+ 2023.07.23
+ 버튼
+
+ 강원도에서의 여름
+
+ 국경의 긴 터널을 빠져나오자, 설국이었다.
+ 밤의 아랫쪽이 하얘졌다. 신호소에 기차가 멈춰 섰다.
+ 건너편 좌석의 여자가 일어서 다가오더니, 시마무라 앞의 유리창을 열어젖혔다.
+ 눈의 냉기가 흘러들었다.
+ 여자는 한껏 창 밖으로 몸을 내밀어 멀리 외치는 듯이,
+ "역장니임, 역장니임ー"
+ 등불을 들고 천천히 눈을 밟고 온 남자는 목도리를 콧등까지 두르고, 귀에 모자의 모피를 드리우고 있었다.
+
+
+
+
+ 2023.07.23
+ 버튼
+
+ 강원도에서의 여름
+
+ 국경의 긴 터널을 빠져나오자, 설국이었다.
+ 밤의 아랫쪽이 하얘졌다. 신호소에 기차가 멈춰 섰다.
+ 건너편 좌석의 여자가 일어서 다가오더니, 시마무라 앞의 유리창을 열어젖혔다.
+ 눈의 냉기가 흘러들었다.
+ 여자는 한껏 창 밖으로 몸을 내밀어 멀리 외치는 듯이,
+ "역장니임, 역장니임ー"
+ 등불을 들고 천천히 눈을 밟고 온 남자는 목도리를 콧등까지 두르고, 귀에 모자의 모피를 드리우고 있었다.
+
+
+
+
+ 2023.07.23
+ 버튼
+
+ 강원도에서의 여름
+
+ 국경의 긴 터널을 빠져나오자, 설국이었다.
+ 밤의 아랫쪽이 하얘졌다. 신호소에 기차가 멈춰 섰다.
+ 건너편 좌석의 여자가 일어서 다가오더니, 시마무라 앞의 유리창을 열어젖혔다.
+ 눈의 냉기가 흘러들었다.
+ 여자는 한껏 창 밖으로 몸을 내밀어 멀리 외치는 듯이,
+ "역장니임, 역장니임ー"
+ 등불을 들고 천천히 눈을 밟고 온 남자는 목도리를 콧등까지 두르고, 귀에 모자의 모피를 드리우고 있었다.
+
+
+
+
+ 2023.07.23
+ 버튼
+
+ 강원도에서의 여름
+
+ 국경의 긴 터널을 빠져나오자, 설국이었다.
+ 밤의 아랫쪽이 하얘졌다. 신호소에 기차가 멈춰 섰다.
+ 건너편 좌석의 여자가 일어서 다가오더니, 시마무라 앞의 유리창을 열어젖혔다.
+ 눈의 냉기가 흘러들었다.
+ 여자는 한껏 창 밖으로 몸을 내밀어 멀리 외치는 듯이,
+ "역장니임, 역장니임ー"
+ 등불을 들고 천천히 눈을 밟고 온 남자는 목도리를 콧등까지 두르고, 귀에 모자의 모피를 드리우고 있었다.
+
+
+
+
+ 2023.07.23
+ 버튼
+
+ 강원도에서의 여름
+
+ 국경의 긴 터널을 빠져나오자, 설국이었다.
+ 밤의 아랫쪽이 하얘졌다. 신호소에 기차가 멈춰 섰다.
+ 건너편 좌석의 여자가 일어서 다가오더니, 시마무라 앞의 유리창을 열어젖혔다.
+ 눈의 냉기가 흘러들었다.
+ 여자는 한껏 창 밖으로 몸을 내밀어 멀리 외치는 듯이,
+ "역장니임, 역장니임ー"
+ 등불을 들고 천천히 눈을 밟고 온 남자는 목도리를 콧등까지 두르고, 귀에 모자의 모피를 드리우고 있었다.
+
+
+
+
({});
+
+function useClickContext(): ClickContextProps {
+ const context = useContext(ClickContext);
+
+ if (!context.onClick) {
+ throw new Error(
+ 'Child components of Click cannot be rendered outside the Click component!'
+ );
+ }
+
+ return context;
+}
+
+interface ChildrenProps {
+ children: ReactNode;
+}
+
+interface ClickProps extends ChildrenProps {
+ onClick?: () => void;
+}
+
+const Click = ({ children, onClick }: ClickProps) => {
+ return (
+
+
+ {children}
+
+
+ );
+};
+
+interface DateProps extends ChildrenProps {}
+
+const Date = ({ children }: DateProps) => {
+ return {children} ;
+};
+
+Click.Date = Date;
+
+interface HeadingProps extends ChildrenProps {}
+
+const Heading = ({ children }: HeadingProps) => {
+ return {children} ;
+};
+
+Click.Heading = Heading;
+
+interface DescriptionProps extends ChildrenProps {}
+
+const Description = ({ children }: DescriptionProps) => {
+ return {children}
;
+};
+
+Click.Description = Description;
+
+interface ButtonProps extends ChildrenProps {}
+
+const Button = ({ children }: ButtonProps) => {
+ const { onClick } = useClickContext();
+
+ return (
+
+ {children}
+
+ );
+};
+
+Click.Button = Button;
+
+interface ImageProps {
+ src: string;
+ alt: string;
+ type?: string;
+}
+
+const Image = ({ src, alt, type }: ImageProps) => {
+ useClickContext();
+
+ return (
+
+
+ ),
+ },
+]);
+
ReactDOM.createRoot(document.getElementById('root')!).render(
-
);
diff --git a/src/pages/Kaleidoscope.tsx b/src/pages/Kaleidoscope.tsx
new file mode 100644
index 0000000..b08403d
--- /dev/null
+++ b/src/pages/Kaleidoscope.tsx
@@ -0,0 +1,7 @@
+const Kaleidoscope = () => {
+ return (
+ kaleidoscope
+ )
+}
+
+export default Kaleidoscope
\ No newline at end of file
diff --git a/src/pages/Layout.css.ts b/src/pages/Layout.css.ts
new file mode 100644
index 0000000..0daf9aa
--- /dev/null
+++ b/src/pages/Layout.css.ts
@@ -0,0 +1,15 @@
+import { style } from "@vanilla-extract/css";
+
+export const navBar = style({
+ position: 'fixed',
+ bottom: 0,
+ left: 0,
+ width: '100%',
+ height: '56px',
+ backgroundColor: 'lightblue',
+ display: 'flex',
+ justifyContent: 'space-around',
+ alignItems: 'center',
+ padding: '10px',
+ zIndex: 100,
+});
\ No newline at end of file
diff --git a/src/pages/Layout.tsx b/src/pages/Layout.tsx
new file mode 100644
index 0000000..13b4cb1
--- /dev/null
+++ b/src/pages/Layout.tsx
@@ -0,0 +1,14 @@
+import { navBar } from "./Layout.css";
+
+const Layout = ({ children }) => {
+ return (
+
+
+ 1,2,3,4
+
+ {children}
+
(null);
+
+interface SelectProps {
+ children: ReactNode;
+ defaultOption: string;
+ className?: string;
+}
+
+const Select = ({ children, defaultOption, className }: SelectProps) => {
+ const [selected, setSelected] = useState(defaultOption);
+
+ const contextValue: SelectContextProps = {
+ selected,
+ setSelected,
+ };
+
+ return (
+
+
+
+ );
+};
+
+interface OptionProps {
+ value: string;
+ children: ReactNode;
+ className?: { selectedTagStyle: string; tagStyle: string };
+}
+
+const Option = ({ value, children, className }: OptionProps) => {
+ const context = useContext(SelectContext);
+ if (context === undefined) {
+ throw new Error('은 Select 아래에서만 사용 가능!!');
+ }
+
+ const { selected, setSelected } = context;
+ const { selectedTagStyle, tagStyle } = className;
+
+ const isSelected = selected === value;
+ const optionClassName = `${isSelected ? selectedTagStyle : tagStyle}`;
+
+ return (
+ setSelected(value)} className={`${optionClassName}`}>
+ {children}
+
+ );
+};
+
+Select.Option = Option;
+
+export default Select;
diff --git a/src/index.css b/src/index.css
index 12e77c9..9a7755b 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,5 +1,4 @@
:root {
- font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.5;
font-weight: 400;
@@ -26,6 +25,7 @@ a:hover {
body {
margin: 0;
display: flex;
+ width: 100vw;
place-items: center;
min-width: 320px;
min-height: 100vh;
@@ -36,6 +36,12 @@ h1 {
line-height: 1.1;
}
+ul {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+}
+
button {
border-radius: 8px;
border: 1px solid transparent;
@@ -54,16 +60,3 @@ button:focus,
button:focus-visible {
outline: 4px auto -webkit-focus-ring-color;
}
-
-@media (prefers-color-scheme: light) {
- :root {
- color: #213547;
- background-color: #ffffff;
- }
- a:hover {
- color: #747bff;
- }
- button {
- background-color: #f9f9f9;
- }
-}
diff --git a/src/pages/Kaleidoscope.css.ts b/src/pages/Kaleidoscope.css.ts
new file mode 100644
index 0000000..f5bb1d9
--- /dev/null
+++ b/src/pages/Kaleidoscope.css.ts
@@ -0,0 +1,29 @@
+import { style } from '@vanilla-extract/css';
+
+export const pageWrapper = style({
+ display: 'flex',
+ flexDirection: 'column',
+ height: '100vh',
+ width: '100vw',
+ backgroundColor: 'white',
+});
+
+export const pageTitle = style({
+ fontFamily: 'SF Pro Display',
+ fontSize: '24px',
+ whiteSpace: 'nowrap',
+ textOverflow: 'ellipsis',
+ padding: '0 20px',
+});
+
+export const blurText = style({
+ fontWeight: 'normal',
+ fontSize: '20px',
+ color: 'rgba(0, 0, 0, 0.6)',
+});
+
+export const boldText = style({
+ fontWeight: 'bold',
+ fontSize: '26px',
+ color: 'black',
+});
diff --git a/src/pages/Kaleidoscope.tsx b/src/pages/Kaleidoscope.tsx
index b08403d..9a86ece 100644
--- a/src/pages/Kaleidoscope.tsx
+++ b/src/pages/Kaleidoscope.tsx
@@ -1,7 +1,41 @@
+import Select from '../component/Select';
+import {
+ scrollableContainer,
+ selectedTagStyle,
+ tagStyle,
+} from '../component/Select.css';
+import { boldText, pageTitle, pageWrapper } from './Kaleidoscope.css';
+
+const options = [
+ { value: '전부', label: '전부' },
+ { value: '추억', label: '추억' },
+ { value: '후회', label: '후회' },
+ { value: '혼자', label: '혼자' },
+ { value: '같이', label: '같이' },
+];
+
const Kaleidoscope = () => {
return (
- kaleidoscope
- )
-}
+ <>
+
+
+ 기억
+
+
+
+ {options.map((option) => (
+
+ {option.label}
+
+ ))}
+
+
+
+ );
+};
-export default Kaleidoscope
\ No newline at end of file
+export default Kaleidoscope;
diff --git a/src/pages/Layout.css.ts b/src/pages/Layout.css.ts
index 0daf9aa..b24a9b4 100644
--- a/src/pages/Layout.css.ts
+++ b/src/pages/Layout.css.ts
@@ -6,7 +6,7 @@ export const navBar = style({
left: 0,
width: '100%',
height: '56px',
- backgroundColor: 'lightblue',
+ backgroundColor: '#9BACB4',
display: 'flex',
justifyContent: 'space-around',
alignItems: 'center',
diff --git a/src/pages/Layout.tsx b/src/pages/Layout.tsx
index 13b4cb1..ea3e4a2 100644
--- a/src/pages/Layout.tsx
+++ b/src/pages/Layout.tsx
@@ -2,12 +2,16 @@ import { navBar } from "./Layout.css";
const Layout = ({ children }) => {
return (
-
+ <>
- 1,2,3,4
+ 1
+ 2
+ +
+ 3
+ 4
{children}
-
({});
+
+function useCardContext(): CardContextProps {
+ const context = useContext(CardContext);
+
+ if (!context.onClick) {
+ throw new Error(
+ 'Child components of Card cannot be rendered outside the Card component!'
+ );
+ }
+
+ return context;
+}
+
+interface ChildrenProps {
+ children: ReactNode;
+}
+
+interface CardProps extends ChildrenProps {
+ onClick?: () => void;
+}
+
+const Card = ({ children, onClick }: CardProps) => {
+ return (
+
+
+ {children}
+
+
+ );
+};
+
+const Date = ({ children }: ChildrenProps) => {
+ return {children} ;
+};
+
+Card.Date = Date;
+
+const Heading = ({ children }: ChildrenProps) => {
+ return {children} ;
+};
+
+Card.Heading = Heading;
+
+const Description = ({ children }: ChildrenProps) => {
+ return {children}
;
+};
+
+Card.Description = Description;
+
+const Category = ({ children }: ChildrenProps) => {
+ return {children}
;
+};
+
+Card.Category = Category;
+
+interface ImageProps {
+ src: string;
+ alt: string;
+ type?: string;
+}
+
+const Image = ({ src, alt, type }: ImageProps) => {
+ useCardContext();
+
+ return (
+ ({});
-
-function useClickContext(): ClickContextProps {
- const context = useContext(ClickContext);
-
- if (!context.onClick) {
- throw new Error(
- 'Child components of Click cannot be rendered outside the Click component!'
- );
- }
-
- return context;
-}
-
-interface ChildrenProps {
- children: ReactNode;
-}
-
-interface ClickProps extends ChildrenProps {
- onClick?: () => void;
-}
-
-const Click = ({ children, onClick }: ClickProps) => {
- return (
-
-
- {children}
-
-
- );
-};
-
-interface DateProps extends ChildrenProps {}
-
-const Date = ({ children }: DateProps) => {
- return {children} ;
-};
-
-Click.Date = Date;
-
-interface HeadingProps extends ChildrenProps {}
-
-const Heading = ({ children }: HeadingProps) => {
- return {children} ;
-};
-
-Click.Heading = Heading;
-
-interface DescriptionProps extends ChildrenProps {}
-
-const Description = ({ children }: DescriptionProps) => {
- return {children}
;
-};
-
-Click.Description = Description;
-
-interface ButtonProps extends ChildrenProps {}
-
-const Button = ({ children }: ButtonProps) => {
- const { onClick } = useClickContext();
-
- return (
-
- {children}
-
- );
-};
-
-Click.Button = Button;
-
-interface ImageProps {
- src: string;
- alt: string;
- type?: string;
-}
-
-const Image = ({ src, alt, type }: ImageProps) => {
- useClickContext();
-
- return (
-
))}
+
+
+ {[1, 2, 3, 1, 2, 3].map((m) => (
+ {}}>
+
+ 2022.11.23
+ 여행
+
+ 강원도에서의 겨울
+
+ 국경의 긴 터널을 빠져나오자, 설국이었다. 밤의 아랫쪽이 하얘졌다.
+ 신호소에 기차가 멈춰 섰다. 건너편 좌석의 여자가 일어서
+ 다가오더니, 시마무라 앞의 유리창을 열어젖혔다. 눈의 냉기가
+ 흘러들었다. 여자는 한껏 창 밖으로 몸을 내밀어 멀리 외치는 듯이,
+ "역장니임, 역장니임ー" 등불을 들고 천천히 눈을 밟고 온 남자는
+ 목도리를 콧등까지 두르고, 귀에 모자의 모피를 드리우고 있었다.
+
+
+ ))}
+
);
From 4b9bc6f31cdea99cdad05a2e482777a7c04ccb51 Mon Sep 17 00:00:00 2001
From: afds4567 <33995840+afds4567@users.noreply.github.com>
Date: Wed, 23 Aug 2023 18:32:23 +0900
Subject: [PATCH 08/22] =?UTF-8?q?feat:=20=ED=95=84=EC=9A=94=ED=95=9C=20?=
=?UTF-8?q?=EC=84=A4=EC=A0=95=20=EB=B0=8F=20=EB=B6=88=ED=95=84=EC=9A=94?=
=?UTF-8?q?=ED=95=9C=20=ED=8C=8C=EC=9D=BC=EC=9D=84=20=EC=82=AD=EC=A0=9C?=
=?UTF-8?q?=ED=95=9C=EB=8B=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
index.html | 5 +
mockServer/package.json | 10 +
mockServer/yarn.lock | 424 ++++++++++++++++++++++++++++++++++
package.json | 8 +-
src/App.css | 29 +--
src/App.tsx | 416 ---------------------------------
src/assets/Calender.svg | 8 +
src/assets/Place.svg | 3 +
src/assets/Star.svg | 5 +
src/index.css | 72 ++----
src/pages/Kaleidoscope.css.ts | 42 ----
src/pages/Kaleidoscope.tsx | 73 ------
src/vite-env.d.ts | 1 +
tsconfig.json | 3 +-
tsconfig.node.json | 6 +-
vite.config.ts | 7 +-
yarn.lock | 317 ++++++++++++++++++++++++-
17 files changed, 819 insertions(+), 610 deletions(-)
create mode 100644 mockServer/package.json
create mode 100644 mockServer/yarn.lock
create mode 100644 src/assets/Calender.svg
create mode 100644 src/assets/Place.svg
create mode 100644 src/assets/Star.svg
delete mode 100644 src/pages/Kaleidoscope.css.ts
delete mode 100644 src/pages/Kaleidoscope.tsx
diff --git a/index.html b/index.html
index 96e1ec4..97194af 100644
--- a/index.html
+++ b/index.html
@@ -7,6 +7,11 @@
+
+